PluginProbe
Gutenberg / 23.0.1
Gutenberg v23.0.1
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 7.4.0 All 402 releases
gutenberg / build / styles / edit-widgets / style-rtl.css

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

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