trAvis - MANAGER
Edit File: 24_9__light.css
/* ------------------------------------------------------------------------------------------------------------------ */ /* Light - 24-09 - C O L O R S K I N */ /* ------------------------------------------------------------------------------------------------------------------ */ /* For best compatibility, please change parameters only in :root { ... } section */ /* Round 1 */ :root { /* Round Properties */ --wpbc_cal-day-cell-border-radius: 50%; --wpbc_cal-day-cell-border-width: 2px; --wpbc_cal-day-bg-color-opacity: 5%; --wpbc_cal-selected-day-bg-color-opacity: 90%; /* Default Font Sizes */ --wpbc_cal-text-general-size: 14px; --wpbc_cal-text-cost-size: 50%; --wpbc_cal-text-header-size: 13px; --wpbc_cal-text-weekdays-size: 10px; --wpbc_cal-text-prev-next-links-size: 25px; /* Main Colors */ --wpbc_cal-main-background-color: #fff; --wpbc_cal-header-text-color: #000; --wpbc_cal-text-prev-next-links-color: #555; --wpbc_cal-text-weekdays-color: #555; /* Days Colors */ --wpbc_cal-unavailable-day-color: var(--wpbc_cal-main-background-color); /* Usually it has to be the same as --wpbc_cal-main-background-color */ --wpbc_cal-unavailable-text-color: #d4d4d4c7; --wpbc_cal-available-day-color: #FFF; --wpbc_cal-available-text-color: #000; --wpbc_cal-approved-day-color: #c66814; --wpbc_cal-approved-text-color: #c25b00; --wpbc_cal-pending-day-color: #7281bf; --wpbc_cal-pending-text-color: #5b6697; --wpbc_cal-selected-day-color: #6b96ce; --wpbc_cal-selected-text-color: #fff; --wpbc_cal-hover-day-color: #6b96ce; --wpbc_cal-hover-text-color: #65778d; --wpbc_cal-timespartly-day-color: #a8973c; --wpbc_cal-timespartly-text-color: #998a3a; /* Minor Parameters */ --wpbc_cal-day-cells-padding: 2px; } /* Color Scheme: - .violet 1 */ :root.violet { --wpbc_cal-unavailable-day-color: #FFF; --wpbc_cal-unavailable-text-color: #d4d4d4c7; --wpbc_cal-available-day-color: #FFF; --wpbc_cal-available-text-color: #000; --wpbc_cal-approved-day-color: #efa557; --wpbc_cal-approved-text-color: #fff; --wpbc_cal-pending-day-color: #635bff; --wpbc_cal-pending-text-color: #fff; --wpbc_cal-selected-day-color: #589fc1; --wpbc_cal-selected-text-color: #fff; --wpbc_cal-hover-day-color: #589fc16e; --wpbc_cal-hover-text-color: #fff; --wpbc_cal-timespartly-day-color: #7E6FB3; --wpbc_cal-timespartly-text-color: #fff; } /* ------------------------------------------------------------------------------------------------------------------ */ /* !!! Round Properties !!! */ /* ------------------------------------------------------------------------------------------------------------------ */ /* Change Over days fix for Rounded Day Cells */ .wpbc-cell-box .wpbc-diagonal-el svg { width: calc( 100% + 0px ); height: calc( 100% + 0px ); border-radius: var( --wpbc_cal-day-cell-border-radius ); } .datepick-inline td.datepick-days-cell.check_in_time .wpbc-cell-box .wpbc-diagonal-el, .datepick-inline td.datepick-days-cell.check_out_time .wpbc-cell-box .wpbc-diagonal-el { margin-left: 0; margin-top: 0; } div.wpbc-cell-box .wpbc-diagonal-el svg polygon { fill: transparent; } /* Round Perfect Square Dates. Support in Browsers since 2021 y. */ .datepick-inline td.datepick-days-cell { aspect-ratio: 1 / 1; } .datepick-inline td.datepick-days-cell .wpbc-cell-box { padding: 0; margin: 0; position: relative; width: calc( 100% - var( --wpbc_cal-day-cell-border-width ) - var( --wpbc_cal-day-cell-border-width ) ); /*! height: calc( 100% - 4px ); */ /*! padding-bottom: calc( 50% - 4px ); */ /*! padding-top: calc( 100% - 4px ); */ /*! height: calc(100% - 4px ); */ height:auto; border-radius: var( --wpbc_cal-day-cell-border-radius ); aspect-ratio: 1 / 1; display: flex; flex-flow:column nowrap; justify-content: center; align-items: center; } /* Center Day Number */ .datepick-inline .datepick-days-cell .date-cell-content span, .datepick-inline .datepick-days-cell .date-cell-content a { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } /* ================================================================================================================== */ /* Other CSS */ /* ================================================================================================================== */ /* Font Sizes */ .booking_form_div div.bk_calendar_frame div { font-size: var(--wpbc_cal-text-general-size); } /* Calendar Legend */ div.block_hints.datepick { /*background: none;*/ /*border-radius: 3px;*/ /*box-shadow: 0 1px 2px #1111110d;*/ /*padding: 10px;*/ /*margin: 20px 0 0;*/ /*border: 1px solid #cccccc87;*/ /*max-width: 320px;*/ } div.block_hints.datepick * { font-size: var(--wpbc_cal-text-general-size); } .block_check_in_out, .block_pending, .block_time, .block_booked, .block_free { float: left; width: 40px; height: 40px; line-height: 32px; text-align: center; display: flex; flex-flow: column nowrap; justify-content: center; align-content: center; } .block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height{ width: 40px !important; height: 40px !important; } .block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height .wpbc_calendar_legend_day_cell_height { height: 40px !important; border-width: 0; } .block_hints .datepick-inline, .block_hints .datepick-inline .datepick { background: transparent; } .block_hints .block_free { border: var( --wpbc_cal-day-cell-border-width ) solid var(--wpbc_cal-available-day-color); } /* ------------------------------------------------------------------------------------------------------------------ */ /* == From Calendar.css == */ /* ------------------------------------------------------------------------------------------------------------------ */ div.datepick-inline table.datepick, div.datepick-inline table.datepick th, div.datepick-inline table.datepick td { border-width: 0; } .datepick-inline .datepick, .datepick-inline .calendar-links, .datepick-inline .calendar-links a, .datepick-inline .datepick-days-cell, .datepick-inline .datepick-days-cell a, .datepick-inline .datepick-days-cell div, .datepick-inline .datepick-title-row, .datepick-inline .datepick-title-row th { font-size: var(--wpbc_cal-text-general-size); } /* Mo Tu We Th Fr Sa Su */ /*#wpbc-new-admin-page .booking_form_div .datepick-inline .datepick .datepick-title-row th,*/ /*#wpbc-new-admin-page .booking_form_div .datepick-inline .datepick .datepick-title-row th *,*/ .datepick-inline .datepick .datepick-title-row th { font-size: var(--wpbc_cal-text-weekdays-size); } /* Month Name */ /*#wpbc-new-admin-page .datepick-inline .datepick-header, */ /*#wpbc-new-admin-page .datepick-inline .datepick-header span,*/ .datepick-inline .datepick-header, .datepick-inline .datepick-header span{ font-size: var(--wpbc_cal-text-header-size); } /* Next/Prev Month Links */ .datepick-inline .calendar-links { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; width: 100%; height: 40px; margin-bottom: -40px; } .datepick-inline .calendar-links .datepick-prev, .datepick-inline .calendar-links .datepick-next { flex: 0 1 30px; display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-end; margin: 0; line-height: 2em; } .datepick-inline .calendar-links .datepick-prev a, .datepick-inline .calendar-links .datepick-next a, .datepick-inline .calendar-links .datepick-prev a:hover, .datepick-inline .calendar-links .datepick-next a:hover{ } /* ------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------------ */ /* Full Calendar Frame */ .datepick-inline { background: var( --wpbc_cal-main-background-color ); border: 0px solid #555; box-shadow: 0 1px 5px 1px #00000014; border-radius: 4px; padding: 0; } /* Background of one calendar month */ .datepick-inline .datepick-one-month { padding: 3px; } .datepick-inline .datepick{ background: var( --wpbc_cal-main-background-color ); } /* Previous & Next links and TITLE BACKGROUND */ .datepick-inline .calendar-links { border-bottom:none; } /* Prev - Next Text */ .datepick-inline .calendar-links .datepick-prev a, .datepick-inline .calendar-links .datepick-next a, .datepick-inline .calendar-links .datepick-prev a:hover, .datepick-inline .calendar-links .datepick-next a:hover{ color: var(--wpbc_cal-text-prev-next-links-color); /* FixIn: 9.3.1.4 */ text-shadow: none; font-weight: 400; padding: 0 12px 0px; font-size: var(--wpbc_cal-text-prev-next-links-size); } /* Month Titles */ .datepick-inline .datepick-header { color: var(--wpbc_cal-header-text-color); /* FixIn: 9.3.1.4 */ font-weight: 600; text-shadow: none; margin: -3px 0 4px; background: transparent; } /* One month only, hide white padding */ .datepick-inline:not(.datepick-multi) .datepick-one-month { padding: 0; } .datepick-inline:not(.datepick-multi) .datepick-header { margin: 0; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding: 0px 0 0 17px; box-sizing: border-box; } /* Week Titles */ div.datepick-inline .datepick-title-row th{ border: 1px solid #ccc; color: var(--wpbc_cal-text-weekdays-color); font-weight: 600; text-transform: uppercase; } /* Cell border*/ .block_hints .block_free, .block_hints .block_time, .block_hints .block_booked, .block_hints .block_pending, .block_hints .block_check_in_out, .datepick-inline .datepick-days-cell{ border: 0 solid #e1e1e1; color:#4b4b4b; border-radius: var( --wpbc_cal-day-cell-border-radius ); /*border-radius: 100px; !* If calendar width set as 100%, then here we can not use border-radius: 50%; :( *!*/ border-radius: 6px; border-radius: var( --wpbc_cal-day-cell-border-radius ); border-color: transparent; border-width: var( --wpbc_cal-day-cell-border-width ) !important; box-sizing: border-box; } /* Basically this is padding between the dates: */ .datepick-inline th, .datepick-inline .datepick-days-cell{ border-width: var( --wpbc_cal-day-cells-padding ) !important; box-sizing: border-box; } .datepick-inline th{ border-color: var( --wpbc_cal-main-background-color ) !important; } /* Top and bottom "cost text" in day cells */ .datepick-inline .datepick-days-cell div.date-content-bottom, .datepick-inline .datepick-days-cell div.date-content-top { font-weight: 400; color: var(--wpbc_cal-available-text-color); color: rgb( from var(--wpbc_cal-available-text-color) r g b / 50% ); font-size: var(--wpbc_cal-text-cost-size); } /* Selected dates - Top and bottom "cost text" in day cells */ .datepick-inline .datepick-days-cell.datepick-current-day div.date-content-bottom, .datepick-inline .datepick-days-cell.datepick-current-day div.date-content-top { /*color:#1d2d41;*/ } /******************************************************************************** FixIn: 9.5.0.2 */ /* New Stripes - Unavailable Cells - for Booking > Availability page ********/ /*******************************************************************************/ /* Stripes */ .wpbc_ajx_availability_container .datepick-inline .datepick .resource_unavailable:not(.datepick-unselectable) .wpbc-cell-box { /*background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #eaeaeb 4px, #eaeaeb 8px );*/ /*background: repeating-linear-gradient( 135deg, #fff, #fff 4px, #f5f5ef 4px, #f5f5cf 8px );*/ background: repeating-linear-gradient(-45deg, #eee 0 3px, var( --wpbc_cal-main-background-color ) 3px 8px); } /* Unselectable dates & headers - calendar empty cells */ .wpbc_ajx_availability_container .datepick-inline th, .wpbc_ajx_availability_container .datepick-inline .datepick-days-cell.datepick-unselectable{ background: var(--wpbc_cal-main-background-color); /* Here the same color as at line #18 for "Full Calendar Frame": .datepick-inline { ... } */ } /* It is all unavailable dates */ .wpbc_ajx_availability_container .datepick-inline .date_user_unavailable, .wpbc_ajx_availability_container .datepick-inline .before_after_unavailable, /* "Before/After" unavailable days from Settings General page in "Availability" section */ .wpbc_ajx_availability_container .datepick-inline .weekdays_unavailable, /* "Weekdays" unavailable from Settings General page in "Availability" section */ .wpbc_ajx_availability_container .datepick-inline .season_unavailable /* "SEASON" unavailable dates defined at Booking > Resources > Availability page */ { background: var(--wpbc_cal-main-background-color); } /* It is all unavailable RESOURCE dates defined at Booking > Availability page */ .wpbc_ajx_availability_container .resource_unavailable:not(.datepick-unselectable) { background: transparent; color:#fff; } /* Unavailable SELECTABLE days for Booking > Availability page */ .block_hints .datepick-inline .datepick-days-cell.date_user_unavailable a, .datepick-inline .datepick-days-cell.date_user_unavailable:not(.datepick-unselectable) a{ color:#ccc; } /* Unselectable dates - hide check in/out */ .wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_in_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el, .wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_out_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el{ display: none; } /*********************************************************************************/ /* U N S E L E C T A B L E - Usually when we select 1st date with range dates selection mode, previous dates become unselectable. */ div.wpbc_ajx_availability_container .datepick-inline .datepick-unselectable, .datepick-inline .datepick-unselectable{ color: var(--wpbc_cal-unavailable-text-color); text-shadow: none; font-weight: 600; } .datepick-inline .datepick-unselectable span{ /* //FixIn: 8.9.4.13 */ text-shadow: none; } /******************************************************************************** FixIn End: 9.5.0.2 */ /*******************************************************************************/ /* Dates Cells **********************************************************/ /*******************************************************************************/ /* A V A I L A B L E - BACKGROUND */ .block_hints .block_free, .block_hints .block_time, .block_hints .block_check_in_out div.check-in-div, /* Item for the LEGEND */ .block_hints .block_check_in_out div.check-out-div, /* Item for the LEGEND */ .datepick-inline .date_available .wpbc-cell-box, .datepick-inline .timespartly.check_in_time div.check-in-div, /* Define the COLOR fot the check in / out times the same as available*/ .datepick-inline .timespartly.check_out_time div.check-out-div { background: transparent; background: rgb( from var(--wpbc_cal-available-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) ); border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-available-day-color); } .block_hints .block_free { /*background: var(--wpbc_cal-main-background-color);*/ } .datepick-inline .datepick-unselectable .wpbc-cell-box, .block_hints .datepick-unselectable .wpbc-cell-box{ background: var(--wpbc_cal-main-background-color); background: rgb( from var(--wpbc_cal-unavailable-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) ); background: var(--wpbc_cal-unavailable-day-color); border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-unavailable-day-color); } /* A V A I L A B L E - Text A */ .block_hints .block_free a, .block_hints .block_time, .datepick-inline .date_available a{ color: var(--wpbc_cal-available-text-color); font-weight: 600; text-shadow: none; } /*******************************************************************************/ /* T I M E S L O T S */ .block_hints .block_time, .datepick-inline .timespartly{ } /*******************************************************************************/ /* A P P R O V E D - BACKGROUND */ .block_hints .date_approved.block_check_in_out, .block_hints .block_booked, .datepick-inline .date_approved .wpbc-cell-box, /* A P P R O V E D - BACKGROUND for Check In Pending & Check Out Approved || Check Out Pending & Check In Approved Dates //FixIn: 6.0.1.2 */ td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved div.check-in-div, td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved div.check-out-div { background: transparent; background: rgb( from var(--wpbc_cal-approved-day-color) r g b / var( --wpbc_cal-day-bg-color-opacity ) ); border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-approved-day-color); } /* A P P R O V E D - T E X T /including partially booked - timeslots/ */ .block_hints .date_approved.block_check_in_out, .block_hints .block_booked, .datepick-inline .date_approved, .block_hints .block_booked a, .datepick-inline .date_approved a{ color: var( --wpbc_cal-approved-text-color ); font-weight: 600; text-shadow: none; } /* CHECK IN and CHECK OUT Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/ .block_hints .date_approved.block_check_in_out div.check-in-div, /* Item for the LEGEND */ .datepick-inline .date_approved.timespartly.check_in_time div.check-in-div{ border-right: 1px dotted var( --wpbc_cal-approved-day-color ); } .block_hints .date_approved.block_check_in_out div.check-out-div, /* Item for the LEGEND */ .datepick-inline .date_approved.timespartly.check_out_time div.check-out-div{ border-left: 1px dotted var( --wpbc_cal-approved-day-color ); } /*******************************************************************************/ /* P E N D I N G - BACKGROUND */ .block_hints .date2approve.block_check_in_out, .block_hints .block_pending , .datepick-inline .date2approve .wpbc-cell-box, /* P E N D I N G - BACKGROUND for Check In Approved & Check Out Pending || Check Out Approved & Check In Pending Dates //FixIn: 6.0.1.2 */ td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div.check-in-div, td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div.check-out-div { background: transparent; background: rgb( from var(--wpbc_cal-pending-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) ); border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-pending-day-color); } /* P E N D I N G - T E X T /including partially booked - timeslots/ */ .block_hints .date2approve.block_check_in_out, .block_hints .block_pending, .datepick-inline .date2approve .wpbc-cell-box, .block_hints .block_pending a, .datepick-inline .date2approve a { color: var(--wpbc_cal-pending-text-color); font-weight: 600; text-shadow: none; } /* Strike Text for booked dates */ .block_hints .block_pending span *:after, .datepick-inline .date_approved span:after , .block_hints .block_booked span *:after, .datepick-inline .date2approve span:after { border-top: 0px solid; position: absolute; content: ""; right: 0; top:calc(50% + 1px); left: 25%; width: 50%; } /*******************************************************************************/ /* TIME SLOTs (partially booked) - BACKGROUND */ .datepick-inline .date2approve.timespartly .wpbc-cell-box, .datepick-inline .date_approved.timespartly .wpbc-cell-box{ background: transparent; background: rgb( from var(--wpbc_cal-timespartly-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) ); border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-timespartly-day-color); } /* TIME SLOTs (partially booked) - TEXT */ .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots, .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots, .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) a, .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) a, .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) span, .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) span { color: var(--wpbc_cal-timespartly-text-color); font-weight: 600; text-shadow: none; } /*******************************************************************************/ /* CHECK IN and CHECK OUT Borders for the Pending cells - the COLOR have to be the SAME as BACKGROUND of this cell*/ .block_hints .date2approve.block_check_in_out div.check-in-div, /* Item for the LEGEND */ .datepick-inline .date2approve.timespartly.check_in_time div.check-in-div{ border-right: 1px dotted var( --wpbc_cal-pending-day-color ); } .block_hints .date2approve.block_check_in_out div.check-out-div, /* Item for the LEGEND */ .datepick-inline .date2approve.timespartly.check_out_time div.check-out-div{ border-left: 1px dotted var( --wpbc_cal-pending-day-color ); } /*******************************************************************************/ /* S E L E C T E D Dates - Background */ .datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc-cell-box{ background: transparent; background: rgb( from var(--wpbc_cal-selected-day-color) r g b / max( var(--wpbc_cal-day-bg-color-opacity), var(--wpbc_cal-selected-day-bg-color-opacity) ) ); border: var(--wpbc_cal-day-cell-border-width) solid var(--wpbc_cal-selected-day-color); } /* S E L E C T E D Dates - Text color */ /* S E L E C T E D Dates - Text color */ .datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc_time_dots, /* //FixIn: 8.9.4.13 */ .datepick-inline div.datepick-one-month .datepick td.datepick-current-day a, .datepick-inline div.datepick-one-month .datepick td.datepick-current-day a:hover { color: var(--wpbc_cal-selected-text-color); text-shadow: none; } /*******************************************************************************/ /* C e l l O V E R Dates - Background */ .wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.datepick-days-cell-over .wpbc-cell-box, .datepick-inline .datepick .datepick-days-cell-over .wpbc-cell-box{ background: transparent; background: rgb( from var(--wpbc_cal-hover-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) ); border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-hover-day-color ); } /* C e l l O V E R Dates - Text color */ .datepick-inline .datepick-one-month .datepick .datepick-days-cell-over .wpbc_time_dots, /* //FixIn: 8.9.4.13 */ .datepick-inline .datepick-one-month .datepick td.datepick-days-cell-over a:hover, .datepick-inline .datepick-one-month .datepick td.datepick-days-cell-over a{ color: var( --wpbc_cal-hover-text-color ); text-shadow: none; } /*******************************************************************************/ /* FixIn: 6.0.1.2 */ /* Text style for Check In Approved & Check Out Pending || Check Out Approved & Check In Pending || Check In Pending & Check Out Approved || Check Out Pending & Check In Approved */ td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve span, td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve span, td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved span, td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved span { font-weight: 600; text-shadow: none; } /* Show partially (time-slots) booked days with Background color as for available days ********************************/ /** //FixIn: 8.2.1.27 Updated 2018-07-04 ****/ /* Color as in this section A V A I L A B L E - BACKGROUND */ .wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock .wpbc-cell-box{ background: transparent; /*background: rgb( from var(--wpbc_cal-timespartly-day-color) r g b / var(--wpbc_cal-day-bg-color-opacity) );*/ } /* Same as in this Section above --- A V A I L A B L E - Text A */ /* TIME SLOTs (partially booked) - TEXT */ .wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots, .wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots, .wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) a, .wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) a, .wpbc_timeslot_day_bg_as_available .datepick-inline .date2approve.timespartly:not(.check_in_time,.check_out_time) span, .wpbc_timeslot_day_bg_as_available .datepick-inline .date_approved.timespartly:not(.check_in_time,.check_out_time) span { color: var(--wpbc_cal-timespartly-text-color); font-weight: 600; text-shadow: none; } .wpbc_timeslot_day_bg_as_available .datepick-inline .timespartly:not(.check_in_time,.check_out_time) .wpbc_time_dots{ font-weight: 600; } /* Same as in this Section above --- S E L E C T E D Dates - Text color */ .wpbc_timeslot_day_bg_as_available .datepick-inline .datepick-one-month .datepick .times_clock.date_available.datepick-current-day a{ color: #EEEEEE; text-shadow: none; } /* Same as in this Section above --- A V A I L A B L E and UNSELECTABLE - Text */ .wpbc_timeslot_day_bg_as_available .datepick-inline .date_available { color: #CCCCCC; /* This style for the unavailable date, when we are select the dates */ text-shadow: none; /* This style for the unavailable date, when we are select the dates */ } .datepick-inline .date_available span { text-shadow: none; } /*******************************************************************************/ /* CHECK IN / OUT as P.O.L.Y.G.O.N.S //FixIn: 8.9.4.13 */ /*******************************************************************************/ /* Fill diagonal check in/out items with AVAILABLE background color */ .wpbc-cell-box .wpbc-diagonal-el svg polygon{ fill: var(--wpbc_cal-available-day-color); } .datepick-inline .datepick-one-month .datepick td.datepick-days-cell.datepick-current-day .wpbc-cell-box .wpbc-diagonal-el { display: none; } .datepick-current-day .wpbc-cell-box .wpbc-diagonal-el svg polygon { fill: var(--wpbc_cal-selected-day-color); display: block; } /* Firstly we define background of the day cells background as available */ .datepick-inline td.datepick-days-cell.check_in_time .wpbc-cell-box, .datepick-inline td.datepick-days-cell.check_out_time .wpbc-cell-box{ background-color: var(--wpbc_cal-available-day-color); } /* C e l l O V E R Dates */ .datepick-inline td.datepick-days-cell.check_in_time.datepick-days-cell-over .wpbc-cell-box, .datepick-inline td.datepick-days-cell.check_out_time.datepick-days-cell-over .wpbc-cell-box{ background-color: var(--wpbc_cal-hover-day-color); } /* Pending */ .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve .wpbc-cell-box .wpbc-co-in svg polygon, /* Check In */ .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve .wpbc-cell-box .wpbc-co-out svg polygon /* Check Out */ { fill: var( --wpbc_cal-pending-day-color ); fill-opacity: 50%; fill-opacity: max( var( --wpbc_cal-day-bg-color-opacity ), 50% ); } .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve .wpbc-cell-box, .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve .wpbc-cell-box{ border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-pending-day-color ); } /* Approved */ .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved .wpbc-cell-box .wpbc-co-in svg polygon, /* Check In */ .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved .wpbc-cell-box .wpbc-co-out svg polygon /* Check Out */ { fill: var( --wpbc_cal-approved-day-color ); fill-opacity: 50%; fill-opacity: max( var( --wpbc_cal-day-bg-color-opacity ), 50% ); } .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved .wpbc-cell-box, .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved .wpbc-cell-box{ border: var( --wpbc_cal-day-cell-border-width ) solid var( --wpbc_cal-approved-day-color ); }