|
1 /** |
|
2 * Colors |
|
3 */ |
|
4 /** |
|
5 * Breakpoints & Media Queries |
|
6 */ |
|
7 /** |
|
8 * SCSS Variables. |
|
9 * |
|
10 * Please use variables from this sheet to ensure consistency across the UI. |
|
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
|
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
|
13 */ |
|
14 /** |
|
15 * Colors |
|
16 */ |
|
17 /** |
|
18 * Fonts & basic variables. |
|
19 */ |
|
20 /** |
|
21 * Grid System. |
|
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
|
23 */ |
|
24 /** |
|
25 * Dimensions. |
|
26 */ |
|
27 /** |
|
28 * Shadows. |
|
29 */ |
|
30 /** |
|
31 * Editor widths. |
|
32 */ |
|
33 /** |
|
34 * Block & Editor UI. |
|
35 */ |
|
36 /** |
|
37 * Block paddings. |
|
38 */ |
|
39 /** |
|
40 * React Native specific. |
|
41 * These variables do not appear to be used anywhere else. |
|
42 */ |
|
43 /** |
|
44 * Converts a hex value into the rgb equivalent. |
|
45 * |
|
46 * @param {string} hex - the hexadecimal value to convert |
|
47 * @return {string} comma separated rgb values |
|
48 */ |
|
49 /** |
|
50 * Breakpoint mixins |
|
51 */ |
|
52 /** |
|
53 * Long content fade mixin |
|
54 * |
|
55 * Creates a fading overlay to signify that the content is longer |
|
56 * than the space allows. |
|
57 */ |
|
58 /** |
|
59 * Focus styles. |
|
60 */ |
|
61 /** |
|
62 * Applies editor left position to the selector passed as argument |
|
63 */ |
|
64 /** |
|
65 * Styles that are reused verbatim in a few places |
|
66 */ |
|
67 /** |
|
68 * Allows users to opt-out of animations via OS-level preferences. |
|
69 */ |
|
70 /** |
|
71 * Reset default styles for JavaScript UI based pages. |
|
72 * This is a WP-admin agnostic reset |
|
73 */ |
|
74 /** |
|
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
|
76 */ |
|
77 :root { |
|
78 --wp-admin-theme-color: #007cba; |
|
79 --wp-admin-theme-color--rgb: 0, 124, 186; |
|
80 --wp-admin-theme-color-darker-10: #006ba1; |
|
81 --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; |
|
82 --wp-admin-theme-color-darker-20: #005a87; |
|
83 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; |
|
84 --wp-admin-border-width-focus: 2px; |
|
85 } |
|
86 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
87 :root { |
|
88 --wp-admin-border-width-focus: 1.5px; |
|
89 } |
|
90 } |
|
91 |
|
92 .components-panel__header.interface-complementary-area-header__small { |
|
93 background: #fff; |
|
94 padding-left: 4px; |
|
95 } |
|
96 .components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title { |
|
97 overflow: hidden; |
|
98 text-overflow: ellipsis; |
|
99 white-space: nowrap; |
|
100 width: 100%; |
|
101 } |
|
102 @media (min-width: 782px) { |
|
103 .components-panel__header.interface-complementary-area-header__small { |
|
104 display: none; |
|
105 } |
|
106 } |
|
107 |
|
108 .interface-complementary-area-header { |
|
109 background: #fff; |
|
110 padding-left: 4px; |
|
111 } |
|
112 .interface-complementary-area-header .components-button.has-icon { |
|
113 display: none; |
|
114 margin-right: auto; |
|
115 } |
|
116 .interface-complementary-area-header .components-button.has-icon ~ .components-button { |
|
117 margin-right: 0; |
|
118 } |
|
119 @media (min-width: 782px) { |
|
120 .interface-complementary-area-header .components-button.has-icon { |
|
121 display: flex; |
|
122 } |
|
123 } |
|
124 |
|
125 @media (min-width: 782px) { |
|
126 .components-panel__header + .interface-complementary-area-header { |
|
127 margin-top: 0; |
|
128 } |
|
129 } |
|
130 |
|
131 .interface-complementary-area { |
|
132 background: #fff; |
|
133 color: #1e1e1e; |
|
134 } |
|
135 @media (min-width: 600px) { |
|
136 .interface-complementary-area { |
|
137 -webkit-overflow-scrolling: touch; |
|
138 } |
|
139 } |
|
140 @media (min-width: 782px) { |
|
141 .interface-complementary-area { |
|
142 width: 280px; |
|
143 } |
|
144 } |
|
145 .interface-complementary-area .components-panel { |
|
146 border: none; |
|
147 position: relative; |
|
148 z-index: 0; |
|
149 } |
|
150 .interface-complementary-area .components-panel__header { |
|
151 position: sticky; |
|
152 top: 0; |
|
153 z-index: 1; |
|
154 } |
|
155 .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { |
|
156 top: 48px; |
|
157 } |
|
158 @media (min-width: 782px) { |
|
159 .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs { |
|
160 top: 0; |
|
161 } |
|
162 } |
|
163 .interface-complementary-area p { |
|
164 margin-top: 0; |
|
165 } |
|
166 .interface-complementary-area h2 { |
|
167 font-size: 13px; |
|
168 color: #1e1e1e; |
|
169 margin-bottom: 1.5em; |
|
170 } |
|
171 .interface-complementary-area h3 { |
|
172 font-size: 11px; |
|
173 text-transform: uppercase; |
|
174 font-weight: 500; |
|
175 color: #1e1e1e; |
|
176 margin-bottom: 1.5em; |
|
177 } |
|
178 .interface-complementary-area hr { |
|
179 border-top: none; |
|
180 border-bottom: 1px solid #f0f0f0; |
|
181 margin: 1.5em 0; |
|
182 } |
|
183 .interface-complementary-area div.components-toolbar-group, |
|
184 .interface-complementary-area div.components-toolbar { |
|
185 box-shadow: none; |
|
186 margin-bottom: 1.5em; |
|
187 } |
|
188 .interface-complementary-area div.components-toolbar-group:last-child, |
|
189 .interface-complementary-area div.components-toolbar:last-child { |
|
190 margin-bottom: 0; |
|
191 } |
|
192 .interface-complementary-area .block-editor-skip-to-selected-block:focus { |
|
193 top: auto; |
|
194 left: 10px; |
|
195 bottom: 10px; |
|
196 right: auto; |
|
197 } |
|
198 |
|
199 @media (min-width: 782px) { |
|
200 body.js.is-fullscreen-mode { |
|
201 margin-top: -32px; |
|
202 height: calc(100% + 32px); |
|
203 } |
|
204 body.js.is-fullscreen-mode #adminmenumain, |
|
205 body.js.is-fullscreen-mode #wpadminbar { |
|
206 display: none; |
|
207 } |
|
208 body.js.is-fullscreen-mode #wpcontent, |
|
209 body.js.is-fullscreen-mode #wpfooter { |
|
210 margin-right: 0; |
|
211 } |
|
212 } |
|
213 |
|
214 html.interface-interface-skeleton__html-container { |
|
215 position: fixed; |
|
216 width: 100%; |
|
217 } |
|
218 @media (min-width: 782px) { |
|
219 html.interface-interface-skeleton__html-container { |
|
220 position: initial; |
|
221 width: initial; |
|
222 } |
|
223 } |
|
224 |
|
225 .interface-interface-skeleton { |
|
226 display: flex; |
|
227 flex-direction: row; |
|
228 height: auto; |
|
229 max-height: 100%; |
|
230 position: fixed; |
|
231 top: 46px; |
|
232 right: 0; |
|
233 left: 0; |
|
234 bottom: 0; |
|
235 } |
|
236 @media (min-width: 783px) { |
|
237 .interface-interface-skeleton { |
|
238 top: 32px; |
|
239 } |
|
240 .is-fullscreen-mode .interface-interface-skeleton { |
|
241 top: 0; |
|
242 } |
|
243 } |
|
244 |
|
245 .interface-interface-skeleton__editor { |
|
246 display: flex; |
|
247 flex-direction: column; |
|
248 flex: 0 1 100%; |
|
249 overflow: hidden; |
|
250 } |
|
251 |
|
252 .interface-interface-skeleton { |
|
253 /* Set left position when auto-fold is not on the body element. */ |
|
254 right: 0; |
|
255 } |
|
256 @media (min-width: 783px) { |
|
257 .interface-interface-skeleton { |
|
258 right: 160px; |
|
259 } |
|
260 } |
|
261 |
|
262 .auto-fold .interface-interface-skeleton { |
|
263 /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ |
|
264 } |
|
265 @media (min-width: 783px) { |
|
266 .auto-fold .interface-interface-skeleton { |
|
267 right: 36px; |
|
268 } |
|
269 } |
|
270 @media (min-width: 961px) { |
|
271 .auto-fold .interface-interface-skeleton { |
|
272 right: 160px; |
|
273 } |
|
274 } |
|
275 |
|
276 /* Sidebar manually collapsed. */ |
|
277 .folded .interface-interface-skeleton { |
|
278 right: 0; |
|
279 } |
|
280 @media (min-width: 783px) { |
|
281 .folded .interface-interface-skeleton { |
|
282 right: 36px; |
|
283 } |
|
284 } |
|
285 |
|
286 body.is-fullscreen-mode .interface-interface-skeleton { |
|
287 right: 0 !important; |
|
288 } |
|
289 |
|
290 .interface-interface-skeleton__body { |
|
291 flex-grow: 1; |
|
292 display: flex; |
|
293 overflow: auto; |
|
294 overscroll-behavior-y: none; |
|
295 } |
|
296 @media (min-width: 782px) { |
|
297 .has-footer .interface-interface-skeleton__body { |
|
298 padding-bottom: 25px; |
|
299 } |
|
300 } |
|
301 |
|
302 .interface-interface-skeleton__content { |
|
303 flex-grow: 1; |
|
304 display: flex; |
|
305 flex-direction: column; |
|
306 overflow: auto; |
|
307 z-index: 20; |
|
308 } |
|
309 |
|
310 .interface-interface-skeleton__secondary-sidebar, |
|
311 .interface-interface-skeleton__sidebar { |
|
312 display: block; |
|
313 flex-shrink: 0; |
|
314 position: absolute; |
|
315 z-index: 100000; |
|
316 top: 0; |
|
317 left: 0; |
|
318 bottom: 0; |
|
319 right: 0; |
|
320 background: #fff; |
|
321 color: #1e1e1e; |
|
322 } |
|
323 @media (min-width: 782px) { |
|
324 .interface-interface-skeleton__secondary-sidebar, |
|
325 .interface-interface-skeleton__sidebar { |
|
326 position: relative !important; |
|
327 z-index: 90; |
|
328 width: auto; |
|
329 } |
|
330 } |
|
331 |
|
332 .interface-interface-skeleton__sidebar { |
|
333 overflow: auto; |
|
334 } |
|
335 @media (min-width: 782px) { |
|
336 .interface-interface-skeleton__sidebar { |
|
337 border-right: 1px solid #e0e0e0; |
|
338 } |
|
339 } |
|
340 |
|
341 @media (min-width: 782px) { |
|
342 .interface-interface-skeleton__secondary-sidebar { |
|
343 border-left: 1px solid #e0e0e0; |
|
344 } |
|
345 } |
|
346 |
|
347 .interface-interface-skeleton__header { |
|
348 flex-shrink: 0; |
|
349 height: auto; |
|
350 border-bottom: 1px solid #e0e0e0; |
|
351 z-index: 30; |
|
352 color: #1e1e1e; |
|
353 } |
|
354 |
|
355 .interface-interface-skeleton__footer { |
|
356 height: auto; |
|
357 flex-shrink: 0; |
|
358 border-top: 1px solid #e0e0e0; |
|
359 color: #1e1e1e; |
|
360 position: absolute; |
|
361 bottom: 0; |
|
362 right: 0; |
|
363 width: 100%; |
|
364 background-color: #fff; |
|
365 z-index: 90; |
|
366 display: none; |
|
367 } |
|
368 @media (min-width: 782px) { |
|
369 .interface-interface-skeleton__footer { |
|
370 display: flex; |
|
371 } |
|
372 } |
|
373 .interface-interface-skeleton__footer .block-editor-block-breadcrumb { |
|
374 z-index: 30; |
|
375 display: flex; |
|
376 background: #fff; |
|
377 height: 24px; |
|
378 align-items: center; |
|
379 font-size: 13px; |
|
380 padding: 0 18px; |
|
381 } |
|
382 |
|
383 .interface-interface-skeleton__actions { |
|
384 z-index: 100000; |
|
385 position: fixed !important; |
|
386 top: -9999em; |
|
387 bottom: auto; |
|
388 right: auto; |
|
389 left: 0; |
|
390 width: 280px; |
|
391 color: #1e1e1e; |
|
392 } |
|
393 .interface-interface-skeleton__actions:focus { |
|
394 top: auto; |
|
395 bottom: 0; |
|
396 } |
|
397 |
|
398 .interface-more-menu-dropdown { |
|
399 margin-right: -4px; |
|
400 } |
|
401 .interface-more-menu-dropdown .components-button { |
|
402 width: auto; |
|
403 padding: 0 2px; |
|
404 } |
|
405 @media (min-width: 600px) { |
|
406 .interface-more-menu-dropdown { |
|
407 margin-right: 0; |
|
408 } |
|
409 .interface-more-menu-dropdown .components-button { |
|
410 padding: 0 4px; |
|
411 } |
|
412 } |
|
413 |
|
414 .interface-more-menu-dropdown__content .components-popover__content { |
|
415 min-width: 280px; |
|
416 } |
|
417 @media (min-width: 480px) { |
|
418 .interface-more-menu-dropdown__content .components-popover__content { |
|
419 width: auto; |
|
420 max-width: 480px; |
|
421 } |
|
422 } |
|
423 .interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu { |
|
424 padding: 0; |
|
425 } |
|
426 |
|
427 .components-popover.interface-more-menu-dropdown__content { |
|
428 z-index: 99998; |
|
429 } |
|
430 |
|
431 .interface-pinned-items { |
|
432 display: flex; |
|
433 } |
|
434 .interface-pinned-items .components-button:not(:first-child) { |
|
435 display: none; |
|
436 } |
|
437 @media (min-width: 600px) { |
|
438 .interface-pinned-items .components-button:not(:first-child) { |
|
439 display: flex; |
|
440 } |
|
441 } |
|
442 .interface-pinned-items .components-button { |
|
443 margin-right: 4px; |
|
444 } |
|
445 .interface-pinned-items .components-button svg { |
|
446 max-width: 24px; |
|
447 max-height: 24px; |
|
448 } |
|
449 |
|
450 @media (min-width: 600px) { |
|
451 .interface-preferences-modal { |
|
452 width: calc(100% - 32px); |
|
453 height: calc(100% - 120px); |
|
454 } |
|
455 } |
|
456 @media (min-width: 782px) { |
|
457 .interface-preferences-modal { |
|
458 width: 750px; |
|
459 } |
|
460 } |
|
461 @media (min-width: 960px) { |
|
462 .interface-preferences-modal { |
|
463 height: 70%; |
|
464 } |
|
465 } |
|
466 @media (max-width: 781px) { |
|
467 .interface-preferences-modal .components-modal__content { |
|
468 padding: 0; |
|
469 } |
|
470 .interface-preferences-modal .components-modal__content::before { |
|
471 content: none; |
|
472 } |
|
473 } |
|
474 |
|
475 .interface-preferences__tabs .components-tab-panel__tabs { |
|
476 position: absolute; |
|
477 top: 84px; |
|
478 right: 16px; |
|
479 width: 160px; |
|
480 } |
|
481 .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item { |
|
482 border-radius: 2px; |
|
483 font-weight: 400; |
|
484 } |
|
485 .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active { |
|
486 background: #f0f0f0; |
|
487 box-shadow: none; |
|
488 font-weight: 500; |
|
489 } |
|
490 .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) { |
|
491 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
|
492 } |
|
493 .interface-preferences__tabs .components-tab-panel__tab-content { |
|
494 padding-right: 24px; |
|
495 margin-right: 160px; |
|
496 } |
|
497 |
|
498 @media (max-width: 781px) { |
|
499 .interface-preferences__provider { |
|
500 height: 100%; |
|
501 } |
|
502 } |
|
503 .interface-preferences-modal__section { |
|
504 margin: 0 0 2.5rem 0; |
|
505 } |
|
506 .interface-preferences-modal__section:last-child { |
|
507 margin: 0; |
|
508 } |
|
509 |
|
510 .interface-preferences-modal__section-title { |
|
511 font-size: 0.9rem; |
|
512 font-weight: 600; |
|
513 margin-top: 0; |
|
514 } |
|
515 |
|
516 .interface-preferences-modal__section-description { |
|
517 margin: -8px 0 8px 0; |
|
518 font-size: 12px; |
|
519 font-style: normal; |
|
520 color: #757575; |
|
521 } |
|
522 |
|
523 .interface-preferences-modal__option .components-base-control .components-base-control__field { |
|
524 align-items: center; |
|
525 display: flex; |
|
526 margin-bottom: 0; |
|
527 } |
|
528 .interface-preferences-modal__option .components-base-control .components-base-control__field > label { |
|
529 flex-grow: 1; |
|
530 padding: 0.6rem 10px 0.6rem 0; |
|
531 } |
|
532 .interface-preferences-modal__option .components-base-control__help { |
|
533 margin: -8px 58px 8px 0; |
|
534 font-size: 12px; |
|
535 font-style: normal; |
|
536 color: #757575; |
|
537 } |
|
538 |
|
539 .edit-site-block-editor__editor-styles-wrapper .components-button { |
|
540 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
541 font-size: 13px; |
|
542 padding: 6px 12px; |
|
543 } |
|
544 .edit-site-block-editor__editor-styles-wrapper .components-button.is-tertiary, .edit-site-block-editor__editor-styles-wrapper .components-button.has-icon { |
|
545 padding: 6px; |
|
546 } |
|
547 |
|
548 .edit-site-visual-editor { |
|
549 position: relative; |
|
550 background-color: #2f2f2f; |
|
551 align-items: center; |
|
552 } |
|
553 .edit-site-visual-editor.is-focus-mode { |
|
554 padding: 48px; |
|
555 } |
|
556 .edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas { |
|
557 border-radius: 2px; |
|
558 } |
|
559 .edit-site-visual-editor.is-focus-mode .components-resizable-box__container { |
|
560 overflow: visible; |
|
561 } |
|
562 .edit-site-visual-editor .components-resizable-box__container { |
|
563 margin: 0 auto; |
|
564 overflow: auto; |
|
565 } |
|
566 |
|
567 .edit-site-visual-editor__back-button { |
|
568 position: absolute; |
|
569 top: 8px; |
|
570 right: 8px; |
|
571 color: #fff; |
|
572 } |
|
573 .edit-site-visual-editor__back-button:active:not([aria-disabled=true]), .edit-site-visual-editor__back-button:focus:not([aria-disabled=true]), .edit-site-visual-editor__back-button:hover { |
|
574 color: #f0f0f0; |
|
575 } |
|
576 |
|
577 .resizable-editor__drag-handle { |
|
578 position: absolute; |
|
579 top: 0; |
|
580 bottom: 0; |
|
581 padding: 0; |
|
582 margin: auto 0; |
|
583 width: 4px; |
|
584 height: 100px; |
|
585 -webkit-appearance: none; |
|
586 appearance: none; |
|
587 cursor: ew-resize; |
|
588 outline: none; |
|
589 background: #949494; |
|
590 border-radius: 2px; |
|
591 border: 0; |
|
592 } |
|
593 .resizable-editor__drag-handle.is-left { |
|
594 right: -16px; |
|
595 } |
|
596 .resizable-editor__drag-handle.is-right { |
|
597 left: -16px; |
|
598 } |
|
599 .resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active { |
|
600 background: #ccc; |
|
601 } |
|
602 .resizable-editor__drag-handle:focus { |
|
603 box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color); |
|
604 } |
|
605 |
|
606 .edit-site-code-editor { |
|
607 position: relative; |
|
608 width: 100%; |
|
609 background-color: #fff; |
|
610 flex-grow: 1; |
|
611 } |
|
612 .edit-site-code-editor__body { |
|
613 width: 100%; |
|
614 padding: 0 12px 12px 12px; |
|
615 max-width: 1080px; |
|
616 margin-right: auto; |
|
617 margin-left: auto; |
|
618 } |
|
619 @media (min-width: 960px) { |
|
620 .edit-site-code-editor__body { |
|
621 padding: 16px 24px 96px 24px; |
|
622 padding: 0 24px 24px 24px; |
|
623 } |
|
624 } |
|
625 .edit-site-code-editor__toolbar { |
|
626 position: sticky; |
|
627 z-index: 1; |
|
628 top: 0; |
|
629 right: 0; |
|
630 left: 0; |
|
631 display: flex; |
|
632 background: rgba(255, 255, 255, 0.8); |
|
633 padding: 4px 12px; |
|
634 } |
|
635 @media (min-width: 600px) { |
|
636 .edit-site-code-editor__toolbar { |
|
637 padding: 12px; |
|
638 } |
|
639 } |
|
640 @media (min-width: 960px) { |
|
641 .edit-site-code-editor__toolbar { |
|
642 padding: 12px 24px; |
|
643 } |
|
644 } |
|
645 .edit-site-code-editor__toolbar h2 { |
|
646 line-height: 36px; |
|
647 margin: 0 0 0 auto; |
|
648 font-size: 13px; |
|
649 color: #1e1e1e; |
|
650 } |
|
651 .edit-site-code-editor__toolbar .components-button svg { |
|
652 order: 1; |
|
653 } |
|
654 |
|
655 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { |
|
656 border: 1px solid #949494; |
|
657 border-radius: 0; |
|
658 display: block; |
|
659 margin: 0; |
|
660 width: 100%; |
|
661 box-shadow: none; |
|
662 resize: none; |
|
663 overflow: hidden; |
|
664 font-family: Menlo, Consolas, monaco, monospace; |
|
665 line-height: 2.4; |
|
666 min-height: 200px; |
|
667 transition: border 0.1s ease-out, box-shadow 0.1s linear; |
|
668 padding: 16px; |
|
669 /* Fonts smaller than 16px causes mobile safari to zoom. */ |
|
670 font-size: 16px !important; |
|
671 } |
|
672 @media (prefers-reduced-motion: reduce) { |
|
673 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { |
|
674 transition-duration: 0s; |
|
675 transition-delay: 0s; |
|
676 } |
|
677 } |
|
678 @media (min-width: 600px) { |
|
679 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { |
|
680 padding: 24px; |
|
681 } |
|
682 } |
|
683 @media (min-width: 600px) { |
|
684 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area { |
|
685 font-size: 15px !important; |
|
686 } |
|
687 } |
|
688 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:focus { |
|
689 border-color: var(--wp-admin-theme-color); |
|
690 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
|
691 position: relative; |
|
692 } |
|
693 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-webkit-input-placeholder { |
|
694 color: rgba(30, 30, 30, 0.62); |
|
695 } |
|
696 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-moz-placeholder { |
|
697 color: rgba(30, 30, 30, 0.62); |
|
698 opacity: 1; |
|
699 } |
|
700 textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-input-placeholder { |
|
701 color: rgba(30, 30, 30, 0.62); |
|
702 } |
|
703 |
|
704 .edit-site-global-styles-preview { |
|
705 display: flex; |
|
706 align-items: center; |
|
707 justify-content: center; |
|
708 line-height: 1; |
|
709 cursor: pointer; |
|
710 } |
|
711 |
|
712 .edit-site-global-styles-preview__iframe { |
|
713 max-width: 100%; |
|
714 display: block; |
|
715 } |
|
716 |
|
717 .edit-site-typography-panel__preview { |
|
718 display: flex; |
|
719 align-items: center; |
|
720 justify-content: center; |
|
721 min-height: 100px; |
|
722 margin-bottom: 16px; |
|
723 background: #f0f0f0; |
|
724 border-radius: 2px; |
|
725 } |
|
726 |
|
727 .edit-site-global-styles-screen-typography { |
|
728 margin: 16px; |
|
729 } |
|
730 |
|
731 .edit-site-global-styles-screen-typography__indicator { |
|
732 height: 24px; |
|
733 width: 24px; |
|
734 font-size: 14px; |
|
735 display: flex !important; |
|
736 align-items: center; |
|
737 justify-content: center; |
|
738 border-radius: 2px; |
|
739 } |
|
740 |
|
741 .edit-site-global-styles-screen-colors { |
|
742 margin: 16px; |
|
743 } |
|
744 .edit-site-global-styles-screen-colors .component-color-indicator { |
|
745 background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%); |
|
746 } |
|
747 |
|
748 .edit-site-global-styles-header__description, |
|
749 .edit-site-block-types-search { |
|
750 padding: 0 16px; |
|
751 } |
|
752 |
|
753 .edit-site-global-styles-subtitle { |
|
754 margin-bottom: 0 !important; |
|
755 text-transform: uppercase; |
|
756 font-weight: 500 !important; |
|
757 font-size: 11px !important; |
|
758 } |
|
759 |
|
760 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle { |
|
761 margin-left: 16px; |
|
762 margin-right: 16px; |
|
763 width: unset; |
|
764 } |
|
765 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle .components-toggle-group-control { |
|
766 min-height: 32px; |
|
767 } |
|
768 |
|
769 .edit-site-screen-text-color__control, |
|
770 .edit-site-screen-link-color__control, |
|
771 .edit-site-screen-background-color__control { |
|
772 padding: 16px; |
|
773 } |
|
774 |
|
775 .edit-site-global-styles-variations_item { |
|
776 box-sizing: border-box; |
|
777 } |
|
778 .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview { |
|
779 padding: 2px; |
|
780 border-radius: 2px; |
|
781 border: #e0e0e0 1px solid; |
|
782 } |
|
783 .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview { |
|
784 border: #1e1e1e 1px solid; |
|
785 } |
|
786 .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview { |
|
787 border: var(--wp-admin-theme-color) 1px solid; |
|
788 } |
|
789 .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview { |
|
790 border: var(--wp-admin-theme-color) 1px solid; |
|
791 } |
|
792 |
|
793 .edit-site-global-styles-icon-with-current-color { |
|
794 fill: currentColor; |
|
795 } |
|
796 |
|
797 .edit-site-global-styles__color-indicator-wrapper { |
|
798 height: 24px; |
|
799 } |
|
800 |
|
801 .edit-site-header { |
|
802 align-items: center; |
|
803 background-color: #fff; |
|
804 display: flex; |
|
805 height: 60px; |
|
806 box-sizing: border-box; |
|
807 width: 100%; |
|
808 justify-content: space-between; |
|
809 } |
|
810 body.is-fullscreen-mode .edit-site-header { |
|
811 padding-right: 60px; |
|
812 transition: padding-right 20ms linear; |
|
813 transition-delay: 80ms; |
|
814 } |
|
815 @media (prefers-reduced-motion: reduce) { |
|
816 body.is-fullscreen-mode .edit-site-header { |
|
817 transition-duration: 0s; |
|
818 transition-delay: 0s; |
|
819 } |
|
820 } |
|
821 .edit-site-header .edit-site-header_start, |
|
822 .edit-site-header .edit-site-header_end { |
|
823 display: flex; |
|
824 } |
|
825 .edit-site-header .edit-site-header_center { |
|
826 display: flex; |
|
827 align-items: center; |
|
828 height: 100%; |
|
829 flex-grow: 1; |
|
830 justify-content: center; |
|
831 min-width: 0; |
|
832 } |
|
833 .edit-site-header .edit-site-header_end { |
|
834 justify-content: flex-end; |
|
835 } |
|
836 |
|
837 body.is-navigation-sidebar-open .edit-site-header { |
|
838 padding-right: 0; |
|
839 transition: padding-right 20ms linear; |
|
840 transition-delay: 0ms; |
|
841 } |
|
842 @media (prefers-reduced-motion: reduce) { |
|
843 body.is-navigation-sidebar-open .edit-site-header { |
|
844 transition-duration: 0s; |
|
845 transition-delay: 0s; |
|
846 } |
|
847 } |
|
848 |
|
849 @media (max-width: 959px) { |
|
850 body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button, |
|
851 body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) { |
|
852 display: none; |
|
853 } |
|
854 body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button { |
|
855 margin-left: 0; |
|
856 } |
|
857 } |
|
858 .edit-site-header__toolbar { |
|
859 display: flex; |
|
860 align-items: center; |
|
861 padding-right: 8px; |
|
862 } |
|
863 @media (min-width: 600px) { |
|
864 .edit-site-header__toolbar { |
|
865 padding-right: 24px; |
|
866 } |
|
867 } |
|
868 @media (min-width: 1280px) { |
|
869 .edit-site-header__toolbar { |
|
870 padding-left: 8px; |
|
871 } |
|
872 } |
|
873 .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle { |
|
874 margin-left: 8px; |
|
875 min-width: 32px; |
|
876 width: 32px; |
|
877 height: 32px; |
|
878 padding: 0; |
|
879 } |
|
880 .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { |
|
881 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; |
|
882 } |
|
883 @media (prefers-reduced-motion: reduce) { |
|
884 .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg { |
|
885 transition-duration: 0s; |
|
886 transition-delay: 0s; |
|
887 } |
|
888 } |
|
889 .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg { |
|
890 transform: rotate(-45deg); |
|
891 } |
|
892 |
|
893 .edit-site-header__toolbar-switchers { |
|
894 align-items: center; |
|
895 display: flex; |
|
896 } |
|
897 |
|
898 .edit-site-header__toolbar-switchers-separator { |
|
899 margin: 0 -6px 0; |
|
900 } |
|
901 |
|
902 /** |
|
903 * Buttons in the Toolbar |
|
904 */ |
|
905 .edit-site-header__actions { |
|
906 display: inline-flex; |
|
907 align-items: center; |
|
908 padding-left: 4px; |
|
909 } |
|
910 .edit-site-header__actions .interface-pinned-items { |
|
911 display: none; |
|
912 } |
|
913 @media (min-width: 782px) { |
|
914 .edit-site-header__actions .interface-pinned-items { |
|
915 display: inline-flex; |
|
916 } |
|
917 } |
|
918 .edit-site-header__actions .editor-post-saved-state, |
|
919 .edit-site-header__actions .components-button.components-button { |
|
920 margin-left: 4px; |
|
921 } |
|
922 @media (min-width: 600px) { |
|
923 .edit-site-header__actions .editor-post-saved-state, |
|
924 .edit-site-header__actions .components-button.components-button { |
|
925 margin-left: 12px; |
|
926 } |
|
927 } |
|
928 .edit-site-header__actions .editor-post-saved-state, |
|
929 .edit-site-header__actions .components-button.is-tertiary { |
|
930 padding: 0 6px; |
|
931 } |
|
932 .edit-site-header__actions .edit-site-more-menu .components-button, |
|
933 .edit-site-header__actions .interface-pinned-items .components-button { |
|
934 margin-left: 0; |
|
935 } |
|
936 @media (min-width: 600px) { |
|
937 .edit-site-header__actions { |
|
938 padding-left: 16px; |
|
939 } |
|
940 } |
|
941 |
|
942 .edit-site-header__actions-more-menu { |
|
943 margin-right: -4px; |
|
944 } |
|
945 .edit-site-header__actions-more-menu .components-icon-button { |
|
946 padding: 8px 2px; |
|
947 width: auto; |
|
948 } |
|
949 @media (min-width: 600px) { |
|
950 .edit-site-header__actions-more-menu { |
|
951 margin-right: 4px; |
|
952 } |
|
953 .edit-site-header__actions-more-menu .components-icon-button { |
|
954 padding: 8px 4px; |
|
955 } |
|
956 } |
|
957 |
|
958 .show-icon-labels .edit-site-header .components-button.has-icon { |
|
959 width: auto; |
|
960 } |
|
961 .show-icon-labels .edit-site-header .components-button.has-icon svg { |
|
962 display: none; |
|
963 } |
|
964 .show-icon-labels .edit-site-header .components-button.has-icon::after { |
|
965 content: attr(aria-label); |
|
966 } |
|
967 .show-icon-labels .edit-site-header .components-button.has-icon[aria-disabled=true] { |
|
968 background-color: transparent; |
|
969 } |
|
970 .show-icon-labels .edit-site-header .is-tertiary:active { |
|
971 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color); |
|
972 background-color: transparent; |
|
973 } |
|
974 .show-icon-labels .edit-site-header .edit-site-save-button__button { |
|
975 padding-right: 6px; |
|
976 padding-left: 6px; |
|
977 margin-left: 4px; |
|
978 } |
|
979 .show-icon-labels .edit-site-header .block-editor-post-preview__button-toggle { |
|
980 margin-left: 4px; |
|
981 } |
|
982 .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle, |
|
983 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info { |
|
984 height: 36px; |
|
985 padding: 0 6px; |
|
986 } |
|
987 .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle::after, |
|
988 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after { |
|
989 content: none; |
|
990 } |
|
991 |
|
992 .edit-site-document-actions { |
|
993 display: flex; |
|
994 flex-direction: column; |
|
995 justify-content: center; |
|
996 padding: 0 8px; |
|
997 height: 100%; |
|
998 min-width: 0; |
|
999 } |
|
1000 .edit-site-document-actions .edit-site-document-actions__title-wrapper { |
|
1001 display: flex; |
|
1002 flex-direction: row; |
|
1003 justify-content: center; |
|
1004 align-items: center; |
|
1005 min-width: 0; |
|
1006 } |
|
1007 .edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown { |
|
1008 display: inline-flex; |
|
1009 margin-right: 4px; |
|
1010 } |
|
1011 .edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown .components-button { |
|
1012 min-width: 0; |
|
1013 padding: 0; |
|
1014 } |
|
1015 .edit-site-document-actions .edit-site-document-actions__title-wrapper > h1 { |
|
1016 margin: 0; |
|
1017 min-width: 0; |
|
1018 } |
|
1019 .edit-site-document-actions .edit-site-document-actions__title { |
|
1020 white-space: nowrap; |
|
1021 overflow: hidden; |
|
1022 text-overflow: ellipsis; |
|
1023 } |
|
1024 .edit-site-document-actions .edit-site-document-actions__secondary-item { |
|
1025 white-space: nowrap; |
|
1026 overflow: hidden; |
|
1027 text-overflow: ellipsis; |
|
1028 max-width: 0; |
|
1029 opacity: 0; |
|
1030 padding: 0; |
|
1031 transition: all ease 0.2s; |
|
1032 background: #e0e0e0; |
|
1033 border-radius: 2px; |
|
1034 } |
|
1035 @media (prefers-reduced-motion: reduce) { |
|
1036 .edit-site-document-actions .edit-site-document-actions__secondary-item { |
|
1037 transition-duration: 0s; |
|
1038 transition-delay: 0s; |
|
1039 } |
|
1040 } |
|
1041 .edit-site-document-actions.has-secondary-label .edit-site-document-actions__secondary-item { |
|
1042 opacity: 1; |
|
1043 padding: 0 4px; |
|
1044 max-width: 180px; |
|
1045 margin-right: 6px; |
|
1046 } |
|
1047 |
|
1048 .edit-site-document-actions__info-dropdown > .components-popover__content > div { |
|
1049 padding: 0; |
|
1050 min-width: 240px; |
|
1051 } |
|
1052 |
|
1053 .edit-site-navigation-toggle { |
|
1054 align-items: center; |
|
1055 background: #1e1e1e; |
|
1056 border-radius: 0; |
|
1057 display: flex; |
|
1058 position: absolute; |
|
1059 z-index: 31; |
|
1060 height: 60px; |
|
1061 width: 60px; |
|
1062 } |
|
1063 |
|
1064 .edit-site-navigation-toggle__button.components-button { |
|
1065 align-items: center; |
|
1066 background: #1e1e1e; |
|
1067 border-radius: 0; |
|
1068 color: #fff; |
|
1069 height: 61px; |
|
1070 width: 60px; |
|
1071 z-index: 1; |
|
1072 margin-bottom: -1px; |
|
1073 min-width: 60px; |
|
1074 } |
|
1075 .edit-site-navigation-toggle__button.components-button:hover, .edit-site-navigation-toggle__button.components-button:active { |
|
1076 color: #fff; |
|
1077 } |
|
1078 .edit-site-navigation-toggle__button.components-button:focus { |
|
1079 box-shadow: none; |
|
1080 } |
|
1081 .edit-site-navigation-toggle__button.components-button::before { |
|
1082 transition: box-shadow 0.1s ease; |
|
1083 content: ""; |
|
1084 display: block; |
|
1085 position: absolute; |
|
1086 top: 9px; |
|
1087 left: 9px; |
|
1088 bottom: 9px; |
|
1089 right: 9px; |
|
1090 border-radius: 4px; |
|
1091 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e; |
|
1092 } |
|
1093 @media (prefers-reduced-motion: reduce) { |
|
1094 .edit-site-navigation-toggle__button.components-button::before { |
|
1095 transition-duration: 0s; |
|
1096 transition-delay: 0s; |
|
1097 } |
|
1098 } |
|
1099 .edit-site-navigation-toggle__button.components-button:hover::before { |
|
1100 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575; |
|
1101 } |
|
1102 .edit-site-navigation-toggle__button.components-button.has-icon:hover::before { |
|
1103 box-shadow: none; |
|
1104 } |
|
1105 .edit-site-navigation-toggle__button.components-button:focus::before { |
|
1106 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
|
1107 } |
|
1108 .edit-site-navigation-toggle__button.components-button .edit-site-navigation-toggle__site-icon { |
|
1109 width: 36px; |
|
1110 height: 36px; |
|
1111 border-radius: 2px; |
|
1112 -o-object-fit: cover; |
|
1113 object-fit: cover; |
|
1114 margin-top: -1px; |
|
1115 } |
|
1116 |
|
1117 .edit-site-navigation-panel { |
|
1118 height: 100%; |
|
1119 position: relative; |
|
1120 width: 0; |
|
1121 overflow: hidden; |
|
1122 background: #1e1e1e; |
|
1123 color: #fff; |
|
1124 transition: width 100ms linear; |
|
1125 } |
|
1126 @media (prefers-reduced-motion: reduce) { |
|
1127 .edit-site-navigation-panel { |
|
1128 transition-duration: 0s; |
|
1129 transition-delay: 0s; |
|
1130 } |
|
1131 } |
|
1132 @media (min-width: 782px) { |
|
1133 .interface-interface-skeleton.has-footer .edit-site-navigation-panel { |
|
1134 height: calc(100% - 25px); |
|
1135 } |
|
1136 } |
|
1137 |
|
1138 .edit-site-navigation-panel__inner { |
|
1139 position: relative; |
|
1140 width: 300px; |
|
1141 height: 100%; |
|
1142 overflow: hidden; |
|
1143 visibility: hidden; |
|
1144 transition: visibility 100ms linear; |
|
1145 } |
|
1146 @media (prefers-reduced-motion: reduce) { |
|
1147 .edit-site-navigation-panel__inner { |
|
1148 transition-duration: 0s; |
|
1149 transition-delay: 0s; |
|
1150 } |
|
1151 } |
|
1152 |
|
1153 .edit-site-navigation-panel.is-open { |
|
1154 width: 300px; |
|
1155 } |
|
1156 .edit-site-navigation-panel.is-open .edit-site-navigation-panel__inner { |
|
1157 visibility: visible; |
|
1158 } |
|
1159 |
|
1160 .edit-site-navigation-panel__site-title-container { |
|
1161 height: 60px; |
|
1162 padding-right: 60px; |
|
1163 margin: 0 8px 0 16px; |
|
1164 display: flex; |
|
1165 align-items: center; |
|
1166 } |
|
1167 |
|
1168 .edit-site-navigation-panel__site-title { |
|
1169 font-style: normal; |
|
1170 font-weight: 600; |
|
1171 font-size: 14px; |
|
1172 /* Matches menu items */ |
|
1173 line-height: 20px; |
|
1174 color: #ddd; |
|
1175 display: -webkit-box; |
|
1176 -webkit-line-clamp: 2; |
|
1177 -webkit-box-orient: vertical; |
|
1178 overflow: hidden; |
|
1179 } |
|
1180 |
|
1181 .edit-site-navigation-panel__scroll-container { |
|
1182 overflow-x: hidden; |
|
1183 overflow-y: auto; |
|
1184 height: calc(100% - 60px); |
|
1185 } |
|
1186 |
|
1187 .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary { |
|
1188 height: 36px; |
|
1189 margin-top: 24px; |
|
1190 padding: 8px 8px 8px 16px; |
|
1191 } |
|
1192 .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary:focus:not(:disabled) { |
|
1193 border-bottom-color: transparent; |
|
1194 } |
|
1195 |
|
1196 .edit-site-navigation-panel__preview { |
|
1197 display: none; |
|
1198 border: 1px solid #ccc; |
|
1199 width: 300px; |
|
1200 padding: 16px; |
|
1201 background: #fff; |
|
1202 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); |
|
1203 border-radius: 2px; |
|
1204 position: absolute; |
|
1205 top: 73px; |
|
1206 right: 312px; |
|
1207 color: #1e1e1e; |
|
1208 z-index: 32; |
|
1209 } |
|
1210 @media (min-width: 782px) { |
|
1211 .edit-site-navigation-panel__preview { |
|
1212 display: block; |
|
1213 } |
|
1214 } |
|
1215 |
|
1216 .edit-site-navigation-panel__template-item { |
|
1217 display: block; |
|
1218 } |
|
1219 .edit-site-navigation-panel__template-item .components-button { |
|
1220 display: flex; |
|
1221 flex-direction: column; |
|
1222 align-items: flex-start; |
|
1223 justify-content: center; |
|
1224 height: auto; |
|
1225 min-height: 36px; |
|
1226 text-align: right; |
|
1227 padding-right: 16px; |
|
1228 padding-left: 16px; |
|
1229 color: inherit; |
|
1230 } |
|
1231 |
|
1232 .edit-site-navigation-panel__template-item-title { |
|
1233 font-size: 14px; |
|
1234 line-height: 20px; |
|
1235 } |
|
1236 .edit-site-navigation-panel__template-item-title em { |
|
1237 margin-left: 1ch; |
|
1238 } |
|
1239 |
|
1240 .edit-site-navigation-panel__template-parts .components-navigation__menu-title-heading { |
|
1241 text-transform: capitalize; |
|
1242 } |
|
1243 |
|
1244 .edit-site-navigation-panel__template-part-item .components-navigation__item-title { |
|
1245 text-transform: capitalize; |
|
1246 } |
|
1247 |
|
1248 .components-navigation__item + .edit-site-navigation-panel__template-item { |
|
1249 margin-top: 16px; |
|
1250 } |
|
1251 |
|
1252 .edit-site-navigation-panel__template-item + .edit-site-navigation-panel__template-item { |
|
1253 margin-top: 8px; |
|
1254 } |
|
1255 |
|
1256 .edit-site-navigation-panel__info-wrapper { |
|
1257 padding: 4px 0; |
|
1258 } |
|
1259 |
|
1260 .edit-site-navigation-panel__template-item-description { |
|
1261 padding-top: 8px; |
|
1262 font-size: 12px; |
|
1263 line-height: 16px; |
|
1264 } |
|
1265 |
|
1266 .edit-site-navigation-panel__new-template-dropdown { |
|
1267 margin: 0 12px 0 0; |
|
1268 } |
|
1269 .edit-site-navigation-panel__new-template-dropdown button { |
|
1270 margin: 0; |
|
1271 } |
|
1272 |
|
1273 @media (min-width: 600px) { |
|
1274 .edit-site-navigation-panel__new-template-popover { |
|
1275 min-width: 300px; |
|
1276 } |
|
1277 } |
|
1278 |
|
1279 .edit-site-list-header { |
|
1280 position: relative; |
|
1281 align-items: center; |
|
1282 background-color: #fff; |
|
1283 display: flex; |
|
1284 height: 60px; |
|
1285 box-sizing: border-box; |
|
1286 width: 100%; |
|
1287 justify-content: flex-end; |
|
1288 padding-left: 16px; |
|
1289 } |
|
1290 body.is-fullscreen-mode .edit-site-list-header { |
|
1291 padding-right: 60px; |
|
1292 transition: padding-right 20ms linear; |
|
1293 transition-delay: 80ms; |
|
1294 } |
|
1295 @media (prefers-reduced-motion: reduce) { |
|
1296 body.is-fullscreen-mode .edit-site-list-header { |
|
1297 transition-duration: 0s; |
|
1298 transition-delay: 0s; |
|
1299 } |
|
1300 } |
|
1301 .edit-site-list-header .edit-site-list-header__title { |
|
1302 position: absolute; |
|
1303 right: 0; |
|
1304 width: 100%; |
|
1305 text-align: center; |
|
1306 font-size: 20px; |
|
1307 padding: 0; |
|
1308 margin: 0; |
|
1309 } |
|
1310 |
|
1311 .edit-site-list-header__right { |
|
1312 position: relative; |
|
1313 } |
|
1314 |
|
1315 .edit-site .edit-site-list .interface-interface-skeleton__editor { |
|
1316 min-width: 100%; |
|
1317 } |
|
1318 @media (min-width: 782px) { |
|
1319 .edit-site .edit-site-list .interface-interface-skeleton__editor { |
|
1320 min-width: 0; |
|
1321 } |
|
1322 } |
|
1323 .edit-site .edit-site-list .interface-interface-skeleton__content { |
|
1324 background: #fff; |
|
1325 align-items: center; |
|
1326 padding: 16px; |
|
1327 } |
|
1328 @media (min-width: 782px) { |
|
1329 .edit-site .edit-site-list .interface-interface-skeleton__content { |
|
1330 padding: 72px; |
|
1331 } |
|
1332 } |
|
1333 |
|
1334 .edit-site-list-table { |
|
1335 width: 100%; |
|
1336 border: 1px solid #ddd; |
|
1337 border-radius: 2px; |
|
1338 margin: 0; |
|
1339 overflow: hidden; |
|
1340 border-spacing: 0; |
|
1341 max-width: 960px; |
|
1342 } |
|
1343 .edit-site-list-table tr { |
|
1344 display: flex; |
|
1345 align-items: center; |
|
1346 padding: 16px; |
|
1347 box-sizing: border-box; |
|
1348 border-top: 1px solid #f0f0f0; |
|
1349 margin: 0; |
|
1350 } |
|
1351 .edit-site-list-table tr:first-child { |
|
1352 border-top: 0; |
|
1353 } |
|
1354 @media (min-width: 782px) { |
|
1355 .edit-site-list-table tr { |
|
1356 padding: 24px 32px; |
|
1357 } |
|
1358 } |
|
1359 .edit-site-list-table tr .edit-site-list-table-column:nth-child(1) { |
|
1360 width: calc(60% - 18px); |
|
1361 padding-left: 24px; |
|
1362 } |
|
1363 .edit-site-list-table tr .edit-site-list-table-column:nth-child(1) a { |
|
1364 display: inline-block; |
|
1365 text-decoration: none; |
|
1366 font-weight: 500; |
|
1367 margin-bottom: 4px; |
|
1368 } |
|
1369 .edit-site-list-table tr .edit-site-list-table-column:nth-child(2) { |
|
1370 width: calc(40% - 18px); |
|
1371 } |
|
1372 .edit-site-list-table tr .edit-site-list-table-column:nth-child(3) { |
|
1373 min-width: 36px; |
|
1374 flex-shrink: 0; |
|
1375 } |
|
1376 .edit-site-list-table tr.edit-site-list-table-head { |
|
1377 font-size: 16px; |
|
1378 font-weight: 600; |
|
1379 text-align: right; |
|
1380 color: #1e1e1e; |
|
1381 border-top: none; |
|
1382 border-bottom: 1px solid #ddd; |
|
1383 } |
|
1384 .edit-site-list-table tr.edit-site-list-table-head th { |
|
1385 font-weight: inherit; |
|
1386 } |
|
1387 |
|
1388 @media (min-width: 782px) { |
|
1389 .edit-site-list.is-navigation-open .components-snackbar-list { |
|
1390 margin-right: 300px; |
|
1391 } |
|
1392 } |
|
1393 |
|
1394 @media (min-width: 782px) { |
|
1395 .edit-site-list__rename-modal .components-base-control { |
|
1396 width: 320px; |
|
1397 } |
|
1398 } |
|
1399 .edit-site-list__rename-modal .components-modal__header { |
|
1400 border-bottom: none; |
|
1401 } |
|
1402 .edit-site-list__rename-modal .components-modal__content::before { |
|
1403 margin-bottom: 4px; |
|
1404 } |
|
1405 |
|
1406 .edit-site-list__rename-modal-actions { |
|
1407 margin-top: 12px; |
|
1408 } |
|
1409 |
|
1410 .edit-site-template__actions button:not(:last-child) { |
|
1411 margin-left: 8px; |
|
1412 } |
|
1413 |
|
1414 .edit-site-list-added-by__icon { |
|
1415 display: flex; |
|
1416 flex-shrink: 0; |
|
1417 position: relative; |
|
1418 align-items: center; |
|
1419 justify-content: center; |
|
1420 width: 32px; |
|
1421 height: 32px; |
|
1422 background: #2f2f2f; |
|
1423 border-radius: 100%; |
|
1424 } |
|
1425 .edit-site-list-added-by__icon svg { |
|
1426 fill: #fff; |
|
1427 } |
|
1428 .edit-site-list-added-by__icon.is-customized::after { |
|
1429 position: absolute; |
|
1430 content: ""; |
|
1431 background: var(--wp-admin-theme-color); |
|
1432 height: 8px; |
|
1433 width: 8px; |
|
1434 outline: 2px solid #fff; |
|
1435 border-radius: 100%; |
|
1436 top: -1px; |
|
1437 left: -1px; |
|
1438 } |
|
1439 |
|
1440 .edit-site-list-added-by__avatar { |
|
1441 flex-shrink: 0; |
|
1442 overflow: hidden; |
|
1443 border-radius: 100%; |
|
1444 background: #2f2f2f; |
|
1445 width: 32px; |
|
1446 height: 32px; |
|
1447 } |
|
1448 .edit-site-list-added-by__avatar img { |
|
1449 width: 32px; |
|
1450 height: 32px; |
|
1451 -o-object-fit: cover; |
|
1452 object-fit: cover; |
|
1453 opacity: 0; |
|
1454 transition: opacity 0.1s linear; |
|
1455 } |
|
1456 @media (prefers-reduced-motion: reduce) { |
|
1457 .edit-site-list-added-by__avatar img { |
|
1458 transition-duration: 0s; |
|
1459 transition-delay: 0s; |
|
1460 } |
|
1461 } |
|
1462 .edit-site-list-added-by__avatar.is-loaded img { |
|
1463 opacity: 1; |
|
1464 } |
|
1465 |
|
1466 .edit-site-new-template-dropdown .components-dropdown-menu__toggle { |
|
1467 padding: 6px 12px; |
|
1468 } |
|
1469 @media (min-width: 600px) { |
|
1470 .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover { |
|
1471 min-width: 300px; |
|
1472 } |
|
1473 } |
|
1474 |
|
1475 .edit-site-sidebar { |
|
1476 width: 280px; |
|
1477 } |
|
1478 .edit-site-sidebar > .components-panel { |
|
1479 border-right: 0; |
|
1480 border-left: 0; |
|
1481 margin-bottom: -1px; |
|
1482 margin-top: -1px; |
|
1483 } |
|
1484 .edit-site-sidebar > .components-panel > .components-panel__header { |
|
1485 background: #f0f0f0; |
|
1486 } |
|
1487 .edit-site-sidebar .block-editor-block-inspector__card { |
|
1488 margin: 0; |
|
1489 } |
|
1490 |
|
1491 .edit-site-global-styles-sidebar { |
|
1492 display: flex; |
|
1493 flex-direction: column; |
|
1494 min-height: 100%; |
|
1495 } |
|
1496 .edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider { |
|
1497 display: flex; |
|
1498 flex-direction: column; |
|
1499 flex: 1; |
|
1500 } |
|
1501 .edit-site-global-styles-sidebar__navigator-screen { |
|
1502 flex: 1; |
|
1503 } |
|
1504 |
|
1505 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { |
|
1506 margin-right: 0; |
|
1507 } |
|
1508 |
|
1509 .edit-site-global-styles-sidebar__reset-button.components-button { |
|
1510 margin-right: auto; |
|
1511 } |
|
1512 |
|
1513 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading { |
|
1514 font-size: 15.6px; |
|
1515 font-weight: 500; |
|
1516 } |
|
1517 |
|
1518 .edit-site-global-styles-sidebar .components-navigation__item > button span { |
|
1519 font-weight: 500; |
|
1520 } |
|
1521 |
|
1522 .edit-site-typography-panel, |
|
1523 .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { |
|
1524 border: 0; |
|
1525 } |
|
1526 |
|
1527 .edit-site-global-styles-sidebar .components-tools-panel-item.single-column { |
|
1528 grid-column: span 1; |
|
1529 } |
|
1530 |
|
1531 .edit-site-global-styles-sidebar__blocks-group { |
|
1532 padding-top: 24px; |
|
1533 border-top: 1px solid #e0e0e0; |
|
1534 } |
|
1535 |
|
1536 .edit-site-global-styles-sidebar__blocks-group-help { |
|
1537 padding: 0 16px; |
|
1538 } |
|
1539 |
|
1540 .edit-site-global-styles-color-palette-panel, |
|
1541 .edit-site-global-styles-gradient-palette-panel { |
|
1542 padding: 16px; |
|
1543 } |
|
1544 |
|
1545 .edit-site-global-styles-sidebar__beta { |
|
1546 display: inline-flex; |
|
1547 margin-right: 8px; |
|
1548 padding: 0 8px; |
|
1549 height: 24px; |
|
1550 border-radius: 2px; |
|
1551 background-color: #1e1e1e; |
|
1552 color: #fff; |
|
1553 align-items: center; |
|
1554 font-size: 12px; |
|
1555 line-height: 1; |
|
1556 } |
|
1557 |
|
1558 .components-panel__header.edit-site-sidebar__panel-tabs { |
|
1559 justify-content: flex-start; |
|
1560 padding-right: 0; |
|
1561 padding-left: 16px; |
|
1562 border-top: 0; |
|
1563 margin-top: 0; |
|
1564 } |
|
1565 .components-panel__header.edit-site-sidebar__panel-tabs ul { |
|
1566 display: flex; |
|
1567 } |
|
1568 .components-panel__header.edit-site-sidebar__panel-tabs li { |
|
1569 margin: 0; |
|
1570 } |
|
1571 .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon { |
|
1572 display: none; |
|
1573 margin: 0 auto 0 0; |
|
1574 padding: 0; |
|
1575 min-width: 24px; |
|
1576 height: 24px; |
|
1577 } |
|
1578 @media (min-width: 782px) { |
|
1579 .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon { |
|
1580 display: flex; |
|
1581 } |
|
1582 } |
|
1583 |
|
1584 .components-button.edit-site-sidebar__panel-tab { |
|
1585 border-radius: 0; |
|
1586 height: 48px; |
|
1587 background: transparent; |
|
1588 border: none; |
|
1589 box-shadow: none; |
|
1590 cursor: pointer; |
|
1591 display: inline-block; |
|
1592 padding: 3px 15px; |
|
1593 margin-right: 0; |
|
1594 font-weight: 500; |
|
1595 } |
|
1596 .components-button.edit-site-sidebar__panel-tab::after { |
|
1597 content: attr(data-label); |
|
1598 display: block; |
|
1599 font-weight: 600; |
|
1600 height: 0; |
|
1601 overflow: hidden; |
|
1602 speak: none; |
|
1603 visibility: hidden; |
|
1604 } |
|
1605 .components-button.edit-site-sidebar__panel-tab.is-active { |
|
1606 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color); |
|
1607 position: relative; |
|
1608 z-index: 1; |
|
1609 } |
|
1610 .components-button.edit-site-sidebar__panel-tab.is-active::before { |
|
1611 content: ""; |
|
1612 position: absolute; |
|
1613 top: 0; |
|
1614 bottom: 1px; |
|
1615 left: 0; |
|
1616 right: 0; |
|
1617 border-bottom: 4px solid transparent; |
|
1618 } |
|
1619 .components-button.edit-site-sidebar__panel-tab:focus { |
|
1620 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); |
|
1621 position: relative; |
|
1622 z-index: 1; |
|
1623 } |
|
1624 .components-button.edit-site-sidebar__panel-tab.is-active:focus { |
|
1625 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color); |
|
1626 } |
|
1627 |
|
1628 @keyframes loadingpulse { |
|
1629 0% { |
|
1630 opacity: 1; |
|
1631 } |
|
1632 50% { |
|
1633 opacity: 0.5; |
|
1634 } |
|
1635 100% { |
|
1636 opacity: 1; |
|
1637 } |
|
1638 } |
|
1639 .edit-site-navigation-inspector { |
|
1640 padding: 16px; |
|
1641 } |
|
1642 .edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents { |
|
1643 align-items: flex-start; |
|
1644 white-space: normal; |
|
1645 } |
|
1646 .edit-site-navigation-inspector .block-editor-list-view-block__title { |
|
1647 margin-top: 3px; |
|
1648 } |
|
1649 .edit-site-navigation-inspector .block-editor-list-view-block__menu-cell { |
|
1650 padding-left: 0; |
|
1651 } |
|
1652 |
|
1653 .edit-site-navigation-inspector__placeholder { |
|
1654 padding: 8px; |
|
1655 margin: 8px; |
|
1656 background-color: #f0f0f0; |
|
1657 animation: loadingpulse 1s linear infinite; |
|
1658 animation-delay: 0.5s; |
|
1659 } |
|
1660 .edit-site-navigation-inspector__placeholder.is-child { |
|
1661 margin-right: 24px; |
|
1662 width: 50%; |
|
1663 } |
|
1664 |
|
1665 .edit-site-template-card { |
|
1666 display: flex; |
|
1667 align-items: flex-start; |
|
1668 } |
|
1669 |
|
1670 .edit-site-template-card__content { |
|
1671 flex-grow: 1; |
|
1672 margin-bottom: 4px; |
|
1673 } |
|
1674 |
|
1675 .edit-site-template-card__title { |
|
1676 font-weight: 500; |
|
1677 line-height: 24px; |
|
1678 } |
|
1679 .edit-site-template-card__title.edit-site-template-card__title { |
|
1680 margin: 0 0 4px; |
|
1681 } |
|
1682 |
|
1683 .edit-site-template-card__description { |
|
1684 font-size: 13px; |
|
1685 margin: 0 0 16px; |
|
1686 } |
|
1687 |
|
1688 .edit-site-template-card__icon { |
|
1689 flex: 0 0 24px; |
|
1690 margin-left: 12px; |
|
1691 width: 24px; |
|
1692 height: 24px; |
|
1693 } |
|
1694 |
|
1695 h3.edit-site-template-card__template-areas-title { |
|
1696 font-weight: 500; |
|
1697 margin: 0 0 8px; |
|
1698 } |
|
1699 |
|
1700 .edit-site-template-card__template-areas-list { |
|
1701 margin: 0; |
|
1702 } |
|
1703 .edit-site-template-card__template-areas-list > li { |
|
1704 margin: 0; |
|
1705 } |
|
1706 |
|
1707 .edit-site-template-card__template-areas-item { |
|
1708 width: 100%; |
|
1709 } |
|
1710 .edit-site-template-card__template-areas-item.components-button.has-icon { |
|
1711 padding: 0; |
|
1712 } |
|
1713 |
|
1714 html #wpadminbar { |
|
1715 display: none; |
|
1716 } |
|
1717 |
|
1718 html.wp-toolbar { |
|
1719 padding-top: 0; |
|
1720 } |
|
1721 |
|
1722 .edit-site-editor__toggle-save-panel { |
|
1723 z-index: 100000; |
|
1724 position: fixed !important; |
|
1725 top: -9999em; |
|
1726 bottom: auto; |
|
1727 right: auto; |
|
1728 left: 0; |
|
1729 width: 280px; |
|
1730 background-color: #fff; |
|
1731 border: 1px dotted #ddd; |
|
1732 height: auto !important; |
|
1733 padding: 24px; |
|
1734 display: flex; |
|
1735 justify-content: center; |
|
1736 } |
|
1737 .interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel, .interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel { |
|
1738 top: auto; |
|
1739 bottom: 0; |
|
1740 } |
|
1741 |
|
1742 .edit-site-visual-editor { |
|
1743 position: relative; |
|
1744 height: 100%; |
|
1745 display: block; |
|
1746 } |
|
1747 .edit-site-visual-editor iframe { |
|
1748 display: block; |
|
1749 width: 100%; |
|
1750 height: 100%; |
|
1751 background-color: #fff; |
|
1752 } |
|
1753 |
|
1754 .edit-site .components-editor-notices__snackbar { |
|
1755 position: fixed; |
|
1756 left: 0; |
|
1757 bottom: 40px; |
|
1758 padding-right: 16px; |
|
1759 padding-left: 16px; |
|
1760 } |
|
1761 |
|
1762 .edit-site .components-editor-notices__snackbar { |
|
1763 /* Set left position when auto-fold is not on the body element. */ |
|
1764 right: 0; |
|
1765 } |
|
1766 @media (min-width: 783px) { |
|
1767 .edit-site .components-editor-notices__snackbar { |
|
1768 right: 160px; |
|
1769 } |
|
1770 } |
|
1771 |
|
1772 .auto-fold .edit-site .components-editor-notices__snackbar { |
|
1773 /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ |
|
1774 } |
|
1775 @media (min-width: 783px) { |
|
1776 .auto-fold .edit-site .components-editor-notices__snackbar { |
|
1777 right: 36px; |
|
1778 } |
|
1779 } |
|
1780 @media (min-width: 961px) { |
|
1781 .auto-fold .edit-site .components-editor-notices__snackbar { |
|
1782 right: 160px; |
|
1783 } |
|
1784 } |
|
1785 |
|
1786 /* Sidebar manually collapsed. */ |
|
1787 .folded .edit-site .components-editor-notices__snackbar { |
|
1788 right: 0; |
|
1789 } |
|
1790 @media (min-width: 783px) { |
|
1791 .folded .edit-site .components-editor-notices__snackbar { |
|
1792 right: 36px; |
|
1793 } |
|
1794 } |
|
1795 |
|
1796 body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar { |
|
1797 right: 0 !important; |
|
1798 } |
|
1799 |
|
1800 .edit-site-template-details .edit-site-template-details__group { |
|
1801 margin: 0; |
|
1802 padding: 16px; |
|
1803 } |
|
1804 .edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group { |
|
1805 border-top: 1px solid #ccc; |
|
1806 } |
|
1807 .edit-site-template-details .edit-site-template-details__title { |
|
1808 margin: 0; |
|
1809 } |
|
1810 .edit-site-template-details .edit-site-template-details__description { |
|
1811 margin: 12px 0 0; |
|
1812 color: #757575; |
|
1813 } |
|
1814 .edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas { |
|
1815 padding: 8px; |
|
1816 } |
|
1817 .edit-site-template-details .edit-site-template-details__template-areas-item { |
|
1818 position: relative; |
|
1819 } |
|
1820 .edit-site-template-details .edit-site-template-details__template-areas-item .edit-site-template-details__template-areas-item-more { |
|
1821 position: absolute; |
|
1822 left: 0; |
|
1823 top: 0; |
|
1824 bottom: 0; |
|
1825 margin: auto 0; |
|
1826 } |
|
1827 .edit-site-template-details .edit-site-template-details__revert { |
|
1828 padding: 12px 8px; |
|
1829 } |
|
1830 .edit-site-template-details .edit-site-template-details__revert-button { |
|
1831 height: auto; |
|
1832 padding: 4px 8px; |
|
1833 text-align: right; |
|
1834 } |
|
1835 .edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled) { |
|
1836 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; |
|
1837 } |
|
1838 .edit-site-template-details .edit-site-template-details__show-all-button.components-button { |
|
1839 display: flex; |
|
1840 justify-content: center; |
|
1841 background: #1e1e1e; |
|
1842 color: #fff; |
|
1843 width: 100%; |
|
1844 height: 44px; |
|
1845 border-radius: 0; |
|
1846 } |
|
1847 .edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover { |
|
1848 color: #fff; |
|
1849 } |
|
1850 .edit-site-template-details .edit-site-template-details__show-all-button.components-button:active { |
|
1851 color: #ccc; |
|
1852 } |
|
1853 .edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled) { |
|
1854 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff; |
|
1855 } |
|
1856 |
|
1857 .edit-site-create-template-part-modal { |
|
1858 z-index: 1000001; |
|
1859 } |
|
1860 @media (min-width: 600px) { |
|
1861 .edit-site-create-template-part-modal .components-modal__frame { |
|
1862 max-width: 500px; |
|
1863 } |
|
1864 } |
|
1865 |
|
1866 .edit-site-create-template-part-modal__modal-actions { |
|
1867 padding-top: 12px; |
|
1868 } |
|
1869 |
|
1870 .edit-site-create-template-part-modal__area-base-control .components-base-control__label { |
|
1871 margin: 16px 0 8px; |
|
1872 cursor: auto; |
|
1873 } |
|
1874 |
|
1875 .edit-site-create-template-part-modal__area-radio-group { |
|
1876 width: 100%; |
|
1877 border: 1px solid #757575; |
|
1878 border-radius: 2px; |
|
1879 } |
|
1880 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio { |
|
1881 display: block; |
|
1882 width: 100%; |
|
1883 height: 100%; |
|
1884 text-align: right; |
|
1885 padding: 12px; |
|
1886 } |
|
1887 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover { |
|
1888 margin: 0; |
|
1889 background-color: inherit; |
|
1890 border-bottom: 1px solid #757575; |
|
1891 border-radius: 0; |
|
1892 } |
|
1893 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:focus), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:not(:focus), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:not(:focus) { |
|
1894 box-shadow: none; |
|
1895 } |
|
1896 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:focus, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:focus, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:focus { |
|
1897 border-bottom: 1px solid #fff; |
|
1898 } |
|
1899 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:last-of-type, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:last-of-type, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:last-of-type { |
|
1900 border-bottom: none; |
|
1901 } |
|
1902 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:hover), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio[aria-checked=true] { |
|
1903 color: #1e1e1e; |
|
1904 cursor: auto; |
|
1905 } |
|
1906 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:hover) .edit-site-create-template-part-modal__option-label div, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio[aria-checked=true] .edit-site-create-template-part-modal__option-label div { |
|
1907 color: #949494; |
|
1908 } |
|
1909 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__option-label { |
|
1910 padding-top: 4px; |
|
1911 white-space: normal; |
|
1912 } |
|
1913 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__option-label div { |
|
1914 padding-top: 4px; |
|
1915 font-size: 12px; |
|
1916 } |
|
1917 .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__checkbox { |
|
1918 margin-right: auto; |
|
1919 min-width: 24px; |
|
1920 } |
|
1921 |
|
1922 .edit-site-editor__inserter-panel, |
|
1923 .edit-site-editor__list-view-panel { |
|
1924 height: 100%; |
|
1925 display: flex; |
|
1926 flex-direction: column; |
|
1927 } |
|
1928 |
|
1929 .edit-site-editor__list-view-panel { |
|
1930 min-width: 350px; |
|
1931 } |
|
1932 |
|
1933 .edit-site-editor__inserter-panel-header { |
|
1934 padding-top: 8px; |
|
1935 padding-left: 8px; |
|
1936 display: flex; |
|
1937 justify-content: flex-end; |
|
1938 } |
|
1939 |
|
1940 .edit-site-editor__inserter-panel-content, |
|
1941 .edit-site-editor__list-view-panel-content { |
|
1942 height: calc(100% - 36px - 8px); |
|
1943 } |
|
1944 |
|
1945 @media (min-width: 782px) { |
|
1946 .edit-site-editor__inserter-panel-content { |
|
1947 height: 100%; |
|
1948 } |
|
1949 } |
|
1950 |
|
1951 .edit-site-editor__list-view-panel-header { |
|
1952 align-items: center; |
|
1953 border-bottom: 1px solid #ddd; |
|
1954 display: flex; |
|
1955 justify-content: space-between; |
|
1956 height: 48px; |
|
1957 padding-right: 16px; |
|
1958 padding-left: 4px; |
|
1959 } |
|
1960 |
|
1961 .edit-site-editor__list-view-panel-content { |
|
1962 overflow-y: auto; |
|
1963 padding: 8px; |
|
1964 } |
|
1965 |
|
1966 .edit-site-welcome-guide { |
|
1967 width: 312px; |
|
1968 } |
|
1969 .edit-site-welcome-guide__image { |
|
1970 background: #00a0d2; |
|
1971 margin: 0 0 16px; |
|
1972 } |
|
1973 .edit-site-welcome-guide__image > img { |
|
1974 display: block; |
|
1975 max-width: 100%; |
|
1976 -o-object-fit: cover; |
|
1977 object-fit: cover; |
|
1978 } |
|
1979 .edit-site-welcome-guide__heading { |
|
1980 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
1981 font-size: 24px; |
|
1982 line-height: 1.4; |
|
1983 margin: 16px 0 16px 0; |
|
1984 padding: 0 32px; |
|
1985 } |
|
1986 .edit-site-welcome-guide__text { |
|
1987 font-size: 13px; |
|
1988 line-height: 1.4; |
|
1989 margin: 0 0 16px 0; |
|
1990 padding: 0 32px; |
|
1991 } |
|
1992 .edit-site-welcome-guide__text img { |
|
1993 vertical-align: bottom; |
|
1994 } |
|
1995 .edit-site-welcome-guide__inserter-icon { |
|
1996 margin: 0 4px; |
|
1997 vertical-align: text-top; |
|
1998 } |
|
1999 |
|
2000 .edit-site-keyboard-shortcut-help-modal__section { |
|
2001 margin: 0 0 2rem 0; |
|
2002 } |
|
2003 .edit-site-keyboard-shortcut-help-modal__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list { |
|
2004 margin-top: -25px; |
|
2005 } |
|
2006 .edit-site-keyboard-shortcut-help-modal__section-title { |
|
2007 font-size: 0.9rem; |
|
2008 font-weight: 600; |
|
2009 } |
|
2010 .edit-site-keyboard-shortcut-help-modal__shortcut { |
|
2011 display: flex; |
|
2012 align-items: baseline; |
|
2013 padding: 0.6rem 0; |
|
2014 border-top: 1px solid #ddd; |
|
2015 margin-bottom: 0; |
|
2016 } |
|
2017 .edit-site-keyboard-shortcut-help-modal__shortcut:last-child { |
|
2018 border-bottom: 1px solid #ddd; |
|
2019 } |
|
2020 .edit-site-keyboard-shortcut-help-modal__shortcut:empty { |
|
2021 display: none; |
|
2022 } |
|
2023 .edit-site-keyboard-shortcut-help-modal__shortcut-term { |
|
2024 font-weight: 600; |
|
2025 margin: 0 1rem 0 0; |
|
2026 text-align: left; |
|
2027 } |
|
2028 .edit-site-keyboard-shortcut-help-modal__shortcut-description { |
|
2029 flex: 1; |
|
2030 margin: 0; |
|
2031 flex-basis: auto; |
|
2032 } |
|
2033 .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination { |
|
2034 display: block; |
|
2035 background: none; |
|
2036 margin: 0; |
|
2037 padding: 0; |
|
2038 } |
|
2039 .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination { |
|
2040 margin-top: 10px; |
|
2041 } |
|
2042 .edit-site-keyboard-shortcut-help-modal__shortcut-key { |
|
2043 padding: 0.25rem 0.5rem; |
|
2044 border-radius: 8%; |
|
2045 margin: 0 0.2rem 0 0.2rem; |
|
2046 } |
|
2047 .edit-site-keyboard-shortcut-help-modal__shortcut-key:last-child { |
|
2048 margin: 0 0.2rem 0 0; |
|
2049 } |
|
2050 |
|
2051 html.wp-toolbar { |
|
2052 background: #fff; |
|
2053 } |
|
2054 |
|
2055 body.appearance_page_gutenberg-edit-site, |
|
2056 body.site-editor-php { |
|
2057 background: #fff; |
|
2058 /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well. |
|
2059 Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */ |
|
2060 } |
|
2061 body.appearance_page_gutenberg-edit-site #wpcontent, |
|
2062 body.site-editor-php #wpcontent { |
|
2063 padding-right: 0; |
|
2064 } |
|
2065 body.appearance_page_gutenberg-edit-site #wpbody-content, |
|
2066 body.site-editor-php #wpbody-content { |
|
2067 padding-bottom: 0; |
|
2068 } |
|
2069 body.appearance_page_gutenberg-edit-site #wpbody-content > div:not(.edit-site):not(#screen-meta), |
|
2070 body.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) { |
|
2071 display: none; |
|
2072 } |
|
2073 body.appearance_page_gutenberg-edit-site #wpfooter, |
|
2074 body.site-editor-php #wpfooter { |
|
2075 display: none; |
|
2076 } |
|
2077 body.appearance_page_gutenberg-edit-site .a11y-speak-region, |
|
2078 body.site-editor-php .a11y-speak-region { |
|
2079 right: -1px; |
|
2080 top: -1px; |
|
2081 } |
|
2082 body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu::after, |
|
2083 body.appearance_page_gutenberg-edit-site ul#adminmenu > li.current > a.current::after, |
|
2084 body.site-editor-php ul#adminmenu a.wp-has-current-submenu::after, |
|
2085 body.site-editor-php ul#adminmenu > li.current > a.current::after { |
|
2086 border-left-color: #fff; |
|
2087 } |
|
2088 body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type, |
|
2089 body.site-editor-php .media-frame select.attachment-filters:last-of-type { |
|
2090 width: auto; |
|
2091 max-width: 100%; |
|
2092 } |
|
2093 |
|
2094 .edit-site, |
|
2095 .components-modal__frame { |
|
2096 box-sizing: border-box; |
|
2097 } |
|
2098 .edit-site *, |
|
2099 .edit-site *::before, |
|
2100 .edit-site *::after, |
|
2101 .components-modal__frame *, |
|
2102 .components-modal__frame *::before, |
|
2103 .components-modal__frame *::after { |
|
2104 box-sizing: inherit; |
|
2105 } |
|
2106 |
|
2107 @media (min-width: 600px) { |
|
2108 .edit-site { |
|
2109 bottom: 0; |
|
2110 right: 0; |
|
2111 min-height: 100vh; |
|
2112 position: absolute; |
|
2113 left: 0; |
|
2114 top: 0; |
|
2115 } |
|
2116 } |
|
2117 .edit-site .interface-interface-skeleton { |
|
2118 top: 0; |
|
2119 } |
|
2120 .edit-site .interface-complementary-area__pin-unpin-item.components-button { |
|
2121 display: none; |
|
2122 } |
|
2123 .edit-site .interface-interface-skeleton__content { |
|
2124 background-color: #2f2f2f; |
|
2125 } |
|
2126 |
|
2127 /** |
|
2128 * Animations |
|
2129 */ |
|
2130 @keyframes edit-post__fade-in-animation { |
|
2131 from { |
|
2132 opacity: 0; |
|
2133 } |
|
2134 to { |
|
2135 opacity: 1; |
|
2136 } |
|
2137 } |
|
2138 body.admin-color-light { |
|
2139 --wp-admin-theme-color: #0085ba; |
|
2140 --wp-admin-theme-color--rgb: 0, 133, 186; |
|
2141 --wp-admin-theme-color-darker-10: #0073a1; |
|
2142 --wp-admin-theme-color-darker-10--rgb: 0, 115, 161; |
|
2143 --wp-admin-theme-color-darker-20: #006187; |
|
2144 --wp-admin-theme-color-darker-20--rgb: 0, 97, 135; |
|
2145 --wp-admin-border-width-focus: 2px; |
|
2146 } |
|
2147 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2148 body.admin-color-light { |
|
2149 --wp-admin-border-width-focus: 1.5px; |
|
2150 } |
|
2151 } |
|
2152 |
|
2153 body.admin-color-modern { |
|
2154 --wp-admin-theme-color: #3858e9; |
|
2155 --wp-admin-theme-color--rgb: 56, 88, 233; |
|
2156 --wp-admin-theme-color-darker-10: #2145e6; |
|
2157 --wp-admin-theme-color-darker-10--rgb: 33, 69, 230; |
|
2158 --wp-admin-theme-color-darker-20: #183ad6; |
|
2159 --wp-admin-theme-color-darker-20--rgb: 24, 58, 214; |
|
2160 --wp-admin-border-width-focus: 2px; |
|
2161 } |
|
2162 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2163 body.admin-color-modern { |
|
2164 --wp-admin-border-width-focus: 1.5px; |
|
2165 } |
|
2166 } |
|
2167 |
|
2168 body.admin-color-blue { |
|
2169 --wp-admin-theme-color: #096484; |
|
2170 --wp-admin-theme-color--rgb: 9, 100, 132; |
|
2171 --wp-admin-theme-color-darker-10: #07526c; |
|
2172 --wp-admin-theme-color-darker-10--rgb: 7, 82, 108; |
|
2173 --wp-admin-theme-color-darker-20: #064054; |
|
2174 --wp-admin-theme-color-darker-20--rgb: 6, 64, 84; |
|
2175 --wp-admin-border-width-focus: 2px; |
|
2176 } |
|
2177 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2178 body.admin-color-blue { |
|
2179 --wp-admin-border-width-focus: 1.5px; |
|
2180 } |
|
2181 } |
|
2182 |
|
2183 body.admin-color-coffee { |
|
2184 --wp-admin-theme-color: #46403c; |
|
2185 --wp-admin-theme-color--rgb: 70, 64, 60; |
|
2186 --wp-admin-theme-color-darker-10: #383330; |
|
2187 --wp-admin-theme-color-darker-10--rgb: 56, 51, 48; |
|
2188 --wp-admin-theme-color-darker-20: #2b2724; |
|
2189 --wp-admin-theme-color-darker-20--rgb: 43, 39, 36; |
|
2190 --wp-admin-border-width-focus: 2px; |
|
2191 } |
|
2192 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2193 body.admin-color-coffee { |
|
2194 --wp-admin-border-width-focus: 1.5px; |
|
2195 } |
|
2196 } |
|
2197 |
|
2198 body.admin-color-ectoplasm { |
|
2199 --wp-admin-theme-color: #523f6d; |
|
2200 --wp-admin-theme-color--rgb: 82, 63, 109; |
|
2201 --wp-admin-theme-color-darker-10: #46365d; |
|
2202 --wp-admin-theme-color-darker-10--rgb: 70, 54, 93; |
|
2203 --wp-admin-theme-color-darker-20: #3a2c4d; |
|
2204 --wp-admin-theme-color-darker-20--rgb: 58, 44, 77; |
|
2205 --wp-admin-border-width-focus: 2px; |
|
2206 } |
|
2207 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2208 body.admin-color-ectoplasm { |
|
2209 --wp-admin-border-width-focus: 1.5px; |
|
2210 } |
|
2211 } |
|
2212 |
|
2213 body.admin-color-midnight { |
|
2214 --wp-admin-theme-color: #e14d43; |
|
2215 --wp-admin-theme-color--rgb: 225, 77, 67; |
|
2216 --wp-admin-theme-color-darker-10: #dd382d; |
|
2217 --wp-admin-theme-color-darker-10--rgb: 221, 56, 45; |
|
2218 --wp-admin-theme-color-darker-20: #d02c21; |
|
2219 --wp-admin-theme-color-darker-20--rgb: 208, 44, 33; |
|
2220 --wp-admin-border-width-focus: 2px; |
|
2221 } |
|
2222 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2223 body.admin-color-midnight { |
|
2224 --wp-admin-border-width-focus: 1.5px; |
|
2225 } |
|
2226 } |
|
2227 |
|
2228 body.admin-color-ocean { |
|
2229 --wp-admin-theme-color: #627c83; |
|
2230 --wp-admin-theme-color--rgb: 98, 124, 131; |
|
2231 --wp-admin-theme-color-darker-10: #576e74; |
|
2232 --wp-admin-theme-color-darker-10--rgb: 87, 110, 116; |
|
2233 --wp-admin-theme-color-darker-20: #4c6066; |
|
2234 --wp-admin-theme-color-darker-20--rgb: 76, 96, 102; |
|
2235 --wp-admin-border-width-focus: 2px; |
|
2236 } |
|
2237 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2238 body.admin-color-ocean { |
|
2239 --wp-admin-border-width-focus: 1.5px; |
|
2240 } |
|
2241 } |
|
2242 |
|
2243 body.admin-color-sunrise { |
|
2244 --wp-admin-theme-color: #dd823b; |
|
2245 --wp-admin-theme-color--rgb: 221, 130, 59; |
|
2246 --wp-admin-theme-color-darker-10: #d97426; |
|
2247 --wp-admin-theme-color-darker-10--rgb: 217, 116, 38; |
|
2248 --wp-admin-theme-color-darker-20: #c36922; |
|
2249 --wp-admin-theme-color-darker-20--rgb: 195, 105, 34; |
|
2250 --wp-admin-border-width-focus: 2px; |
|
2251 } |
|
2252 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
2253 body.admin-color-sunrise { |
|
2254 --wp-admin-border-width-focus: 1.5px; |
|
2255 } |
|
2256 } |