trAvis - MANAGER
Edit File: availability_page.css
/** TOOLBAR ***********************************************************************************************************/ /* Override default settings of main toolbar: ../includes/_toolbar_ui/_src/toolbar_ui.css */ #toolbar_booking_availability.wpbc_ajx_toolbar { margin: 0; /* margin: 0 0 10px 50px; */ } /** CONTENT ***********************************************************************************************************/ /* Main container */ .wpbc_ajx_avy__container { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; margin: 20px 0 0; } /* LEFT section */ .wpbc_ajx_avy__container .wpbc_ajx_avy__section_left { flex: 1 1 auto; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } /* Calendar in right section */ .wpbc_ajx_avy__calendar{ width:100%; max-width:100%; margin:0; } /* RIGHT section */ .wpbc_ajx_avy__container .wpbc_ajx_avy__section_right { flex: 0 1 auto; margin: 0 0 0 30px; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; } /** WIDGETS ***********************************************************************************************************/ /* Widgets Section - Define width of widget here */ .wpbc_widgets { width:200px; /* WIDTH of WIDGETs*/ display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; } /* Widget */ .wpbc_widgets .wpbc_widget { margin: 0 0 20px; width:100%; flex: 1 1 100%; } /* Widget Header */ .wpbc_widget .wpbc_widget_header { width: 100%; height: 44px; border: 1px solid #ccc; background: #fff; font-weight: 600; text-shadow: none; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } /* Widget Header text */ .wpbc_widget .wpbc_widget_header .wpbc_widget_header_text { flex: 1 1 auto; padding: 0 15px; } /* Settings Link in right side of header */ .wpbc_widget .wpbc_widget_header .wpbc_widget_header_settings_link { flex: 0 0 auto; margin-left: auto; border-left: 1px solid #ccc; padding: 5px 10px; color: #0e70b7; display: none; } /** MOBILE ***********************************************************************************************************/ @media (max-width: 470px) { .wpbc_ajx_avy__container { flex-flow: row wrap; } div.wpbc_ajx_avy__container .wpbc_ajx_avy__section_right { margin: 30px 0; } div.wpbc_widgets { width:100%; } div.wpbc_widgets .wpbc_widget.wpbc_widget_available_unavailable { position: fixed; top: 100%; z-index: 9999; padding: 0px 2px; left: 0px; margin: -105px 0 0; } } /** Toolbar Dates Hints **********************************************************************************************/ #wpbc_hidden_template__select_booking_resource { flex: 0 1 auto; } #wpbc_toolbar_dates_hint{ flex: 1 1 auto; justify-content: flex-start; margin-left: 0; } #wpbc_toolbar_dates_hint .ui_element { } #wpbc_toolbar_dates_hint .ui_element .wpbc_help_text { font-size: 1.1em; line-height: 1.8em; height: auto; } #wpbc_toolbar_dates_hint .ui_element .wpbc_help_text *{ font-size: 1em; } #wpbc_toolbar_dates_hint .ui_element .wpbc_help_text strong{ } /* Dates hints */ .wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints { font-size: 1.05em; display: block; /*flex-flow: row wrap;*/ /*width: 100%;*/ /*justify-content: flex-start;*/ /*align-items: first baseline;*/ } .wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints span{ /*flex: 1 1 auto;*/ padding: 0 0.2em; } .wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints span.wpbc_big_text, .wpbc_ajx_toolbar .wpbc_help_text .wpbc_toolbar_dates_hints span.wpbc_big_date{ font-size: 1.05em; font-weight: 600; padding: 0 0.3em; } /* Fix for round dates in calendars */ .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-radius: 0 !important; /* at the WP Booking Calendar > Availability > Days Availability page we can not show round dates :( */ }