PluginProbe
Booking Calendar / 11.7
Booking Calendar v11.7
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 10.11.2 10.11.3 10.11.4 All 201 releases
booking / includes / page-setup / _src / setup_page.css

setup_page.css in Booking Calendar 11.7, at includes/page-setup/_src/setup_page.css

543 lines 17.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* ------------------------------------------------------------------------------------------------------------------ */
2 /* Hide Top Menu bar for Submenu items, if we do not use the left navigation menu */
3 .wpbc_top_tabs_sub_menu {
4 display: none;
5 }
6 /* Hide Top Right Banner for purchase with discount in Setup page */
7 .wpbc_header_news {
8 display: none !important;
9 }
10 /* Loader Spinner and Text for Main Container (including calendar) */
11 .wpbc_calendar_loading {
12 width:95%;
13 text-align: center;
14 margin:2em 0;
15 font-size: 1.2em;
16 font-weight: 600;
17 }
18 .wpbc_calendar_loading .wpbc_icn_autorenew::before{
19 font-size: 1.2em;
20 }
21 /* ------------------------------------------------------------------------------------------------------------------ */
22 /* == Page Sections Structure == */
23 /* ------------------------------------------------------------------------------------------------------------------ */
24 .wpbc_ajx_page__container {
25 display: flex;
26 flex-flow: row wrap;
27 justify-content: flex-start;
28 align-items: flex-start;
29 margin: 5px 0 0;
30 }
31 .wpbc_ajx_page__container .wpbc_ajx_page__section_left {
32 flex: 0 1 200px;
33 display: flex;
34 flex-flow: row wrap;
35 justify-content: flex-start;
36 align-items: flex-start;
37 margin: 0 30px 10px 0;
38 }
39 .wpbc_ajx_page__container .wpbc_ajx_page__section_main {
40 flex: 1 1 50%;
41 display: flex;
42 flex-flow: row wrap;
43 justify-content: flex-start;
44 align-items: flex-start;
45 margin: 0 0 10px;
46 }
47 .wpbc_ajx_page__container .wpbc_ajx_page__section_right {
48 flex: 0 0 280px;
49 display: flex;
50 flex-flow: column wrap;
51 justify-content: flex-start;
52 align-items: flex-end;
53 margin: 0 0 10px 30px;
54 }
55 .wpbc_ajx_page__container .wpbc_ajx_page__section_footer{
56 flex: 1 1 100%;
57 display: flex;
58 flex-flow: row wrap;
59 justify-content: flex-start;
60 align-items: flex-start;
61 margin: 10px 0;
62 }
63 /* ------------------------------------------------------------------------------------------------------------------ */
64 /* == Ordering and Size on Mobile == */
65 /* ------------------------------------------------------------------------------------------------------------------ */
66 @media screen and (max-width: 960px) {
67 .wpbc_ajx_page__container .wpbc_setup_wizard_page__section_left {
68 flex: 1 1 100%;
69 margin: 20px 0;
70 order: 3
71 }
72 }
73 @media (max-width: 782px) {
74 .wpbc_ajx_page__container .wpbc_ajx_page__section {
75 flex: 1 1 100%;
76 margin: 0 0 20px 0;
77 }
78 .wpbc_ajx_page__container .wpbc_setup_wizard_page__section_right {
79 order: 1
80 }
81 .wpbc_ajx_page__container .wpbc_setup_wizard_page__section_main {
82 order: 2
83 }
84 .wpbc_ajx_page__container .wpbc_setup_wizard_page__section_left {
85 order: 3
86 }
87 .wpbc_ajx_page__container .wpbc_setup_wizard_page__section_footer{
88 order: 99;
89 }
90 }
91 /* ------------------------------------------------------------------------------------------------------------------ */
92 /* == Main Section Div == */
93 /* ------------------------------------------------------------------------------------------------------------------ */
94 .wpbc__container_place__footer_buttons,
95 .wpbc_page_main_section.wpbc_container_booking_form {
96 display: flex;
97 flex-flow: row wrap;
98 justify-content: center;
99 align-items: flex-start;
100 flex: 0 1 85%;
101
102 margin: 0 auto;
103 margin-top:-15px;
104
105 font-size: 15px;
106 line-height: 175%;
107 }
108
109 /* ------------------------------------------------------------------------------------------------------------------ */
110 /* == Footer Section Div == */
111 /* ------------------------------------------------------------------------------------------------------------------ */
112 .wpbc__container_place__footer_buttons{
113 margin-top:10px;
114 }
115 .wpbc__container_place__footer_buttons .wpbc__form__div {
116 width:100%;
117 }
118 /* Keep native WordPress buttons aligned without replacing the active admin color scheme. */
119 .wpbc_setup_wizard_page__section_footer .wpbc_container .button{
120 display: inline-flex;
121 align-items: center;
122 justify-content: center;
123 }
124 /* required for rotating around center dot */
125 .wpbc_setup_wizard_page__section_footer .wpbc_container .button .wpbc_spin{
126 line-height: 50%;
127 align-self: center;
128 }
129
130 /* Keep full-screen wizard navigation visible while the current step scrolls. */
131 body.wpbc_admin_full_screen .wpbc_ajx_page__container {
132 padding-bottom: 50px;
133 }
134 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer {
135 position: fixed;
136 z-index: 100001;
137 right: 0;
138 bottom: 0;
139 left: 0;
140 box-sizing: border-box;
141 width: auto;
142 margin: 0;
143 padding: 12px 7.5vw;
144 background: #fff;
145 border-top: 1px solid #dcdcde;
146 box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08);
147 }
148 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .wpbc__container_place__footer_buttons {
149 margin-top: 0;
150 }
151 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .wpbc__form__div > hr {
152 display: none;
153 }
154 .wpbc__row.wpbc_setup_wizard_page__section_footer .wpbc_container {
155 justify-content: flex-end;
156 align-self: center;
157 }
158 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer div.wpbc__field {
159 margin: 0;
160 }
161 /* Keep wizard-level actions on the left and step navigation on the right in every full-screen step. */
162 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_row {
163 width: 100%;
164 align-items: center;
165 gap: 16px;
166 }
167 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links {
168 flex: 1 1 280px;
169 display: flex;
170 align-items: center;
171 }
172 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_actions {
173 flex: 0 0 auto;
174 display: flex;
175 align-items: center;
176 justify-content: flex-end;
177 margin-left: auto;
178 }
179 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links .wpbc_exit_link_small {
180 margin: 0;
181 flex-flow: row wrap;
182 justify-content: flex-start;
183 align-items: center;
184 gap: 6px 18px;
185 }
186 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links .wpbc_exit_link_small a {
187 margin: 0;
188 font-size: 12px;
189 }
190 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .button {
191 display: inline-flex;
192 align-items: center;
193 justify-content: center;
194 min-height: 40px;
195 padding: 0 16px;
196 font-size: 14px;
197 font-weight: 400;
198 line-height: 2.71428571;
199 }
200 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer #btn__toolbar__buttons_prior {
201 margin-left: auto !important;
202 margin-right: 10px !important;
203 }
204 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer #btn__toolbar__buttons_next {
205 margin: 0 !important;
206 }
207 @media screen and (max-width: 782px) {
208 .wpbc__container_place__footer_buttons.wpbc_container.wpbc_container_booking_form {
209 flex: 1 1 100%;
210 }
211 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer {
212 max-height: 45vh;
213 overflow-y: auto;
214 padding: 10px 12px max(10px, env(safe-area-inset-bottom));
215 }
216 body.wpbc_admin_full_screen .wpbc_setup_wizard_page__section_footer .button {
217 min-height: 40px;
218 padding: 0 12px;
219 font-size: 13px;
220 }
221 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_row {
222 gap: 8px;
223 }
224 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_links,
225 body.wpbc_admin_full_screen .wpbc_setup_wizard_navigation_actions {
226 flex: 1 1 100%;
227 }
228 }
229
230 .wpbc_setup_wizard_page_note {
231 font-size: 11px;
232 line-height: 2;
233 }
234 .wpbc__row.wpbc_setup_wizard_accept_send_row {
235 max-width: 100%;
236 align-items: flex-start;
237 }
238 .wpbc__row.wpbc_setup_wizard_accept_send_row .wpbc__field.wpbc_setup_wizard_accept_send_actions .wpbc_exit_link_small a{
239 font-size: 11px;
240 }
241 .wpbc_setup_wizard_accept_send_row > .wpbc__field:first-child {
242 flex: 1 1 440px;
243 }
244 .wpbc_setup_wizard_accept_send_row .wpbc_setup_wizard_accept_send_actions {
245 flex: 1 1 50% !important;
246 margin: 0;
247 }
248 .wpbc_setup_wizard_accept_send_row .wpbc_setup_wizard_accept_send_actions .wpbc_exit_link_small {
249 margin: 0;
250 padding: 0;
251 flex-flow: row wrap;
252 gap: 10px;
253 justify-content: flex-end;
254 align-items: flex-start;
255 }
256 .wpbc_setup_wizard_page_container .wpbc_container_booking_form .wpbc__field .wpbc_ui_radio_choice label:not(.wpbc_static_text):hover {
257 display: inline;
258
259 }
260
261 .wpbc_setup_wizard_accept_send_row .wpdev-list-item {
262 display: flex;
263 align-items: flex-start;
264 }
265 .wpbc_setup_wizard_accept_send_row .wpdev-checkbox {
266 margin-top: 3px !important;
267 }
268 div.wpbc_container.wpbc_form .wpbc_setup_wizard_accept_send_row .wpdev-list-item {
269 display:flex;
270 flex-flow: row nowrap;
271 align-items: flex-start;
272 justify-content: flex-start
273 }
274 div.wpbc_container.wpbc_form .wpbc_setup_wizard_accept_send_row .wpdev-list-item > input[type="checkbox"] + .wpdev-list-item-label,
275 div.wpbc_container.wpbc_form .wpbc_setup_wizard_accept_send_row label.wpdev-list-item-label {
276 margin: 0;
277 font-size: 11px;
278 font-weight: 400;
279 line-height: 2;
280 }
281
282 /* Small links at the bottom of the wizard */
283 .wpbc_exit_link_small {
284 width:100%;
285 display: flex;
286 flex-flow: column wrap;
287 justify-content: center;
288 align-items: flex-start;
289 }
290 .wpbc_exit_link_small a {
291 font-size:14px;
292 color:#888;
293 text-decoration:underline;
294 }
295 .wpbc_exit_link_small a:active,
296 .wpbc_exit_link_small a:hover {
297 color:#555;
298 text-decoration:underline;
299 }
300 .wpbc_exit_link_small a.wpbc_button_danger {
301 color: #c18e8e;
302 }
303 .wpbc_exit_link_small a.wpbc_button_danger:active,
304 .wpbc_exit_link_small a.wpbc_button_danger:hover {
305 color:#e65d59;
306 }
307
308 /* ------------------------------------------------------------------------------------------------------------------ */
309 /* Timeline Steps: moved -> ../includes/__css/client/form__steps_timeline.css */
310 /* ------------------------------------------------------------------------------------------------------------------ */
311
312 /* ------------------------------------------------------------------------------------------------------------------ */
313 /* Sections Content: */
314 /* ------------------------------------------------------------------------------------------------------------------ */
315
316 .wpbc_swp_section h1.wpbc_swp_section_header {
317 font-weight: 600;
318 font-size: 26px;
319 margin-bottom: 0px;
320 width: 100%;
321 }
322
323 .wpbc_swp_section p.wpbc_swp_section_header_description {
324 font-size: 12px;
325 margin-top: 0;
326 }
327
328 .wpbc_swp_section__welcome h1.wpbc_swp_section_header {
329 text-align: center;
330 margin: 0 auto 10px;
331 }
332 div.wpbc_container.wpbc_form .wpbc_swp_section label {
333 margin: 15px 0 8px;
334 }
335 .wpbc_swp_section__welcome .wpbc_container_booking_form .wpbc__field label:not(.wpbc_static_text),
336 .wpbc_swp_section__welcome .wpbc_container_booking_form .wpbc__field label:not(.wpbc_static_text):hover {
337 display: inline-flex;
338 }
339 /* ------------------------------------------------------------------------------------------------------------------ */
340 /* TODO: delete this */
341
342 /* ------------------------------------------------------------------------------------------------------------------ */
343 /* == Section Windows == */
344 /* ------------------------------------------------------------------------------------------------------------------ */
345
346 .wpbc_widgets {
347 width: 100%;
348 display: flex;
349 flex-flow: column wrap;
350 justify-content: flex-start;
351 align-items: flex-start;
352 }
353
354 .wpbc_widgets .wpbc_widget {
355 margin: 0 0 20px;
356 width: 100%;
357 flex: 1 1 100%;
358 border: 1px solid #ccc;
359 border-radius: 0 0 2px 2px;
360 }
361 .wpbc_widget .wpbc_widget_header {
362 width: 100%;
363 height: 44px;
364 border-bottom: 1px solid #ccc;
365 background: #fff;
366 font-weight: 600;
367 text-shadow: none;
368 display: flex;
369 flex-flow: row nowrap;
370 justify-content: flex-start;
371 align-items: center;
372 }
373 .wpbc_widget .wpbc_widget_header .wpbc_widget_header_text {
374 flex: 1 1 auto;
375 padding: 0 15px;
376 }
377 .wpbc_widget .wpbc_widget_header .wpbc_widget_header_settings_link {
378 flex: 0 0 auto;
379 margin-left: auto;
380 border-left: 1px solid #ccc;
381 padding: 5px 10px;
382 color: #0e70b7;
383 }
384 .wpbc_widget .wpbc_widget_content {
385 padding: 10px 15px;
386 }
387 .wpbc_widget_preview_booking_form.wpbc_widget .wpbc_widget_content {
388 padding-bottom: 70px;
389 }
390 /* ------------------------------------------------------------------------------------------------------------------ */
391 /* == Container for shortcodes == e.g.: [booking resource_id=1] */
392 /* ------------------------------------------------------------------------------------------------------------------ */
393 .wpbc_shortcode_container {
394 width: 100%;
395 max-width: 880px;
396 min-width: 341px;
397 margin: auto;
398 /*margin-top: calc(-1.7em - calc(0.25em + 8px));*/
399 }
400 /* Stripes Background */
401 .wpbc_widget_preview_booking_form .wpbc_widget_content {
402 /*background: repeating-linear-gradient(135deg, #fff, #fff 4px, #eaeaeb 4px, #eaeaeb 8px);*/
403 /*background: repeating-linear-gradient(135deg, #fff, #fff 4px, #f5f5ef 4px, #f5f5cf 8px);*/
404 /*background: repeating-linear-gradient(-45deg, #eee 0 3px, var(--wpbc_cal-main-background-color,#fff) 3px 8px);*/
405 /*background: repeating-linear-gradient(-45deg, #f9f8f7 0 7px, var(--wpbc_cal-main-background-color,#fff) 7px 12px);*/
406 /*background: repeating-linear-gradient(-45deg, #f9f9f8 0 3px, var(--wpbc_cal-main-background-color,#fff) 3px 5px);*/
407 background: repeating-linear-gradient(-45deg,#f9f9f8 0 3px, #fff 3px 5px);
408 }
409 /* Mobile Buttons */
410 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_a{
411 text-decoration: none;
412 outline: none;
413 box-shadow: none;
414 margin: 0 5px;
415 color: #6b96ce;
416 }
417 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_a.active,
418 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_a.active:focus{
419 color: #52595f;
420 }
421 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_a:hover,
422 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_a:focus {
423 color: #2f76d3;
424 text-decoration: none;
425 outline: none;
426 box-shadow: none;
427 }
428 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_icon::before{
429 font-size: 20px;
430 }
431 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_icon.wpbc-bi-display::before,
432 .wpbc_section_preview_mobile_btn_bar .wpbc_preview_icon.wpbc_icn_computer::before{
433 font-size: 21px;
434 }
435 .wpbc_message_wrapper.wpbc__version__free {
436 /*display: none;*/
437 }
438 /* Dark theme */
439 .wpbc_center_preview.wpbc_theme_dark_1,
440 .wpbc_widget_preview_booking_form .wpbc_widget_content.wpbc_theme_dark_1 {
441 /*Black Color*/
442 background: #272727;
443 background: repeating-linear-gradient(-45deg, #383838 0 3px,#2f2f2f 3px 5px);
444 color:#fff;
445 }
446
447 .wpbc_widget_preview_booking_form .wpbc_widget_content.wpbc_theme_dark_1 .wpbc-settings-notice {
448 color: #d7d7ca;
449 background: #595959;
450 box-shadow: 0 1px 3px #313131;
451 border: 0;
452 border-left: 4px solid #9580aa;
453 }
454
455 /* ------------------------------------------------------------------------------------------------------------------ */
456 /* == Section for Appointment type selection at Step #4 == */
457 /* ------------------------------------------------------------------------------------------------------------------ */
458 .wpbc_swp_section__bookings_types {
459 width: 100%;
460 }
461 .wpbc_setup_wizard_page_container .wpbc_swp_section__bookings_types {
462 max-width: 960px;
463 }
464 .wpbc_setup_mode_choices {
465 gap: 16px;
466 }
467 .wpbc_setup_mode_choice {
468 display: flex;
469 flex: 1 1 260px;
470 max-width: 300px;
471 }
472 .wpbc_setup_mode_choice > .wpbc_ui_radio_container {
473 width: 100%;
474 max-width: none;
475 margin: 10px 0;
476 }
477 .wpbc_setup_preferences_heading_row {
478 margin-top: 28px;
479 }
480 .wpbc_swp_section h2.wpbc_setup_preferences_heading {
481 width: 100%;
482 margin-bottom: 0;
483 font-size: 24px;
484 font-weight: 600;
485 }
486 .wpbc_setup_booking_type_choices {
487 gap: 16px;
488 }
489 .wpbc_setup_booking_type_choice {
490 display: flex;
491 flex: 1 1 420px;
492 max-width: 440px;
493 }
494 .wpbc_setup_booking_type_choice > .wpbc_ui_radio_container {
495 width: 100%;
496 max-width: none;
497 margin: 10px 0;
498 }
499 .wpbc_setup_appointment_mode_configuration {
500 display: flex;
501 justify-content: center;
502 width: 100%;
503 }
504 .wpbc_setup_appointment_summary_plate {
505 width: 100%;
506 max-width: 440px;
507 margin: 10px 0;
508 background: #fff;
509 border-radius: 4px;
510 box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #007cba);
511 }
512 .wpbc_setup_appointment_summary_copy {
513 padding: 16px;
514 }
515 .wpbc_setup_appointment_summary_copy strong {
516 font-size: 15px;
517 }
518 .wpbc_setup_appointment_summary_copy p {
519 margin: 8px 0 0;
520 }
521 .wpbc_setup_appointment_summary_plate .booking_timeslot_picker__get_on_off {
522 padding-top: 16px;
523 border-top: 1px solid #e8e8e8;
524 }
525 .wpbc_setup_appointment_summary_plate .booking_timeslot_picker__get_on_off select {
526 width: 100%;
527 }
528 .wpbc_container_booking_form .wpbc__field .wpbc_ui_booking_timeslot_picker__get_on_off__div {
529 padding-left: 15px;
530 }
531
532 .wpbc_container_booking_form .wpbc__field .booking_appointments_type__get_on_off label.wpbc-form-radio,
533 .wpbc_container_booking_form .wpbc__field .booking_appointments_type__get_on_off label.wpbc-form-radio:hover{
534 flex-flow: row nowrap;
535 justify-content: flex-start;
536 align-items: center;
537 margin: 10px 0;
538 font-weight: 400;
539 }
540 .wpbc_container_booking_form .wpbc__field .booking_appointments_type__get_on_off .wpbc-form-radio input {
541 margin: 0 10px 0 5px;
542 }
543