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 / __css / admin / page-bookings / bo_listing.css

bo_listing.css in Booking Calendar 11.8.4, at includes/__css/admin/page-bookings/bo_listing.css

1,137 lines 33.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* == V A R s == */
2 .wpbc_admin {
3 --wpbc_ui_listing__back_color: #fff;
4 --wpbc_ui_listing__back_alt_color: #fbfbfc;
5 --wpbc_ui_listing__table_border_color: #d6d6d6;
6 --wpbc_ui_listing__row_border_color: #e4e4e4;
7
8 --wpbc_ui_listing__border_radius: var(--wpbc_ui__gen__border-radius);
9
10 --wpbc_ui_listing__header_height: 44px;
11
12 --wpbc_ui_listing__pending_color: #ed9f0a;
13 --wpbc_ui_listing__approved_color: #64AA45;
14 --wpbc_ui_listing__trash_color: #d94a48;
15 --wpbc_ui_listing__restore_color: #1e9220;
16 --wpbc_ui_listing__resource_color: var(--wpbc_admin-theme-color, #6b96ce); /* FixIn: 10.15.1.7. */
17 --wpbc_ui_listing__selected_row_color: var(--wpbc_admin-theme-color, #08a );
18
19 --wpbc_ui_listing__colapsed_height: 80px;
20 }
21
22 /** ====================================================================================================================
23 .wpbc__wrap__booking_listing{
24 .wpbc__list__table {
25 .wpbc__list__head {
26 .wpbc__list__row {
27 .wpbc__list__col {
28
29 }
30 }
31 }
32 .wpbc__list__body {
33 .wpbc__list__row {
34 .wpbc__list__col {
35
36 }
37 }
38 }
39 }
40 }
41 */
42 /* ================================================================================================================== */
43 /* == S t r u c u t u r e == */
44 /* ================================================================================================================== */
45 .wpbc__wrap__booking_listing {
46 margin: 15px 0;
47 min-height: 550px;
48 }
49 /* Exception for the Booking Listing to show correctly the Bulk Actions - Long Dropdown menu*/
50 .wpbc_admin.wpbc_admin_page__tab__vm_booking_listing .wpbc_settings_page_content {
51 min-width: 0;
52 overflow: visible;
53 }
54 .wpbc__list__table,
55 .wpbc__list__table .wpbc__list__head,
56 .wpbc__list__table .wpbc__list__foot,
57 .wpbc__list__table .wpbc__list__body {
58 flex: 1 1 100%;
59 width: 100%;
60
61 display: flex;
62 flex-flow: column nowrap;
63 justify-content: flex-start;
64 align-items: stretch;
65
66 margin: 0;
67 padding: 0;
68 }
69 .wpbc__list__table .wpbc__list__row{
70 flex: 1 1 100%;
71 width: 100%;
72
73 display: flex;
74 flex-flow: row wrap;
75 justify-content: flex-start;
76 align-items: flex-start;
77 }
78 .wpbc__list__table .wpbc__list__col {
79 /*flex: 1 1 1px;*/
80 flex: 0 1 auto;
81
82 display: flex;
83 flex-flow: row wrap;
84 justify-content: flex-start;
85 align-items: flex-start;
86 align-content: normal;
87 }
88 /* ------------------------------------------------------------------------------------------------------------------ */
89 /* == S t y l e s == */
90 /* ------------------------------------------------------------------------------------------------------------------ */
91 .wpbc__list__table {
92 border-radius: var(--wpbc_ui_listing__border_radius);
93 background: transparent;
94
95 }
96 /* == H E A D E R == */
97 .wpbc__list__table .wpbc__list__head,
98 .wpbc__list__table .wpbc__list__foot{
99 background: var(--wpbc_ui_listing__back_color);
100 border-radius: var(--wpbc_ui_listing__border_radius) var(--wpbc_ui_listing__border_radius) 0 0;
101 border-bottom: 1px solid var(--wpbc_ui_listing__row_border_color);
102 min-height: var(--wpbc_ui_listing__header_height);
103 line-height: var(--wpbc_ui_listing__header_height);
104 /* left padding: 8px = because usual row has: 4px padding & 4px border */
105 padding:0 4px 0 8px;
106 box-sizing: border-box;
107 }
108 /* == F O O T E R == */
109 .wpbc__list__table .wpbc__list__foot {
110 border-radius: 0 0 var(--wpbc_ui_listing__border_radius) var(--wpbc_ui_listing__border_radius);
111 border: 0;
112 border-top: 1px solid var(--wpbc_ui_listing__row_border_color);
113 padding: 5px 15px;
114 }
115 .wpbc__list__table .wpbc__list__foot *{
116 font-size: 1em;
117 }
118 .wpbc__list__table .wpbc__list__head .wpbc__list__col,
119 .wpbc__list__table .wpbc__list__foot .wpbc__list__col{
120 align-items: center;
121 }
122 /* ------------------------------------------------------------------------------------------------------------------ */
123 /* == Elements == */
124 /* ------------------------------------------------------------------------------------------------------------------ */
125 .wpbc__list__table .wpbc__list__head .wpbc__list__row,
126 .wpbc__list__table .wpbc__list__foot .wpbc__list__row {
127 align-items: stretch;
128 }
129 .wpbc__list__table .wpbc__list__head .wpbc__list__col.check-column,
130 .wpbc__list__table .wpbc__list__foot .wpbc__list__col.check-column {
131 flex: 0 0 40px;
132 display: flex;
133 flex-flow: column nowrap;
134 align-items: center;
135 justify-content: center;
136 }
137 /* == LINKS == */
138 .wpbc__list__table .wpbc__list__head a,
139 .wpbc__list__table .wpbc__list__head a:hover,
140 .wpbc__list__table .wpbc__list__head a:focus,
141 .wpbc__list__table .wpbc__list__foot a,
142 .wpbc__list__table .wpbc__list__foot a:hover,
143 .wpbc__list__table .wpbc__list__foot a:focus {
144 text-decoration: none;
145 }
146 .wpbc__list__table .wpbc__list__head .wpbc_ui_el__a,
147 .wpbc__list__table .wpbc__list__foot .wpbc_ui_el__a,
148 .wpbc__list__table .wpbc__list__head .ul_dropdown_menu_toggle,
149 .wpbc__list__table .wpbc__list__foot .ul_dropdown_menu_toggle {
150 color: var(--wpbc_ui__gen__text-color);
151 }
152 .wpbc__list__table .wpbc__list__head .wpbc_ui_el__a.disabled,
153 .wpbc__list__table .wpbc__list__foot .wpbc_ui_el__a.disabled {
154 color:#d8d8d8;
155 cursor: not-allowed;
156 }
157 /* ------------------------------------------------------------------------------------------------------------------ */
158 /* == Pagination in Booking Listing == */
159 /* ------------------------------------------------------------------------------------------------------------------ */
160 .wpbc_pagination_el {
161 flex: 0 1 auto;
162
163 display: flex;
164 flex-flow: row wrap;
165 justify-content: flex-start;
166 align-items: center;
167 }
168 .wpbc_pagination__prev_next .wpbc_ui_el:first-child,
169 .wpbc_pagination_active_page_in_selectbox {
170 margin-right: 10px;
171 }
172 .wpbc_pagination__prev_next .wpbc_ui_el__a {
173 margin: 0;
174 padding: 0 5px;
175 }
176 .wpbc__list__head .wpbc_ui_el__a .menu_icon::before {
177 font-size: 28px;
178 line-height: var(--wpbc_ui_listing__header_height);
179 vertical-align: middle;
180 }
181 .wpbc__list__head .wpbc_ui_el__divider .wpbc_ui_el__vertical_line,
182 .wpbc__list__foot .wpbc_ui_el__divider .wpbc_ui_el__vertical_line{
183 margin: 5px 15px;
184 }
185 /* ================================================================================================================== */
186 /* == G e n e r a l - R O W - C O L == */
187 /* ================================================================================================================== */
188 .wpbc__list__col.col__right {
189 margin-left: auto;
190 }
191
192 .wpbc_a_row {
193 flex: 1 1 100%;
194 width: 100%;
195
196 display: flex;
197 flex-flow: row wrap;
198 justify-content: flex-start;
199 align-items: flex-start;
200 }
201 .wpbc_a_col {
202 flex: 1 1 1px;
203
204 display: flex;
205 flex-flow: row wrap;
206 justify-content: flex-start;
207 align-items: flex-start;
208 align-content: normal;
209 }
210 .wpbc_a_overflow_hide{
211 overflow: hidden;
212 }
213 .wpbc_a_row_nowrap{
214 flex-flow: row nowrap;
215 }
216
217 /* ================================================================================================================== */
218 /* == C O N T A I N E R == */
219 /* ================================================================================================================== */
220 .wpbc__list__table {
221 display: flex;
222 flex-flow: column nowrap;
223 justify-content: flex-start;
224 align-items: stretch;
225
226 margin: 0;
227 padding: 0;
228 box-shadow: 0 0 1px #aaa;
229 }
230 .wpbc__list__table:has(.wpbc_spins_loading_container) {
231 box-shadow: none;
232 }
233 /* B O D Y */
234 .wpbc__list__table .wpbc_selectable_body {
235 display: flex;
236 flex-flow: column nowrap;
237 justify-content: flex-start;
238 align-items: stretch;
239
240 margin: 0;
241 padding:0;
242 background: var(--wpbc_ui_listing__back_color);
243 border: 0;
244 }
245 /* R O W */
246 div .wpbc_listing_usual_row {
247 flex: 1 1 100%;
248
249 display: flex;
250 flex-flow:row nowrap;
251 justify-content: flex-start;
252 align-items: flex-start;
253 border-bottom: 1px solid var(--wpbc_ui_listing__row_border_color);
254 border-left: 4px solid transparent;
255 margin:0;
256 }
257 .wpbc_listing_usual_row:last-child {
258 border-bottom: 0;
259 }
260 /* C O L */
261 .wpbc_listing_col {
262 flex: 0 1 auto;
263 }
264 .wpbc_listing_col .booking_details_simple,
265 .wpbc_listing_col .booking_details_simple * {
266 font-size: var(--wpbc_ui__gen__font-size);
267 }
268 /* Booking Row */
269 .wpbc__list__table .wpbc_selectable_body > .wpbc_listing_usual_row {
270 padding: 4px 0 4px 4px;
271 line-height: 2.4;
272 flex-flow: row wrap;
273 }
274 .wpbc_row_wrap{
275 flex: 1 1 100%;
276 display: flex;
277 flex-flow:row nowrap;
278 justify-content: flex-start;
279 align-items: flex-start;
280 transition: all .25s ease-in-out;
281 }
282
283 /* ================================================================================================================== */
284 /* == Max Colapsed row height == */
285 /* ================================================================================================================== */
286 /* == Colpased == */
287 .wpbc_row_wrap.max_height_a {
288 max-height: var(--wpbc_ui_listing__colapsed_height);
289 height: var(--wpbc_ui_listing__colapsed_height);
290 overflow: hidden;
291 }
292 .wpbc_row_wrap.max_height_a:has(.wpbc_btn_expand_down_a:hover){
293 /*--wpbc_ui_listing__colapsed_height: 82px;*/
294 /*height: var(--wpbc_ui_listing__colapsed_height);*/
295 --wpbc_ui_listing__colapsed_height: auto;
296 min-height: 82px;
297 }
298 .wpbc_row_wrap .wpbc_btn_expand_down_a:hover i::before {
299 transform: rotateZ(45deg);
300 transition: all .4s ease-in-out;
301 }
302 .wpbc_row_wrap.max_height_a .wpbc_btn_expand_down_a:hover i::before {
303 transform: rotateZ(-45deg);
304 }
305 .wpbc_row_wrap.max_height_a .booking_details_full{
306 display: none;
307 }
308 /* == Expanded == */
309 .wpbc_row_wrap:not(.max_height_a){
310 --wpbc_ui_listing__colapsed_height: 82px;
311 min-height: var(--wpbc_ui_listing__colapsed_height);
312 }
313 .wpbc_row_wrap:not(.max_height_a) .booking_details_simple{
314 display: none;
315 }
316 .wpbc_row_wrap.max_height_a .booking_dates_expand_section {
317 /*max-height: 56px; 80px - 24px (wpbc_btn_expand_down height) - 4px (highlighting) */
318 max-height: calc(var(--wpbc_ui_listing__colapsed_height) - 1px);
319 overflow: hidden;
320 }
321 .wpbc_col_data .booking_details_simple__expand,
322 .wpbc_col_data a.booking_details_simple__expand:hover{
323 color: var(--wpbc_ui__gen__text-color);
324 text-decoration: none;
325 outline: none;
326 box-shadow: none;
327 }
328 .wpbc_col_data a.booking_details_simple__expand,
329 .wpbc_col_data a.booking_details_simple__expand:hover {
330 cursor: pointer;
331 }
332 /* ================================================================================================================== */
333 /* == S p e c i f ic . R o w s . C o l u m n s == */
334 /* ================================================================================================================== */
335 /* -- CHECKBOX -- */
336 .wpbc_a_col__check {
337 flex: 0 0 40px;
338 align-self: stretch;
339
340 display: flex;
341 flex-flow: column nowrap;
342 align-items: center;
343 justify-content: flex-start;
344 }
345 /* ------------------------------------------------------------------------------------------------------------------ */
346 /* -- DATES -- */
347 /* ------------------------------------------------------------------------------------------------------------------ */
348 .wpbc_a_col__dates{
349 flex: 0 0 170px;
350 align-self: stretch;
351
352 display: flex;
353 flex-flow: row nowrap;
354 align-items: flex-start;
355 justify-content: flex-start;
356 }
357 /* == Dates . Border Color == */
358 .wpbc_a_col__dates {
359 border-right: 4px solid var(--wpbc_ui_listing__pending_color);
360 }
361 .wpbc_listing_usual_row.wpbc_row_booking_approved .wpbc_a_col__dates {
362 border-right-color: var(--wpbc_ui_listing__approved_color);
363 }
364 .wpbc_listing_usual_row.wpbc_row_booking_trash .wpbc_a_col__dates {
365 border-right-color: var(--wpbc_ui_listing__trash_color);
366 }
367 /* -- Dates . Colapsed row -- Short Dates -- */
368 .wpbc_row_wrap.max_height_a .wpbc_a_col__dates .booking_dates_small{
369 display: flex;
370 }
371 .wpbc_row_wrap.max_height_a .wpbc_a_col__dates .booking_dates_full{
372 display: none;
373 }
374 /* -- Dates . Expanded row -- Full Dates -- */
375 .wpbc_row_wrap:not(.max_height_a) .wpbc_a_col__dates .booking_dates_full {
376 display: flex;
377 }
378 .wpbc_row_wrap:not(.max_height_a) .wpbc_a_col__dates .booking_dates_small {
379 display: none;
380 }
381 /* -- Dates . Expanded row -- show Dates in Row (not column) -- */
382 .wpbc_row_wrap:not(.max_height_a) .wpbc_a_col__dates .content_text{
383 flex-flow: row wrap;
384 justify-content: flex-start;
385 }
386 /* -- Dates . Show internal dates as column centered */
387 .wpbc_a_col__dates .content_text {
388 display: flex;
389 flex-flow: column;
390 justify-content: center;
391 align-items: center;
392 margin: auto;
393 }
394 /* Dates . Slash */
395 .wpbc_a_col__dates .date_tire {
396 line-height: 10px;
397 margin: 0 5px;
398 }
399 .booking_dates_expand_section {
400 flex: 1 1 auto;
401 display: flex;
402 flex-flow: column nowrap;
403 align-items: center;
404 justify-content: flex-start;
405 }
406 /* Dates - Expand Down Button */
407 .wpbc_btn_expand_down {
408 flex: 0 0 auto;
409 align-self: stretch;
410 width: 20px;
411 display: flex;
412 flex-flow: column;
413 justify-content: flex-start;
414 align-items: flex-start;
415 align-self: flex-start;
416 margin-bottom: 2px;
417 }
418 .wpbc_btn_expand_down a,
419 .wpbc_btn_expand_down a:hover{
420 line-height: 1;
421 text-align: center;
422 color: var(--wpbc_ui__gen__text-color);
423 flex: 0 1 auto;
424 margin: 2px 0 0 -3px;
425 }
426 .wpbc_btn_expand_down i::before {
427 font-size: 20px;
428 }
429
430 /* ------------------------------------------------------------------------------------------------------------------ */
431 /* -- D A T A -- */
432 /* ------------------------------------------------------------------------------------------------------------------ */
433 .wpbc_a_col__data{
434
435 }
436 .wpbc_a_col__details_lables {
437 flex: 1 1 auto;
438 padding-left: 15px;
439 margin-bottom:10px;
440 min-width: 1%;
441 }
442 .wpbc_a_col__cost{
443 flex: 0 0 110px;
444 align-self: stretch;
445 }
446 .wpbc_a_col__action{
447 flex: 0 0 50px;
448 align-self: stretch;
449 }
450 /* -- Notes -- */
451 .wpbc_a_row__notes .wpbc_col_note_readonly {
452 flex: 1 1 1px;
453 margin: 0 10px 10px 15px;
454 }
455 /* -- Sys Information -- */
456 .wpbc_a_row__system .wpbc_col_sys_info {
457 flex: 1 1 1px;
458 margin: 0 10px 5px 18px;
459 }
460 /* ------------------------------------------------------------------------------------------------------------------ */
461 /* -- M o b i l e _ V i e w -- */
462 /* ------------------------------------------------------------------------------------------------------------------ */
463 /* -- Responsive Sizes: < 600px (less top icons), < 782px (no wp left bar), < 960px (wp left bar colapse) ------- */
464 @media (max-width: 960px ) {
465 /* -- Rows Separation -- */
466 .wpbc__list__table{
467 box-shadow: none;
468 }
469 .wpbc__list__table .wpbc_selectable_body {
470 background: transparent;
471 }
472 .wpbc__list__table .wpbc__list__head,
473 .wpbc__list__table .wpbc__list__foot,
474 .wpbc__list__table .wpbc_selectable_body > .wpbc_listing_usual_row {
475 margin: 10px 0;
476 background: var(--wpbc_ui_listing__back_color);
477 border-radius: 6px;
478 padding: 6px 0 6px 4px;
479 box-shadow: 0 0 2px 0 #cbcbcb;
480 min-width: 180px;
481 }
482 .wpbc__list__table .wpbc__list__head,
483 .wpbc__list__table .wpbc__list__foot{
484 padding: 6px;
485 }
486 .wpbc_a_col__cost,
487 .wpbc_a_col__action {
488 align-self: flex-start;
489 }
490 .wpbc_a_col__action {
491 margin-top: 22px;
492 }
493 }
494 @media (max-width: 782px ) {
495 .wpbc_admin {
496 --wpbc_ui_listing__colapsed_height: auto;
497 }
498 /* -- Rows Separation -- */
499 .wpbc_a_col__cost,
500 .wpbc_a_col__action {
501 align-self: stretch;
502 margin:0;
503 }
504 /* -- Main Booking Row -- */
505 .wpbc_a_row__booking {
506 flex-flow: row wrap;
507 }
508 /* all other details. */
509 .wpbc_listing_col .booking_details_simple,
510 .wpbc_listing_col .booking_details_simple * {
511 font-size: 13px;
512 }
513 /* -- Dates -- */
514 .wpbc_a_col__dates {
515 flex: 1 1 170px;
516 }
517 .wpbc_a_col__dates .content_text {
518 flex-flow: row wrap;
519 justify-content: flex-start;
520 align-items: flex-start;
521 margin: 0 5px;
522 }
523 .booking_dates_expand_section {
524 align-items: flex-start;
525 }
526 .wpbc_a_col__dates .wpbc_label.wpbc_label_booking_dates {
527 font-size: 16px;
528 }
529 .wpbc_a_col__dates .wpbc_label.wpbc_label_booking_dates .field-booking-time{
530 font-size: 11px;
531 margin-left: 5px;
532 }
533 /* -- Data & Labels -- */
534 .wpbc_a_col__data {
535 flex: 1 1 100%;
536 }
537 .wpbc_a_col.wpbc_a_col__data.wpbc_a_overflow_hide > .wpbc_a_row.wpbc_a_row_nowrap {
538 flex-flow: row wrap;
539 padding-right: 5px;
540 box-sizing: border-box;
541 }
542 .wpbc_a_col__action{
543 margin-left:auto;
544 min-height:30px;
545 }
546 .wpbc_a_col__details_lables {
547 padding: 10px 0;
548 overflow: auto;
549 scrollbar-width: thin;
550 border-top: 1px dashed #ccc;
551 margin: 5px 0;
552 }
553 .wpbc_row_wrap.max_height_a .wpbc_a_col__details_lables .wpbc_col_booking_labels .content_text{
554 flex-flow: row nowrap;
555 }
556 .wpbc_row_wrap.max_height_a .wpbc_a_col__details_lables .wpbc_col_booking_labels .content_text * {
557 white-space: nowrap;
558 }
559 /* -- Cost -- */
560 .wpbc_a_col__cost .wpbc_listing_col.wpbc_col_cost,
561 .wpbc_a_col__cost .wpbc_listing_col.wpbc_col_cost a {
562 justify-content: flex-start;
563 margin: 0 3px;
564 }
565 .wpbc_listing_col.wpbc_col_action {
566 justify-content: flex-end;
567 }
568 /* -- Notes and Sys Information -- */
569 .wpbc_row_wrap.max_height_a .wpbc_a_row__appointment,
570 .wpbc_row_wrap.max_height_a .wpbc_a_row__notes,
571 .wpbc_row_wrap.max_height_a .wpbc_a_row__system {
572 display:none;
573 }
574 .wpbc_a_row__appointment .wpbc_col_appointment_details {
575 margin: 5px 10px;
576 }
577 .wpbc_a_row__system .wpbc_col_sys_info{
578 margin-left:10px;
579 }
580 .wpbc_a_row__notes {
581 order: 1;
582 }
583 .wpbc_a_row__notes .wpbc_col_note_readonly {
584 margin: 0 10px 5px 5px;
585 }
586 .wpbc_a_row__notes .ui_remark_section__note_readonly textarea {
587 height: 160px;
588 }
589 }
590 @media (max-width: 600px ) {
591
592 }
593 /* == Dates ========================================================================================================= */
594 /* Dates Labels */
595 .wpbc_label.wpbc_label_booking_dates {
596 background-color: transparent;
597 color: #41474e;
598 box-shadow: none;
599 border: 0;
600 font-size: 14px;
601 line-height: 1.7;
602 text-decoration: none;
603 padding: 0;
604 margin: 0 2px 2px;
605 }
606 /* -- Lables ------------------------------------------------------------------------------------------------ */
607 .wpbc__list__table .wpbc_selectable_body .wpbc_listing_col.wpbc_col_booking_labels .content_text {
608 display: flex;
609 flex-flow: row wrap;
610 justify-content: flex-start;
611 align-items: flex-start;
612 gap: 10px;
613 padding: 2px 0;
614 }
615 /* -- Data -------------------------------------------------------------------------------------------------- */
616 .wpbc_row_wrap.max_height_a .wpbc_col_data {
617 white-space: nowrap;
618 }
619 .fieldvalue {
620 margin: 0 1em 0 0;
621 padding: 1px 5px 3px;
622 vertical-align: baseline;
623 border-radius: 2px;
624 background: #fffcf5;
625 background: #f8f8fa;
626 background:transparent;
627 word-wrap: anywhere;
628 }
629 .fieldvalue.name.fieldsearchvalue {
630 font-weight: 600;
631 border-radius: 0;
632 padding: 1px 7px;
633
634 border-bottom: 2px solid #708700;
635 color: #6a8000;
636 background: #f3f6e7;
637
638 color: #904c03;
639 border-bottom: 2px solid #975500;
640 background: #fffaf3;
641 }
642 .wpbc_actions_sysinfo {
643 font-size: 0.7em;
644 }
645 /* -- Specific COL Width -------------------------------------------------------------------------------------------- */
646 .wpbc_col_all_data .wpbc_listing_usual_row{
647 border:0;
648 margin-bottom: 5px;
649 }
650 .wpbc_listing_col.wpbc_col_cost{
651 flex: 0 0 100px;
652 }
653 .wpbc_listing_col.wpbc_col_action{
654 flex: 0 0 70px;
655 }
656 /* -- Stripe - Row --------------------------------------------------------------------------------------------- */
657 .wpbc_ui_el__listing_row:nth-of-type(2n+1) {
658 /*background-color: var(--wpbc_ui_listing__back_alt_color);*/
659 /*border-left-color: var(--wpbc_ui_listing__back_alt_color);*/
660 }
661 .wpbc_ui_el__listing_row.wpbc_row.row_selected_color {
662 border-left-color: var(--wpbc_ui_listing__selected_row_color);
663 }
664
665 /* == Labels ======================================================================================================== */
666 .wpbc_label {
667 display: inline;
668 flex: 0 1 auto;
669
670 font-size: 0.95em;
671 font-weight: 600;
672 line-height: 2.7;
673 white-space: pre-wrap;
674 text-align: center;
675 vertical-align: baseline;
676
677 padding: 5px 10px;
678 margin: 5px 15px 5px 0;
679 margin: 5px;
680 /*background: rgb(from var(--wpbc_admin-theme-color, #6b96ce) r g b / 100);*/
681 background: var(--wpbc_admin-default_label-color, #6b96ce);
682 color: #fff;
683
684 border-radius: 4px;
685 border: 0;
686 box-shadow: none;
687 }
688 .wpbc_col_booking_labels .wpbc_label {
689 padding: 2px 10px;
690 line-height: 1.7;
691 }
692 .wpbc_label .menu_icon {
693 margin: 0 5px 0 0;
694 }
695 .wpbc_label .label_sup {
696 font-size: 10px;
697 padding: 0 5px 0 0;
698 line-height: 1em;
699 }
700 .wpbc_label_link {
701 display: flex;
702 flex-flow: column nowrap;
703 align-items: center;
704 justify-content: center;
705 cursor: pointer;
706 text-decoration: none;
707 }
708 /* -- Labels Colors ------------------------------------------------------------------------------------------------- */
709 .wpbc__wrap__booking_listing a.wpbc_is_new_button,
710 .wpbc__wrap__booking_listing a.wpbc_is_new_button:hover {
711 position: absolute;
712 margin: 0 0 0 -28px;
713 display:flex; /* It Fix rotating icon, on clicking */
714 opacity: 0.8; /* FixIn: 10.15.1.7. */
715 }
716 .wpbc_label.wpbc_label_booking_id {
717 box-shadow: none;
718 background-color: #fff;
719 border: 1px solid #0000001c;
720 color: #717171;
721 }
722 .wpbc_label.wpbc_label_resource {
723 background-color: #6b96ce;
724 background-color: rgb(from var(--wpbc_admin-theme-color, #6b96ce) r g b / var(--wpbc_admin-theme-opacity, 80%));
725 background-color: var(--wpbc_admin-resource-badge-color, #556e91); /* FixIn: 10.15.6.1. */
726 }
727 .wpbc_label.wpbc_label_deleted_resource {
728 background-color: #ee6f48;
729 }
730 .wpbc_label.wpbc_label_pending {
731 background-color: #ed9f0a;
732 color: #fff;
733 box-shadow: 0 0 1px #fde4c9;
734 }
735 .wpbc_label.wpbc_label_approved {
736 background-color: #64AA45;
737 color: #f7fff4;
738 box-shadow: 0 0 1px #b8c6b1;
739 }
740 /* General class for all payment statuses: .wpbc_label.wpbc_label_payment_status { ... } */
741 .wpbc_label.wpbc_label_payment_status_success {
742 background-color: #468847;
743 }
744 .wpbc_label.wpbc_label_payment_status_pending {
745 background-color: #992;
746 }
747 .wpbc_label.wpbc_label_payment_status_unknown {
748 background-color: #f2f2f3;
749 color: #717379;
750 border: 1px solid #e3e3e3;
751 }
752 .wpbc_label.wpbc_label_payment_status_error {
753 background-color: #FA773D;
754 }
755 .wpbc_label.wpbc_label_imported {
756 background-color: #517aba;
757 }
758 .wpbc_label.wpbc_label_trash {
759 background: #D94A48;
760 color: #fff;
761 text-shadow: 0 0 1px #E00;
762 }
763
764 /* == C O S T ======================================================================================================= */
765 .wpbc_listing_col.wpbc_col_cost a,
766 .wpbc_listing_col.wpbc_col_cost {
767 color: #41474e;
768 font-size: 16px;
769 line-height: 2.7;
770 display: flex;
771 flex-flow: row nowrap;
772 align-items: center;
773 justify-content: center;
774 flex: 0 0 110px;
775 align-self: center;
776 font-weight: 600;
777 cursor: pointer;
778 text-decoration: none;
779 }
780
781 /* == A C T I O N S _ B U T T O N =================================================================================== */
782 .wpbc_listing_col.wpbc_col_action {
783 color: #41474e;
784 font-size: 14px;
785 line-height: 1.7;
786 display: flex;
787 flex-flow: row nowrap;
788 align-items: center;
789 justify-content: center;
790 flex: 0 0 50px;
791 align-self: stretch;
792 }
793 .wpbc_listing_col.wpbc_col_action a.ul_dropdown_menu_toggle,
794 .wpbc_listing_col.wpbc_col_action a.ul_dropdown_menu_toggle:hover,
795 .wpbc_listing_col.wpbc_col_action a.ul_dropdown_menu_toggle:focus{
796 background: rgba(0, 0, 0, 0.03);
797 border-radius: 50%;
798 width: 33px;
799 flex-flow: column;
800 align-items: center;
801 justify-content: center;
802 aspect-ratio: 1/1;
803 color: #555;
804 display: flex;
805 }
806 /* Options for actions in Dropdown Actions Menu*/
807 .wpbc__wrap__booking_listing .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action,
808 .wpbc_col_action .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action {
809 display: flex;
810 flex-flow: row nowrap;
811 justify-content: flex-start;
812 align-items: center;
813 }
814 .wpbc_col_action .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action > *:last-child {
815 margin-left: auto;
816 padding-left: 1em;
817 }
818 /* if icon spinning then no padding */
819 .wpbc_col_action .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action > *:last-child.wpbc_spin {
820 padding-left:0;
821 }
822 /* Approved - left border line */
823 .ul_dropdown_menu_li_action_set_booking_approved {
824 border-left: 2px solid var(--wpbc_ui_listing__approved_color);
825 }
826 /* Pending - left border line */
827 .ul_dropdown_menu_li_action_set_booking_pending {
828 border-left: 2px solid var(--wpbc_ui_listing__pending_color);
829 }
830 /* Trash - left border line */
831 .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action_move_booking_to_trash.hide_button_if_no_selection:not(:hover, :focus),
832 .ul_dropdown_menu_li_action_move_booking_to_trash.hide_button_if_no_selection,
833 .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action_move_booking_to_trash:not(:hover,:focus){
834 /*border-left: 2px solid var(--wpbc_ui_listing__trash_color);*/
835 /*color: var(--wpbc_ui_dropdown__a-color);*/
836 color: #d79249;
837 }
838 .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_trash_color:not(:hover,:focus),
839 .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action_delete_booking_completely:not(:hover,:focus) {
840 color:var(--wpbc_ui_listing__trash_color);
841 }
842 .wpbc_ui_el__dropdown .ul_dropdown_menu > li > a.ul_dropdown_menu_li_action_restore_booking_from_trash:not(:hover,:focus) {
843 color:var(--wpbc_ui_listing__restore_color);
844 }
845 .ul_dropdown_menu_li_action .hint_value_instead_icon {
846 font-size: 0.85em;
847 font-weight: 600;
848 align-self: center;
849 line-height: 1;
850 }
851
852 /* ================================================================================================================== */
853 /* -- M O D A L _ A C T I O N S ----------------------------------------------------------------------------------- */
854 /* ================================================================================================================== */
855 /* Modal SIZE */
856 @media (min-width: 768px) {
857 #wpbc_modal__set_booking_note__section .modal-dialog {
858 width: 80%;
859 margin: 5px auto;
860 }
861 }
862 /* -- Input Fields -------------------------------------------------------------------------------------------------- */
863 .wpbc_page .wpbc_modal_in_listing input[type=text],
864 .wpbc_page .wpbc_modal_in_listing select,
865 .wpbc_page .wpbc_modal_in_listing textarea{
866 width: 100%;
867 max-width: 100%;
868 font-size: 15px;
869 line-height: 2.4;
870 }
871 .wpdevelop .modal-footer .button {
872 margin: 0 5px;
873 }
874 /* -- Modal Payment Request ----------------------------------------------------------------------------------------- */
875 #wpbc_modal__send_payment_request__section p.help-block {
876 /*font-size: 13px;*/
877 /*line-height: 2;*/
878 /*margin: 15px 0 0;*/
879 }
880 #wpbc_modal__send_payment_request__section label.help-block {
881 /*font-size: 0.9em;*/
882 }
883 #wpbc_modal__send_payment_request__section #wpbc_modal__send_payment_request__url{
884 font-size: 13px;
885 }
886 #wpbc_modal__send_payment_request__section #wpbc_modal__send_payment_request__value {
887 margin-top: 15px;
888 line-height: 2;
889 height: 70px;
890 font-size: 14px;
891 }
892 .wpbc_modal__2_fields {
893 display: flex;
894 flex-flow: row nowrap;
895 justify-content: flex-start;
896 align-items: center;
897 }
898 .wpbc_modal__2_fields .wpbc_modal__2_fields_button {
899 flex: 0 1 1%;
900 align-self: stretch;
901 min-height: 35px;
902 margin-left: 10px;
903 display: flex;
904 align-items: center;
905 align-self: center;
906 font-weight: 600;
907 }
908 #wpbc_modal__send_payment_request__section .wpbc_modal__send_payment_request__cost {
909 font-size: 16px;
910 font-weight: 600;
911 padding: 0 10px;
912 }
913 /* -- Notes --------------------------------------------------------------------------------------------------------- */
914 .ui_remark_section__note_readonly {
915 width:99%;
916 margin: 0;
917 }
918 .ui_remark_section__note_readonly label{
919 font-size: 0.9em;
920 font-weight: 600;
921 }
922 .ui_remark_section__note_readonly a {
923 font-size: 0.9em;
924 line-height: 2;
925 margin: 7px 3px 0;
926 float: right;
927 padding: 0;
928 text-decoration: none;
929 font-weight: 600;
930 }
931 .ui_remark_section__note_readonly a i::before{
932 font-size:11px;
933 }
934 .ui_remark_section__note_readonly textarea {
935 font-size: 12px;
936 width: 100%;
937 scrollbar-width: thin;
938 height: 70px;
939 line-height: 1.75;
940 color: #777;
941 box-shadow: none;
942 border: 1px solid #d5d5d5;
943 background: #fefefe;
944 }
945 /* -- Modal Notes --------------------------------------------------------------------------------------------------- */
946 #wpbc_modal__set_booking_note__section textarea {
947 margin-top: 5px;
948 line-height: 1.8;
949 height: 120px;
950 font-size: 13px;
951 }
952 .modal-header .wpbc_modal__booking_id__in_title {
953 font-size: 0.6em;
954 font-weight: 600;
955 margin-left: 5px;
956 top: -0.75em;
957 }
958 .modal-header .wpbc_modal__title__reason__booking_id {
959 font-size: 0.7em;
960 font-weight: 400;
961 margin-left: 5px;
962 top: -0.1em;
963 word-break: break-all;
964 }
965 /**********************************************************************************************************************/
966 /** Hidden Templates **/
967 /**********************************************************************************************************************/
968 .wpbc_hidden_templates {
969 display: none;
970 }
971 /* ================================================================================================================== */
972 /* == F I L T E R E L E M E N T S == */
973 /* ================================================================================================================== */
974 /* -- Dropdown Menu, where we show selected value in main toggle, sucn as in - SORT BY -- */
975 .wpbc_ui_el__dropdown .ul_dropdown_menu_toggle .selected_value {
976 margin: 0 0.2em;
977 }
978 .wpbc_ui_el__dropdown .ul_dropdown_menu_toggle .selected_value .menu_icon{
979 margin: 0 0 0 2px;
980 }
981 .wpbc_ui_el__dropdown .ul_dropdown_menu_toggle .selected_value [class*=" wpbc-bi-"]::before {
982 font-size: 1.08em;
983 /*font-weight: 600 !important;*/
984 vertical-align: -.18em;
985 }
986 /* ================================================================================================================== */
987 /* == T O O L B A R i n Booking Listing == */
988 /* ================================================================================================================== */
989 .wpbc_ui_toolbar.wpbc_ui_toolbar__bo_listing {
990 margin: var(--wpbc_ui_horis_top_nav__margin);
991 }
992
993 /* Appointment snapshot details shown only for rows with Appointment data. */
994 .wpbc_appointment_booking_details {
995 border: 1px dashed #777;
996 border-radius: 4px;
997 display: flex;
998 flex-flow: row wrap;
999 gap: 4px 18px;
1000 line-height: 1.6;
1001 padding: 8px 10px;
1002 margin: 0 20px 0 15px;
1003 }
1004 .wpbc_appointment_booking_details > strong {
1005 flex: 1 1 100%;
1006 }
1007 .wpbc_appointment_booking_details > span {
1008 overflow-wrap: anywhere;
1009 }
1010
1011
1012 /* Multi-Resource allocation summary and expanded date-to-Resource map. */
1013 .wpbc_a_col__dates .booking_dates_resource_allocation_summary .content_text {
1014 flex-flow: column nowrap;
1015 gap: 2px;
1016 padding: 4px 2px;
1017 text-align: center;
1018 }
1019 .booking_dates_resource_allocation_summary .wpbc_label_booking_dates {
1020 line-height: 1.45;
1021 margin: 2px;
1022 white-space: normal;
1023 }
1024 .wpbc_booking_resource_count {
1025 color: #646970;
1026 font-size: 11px;
1027 font-weight: 500;
1028 line-height: 1.35;
1029 }
1030 .wpbc_row_wrap.max_height_a .wpbc_a_row__resource_allocation {
1031 display: none;
1032 }
1033 .wpbc_a_row__resource_allocation {
1034 box-sizing: border-box;
1035 padding: 0 10px 10px 15px;
1036 }
1037 .wpbc_col_resource_allocation {
1038 flex: 1 1 100%;
1039 min-width: 0;
1040 }
1041 .wpbc_resource_allocation {
1042 background: #fff;
1043 border: 1px solid #dcdcde;
1044 border-radius: 3px;
1045 overflow: hidden;
1046 width: 100%;
1047 }
1048 .wpbc_resource_allocation__header {
1049 align-items: center;
1050 border-bottom: 1px solid #dcdcde;
1051 display: flex;
1052 gap: 10px;
1053 justify-content: space-between;
1054 min-height: 30px;
1055 padding: 3px 10px;
1056 }
1057 .wpbc_resource_allocation__header strong {
1058 font-size: 13px;
1059 }
1060 .wpbc_resource_allocation__count {
1061 background: #f0f0f1;
1062 border-radius: 3px;
1063 color: #50575e;
1064 font-size: 11px;
1065 line-height: 1.5;
1066 padding: 2px 8px;
1067 white-space: nowrap;
1068 }
1069 .wpbc_resource_allocation__segments {
1070 display: flex;
1071 flex-flow: column nowrap;
1072 }
1073 .wpbc_resource_allocation__segment {
1074 align-items: center;
1075 border-bottom: 1px solid #f0f0f1;
1076 display: flex;
1077 flex-flow: row nowrap;
1078 gap: 8px;
1079 min-height: 36px;
1080 padding: 4px 10px;
1081 }
1082 .wpbc_resource_allocation__segment:last-child {
1083 border-bottom: 0;
1084 }
1085 .wpbc_resource_allocation__period {
1086 flex: 0 1 280px;
1087 font-weight: 600;
1088 min-width: 175px;
1089 overflow-wrap: anywhere;
1090 }
1091 .wpbc_resource_allocation__arrow {
1092 color: #8c8f94;
1093 flex: 0 0 20px;
1094 text-align: center;
1095 }
1096 .rtl .wpbc_resource_allocation__arrow {
1097 transform: scaleX(-1);
1098 }
1099 .wpbc_resource_allocation__resources {
1100 align-items: center;
1101 display: flex;
1102 flex: 1 1 0;
1103 flex-wrap: wrap;
1104 gap: 5px 8px;
1105 min-width: 0;
1106 }
1107 .wpbc_resource_allocation__resources .wpbc_label {
1108 margin: 0;
1109 max-width: 100%;
1110 overflow-wrap: anywhere;
1111 white-space: normal;
1112 line-height: 1.5;
1113 }
1114
1115 @media (max-width: 782px) {
1116 .wpbc_a_row__resource_allocation {
1117 padding: 0 5px 10px;
1118 }
1119 .wpbc_resource_allocation__header {
1120 align-items: flex-start;
1121 flex-wrap: wrap;
1122 }
1123 .wpbc_resource_allocation__segment {
1124 align-items: flex-start;
1125 flex-flow: column nowrap;
1126 gap: 4px;
1127 padding: 8px 10px;
1128 }
1129 .wpbc_resource_allocation__period {
1130 flex-basis: auto;
1131 min-width: 0;
1132 }
1133 .wpbc_resource_allocation__arrow {
1134 display: none;
1135 }
1136 }
1137