PluginProbe
Booking Calendar / 11.7
Booking Calendar v11.7
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-appointment-services / _src / appointment_services_page.css

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

1,164 lines 28.1 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 .wpbc_appointment_services__inline_toggle.is-active {
800 background: var(--wpbc_admin-theme-color, #2271b1);
801 border-color: var(--wpbc_admin-theme-color, #2271b1);
802 color: #fff;
803 }
804 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__selection_summary:not(.wpbc_appointment_services__inline_bar) {
805 display: none !important;
806 }
807 .wpbc_appointment_services_page.is-inline-editing .wpbc_appointment_services__item {
808 cursor: default;
809 }
810 .wpbc_appointment_services__inline_bar_status {
811 align-items: baseline;
812 display: flex;
813 flex: 1 1 420px;
814 flex-flow: row wrap;
815 gap: 5px 12px;
816 min-width: 0;
817 }
818 .wpbc_appointment_services__inline_bar_status strong {
819 color: #1d2327;
820 }
821 .wpbc_appointment_services__inline_bar_status .description {
822 flex: 1 1 100%;
823 margin: 0;
824 }
825 .wpbc_appointment_services__inline_bar_actions {
826 flex: 0 0 auto;
827 }
828 .wpbc_appointment_services__operation {
829 box-sizing: border-box;
830 padding: 16px 18px 28px;
831 }
832 .wpbc_appointment_services__operation > h2 {
833 font-size: 18px;
834 margin: 0 0 8px;
835 }
836 .wpbc_appointment_services__bulk_field {
837 background: #fff;
838 border: 1px solid #dcdcde;
839 border-radius: 5px;
840 box-sizing: border-box;
841 display: flex;
842 flex-direction: column;
843 gap: 10px;
844 margin: 12px 0;
845 padding: 14px;
846 }
847 .wpbc_appointment_services__bulk_field > span {
848 align-items: center;
849 display: flex;
850 gap: 8px;
851 }
852 .wpbc_appointment_services__bulk_field input:not([type="checkbox"]),
853 .wpbc_appointment_services__bulk_field select {
854 box-sizing: border-box;
855 width: 100%;
856 }
857 .wpbc_appointment_services__bulk_field input[type="range"] {
858 margin: 0;
859 }
860 .wpbc_appointment_services__media {
861 align-items: flex-start;
862 display: flex;
863 flex-flow: row wrap;
864 gap: 10px;
865 justify-content: space-between;
866 margin-bottom: 8px;
867 }
868 .wpbc_appointment_services__media_preview {
869 align-items: center;
870 appearance: none;
871 background: #fcfcfc;
872 border: 1px solid #c3c4c7;
873 border-radius: 4px;
874 box-sizing: border-box;
875 color: #507593;
876 cursor: pointer;
877 display: flex;
878 flex: 1 1 100%;
879 height: 140px;
880 justify-content: center;
881 margin: 0 0 12px;
882 max-height: 140px;
883 min-height: 140px;
884 overflow: hidden;
885 padding: 4px;
886 width: 100%;
887 }
888 .wpbc_appointment_services__media_preview:focus-visible {
889 border-color: var(--wpbc_admin-theme-color, #2271b1);
890 box-shadow: 0 0 0 1px var(--wpbc_admin-theme-color, #2271b1);
891 outline: 2px solid transparent;
892 }
893 .wpbc_appointment_services__media_preview:disabled {
894 cursor: default;
895 opacity: .65;
896 }
897 .wpbc_appointment_services__media_image {
898 display: block;
899 height: 100%;
900 max-width: none;
901 object-fit: cover;
902 width: 100%;
903 }
904 .wpbc_appointment_services__media_image[hidden],
905 .wpbc_appointment_services__media_placeholder[hidden] {
906 display: none;
907 }
908 .wpbc_appointment_services__media_placeholder::before {
909 font-size: 50px;
910 }
911 .wpbc_appointment_services__media_actions {
912 align-items: stretch;
913 display: flex;
914 flex: 1 1 auto;
915 flex-flow: row wrap;
916 gap: 8px;
917 justify-content: flex-start;
918 width: 100%;
919 }
920 .wpbc_appointment_services__picture_row .wpbc_bfb__help {
921 margin-bottom: 0;
922 }
923 .wpbc_appointment_services__rightbar .inspector__control,
924 .wpbc_appointment_services__rightbar .inspector__input {
925 box-sizing: border-box;
926 max-width: none;
927 width: 100%;
928 }
929 .wpbc_appointment_services__footer_actions {
930 box-sizing: border-box;
931 display: flex;
932 justify-content: flex-end;
933 align-items: stretch;
934 flex-flow: row wrap;
935 gap: 8px;
936 padding: 8px 18px;
937 width: 100%;
938 }
939 .wpbc_appointment_services__footer_actions .button {
940 align-items: center;
941 box-sizing: border-box;
942 display: flex;
943 flex: 0 1 auto;
944 gap: 6px;
945 justify-content: center;
946 margin: 0;
947 min-width: 0;
948 }
949 .wpbc_appointment_services__footer_actions .button[hidden] {
950 display: none;
951 }
952 .wpbc_appointment_services__footer_actions[hidden] {
953 display: none;
954 }
955 .wpbc_appointment_services__right_sidebar_footer[hidden] {
956 display: none;
957 }
958 @keyframes wpbc_appointment_services__focus_pulse {
959 0% {
960 box-shadow: 0 0 0 4px rgba(34, 113, 177, .3);
961 }
962 100% {
963 box-shadow: 0 0 0 0 transparent;
964 }
965 }
966 .wpbc_appointment_services__focus_pulse {
967 animation: wpbc_appointment_services__focus_pulse .8s ease-out;
968 position: relative;
969 }
970 @media (prefers-reduced-motion: reduce) {
971 .wpbc_appointment_services__focus_pulse {
972 animation: none;
973 outline: 2px solid var(--wpbc_admin-theme-color, #2271b1);
974 outline-offset: -2px;
975 }
976 }
977 .wpbc_appointment_services__status_options {
978 display: flex;
979 flex-direction: column;
980 gap: 8px;
981 }
982 .wpbc_appointment_services__status_options label {
983 align-items: center;
984 cursor: pointer;
985 display: flex;
986 gap: 7px;
987 line-height: 1.35;
988 margin: 0;
989 }
990 .wpbc_appointment_services__status_options input[type="radio"] {
991 margin: 0;
992 }
993 .wpbc_appointment_services__number_control {
994 display: flex;
995 flex-direction: column;
996 gap: 8px;
997 width: 100%;
998 }
999 .wpbc_appointment_services__number_slider {
1000 box-sizing: border-box;
1001 cursor: pointer;
1002 margin: 0;
1003 min-height: 20px;
1004 padding: 0;
1005 width: 100%;
1006 }
1007 .wpbc_appointment_services__number_slider:disabled {
1008 cursor: default;
1009 opacity: .55;
1010 }
1011 .wpbc_appointment_services__placeholder {
1012 background: #f6f7f7;
1013 border: 1px dashed #c3c4c7;
1014 color: #646970;
1015 padding: 12px;
1016 }
1017 .wpbc_appointment_services__help {
1018 padding: 0 16px 16px;
1019 }
1020 .wpbc_appointment_services__help h4 {
1021 margin: 18px 0 6px;
1022 }
1023 .wpbc_appointment_services__help ol,
1024 .wpbc_appointment_services__help ul {
1025 margin: 8px 0 0 20px;
1026 }
1027 .wpbc_appointment_services__help li {
1028 line-height: 1.6;
1029 margin-bottom: 5px;
1030 }
1031 .wpbc_appointment_services_page.is-busy {
1032 opacity: .72;
1033 pointer-events: none;
1034 }
1035 .wpbc_appointment_services__provider_notice {
1036 align-items: center;
1037 background: #fff8e5;
1038 border: 1px solid #dba617;
1039 border-radius: 4px;
1040 box-sizing: border-box;
1041 display: flex;
1042 gap: 12px;
1043 margin-bottom: 14px;
1044 padding: 12px 14px;
1045 }
1046 .wpbc_appointment_services__provider_notice[hidden] {
1047 display: none;
1048 }
1049 .wpbc_appointment_services__provider_notice > span {
1050 color: #996800;
1051 font-size: 20px;
1052 }
1053 .wpbc_appointment_services__provider_notice > div {
1054 display: flex;
1055 flex: 1 1 auto;
1056 flex-direction: column;
1057 gap: 2px;
1058 }
1059 .wpbc_appointment_services__provider_notice > div > span {
1060 color: #646970;
1061 }
1062 .wpbc_appointment_services__provider_notice .button {
1063 flex: 0 0 auto;
1064 }
1065 @media (max-width: 782px) {
1066 .wpbc_appointment_services__cards_header_controls,
1067 .wpbc_appointment_services__cards_sort {
1068 align-items: flex-start;
1069 flex-direction: column;
1070 }
1071 .wpbc_appointment_services__filter_controls {
1072 grid-template-columns: 1fr;
1073 }
1074 .wpbc_appointment_services__filter_divider {
1075 display: none;
1076 }
1077 .wpbc_appointment_services__provider_total {
1078 margin-left: 10px;
1079 }
1080 .wpbc_appointment_services__provider_notice {
1081 align-items: flex-start;
1082 flex-wrap: wrap;
1083 }
1084 .wpbc_appointment_services__provider_notice .button {
1085 margin-left: 32px;
1086 }
1087 .wpbc_appointment_services__table tbody .column-service {
1088 flex-basis: 100%;
1089 padding-right: 76px;
1090 width: 100%;
1091 }
1092 .wpbc_appointment_services__table tbody .column-service::before,
1093 .wpbc_appointment_services__table tbody .column-actions::before {
1094 display: none;
1095 }
1096 .wpbc_appointment_services__table tbody .column-providers,
1097 .wpbc_appointment_services__table tbody .column-weekdays,
1098 .wpbc_appointment_services__table tbody .column-status {
1099 flex-basis: 100%;
1100 width: 100%;
1101 }
1102 .wpbc_appointment_services__table tbody .column-weekdays {
1103 align-items: flex-start;
1104 flex-wrap: wrap;
1105 text-align: left;
1106 }
1107 .wpbc_appointment_services__provider_stack,
1108 .wpbc_appointment_services__availability_week {
1109 flex: 1 1 auto;
1110 }
1111 .wpbc_appointment_services__availability_week {
1112 min-width: 140px;
1113 }
1114 .wpbc_appointment_services__availability_links,
1115 .wpbc_appointment_services__availability_empty {
1116 box-sizing: border-box;
1117 flex: 0 0 calc(100% - 104px);
1118 margin-left: 104px;
1119 }
1120 .wpbc_appointment_services__table tbody .column-actions {
1121 border: 0;
1122 padding: 0;
1123 position: absolute;
1124 right: 12px;
1125 top: 20px;
1126 width: auto;
1127 }
1128 body.rtl .wpbc_appointment_services__provider_total {
1129 margin-left: 0;
1130 margin-right: 10px;
1131 }
1132 body.rtl .wpbc_appointment_services__provider_notice .button {
1133 margin-left: 0;
1134 margin-right: 32px;
1135 }
1136 body.rtl .wpbc_appointment_services__table tbody .column-service {
1137 padding-left: 76px;
1138 padding-right: 12px;
1139 }
1140 body.rtl .wpbc_appointment_services__availability_links,
1141 body.rtl .wpbc_appointment_services__availability_empty {
1142 margin-left: 0;
1143 margin-right: 104px;
1144 }
1145 body.rtl .wpbc_appointment_services__table tbody .column-actions {
1146 left: 12px;
1147 right: auto;
1148 }
1149 }
1150 @media (max-width: 480px) {
1151 .wpbc_appointment_services__cards {
1152 grid-template-columns: 1fr;
1153 padding: 10px;
1154 }
1155 .wpbc_appointment_services__card_fields {
1156 grid-template-columns: 1fr;
1157 }
1158 .wpbc_appointment_services__table tbody .column-duration,
1159 .wpbc_appointment_services__table tbody .column-price {
1160 flex-basis: 100%;
1161 width: 100%;
1162 }
1163 }
1164