// Base colors. DO NOT IMPORT BASE-COLORS.LESS FILE HERE.
// If you want to add some new colors, add them directly to this file
@sb_active: @sb_base_color;
@border_slot_color: #e9e9e9;
@sb_active_font: contrast(@sb_active, @dark_font_color, @light_font_color);
@btn_color: if((iscolor(@btn_color_1)), @btn_color_1, @sb_base_color);
@formThemeColor: @sb_base_color;
@svg-base-color: fade(@formThemeColor, 99.9%);
//.product-item .preloader{
// svg * {
// fill: none;
// }
//}
.product-item .paid-attr__picture svg,
.products-items-list .product-item .preloader svg{
path[stroke] {stroke: @sb_base_color;}
path[fill] {fill: @sb_base_color;}
circle[stroke] {stroke: @sb_base_color;}
circle[fill] {fill: @sb_base_color;}
}
.sb-cell {
cursor: pointer;
&.free {
&.hovered,
&:hover {
background-color: @sb_active;
color: @sb_active_font;
}
&.buffertime {
background-image: url('/v2/images/admin/icons/pattern.png');
}
}
&.breaktime,
&.reserved,
&.busy_time,
&.busy {
opacity: .4;
cursor: not-allowed;
}
}
.is-widget.line .min-content--line-widget #header.widget.line .nav-trigger,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .flexible-weekly-inner .content-container #sb_time_flexible_weekly_container .data-col .time-container .time-slot.free.wl-slot{
background: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
a{
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
&:hover{
background: darken(@sb_base_color, 4%);
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
a{
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
}
}
.pwa-app--btn,
.invoice-pay-page-grid form input[type='submit'],
.invoice-pay-page-grid form input[type='button'],
.invoice-pay-page .invoice-payment-systems .invoice-payment-systems-info.payment-modal .btn-primary,
.alert--no-slots-btn-bar .btn{
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
&:hover{
background: darken(@btn_color, 4%);
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
}
#header .nav-wrapper .items-wrapper .nav-item#book-btn .book-btn-container .item-container {
background-color: @sb_base_color;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .slots-view.as-table .timeline-wrapper #sb_time_slots_container .slot {
border-right: 1px solid fade(@sb_base_color, 70%);
border-bottom: 1px solid fade(@sb_base_color, 70%);
&:nth-of-type(5n) {
border-right: none;
}
@media (max-width: 767px) {
&:nth-of-type(3n) {
border-right: none;
}
&:nth-of-type(5n) {
border-right: 1px solid fade(@sb_base_color, 70%);
}
}
@media (max-width: 575px) {
border-right: none;
&:nth-of-type(2n - 1) {
border-right: 1px solid fade(@sb_base_color, 70%);
}
}
a {
background-color: @sb_base_color;
color: @light_font_color;
&:hover, &:focus {
background-color: @sb_base_color !important;
}
}
}
.back-to-services {
color: @dark_font_color;
&:hover,
&:focus {
color: @dark_font_color;
}
}
.classes-modal .tab .plugin-group-booking .ui-slider {
background: @sb_base_color;
}
#header .nav-wrapper #sb_menu .nav #sb_appended_menu_item ul li.active a {
color: @sb_base_color;
}
#header .nav-wrapper .items-wrapper .nav-item#sb_client_info .login-container .full-info #sb_login_form .not-logged .bar .btn-bar--row{
.btn--sign-up{
border: 2px solid @btn_color;
color: @btn_color;
background-color: #fff !important;
&:hover {
background-color: #fff !important;
border: 2px solid darken(@btn_color, 10%);
color: darken(@btn_color, 10%);
}
}
}
.btn--next-available-date{
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.btn--next-available-date:active,
.btn--next-available-date:focus,
.btn--next-available-date:hover{
background: darken(@btn_color, 4%);
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
#sb_terms_and_conditions a {
color: @sb_base_color;
}
.remind-pass {
color: @sb_base_color;
}
#news-index .news-list .article .bar .read-more a {
color: @sb_base_color;
}
.page--line-liff .btn-bar .btn,
#reviews-view .add-review .form .send-btn-container button {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.time-legend .unavailable .circle {
opacity: .4;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .grid-weekly-inner table .btn {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .grid-weekly-inner table td .data-trigger {
color: @sb_base_color;
}
.invoice-pay-page .promo-code-input .custom-form .promo-btn {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.service-bar__icon .icon.icon-reccuring .fa {
color: @dark_font_color;
}
.datepicker-button .btn-link {
color: @sb_base_color;
}
.plugin-group-booking .ui-slider,
#membership-plugin .btn-with-icon,
#membership-plugin .mb.btn-bar .active-container .wrapper,
.plugin-group-booking .ui-slider {
background: @btn_color;
}
#membership-view .sb_changed_filter_item {
background-color: @sb_base_color;
color: @light_font_color;
}
#membership-plugin .btn-with-icon a.wrapper,
#membership-plugin .mb.btn-bar .active-container .wrapper,
#membership-view .mb.btn-bar a.wrapper {
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
#membership-plugin .see-more a {
color: #ffffff;
}
#membership-view .mb.btn-bar .active-container a.wrapper,
#membership-view .mb.btn-bar .info-container a.wrapper {
background: @btn_color;
}
.custom-checkbox input:checked + .custom-label {
border-color: @sb_base_color;
background-color: @sb_base_color;
}
#sb_booking_content .tab .btn.select,
#sb_time_classes_service_container .btn.select,
.package-content .btn.select {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
a {
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
}
.item .read-more,
.membership-item .read-more {
color: @sb_base_color;
}
#membership-view #sb_membership_list_container .membership-item .purchased,
.modal-dialog .modal-content .modal-header {
background-color: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
a {
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
}
.custom-radio input:checked + label {
border: 2px solid @sb_base_color;
}
.custom-radio input:checked + label:before {
background-color: @sb_base_color;
}
.license-modal a {
color: @sb_base_color;
}
.sb-widget-form .buttons .send-message-button {
background: @sb_base_color;
}
#remind-password .bar #sb_remind_btn {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
#footer .cookies .wrapper {
.text {
color: @sb_text_color;
}
.btn {
background-color: @btn_color;
}
a {
color: @sb_base_color;
&.link {
color: @sb_cancellation_color;
}
}
}
#footer a {
color: @sb_base_color;
}
.empty-week-time-part {
.btn-next-week {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
}
// Pagination
.pagination-wrapper a,
.pagination-wrapper span {
color: @dark_font_color;
&:hover {
background-color: @sb_base_color;
color: @light_font_color;
}
&.current {
background-color: @sb_base_color;
color: @light_font_color;
}
}
#sb_gdpr_report_module_container #sb_gdpr_email_form .content .form-container .btn {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
#sb_gdpr_send_email_container .btn-send-code,
#sb_gdpr_send_code_container .btn-get-report {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.tab.tab-col.get-gdpr-info-modal .full-info .close-full-info {
background: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
#footer #sb_scroll_top_btn {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
&:hover {
background-color: fade(@btn_color, 70%);
}
}
.error-card .redirect-block .block .btn {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
&:hover {
background-color: darken(@btn_color, 10%);
}
}
.invoice-pay-page .custom-title {
background-color: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
.invoice-payment-systems #sb_pay_btn {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.invoice-deposit-info .btn {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.invoice-pay-page .invoice-btn-bar .btn {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.invoice-pay-page .promo-code-input .custom-form .btn {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.invoice-pay-page #sb_invoice_pager_container .pagination-wrapper .arrow,
.invoice-pay-page #sb_invoice_pager_container .pagination-wrapper a {
&:hover {
background-color: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
&.current {
background-color: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
}
.invoice-pay-page .to-invoices-list:hover {
color: @sb_base_color;
}
.invoice-pay-page .accordion .accordion-header .title {
color: @dark_font_color;
}
.pdf-invoice .invoice-top {
border-bottom: 2px solid @sb_base_color;
}
.pdf-invoice .invoice-top .name {
color: @sb_base_color;
}
.pdf-invoice .general-table thead {
background: @sb_base_color !important;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color) !important;
}
.pdf-invoice .general-table .table thead > tr > th {
border: 1px solid @sb_base_color;
}
.btn-invoice {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
&:hover,
&:focus,
&:active,
&:visited {
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
}
.invoice-table a {
color: @sb_base_color;
}
.accordion a {
color: @sb_base_color;
}
.current-booking-info .info a {
color: @sb_base_color;
}
.wrap-client-info-view .back-button {
color: @dark_font_color;
}
.wrap-client-info-view .client-info-view .btn-bar .btn {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
border-color: @btn_color;
}
.btn.start-date-btn,
.start-date-btn {
a,
.sb_start_date {
color: @sb_base_color;
}
}
#reviews-view .add-review .info .name {
color: @sb_base_color;
}
#sb-timeline #steps #steps-content #sb_booking_content .location-item .address a {
color: @sb_base_color;
}
.sb-widget-form .buttons .open-booking-widget-button {
color: @sb_base_color;
}
.btn-classes {
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
&:hover,
&:focus,
&:active,
&:visited {
text-decoration: none;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
}
@media print {
.pdf-invoice .general-table thead th {
background: @sb_base_color !important;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color) !important;
}
}
/* Grid weekly timeline */
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .grid-weekly-inner .top-inline-steps .parts-of-day .btn,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .grid-weekly-inner .top-inline-steps .days-of-week .btn {
background: transparent;
color: contrast(@light_font_color, @dark_font_color, @light_font_color);
border-color: @border_slot_color !important;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .grid-weekly-inner .top-inline-steps .parts-of-day .btn.active,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .grid-weekly-inner .top-inline-steps .days-of-week .btn.active {
background: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
#sb_timeview_container .timeline-wrapper .grid-weekly-header .grid-weekly-header-item {
background-color: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
.grid-weekly-item .data-trigger {
color: @sb_base_color;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .grid-weekly-table .grid-weekly-body .grid-weekly-row .grid-weekly-item.grid-weekly-button .btn {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
.invoice-pay-page #sb_invoice_pager_container .pagination-wrapper a {
color: @sb_base_color;
}
//#sb_simplybook_terms_link:hover {
// border-bottom-color: @sb_base_color;
//}
.membership-item.panel .btn-bar .btn.price-formatter,
.item.panel .btn-bar .btn {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
.content-mode-list .title,
.content-mode-list .title a,
item.panel .title,
.item.panel .title a {
color: @dark_font_color;
}
.bar-flex-item.price:not(.service-deposit) .txt {
color: @sb_base_color;
}
.panel .plugin-group-booking .active-count .plus,
.panel .plugin-group-booking .active-count .minus {
color: @dark_font_color;
&:hover {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
.panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide,
.panel > .wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide span,
.panel .btn-bar .wrap-read-more .read-more .part,
#sb-timeline #steps #steps-content #sb_booking_content .location-item.panel .address a {
color: #337ab7;
&:hover, &:active, &:focus {
color: #23527c;
}
}
.payment-modal .payment-system-container .payment-system, .payment-modal #sb_payment_systems_container .payment-system {
&:hover,
&.active {
border-color: @sb_base_color;
}
}
#membership-plugin #sb_membership_module_list_container.content-mode-list .membership-item .one-line > .btn-bar .btn.sb_cancel_recurring, #membership-view #sb_membership_list_container.content-mode-list .membership-item .one-line > .btn-bar .btn.sb_cancel_recurring {
background: #F44336;
color: #fff;
}
.phone b,
.phone .txt-wrap,
#content-view #contacts li .phone,
.phone-number {
direction: ltr !important;
}
.confirm-details {
.btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
@formThemeColor: @dark_font_color;
@svg-group-booking: fade(@formThemeColor, 99.9%);
@svgContrastColor: contrast(@sb_base_color, @dark_font_color, @light_font_color);
@svg-contrast-color: fade(@svgContrastColor, 99.9%);
body {
background: @body_bg_color;
color: @dark_font_color;
}
html {
&::-webkit-scrollbar {
_background-color: @body_bg_color;
}
}
.modal-backdrop, body.hasModal:before {
background-color: fade(@dark_font_color, 45%);
background: fade(@dark_font_color, 45%);
}
// Buttons
#main #main-buttons .wrapper .inner .bar {
.btn {
&.book {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
a {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
.is-widget {
.btn {
&.book {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
#sb_booking_content .tab .btn.select {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
a {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
#sb-main-container #main #client-login .custom-form .sign_button_wrap .btn {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
a {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
#main .btn-danger {
background: @sb_cancellation_color;
}
#main #steps #steps-content #sb_booking_content .detail-step .right-side #sb_multiple_booking_btn {
color: @btn_color;
}
#main #sb-timeline #steps #steps-content #sb_booking_content .detail-step .right-side #sb_book_btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
#sb_main {
#sb-main-container {
.return-btn, #sb_back_button {
a {
color: @sb_base_color;
&:hover {
color: @sb_base_color;
}
}
.txt {
color: @sb_base_color;
}
}
}
}
#sb_main .invoice-deposit-info .btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
.error-card .redirect-block .block .btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
&:hover {
background: @sb_base_color;
}
}
.invoice-buttons-container {
> div {
.btn, .btn .txt {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
.timezone-modal.modal-dialog .modal-content .modal-footer .btn {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
a {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
.empty-week-time-part .btn-next-week {
.txt {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
.back-to-site {
.btn-primary {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
.btn.show-all {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
#sb_confirm_license {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
.paym-container {
.btn-primary {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
// Company name
.company-name {
color: @sb_company_label_color;
}
// Titles
.title-main, .title-section {
color: @sb_base_color;
}
.txt {
color: @sb_text_color;
}
// Links
a {
color: @sb_base_color;
&:hover {
color: @sb_base_color;
}
}
// Social icons
#sb_main #sb-main-container {
.brand {
a {
&:after {
background: @sb_base_color !important;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color) !important;
}
}
}
}
.telegram-notifications--card,
.alert-info, .alert-warning, .alert-success {
background: fade(@sb_base_color, 30%);
color: @dark_font_color;
border-color: @sb_base_color;
}
.alert-danger {
background: fade(@sb_cancellation_color, 30%);
color: @dark_font_color;
border-color: @sb_cancellation_color;
}
// Available slot
#main {
.sb-cell.free {
&:hover {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
// Homepage changes
#schedule {
.overview {
tr {
.day, .time {
color: @sb_text_color;
&.day-off {
color: @sb_cancellation_color;
}
}
}
}
}
#contacts {
.info {
ul {
li {
.links {
color: @sb_text_color;
}
}
}
}
}
#header #sb_menu {
background: @body_bg_color;
li {
a {
color: @dark_font_color;
}
&.active {
background: fade(@sb_base_color, 10%);
a {
color: @sb_base_color;
}
}
&:hover {
a {
color: @sb_base_color;
background: fade(@sb_base_color, 10%);
}
}
a:focus {
color: @sb_base_color;
background: fade(@sb_base_color, 10%);
}
}
}
#header .nav-wrapper {
.items-wrapper {
#sb_cart .cart-container .cart {
background: rgba(@sb_base_color, 0.1) !important;
.counter {
background: @dark_font_color;
color: contrast(@dark_font_color, @light_font_color, @dark_font_color);
}
}
.login-container {
.avatar {
background: rgba(@sb_base_color, 0.1) !important;
}
.full-info {
#sb_login_form {
.not-logged {
.bar {
.txt {
.btn {
background: @btn_color !important;
}
}
}
}
.is-logged {
.cap {
b {
color: @sb_base_color;
}
}
.bar-with-btn {
.sb-client-info-popup {
background: @btn_color;
}
#sb_sign_out_btn {
color: @sb_cancellation_color;
}
}
}
}
}
}
.item-container {
background: @secondary_color;
}
.nav-trigger {
background: @sb_base_color;
&.opened {
span {
background: @sb_base_color;
}
}
span {
background: contrast(@sb_base_color, @light_font_color, @dark_font_color);
&:before, &:after {
background: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
}
// Item (Services)
#sb-timeline {
// Reschedule layout
.reschedule-layout {
.reschedule--row {
.reschedule--selected-list {
.sb-details {
.reschedule--selected-item {
.reschedule--selected-title, .reschedule--selected-name {
.txt {
color: @dark_font_color;
}
}
}
}
}
}
}
#steps {
// Timezone settings
#time-settings {
#sb_booking_company_time {
.btn {
background: @btn_color;
}
}
}
#steps-content {
.step-content {
.item {
&.panel {
border-color: @sb_base_color !important;
.preloader {
background: @secondary_color;
}
.info-bar {
.ico {
color: @sb_text_color;
}
a {
color: @sb_base_color;
.txt {
color: @sb_base_color;
}
}
.price {
color: @dark_font_color;
.txt {
color: @dark_font_color;
}
}
}
.read-more, .btn-hide {
color: @sb_base_color;
span {
color: @sb_base_color;
}
}
@media (max-width: 480px) {
.read-more {
border-color: fade(@sb_base_color, 30%) !important;
}
}
> .wrap-collapse-content {
.collapse-content {
color: @sb_text_color;
}
}
}
.tab {
border-color: @sb_base_color !important;
.provider-link, .preloader {
background: @secondary_color;
}
.cap {
color: @dark_font_color;
}
.txt {
color: @sb_text_color;
}
.badge {
color: @dark_font_color;
}
.service-bar__text, .service-bar__text a {
color: @dark_font_color;
}
.service-bar__text a:hover {
color: @sb_base_color;
}
}
}
}
.datetime-step {
#sb_dateview_container {
.top-date-select {
.header {
.row > div[class*="col"] {
.txt-right, .txt-left {
.fa {
color: @dark_font_color;
}
}
}
}
.calendar {
.inner.selected {
background: @sb_base_color !important;
}
.weeks-date {
.date.selected {
background: @sb_base_color !important;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
.day-off {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color) !important;
}
a {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color) !important;
}
}
}
.weeks-name {
.col-md-4 {
.name {
&.is-holiday {
color: @sb_cancellation_color !important;
}
}
}
}
}
}
}
}
#sb_timeview_container {
// Modern timeline as table view
.as-table {
.timeline-wrapper {
#sb_time_slots_container {
.slot {
a {
background: @secondary_color !important;
color: @dark_font_color !important;
&:hover, &:focus {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color) !important;
}
}
}
}
}
}
.timeline-wrapper {
.container-caption {
color: @sb_base_color;
}
// Slots weekly
#sb_time_slots_weekly_container {
.data-col {
.day-container {
&.is-holiday {
.date, .day {
color: @sb_cancellation_color;
}
}
.date, .day {
color: @dark_font_color;
}
.border {
background: @secondary_color;
}
}
.time-container {
.time-slot {
.cell {
&.free {
color: @dark_font_color;
&:hover {
background: @sb_base_color !important;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
}
}
}
// Modern
#sb_time_slots_container .slot a {
color: @dark_font_color;
&:hover {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
// Flexible
#sb_time_flexible_container {
.hour-line {
.hour-head {
color: @sb_text_color;
}
}
.sb_time_flexible_hour_container {
.time-slot {
.cell {
color: @dark_font_color;
&.hovered, &:hover {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
}
// Modern Provider
#sb-time-classes-container {
&.classes-plugin {
.provider-container {
.provider-col {
.provider-item {
.cell {
background: @secondary_color;
border-color: fade(@dark_font_color, 15%) !important;
color: @dark_font_color;
&:hover {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
.full-info {
.close-full-info {
background: @sb_cancellation_color !important;
}
.badge {
color: @dark_font_color;
}
}
}
}
}
}
.inner {
.hour-container .hour-row {
.time {
color: @sb_text_color;
}
}
.provider-container {
.provider-col {
.provider-item {
.sb-cell {
border-color: @dark_font_color;
}
}
}
}
}
}
// Weekly classes
.grid-weekly-inner {
.top-inline-steps {
> .row > div[class*="col"] {
.parts-of-day, .days-of-week {
.btn {
&.active {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
}
#sb_time_grid_weekly_container {
.grid-weekly-table {
.grid-weekly-header {
.grid-weekly-header-item {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
.grid-weekly-body {
.grid-weekly-row:nth-child(odd) .grid-weekly-item {
background: fade(@sb_base_color, 10%);
}
.grid-weekly-available-slots {
.slot--available-slot {
color: @dark_font_color;
}
}
.grid-weekly-serice {
.tab-pd {
.badge {
color: @dark_font_color;
}
}
}
@media (max-width: 767px) {
.grid-weekly-row {
border-color: fade(@sb_base_color, 20%);
}
}
}
}
}
}
// Flexible Provider
#sb-flexible-provider {
.inner {
.inner-sidebar {
.hour-line {
.hour-head {
color: @sb_text_color;
}
}
}
}
#sb_time_flexible_provider_container .provider-col .provider-item .time-slot .time-cell:not(.breaktime) {
color: @dark_font_color;
&.hovered {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
&:before {
background: @sb_base_color;
}
}
&:hover {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
&:before {
background: @sb_base_color;
}
}
}
}
// Flexible weekly
.flexible-weekly-inner {
.hour-container {
.time {
color: @sb_text_color;
}
}
#sb_time_flexible_weekly_container {
.day-container {
.date, .day {
color: @dark_font_color !important;
&.is-holiday {
color: @sb_cancellation_color !important;
}
}
.date {
&.is-holiday {
color: @sb_cancellation_color;
}
}
}
.time-container {
.time-slot {
border-color: @dark_font_color;
&.hovered {
background: @sb_base_color;
}
}
}
}
}
}
}
.time-legend {
color: @dark_font_color;
.available {
.circle {
border-color: @dark_font_color;
}
}
.unavailable {
.circle {
background: @sb_text_color;
}
}
.day-offset-warning {
color: @sb_text_color;
}
}
}
}
}
// Group booking input / Product item counter
#main, #sb_main {
.active-count {
.plus, .minus {
background: @sb_base_color;
&:before, &:after {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
// Back button
#sb_main #sb-main-container {
#steps {
#sb_back_button {
a {
color: @sb_base_color;
}
}
}
}
// Navigation steps
#sb-timeline {
#steps-nav {
ul {
.step_info_item {
&:before, &.passed + li:not(.passed):before {
background: @sb_base_color;
}
&:not(.passed):before {
background: @secondary_color;
}
&.passed + li:not(.passed) .content .title-small {
color: @sb_base_color !important;
}
&:not(.passed) .content .title-small {
color: @sb_text_color;
}
.content {
.title-small, .title-sub {
color: @dark_font_color;
}
}
}
}
}
}
// Client login step
#main {
#client-login {
#cs_register_or_login_tabs {
ul {
li {
&.active {
a {
color: @sb_base_color;
border-color: @sb_base_color !important;
}
}
a {
color: @dark_font_color;
}
}
}
}
.to-sign-up {
&__link {
color: @sb_base_color;
}
}
}
}
// Slot available
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper .slot--available-slot,
#time_classes_time_container .sb-cell .slot--available-slot {
background: @dark_font_color !important;
color: contrast(@dark_font_color, @light_font_color, @sb_base_color);
}
// Form
// Inputs
.form-group, .timezone-modal, #sb_login_form {
.control-label {
color: @sb_text_color;
}
&.has-error {
.form-control,
.file-upload__wrapper{
border-color: @sb_cancellation_color;
}
}
.form-control, input, textarea {
border-color: @secondary_color;
color: @dark_font_color;
&::placeholder {
color: @sb_text_color;
}
&:focus, &.not-empty {
border-color: @sb_base_color;
}
}
}
.file-upload{
&__wrapper{
border-color: #e4ebf5;
&.selected {
border-left: 3px solid #4caf50;
}
}
}
#sb_additional_fields .form-group .control-label.required:after {
color: @sb_cancellation_color;
}
.has-error {
.help-block {
color: @sb_cancellation_color;
}
}
// Misc
.has-error {
.custom-checkbox .custom-label {
border-color: @sb_cancellation_color !important;
}
}
// Checkboxes
#main .custom-checkbox, #sb_main .custom-checkbox {
.custom-label {
border-color: @secondary_color;
}
input:checked + .custom-label {
border-color: @sb_base_color;
&:before {
color: @sb_base_color;
}
}
}
#main .has-error .custom-checkbox, #sb_main .has-error .custom-checkbox {
input:checked + .custom-label {
border-color: @sb_cancellation_color;
&:before {
color: @sb_cancellation_color;
}
}
}
#sb-main-container #main {
#steps-content #sb_booking_content #details .product-attribute-section .product-list-view-wrapper #sb_attribute_list_container,
#steps-content #sb_booking_content #details .products-items-list,
#sb-timeline #steps #steps-content #sb_booking_content .paid-attribute-wrapper .paid-attribute-step #sb_attribute_list_container {
.product-item .product-label:before {
border-color: @secondary_color !important;
}
.item {
.preloader {
background: @secondary_color;
}
&.panel {
.preloader {
background: @secondary_color;
}
.info-bar {
.bar-flex-item {
&.price {
.txt {
color: @dark_font_color;
}
}
.ico {
color: @sb_text_color;
}
}
}
.read-more, .btn-hide {
color: @sb_base_color;
span {
color: @sb_base_color;
}
}
> .wrap-collapse-content {
.collapse-content {
color: @sb_text_color;
}
}
}
.badge {
color: @dark_font_color;
}
}
.product-item .product-label:after {
color: @sb_base_color;
}
.product-item input.check:checked + .product-label:before {
border-color: @sb_base_color !important;
}
}
#steps-content #sb_booking_content #details .product-attribute-section .product-list-view-wrapper #sb_attribute_list_container .paid-attr__item.panel .bar-service {
&__item {
.ico {
color: @sb_text_color;
}
.txt {
color: @dark_font_color;
}
}
}
}
#sb-main-container #main #client-login .client-login-bar {
.txt {
color: @dark_font_color;
}
}
#sb_main .current-booking-info {
.preloader {
background: @secondary_color;
}
.cap {
color: @sb_base_color;
}
.accordion {
.title {
color: @dark_font_color;
&:after {
color: @dark_font_color;
}
}
}
.booking-btns {
.col-sm-12 {
.sb_cancel_btn {
background: @sb_cancellation_color;
}
}
}
}
.subscribe-component--btn-bar .btn-bar--row .btn.btn-danger{
background: @sb_cancellation_color;
}
.subscribe-component--btn-bar .btn-bar--row .btn.btn-primary{
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
// Invoice payment page
#main {
.invoice-pay-page {
.tab {
.invoice-pay-page-grid {
.left-block {
// Promotions instances
.promotion-instances-list {
> div {
.promo-list-item {
border-color: @sb_base_color !important;
color: @dark_font_color;
}
}
}
.promo-code-input {
.custom-form {
.control-label {
color: @sb_base_color;
}
.form-control {
border-color: @secondary_color !important;
color: @dark_font_color;
&::placeholder {
color: @sb_text_color;
}
&:focus, &.not-empty {
border-color: @sb_base_color !important;
}
}
.promo-btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
.right-block {
.section-pd {
.info {
background: @sb_base_color;
.total, p {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
}
}
// Invoices list
.invoice-table {
thead {
background: @sb_base_color;
th {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
tbody {
tr:nth-child(odd) {
background: fade(@sb_base_color, 5%);
}
}
}
// Invoice pager
#sb_invoice_pager_container {
.pagination-wrapper {
.arrow:hover, a:hover {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
}
// News page
#news-index {
.news-list {
#sb_news_list_container {
.article {
border-color: @sb_base_color !important;
.cap {
a {
color: @dark_font_color;
}
}
}
}
}
}
#news-single {
.article {
.cap, .date {
color: @dark_font_color;
}
}
}
#sb-main-container #main {
#booking-result-tabs {
.tabs-container {
.tab-link {
&.active {
a {
color: @sb_base_color;
}
}
}
}
}
// Memberships
.filter {
.title-main {
color: @dark_font_color;
}
.filter-list {
.form-control {
border-color: @secondary_color;
color: @dark_font_color;
&::placeholder {
color: @sb_text_color;
}
&:focus, &.not-empty {
border-color: @sb_base_color !important;
}
}
.sb_changed_filter_item {
border-color: @sb_base_color;
color: @dark_font_color;
//.sb_remove_item:before, .sb_remove_item:after {
// background-color: @dark_font_color;
//}
}
}
}
#sb_membership_list_container, #sb_membership_module_list_container {
.membership-item {
&.panel {
border-color: @sb_base_color !important;
.preloader {
background: @secondary_color;
}
.info-bar {
.purchased {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
.ico {
color: @sb_text_color;
}
.value {
color: @sb_text_color;
}
}
.read-more, .btn-hide {
color: @sb_base_color;
span {
color: @sb_base_color;
}
}
> .wrap-collapse-content {
.collapse-content {
color: @sb_text_color;
}
}
}
.tab {
border-color: @sb_base_color;
.purchased {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
.preloader {
background: @secondary_color;
}
.active-container, .info-container {
.btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
a.price-formatter {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
}
// Reviews
#reviews-view {
.reviews-toggle {
.reviews-toggle__link {
color: @dark_font_color;
&.active {
color: @sb_base_color;
border-color: @sb_base_color !important;
}
}
}
// Add review
#sb_reviews_add_container {
.add-review {
.form {
.form-group {
input, textarea {
color: @dark_font_color;
border-color: @secondary_color !important;
&::placeholder {
color: @sb_text_color;
}
&:focus, &.not-empty {
border-color: @sb_base_color !important;
}
}
}
}
.avatar {
.info {
.name {
color: @dark_font_color;
}
}
.logout {
color: @sb_cancellation_color;
}
}
.send-btn-container {
.btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
// Reviews list
#sb_reviews_list_container {
#sb_reviews_list_items_container {
.review-item {
.review-tab {
.cap, .comment {
color: @sb_text_color;
}
.delete-button {
background: @sb_cancellation_color;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
}
.review-likes {
.like-count {
color: @dark_font_color;
}
.vote-tooltip {
background-color: @dark_font_color;
color: contrast(@dark_font_color, @light_font_color, @dark_font_color);
&:before {
border-bottom-color: @dark_font_color;
}
}
}
}
}
}
}
// Packages
.package-content-page {
.page-pd-package-content {
#sb_package_list_container, #sb_package_client_instance_list_container {
> div {
.package-item {
&.panel {
border-color: @sb_base_color !important;
.preloader {
background: @secondary_color;
}
.info-bar {
.ico {
color: @sb_text_color;
}
.value {
color: @sb_text_color;
}
}
.bar-flex-item {
&.package-list-short-pd {
background: fade(@sb_base_color, 5%);
}
}
.read-more, .btn-hide {
color: @sb_base_color;
span {
color: @sb_base_color;
}
}
> .wrap-collapse-content {
.collapse-content {
color: @sb_text_color;
}
.selected-package-list {
background: fade(@sb_base_color, 5%);
.package-list-item {
color: @dark_font_color;
}
}
}
}
.is-used {
background: @sb_cancellation_color;
color: contrast(@sb_cancellation_color, @dark_font_color, @light_font_color);
.txt {
color: contrast(@sb_cancellation_color, @dark_font_color, @light_font_color);
}
}
.tab {
border-color: @sb_base_color !important;
.preloader {
background: @secondary_color;
}
.btn.select {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
}
}
}
// Gift cards
.promotion-list {
.promotion-step {
.promotion-item {
&.panel {
border-color: @sb_base_color !important;
.preloader {
background: @secondary_color;
}
.promo-label {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
.txt {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
&.discount {
background: @sb_cancellation_color !important;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
.txt {
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
}
&.amount {
background: @sb_base_color !important;
}
}
.info-bar {
.ico {
color: @sb_text_color;
}
a {
color: @sb_base_color;
.txt {
color: @sb_base_color;
}
}
.price {
color: @dark_font_color;
.txt {
color: @dark_font_color;
}
}
}
.read-more, .btn-hide {
color: @sb_base_color;
span {
color: @sb_base_color;
}
}
@media (max-width: 480px) {
.read-more {
border-color: fade(@sb_base_color, 30%) !important;
}
}
> .wrap-collapse-content {
.collapse-content {
color: @sb_text_color;
}
}
}
.used-overlay {
.text {
//background: @sb_cancellation_color;
//color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
}
.promo-label {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
&.discount {
background: @sb_cancellation_color;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
&.amount {
background: @sb_base_color;
}
}
.tab {
border-color: @sb_base_color !important;
.preloader {
background: @secondary_color;
}
.badge {
color: @dark_font_color;
}
.btn-bar {
.btn.select {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
.btn.select-by-bonus{
background: #fff;
color: @btn_color;
&.disabled{
color: @dark_font_color;
}
}
}
}
}
}
}
// Bookings result
#booking-result-view {
#sb_bookings_list {
> div {
.booking-item {
.tab {
border-color: @sb_base_color !important;
.cap {
color: @dark_font_color;
}
.booking-btns {
.sb-book {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
a {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
.sb-reschedule {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
a {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
.sb-medical-test-download,
.sb_add_to_cal {
color: @sb_base_color;
a {
color: @sb_base_color;
}
}
.sb_cancel_btn {
background: @sb_cancellation_color;
&:before {
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
}
}
}
}
}
}
}
// Inline datepicker
.datepicker.datepicker-dropdown {
table {
th {
color: @dark_font_color;
}
tr td {
color: @dark_font_color;
&.day {
&:not(.disabled):hover, &:not(.day-off):hover, &.active:hover {
background: @sb_base_color !important;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
&.active {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
&.today {
background: fade(@sb_base_color, 30%);
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
.month, .year {
&.active, &:not(.disabled):hover, &.active:hover {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
.modal {
.modal-dialog, .timezone-modal.modal-dialog {
// Other misc modals
.modal-content {
.modal-header {
.close {
background: @sb_cancellation_color;
span {
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
}
.modal-title {
color: @sb_base_color;
}
}
.modal-body {
.calendar-popup {
ul {
li {
.btn {
a {
color: @dark_font_color;
}
}
}
}
}
}
.modal-footer {
.tab-pd {
#sb_cancellation_cancel {
color: @sb_base_color;
}
#sb_cancellation_confirm {
background: @sb_base_color;
}
//Cancel timezone modal
#sb_cancel_button {
color: @sb_cancellation_color;
}
}
#sb_review_delete_confirm {
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
#sb_review_delete_cancel {
color: @sb_cancellation_color;
}
}
}
.get-gdpr-info-modal {
.full-info {
.close-full-info {
background: @sb_cancellation_color !important;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
.content {
color: @sb_text_color;
}
.btn-get-report {
color: contrast(@btn_color, @light_font_color, @dark_font_color) !important;
}
}
}
// Modals for booking steps
.full-info {
.close-full-info {
background: @sb_cancellation_color;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
.preloader {
background: @secondary_color;
}
}
// Remind password modal, Client profile modal, Client profile edit modal
#remind-password, #client-profile-preview, #client-profile-edit {
.cap {
color: @sb_base_color;
}
.close-modal {
background: @sb_cancellation_color;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
.bar {
#sb_remind_btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
.overview {
.label {
color: @sb_text_color;
}
.txt {
color: @dark_font_color;
}
}
.bar-with-btn {
.btn-edit {
color: @sb_base_color;
}
.btn-invoices, .btn-bookings, .btn-bonuses, .btn-primary {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
}
.current-booking-info {
.booking-btns {
.modal-footer {
.btn {
background: @sb_cancellation_color !important;
}
}
}
}
.modal-dialog {
#sb_time_classes_service_container {
.item {
.preloader {
background: @secondary_color;
}
.txt {
color: @sb_text_color;
}
.badge {
color: @dark_font_color;
}
}
}
#time_classes_time_container {
.sb-cell {
color: @dark_font_color;
&:hover {
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
}
}
}
// GDPR report page
#gdpr-report-view {
.page-pd {
#sb_gdpr_control_panel_container {
.btn-primary {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
.btn-gdpr-report-logout {
.txt {
color: @sb_cancellation_color;
}
}
}
.main-gdpr-report {
.btn-default {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
}
// GDPR popup form
#sb_gdpr_email_form {
.title {
color: @sb_base_color;
}
.sb_gdpr_close_form_btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
.sb_gdpr_close_form_btn {
background: @sb_cancellation_color;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
.content {
color: @sb_text_color;
}
.btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color) !important;
}
}
// Client profile modal
#client-profile-preview {
.section-pd {
.bar-with-btn {
.btn {
&.btn-logout {
color: @sb_cancellation_color;
border: 1px solid @sb_cancellation_color;
}
}
}
}
}
// Edit profile modal
#client-profile-edit {
.bar-with-btn {
.btn {
&.btn-danger {
color: @sb_cancellation_color;
}
}
}
}
#footer {
#sb_scroll_top_btn {
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
// Addons step
#sb-timeline #steps #steps-content #sb_booking_content .paid-attribute-wrapper {
width: calc(100% + 15px);
margin: 40px -15px 0;
.paid-attribute-step {
.product-item {
border-color: @border_slot_color !important;
&.selected {
background: fade(@sb_base_color, 10%) !important;
border-color: @sb_base_color !important;
}
.item-price {
color: @sb_base_color;
}
}
}
.paid-attribute-footer {
background: fade(@sb_base_color, 5%) !important;
.btn.next {
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
.sb-client-fields {
border-bottom-color: @secondary_color !important;
}
///
#sb_multiple_book_cart {
.counter {
background: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
//color: #ffffff;
a {
//color: #fffffe;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
}
}
.promotion-list .promotion-item .badge {
color: @sb_base_color;
}
.promotion-item .select a {
background-color: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
#sb_menu a {
color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
@media only screen and (max-width: 1024px) {
color: #464646;
}
}
.btn.book-btn {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
//color: #ffffff;
a {
color: contrast(@btn_color, @dark_font_color, @light_font_color);
//color: #fffffe;
}
}
#footer .copyright {
color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
}
#header .nav-wrapper .items-wrapper .nav-item#book-btn .book-btn-container .item-container {
background: @sb_base_color;;
}
.modal-dialog .modal-content .modal-header {
background: @sb_base_color;
.modal-title {
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
}
}
#booking-result-view #booking-result-tabs .tabs-container .tab-link {
a {
color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
}
&.active {
a {
border-bottom-color: @sb_base_color;
}
}
}
#sb-timeline #steps-nav li:not(.passed) {
.title-small {
color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
}
}
#sb-timeline #steps #steps-content #sb_booking_content .detail-step .right-side #sb_book_btn {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
//color: #ffffff;
a {
//color: #fffffe;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
}
.payment-modal #sb_pay_btn {
color: @light_font_color;
}
#news-index .news-list .article .cap a {
color: @sb_base_color;
}
//timeline colors
.badge {
background: @sb_base_color;
color: contrast(@sb_base_color, @dark_font_color, @light_font_color);
&:before {
border-top: 40px solid @sb_base_color;
}
&:after {
border-top: 5px solid @sb_base_color;
}
}
#main #main-content #sb_content #sb_product_container .sb-list-type.simple-list .product-item .item-data .badge {
color: @dark_font_color;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .header span {
color: @sb_base_color;
}
.plugin-group-booking:before {
background: url('data:image/svg+xml;utf8,');
background-size: 18px;
background-repeat: no-repeat;
background-position: left center;
}
.service-item .bar-service .badge {
color: @sb_base_color;
}
.service-item .bar-service .service-deposit .text {
color: @dark_font_color;
}
.active-count .plus:before:hover {
border-bottom-color: @sb_base_color;
}
.active-count .minus:after:hover {
border-top-color: @sb_base_color;
}
.service-bar__icon .icon.icon-reccuring .fa.fa-refresh:before {
background: url('data:image/svg+xml;utf8,');
background-size: 24px;
background-repeat: no-repeat;
background-position: right center;
}
.tab.tab-col .read-more,
.provider-item .read-more,
.membership-item .read-more {
color: @sb_base_color;
}
#sb-main-container .custom-checkbox input:checked + .custom-label {
border-color: @sb_base_color;
background-color: @sb_base_color;
}
#sb_membership_container .alert-info a {
color: @sb_base_color;
}
.current-booking-info .btn.sb-ticket-download {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.current-booking-info .btn.sb-ticket-download .txt {
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.page-content--online-meeting .online-meeting{
border-color: @sb_base_color;
}
//RTL
html[dir="rtl"] #sb-timeline #steps #steps-content #sb_booking_content .datetime-step .timeline-wrapper #sb_time_flexible_weekly_container .data-col .time-container .time-slot {
border-right: inherit;
border-left: 1px solid @border_slot_color;
}
// Theme main icons color
.preloader,
.photo,
.provider-item .default,
.empty-step__image,
//.invoice-pay-page,
.invoice-notifications,
.error-card ,
.page-content--online-meeting .online-meeting__picture {
svg {
path[stroke] {stroke: @sb_base_color;}
path[fill] {fill: @sb_base_color;}
circle[stroke] {stroke: @sb_base_color;}
circle[fill] {fill: @sb_base_color;}
}
}
// Samesite cookies popup
.samesite-cookies {
background: fade(@body_bg_color, 70%);
&__popup {
background: @body_bg_color;
&-btn {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
&:hover {
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
}
&-link {
color: @sb_base_color;
}
}
}
#sb-main-container #header .nav-wrapper #sb_menu .nav {
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 5px;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: fade(@sb_base_color, 20%);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background-color: @sb_base_color;
border-radius: 4px;
border: none;
}
&::-webkit-overflow-scrolling:touch {
width: 5px;
}
}
.paid-attr__item .preloader svg {
path[stroke] {stroke: @sb_base_color;}
path[fill] {fill: @sb_base_color;}
circle[stroke] {stroke: @sb_base_color;}
circle[fill] {fill: @sb_base_color;}
}
.telegram-notifications{
&--modal {
.modal-dialog .modal-content {
.modal-header {
.modal-title {
color: @sb_base_color;
}
}
}
.close-full-info{
background: @sb_cancellation_color !important;
color: contrast(@sb_cancellation_color, @light_font_color, @dark_font_color);
}
}
&--card{
.btn{
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
&__btn-bar{
.btn{
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
.login-container__remember-check {
background: @dark_font_color;
svg path {
stroke: contrast(@dark_font_color, @light_font_color, @dark_font_color);
}
}
.bonus{
&__count-row{
.icon{
color: @sb_base_color;
}
}
&__count {
color: @sb_base_color;
}
&__amount{
color: @sb_base_color;
&.no-income{
color: #FF7993;
}
}
&__table{
thead{
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
th{
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
border-bottom: none !important;
}
}
tbody{
tr{
background: transparent;
&:nth-child(odd) {
background: fade(@sb_base_color, 10%);
}
&:nth-child(even) {
background: #fff;
}
}
}
}
&__btn-bar--wrapper{
.btn{
background: @btn_color;
color: contrast(@btn_color, @light_font_color, @dark_font_color);
}
}
}
.tab.tab-col .excerpt-info .btn-bar ,
.tab.tab-col .excerpt-info .btn-bar {
button.btn.select-by-bonus,
a.btn.select-by-bonus{
background-color: #fff !important;
color: @sb_base_color;
&.disabled{
color: @dark_font_color;
background: transparent !important;
box-shadow: none;
}
}
}
.service-bonus,
.info.bonus,
#sb-timeline #steps #steps-content #sb_booking_content .service-item .service-bonus{
color: @sb_base_color;
}
.promotion-list .promotion-step .promotion-item .modal-dialog .preloader.img-full .default.img{
background: @secondary_color;
}
.promotion-list .promotion-item .modal-dialog .item__additional-info-action .promo-label__text,
.promotion-list .promotion-item .modal-dialog .item__additional-info-action .promo-label__value,
.promotion-list .promotion-item .modal-dialog .item__additional-info-action .used-label__text{
color: @dark_font_color;
}
.invoice-pay-page .promo-code-input .control-label .dropdown-menu{
color: @dark_font_color;
}
.payment-modal .payment-system-container .payment-system,
.payment-modal #sb_payment_systems_container .payment-systemm,
#sb-main-container #main .invoice-pay-page .tab .invoice-pay-page-grid .left-block .section-pd #sb_package_instance_container .accordion .accordion-header{
background: rgba(@sb_base_color, 0.10);
}
// Date field icon
.calendar-toggle {
&__icon path {
fill: @sb_base_color;
&:last-child {
fill: none;
stroke: @sb_base_color;
}
}
}
.sb-layout .promotion-list .promotion-item__tag .promo-label.amount {
background-color: #64b5f6;
color: #fff;
}
.pwa-app--btn:hover,
.pwa-app--btn:focus,
.pwa-app--btn:active{
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.pwa_install__button-link{
color: @sb_base_color;
}
.pwa-app--install-page .loader:before{
border-color: @sb_base_color;
}
// invoice-notification buttons
.invoice-notification--pay,
.invoice-notification.closed .invoice-notification--open{
background-color: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
&:hover{
color: contrast(@btn_color, @dark_font_color, @light_font_color);
background-color: darken(@btn_color, 8%);
}
}
.invoice-notification--close{
color: @sb_base_color;
&:hover{
color: darken(@sb_base_color, 8%);
background-color: rgba(@sb_base_color, 0.1);
}
}
.invoice-notification--close-tooltip {
color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
background: @body_bg_color;
&:after {
border-top-color: @body_bg_color;
}
}
// product shop catalog
.step-content--product .item .badge{
color: @sb_base_color;
background: unset;
}
.product-view--history_list{
border-color: rgba(@dark_font_color, 0.2);
}
.product-view--history_item{
color: @dark_font_color;
}
.product-view--history_item.passed:hover{
color: @sb_base_color;
}
.invoice-pay-page-grid_item.right-block .right-block--section-pd,
.full-info.full-info--cart{
background: @body_bg_color;
color: @dark_font_color;
box-shadow: 2px 0px 20px rgba(@dark_font_color, 0.25);
}
.invoice-pay-page .invoice-pay-page-grid_item.right-block .right-block--section-pd{
border-color: rgba(darken(@dark_font_color, 100%), 0.15);
box-shadow: 2px 0px 18px rgba(@dark_font_color, 0.15);
}
.product-delivery-container > div,
.invoice-tips .tips-view,
.invoice-pay-page.invoice-pay-page--select-pm .promo-code-input,
.invoice-used-packages-list .accordion-wrapper,
.full-info--cart_module .full-info--cart_footer,
.btn-group .full-info--cart_item-count,
.full-info--cart_item,
.full-info--cart_item-product .btn-group{
border-color: rgba(darken(@dark_font_color, 100%), 0.2) !important;
}
.full-info--cart_module .package-use-credits-msg{
border-color: @sb_base_color !important;
}
.full-info--cart_close-btn,
.full-info--cart_item-delete {
background: rgba(#fff3f3, 0.1);
color: #ff3259;
}
.full-info--cart_close-btn,
.full-info--cart_item-delete:active,
.full-info--cart_item-delete:hover {
background: rgba(#fff3f3, 0.8);
color: darken(#ff3259, 6%);
}
.full-info--cart_close-btn,
.full-info--cart_item-delete:focus {
background: rgba(#fff3f3, 0.8);
color: darken(#ff3259, 6%);
}
.full-info--cart_item-product .btn-group .full-info--cart_item-action:hover,
.full-info--cart_item-product .btn-group .full-info--cart_item-action:focus,
.full-info--cart_item-product .btn-group .full-info--cart_item-action:active{
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: rgba(@sb_base_color, 0.2);
color: darken(@sb_base_color, 8%);
}
.full-info--cart_item-product .btn-group .full-info--cart_item-action:disabled{
cursor: not-allowed;
color: #222 !important;
background: #f8fafc !important;
border-color: darken(#f8fafc, 6%) !important;
text-shadow: none !important;
opacity: 0.5;
*{
color: #222 !important;
}
}
.invoice-pay-page-grid_item.right-block .right-block--body table thead{
background: darken(@body_bg_color, 10%);
color: contrast(@body_bg_color, @dark_font_color, @light_font_color);
}
.full-info--cart_header .title svg path{
fill: @sb_base_color;
}
.products-view--wrapper .step-content--product .item .preloader {
background: @secondary_color;
}
.products-view--wrapper .step-content--product .item .btn-bar .btn{
background: @sb_base_color;
color: contrast(@sb_base_color, @light_font_color, @dark_font_color);
}
.product-item.panel .btn-bar .wrap-read-more .read-more .part{
color: @sb_base_color;
}
.products-view--wrapper .step-content--product > div .item.panel,
.products-view--wrapper .step-content--product > div .item > .tab{
border-color: @sb_base_color;
}
.duotone .fill,
.product-item .preloader .duotone .fill {
fill: @sb_base_color;
}
.duotone .fill-darker,
.product-item .preloader .duotone .fill-darker {
fill: darken(@sb_base_color, 8%);
}
.duotone .fill-darker-stroke,
.product-item .preloader .duotone .fill-darker-stroke {
stroke: darken(@sb_base_color, 8%);
fill: none;
}
.duotone .fill-stroke,
.product-item .preloader .duotone .fill-stroke {
stroke: @sb_base_color;
fill: none;
}
.full-info--cart_bookings .full-info--cart_list .full-info--cart_item-service .full-info--cart_item-image .default.img svg {
path[stroke] {stroke: @sb_base_color;}
path[fill] {fill: @sb_base_color;}
circle[stroke] {stroke: @sb_base_color;}
circle[fill] {fill: @sb_base_color;}
}
// time different informer on booking step
.current-booking-info .info .date-line .dropdown-toggle{
color: @sb_base_color;
}
.filter--list-header{
color: @sb_base_color;
border-color: @sb_base_color;
background: rgba(@sb_base_color, 0.1);
}
.subscribe-component--popup .modal-content #booking-result-popup .modal-header .close-modal{
color: @dark_font_color;
background: transparent;
}
.subscribe-component--popup .modal-content #booking-result-popup .modal-header .close-modal:hover{
color: #f44336;
background: transparent;
}
.subscribe-component--status-icon{color: #f44336;}
.subscribe-component--status-icon.status-pending{color: #e6eaef;}
.subscribe-component--status-icon.status-pending{color: #e6eaef;}
.subscribe-component--status-icon.status-reschedule_success,
.subscribe-component--status-icon.status-paid,
.subscribe-component--status-icon.status-delay,
.subscribe-component--status-icon.status-success{color: #00D38B;}
.go-to-admin__button {
background: @btn_color;
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.go-to-admin__button:hover,
.go-to-admin__button:active,
.go-to-admin__button:focus{
background: darken(@btn_color, 5%);
color: contrast(@btn_color, @dark_font_color, @light_font_color);
}
.company-location .company-name{
color: @sb_base_color ;
}