PluginProbe
Booking Calendar / 11.9
Booking Calendar v11.9
11.9 11.8.4 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 All 205 releases
booking / includes / page-availability-general / _out / availability_general_page.css

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

595 lines 13.1 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 -ms-flex-align: start;
167 align-items: start;
168 display: grid;
169 gap: 6px;
170 grid-template-columns: repeat(7,minmax(0,1fr))
171 }
172 .wpbc_ag_weekday_grid .wpbc_ag_weekday_switch {
173 -ms-flex-align: center;
174 align-items: center;
175 -ms-flex-direction: column;
176 flex-direction: column;
177 gap: 8px;
178 -ms-flex-pack: start;
179 justify-content: flex-start;
180 min-height: 0;
181 min-width: 0;
182 padding: 6px 0 4px;
183 text-align: center
184 }
185 .wpbc_ag_weekday_grid .wpbc_ag_switch_label {
186 overflow-wrap: normal;
187 white-space: nowrap
188 }
189 .wpbc_ag_weekday_grid + .wpbc_ag_description {
190 margin-top: 20px
191 }
192 .wpbc_ag_switch {
193 -ms-flex-align: center;
194 align-items: center;
195 background: var(--wpbc-ts-bg,#fff);
196 box-sizing: border-box;
197 cursor: pointer;
198 display: -ms-flexbox;
199 display: flex;
200 gap: 8px;
201 min-height: 36px;
202 padding: 6px 0;
203 -ms-flex: 0 1 auto;
204 flex: 0 1 auto;
205 min-width: 70px
206 }
207 .wpbc_ag_switch input {
208 height: 1px;
209 margin: 0;
210 opacity: 0;
211 position: absolute;
212 width: 1px
213 }
214 .wpbc_ag_switch_control {
215 background: #c3c4c7;
216 border-radius: 10px;
217 box-sizing: border-box;
218 display: -ms-inline-flexbox;
219 display: inline-flex;
220 -ms-flex: 0 0 auto;
221 flex: 0 0 auto;
222 height: 18px;
223 padding: 2px;
224 transition: background .16s ease-in-out;
225 width: 34px
226 }
227 .wpbc_ag_switch_knob {
228 background: #fff;
229 border-radius: 50%;
230 box-shadow: 0 1px 2px rgba(0,0,0,.22);
231 display: block;
232 height: 14px;
233 -ms-transform: translateX(0);
234 transform: translateX(0);
235 transition: transform .16s ease-in-out;
236 width: 14px
237 }
238 .wpbc_ag_switch input:checked + .wpbc_ag_switch_control {
239 background: #2271b1
240 }
241 .wpbc_ag_switch input:checked + .wpbc_ag_switch_control .wpbc_ag_switch_knob {
242 -ms-transform: translateX(16px);
243 transform: translateX(16px)
244 }
245 .wpbc_ag_switch input:focus-visible + .wpbc_ag_switch_control {
246 box-shadow: 0 0 0 2px #fff,0 0 0 4px #2271b1
247 }
248 .wpbc_ag_switch_label {
249 color: var(--wpbc-ts-text,#1d2327);
250 font-size: 13px;
251 line-height: 1.25;
252 overflow-wrap: anywhere
253 }
254 .wpbc_ag_toggle {
255 -ms-flex-align: center;
256 align-items: center;
257 background: var(--wpbc-ts-bg,#fff);
258 border: 1px solid var(--wpbc-ts-border,#dcdcde);
259 box-sizing: border-box;
260 display: -ms-flexbox;
261 display: flex;
262 gap: 8px;
263 min-height: 34px;
264 padding: 6px 8px
265 }
266 .wpbc_ag_toggle_full {
267 margin: 10px 0;
268 width: 100%
269 }
270 .wpbc_ag_toggle input {
271 margin: 0
272 }
273 .wpbc_ag_toggle span {
274 color: var(--wpbc-ts-text,#1d2327);
275 font-size: 13px;
276 line-height: 1.25;
277 overflow-wrap: anywhere
278 }
279 .wpbc_ag_description {
280 color: var(--wpbc-ts-muted,#646970);
281 font-size: 12px;
282 line-height: 1.45;
283 margin: 10px 0 0
284 }
285 .wpbc_ag_field_row {
286 display: grid;
287 gap: 6px;
288 margin: 0 0 12px
289 }
290 .wpbc_ag_field_label {
291 color: var(--wpbc-ts-text,#1d2327);
292 font-size: 12px;
293 font-weight: 600;
294 line-height: 1.35
295 }
296 .wpbc_ag_field_control {
297 box-sizing: border-box;
298 min-height: 32px;
299 width: 100%
300 }
301 .wpbc_ag_stepper_control {
302 -ms-flex-align: center;
303 align-items: center;
304 display: grid;
305 gap: 6px;
306 grid-template-columns: 32px minmax(0,1fr) 32px;
307 width: 100%
308 }
309 .wpbc_ag_stepper_control .wpbc_ag_field_control {
310 min-width: 0
311 }
312 .wpbc_ag_stepper_button.button {
313 -ms-flex-align: center;
314 align-items: center;
315 display: -ms-inline-flexbox;
316 display: inline-flex;
317 -ms-flex-pack: center;
318 justify-content: center;
319 min-height: 32px;
320 min-width: 32px;
321 padding: 0
322 }
323 .wpbc_ag_stepper_button .wpbc_icn_keyboard_arrow_left::before,
324 .wpbc_ag_stepper_button .wpbc_icn_keyboard_arrow_right::before {
325 font-size: 20px
326 }
327 .wpbc_ag_range_control {
328 display: grid;
329 gap: 6px;
330 margin-top: 8px
331 }
332 .wpbc_ag_range_control input[type=range] {
333 margin: 0;
334 width: 100%
335 }
336 .wpbc_ag_range_value {
337 color: #50575e;
338 font-size: 11px;
339 font-weight: 600;
340 line-height: 1.35
341 }
342 .wpbc_ag_hint {
343 background: #f9f2f4;
344 border-radius: 2px;
345 box-sizing: border-box;
346 color: #626262;
347 display: block;
348 font-size: 10px;
349 font-weight: 600;
350 line-height: 1.45;
351 padding: 4px 6px;
352 white-space: normal
353 }
354 .wpbc_ag_hint_unavailable {
355 color: #cc3a5f;
356 text-transform: uppercase
357 }
358 .wpbc_ag_hint_available {
359 color: #3f8f27;
360 text-transform: uppercase
361 }
362 .wpbc_ag_radio_stack {
363 display: grid;
364 gap: 8px;
365 margin-bottom: 12px
366 }
367 .wpbc_ag_radio_stack label {
368 -ms-flex-align: center;
369 align-items: center;
370 display: -ms-flexbox;
371 display: flex;
372 gap: 8px;
373 line-height: 1.35
374 }
375 .wpbc_ag_is_locked {
376 opacity: .68
377 }
378 .wpbc_ag_upgrade_required {
379 -ms-flex-align: start;
380 align-items: flex-start;
381 background: var(--wpbc-ts-bg-soft,#f6f7f7);
382 border: 1px solid var(--wpbc-ts-border,#dcdcde);
383 border-radius: var(--wpbc-ts-radius,6px);
384 box-sizing: border-box;
385 color: #50575e;
386 display: -ms-flexbox;
387 display: flex;
388 -ms-flex-flow: row wrap;
389 flex-flow: row wrap;
390 font-size: 12px;
391 gap: 8px;
392 line-height: 1.45;
393 margin: 0 0 12px;
394 padding: 10px
395 }
396 .wpbc_ag_upgrade_required .wpbc_pro_label {
397 -ms-flex: 0 0 auto;
398 flex: 0 0 auto
399 }
400 .wpbc_ag_buffer_fields {
401 background: var(--wpbc-ts-bg-soft,#f6f7f7);
402 border: 1px solid var(--wpbc-ts-border,#dcdcde);
403 border-radius: var(--wpbc-ts-radius,6px);
404 display: none;
405 margin: 10px 0 0;
406 padding: 10px
407 }
408 .wpbc_ag_buffer_fields.is-visible {
409 display: block
410 }
411 .wpbc_ag_future_notice,
412 .wpbc_ag_notice,
413 .wpbc_ag_scope_card {
414 background: var(--wpbc-ts-bg,#fff);
415 border: 1px solid var(--wpbc-ts-border,#dcdcde);
416 border-radius: var(--wpbc-ts-radius,6px);
417 box-sizing: border-box;
418 color: #3c434a;
419 line-height: 1.45;
420 padding: 10px
421 }
422 .wpbc_ag_notice {
423 border-left: 4px solid #dba617;
424 margin: 0 0 12px
425 }
426 .wpbc_ag_notice_error {
427 background: #fcf0f1;
428 border-color: #d63638;
429 color: #8a2424
430 }
431 .wpbc_ag_working_time_block {
432 border-radius: var(--wpbc-ts-radius,6px);
433 margin: 10px 0 0
434 }
435 .wpbc_ag_working_time_block.is-disabled {
436 opacity: .58
437 }
438 .wpbc_ag_working_time_block.is-disabled .wpbc_ag_description {
439 color: #8c8f94
440 }
441 .wpbc_ag_working_time_block h4 {
442 margin: 0 0 10px
443 }
444 .wpbc_ag_working_time_notice {
445 border-left-color: #5459ac
446 }
447 .wpbc_ag_working_time_rows {
448 display: -ms-flexbox;
449 display: flex;
450 -ms-flex-direction: column;
451 flex-direction: column;
452 gap: 10px
453 }
454 .wpbc_ag_working_time_row {
455 -ms-flex-align: start;
456 align-items: flex-start;
457 display: -ms-flexbox;
458 display: flex;
459 -ms-flex-direction: column;
460 flex-direction: column;
461 gap: 6px;
462 min-width: 0;
463 padding: 3px 0 7px;
464 width: 100%
465 }
466 .wpbc_ag_working_time_day {
467 margin: 0;
468 padding: 0
469 }
470 .wpbc_ag_working_time_intervals {
471 display: -ms-flexbox;
472 display: flex;
473 -ms-flex-direction: column;
474 flex-direction: column;
475 gap: 6px;
476 min-width: 0;
477 width: 100%
478 }
479 .wpbc_ag_working_time_times {
480 -ms-flex-align: center;
481 align-items: center;
482 display: -ms-flexbox;
483 display: flex;
484 gap: 6px;
485 min-width: 0;
486 width: 100%
487 }
488 .wpbc_ag_working_time_times .wpbc_ag_field_control {
489 -ms-flex: 1 1 0px;
490 flex: 1 1 0;
491 min-width: 0;
492 width: auto
493 }
494 .wpbc_ag_working_time_add {
495 -ms-flex-align: center;
496 align-items: center;
497 -ms-flex-item-align: start;
498 align-self: flex-start;
499 display: -ms-inline-flexbox;
500 display: inline-flex;
501 gap: 4px
502 }
503 .wpbc_ag_working_time_remove {
504 -ms-flex-align: center;
505 align-items: center;
506 background: 0 0;
507 border: 0;
508 border-radius: 3px;
509 color: #646970;
510 cursor: pointer;
511 display: -ms-inline-flexbox;
512 display: inline-flex;
513 -ms-flex: 0 0 28px;
514 flex: 0 0 28px;
515 height: 28px;
516 -ms-flex-pack: center;
517 justify-content: center;
518 padding: 0;
519 width: 28px
520 }
521 .wpbc_ag_working_time_remove:focus,
522 .wpbc_ag_working_time_remove:hover {
523 color: #d63638
524 }
525 .wpbc_ag_working_time_remove:focus,
526 .wpbc_ag_working_time_remove:focus-visible {
527 box-shadow: 0 0 0 2px #2271b1;
528 outline: transparent solid 2px
529 }
530 .wpbc_ag_working_time_row:not(.is-enabled) .wpbc_ag_working_time_intervals {
531 opacity: .65
532 }
533 .wpbc_ag_working_time_custom {
534 display: none;
535 margin-top: 10px
536 }
537 .wpbc_ag_working_time_custom.is-visible {
538 display: block
539 }
540 .wpbc_ag_scope_title {
541 color: #1d2327;
542 font-weight: 600;
543 margin-bottom: 4px
544 }
545 .wpbc_ag_scope_card p {
546 margin: 0
547 }
548 .wpbc_ag__top_toolbar_group .button,
549 .wpbc_ag__top_toolbar_group .wpbc_ui_control {
550 -ms-flex-align: center;
551 align-items: center;
552 display: -ms-inline-flexbox;
553 display: inline-flex;
554 gap: 6px
555 }
556 .wpbc_ag_is_saving {
557 pointer-events: none
558 }
559 .wpbc_ag_preview_unavailable {
560 opacity: .62
561 }
562 .wpbc_ag_preview_unavailable a {
563 text-decoration: line-through
564 }
565 .wpbc_ag_preview_buffer_unavailable {
566 box-shadow: inset 0 0 0 2px rgba(219,166,23,.38)
567 }
568 @media (max-width:960px) {
569 .wpbc_ag_preview_controls {
570 -ms-flex-pack: start;
571 justify-content: flex-start
572 }
573 .wpbc_ag_toolbar_actions {
574 margin-left: 0
575 }
576 }
577 @media (max-width:540px) {
578 .wpbc_ag_preview_controls {
579 display: grid
580 }
581 .wpbc_ag_preview_controls .button,
582 .wpbc_ag_preview_controls select {
583 width: 100%
584 }
585 .wpbc_ag_weekday_grid {
586 gap: 3px;
587 grid-template-columns: repeat(7,minmax(0,1fr))
588 }
589 .wpbc_ag_working_time_times {
590 gap: 4px
591 }
592 .wpbc_ag_working_time_times .wpbc_ag_field_control {
593 min-width: 0
594 }
595 }