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 / _src / availability_general_page.css

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

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