PluginProbe
Booking Calendar / 11.6.1
Booking Calendar v11.6.1
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 10.11 All 204 releases
booking / includes / page-appointment-services / _src / appointment_services_page.css

appointment_services_page.css in Booking Calendar 11.6.1, at includes/page-appointment-services/_src/appointment_services_page.css

1,150 lines 27.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpbc_appointment_services_page {
2 min-width: 0;
3 padding: 20px;
4 }
5 .wpbc_appointment_services__filters {
6 display: flex;
7 flex-direction: column;
8 gap: 14px;
9 margin-bottom: 16px;
10 }
11 .wpbc_appointment_services__status_filters {
12 align-items: center;
13 display: flex;
14 flex-wrap: wrap;
15 gap: 0;
16 }
17 .wpbc_appointment_services__status_filter {
18 align-items: center;
19 background: #fff;
20 border: 1px solid #dcdcde;
21 border-left-width: 0;
22 color: #50575e;
23 cursor: pointer;
24 display: inline-flex;
25 font: inherit;
26 gap: 7px;
27 min-height: 36px;
28 padding: 6px 12px;
29 }
30 .wpbc_appointment_services__status_filter:first-child {
31 border-left-width: 1px;
32 border-radius: 4px 0 0 4px;
33 }
34 .wpbc_appointment_services__status_filter:nth-of-type(4) {
35 border-radius: 0 4px 4px 0;
36 }
37 .wpbc_appointment_services__status_filter strong,
38 .wpbc_appointment_services__provider_total strong {
39 background: #f0f0f1;
40 border-radius: 10px;
41 color: #50575e;
42 font-size: 11px;
43 line-height: 18px;
44 min-width: 18px;
45 padding: 0 5px;
46 text-align: center;
47 }
48 .wpbc_appointment_services__status_filter:hover,
49 .wpbc_appointment_services__status_filter:focus {
50 border-color: #8c8f94;
51 box-shadow: none;
52 color: #1d2327;
53 outline: none;
54 position: relative;
55 z-index: 1;
56 }
57 .wpbc_appointment_services__status_filter.is-active {
58 background: #f0f6fc;
59 border-color: var(--wpbc_admin-theme-color, #2271b1);
60 color: var(--wpbc_admin-theme-color, #2271b1);
61 font-weight: 600;
62 position: relative;
63 z-index: 2;
64 border-left-width:1px;
65 }
66 .wpbc_appointment_services__status_filter.is-active strong {
67 background: var(--wpbc_admin-theme-color, #2271b1);
68 color: #fff;
69 }
70 .wpbc_appointment_services__filter_divider {
71 background: #dcdcde;
72 height: 28px;
73 margin: 0 14px;
74 width: 1px;
75 }
76 .wpbc_appointment_services__provider_total {
77 align-items: center;
78 color: #50575e;
79 display: inline-flex;
80 gap: 7px;
81 min-height: 36px;
82 }
83 .wpbc_appointment_services__filter_controls {
84 display: grid;
85 grid-template-columns: minmax(240px, 480px) minmax(170px, 230px);
86 gap: 10px;
87 }
88 .wpbc_appointment_services__filter_controls input,
89 .wpbc_appointment_services__filter_controls select {
90 box-sizing: border-box;
91 min-height: 38px;
92 max-width: none;
93 width: 100%;
94 }
95 .wpbc_appointment_services__search {
96 position: relative;
97 }
98 .wpbc_appointment_services__search > span {
99 color: #8c8f94;
100 font-size: 16px;
101 left: 10px;
102 position: absolute;
103 top: 5px;
104 }
105 .wpbc_appointment_services__search input {
106 padding-left: 38px;
107 padding-right: 38px;
108 }
109 .wpbc_appointment_services__search input[type="search"]::-webkit-search-cancel-button {
110 -webkit-appearance: none;
111 appearance: none;
112 }
113 .wpbc_appointment_services__search_clear {
114 align-items: center;
115 background: transparent;
116 border: 0;
117 border-radius: 50%;
118 color: #646970;
119 cursor: pointer;
120 display: inline-flex;
121 height: 28px;
122 justify-content: center;
123 padding: 0;
124 position: absolute;
125 right: 5px;
126 top: 50%;
127 transform: translateY(-50%);
128 width: 28px;
129 }
130 .wpbc_appointment_services__search_clear > span {
131 line-height: 1;
132 }
133 .wpbc_appointment_services__search_clear[hidden] {
134 display: none;
135 }
136 .wpbc_appointment_services__search_clear:hover,
137 .wpbc_appointment_services__search_clear:focus-visible {
138 background: #f0f6fc;
139 color: var(--wpbc_admin-theme-color, #2271b1);
140 outline: 2px solid var(--wpbc_admin-theme-color, #2271b1);
141 outline-offset: -2px;
142 }
143 body.rtl .wpbc_appointment_services__search > span {
144 left: auto;
145 right: 10px;
146 }
147 body.rtl .wpbc_appointment_services__search input {
148 padding-left: 38px;
149 padding-right: 38px;
150 }
151 body.rtl .wpbc_appointment_services__search_clear {
152 left: 5px;
153 right: auto;
154 }
155 body.rtl .wpbc_appointment_services__status_filter {
156 border-left-width: 1px;
157 border-right-width: 0;
158 }
159 body.rtl .wpbc_appointment_services__status_filter:first-child {
160 border-radius: 0 4px 4px 0;
161 border-right-width: 1px;
162 }
163 body.rtl .wpbc_appointment_services__status_filter:nth-of-type(4) {
164 border-radius: 4px 0 0 4px;
165 }
166 .wpbc_appointment_services__content {
167 min-height: 360px;
168 position: relative;
169 }
170 .wpbc_appointment_services__catalog_content {
171 min-height: 160px;
172 position: relative;
173 }
174 .wpbc_appointment_services__loading {
175 align-items: center;
176 background: rgba(255, 255, 255, .8);
177 border-radius: 4px;
178 display: flex;
179 inset: 0;
180 justify-content: center;
181 opacity: 0;
182 pointer-events: none;
183 position: absolute;
184 transition: opacity .2s ease-in-out;
185 z-index: 10;
186 }
187 .wpbc_appointment_services__loading.is-visible {
188 opacity: 1;
189 pointer-events: auto;
190 }
191 .wpbc_appointment_services__table .column-service {
192 --wpbc-listing-column-min-width: 280px;
193 --wpbc-listing-column-width: auto;
194 width: auto;
195 }
196
197 .wpbc_appointment_services__table .column-selection {
198 --wpbc-listing-column-min-width: 45px;
199 width: var(--wpbc-listing-column-min-width);
200 }
201 .wpbc_appointment_services__table .column-duration {
202 --wpbc-listing-column-min-width: 120px;
203 width: var(--wpbc-listing-column-min-width);
204 }
205 .wpbc_appointment_services__table .column-price {
206 --wpbc-listing-column-min-width: 80px;
207 width: var(--wpbc-listing-column-min-width);
208 }
209 .wpbc_appointment_services__table .column-providers {
210 --wpbc-listing-column-min-width: 125px;
211 width: var(--wpbc-listing-column-min-width);
212 }
213 .wpbc_appointment_services__table .column-status {
214 --wpbc-listing-column-min-width: 150px;
215 width: var(--wpbc-listing-column-min-width);
216 }
217 .wpbc_appointment_services__table .column-actions {
218 --wpbc-listing-column-min-width: 70px;
219 width: var(--wpbc-listing-column-min-width);
220 }
221 .wpbc_appointment_services__table thead .column-weekdays {
222 --wpbc-listing-column-min-width: 155px;
223 padding: 8px 4px 6px;
224 text-align: center;
225 width: 155px;
226 }
227 .wpbc_appointment_services__weekday_labels {
228 display: flex;
229 font-size: 9px;
230 font-weight: 400;
231 gap: 6px;
232 margin: 4px auto 0;
233 padding: 0;
234 flex-flow: row nowrap;
235 align-items: center;
236 justify-content: space-around;
237 }
238 .wpbc_appointment_services__weekday_labels i {
239 font-style: normal;
240 }
241 .wpbc_appointment_services__status_header {
242 align-items: center;
243 display: flex;
244 flex-flow: row wrap;
245 gap: 2px;
246 width: 100%;
247 }
248 .wpbc_appointment_services__status_identity {
249 align-items: center;
250 display: flex;
251 flex-flow: row wrap;
252 gap: 2px;
253 justify-content: center;
254 width: 100%;
255 }
256 .wpbc_appointment_services__table tbody .column-weekdays {
257 padding-left: 4px;
258 padding-right: 4px;
259 text-align: center;
260 }
261 .wpbc_appointment_services__item {
262 cursor: pointer;
263 }
264 .wpbc_appointment_services__item:hover,
265 .wpbc_appointment_services__item:focus-visible {
266 background: #f6f7f7;
267 outline: 2px solid transparent;
268 }
269 .wpbc_appointment_services__item.is-selected {
270 background: #f0f6fc;
271 box-shadow: inset 3px 0 0 var(--wpbc_admin-theme-color, #2271b1);
272 }
273 .wpbc_appointment_services__service_identity {
274 align-items: center;
275 display: flex;
276 gap: 10px;
277 min-width: 0;
278 }
279 .wpbc_appointment_services__service_thumbnail {
280 align-items: center;
281 background: #f0f0f1;
282 border: 2px solid #fff;
283 border-radius: 50%;
284 box-sizing: border-box;
285 color: #8c8f94;
286 display: inline-flex;
287 flex: 0 0 40px;
288 height: 40px;
289 justify-content: center;
290 outline: #d4d4d7 solid 1px;
291 overflow: hidden;
292 width: 40px;
293 }
294 .wpbc_appointment_services__service_thumbnail img {
295 display: block;
296 height: 100%;
297 max-width: none;
298 object-fit: cover;
299 width: 100%;
300 }
301 .wpbc_appointment_services__service_thumbnail:focus-visible {
302 outline: 2px solid var(--wpbc_admin-theme-color, #2271b1);
303 outline-offset: 2px;
304 }
305 .wpbc_appointment_services__service_copy {
306 display: block;
307 flex: 1 1 auto;
308 max-width: 100%;
309 min-width: 0;
310 overflow: hidden;
311 }
312 .wpbc_appointment_services__inline_identity_fields {
313 display: flex;
314 flex: 1 1 auto;
315 flex-direction: column;
316 gap: 6px;
317 min-width: 0;
318 }
319 .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_title,
320 .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_description {
321 display: block;
322 max-width: 100%;
323 min-width: 0;
324 overflow: hidden;
325 text-overflow: ellipsis;
326 white-space: nowrap;
327 }
328 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_title {
329 color: #1d2327;
330 font-size: 14px;
331 margin-bottom: 4px;
332 }
333 .wpbc_appointment_services__item .wpbc_appointment_services__service_copy > .wpbc_ui_listing__item_description {
334 color: #646970;
335 font-size: 11px;
336 }
337 .wpbc_appointment_services__item .column-duration,
338 .wpbc_appointment_services__item .column-price {
339 font-size: 13px;
340 font-weight: 600;
341 white-space: nowrap;
342 }
343 .wpbc_appointment_services__duration_details {
344 display: flex;
345 flex-direction: column;
346 gap: 3px;
347 min-width: 0;
348 }
349 .wpbc_appointment_services__duration_value {
350 font-size: 13px;
351 font-weight: 600;
352 line-height: 1.3;
353 }
354 .wpbc_appointment_services__buffers_summary {
355 color: #646970;
356 font-size: 10px;
357 font-weight: 400;
358 line-height: 1.3;
359 overflow: hidden;
360 text-overflow: ellipsis;
361 white-space: nowrap;
362 }
363 .wpbc_appointment_services__provider_stack {
364 align-items: center;
365 display: flex;
366 min-width: 90px;
367 }
368 .wpbc_appointment_services__provider_avatar,
369 .wpbc_appointment_services__provider_more {
370 align-items: center;
371 background: #e7ecfb;
372 border: 2px solid #fff;
373 border-radius: 50%;
374 box-sizing: border-box;
375 color: #2943a8;
376 display: inline-flex;
377 font-size: 9px;
378 font-weight: 700;
379 height: 30px;
380 justify-content: center;
381 margin-left: -7px;
382 overflow: hidden;
383 width: 30px;
384 }
385 .wpbc_appointment_services__provider_avatar:first-child {
386 margin-left: 0;
387 }
388 a.wpbc_appointment_services__provider_avatar {
389 text-decoration: none;
390 }
391 a.wpbc_appointment_services__provider_avatar:hover,
392 a.wpbc_appointment_services__provider_avatar:focus-visible {
393 border-color: var(--wpbc_admin-theme-color, #2271b1);
394 color: var(--wpbc_admin-theme-color, #2271b1);
395 outline: 2px solid transparent;
396 position: relative;
397 z-index: 1;
398 }
399 .wpbc_appointment_services__provider_avatar img {
400 height: 100%;
401 object-fit: cover;
402 width: 100%;
403 }
404 .wpbc_appointment_services__provider_avatar.has-no-availability {
405 background: #f0f0f1;
406 border-color: #dcdcde;
407 color: #8c8f94;
408 filter: grayscale(1);
409 opacity: .75;
410 }
411 .wpbc_appointment_services__provider_more {
412 background: #f0f0f1;
413 color: #50575e;
414 }
415 .wpbc_appointment_services__no_provider {
416 color: #8c8f94;
417 font-size: 11px;
418 }
419 .wpbc_appointment_services__availability {
420 background: #dcdcde;
421 border-radius: 50%;
422 display: inline-block;
423 flex: 0 0 10px;
424 height: 10px;
425 width: 10px;
426 }
427 .wpbc_appointment_services__availability.is-available {
428 background: #00a32a;
429 }
430 .wpbc_appointment_services__availability_week {
431 align-items: center;
432 display: flex;
433 gap: 0px;
434 justify-content: space-around;
435 }
436 .wpbc_appointment_services__availability_links {
437 display: flex;
438 flex-wrap: wrap;
439 gap: 3px;
440 justify-content: center;
441 margin-top: 6px;
442 }
443 .wpbc_appointment_services__availability_link {
444 background: #f6f7f7;
445 border: 1px solid #dcdcde;
446 border-radius: 3px;
447 color: var(--wpbc_admin-theme-color, #2271b1);
448 font-size: 9px;
449 font-weight: 600;
450 line-height: 16px;
451 min-width: 18px;
452 padding: 0 3px;
453 text-align: center;
454 text-decoration: none;
455 display:none;
456 }
457 .wpbc_appointment_services__availability_link:hover,
458 .wpbc_appointment_services__availability_link:focus-visible {
459 background: #f0f6fc;
460 border-color: var(--wpbc_admin-theme-color, #2271b1);
461 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1);
462 color: var(--wpbc_admin-theme-color, #2271b1);
463 outline: 2px solid transparent;
464 }
465 .wpbc_appointment_services__availability_empty {
466 color: #b32d2e;
467 display: block;
468 font-size: 10px;
469 line-height: 1.25;
470 margin-top: 5px;
471 }
472 .wpbc_appointment_services__status {
473 background: #f0f0f1;
474 border-radius: 12px;
475 color: #50575e;
476 display: inline-block;
477 font-size: 11px;
478 font-weight: 600;
479 line-height: 22px;
480 padding: 1px 14px;
481 white-space: nowrap;
482 }
483 .wpbc_appointment_services__id {
484 font-size: 9px;
485 font-weight: 600;
486 padding: 0 10px;
487 white-space: nowrap;
488 }
489 .wpbc_appointment_services__status.status-active {
490 background: #f7f7f6;
491 color: #218534;
492 }
493 .wpbc_appointment_services__status.status-inactive {
494 background: #fff7e6;
495 color: #8a5700;
496 }
497 .wpbc_appointment_services__status.status-archived {
498 background: #f0f0f1;
499 color: #646970;
500 }
501 .wpbc_appointment_services__item .column-actions {
502 white-space: nowrap;
503 }
504 .wpbc_appointment_services__item .column-actions button {
505 color: #646970;
506 font-size: 15px;
507 margin-right: 12px;
508 text-decoration: none;
509 }
510 .wpbc_appointment_services__item .column-actions button:hover,
511 .wpbc_appointment_services__item .column-actions button:focus {
512 color: var(--wpbc_admin-theme-color, #2271b1);
513 outline: none;
514 }
515 .wpbc_appointment_services__empty {
516 color: #646970;
517 display: flex;
518 flex-flow: row wrap;
519 gap: 8px;
520 justify-content: center;
521 align-content: center;
522 align-items: center;
523 min-height: 150px;
524 text-align: center;
525 }
526 .wpbc_appointment_services__empty[hidden],
527 .wpbc_appointment_services__list[hidden] {
528 display: none;
529 }
530 .wpbc_appointment_services__empty > span {
531 color: #8c8f94;
532 font-size: 38px;
533 }
534 .wpbc_appointment_services__empty h2,
535 .wpbc_appointment_services__empty p {
536 margin: 0;
537 }
538 .wpbc_appointment_services__empty.is-storage-notice {
539 background: #fff;
540 border: 1px dashed #c3c4c7;
541 border-radius: 4px;
542 box-sizing: border-box;
543 min-height: 240px;
544 padding: 30px;
545 }
546 .wpbc_appointment_services__empty--error > span {
547 color: #b32d2e;
548 }
549 .wpbc_appointment_services__table--compact td,
550 .wpbc_appointment_services__table--compact th {
551 padding-bottom: 8px;
552 padding-top: 8px;
553 }
554 .wpbc_appointment_services__table--compact .wpbc_appointment_services__service_thumbnail {
555 flex-basis: 36px;
556 height: 36px;
557 width: 36px;
558 }
559 .wpbc_appointment_services__table .column-selection,
560 .wpbc_appointment_services__table .wpbc_ui_listing__selection_column {
561 box-sizing: border-box;
562 min-width: 36px;
563 padding-left: 4px;
564 padding-right: 4px;
565 text-align: center;
566 width: 36px;
567 }
568 .wpbc_appointment_services__cards {
569 display: grid;
570 gap: 16px;
571 grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
572 padding: 16px;
573 }
574 .wpbc_appointment_services__cards_header {
575 background: #fff;
576 border-block-end: 1px solid #dcdcde;
577 padding: 12px 16px;
578 }
579 .wpbc_appointment_services__cards_header_controls {
580 align-items: center;
581 display: flex;
582 flex-flow: row wrap;
583 gap: 12px;
584 justify-content: space-between;
585 }
586 .wpbc_appointment_services__cards_select_all {
587 align-items: center;
588 cursor: pointer;
589 display: inline-flex;
590 gap: 7px;
591 margin: 0;
592 }
593 .wpbc_appointment_services__cards_select_all input {
594 margin: 0;
595 }
596 .wpbc_appointment_services__cards_sort {
597 align-items: center;
598 display: flex;
599 flex-flow: row wrap;
600 gap: 8px;
601 }
602 .wpbc_appointment_services__cards_sort > span {
603 color: #646970;
604 font-size: 12px;
605 }
606 .wpbc_appointment_services__cards_sort a {
607 align-items: center;
608 border-radius: 3px;
609 display: inline-flex;
610 gap: 4px;
611 padding: 5px 7px;
612 text-decoration: none;
613 }
614 .wpbc_appointment_services__cards_sort a.is-active {
615 background: #f0f6fc;
616 font-weight: 600;
617 }
618 .wpbc_appointment_services__card {
619 background: #fff;
620 border: 1px solid #dcdcde;
621 border-radius: 5px;
622 box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
623 box-sizing: border-box;
624 display: flex;
625 flex-direction: column;
626 min-height: 420px;
627 overflow: hidden;
628 padding: 0;
629 position: relative;
630 }
631 .wpbc_appointment_services__card:hover,
632 .wpbc_appointment_services__card:focus-visible {
633 border-color: var(--wpbc_admin-theme-color, #2271b1);
634 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1);
635 }
636 .wpbc_appointment_services__item.is-selected,
637 .wpbc_appointment_services__card.is-selected,
638 .wpbc_appointment_services__card.is-inspector-selected,
639 .wpbc_appointment_services__item.is-inspector-selected {
640 background: #f0f6fc;
641 border-color: var(--wpbc_admin-theme-color, #2271b1);
642 box-shadow: inset 3px 0 0 var(--wpbc_admin-theme-color, #2271b1);
643 }
644 body.rtl .wpbc_appointment_services__item.is-selected,
645 body.rtl .wpbc_appointment_services__card.is-selected,
646 body.rtl .wpbc_appointment_services__item.is-inspector-selected,
647 body.rtl .wpbc_appointment_services__card.is-inspector-selected {
648 box-shadow: inset -3px 0 0 var(--wpbc_admin-theme-color, #2271b1);
649 }
650 .wpbc_appointment_services__item.is-recently-saved {
651 animation: wpbc-appointment-service-saved-border 2.8s ease-out;
652 }
653 .wpbc_appointment_services__item.is-recently-saved > td {
654 animation: wpbc-appointment-service-saved-background 2.8s ease-out;
655 }
656 .wpbc_appointment_services__card.is-recently-saved {
657 animation: wpbc-appointment-service-saved-card 2.8s ease-out;
658 }
659 @keyframes wpbc-appointment-service-saved-border {
660 0%, 45% { box-shadow: inset 3px 0 #00a32a; }
661 100% { box-shadow: inset 3px 0 transparent; }
662 }
663 @keyframes wpbc-appointment-service-saved-background {
664 0%, 45% { background: #edfaef; }
665 100% { background: transparent; }
666 }
667 @keyframes wpbc-appointment-service-saved-card {
668 0%, 45% {
669 background: #edfaef;
670 border-color: #00a32a;
671 box-shadow: inset 3px 0 #00a32a;
672 }
673 100% {
674 background: #fff;
675 border-color: #dcdcde;
676 box-shadow: inset 3px 0 transparent;
677 }
678 }
679 .wpbc_appointment_services__card_media {
680 align-items: center;
681 background: #f0f0f1;
682 color: #8c8f94;
683 display: flex;
684 height: 170px;
685 justify-content: center;
686 overflow: hidden;
687 position: relative;
688 }
689 .wpbc_appointment_services__card_media > img {
690 display: block;
691 height: 100%;
692 max-width: none;
693 object-fit: cover;
694 width: 100%;
695 }
696 .wpbc_appointment_services__card_media.has-placeholder > span {
697 font-size: 44px;
698 }
699 .wpbc_appointment_services__card_select {
700 align-items: center;
701 background: rgba(255, 255, 255, .82);
702 border-radius: 50%;
703 display: flex;
704 height: 42px;
705 justify-content: center;
706 left: 14px;
707 position: absolute;
708 top: 14px;
709 width: 42px;
710 z-index: 2;
711 }
712 .wpbc_appointment_services__card_select input[type="checkbox"] {
713 margin: 0;
714 }
715 body.rtl .wpbc_appointment_services__card_select {
716 left: auto;
717 right: 14px;
718 }
719 .wpbc_appointment_services__card_identity {
720 border-bottom: 1px solid #f0f0f1;
721 margin: 0 16px 12px;
722 padding: 12px 0;
723 }
724 .wpbc_appointment_services__card_identity .wpbc_appointment_services__service_thumbnail {
725 margin-top: -34px;
726 position: relative;
727 z-index: 1;
728 }
729 .wpbc_appointment_services__card_fields {
730 display: grid;
731 gap: 10px;
732 grid-template-columns: repeat(2, minmax(0, 1fr));
733 padding: 0 16px 16px;
734 }
735 .wpbc_appointment_services__card_field {
736 border: 1px solid #f0f0f1;
737 border-radius: 4px;
738 box-sizing: border-box;
739 min-width: 0;
740 padding: 10px;
741 }
742 .wpbc_appointment_services__card_field > span {
743 color: #646970;
744 display: block;
745 font-size: 11px;
746 margin-bottom: 7px;
747 }
748 .wpbc_appointment_services__card_actions {
749 border-top: 1px solid #f0f0f1;
750 margin: auto 0 0;
751 padding: 12px 16px;
752 text-align: right;
753 }
754 body.rtl .wpbc_appointment_services__card_actions {
755 text-align: left;
756 }
757 .wpbc_appointment_services__card .wpbc_appointment_services__availability_week {
758 min-width: Min( 130px, 100% );
759 }
760 .wpbc_appointment_services__inline_input,
761 .wpbc_appointment_services__inline_number,
762 .wpbc_appointment_services__inline_textarea {
763 box-sizing: border-box;
764 margin: 0 !important;
765 max-width: 100%;
766 width: 100%;
767 }
768 .wpbc_appointment_services__inline_field {
769 display: block;
770 min-width: 0;
771 width: 100%;
772 }
773 .wpbc_appointment_services__inline_identity_fields .wpbc_appointment_services__inline_field + .wpbc_appointment_services__inline_field {
774 margin-top: 6px;
775 }
776 .wpbc_appointment_services__inline_input {
777 font-weight: 600;
778 }
779 .wpbc_appointment_services__inline_textarea {
780 min-height: 68px;
781 resize: vertical;
782 }
783 .wpbc_appointment_services__inline_number {
784 min-width: 82px;
785 }
786 .wpbc_appointment_services_page .wpbc_appointment_services__inline_toggle.is-active {
787 background: var(--wpbc_admin-theme-color, #2271b1);
788 border-color: var(--wpbc_admin-theme-color, #2271b1);
789 color: #fff;
790 }
791 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__selection_summary:not(.wpbc_appointment_services__inline_bar) {
792 display: none !important;
793 }
794 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__item {
795 cursor: default;
796 }
797 .wpbc_appointment_services__inline_bar_status {
798 align-items: baseline;
799 display: flex;
800 flex: 1 1 420px;
801 flex-flow: row wrap;
802 gap: 5px 12px;
803 min-width: 0;
804 }
805 .wpbc_appointment_services__inline_bar_status strong {
806 color: #1d2327;
807 }
808 .wpbc_appointment_services__inline_bar_status .description {
809 flex: 1 1 100%;
810 margin: 0;
811 }
812 .wpbc_appointment_services__inline_bar_actions {
813 flex: 0 0 auto;
814 }
815 .wpbc_appointment_services__operation {
816 box-sizing: border-box;
817 padding: 16px 18px 28px;
818 }
819 .wpbc_appointment_services__operation > h2 {
820 font-size: 18px;
821 margin: 0 0 8px;
822 }
823 .wpbc_appointment_services__bulk_field {
824 background: #fff;
825 border: 1px solid #dcdcde;
826 border-radius: 5px;
827 box-sizing: border-box;
828 display: flex;
829 flex-direction: column;
830 gap: 10px;
831 margin: 12px 0;
832 padding: 14px;
833 }
834 .wpbc_appointment_services__bulk_field > span {
835 align-items: center;
836 display: flex;
837 gap: 8px;
838 }
839 .wpbc_appointment_services__bulk_field input:not([type="checkbox"]),
840 .wpbc_appointment_services__bulk_field select {
841 box-sizing: border-box;
842 width: 100%;
843 }
844 .wpbc_appointment_services__bulk_field input[type="range"] {
845 margin: 0;
846 }
847 .wpbc_appointment_services__media {
848 align-items: flex-start;
849 display: flex;
850 flex-flow: row wrap;
851 gap: 10px;
852 justify-content: space-between;
853 margin-bottom: 8px;
854 }
855 .wpbc_appointment_services__media_preview {
856 align-items: center;
857 appearance: none;
858 background: #fcfcfc;
859 border: 1px solid #c3c4c7;
860 border-radius: 4px;
861 box-sizing: border-box;
862 color: #507593;
863 cursor: pointer;
864 display: flex;
865 flex: 1 1 100%;
866 height: 140px;
867 justify-content: center;
868 margin: 0 0 12px;
869 max-height: 140px;
870 min-height: 140px;
871 overflow: hidden;
872 padding: 4px;
873 width: 100%;
874 }
875 .wpbc_appointment_services__media_preview:focus-visible {
876 border-color: var(--wpbc_admin-theme-color, #2271b1);
877 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1);
878 outline: 2px solid transparent;
879 }
880 .wpbc_appointment_services__media_preview:disabled {
881 cursor: default;
882 opacity: .65;
883 }
884 .wpbc_appointment_services__media_image {
885 display: block;
886 height: 100%;
887 max-width: none;
888 object-fit: cover;
889 width: 100%;
890 }
891 .wpbc_appointment_services__media_image[hidden],
892 .wpbc_appointment_services__media_placeholder[hidden] {
893 display: none;
894 }
895 .wpbc_appointment_services__media_placeholder::before {
896 font-size: 50px;
897 }
898 .wpbc_appointment_services__media_actions {
899 align-items: stretch;
900 display: flex;
901 flex: 1 1 auto;
902 flex-flow: row wrap;
903 gap: 8px;
904 justify-content: flex-start;
905 width: 100%;
906 }
907 .wpbc_appointment_services__picture_row .wpbc_bfb__help {
908 margin-bottom: 0;
909 }
910 .wpbc_appointment_services__rightbar .inspector__control,
911 .wpbc_appointment_services__rightbar .inspector__input {
912 box-sizing: border-box;
913 max-width: none;
914 width: 100%;
915 }
916 .wpbc_appointment_services__footer_actions {
917 align-items: stretch;
918 box-sizing: border-box;
919 display: flex;
920 flex-wrap: wrap;
921 gap: 8px;
922 padding: 8px 18px;
923 width: 100%;
924 }
925 .wpbc_appointment_services__footer_actions .button {
926 align-items: center;
927 box-sizing: border-box;
928 display: flex;
929 flex: 1 1 auto;
930 gap: 6px;
931 justify-content: center;
932 margin: 0;
933 min-width: 0;
934 }
935 .wpbc_appointment_services__footer_actions .button[hidden] {
936 display: none;
937 }
938 .wpbc_appointment_services__footer_actions[hidden] {
939 display: none;
940 }
941 .wpbc_appointment_services__right_sidebar_footer[hidden] {
942 display: none;
943 }
944 @keyframes wpbc_appointment_services__focus_pulse {
945 0% {
946 box-shadow: 0 0 0 4px rgba(34, 113, 177, .3);
947 }
948 100% {
949 box-shadow: 0 0 0 0 transparent;
950 }
951 }
952 .wpbc_appointment_services__focus_pulse {
953 animation: wpbc_appointment_services__focus_pulse .8s ease-out;
954 position: relative;
955 }
956 @media (prefers-reduced-motion: reduce) {
957 .wpbc_appointment_services__focus_pulse {
958 animation: none;
959 outline: 2px solid var(--wpbc_admin-theme-color, #2271b1);
960 outline-offset: -2px;
961 }
962 }
963 .wpbc_appointment_services__status_options {
964 display: flex;
965 flex-direction: column;
966 gap: 8px;
967 }
968 .wpbc_appointment_services__status_options label {
969 align-items: center;
970 cursor: pointer;
971 display: flex;
972 gap: 7px;
973 line-height: 1.35;
974 margin: 0;
975 }
976 .wpbc_appointment_services__status_options input[type="radio"] {
977 margin: 0;
978 }
979 .wpbc_appointment_services__number_control {
980 display: flex;
981 flex-direction: column;
982 gap: 8px;
983 width: 100%;
984 }
985 .wpbc_appointment_services__number_slider {
986 box-sizing: border-box;
987 cursor: pointer;
988 margin: 0;
989 min-height: 20px;
990 padding: 0;
991 width: 100%;
992 }
993 .wpbc_appointment_services__number_slider:disabled {
994 cursor: default;
995 opacity: .55;
996 }
997 .wpbc_appointment_services__placeholder {
998 background: #f6f7f7;
999 border: 1px dashed #c3c4c7;
1000 color: #646970;
1001 padding: 12px;
1002 }
1003 .wpbc_appointment_services__help {
1004 padding: 0 16px 16px;
1005 }
1006 .wpbc_appointment_services__help h4 {
1007 margin: 18px 0 6px;
1008 }
1009 .wpbc_appointment_services__help ol,
1010 .wpbc_appointment_services__help ul {
1011 margin: 8px 0 0 20px;
1012 }
1013 .wpbc_appointment_services__help li {
1014 line-height: 1.6;
1015 margin-bottom: 5px;
1016 }
1017 .wpbc_appointment_services_page.is-busy {
1018 opacity: .72;
1019 pointer-events: none;
1020 }
1021 .wpbc_appointment_services__provider_notice {
1022 align-items: center;
1023 background: #fff8e5;
1024 border: 1px solid #dba617;
1025 border-radius: 4px;
1026 box-sizing: border-box;
1027 display: flex;
1028 gap: 12px;
1029 margin-bottom: 14px;
1030 padding: 12px 14px;
1031 }
1032 .wpbc_appointment_services__provider_notice[hidden] {
1033 display: none;
1034 }
1035 .wpbc_appointment_services__provider_notice > span {
1036 color: #996800;
1037 font-size: 20px;
1038 }
1039 .wpbc_appointment_services__provider_notice > div {
1040 display: flex;
1041 flex: 1 1 auto;
1042 flex-direction: column;
1043 gap: 2px;
1044 }
1045 .wpbc_appointment_services__provider_notice > div > span {
1046 color: #646970;
1047 }
1048 .wpbc_appointment_services__provider_notice .button {
1049 flex: 0 0 auto;
1050 }
1051 @media (max-width: 782px) {
1052 .wpbc_appointment_services__cards_header_controls,
1053 .wpbc_appointment_services__cards_sort {
1054 align-items: flex-start;
1055 flex-direction: column;
1056 }
1057 .wpbc_appointment_services__filter_controls {
1058 grid-template-columns: 1fr;
1059 }
1060 .wpbc_appointment_services__filter_divider {
1061 display: none;
1062 }
1063 .wpbc_appointment_services__provider_total {
1064 margin-left: 10px;
1065 }
1066 .wpbc_appointment_services__provider_notice {
1067 align-items: flex-start;
1068 flex-wrap: wrap;
1069 }
1070 .wpbc_appointment_services__provider_notice .button {
1071 margin-left: 32px;
1072 }
1073 .wpbc_appointment_services__table tbody .column-service {
1074 flex-basis: 100%;
1075 padding-right: 76px;
1076 width: 100%;
1077 }
1078 .wpbc_appointment_services__table tbody .column-service::before,
1079 .wpbc_appointment_services__table tbody .column-actions::before {
1080 display: none;
1081 }
1082 .wpbc_appointment_services__table tbody .column-providers,
1083 .wpbc_appointment_services__table tbody .column-weekdays,
1084 .wpbc_appointment_services__table tbody .column-status {
1085 flex-basis: 100%;
1086 width: 100%;
1087 }
1088 .wpbc_appointment_services__table tbody .column-weekdays {
1089 align-items: flex-start;
1090 flex-wrap: wrap;
1091 text-align: left;
1092 }
1093 .wpbc_appointment_services__provider_stack,
1094 .wpbc_appointment_services__availability_week {
1095 flex: 1 1 auto;
1096 }
1097 .wpbc_appointment_services__availability_week {
1098 min-width: 140px;
1099 }
1100 .wpbc_appointment_services__availability_links,
1101 .wpbc_appointment_services__availability_empty {
1102 box-sizing: border-box;
1103 flex: 0 0 calc(100% - 104px);
1104 margin-left: 104px;
1105 }
1106 .wpbc_appointment_services__table tbody .column-actions {
1107 border: 0;
1108 padding: 0;
1109 position: absolute;
1110 right: 12px;
1111 top: 20px;
1112 width: auto;
1113 }
1114 body.rtl .wpbc_appointment_services__provider_total {
1115 margin-left: 0;
1116 margin-right: 10px;
1117 }
1118 body.rtl .wpbc_appointment_services__provider_notice .button {
1119 margin-left: 0;
1120 margin-right: 32px;
1121 }
1122 body.rtl .wpbc_appointment_services__table tbody .column-service {
1123 padding-left: 76px;
1124 padding-right: 12px;
1125 }
1126 body.rtl .wpbc_appointment_services__availability_links,
1127 body.rtl .wpbc_appointment_services__availability_empty {
1128 margin-left: 0;
1129 margin-right: 104px;
1130 }
1131 body.rtl .wpbc_appointment_services__table tbody .column-actions {
1132 left: 12px;
1133 right: auto;
1134 }
1135 }
1136 @media (max-width: 480px) {
1137 .wpbc_appointment_services__cards {
1138 grid-template-columns: 1fr;
1139 padding: 10px;
1140 }
1141 .wpbc_appointment_services__card_fields {
1142 grid-template-columns: 1fr;
1143 }
1144 .wpbc_appointment_services__table tbody .column-duration,
1145 .wpbc_appointment_services__table tbody .column-price {
1146 flex-basis: 100%;
1147 width: 100%;
1148 }
1149 }
1150