| 1 |
/* |
| 2 |
* Vik Booking - Colors adaptation for "Automatic Light/Dark" Appearance . |
| 3 |
* Media queries should detect the OS/Browser preferences for the Dark Color Scheme |
| 4 |
* and override the CSS variables within that preference. |
| 5 |
* |
| 6 |
*/ |
| 7 |
|
| 8 |
/* Variable declarations when a dark color scheme is preferred. */ |
| 9 |
@media (prefers-color-scheme: dark) { |
| 10 |
:root { |
| 11 |
/* Backgrounds */ |
| 12 |
--vbo-white-bg-color: #282b33; |
| 13 |
--vbo-grey-bg-color: #0f1216; |
| 14 |
--vbo-light-grey-bg-color: #383c47; |
| 15 |
|
| 16 |
/* Borders */ |
| 17 |
--vbo-border-color: #2a2a2a; |
| 18 |
--vbo-light-border-color: #272a2f; |
| 19 |
|
| 20 |
/* Texts */ |
| 21 |
--vbo-text-color: rgba(255, 255, 255, 0.87); |
| 22 |
--vbo-light-text-color: rgba(255, 255, 255, 0.77); |
| 23 |
--vbo-contrast-text-color: #444; |
| 24 |
|
| 25 |
/* Input Style */ |
| 26 |
--vbo-input-style: #1e222b; |
| 27 |
--vbo-input-style-deactive: #282b33; |
| 28 |
--vbo-input-style-nested-deactive: #181b22; |
| 29 |
|
| 30 |
/* Colors */ |
| 31 |
--vbo-base-color: #2282bd; |
| 32 |
--vbo-base-color-hover: #1890ce; |
| 33 |
--vbo-darkblue-color: #08738F; |
| 34 |
--vbo-blue-color: #467388; |
| 35 |
--vbo-blue-color-hover: #4B7B92; |
| 36 |
--vbo-lightblue-color: #6a92a5; |
| 37 |
--vbo-lightblue-color-hover: #649fbb; |
| 38 |
--vbo-green-color: #4e7638; |
| 39 |
--vbo-green-color-hover: #4c794c; |
| 40 |
--vbo-orange-color: #CB7B2B; |
| 41 |
--vbo-red-color: #b12a2a; |
| 42 |
} |
| 43 |
|
| 44 |
[data-vbo-expl]:after { |
| 45 |
background-color: hsla(0, 0%, 42%, 0.9); |
| 46 |
} |
| 47 |
[data-vbo-expl]:before { |
| 48 |
border-bottom-color: hsla(0, 0%, 42%, 0.9); |
| 49 |
} |
| 50 |
form .vbselectm, .vbdivsearch .vb-search-inner select, .vbo-showprc-optionstable .vbo-showprc-option-entry > div select, .vbo-availability-controls select, .vbageintervals select, .vbo-oconfirm-cfield-input select { |
| 51 |
background: var(--vbo-white-bg-color) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center; |
| 52 |
background-size: 8px 10px; |
| 53 |
} |
| 54 |
.vbo-booking-upsell-room-wrap .vbo-upsell-option-entry { |
| 55 |
border-bottom: 1px solid #3c414d; |
| 56 |
} |
| 57 |
.vbo-booking-upsell-room-wrap .vbo-upsell-option-entry-input select { |
| 58 |
background: var(--vbo-light-grey-bg-color) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center; |
| 59 |
background-size: 8px 10px; |
| 60 |
} |
| 61 |
.vbo-booking-upsell-room-wrap .vbo-upsell-option-entry-input input { |
| 62 |
background: var(--vbo-light-grey-bg-color); |
| 63 |
} |
| 64 |
.vbo-tableaux-table .vbo-tableaux-festcell { |
| 65 |
background: #8b7186; |
| 66 |
} |
| 67 |
.vbo-tableaux-table td { |
| 68 |
border-right: 1px solid #202020; |
| 69 |
} |
| 70 |
.vbo-tableaux-table tr { |
| 71 |
border-bottom: 1px solid #202020; |
| 72 |
} |
| 73 |
.vikfxg-overlay { |
| 74 |
background: var(--vbo-white-bg-color); |
| 75 |
} |
| 76 |
.vikfxg-wrapper .vikfxg-image .vikfxg-caption { |
| 77 |
color: var(--vbo-text-color); |
| 78 |
} |
| 79 |
.vikfxg-wrapper button { |
| 80 |
background: var(--vbo-light-grey-bg-color); |
| 81 |
color: var(--vbo-text-color) !important; |
| 82 |
} |
| 83 |
.vikfx-gallery-container .vikfx-gallery-navigation-controls .vikfx-gallery-navigation-controls-prevnext > a { |
| 84 |
background: rgba(0, 0, 0, 0.8); |
| 85 |
} |
| 86 |
.vikfx-gallery-container .vikfx-gallery-navigation-controls .vikfx-gallery-navigation-controls-prevnext > a:hover { |
| 87 |
background: rgba(0, 0, 0, 1); |
| 88 |
} |
| 89 |
.vbcal .vbtdbusy { |
| 90 |
color: #fff; |
| 91 |
} |
| 92 |
#ui-datepicker-div { |
| 93 |
background: var(--vbo-white-bg-color); |
| 94 |
border-color: var(--vbo-white-bg-color); |
| 95 |
color: var(--vbo-text-color); |
| 96 |
} |
| 97 |
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title { |
| 98 |
color: var(--vbo-text-color); |
| 99 |
} |
| 100 |
#ui-datepicker-div th { |
| 101 |
color: var(--vbo-text-color) !important; |
| 102 |
} |
| 103 |
#ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-widget-header .ui-state-default { |
| 104 |
color: var(--vbo-text-color); |
| 105 |
} |
| 106 |
#ui-datepicker-div table tbody > tr > td { |
| 107 |
border: 1px solid #3c414d; |
| 108 |
} |
| 109 |
#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { |
| 110 |
border: 1px solid #3c414d; |
| 111 |
} |
| 112 |
#ui-datepicker-div .ui-datepicker-group-first { |
| 113 |
border-right: 1px solid #3c414d; |
| 114 |
} |
| 115 |
} |
