PluginProbe
Gutenberg / 22.7.0
Gutenberg v22.7.0
24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 All 403 releases
gutenberg / build / styles / edit-widgets / style.css

style.css in Gutenberg 22.7.0, at build/styles/edit-widgets/style.css

1,154 lines 27.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Colors
3 */
4 /**
5 * Typography
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 * Fonts & basic variables.
16 */
17 /**
18 * Typography
19 */
20 /**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24 /**
25 * Radius scale.
26 */
27 /**
28 * Elevation scale.
29 */
30 /**
31 * Dimensions.
32 */
33 /**
34 * Mobile specific styles
35 */
36 /**
37 * Editor styles.
38 */
39 /**
40 * Block & Editor UI.
41 */
42 /**
43 * Block paddings.
44 */
45 /**
46 * React Native specific.
47 * These variables do not appear to be used anywhere else.
48 */
49 /**
50 * Breakpoints & Media Queries
51 */
52 /**
53 * Converts a hex value into the rgb equivalent.
54 *
55 * @param {string} hex - the hexadecimal value to convert
56 * @return {string} comma separated rgb values
57 */
58 /**
59 * Long content fade mixin
60 *
61 * Creates a fading overlay to signify that the content is longer
62 * than the space allows.
63 */
64 /**
65 * Breakpoint mixins
66 */
67 /**
68 * Focus styles.
69 */
70 /**
71 * Applies editor left position to the selector passed as argument
72 */
73 /**
74 * Styles that are reused verbatim in a few places
75 */
76 /**
77 * Allows users to opt-out of animations via OS-level preferences.
78 */
79 /**
80 * Reset default styles for JavaScript UI based pages.
81 * This is a WP-admin agnostic reset
82 */
83 /**
84 * Reset the WP Admin page styles for Gutenberg-like pages.
85 */
86 /**
87 * Creates a checkerboard pattern background to indicate transparency.
88 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89 */
90 :root {
91 --wp-block-synced-color: #7a00df;
92 --wp-block-synced-color--rgb: 122, 0, 223;
93 --wp-bound-block-color: var(--wp-block-synced-color);
94 --wp-editor-canvas-background: #ddd;
95 --wp-admin-theme-color: #007cba;
96 --wp-admin-theme-color--rgb: 0, 124, 186;
97 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
98 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
99 --wp-admin-theme-color-darker-20: #005a87;
100 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
101 --wp-admin-border-width-focus: 2px;
102 }
103 @media (min-resolution: 192dpi) {
104 :root {
105 --wp-admin-border-width-focus: 1.5px;
106 }
107 }
108
109 /**
110 * Colors
111 */
112 /**
113 * SCSS Variables.
114 *
115 * Please use variables from this sheet to ensure consistency across the UI.
116 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
117 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
118 */
119 /**
120 * Fonts & basic variables.
121 */
122 /**
123 * Typography
124 */
125 /**
126 * Grid System.
127 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
128 */
129 /**
130 * Radius scale.
131 */
132 /**
133 * Elevation scale.
134 */
135 /**
136 * Dimensions.
137 */
138 /**
139 * Mobile specific styles
140 */
141 /**
142 * Editor styles.
143 */
144 /**
145 * Block & Editor UI.
146 */
147 /**
148 * Block paddings.
149 */
150 /**
151 * React Native specific.
152 * These variables do not appear to be used anywhere else.
153 */
154 /**
155 * Typography
156 */
157 /**
158 * Breakpoints & Media Queries
159 */
160 /**
161 * Converts a hex value into the rgb equivalent.
162 *
163 * @param {string} hex - the hexadecimal value to convert
164 * @return {string} comma separated rgb values
165 */
166 /**
167 * Long content fade mixin
168 *
169 * Creates a fading overlay to signify that the content is longer
170 * than the space allows.
171 */
172 /**
173 * Breakpoint mixins
174 */
175 /**
176 * Focus styles.
177 */
178 /**
179 * Applies editor left position to the selector passed as argument
180 */
181 /**
182 * Styles that are reused verbatim in a few places
183 */
184 /**
185 * Allows users to opt-out of animations via OS-level preferences.
186 */
187 /**
188 * Reset default styles for JavaScript UI based pages.
189 * This is a WP-admin agnostic reset
190 */
191 /**
192 * Reset the WP Admin page styles for Gutenberg-like pages.
193 */
194 /**
195 * Creates a checkerboard pattern background to indicate transparency.
196 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
197 */
198 .admin-ui-page {
199 display: flex;
200 height: 100%;
201 background-color: #fff;
202 color: #2f2f2f;
203 position: relative;
204 z-index: 1;
205 flex-flow: column;
206 text-wrap: pretty;
207 }
208
209 .admin-ui-page__header {
210 padding: 16px 24px;
211 border-bottom: 1px solid #f0f0f0;
212 background: #fff;
213 position: sticky;
214 top: 0;
215 z-index: 1;
216 }
217
218 .admin-ui-page__sidebar-toggle-slot:empty {
219 display: none;
220 }
221
222 .admin-ui-page__header-subtitle {
223 padding-block-end: 8px;
224 color: #757575;
225 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
226 font-weight: 400;
227 font-size: 13px;
228 line-height: 20px;
229 margin: 0;
230 }
231
232 .admin-ui-page__content {
233 flex-grow: 1;
234 overflow: auto;
235 display: flex;
236 flex-direction: column;
237 }
238
239 .admin-ui-page__content.has-padding {
240 padding: 16px 24px;
241 }
242
243 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
244 width: auto;
245 padding: 0 8px;
246 }
247
248 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
249 display: none;
250 }
251
252 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
253 content: attr(aria-label);
254 font-size: 12px;
255 }
256
257 .admin-ui-breadcrumbs__list {
258 list-style: none;
259 padding: 0;
260 margin: 0;
261 gap: 0;
262 font-size: 15px;
263 min-height: 32px;
264 font-weight: 500;
265 }
266
267 .admin-ui-breadcrumbs__list li:not(:last-child)::after {
268 content: "/";
269 margin: 0 8px;
270 }
271
272 .admin-ui-breadcrumbs__list h1 {
273 font-size: inherit;
274 line-height: inherit;
275 }
276
277 /**
278 * Colors
279 */
280 /**
281 * SCSS Variables.
282 *
283 * Please use variables from this sheet to ensure consistency across the UI.
284 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
285 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
286 */
287 /**
288 * Fonts & basic variables.
289 */
290 /**
291 * Typography
292 */
293 /**
294 * Grid System.
295 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
296 */
297 /**
298 * Radius scale.
299 */
300 /**
301 * Elevation scale.
302 */
303 /**
304 * Dimensions.
305 */
306 /**
307 * Mobile specific styles
308 */
309 /**
310 * Editor styles.
311 */
312 /**
313 * Block & Editor UI.
314 */
315 /**
316 * Block paddings.
317 */
318 /**
319 * React Native specific.
320 * These variables do not appear to be used anywhere else.
321 */
322 .interface-complementary-area-header {
323 background: #fff;
324 padding-right: 8px;
325 gap: 4px;
326 }
327
328 .interface-complementary-area-header .interface-complementary-area-header__title {
329 margin: 0 auto 0 0;
330 }
331
332 /**
333 * Typography
334 */
335 /**
336 * Breakpoints & Media Queries
337 */
338 /**
339 * Converts a hex value into the rgb equivalent.
340 *
341 * @param {string} hex - the hexadecimal value to convert
342 * @return {string} comma separated rgb values
343 */
344 /**
345 * Long content fade mixin
346 *
347 * Creates a fading overlay to signify that the content is longer
348 * than the space allows.
349 */
350 /**
351 * Breakpoint mixins
352 */
353 /**
354 * Focus styles.
355 */
356 /**
357 * Applies editor left position to the selector passed as argument
358 */
359 /**
360 * Styles that are reused verbatim in a few places
361 */
362 /**
363 * Allows users to opt-out of animations via OS-level preferences.
364 */
365 /**
366 * Reset default styles for JavaScript UI based pages.
367 * This is a WP-admin agnostic reset
368 */
369 /**
370 * Reset the WP Admin page styles for Gutenberg-like pages.
371 */
372 /**
373 * Creates a checkerboard pattern background to indicate transparency.
374 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
375 */
376 .interface-complementary-area {
377 background: #fff;
378 color: #1e1e1e;
379 height: 100%;
380 overflow: auto;
381 }
382
383 @media (min-width: 782px) {
384 .interface-complementary-area {
385 width: 280px;
386 }
387 }
388 .interface-complementary-area .components-panel {
389 border: none;
390 position: relative;
391 z-index: 0;
392 }
393
394 .interface-complementary-area .components-panel__header {
395 position: sticky;
396 top: 0;
397 z-index: 1;
398 }
399
400 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
401 top: 0;
402 }
403
404 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
405 margin-top: 0;
406 }
407
408 .interface-complementary-area h2 {
409 font-size: 13px;
410 font-weight: 499;
411 color: #1e1e1e;
412 margin-bottom: 1.5em;
413 }
414
415 .interface-complementary-area h3 {
416 font-size: 11px;
417 text-transform: uppercase;
418 font-weight: 499;
419 color: #1e1e1e;
420 margin-bottom: 1.5em;
421 }
422
423 .interface-complementary-area hr {
424 border-top: none;
425 border-bottom: 1px solid #f0f0f0;
426 margin: 1.5em 0;
427 }
428
429 .interface-complementary-area div.components-toolbar-group,
430 .interface-complementary-area div.components-toolbar {
431 box-shadow: none;
432 margin-bottom: 1.5em;
433 }
434
435 .interface-complementary-area div.components-toolbar-group:last-child,
436 .interface-complementary-area div.components-toolbar:last-child {
437 margin-bottom: 0;
438 }
439
440 .interface-complementary-area .block-editor-skip-to-selected-block:focus {
441 top: auto;
442 right: 10px;
443 bottom: 10px;
444 left: auto;
445 }
446
447 .interface-complementary-area__fill {
448 height: 100%;
449 }
450
451 @media (min-width: 782px) {
452 body.js.is-fullscreen-mode {
453 margin-top: -32px;
454 height: calc(100% + 32px);
455 }
456 body.js.is-fullscreen-mode #adminmenumain,
457 body.js.is-fullscreen-mode #wpadminbar {
458 display: none;
459 }
460 body.js.is-fullscreen-mode #wpcontent,
461 body.js.is-fullscreen-mode #wpfooter {
462 margin-left: 0;
463 }
464 }
465 html.interface-interface-skeleton__html-container {
466 position: fixed;
467 width: 100%;
468 }
469
470 @media (min-width: 782px) {
471 html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
472 position: initial;
473 width: initial;
474 }
475 }
476 .interface-interface-skeleton {
477 display: flex;
478 flex-direction: row;
479 height: auto;
480 max-height: 100%;
481 position: fixed;
482 top: 46px;
483 left: 0;
484 right: 0;
485 bottom: 0;
486 }
487
488 @media (min-width: 783px) {
489 .interface-interface-skeleton {
490 top: 32px;
491 }
492 .is-fullscreen-mode .interface-interface-skeleton {
493 top: 0;
494 }
495 }
496 .interface-interface-skeleton__editor {
497 display: flex;
498 flex-direction: column;
499 flex: 0 1 100%;
500 overflow: hidden;
501 }
502
503 .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */
504 left: 0;
505 }
506
507 @media (min-width: 783px) {
508 .interface-interface-skeleton {
509 left: 160px;
510 }
511 }
512 .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ }
513
514 @media (min-width: 783px) {
515 .auto-fold .interface-interface-skeleton {
516 left: 36px;
517 }
518 }
519 @media (min-width: 961px) {
520 .auto-fold .interface-interface-skeleton {
521 left: 160px;
522 }
523 }
524 /* Sidebar manually collapsed. */
525 .folded .interface-interface-skeleton {
526 left: 0;
527 }
528
529 @media (min-width: 783px) {
530 .folded .interface-interface-skeleton {
531 left: 36px;
532 }
533 }
534 body.is-fullscreen-mode .interface-interface-skeleton {
535 left: 0 !important;
536 }
537
538 .interface-interface-skeleton__body {
539 position: relative;
540 flex-grow: 1;
541 display: flex;
542 overflow: auto;
543 overscroll-behavior-y: none;
544 }
545
546 @media (min-width: 782px) {
547 .has-footer .interface-interface-skeleton__body {
548 padding-bottom: 25px;
549 }
550 }
551 .interface-interface-skeleton__content {
552 flex-grow: 1;
553 display: flex;
554 flex-direction: column;
555 overflow: auto;
556 z-index: 20;
557 }
558
559 @media (min-width: 782px) {
560 .interface-interface-skeleton__content {
561 z-index: auto;
562 }
563 }
564 .interface-interface-skeleton__secondary-sidebar,
565 .interface-interface-skeleton__sidebar {
566 flex-shrink: 0;
567 position: absolute;
568 z-index: 100000;
569 top: 0;
570 left: 0;
571 bottom: 0;
572 background: #fff;
573 color: #1e1e1e;
574 width: auto;
575 }
576
577 @media (min-width: 782px) {
578 .interface-interface-skeleton__secondary-sidebar,
579 .interface-interface-skeleton__sidebar {
580 position: relative !important;
581 }
582 }
583 .interface-interface-skeleton__sidebar {
584 border-top: 1px solid #e0e0e0;
585 overflow: hidden;
586 }
587
588 @media (min-width: 782px) {
589 .interface-interface-skeleton__sidebar {
590 box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.133);
591 outline: 1px solid transparent;
592 }
593 }
594 .interface-interface-skeleton__secondary-sidebar {
595 border-top: 1px solid #e0e0e0;
596 right: 0;
597 }
598
599 @media (min-width: 782px) {
600 .interface-interface-skeleton__secondary-sidebar {
601 box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.133);
602 outline: 1px solid transparent;
603 }
604 }
605 .interface-interface-skeleton__header {
606 flex-shrink: 0;
607 height: auto;
608 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
609 z-index: 30;
610 color: #1e1e1e;
611 outline: 1px solid transparent;
612 }
613
614 .interface-interface-skeleton__footer {
615 height: auto;
616 flex-shrink: 0;
617 border-top: 1px solid #e0e0e0;
618 color: #1e1e1e;
619 position: absolute;
620 bottom: 0;
621 left: 0;
622 width: 100%;
623 background-color: #fff;
624 z-index: 90;
625 display: none;
626 }
627
628 @media (min-width: 782px) {
629 .interface-interface-skeleton__footer {
630 display: flex;
631 }
632 }
633 .interface-interface-skeleton__footer .block-editor-block-breadcrumb {
634 z-index: 30;
635 display: flex;
636 background: #fff;
637 height: 24px;
638 align-items: center;
639 font-size: 13px;
640 padding: 0 18px;
641 }
642
643 .interface-interface-skeleton__actions {
644 z-index: 100000;
645 position: fixed !important;
646 top: -9999em;
647 bottom: auto;
648 left: auto;
649 right: 0;
650 color: #1e1e1e;
651 background: #fff;
652 width: 100vw;
653 }
654
655 @media (min-width: 782px) {
656 .interface-interface-skeleton__actions {
657 width: 280px;
658 }
659 }
660 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
661 top: auto;
662 bottom: 0;
663 }
664
665 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
666 top: 46px;
667 }
668
669 @media (min-width: 782px) {
670 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
671 border-left: 1px solid #ddd;
672 top: 32px;
673 }
674 .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
675 top: 0;
676 }
677 }
678 .interface-pinned-items {
679 display: flex;
680 }
681
682 .interface-pinned-items .components-button {
683 display: none;
684 margin: 0;
685 }
686
687 .interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"] {
688 display: flex;
689 }
690
691 .interface-pinned-items .components-button svg {
692 max-width: 24px;
693 max-height: 24px;
694 }
695
696 @media (min-width: 600px) {
697 .interface-pinned-items .components-button {
698 display: flex;
699 }
700 }
701 .interface-pinned-items {
702 gap: 8px;
703 }
704
705 .wp-block[data-type="core/widget-area"] {
706 max-width: 700px;
707 margin-left: auto;
708 margin-right: auto;
709 }
710 .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title {
711 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
712 margin: 0;
713 height: 48px;
714 position: relative;
715 z-index: 1;
716 background: #fff;
717 transform: translateZ(0);
718 }
719 .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title:hover {
720 background: #fff;
721 }
722 .wp-block[data-type="core/widget-area"] .block-list-appender.wp-block {
723 width: initial;
724 position: relative;
725 }
726 .wp-block[data-type="core/widget-area"] .editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block {
727 max-width: 100%;
728 }
729 .wp-block[data-type="core/widget-area"] .components-panel__body.is-opened {
730 padding: 0;
731 }
732
733 .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper {
734 margin: 0;
735 padding: 0;
736 }
737 .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper > .block-editor-block-list__layout {
738 margin-top: -48px;
739 padding: 72px 16px 16px;
740 min-height: 32px;
741 }
742
743 .wp-block-widget-area__highlight-drop-zone {
744 outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
745 }
746
747 body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title,
748 body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title * {
749 pointer-events: none;
750 }
751
752 .edit-widgets-error-boundary {
753 margin: auto;
754 max-width: 780px;
755 padding: 20px;
756 margin-top: 64px;
757 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
758 }
759
760 .edit-widgets-header {
761 display: flex;
762 align-items: center;
763 justify-content: space-between;
764 height: 64px;
765 overflow: auto;
766 background: #fff;
767 }
768 @media (min-width: 600px) {
769 .edit-widgets-header {
770 overflow: visible;
771 }
772 }
773 .edit-widgets-header .selected-block-tools-wrapper {
774 overflow: hidden;
775 display: flex;
776 align-items: center;
777 height: 64px;
778 }
779 .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
780 border-bottom: 0;
781 height: 100%;
782 }
783 .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-toolbar {
784 height: 100%;
785 padding-top: 17px;
786 }
787 .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
788 height: 32px;
789 }
790 .edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group,
791 .edit-widgets-header .selected-block-tools-wrapper .components-toolbar {
792 border-right: none;
793 }
794 .edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group::after,
795 .edit-widgets-header .selected-block-tools-wrapper .components-toolbar::after {
796 content: "";
797 width: 1px;
798 height: 24px;
799 background-color: #ddd;
800 margin-top: 4px;
801 margin-left: 8px;
802 }
803 .edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
804 .edit-widgets-header .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
805 display: none;
806 }
807 .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
808 height: 32px;
809 overflow: visible;
810 }
811 @media (min-width: 600px) {
812 .edit-widgets-header .selected-block-tools-wrapper .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
813 position: relative;
814 top: -10px;
815 }
816 }
817
818 .edit-widgets-header__navigable-toolbar-wrapper {
819 display: flex;
820 align-items: center;
821 justify-content: center;
822 flex-shrink: 2;
823 padding-right: 8px;
824 padding-left: 16px;
825 overflow: hidden;
826 height: 64px;
827 }
828
829 .edit-widgets-header__title {
830 font-size: 20px;
831 padding: 0;
832 margin: 0 20px 0 0;
833 }
834
835 .edit-widgets-header__actions {
836 display: flex;
837 align-items: center;
838 padding-right: 4px;
839 }
840 @media (min-width: 600px) {
841 .edit-widgets-header__actions {
842 padding-right: 8px;
843 }
844 }
845 .edit-widgets-header__actions {
846 gap: 8px;
847 }
848
849 .edit-widgets-header-toolbar {
850 gap: 8px;
851 margin-right: 8px;
852 }
853 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
854 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {
855 height: 32px;
856 min-width: 32px;
857 padding: 4px;
858 }
859 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon.is-pressed,
860 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon.is-pressed {
861 background: #1e1e1e;
862 }
863 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon:focus:not(:disabled),
864 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon:focus:not(:disabled) {
865 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
866 outline: 1px solid transparent;
867 }
868 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon::before,
869 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon::before {
870 display: none;
871 }
872
873 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
874 padding-left: 8px;
875 padding-right: 8px;
876 }
877 @media (min-width: 600px) {
878 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
879 padding-left: 12px;
880 padding-right: 12px;
881 }
882 }
883 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle::after {
884 content: none;
885 }
886 @media not (prefers-reduced-motion) {
887 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle svg {
888 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
889 }
890 }
891 .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle.is-pressed svg {
892 transform: rotate(45deg);
893 }
894
895 .edit-widgets-keyboard-shortcut-help-modal__section {
896 margin: 0 0 2rem 0;
897 }
898 .edit-widgets-keyboard-shortcut-help-modal__section-title {
899 font-size: 0.9rem;
900 font-weight: 600;
901 }
902 .edit-widgets-keyboard-shortcut-help-modal__shortcut {
903 display: flex;
904 align-items: baseline;
905 padding: 0.6rem 0;
906 border-top: 1px solid #ddd;
907 margin-bottom: 0;
908 }
909 .edit-widgets-keyboard-shortcut-help-modal__shortcut:last-child {
910 border-bottom: 1px solid #ddd;
911 }
912 .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty {
913 display: none;
914 }
915 .edit-widgets-keyboard-shortcut-help-modal__shortcut-term {
916 font-weight: 600;
917 margin: 0 0 0 1rem;
918 text-align: right;
919 }
920 .edit-widgets-keyboard-shortcut-help-modal__shortcut-description {
921 flex: 1;
922 margin: 0;
923 }
924 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
925 display: block;
926 background: none;
927 margin: 0;
928 padding: 0;
929 }
930 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
931 margin-top: 10px;
932 }
933 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key {
934 padding: 0.25rem 0.5rem;
935 border-radius: 8%;
936 margin: 0 0.2rem 0 0.2rem;
937 }
938 .edit-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child {
939 margin: 0 0 0 0.2rem;
940 }
941
942 .components-panel__header.edit-widgets-sidebar__panel-tabs {
943 padding-left: 0;
944 }
945
946 .edit-widgets-widget-areas__top-container {
947 display: flex;
948 padding: 16px;
949 }
950 .edit-widgets-widget-areas__top-container .block-editor-block-icon {
951 margin-right: 16px;
952 }
953
954 .edit-widgets-notices__snackbar {
955 position: fixed;
956 bottom: 24px;
957 left: 0;
958 right: 0;
959 padding-inline: 16px;
960 box-sizing: border-box;
961 display: flex;
962 flex-direction: column;
963 pointer-events: none;
964 }
965 .edit-widgets-notices__snackbar .components-snackbar {
966 margin-inline: auto;
967 }
968
969 .edit-widgets-layout__inserter-panel {
970 height: 100%;
971 display: flex;
972 flex-direction: column;
973 }
974 .edit-widgets-layout__inserter-panel .block-editor-inserter__menu {
975 overflow: hidden;
976 }
977
978 .edit-widgets-layout__inserter-panel-content {
979 height: calc(100% - 36px - 8px);
980 }
981 .edit-widgets-layout__inserter-panel-content .block-editor-inserter__tablist-and-close {
982 display: none;
983 }
984 @media (min-width: 782px) {
985 .edit-widgets-layout__inserter-panel-content {
986 height: 100%;
987 }
988 }
989
990 .components-popover.more-menu-dropdown__content {
991 z-index: 99998;
992 }
993
994 .edit-widgets-welcome-guide {
995 width: 312px;
996 }
997 .edit-widgets-welcome-guide__image {
998 background: #00a0d2;
999 margin: 0 0 16px;
1000 }
1001 .edit-widgets-welcome-guide__image > img {
1002 display: block;
1003 max-width: 100%;
1004 object-fit: cover;
1005 }
1006 .edit-widgets-welcome-guide__heading {
1007 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1008 font-size: 24px;
1009 line-height: 1.4;
1010 margin: 16px 0 16px 0;
1011 padding: 0 32px;
1012 }
1013 .edit-widgets-welcome-guide__text {
1014 font-size: 13px;
1015 line-height: 1.4;
1016 margin: 0 0 24px 0;
1017 padding: 0 32px;
1018 }
1019 .edit-widgets-welcome-guide__inserter-icon {
1020 margin: 0 4px;
1021 vertical-align: text-top;
1022 }
1023 .edit-widgets-welcome-guide .components-button:hover svg {
1024 fill: #fff;
1025 }
1026
1027 .edit-widgets-block-editor {
1028 position: relative;
1029 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1030 display: flex;
1031 flex-direction: column;
1032 flex-grow: 1;
1033 }
1034 .edit-widgets-block-editor > div:last-of-type,
1035 .edit-widgets-block-editor .block-editor-writing-flow {
1036 display: flex;
1037 flex-direction: column;
1038 flex-grow: 1;
1039 }
1040 .edit-widgets-block-editor .edit-widgets-main-block-list {
1041 height: 100%;
1042 }
1043 .edit-widgets-block-editor .components-button {
1044 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1045 font-size: 13px;
1046 }
1047 .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon {
1048 padding: 6px;
1049 }
1050
1051 .edit-widgets-editor__list-view-panel {
1052 height: 100%;
1053 display: flex;
1054 flex-direction: column;
1055 min-width: 350px;
1056 }
1057
1058 .edit-widgets-editor__list-view-panel-content {
1059 height: calc(100% - 36px - 8px);
1060 overflow-y: auto;
1061 padding: 8px;
1062 }
1063
1064 .edit-widgets-editor__list-view-panel-header {
1065 align-items: center;
1066 border-bottom: 1px solid #ddd;
1067 display: flex;
1068 justify-content: space-between;
1069 height: 48px;
1070 padding-left: 16px;
1071 padding-right: 8px;
1072 }
1073
1074 body.js.appearance_page_gutenberg-widgets,
1075 body.js.widgets-php {
1076 background: #fff;
1077 }
1078 body.js.appearance_page_gutenberg-widgets #wpcontent,
1079 body.js.widgets-php #wpcontent {
1080 padding-left: 0;
1081 }
1082 body.js.appearance_page_gutenberg-widgets #wpbody-content,
1083 body.js.widgets-php #wpbody-content {
1084 padding-bottom: 0;
1085 }
1086 body.js.appearance_page_gutenberg-widgets,
1087 body.js.widgets-php {
1088 /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
1089 Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
1090 }
1091 body.js.appearance_page_gutenberg-widgets #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta),
1092 body.js.widgets-php #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta) {
1093 display: none;
1094 }
1095 body.js.appearance_page_gutenberg-widgets #wpfooter,
1096 body.js.widgets-php #wpfooter {
1097 display: none;
1098 }
1099 body.js.appearance_page_gutenberg-widgets .a11y-speak-region,
1100 body.js.widgets-php .a11y-speak-region {
1101 left: -1px;
1102 top: -1px;
1103 }
1104 body.js.appearance_page_gutenberg-widgets ul#adminmenu a.wp-has-current-submenu::after,
1105 body.js.appearance_page_gutenberg-widgets ul#adminmenu > li.current > a.current::after,
1106 body.js.widgets-php ul#adminmenu a.wp-has-current-submenu::after,
1107 body.js.widgets-php ul#adminmenu > li.current > a.current::after {
1108 border-right-color: #fff;
1109 }
1110 body.js.appearance_page_gutenberg-widgets .media-frame select.attachment-filters:last-of-type,
1111 body.js.widgets-php .media-frame select.attachment-filters:last-of-type {
1112 width: auto;
1113 max-width: 100%;
1114 }
1115
1116 .blocks-widgets-container {
1117 box-sizing: border-box;
1118 }
1119 .blocks-widgets-container *,
1120 .blocks-widgets-container *::before,
1121 .blocks-widgets-container *::after {
1122 box-sizing: inherit;
1123 }
1124 @media (min-width: 600px) {
1125 .blocks-widgets-container {
1126 position: absolute;
1127 top: 0;
1128 right: 0;
1129 bottom: 0;
1130 left: 0;
1131 min-height: calc(100vh - 46px);
1132 }
1133 }
1134 @media (min-width: 782px) {
1135 .blocks-widgets-container {
1136 min-height: calc(100vh - 32px);
1137 }
1138 }
1139 .blocks-widgets-container .interface-interface-skeleton__content {
1140 background-color: #f0f0f0;
1141 }
1142
1143 .blocks-widgets-container .editor-styles-wrapper {
1144 max-width: 700px;
1145 margin: auto;
1146 }
1147
1148 .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item {
1149 display: none;
1150 }
1151
1152 .js .widgets-php .notice {
1153 display: none !important;
1154 }