PluginProbe
Booking Calendar / 11.8.3
Booking Calendar v11.8.3
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 10.11.2 All 203 releases
booking / includes / page-setup / _src / setup_first_run_popup.css

setup_first_run_popup.css in Booking Calendar 11.8.3, at includes/page-setup/_src/setup_first_run_popup.css

359 lines 7.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * First-install Setup Wizard and starter-pages prompts.
3 *
4 * @since 11.8.1
5 */
6 .wpbc_setup_wizard_first_run_popup .modal-dialog {
7 box-sizing: border-box;
8 margin: 8vh auto 30px;
9 max-width: calc(100vw - 30px);
10 width: 825px;
11 }
12
13 .wpbc_setup_wizard_first_run_popup .modal-content {
14 border: 0;
15 border-radius: 9px;
16 box-shadow: 0 24px 70px rgba( 0, 0, 0, 0.28 );
17 overflow: hidden;
18 position: relative;
19 }
20
21 .wpbc_setup_wizard_first_run_popup__close {
22 align-items: center;
23 background: transparent;
24 border: 0;
25 border-radius: 4px;
26 color: #50575e;
27 cursor: pointer;
28 display: flex;
29 font-size: 30px;
30 height: 40px;
31 justify-content: center;
32 line-height: 1;
33 padding: 0;
34 position: absolute;
35 right: 14px;
36 top: 12px;
37 width: 40px;
38 z-index: 2;
39 }
40
41 .wpbc_setup_wizard_first_run_popup__close:hover {
42 color: var(--wp-admin-theme-color-darker-10);
43 }
44 .wpbc_setup_wizard_first_run_popup__close span {
45 font-size: 30px;
46 }
47 .wpbc_setup_wizard_first_run_popup__close:focus-visible {
48 box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2271b1;
49 outline: 2px solid transparent;
50 }
51
52 .rtl .wpbc_setup_wizard_first_run_popup__close {
53 left: 14px;
54 right: auto;
55 }
56
57 .wpbc_setup_wizard_first_run_popup .wpbc_setup_wizard_first_run_popup__body {
58 background: #ffffff;
59 box-sizing: border-box;
60 padding: 34px 54px 40px;
61 text-align: center;
62 }
63
64 .wpbc_setup_wizard_first_run_popup__logo {
65 align-items: center;
66 display: inline-flex;
67 justify-content: center;
68 margin: 0 auto 18px;
69 min-height: 96px;
70 min-width: 96px;
71 }
72
73 .wpbc_setup_wizard_first_run_popup h2 {
74 color: #101517;
75 font-size: 30px;
76 font-weight: 650;
77 letter-spacing: -0.02em;
78 line-height: 1.2;
79 margin: 0 0 13px;
80 }
81
82 .wpbc_setup_wizard_first_run_popup__description {
83 color: #3c434a;
84 font-size: 17px;
85 line-height: 1.55;
86 margin: 0 auto 22px;
87 padding: 5px 0 35px;
88 }
89
90 .wpbc_setup_wizard_first_run_popup__notice {
91 align-items: flex-start;
92 background: #f3f7ff;
93 border: 1px solid #d7e3fb;
94 border-radius: 5px;
95 box-sizing: border-box;
96 color: #2c3338;
97 display: flex;
98 font-size: 14px;
99 gap: 12px;
100 line-height: 1.55;
101 margin: 0 auto 24px;
102 max-width: 620px;
103 text-align: center;
104 justify-content: center;
105 padding: 14px 16px;
106 }
107
108 .wpbc_setup_wizard_first_run_popup__notice .wpbc_icn_info_outline {
109 color: #3858e9;
110 }
111
112 .wpbc_setup_wizard_first_run_popup__actions {
113 align-items: center;
114 border-top: 1px solid #dcdcde;
115 display: flex;
116 flex-flow: row wrap;
117 gap: 12px;
118 justify-content: center;
119 margin: 0 auto;
120 max-width: 565px;
121 padding: 24px 0 0;
122 }
123
124 .wpbc_setup_wizard_first_run_popup__actions .button-hero {
125 font-size: 16px;
126 line-height: 2.45;
127 min-width: 190px;
128 padding: 0 24px;
129 }
130
131 .wpbc_setup_wizard_first_run_popup__later {
132 color: #646970;
133 font-size: 12px;
134 line-height: 1.5;
135 margin: 20px auto 0;
136 padding: 20px 0 0;
137 }
138
139 .wpbc_setup_wizard_booking_pages_popup .modal-dialog {
140 margin-top: 2vh;
141 width: 1180px;
142 }
143
144 .wpbc_setup_wizard_booking_pages_popup .wpbc_setup_wizard_booking_pages_popup__body {
145 max-height: calc(100vh - 4vh - 30px);
146 overflow-y: auto;
147 padding: 28px 46px 34px;
148 }
149
150 .wpbc_setup_wizard_booking_pages_popup__brand {
151 align-items: center;
152 display: inline-flex;
153 gap: 10px;
154 justify-content: center;
155 margin: 0 auto 20px;
156 }
157
158 .wpbc_setup_wizard_booking_pages_popup__brand_text {
159 align-items: flex-start;
160 color: #41464b;
161 display: flex;
162 flex-direction: column;
163 font-weight: 500;
164 line-height: 1;
165 text-align: left;
166 }
167
168 .wpbc_setup_wizard_booking_pages_popup__brand_name {
169 font-size: 20px;
170 }
171
172 .wpbc_setup_wizard_booking_pages_popup__brand_prefix {
173 font-size: 8px;
174 font-weight: 600;
175 letter-spacing: 0.04em;
176 margin: 3px 0 0 1px;
177 }
178
179 .rtl .wpbc_setup_wizard_booking_pages_popup__brand_text {
180 align-items: flex-end;
181 text-align: right;
182 }
183
184 .wpbc_setup_wizard_booking_pages_popup h2 {
185 font-size: 32px;
186 margin-bottom: 12px;
187 }
188
189 .wpbc_setup_wizard_booking_pages_popup .wpbc_setup_wizard_first_run_popup__description {
190 margin-bottom: 24px;
191 }
192
193 .wpbc_setup_wizard_booking_pages_popup__cards {
194 display: grid;
195 gap: 20px;
196 grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
197 margin: 0 auto 24px;
198 max-width: 1088px;
199 text-align: left;
200 }
201
202 .wpbc_setup_wizard_booking_pages_popup__card {
203 background: #ffffff;
204 border: 1px solid #dcdcde;
205 border-radius: 7px;
206 box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
207 display: flex;
208 flex-direction: column;
209 min-width: 0;
210 overflow: hidden;
211 }
212
213 .wpbc_setup_wizard_booking_pages_popup__image {
214 align-items: center;
215 aspect-ratio: 16 / 9;
216 background: #f8f9fa;
217 border-bottom: 1px solid #dcdcde;
218 box-sizing: border-box;
219 display: flex;
220 justify-content: center;
221 overflow: hidden;
222 padding: 18px;
223 width: 100%;
224 }
225
226 .wpbc_setup_wizard_booking_pages_popup__image img {
227 display: block;
228 height: 100%;
229 object-fit: contain;
230 object-position: top center;
231 width: 100%;
232 }
233
234 .wpbc_setup_wizard_booking_pages_popup__card_content {
235 display: flex;
236 flex: 1 1 auto;
237 flex-direction: column;
238 min-height: 150px;
239 padding: 20px 22px 22px;
240 }
241
242 .wpbc_setup_wizard_booking_pages_popup__card h3 {
243 color: #1d2327;
244 font-size: 19px;
245 font-weight: 550;
246 line-height: 1.3;
247 margin: 0 0 8px;
248 }
249
250 .wpbc_setup_wizard_booking_pages_popup__card p {
251 color: #50575e;
252 font-size: 14px;
253 line-height: 1.5;
254 margin: 0 0 18px;
255 }
256
257 .wpbc_setup_wizard_booking_pages_popup__card .button {
258 align-self: center;
259 margin: auto auto 0;
260 }
261
262 .wpbc_setup_wizard_booking_pages_popup__card .button > [aria-hidden="true"] {
263 margin-left: 5px;
264 }
265
266 .rtl .wpbc_setup_wizard_booking_pages_popup__card .button > [aria-hidden="true"] {
267 margin-left: 0;
268 margin-right: 5px;
269 }
270
271 .wpbc_setup_wizard_booking_pages_popup__notice {
272 margin-bottom: 22px;
273 max-width: 1088px;
274 }
275
276 .wpbc_setup_wizard_booking_pages_popup__actions {
277 max-width: 1088px;
278 padding-top: 22px;
279 }
280
281 .wp-admin .modal-backdrop.wpbc_setup_wizard_first_run_popup__backdrop.in {
282 background: #111820;
283 display: block;
284 opacity: 0.58;
285 }
286
287 @media ( max-width: 1100px ) and ( min-width: 783px ) {
288 .wpbc_setup_wizard_booking_pages_popup__cards {
289 grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
290 }
291 }
292
293 @media ( max-width: 782px ) {
294 .wpbc_setup_wizard_first_run_popup .modal-dialog {
295 margin: 20px auto;
296 width: calc(100vw - 24px);
297 }
298
299 .wpbc_setup_wizard_first_run_popup .wpbc_setup_wizard_first_run_popup__body {
300 padding: 30px 22px 32px;
301 }
302
303 .wpbc_setup_wizard_first_run_popup__close {
304 right: 8px;
305 top: 8px;
306 }
307
308 .wpbc_setup_wizard_first_run_popup h2 {
309 font-size: 25px;
310 }
311
312 .wpbc_setup_wizard_first_run_popup__description {
313 font-size: 15px;
314 }
315
316 .wpbc_setup_wizard_first_run_popup__actions {
317 align-items: stretch;
318 flex-direction: column;
319 }
320
321 .wpbc_setup_wizard_first_run_popup__actions .button-hero {
322 width: 100%;
323 }
324
325 .wpbc_setup_wizard_booking_pages_popup .modal-dialog {
326 margin: 12px auto;
327 }
328
329 .wpbc_setup_wizard_booking_pages_popup .wpbc_setup_wizard_booking_pages_popup__body {
330 max-height: calc(100vh - 24px);
331 padding: 24px 14px 26px;
332 }
333
334 .wpbc_setup_wizard_booking_pages_popup__brand {
335 margin-bottom: 16px;
336 }
337
338 .wpbc_setup_wizard_booking_pages_popup__cards {
339 gap: 16px;
340 grid-template-columns: minmax( 0, 1fr );
341 }
342
343 .wpbc_setup_wizard_booking_pages_popup__image {
344 padding: 12px;
345 }
346
347 .wpbc_setup_wizard_booking_pages_popup__card_content {
348 min-height: 0;
349 padding: 18px;
350 }
351 }
352
353 @media ( prefers-reduced-motion: reduce ) {
354 .wpbc_setup_wizard_first_run_popup,
355 .wpbc_setup_wizard_first_run_popup__backdrop {
356 transition: none !important;
357 }
358 }
359