PluginProbe
Booking Calendar / 11.1
Booking Calendar v11.1
11.8.3 11.8.2 11.8.1 11.8 11.7 11.6.1 11.6 11.5 11.4.3 11.4.2 11.4.1 11.4 11.3 11.2.1 11.2 11.1 11.0 10.15.7 10.15.6 10.1.3 10.10 10.10.1 10.10.2 10.11 10.11.2 All 203 releases
booking / includes / page-availability-general / _out / availability_general_page.css

availability_general_page.css in Booking Calendar 11.1, at includes/page-availability-general/_out/availability_general_page.css

512 lines 11.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpbc_admin_page__tab__general_availability .wpbc_settings_page_content {
2 min-width: 0
3 }
4 .wpbc_admin_page__tab__general_availability,
5 .wpbc_ag_page {
6 --wpbc-ts-blue: #5459ac;
7 --wpbc-ts-border: #dfe4ea;
8 --wpbc-ts-text: #1d2327;
9 --wpbc-ts-muted: #646970;
10 --wpbc-ts-bg: #fff;
11 --wpbc-ts-bg-soft: #f6f7f7;
12 --wpbc-ts-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
13 --wpbc-ts-radius: 6px;
14 --wpbc-palette-accent: #2271b1
15 }
16 .wpbc_ag_page {
17 box-sizing: border-box;
18 color: var(--wpbc-ts-text);
19 max-width: 1220px
20 }
21 .wpbc_ag_preview_controls {
22 -ms-flex-align: end;
23 align-items: flex-end;
24 display: -ms-flexbox;
25 display: flex;
26 -ms-flex-wrap: wrap;
27 flex-wrap: wrap;
28 gap: 10px;
29 -ms-flex-pack: start;
30 justify-content: flex-start;
31 margin-bottom: 12px
32 }
33 .wpbc_ag_toolbar.wpbc_ts_toolbar {
34 -ms-flex-align: start;
35 align-items: flex-start;
36 background: var(--wpbc-ts-bg);
37 border: 1px solid var(--wpbc-ts-border);
38 border-radius: var(--wpbc-ts-radius);
39 box-shadow: var(--wpbc-ts-shadow);
40 box-sizing: border-box;
41 display: -ms-flexbox;
42 display: flex;
43 -ms-flex-flow: row wrap;
44 flex-flow: row wrap;
45 gap: 14px;
46 -ms-flex-pack: start;
47 justify-content: flex-start;
48 max-width: 100%;
49 padding: 14px
50 }
51 .wpbc_ag_toolbar .wpbc_ts_control {
52 display: -ms-flexbox;
53 display: flex;
54 -ms-flex-direction: column;
55 flex-direction: column;
56 gap: 6px;
57 min-width: 150px
58 }
59 .wpbc_ag_toolbar .wpbc_ts_control label {
60 color: var(--wpbc-ts-text);
61 font-size: 13px;
62 font-weight: 600
63 }
64 .wpbc_ag_toolbar .wpbc_ts_control select {
65 min-height: 32px;
66 min-width: 130px
67 }
68 .wpbc_ag_preview_controls .button {
69 -ms-flex-align: center;
70 align-items: center;
71 display: -ms-inline-flexbox;
72 display: inline-flex;
73 gap: 6px;
74 min-height: 32px
75 }
76 .wpbc_ag_toolbar_actions {
77 -ms-flex-align: center;
78 align-items: center;
79 display: -ms-flexbox;
80 display: flex;
81 -ms-flex: 1 1 auto;
82 flex: 1 1 auto;
83 -ms-flex-flow: row wrap;
84 flex-flow: row wrap;
85 gap: 10px;
86 -ms-flex-pack: end;
87 justify-content: flex-end;
88 margin-left: auto
89 }
90 .wpbc_ag_hint_bar.wpbc_ts_hint {
91 -ms-flex-align: center;
92 align-items: center;
93 background: #f5faff;
94 border: 1px solid #c8ddf5;
95 border-radius: 0;
96 color: var(--wpbc-ts-text);
97 display: -ms-flexbox;
98 display: flex;
99 gap: 10px;
100 margin: 15px 0 0;
101 padding: 15px
102 }
103 .wpbc_ag_hint_bar .wpbc_icn_info_outline {
104 color: var(--wpbc-ts-blue)
105 }
106 .wpbc_ag_calendar_panel {
107 min-height: 220px;
108 padding: 10px;
109 position: relative;
110 transition: opacity .16s ease-in-out
111 }
112 .wpbc_ag_calendar_panel.is-loading {
113 pointer-events: none
114 }
115 .wpbc_ag_calendar_panel.is-loading .wpbc_calendar_wraper {
116 filter: blur(1px);
117 opacity: .34
118 }
119 .wpbc_calendar_loading.wpbc_ag_calendar_loading {
120 -ms-flex-align: center;
121 align-items: center;
122 background: rgba(255,255,255,.74);
123 box-sizing: border-box;
124 color: #1d2327;
125 display: -ms-flexbox;
126 display: flex;
127 font-size: 1.2em;
128 font-weight: 600;
129 inset: 10px;
130 -ms-flex-pack: center;
131 justify-content: center;
132 margin: 0;
133 position: absolute;
134 text-align: center;
135 z-index: 30
136 }
137 .wpbc_calendar_loading.wpbc_ag_calendar_loading .wpbc_icn_autorenew::before {
138 font-size: 1.2em
139 }
140 .wpbc_ag_buffer_preview_note {
141 -ms-flex-align: center;
142 align-items: center;
143 background: #fff8e5;
144 border: 1px solid #e8c76a;
145 box-sizing: border-box;
146 color: #3c434a;
147 display: -ms-flexbox;
148 display: flex;
149 font-size: 12px;
150 gap: 6px;
151 line-height: 1.45;
152 margin: 15px 0 0;
153 padding: 15px
154 }
155 .wpbc_ag_buffer_preview_note[hidden] {
156 display: none
157 }
158 .wpbc_ag_buffer_preview_note strong {
159 color: #1d2327
160 }
161 .wpbc_ag_calendar_panel .bk_calendar_frame {
162 max-width: 100%;
163 width: 100%
164 }
165 .wpbc_ag_weekday_grid {
166 display: grid;
167 gap: 8px;
168 grid-template-columns: repeat(2,minmax(0,1fr))
169 }
170 .wpbc_ag_switch {
171 -ms-flex-align: center;
172 align-items: center;
173 background: var(--wpbc-ts-bg,#fff);
174 box-sizing: border-box;
175 cursor: pointer;
176 display: -ms-flexbox;
177 display: flex;
178 gap: 8px;
179 min-height: 36px;
180 padding: 6px 0;
181 -ms-flex: 0 1 auto;
182 flex: 0 1 auto;
183 min-width: 70px
184 }
185 .wpbc_ag_switch input {
186 height: 1px;
187 margin: 0;
188 opacity: 0;
189 position: absolute;
190 width: 1px
191 }
192 .wpbc_ag_switch_control {
193 background: #c3c4c7;
194 border-radius: 10px;
195 box-sizing: border-box;
196 display: -ms-inline-flexbox;
197 display: inline-flex;
198 -ms-flex: 0 0 auto;
199 flex: 0 0 auto;
200 height: 18px;
201 padding: 2px;
202 transition: background .16s ease-in-out;
203 width: 34px
204 }
205 .wpbc_ag_switch_knob {
206 background: #fff;
207 border-radius: 50%;
208 box-shadow: 0 1px 2px rgba(0,0,0,.22);
209 display: block;
210 height: 14px;
211 -ms-transform: translateX(0);
212 transform: translateX(0);
213 transition: transform .16s ease-in-out;
214 width: 14px
215 }
216 .wpbc_ag_switch input:checked + .wpbc_ag_switch_control {
217 background: #2271b1
218 }
219 .wpbc_ag_switch input:checked + .wpbc_ag_switch_control .wpbc_ag_switch_knob {
220 -ms-transform: translateX(16px);
221 transform: translateX(16px)
222 }
223 .wpbc_ag_switch input:focus-visible + .wpbc_ag_switch_control {
224 box-shadow: 0 0 0 2px #fff,0 0 0 4px #2271b1
225 }
226 .wpbc_ag_switch_label {
227 color: var(--wpbc-ts-text,#1d2327);
228 font-size: 13px;
229 line-height: 1.25;
230 overflow-wrap: anywhere
231 }
232 .wpbc_ag_toggle {
233 -ms-flex-align: center;
234 align-items: center;
235 background: var(--wpbc-ts-bg,#fff);
236 border: 1px solid var(--wpbc-ts-border,#dcdcde);
237 box-sizing: border-box;
238 display: -ms-flexbox;
239 display: flex;
240 gap: 8px;
241 min-height: 34px;
242 padding: 6px 8px
243 }
244 .wpbc_ag_toggle_full {
245 margin: 10px 0;
246 width: 100%
247 }
248 .wpbc_ag_toggle input {
249 margin: 0
250 }
251 .wpbc_ag_toggle span {
252 color: var(--wpbc-ts-text,#1d2327);
253 font-size: 13px;
254 line-height: 1.25;
255 overflow-wrap: anywhere
256 }
257 .wpbc_ag_description {
258 color: var(--wpbc-ts-muted,#646970);
259 font-size: 12px;
260 line-height: 1.45;
261 margin: 10px 0 0
262 }
263 .wpbc_ag_field_row {
264 display: grid;
265 gap: 6px;
266 margin: 0 0 12px
267 }
268 .wpbc_ag_field_label {
269 color: var(--wpbc-ts-text,#1d2327);
270 font-size: 12px;
271 font-weight: 600;
272 line-height: 1.35
273 }
274 .wpbc_ag_field_control {
275 box-sizing: border-box;
276 min-height: 32px;
277 width: 100%
278 }
279 .wpbc_ag_stepper_control {
280 -ms-flex-align: center;
281 align-items: center;
282 display: grid;
283 gap: 6px;
284 grid-template-columns: 32px minmax(0,1fr) 32px;
285 width: 100%
286 }
287 .wpbc_ag_stepper_control .wpbc_ag_field_control {
288 min-width: 0
289 }
290 .wpbc_ag_stepper_button.button {
291 -ms-flex-align: center;
292 align-items: center;
293 display: -ms-inline-flexbox;
294 display: inline-flex;
295 -ms-flex-pack: center;
296 justify-content: center;
297 min-height: 32px;
298 min-width: 32px;
299 padding: 0
300 }
301 .wpbc_ag_stepper_button .wpbc_icn_keyboard_arrow_left::before,
302 .wpbc_ag_stepper_button .wpbc_icn_keyboard_arrow_right::before {
303 font-size: 20px
304 }
305 .wpbc_ag_range_control {
306 display: grid;
307 gap: 6px;
308 margin-top: 8px
309 }
310 .wpbc_ag_range_control input[type=range] {
311 margin: 0;
312 width: 100%
313 }
314 .wpbc_ag_range_value {
315 color: #50575e;
316 font-size: 11px;
317 font-weight: 600;
318 line-height: 1.35
319 }
320 .wpbc_ag_hint {
321 background: #f9f2f4;
322 border-radius: 2px;
323 box-sizing: border-box;
324 color: #626262;
325 display: block;
326 font-size: 10px;
327 font-weight: 600;
328 line-height: 1.45;
329 padding: 4px 6px;
330 white-space: normal
331 }
332 .wpbc_ag_hint_unavailable {
333 color: #cc3a5f;
334 text-transform: uppercase
335 }
336 .wpbc_ag_hint_available {
337 color: #3f8f27;
338 text-transform: uppercase
339 }
340 .wpbc_ag_radio_stack {
341 display: grid;
342 gap: 8px;
343 margin-bottom: 12px
344 }
345 .wpbc_ag_radio_stack label {
346 -ms-flex-align: center;
347 align-items: center;
348 display: -ms-flexbox;
349 display: flex;
350 gap: 8px;
351 line-height: 1.35
352 }
353 .wpbc_ag_is_locked {
354 opacity: .68
355 }
356 .wpbc_ag_upgrade_required {
357 -ms-flex-align: start;
358 align-items: flex-start;
359 background: var(--wpbc-ts-bg-soft,#f6f7f7);
360 border: 1px solid var(--wpbc-ts-border,#dcdcde);
361 border-radius: var(--wpbc-ts-radius,6px);
362 box-sizing: border-box;
363 color: #50575e;
364 display: -ms-flexbox;
365 display: flex;
366 -ms-flex-flow: row wrap;
367 flex-flow: row wrap;
368 font-size: 12px;
369 gap: 8px;
370 line-height: 1.45;
371 margin: 0 0 12px;
372 padding: 10px
373 }
374 .wpbc_ag_upgrade_required .wpbc_pro_label {
375 -ms-flex: 0 0 auto;
376 flex: 0 0 auto
377 }
378 .wpbc_ag_buffer_fields {
379 background: var(--wpbc-ts-bg-soft,#f6f7f7);
380 border: 1px solid var(--wpbc-ts-border,#dcdcde);
381 border-radius: var(--wpbc-ts-radius,6px);
382 display: none;
383 margin: 10px 0 0;
384 padding: 10px
385 }
386 .wpbc_ag_buffer_fields.is-visible {
387 display: block
388 }
389 .wpbc_ag_future_notice,
390 .wpbc_ag_notice,
391 .wpbc_ag_scope_card {
392 background: var(--wpbc-ts-bg,#fff);
393 border: 1px solid var(--wpbc-ts-border,#dcdcde);
394 border-radius: var(--wpbc-ts-radius,6px);
395 box-sizing: border-box;
396 color: #3c434a;
397 line-height: 1.45;
398 padding: 10px
399 }
400 .wpbc_ag_notice {
401 border-left: 4px solid #dba617;
402 margin: 0 0 12px
403 }
404 .wpbc_ag_working_time_block {
405 border-radius: var(--wpbc-ts-radius,6px);
406 margin: 10px 0 0
407 }
408 .wpbc_ag_working_time_block.is-disabled {
409 opacity: .58
410 }
411 .wpbc_ag_working_time_block.is-disabled .wpbc_ag_description {
412 color: #8c8f94
413 }
414 .wpbc_ag_working_time_block h4 {
415 margin: 0 0 10px
416 }
417 .wpbc_ag_working_time_notice {
418 border-left-color: #5459ac
419 }
420 .wpbc_ag_working_time_rows {
421 display: grid;
422 gap: 8px
423 }
424 .wpbc_ag_working_time_row {
425 -ms-flex-align: center;
426 align-items: center;
427 display: -ms-flexbox;
428 display: flex;
429 gap: 8px;
430 -ms-flex-flow: row wrap;
431 flex-flow: row wrap
432 }
433 .wpbc_ag_working_time_day {
434 margin: 0
435 }
436 .wpbc_ag_working_time_times {
437 -ms-flex-align: center;
438 align-items: center;
439 display: -ms-inline-flexbox;
440 display: inline-flex;
441 gap: 6px;
442 -ms-flex: 1 1 auto;
443 flex: 1 1 auto
444 }
445 .wpbc_ag_working_time_times .wpbc_ag_field_control {
446 min-width: 84px
447 }
448 .wpbc_ag_working_time_custom {
449 display: none;
450 margin-top: 10px
451 }
452 .wpbc_ag_working_time_custom.is-visible {
453 display: block
454 }
455 .wpbc_ag_scope_title {
456 color: #1d2327;
457 font-weight: 600;
458 margin-bottom: 4px
459 }
460 .wpbc_ag_scope_card p {
461 margin: 0
462 }
463 .wpbc_ag__top_toolbar_group .button,
464 .wpbc_ag__top_toolbar_group .wpbc_ui_control {
465 -ms-flex-align: center;
466 align-items: center;
467 display: -ms-inline-flexbox;
468 display: inline-flex;
469 gap: 6px
470 }
471 .wpbc_ag_is_saving {
472 pointer-events: none
473 }
474 .wpbc_ag_preview_unavailable {
475 opacity: .62
476 }
477 .wpbc_ag_preview_unavailable a {
478 text-decoration: line-through
479 }
480 .wpbc_ag_preview_buffer_unavailable {
481 box-shadow: inset 0 0 0 2px rgba(219,166,23,.38)
482 }
483 @media (max-width:960px) {
484 .wpbc_ag_preview_controls {
485 -ms-flex-pack: start;
486 justify-content: flex-start
487 }
488 .wpbc_ag_toolbar_actions {
489 margin-left: 0
490 }
491 }
492 @media (max-width:540px) {
493 .wpbc_ag_preview_controls {
494 display: grid
495 }
496 .wpbc_ag_preview_controls .button,
497 .wpbc_ag_preview_controls select {
498 width: 100%
499 }
500 .wpbc_ag_weekday_grid,
501 .wpbc_ag_working_time_row {
502 grid-template-columns: 1fr
503 }
504 .wpbc_ag_working_time_times {
505 width: 100%
506 }
507 .wpbc_ag_working_time_times .wpbc_ag_field_control {
508 -ms-flex: 1 1 auto;
509 flex: 1 1 auto;
510 min-width: 0
511 }
512 }