/**
* V 2.0
*
* Changelog
* v2.0 - restyling the booking process
* v1.8 - making date selector on the map background color configurable
* v1.7 - making box color in box alt to be the same as default text color
* v1.6 - removing price width 100% on mobile
* v1.5 - added compact event list styling
* v1.4 - added @green-color as it was missing originally + adding @datepicker-hover-color
* v1.3 - added btn-success styling
*/
/**
* Variables
*/
@main-color: #18BCC2;
@box-alt-color: #c00;
@white-color: #FFFFFF;
@black-color: #333333;
@gray-color: #CCCCCC;
@dark-gray-color: #676767;
@green-color: #3c763d;
@link-color: @main-color;
@background-color: @white-color;
@text-color: @black-color;
@header-background-color:@main-color;
@header-color: @main-color;
@header-display: block;
@btn-background-color: @main-color;
@btn-border-color: @main-color;
@btn-background-color-active: @main-color;
@btn-white-background: @white-color;
@btn-white-color: @main-color;
@btn-black-border: @dark-gray-color;
@btn-black-background: @white-color;
@btn-black-color: @dark-gray-color;
@btn-success-color: @white-color;
@btn-success-background-color: @green-color;
@btn-success-border-color: lighten(@green-color, 10%);
@btn-success-background-color-active: darken(@green-color, 10%);
@box-background-color: @box-alt-color;
@box-color: @text-color;
@change-selection-display: none;
@consent-checkboxes-display: block;
@datepicker-background-color: @background-color;
@datepicker-selected-background-color: @main-color;
@datepicker-hover-background-color: @box-alt-color;
@datepicker-hover-color: @main-color;
@display-helpdesk: none;
@display-expander: none;
@product-description-font-size : 100%;
@mask-background-color: rgba(0,0,0,0.8);
@list-payment-snippet-color: @white-color;
@tick-event-border: 10px solid @btn-border-color;
@dateselector-background-color: @box-alt-color;
@dateselector-border-color: @btn-border-color;
@total-color: @main-color;
.btn {
color: @white-color;
background-color: @btn-background-color;
border-color: @btn-border-color;
&:active, &:hover, &:focus {
color: @white-color;
background-color: @btn-background-color-active;
border-color: @btn-border-color;
}
&.btn-success {
color: @btn-success-color;
background-color: @btn-success-background-color;
border-color: @btn-success-border-color;
&:active {
background-color: @btn-success-background-color-active;
}
}
}
a.btn, button.btn {
color: @white-color;
}
.booking-snippet h4 {
background-color: @header-background-color;
}
/*
.top-header {
display: @header-display;
position: fixed !important;
width: 100%;
bottom: 0;
z-index: 1000;
}
*/
body.payments-iframe-layout .top-header {
background-color: @background-color;
}
.cart .category h1,
.cart .category h2,
.cart .category h3,
.cart .category h4,
.cart .category h5 {
color: @text-color;
}
a {
color: @link-color;
&:hover,&:active {
color: @link-color;
}
}
.social-snippet {
h4 {
color: @header-color;
}
.more {
background-color: @header-background-color;
}
}
.pay-again {
color: @text-color;
a.change-card {
color: @link-color;
&:hover,&:active {
color: @link-color;
}
}
}
body.payments-iframe-layout, body.iframe-layout, body.popup-layout {
background-color: @background-color;
color: @text-color;
.top-header {
background-color: @header-background-color;
}
.white-box {
background-color: @background-color;
color: @text-color;
}
.entry-list {
.rows.list .entry {
background-color: @background-color;
color: @text-color;
h2 {
a {
color: @link-color;
}
}
}
}
.popover {
color: @text-color;
.popover-title {
background-color: @background-color;
color: @text-color;
}
.popover-content {
.details {
background-color: @white-color;
color: @black-color;
a {
color: @black-color;
}
}
.action {
color: @black-color;
}
}
}
}
body.iframe-layout, body.popup-layout {
.page.colored {
background-color: @background-color;
}
.content {
background-color: @background-color;
color: @text-color;
}
.location-box {
background-color: @header-background-color;
border-color: @header-background-color;
h4 {
color: @text-color;
}
}
.cart-snippet {
form {
border-color: @header-background-color;
}
.product {
background-color: transparent;
}
h4 {
background-color: @header-background-color;
}
}
.cart {
.category {
background-color: transparent;
.product {
background-color: transparent;
color: @text-color;
&.selected {
color: @btn-white-background;
background-color: @btn-white-color;
}
.name {
color: @text-color;
}
.terms {
span {
color: @link-color;
}
}
.whole-number {
.btn {
background-color: @white-color;
color: @black-color;
border-color: @gray-color;
}
}
.price {
color: @text-color;
}
}
.description {
color: @text-color;
}
}
.terms .terms-content .wrapper {
background-color: @background-color;
}
}
.social-snippet {
background-color: transparent;
}
.card-form {
.pay-again {
}
.fields {
}
}
.btn-pinky-white {
color: @btn-white-color;
background-color: @btn-white-background;
}
.btn-white-lightgray {
color: @btn-black-color;
background-color: @btn-black-background;
border-color: @btn-black-border;
}
.btn-default {
color: @btn-black-color;
background-color: @btn-black-background;
border-color: @btn-black-border;
}
.btn-pink {
color: @btn-white-background;
background-color: @btn-white-color;
}
}
.mask {
background-color: @mask-background-color;
.date {
background-color: @datepicker-background-color;
}
}
.datepicker-container {
color: @text-color;
background-color: @datepicker-background-color;
}
.modal-backdrop {
background-color: @mask-background-color;
}
.modal-backdrop.in {
opacity: 0.8;
}
.modal {
background: @background-color;
.alert-info {
background-color: @header-background-color;
color: @header-color;
}
}
.ticket {
background-color: @background-color;
}
label {
color: @text-color;
}
body.iframe-layout.top-frame {
padding-bottom: 100px;
}
.datepicker table tr td.active.active {
background-color: @datepicker-selected-background-color;
}
.datepicker table tr td.day:hover {
background-color: @datepicker-hover-background-color;
color: @datepicker-hover-color;
}
.share-box span {
color: @text-color;
}
/* Loading screen background color */
body.payments-iframe-layout.loading .loading-screen {
background-color: @background-color;
}
/* New event list style */
article.event {
.list-element__details h2 a {
color: @link-color;
}
.list-payment-snippet__button {
background-color: @main-color;
color: @list-payment-snippet-color;
}
}
/* Compact event list */
body.payments-iframe-layout, body.iframe-layout, body.popup-layout {
.entry-list {
.rows.list .entry.compact {
background: @box-background-color;
color: @text-color;
.action {
.btn-primary {
background-color: @btn-background-color;
}
}
}
}
}
.map-supper-wrapper {
.date-selector .form-group {
background-color: @dateselector-background-color;
border-color: @dateselector-border-color;
}
}
.total-amount {
color: @total-color;
}
.calendar-wrapper .datepicker-inline .table-condensed .active {
background-color: @datepicker-selected-background-color;
}
.card-form .pay-again a.change-card {
color: @link-color;
}
.datepicker table tr td.day {
background: #d3fdff;
}
.datepicker table tr td.day.disabled {
background: transparent;
} Powered by 
