PluginProbe
Booking Calendar / 11.4.2
Booking Calendar v11.4.2
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-settings-themes / _out / settings_themes_page.css

settings_themes_page.css in Booking Calendar 11.4.2, at includes/page-settings-themes/_out/settings_themes_page.css

494 lines 12.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .wpbc_admin_page__tab__themes .wpbc_settings_page_content {
2 min-width: 0
3 }
4 .wpbc_admin_page__tab__themes,
5 .wpbc_theme_page {
6 --wpbc-theme-accent: #2271b1;
7 --wpbc-theme-border: #dfe4ea;
8 --wpbc-theme-text: #1d2327;
9 --wpbc-theme-muted: #646970;
10 --wpbc-theme-bg: #fff;
11 --wpbc-theme-bg-soft: #f6f7f7;
12 --wpbc-theme-success: #008a20;
13 --wpbc-theme-warning: #b26200;
14 --wpbc-theme-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
15 --wpbc-theme-radius: 6px
16 }
17 .wpbc_theme_page {
18 box-sizing: border-box;
19 color: var(--wpbc-theme-text);
20 max-width: 1220px
21 }
22 .wpbc_theme_toolbar.wpbc_ts_toolbar {
23 -ms-flex-align: start;
24 align-items: flex-start;
25 background: var(--wpbc-theme-bg);
26 border: 1px solid var(--wpbc-theme-border);
27 border-radius: var(--wpbc-theme-radius);
28 box-shadow: var(--wpbc-theme-shadow);
29 box-sizing: border-box;
30 display: -ms-flexbox;
31 display: flex;
32 -ms-flex-flow: row wrap;
33 flex-flow: row wrap;
34 gap: 14px;
35 -ms-flex-pack: start;
36 justify-content: flex-start;
37 margin-bottom: 12px;
38 max-width: 100%;
39 padding: 14px
40 }
41 .wpbc_theme_toolbar .wpbc_ts_control {
42 display: -ms-flexbox;
43 display: flex;
44 -ms-flex-direction: column;
45 flex-direction: column;
46 gap: 6px;
47 min-width: 150px
48 }
49 .wpbc_theme_toolbar .wpbc_ts_control label {
50 color: var(--wpbc-theme-text);
51 font-size: 13px;
52 font-weight: 600
53 }
54 .wpbc_theme_toolbar .wpbc_ts_control select {
55 min-height: 32px;
56 min-width: 130px
57 }
58 .wpbc_theme_attention_pulse {
59 animation: .62s ease-in-out 3 wpbc_theme_attention_pulse
60 }
61 @keyframes wpbc_theme_attention_pulse {
62 0% {
63 box-shadow: 0 0 0 0 rgba(255,196,0,.82);
64 transform: scale(1)
65 }
66 50% {
67 box-shadow: 0 0 0 7px rgba(255,196,0,.2);
68 transform: scale(1.025)
69 }
70 100% {
71 box-shadow: 0 0 0 0 rgba(255,196,0,0);
72 transform: scale(1)
73 }
74 }
75 .wpbc_theme_toolbar_value {
76 -ms-flex-align: center;
77 align-items: center;
78 background: #f6f7f7;
79 border: 1px solid var(--wpbc-theme-border);
80 border-radius: var(--wpbc-theme-radius);
81 box-sizing: border-box;
82 display: -ms-inline-flexbox;
83 display: inline-flex;
84 gap: 7px;
85 min-height: 32px;
86 padding: 5px 9px
87 }
88 .wpbc_theme_toolbar_value .menu_icon {
89 color: var(--wpbc-theme-accent)
90 }
91 .wpbc_theme_upgrade_hint {
92 -ms-flex-align: start;
93 align-items: flex-start;
94 color: var(--wpbc-theme-muted);
95 display: -ms-flexbox;
96 display: flex;
97 font-size: 12px;
98 gap: 7px;
99 line-height: 1.35;
100 max-width: 360px
101 }
102 .wpbc_theme_premium_dismiss {
103 display: -ms-inline-flexbox;
104 display: inline-flex;
105 line-height: 1;
106 margin-left: -3px;
107 vertical-align: middle
108 }
109 .wpbc_theme_premium_dismiss .wpbc_x_dismiss_btn {
110 color: #787c82;
111 font-size: 14px;
112 line-height: 1;
113 padding: 0 2px
114 }
115 .wpbc_theme_premium_dismiss .wpbc_x_dismiss_btn:hover {
116 color: #1d2327
117 }
118 .wpbc_theme_control_form {
119 display: none!important
120 }
121 .wpbc_theme_control_form.is-visible {
122 display: -ms-flexbox!important;
123 display: flex!important
124 }
125 .wpbc_theme_hint_bar.wpbc_ts_hint {
126 -ms-flex-align: center;
127 align-items: center;
128 background: #f5faff;
129 border: 1px solid #c8ddf5;
130 border-radius: 0;
131 color: var(--wpbc-theme-text);
132 display: -ms-flexbox;
133 display: flex;
134 gap: 10px;
135 margin: 15px 0 0;
136 padding: 15px
137 }
138 .wpbc_theme_hint_bar .wpbc_icn_info_outline {
139 color: var(--wpbc-theme-accent)
140 }
141 .wpbc_theme_preview {
142 background: var(--wpbc-theme-bg);
143 border: 1px solid var(--wpbc-theme-border);
144 border-radius: var(--wpbc-theme-radius);
145 box-shadow: var(--wpbc-theme-shadow);
146 box-sizing: border-box;
147 display: block;
148 padding: 14px;
149 transition: background .16s ease-in-out,border-color .16s ease-in-out,color .16s ease-in-out
150 }
151 .wpbc_theme_real_preview {
152 min-height: 220px;
153 position: relative;
154 transition: opacity .16s ease-in-out
155 }
156 .wpbc_theme_real_preview.is-loading {
157 pointer-events: none
158 }
159 .wpbc_theme_real_preview.is-loading .wpbc_booking_form_structure,
160 .wpbc_theme_real_preview.is-loading .wpbc_calendar_wraper {
161 filter: blur(1px);
162 opacity: .34
163 }
164 .wpbc_calendar_loading.wpbc_theme_calendar_loading {
165 -ms-flex-align: center;
166 align-items: center;
167 background: rgba(255,255,255,.74);
168 box-sizing: border-box;
169 color: #1d2327;
170 display: -ms-flexbox;
171 display: flex;
172 font-size: 1.2em;
173 font-weight: 600;
174 inset: 10px;
175 -ms-flex-pack: center;
176 justify-content: center;
177 margin: 0;
178 position: absolute;
179 text-align: center;
180 z-index: 30
181 }
182 .wpbc_theme_preview.wpbc_theme_dark_1 .wpbc_calendar_loading.wpbc_theme_calendar_loading {
183 background: rgba(31,36,43,.74);
184 color: #f1f5f9
185 }
186 .wpbc_theme_form_preview {
187 background: #f8fafc;
188 border: 1px solid #d9e1ea;
189 border-radius: var(--wpbc-theme-radius);
190 box-sizing: border-box;
191 display: -ms-flexbox;
192 display: flex;
193 -ms-flex-direction: column;
194 flex-direction: column;
195 gap: 12px;
196 min-width: 0;
197 padding: 14px
198 }
199 .wpbc_theme_preview.wpbc_theme_dark_1 .wpbc_theme_form_preview {
200 background: #111827;
201 border-color: #334155
202 }
203 .wpbc_theme_preview_title {
204 color: inherit;
205 font-size: 13px;
206 font-weight: 600;
207 line-height: 1.3
208 }
209 .wpbc_theme_preview_grid {
210 display: grid;
211 gap: 10px;
212 grid-template-columns: 1fr
213 }
214 .wpbc_theme_preview_grid label {
215 display: -ms-flexbox;
216 display: flex;
217 -ms-flex-direction: column;
218 flex-direction: column;
219 gap: 5px
220 }
221 .wpbc_theme_preview_grid span {
222 color: var(--wpbc-theme-muted);
223 font-size: 12px;
224 font-weight: 600
225 }
226 .wpbc_theme_preview.wpbc_theme_dark_1 .wpbc_theme_preview_grid span {
227 color: #cbd5e1
228 }
229 .wpbc_theme_preview_grid input,
230 .wpbc_theme_times_preview select {
231 background: #fff;
232 border: 1px solid #cfd7df;
233 border-radius: 4px;
234 box-sizing: border-box;
235 color: #1d2327;
236 min-height: 34px;
237 width: 100%
238 }
239 .wpbc_theme_preview.wpbc_theme_dark_1 .wpbc_theme_preview_grid input,
240 .wpbc_theme_preview.wpbc_theme_dark_1 .wpbc_theme_times_preview select {
241 background: #0f172a;
242 border-color: #475569;
243 color: #f8fafc
244 }
245 .wpbc_theme_times_preview {
246 display: -ms-flexbox;
247 display: flex;
248 -ms-flex-flow: row wrap;
249 flex-flow: row wrap;
250 gap: 8px
251 }
252 .wpbc_theme_times_preview button {
253 background: #fff;
254 border: 1px solid #cfd7df;
255 border-radius: 4px;
256 color: #1d2327;
257 cursor: default;
258 min-height: 32px;
259 padding: 5px 10px
260 }
261 .wpbc_theme_times_preview button.is-selected {
262 background: var(--wpbc-theme-accent);
263 border-color: var(--wpbc-theme-accent);
264 color: #fff
265 }
266 .wpbc_theme_preview.wpbc_theme_dark_1 .wpbc_theme_times_preview button {
267 background: #0f172a;
268 border-color: #475569;
269 color: #f8fafc
270 }
271 .wpbc_theme_preview.wpbc_theme_dark_1 .wpbc_theme_times_preview button.is-selected {
272 background: #38bdf8;
273 border-color: #38bdf8;
274 color: #082f49
275 }
276 .wpbc_theme_inspector_body {
277 box-sizing: border-box;
278 padding: 10px
279 }
280 .wpbc_theme_field_row {
281 display: -ms-flexbox;
282 display: flex;
283 -ms-flex-direction: column;
284 flex-direction: column;
285 gap: 6px;
286 margin-bottom: 14px
287 }
288 .wpbc_theme_field_label {
289 color: var(--wpbc-theme-text);
290 font-size: 13px;
291 font-weight: 600
292 }
293 .wpbc_theme_field_row > input[type=text],
294 .wpbc_theme_field_row > select {
295 max-width: 100%;
296 min-height: 32px;
297 width: 100%
298 }
299 .wpbc_theme_description {
300 color: var(--wpbc-theme-muted);
301 font-size: 12px;
302 line-height: 1.5;
303 margin: 8px 0 0
304 }
305 .wpbc_theme_choice_grid {
306 display: grid;
307 gap: 8px;
308 grid-template-columns: repeat(2,minmax(0,1fr))
309 }
310 .wpbc_theme_choice {
311 -ms-flex-align: center;
312 align-items: center;
313 background: #fff;
314 border: 1px solid var(--wpbc-theme-border);
315 border-radius: var(--wpbc-theme-radius);
316 box-sizing: border-box;
317 cursor: pointer;
318 display: -ms-flexbox;
319 display: flex;
320 gap: 8px;
321 min-height: 48px;
322 padding: 9px
323 }
324 .wpbc_theme_choice input {
325 height: 1px;
326 margin: 0;
327 opacity: 0;
328 position: absolute;
329 width: 1px
330 }
331 .wpbc_theme_choice.is-selected,
332 .wpbc_theme_choice:has(input:checked) {
333 border-color: var(--wpbc-theme-accent);
334 box-shadow: 0 0 0 1px var(--wpbc-theme-accent)
335 }
336 .wpbc_theme_choice_swatch {
337 background: linear-gradient(135deg,#fff 0,#f2f4f7 100%);
338 border: 1px solid #cbd5e1;
339 border-radius: 50%;
340 -ms-flex: 0 0 auto;
341 flex: 0 0 auto;
342 height: 24px;
343 width: 24px
344 }
345 .wpbc_theme_style_choice_grid {
346 grid-template-columns: repeat(2,minmax(0,1fr))
347 }
348 .wpbc_theme_style_choice_grid .wpbc_theme_choice {
349 -ms-flex-align: start;
350 align-items: flex-start;
351 min-height: 54px
352 }
353 .wpbc_theme_choice_swatch_custom,
354 .wpbc_theme_choice_swatch_dark_bordered,
355 .wpbc_theme_choice_swatch_dark_none,
356 .wpbc_theme_choice_swatch_dark_soft,
357 .wpbc_theme_choice_swatch_light_bordered,
358 .wpbc_theme_choice_swatch_light_none,
359 .wpbc_theme_choice_swatch_light_soft {
360 border-radius: 6px;
361 box-shadow: inset 0 0 0 4px rgba(255,255,255,.45)
362 }
363 .wpbc_theme_choice_swatch_light_bordered {
364 background: #fff;
365 border-color: #aeb8c4
366 }
367 .wpbc_theme_choice_swatch_light_none {
368 background: linear-gradient(135deg,#fff 0,#fff 50%,#eef2f6 50%,#eef2f6 100%);
369 border-color: transparent;
370 box-shadow: inset 0 0 0 1px #d9e1ea
371 }
372 .wpbc_theme_choice_swatch_light_soft {
373 background: #f8fafc;
374 border-color: #d8dee6
375 }
376 .wpbc_theme_choice_swatch_dark_bordered {
377 background: #111827;
378 border-color: #334155
379 }
380 .wpbc_theme_choice_swatch_dark_none {
381 background: linear-gradient(135deg,#111827 0,#111827 50%,#334155 50%,#334155 100%);
382 border-color: transparent;
383 box-shadow: inset 0 0 0 1px #475569
384 }
385 .wpbc_theme_choice_swatch_dark_soft {
386 background: #1f2937;
387 border-color: #475569
388 }
389 .wpbc_theme_choice_swatch_custom {
390 background: linear-gradient(135deg,#fff 0,#fff 30%,#2271b1 30%,#2271b1 62%,#111827 62%,#111827 100%);
391 border-color: #8aa6c3
392 }
393 .wpbc_theme_choice_swatch.wpbc_theme_dark_1 {
394 background: linear-gradient(135deg,#111827 0,#334155 100%);
395 border-color: #0f172a
396 }
397 .wpbc_theme_choice_label {
398 color: var(--wpbc-theme-text);
399 font-size: 13px;
400 font-weight: 600;
401 line-height: 1.2;
402 overflow-wrap: anywhere
403 }
404 .wpbc_theme_switch {
405 -ms-flex-align: center;
406 align-items: center;
407 background: var(--wpbc-theme-bg,#fff);
408 box-sizing: border-box;
409 cursor: pointer;
410 display: -ms-flexbox;
411 display: flex;
412 gap: 8px;
413 min-height: 36px;
414 padding: 6px 0
415 }
416 .wpbc_theme_switch_card {
417 border-top: 1px solid var(--wpbc-theme-border);
418 margin-top: 10px;
419 padding-top: 12px
420 }
421 .wpbc_theme_switch input {
422 height: 1px;
423 margin: 0;
424 opacity: 0;
425 position: absolute;
426 width: 1px
427 }
428 .wpbc_theme_switch_control {
429 background: #c3c4c7;
430 border-radius: 10px;
431 box-sizing: border-box;
432 display: -ms-inline-flexbox;
433 display: inline-flex;
434 -ms-flex: 0 0 auto;
435 flex: 0 0 auto;
436 height: 18px;
437 padding: 2px;
438 transition: background .16s ease-in-out;
439 width: 34px
440 }
441 .wpbc_theme_switch_knob {
442 background: #fff;
443 border-radius: 50%;
444 box-shadow: 0 1px 2px rgba(0,0,0,.22);
445 display: block;
446 height: 14px;
447 -ms-transform: translateX(0);
448 transform: translateX(0);
449 transition: transform .16s ease-in-out;
450 width: 14px
451 }
452 .wpbc_theme_switch input:checked + .wpbc_theme_switch_control {
453 background: var(--wpbc-theme-accent)
454 }
455 .wpbc_theme_switch input:checked + .wpbc_theme_switch_control .wpbc_theme_switch_knob {
456 -ms-transform: translateX(16px);
457 transform: translateX(16px)
458 }
459 .wpbc_theme_choice input:focus-visible + .wpbc_theme_choice_swatch,
460 .wpbc_theme_switch input:focus-visible + .wpbc_theme_switch_control {
461 box-shadow: 0 0 0 2px #fff,0 0 0 4px var(--wpbc-theme-accent)
462 }
463 .wpbc_theme_switch_label {
464 color: var(--wpbc-theme-text);
465 font-size: 13px;
466 line-height: 1.25;
467 overflow-wrap: anywhere
468 }
469 select.wpbc_radio__set_days_customize_plugin {
470 max-width: calc(100% - 140px)
471 }
472 .wpbc_theme_notice {
473 background: #fff8e5;
474 border: 1px solid #e8c76a;
475 box-sizing: border-box;
476 color: #3c434a;
477 font-size: 13px;
478 line-height: 1.45;
479 padding: 12px
480 }
481 @media (max-width:960px) {
482 .wpbc_theme_preview {
483 grid-template-columns: 1fr
484 }
485 }
486 @media (max-width:640px) {
487 .wpbc_theme_choice_grid {
488 grid-template-columns: 1fr
489 }
490 .wpbc_theme_toolbar .wpbc_ts_control,
491 .wpbc_theme_toolbar .wpbc_ts_control select {
492 width: 100%
493 }
494 }