PluginProbe
Booking Calendar / 11.8.4
Booking Calendar v11.8.4
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.8.4, at includes/page-appointment-services/_src/appointment_services_page.css

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