PluginProbe
Gutenberg / 23.3.0
Gutenberg v23.3.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 7.4.0 All 402 releases
gutenberg / build / styles / editor / style.css

style.css in Gutenberg 23.3.0, at build/styles/editor/style.css

8,235 lines 222.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /**
3 * Typography
4 */
5 /**
6 * SCSS Variables.
7 *
8 * Please use variables from this sheet to ensure consistency across the UI.
9 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
10 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
11 */
12 /**
13 * Colors
14 */
15 /**
16 * Fonts & basic variables.
17 */
18 /**
19 * Typography
20 */
21 /**
22 * Grid System.
23 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
24 */
25 /**
26 * Radius scale.
27 */
28 /**
29 * Elevation scale.
30 */
31 /**
32 * Dimensions.
33 */
34 /**
35 * Mobile specific styles
36 */
37 /**
38 * Editor styles.
39 */
40 /**
41 * Block & Editor UI.
42 */
43 /**
44 * Block paddings.
45 */
46 /**
47 * React Native specific.
48 * These variables do not appear to be used anywhere else.
49 */
50 /**
51 * Breakpoints & Media Queries
52 */
53 /**
54 * Converts a hex value into the rgb equivalent.
55 *
56 * @param {string} hex - the hexadecimal value to convert
57 * @return {string} comma separated rgb values
58 */
59 /**
60 * Long content fade mixin
61 *
62 * Creates a fading overlay to signify that the content is longer
63 * than the space allows.
64 */
65 /**
66 * Breakpoint mixins
67 */
68 /**
69 * Focus styles.
70 */
71 /**
72 * Applies editor left position to the selector passed as argument
73 */
74 /**
75 * Styles that are reused verbatim in a few places
76 */
77 /**
78 * Allows users to opt-out of animations via OS-level preferences.
79 */
80 /**
81 * Reset default styles for JavaScript UI based pages.
82 * This is a WP-admin agnostic reset
83 */
84 /**
85 * Reset the WP Admin page styles for Gutenberg-like pages.
86 */
87 /**
88 * Creates a checkerboard pattern background to indicate transparency.
89 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
90 */
91 :root {
92 --wp-block-synced-color: #7a00df;
93 --wp-block-synced-color--rgb: 122, 0, 223;
94 --wp-bound-block-color: var(--wp-block-synced-color);
95 --wp-editor-canvas-background: #ddd;
96 --wp-admin-theme-color: #007cba;
97 --wp-admin-theme-color--rgb: 0, 124, 186;
98 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
99 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
100 --wp-admin-theme-color-darker-20: #005a87;
101 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
102 --wp-admin-border-width-focus: 2px;
103 }
104 @media (min-resolution: 192dpi) {
105 :root {
106 --wp-admin-border-width-focus: 1.5px;
107 }
108 }
109
110 /**
111 * Colors
112 */
113 /**
114 * SCSS Variables.
115 *
116 * Please use variables from this sheet to ensure consistency across the UI.
117 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
118 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
119 */
120 /**
121 * Fonts & basic variables.
122 */
123 /**
124 * Typography
125 */
126 /**
127 * Grid System.
128 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
129 */
130 /**
131 * Radius scale.
132 */
133 /**
134 * Elevation scale.
135 */
136 /**
137 * Dimensions.
138 */
139 /**
140 * Mobile specific styles
141 */
142 /**
143 * Editor styles.
144 */
145 /**
146 * Block & Editor UI.
147 */
148 /**
149 * Block paddings.
150 */
151 /**
152 * React Native specific.
153 * These variables do not appear to be used anywhere else.
154 */
155 .interface-complementary-area-header {
156 background: #fff;
157 padding-right: 8px;
158 gap: 4px;
159 }
160
161 .interface-complementary-area-header .interface-complementary-area-header__title {
162 margin: 0 auto 0 0;
163 }
164
165 /**
166 * Typography
167 */
168 /**
169 * Breakpoints & Media Queries
170 */
171 /**
172 * Converts a hex value into the rgb equivalent.
173 *
174 * @param {string} hex - the hexadecimal value to convert
175 * @return {string} comma separated rgb values
176 */
177 /**
178 * Long content fade mixin
179 *
180 * Creates a fading overlay to signify that the content is longer
181 * than the space allows.
182 */
183 /**
184 * Breakpoint mixins
185 */
186 /**
187 * Focus styles.
188 */
189 /**
190 * Applies editor left position to the selector passed as argument
191 */
192 /**
193 * Styles that are reused verbatim in a few places
194 */
195 /**
196 * Allows users to opt-out of animations via OS-level preferences.
197 */
198 /**
199 * Reset default styles for JavaScript UI based pages.
200 * This is a WP-admin agnostic reset
201 */
202 /**
203 * Reset the WP Admin page styles for Gutenberg-like pages.
204 */
205 /**
206 * Creates a checkerboard pattern background to indicate transparency.
207 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
208 */
209 .interface-complementary-area {
210 background: #fff;
211 color: #1e1e1e;
212 height: 100%;
213 overflow: auto;
214 }
215
216 @media (min-width: 782px) {
217 .interface-complementary-area {
218 width: 280px;
219 }
220 }
221 .interface-complementary-area .components-panel {
222 border: none;
223 position: relative;
224 z-index: 0;
225 }
226
227 .interface-complementary-area .components-panel__header {
228 position: sticky;
229 top: 0;
230 z-index: 1;
231 }
232
233 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
234 top: 0;
235 }
236
237 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
238 margin-top: 0;
239 }
240
241 .interface-complementary-area h2 {
242 font-size: 13px;
243 font-weight: 499;
244 color: #1e1e1e;
245 margin-bottom: 1.5em;
246 }
247
248 .interface-complementary-area h3 {
249 font-size: 11px;
250 text-transform: uppercase;
251 font-weight: 499;
252 color: #1e1e1e;
253 margin-bottom: 1.5em;
254 }
255
256 .interface-complementary-area hr {
257 border-top: none;
258 border-bottom: 1px solid #f0f0f0;
259 margin: 1.5em 0;
260 }
261
262 .interface-complementary-area div.components-toolbar-group,
263 .interface-complementary-area div.components-toolbar {
264 box-shadow: none;
265 margin-bottom: 1.5em;
266 }
267
268 .interface-complementary-area div.components-toolbar-group:last-child,
269 .interface-complementary-area div.components-toolbar:last-child {
270 margin-bottom: 0;
271 }
272
273 .interface-complementary-area .block-editor-skip-to-selected-block:focus {
274 top: auto;
275 right: 10px;
276 bottom: 10px;
277 left: auto;
278 }
279
280 .interface-complementary-area__fill {
281 height: 100%;
282 }
283
284 @media (min-width: 782px) {
285 body.js.is-fullscreen-mode {
286 margin-top: -32px;
287 height: calc(100% + 32px);
288 }
289 body.js.is-fullscreen-mode #adminmenumain,
290 body.js.is-fullscreen-mode #wpadminbar {
291 display: none;
292 }
293 body.js.is-fullscreen-mode #wpcontent,
294 body.js.is-fullscreen-mode #wpfooter {
295 margin-left: 0;
296 }
297 }
298 html.interface-interface-skeleton__html-container {
299 position: fixed;
300 width: 100%;
301 }
302
303 @media (min-width: 782px) {
304 html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
305 position: initial;
306 width: initial;
307 }
308 }
309 .interface-interface-skeleton {
310 display: flex;
311 flex-direction: row;
312 height: auto;
313 max-height: 100%;
314 position: fixed;
315 top: 46px;
316 left: 0;
317 right: 0;
318 bottom: 0;
319 }
320
321 @media (min-width: 783px) {
322 .interface-interface-skeleton {
323 top: 32px;
324 }
325 .is-fullscreen-mode .interface-interface-skeleton {
326 top: 0;
327 }
328 }
329 .interface-interface-skeleton__editor {
330 display: flex;
331 flex-direction: column;
332 flex: 0 1 100%;
333 overflow: hidden;
334 }
335
336 .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */
337 left: 0;
338 }
339
340 @media (min-width: 783px) {
341 .interface-interface-skeleton {
342 left: 160px;
343 }
344 }
345 .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ }
346
347 @media (min-width: 783px) {
348 .auto-fold .interface-interface-skeleton {
349 left: 36px;
350 }
351 }
352 @media (min-width: 961px) {
353 .auto-fold .interface-interface-skeleton {
354 left: 160px;
355 }
356 }
357 /* Sidebar manually collapsed. */
358 .folded .interface-interface-skeleton {
359 left: 0;
360 }
361
362 @media (min-width: 783px) {
363 .folded .interface-interface-skeleton {
364 left: 36px;
365 }
366 }
367 body.is-fullscreen-mode .interface-interface-skeleton {
368 left: 0 !important;
369 }
370
371 .interface-interface-skeleton__body {
372 position: relative;
373 flex-grow: 1;
374 display: flex;
375 overflow: auto;
376 overscroll-behavior-y: none;
377 }
378
379 @media (min-width: 782px) {
380 .has-footer .interface-interface-skeleton__body {
381 padding-bottom: 25px;
382 }
383 }
384 .interface-interface-skeleton__content {
385 flex-grow: 1;
386 display: flex;
387 flex-direction: column;
388 overflow: auto;
389 z-index: 20;
390 }
391
392 @media (min-width: 782px) {
393 .interface-interface-skeleton__content {
394 z-index: auto;
395 }
396 }
397 .interface-interface-skeleton__secondary-sidebar,
398 .interface-interface-skeleton__sidebar {
399 flex-shrink: 0;
400 position: absolute;
401 z-index: 100000;
402 top: 0;
403 left: 0;
404 bottom: 0;
405 background: #fff;
406 color: #1e1e1e;
407 width: auto;
408 }
409
410 @media (min-width: 782px) {
411 .interface-interface-skeleton__secondary-sidebar,
412 .interface-interface-skeleton__sidebar {
413 position: relative !important;
414 }
415 }
416 .interface-interface-skeleton__sidebar {
417 border-top: 1px solid #e0e0e0;
418 overflow: hidden;
419 }
420
421 @media (min-width: 782px) {
422 .interface-interface-skeleton__sidebar {
423 box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.133);
424 outline: 1px solid transparent;
425 }
426 }
427 .interface-interface-skeleton__secondary-sidebar {
428 border-top: 1px solid #e0e0e0;
429 right: 0;
430 }
431
432 @media (min-width: 782px) {
433 .interface-interface-skeleton__secondary-sidebar {
434 box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.133);
435 outline: 1px solid transparent;
436 }
437 }
438 .interface-interface-skeleton__header {
439 flex-shrink: 0;
440 height: auto;
441 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
442 z-index: 30;
443 color: #1e1e1e;
444 outline: 1px solid transparent;
445 }
446
447 .interface-interface-skeleton__footer {
448 height: auto;
449 flex-shrink: 0;
450 border-top: 1px solid #e0e0e0;
451 color: #1e1e1e;
452 position: absolute;
453 bottom: 0;
454 left: 0;
455 width: 100%;
456 background-color: #fff;
457 z-index: 90;
458 display: none;
459 }
460
461 @media (min-width: 782px) {
462 .interface-interface-skeleton__footer {
463 display: flex;
464 }
465 }
466 .interface-interface-skeleton__footer .block-editor-block-breadcrumb {
467 z-index: 30;
468 display: flex;
469 background: #fff;
470 height: 24px;
471 align-items: center;
472 font-size: 13px;
473 padding: 0 18px;
474 }
475
476 .interface-interface-skeleton__actions {
477 z-index: 100000;
478 position: fixed !important;
479 top: -9999em;
480 bottom: auto;
481 left: auto;
482 right: 0;
483 color: #1e1e1e;
484 background: #fff;
485 width: 100vw;
486 }
487
488 @media (min-width: 782px) {
489 .interface-interface-skeleton__actions {
490 width: 280px;
491 }
492 }
493 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
494 top: auto;
495 bottom: 0;
496 }
497
498 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
499 top: 46px;
500 }
501
502 @media (min-width: 782px) {
503 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
504 border-left: 1px solid #ddd;
505 top: 32px;
506 }
507 .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 {
508 top: 0;
509 }
510 }
511 .interface-pinned-items {
512 display: flex;
513 }
514
515 .interface-pinned-items .components-button {
516 display: none;
517 margin: 0;
518 }
519
520 .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"] {
521 display: flex;
522 }
523
524 .interface-pinned-items .components-button svg {
525 max-width: 24px;
526 max-height: 24px;
527 }
528
529 @media (min-width: 600px) {
530 .interface-pinned-items .components-button {
531 display: flex;
532 }
533 }
534 .interface-pinned-items {
535 gap: 8px;
536 }
537
538 /**
539 * SCSS Variables.
540 *
541 * Please use variables from this sheet to ensure consistency across the UI.
542 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
543 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
544 */
545 /**
546 * Colors
547 */
548 /**
549 * Fonts & basic variables.
550 */
551 /**
552 * Typography
553 */
554 /**
555 * Grid System.
556 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
557 */
558 /**
559 * Radius scale.
560 */
561 /**
562 * Elevation scale.
563 */
564 /**
565 * Dimensions.
566 */
567 /**
568 * Mobile specific styles
569 */
570 /**
571 * Editor styles.
572 */
573 /**
574 * Block & Editor UI.
575 */
576 /**
577 * Block paddings.
578 */
579 /**
580 * React Native specific.
581 * These variables do not appear to be used anywhere else.
582 */
583 /**
584 * Typography
585 */
586 /**
587 * Breakpoints & Media Queries
588 */
589 /**
590 * Converts a hex value into the rgb equivalent.
591 *
592 * @param {string} hex - the hexadecimal value to convert
593 * @return {string} comma separated rgb values
594 */
595 /**
596 * Long content fade mixin
597 *
598 * Creates a fading overlay to signify that the content is longer
599 * than the space allows.
600 */
601 /**
602 * Breakpoint mixins
603 */
604 /**
605 * Focus styles.
606 */
607 /**
608 * Applies editor left position to the selector passed as argument
609 */
610 /**
611 * Styles that are reused verbatim in a few places
612 */
613 /**
614 * Allows users to opt-out of animations via OS-level preferences.
615 */
616 /**
617 * Reset default styles for JavaScript UI based pages.
618 * This is a WP-admin agnostic reset
619 */
620 /**
621 * Reset the WP Admin page styles for Gutenberg-like pages.
622 */
623 /**
624 * Creates a checkerboard pattern background to indicate transparency.
625 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
626 */
627 @media (min-width: 782px) {
628 .font-library-modal.font-library-modal {
629 width: 65vw;
630 }
631 }
632 .font-library-modal .components-modal__header {
633 border-bottom: none;
634 }
635
636 .font-library-modal .components-modal__content {
637 padding: 0;
638 margin-bottom: 90px;
639 }
640
641 .font-library-modal .font-library__subtitle {
642 text-transform: uppercase;
643 font-weight: 499;
644 font-size: 11px;
645 }
646
647 .font-library-modal__tab-panel {
648 height: calc(100% - 50px);
649 }
650
651 .font-library__tabpanel-layout {
652 height: 100%;
653 display: flex;
654 flex-direction: column;
655 }
656
657 .font-library__tabpanel-layout > div {
658 flex-grow: 1;
659 }
660
661 .font-library__tabpanel-layout .font-library__loading {
662 width: 100%;
663 height: 100%;
664 display: flex;
665 position: absolute;
666 left: 0;
667 top: 0;
668 align-items: center;
669 justify-content: center;
670 padding-top: 124px;
671 box-sizing: border-box;
672 }
673
674 .font-library__tabpanel-layout .components-navigator-screen {
675 padding: 24px;
676 width: 100%;
677 }
678
679 .font-library__footer {
680 position: absolute;
681 width: 100%;
682 bottom: 0;
683 border-top: 1px solid #ddd;
684 padding: 24px;
685 background-color: #fff;
686 box-sizing: border-box;
687 flex-grow: 0 !important;
688 flex-shrink: 0;
689 height: 90px;
690 }
691
692 .font-library__page-selection {
693 font-size: 11px;
694 font-weight: 499;
695 text-transform: uppercase;
696 }
697
698 @media (min-width: 600px) {
699 .font-library__page-selection .font-library__page-selection-trigger {
700 font-size: 11px !important;
701 font-weight: 499;
702 }
703 }
704 .font-library__fonts-title {
705 text-transform: uppercase;
706 font-size: 11px;
707 font-weight: 600;
708 margin-top: 0;
709 margin-bottom: 0;
710 }
711
712 .font-library__fonts-list {
713 list-style: none;
714 padding: 0;
715 margin-top: 0;
716 margin-bottom: 0;
717 }
718
719 .font-library__fonts-list-item {
720 margin-bottom: 0;
721 }
722
723 .font-library__font-card {
724 box-sizing: border-box;
725 border: 1px solid #ddd;
726 width: 100%;
727 height: auto !important;
728 padding: 16px;
729 margin-top: -1px; /* To collapse the margin with the previous element */
730 }
731
732 .font-library__font-card:hover {
733 background-color: #f0f0f0;
734 }
735
736 .font-library__font-card:focus {
737 position: relative;
738 }
739
740 .font-library__font-card .font-library__font-card__name {
741 font-weight: bold;
742 }
743
744 .font-library__font-card .font-library__font-card__count {
745 color: #757575;
746 }
747
748 .font-library__font-card .font-library__font-variant_demo-image {
749 display: block;
750 height: 24px;
751 width: auto;
752 }
753
754 .font-library__font-card .font-library__font-variant_demo-text {
755 white-space: nowrap;
756 flex-shrink: 0;
757 }
758
759 @media not (prefers-reduced-motion) {
760 .font-library__font-card .font-library__font-variant_demo-text {
761 transition: opacity 0.3s ease-in-out;
762 }
763 }
764 .font-library-modal__tablist-container {
765 position: sticky;
766 top: 0;
767 border-bottom: 1px solid #ddd;
768 background: #fff;
769 z-index: 1;
770 }
771
772 .font-library__upload-area {
773 align-items: center;
774 display: flex;
775 justify-content: center;
776 height: 256px !important;
777 width: 100%;
778 }
779
780 button.font-library__upload-area {
781 background-color: #f0f0f0;
782 }
783
784 .font-library__local-fonts {
785 margin: 24px auto;
786 width: 80%;
787 }
788
789 .font-library__local-fonts .font-library__upload-area__text {
790 color: #757575;
791 }
792
793 .font-library__google-fonts-confirm {
794 display: flex;
795 justify-content: center;
796 align-items: center;
797 margin-top: 64px;
798 }
799
800 .font-library__google-fonts-confirm p {
801 line-height: 1.4;
802 }
803
804 .font-library__google-fonts-confirm h2 {
805 font-size: 1.2rem;
806 font-weight: 400;
807 }
808
809 .font-library__google-fonts-confirm .components-card {
810 padding: 16px;
811 width: 400px;
812 }
813
814 .font-library__google-fonts-confirm .components-button {
815 width: 100%;
816 justify-content: center;
817 }
818
819 .font-library__select-all {
820 padding: 16px 16px 16px 17px;
821 }
822
823 .font-library__select-all .components-checkbox-control__label {
824 padding-left: 16px;
825 }
826
827 .global-styles-ui-pagination .components-button.is-tertiary {
828 width: 32px;
829 height: 32px;
830 justify-content: center;
831 }
832
833 .global-styles-ui-screen-revisions__revisions-list {
834 list-style: none;
835 margin: 0 16px 16px 16px;
836 flex-grow: 1;
837 }
838
839 .global-styles-ui-screen-revisions__revisions-list li {
840 margin-bottom: 0;
841 }
842
843 .global-styles-ui-screen-revisions__revision-item {
844 position: relative;
845 cursor: var(--wpds-cursor-control, pointer);
846 display: flex;
847 flex-direction: column;
848 }
849
850 .global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
851 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
852 outline: 2px solid transparent;
853 }
854
855 .global-styles-ui-screen-revisions__revision-item:hover {
856 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
857 }
858
859 .global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
860 color: var(--wp-admin-theme-color);
861 }
862
863 .global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
864 position: absolute;
865 content: "\a";
866 display: block;
867 }
868
869 .global-styles-ui-screen-revisions__revision-item::before {
870 background: #ddd;
871 border-radius: 50%;
872 height: 8px;
873 width: 8px;
874 top: 18px;
875 left: 17px;
876 transform: translate(-50%, -50%);
877 z-index: 1;
878 border: 4px solid transparent;
879 }
880
881 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
882 border-radius: 2px;
883 outline: 3px solid transparent;
884 outline-offset: -2px;
885 color: var(--wp-admin-theme-color);
886 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
887 }
888
889 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
890 color: var(--wp-admin-theme-color);
891 }
892
893 .global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
894 background: var(--wp-admin-theme-color);
895 }
896
897 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
898 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
899 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
900 color: #1e1e1e;
901 }
902
903 .global-styles-ui-screen-revisions__revision-item::after {
904 height: 100%;
905 left: 16px;
906 top: 0;
907 width: 0;
908 border: 0.5px solid #ddd;
909 }
910
911 .global-styles-ui-screen-revisions__revision-item:first-child::after {
912 top: 18px;
913 }
914
915 .global-styles-ui-screen-revisions__revision-item:last-child::after {
916 height: 18px;
917 }
918
919 .global-styles-ui-screen-revisions__revision-item-wrapper {
920 display: block;
921 padding: 12px 12px 4px 40px;
922 }
923
924 .global-styles-ui-screen-revisions__apply-button.is-primary,
925 .global-styles-ui-screen-revisions__applied-text {
926 align-self: flex-start;
927 margin: 4px 12px 12px 40px;
928 }
929
930 .global-styles-ui-screen-revisions__changes,
931 .global-styles-ui-screen-revisions__meta,
932 .global-styles-ui-screen-revisions__applied-text {
933 color: #757575;
934 font-size: 12px;
935 }
936
937 .global-styles-ui-screen-revisions__description {
938 display: flex;
939 flex-direction: column;
940 align-items: flex-start;
941 gap: 8px;
942 }
943
944 .global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
945 text-transform: uppercase;
946 font-weight: 600;
947 font-size: 12px;
948 }
949
950 .global-styles-ui-screen-revisions__meta {
951 display: flex;
952 justify-content: start;
953 width: 100%;
954 align-items: flex-start;
955 text-align: left;
956 margin-bottom: 4px;
957 }
958
959 .global-styles-ui-screen-revisions__meta img {
960 width: 16px;
961 height: 16px;
962 border-radius: 100%;
963 margin-right: 8px;
964 }
965
966 .global-styles-ui-screen-revisions__loading {
967 margin: 24px auto !important;
968 }
969
970 .global-styles-ui-screen-revisions__changes {
971 text-align: left;
972 line-height: 1.4;
973 margin-left: 12px;
974 list-style: disc;
975 }
976
977 .global-styles-ui-screen-revisions__changes li {
978 margin-bottom: 4px;
979 }
980
981 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
982 justify-content: space-between;
983 gap: 2px;
984 }
985
986 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
987 position: absolute;
988 left: -1000px;
989 height: 1px;
990 margin: -1px;
991 overflow: hidden;
992 }
993
994 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
995 font-size: 12px;
996 will-change: opacity;
997 }
998
999 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
1000 color: #1e1e1e;
1001 }
1002
1003 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
1004 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
1005 color: #949494;
1006 }
1007
1008 .global-styles-ui-screen-revisions__footer {
1009 height: 56px;
1010 z-index: 1;
1011 position: sticky;
1012 min-width: 100%;
1013 bottom: 0;
1014 background: #fff;
1015 padding: 12px;
1016 border-top: 1px solid #ddd;
1017 box-sizing: border-box;
1018 }
1019
1020 .global-styles-ui-variations_item {
1021 box-sizing: border-box;
1022 cursor: var(--wpds-cursor-control, pointer);
1023 }
1024
1025 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
1026 border-radius: 2px;
1027 outline: 1px solid rgba(0, 0, 0, 0.1);
1028 outline-offset: -1px;
1029 overflow: hidden;
1030 position: relative;
1031 }
1032
1033 @media not (prefers-reduced-motion) {
1034 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
1035 transition: outline 0.1s linear;
1036 }
1037 }
1038 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
1039 height: 32px;
1040 }
1041
1042 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
1043 overflow: hidden;
1044 }
1045
1046 .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
1047 outline-color: rgba(0, 0, 0, 0.3);
1048 }
1049
1050 .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview, .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
1051 outline-color: #1e1e1e;
1052 outline-offset: 1px;
1053 outline-width: var(--wp-admin-border-width-focus);
1054 }
1055
1056 .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
1057 outline-color: var(--wp-admin-theme-color);
1058 }
1059
1060 .global-styles-ui-preview__wrapper {
1061 max-width: 100%;
1062 display: block;
1063 width: 100%;
1064 }
1065
1066 .global-styles-ui-preview__wrapper.is-hoverable {
1067 cursor: var(--wpds-cursor-control, pointer);
1068 }
1069
1070 .global-styles-ui-typography-preview {
1071 display: flex;
1072 align-items: center;
1073 justify-content: center;
1074 min-height: 100px;
1075 margin-bottom: 20px;
1076 background: #f0f0f0;
1077 border-radius: 2px;
1078 overflow: hidden;
1079 }
1080
1081 .global-styles-ui-font-size__item {
1082 white-space: nowrap;
1083 text-overflow: ellipsis;
1084 overflow: hidden;
1085 line-break: anywhere;
1086 }
1087
1088 .global-styles-ui-font-size__item-value {
1089 color: #757575;
1090 }
1091
1092 .global-styles-ui-screen-typography__indicator {
1093 height: 24px;
1094 width: 24px;
1095 font-size: 14px;
1096 display: flex !important;
1097 align-items: center;
1098 justify-content: center;
1099 border-radius: 2px;
1100 }
1101
1102 .global-styles-ui-block-types-search {
1103 margin-bottom: 10px;
1104 padding: 0 16px;
1105 }
1106
1107 .global-styles-ui-screen-typography__font-variants-count {
1108 color: #757575;
1109 }
1110
1111 .global-styles-ui-font-families__manage-fonts {
1112 justify-content: center;
1113 }
1114
1115 .global-styles-ui-screen .color-block-support-panel {
1116 padding-left: 0;
1117 padding-right: 0;
1118 padding-top: 0;
1119 border-top: none;
1120 row-gap: 12px;
1121 }
1122
1123 .global-styles-ui-header {
1124 margin-bottom: 0 !important;
1125 line-height: 1.9 !important;
1126 }
1127
1128 .global-styles-ui-subtitle {
1129 margin-bottom: 0 !important;
1130 text-transform: uppercase;
1131 font-weight: 499 !important;
1132 font-size: 11px !important;
1133 }
1134
1135 .global-styles-ui-section-title {
1136 color: #2f2f2f;
1137 font-weight: 600;
1138 line-height: 1.2;
1139 padding: 16px 16px 0;
1140 margin: 0;
1141 }
1142
1143 .global-styles-ui-icon-with-current-color {
1144 fill: currentColor;
1145 }
1146
1147 .global-styles-ui__color-indicator-wrapper {
1148 height: 24px;
1149 flex-shrink: 0;
1150 }
1151
1152 .global-styles-ui__shadows-panel__options-container,
1153 .global-styles-ui__typography-panel__options-container {
1154 height: 24px;
1155 }
1156
1157 .global-styles-ui__block-preview-panel {
1158 position: relative;
1159 width: 100%;
1160 border: #ddd 1px solid;
1161 border-radius: 2px;
1162 overflow: hidden;
1163 }
1164
1165 .global-styles-ui__shadow-preview-panel {
1166 height: 144px;
1167 border: #ddd 1px solid;
1168 border-radius: 2px;
1169 overflow: auto;
1170 /*rtl:begin:ignore*/
1171 background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
1172 background-position: 0 0, 8px 8px;
1173 /*rtl:end:ignore*/
1174 background-size: 16px 16px;
1175 }
1176
1177 .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1178 border: #ddd 1px solid;
1179 border-radius: 2px;
1180 background-color: #fff;
1181 width: 60%;
1182 height: 60px;
1183 }
1184
1185 .global-styles-ui__shadow-editor__dropdown-content {
1186 width: 280px;
1187 }
1188
1189 .global-styles-ui__shadow-editor-panel {
1190 margin-bottom: 4px;
1191 }
1192
1193 .global-styles-ui__shadow-editor__dropdown {
1194 width: 100%;
1195 position: relative;
1196 }
1197
1198 .global-styles-ui__shadow-editor__dropdown-toggle {
1199 width: 100%;
1200 height: auto;
1201 padding-top: 8px;
1202 padding-bottom: 8px;
1203 text-align: left;
1204 border-radius: inherit;
1205 }
1206
1207 .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
1208 background: #f0f0f0;
1209 color: var(--wp-admin-theme-color);
1210 }
1211
1212 .global-styles-ui__shadow-editor__remove-button {
1213 position: absolute;
1214 right: 8px;
1215 top: 8px;
1216 opacity: 0;
1217 }
1218
1219 .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
1220 border: none;
1221 }
1222
1223 .global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
1224 opacity: 1;
1225 }
1226
1227 @media (hover: none) {
1228 .global-styles-ui__shadow-editor__remove-button {
1229 opacity: 1;
1230 }
1231 }
1232 .global-styles-ui-screen-css {
1233 flex: 1 1 auto;
1234 display: flex;
1235 flex-direction: column;
1236 margin: 16px;
1237 }
1238
1239 .global-styles-ui-screen-css .components-v-stack {
1240 flex: 1 1 auto;
1241 }
1242
1243 .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
1244 flex: 1 1 auto;
1245 display: flex;
1246 flex-direction: column;
1247 }
1248
1249 .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
1250 flex: 1 1 auto;
1251 display: flex;
1252 flex-direction: column;
1253 }
1254
1255 .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field .components-textarea-control__input {
1256 flex: 1 1 auto;
1257 /*rtl:ignore*/
1258 direction: ltr;
1259 }
1260
1261 .global-styles-ui-screen-css-help-link {
1262 display: inline-block;
1263 margin-top: 8px;
1264 }
1265
1266 .global-styles-ui-screen-variations {
1267 margin-top: 16px;
1268 border-top: 1px solid #ddd;
1269 }
1270
1271 .global-styles-ui-screen-variations > * {
1272 margin: 24px 16px;
1273 }
1274
1275 .global-styles-ui-sidebar__navigator-provider {
1276 height: 100%;
1277 }
1278
1279 .global-styles-ui-sidebar__navigator-screen {
1280 display: flex;
1281 flex-direction: column;
1282 height: 100%;
1283 }
1284
1285 .global-styles-ui-sidebar__navigator-screen .single-column {
1286 grid-column: span 1;
1287 }
1288
1289 .global-styles-ui-screen-root.global-styles-ui-screen-root,
1290 .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
1291 background: unset;
1292 color: inherit;
1293 }
1294
1295 .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
1296 fill: currentColor;
1297 }
1298
1299 .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile, .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile .global-styles-ui-screen-root__active-style-tile-preview {
1300 border-radius: 2px;
1301 }
1302
1303 .global-styles-ui-screen-root__active-style-tile-preview {
1304 clip-path: border-box;
1305 }
1306
1307 .global-styles-ui-color-palette-panel,
1308 .global-styles-ui-gradient-palette-panel {
1309 padding: 16px;
1310 }
1311
1312 /**
1313 * Typography
1314 */
1315 /**
1316 * SCSS Variables.
1317 *
1318 * Please use variables from this sheet to ensure consistency across the UI.
1319 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
1320 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
1321 */
1322 /**
1323 * Colors
1324 */
1325 /**
1326 * Fonts & basic variables.
1327 */
1328 /**
1329 * Typography
1330 */
1331 /**
1332 * Grid System.
1333 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
1334 */
1335 /**
1336 * Radius scale.
1337 */
1338 /**
1339 * Elevation scale.
1340 */
1341 /**
1342 * Dimensions.
1343 */
1344 /**
1345 * Mobile specific styles
1346 */
1347 /**
1348 * Editor styles.
1349 */
1350 /**
1351 * Block & Editor UI.
1352 */
1353 /**
1354 * Block paddings.
1355 */
1356 /**
1357 * React Native specific.
1358 * These variables do not appear to be used anywhere else.
1359 */
1360 /**
1361 * Breakpoints & Media Queries
1362 */
1363 /**
1364 * Converts a hex value into the rgb equivalent.
1365 *
1366 * @param {string} hex - the hexadecimal value to convert
1367 * @return {string} comma separated rgb values
1368 */
1369 /**
1370 * Long content fade mixin
1371 *
1372 * Creates a fading overlay to signify that the content is longer
1373 * than the space allows.
1374 */
1375 /**
1376 * Breakpoint mixins
1377 */
1378 /**
1379 * Focus styles.
1380 */
1381 /**
1382 * Applies editor left position to the selector passed as argument
1383 */
1384 /**
1385 * Styles that are reused verbatim in a few places
1386 */
1387 /**
1388 * Allows users to opt-out of animations via OS-level preferences.
1389 */
1390 /**
1391 * Reset default styles for JavaScript UI based pages.
1392 * This is a WP-admin agnostic reset
1393 */
1394 /**
1395 * Reset the WP Admin page styles for Gutenberg-like pages.
1396 */
1397 /**
1398 * Creates a checkerboard pattern background to indicate transparency.
1399 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
1400 */
1401 .dataviews-wrapper,
1402 .dataviews-picker-wrapper {
1403 height: 100%;
1404 flex-grow: 1;
1405 min-height: 0;
1406 box-sizing: border-box;
1407 scroll-padding-bottom: calc(var(--wpds-dimension-base, 4px) * 16);
1408 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
1409 container: dataviews-wrapper/inline-size;
1410 display: flex;
1411 flex-direction: column;
1412 font-size: var(--wpds-typography-font-size-md, 13px);
1413 line-height: var(--wpds-typography-line-height-sm, 20px);
1414 background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
1415 }
1416
1417 .dataviews__view-actions,
1418 .dataviews-filters__container {
1419 box-sizing: border-box;
1420 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
1421 flex-shrink: 0;
1422 position: sticky;
1423 left: 0;
1424 background-color: inherit;
1425 }
1426
1427 @media not (prefers-reduced-motion) {
1428 .dataviews__view-actions,
1429 .dataviews-filters__container {
1430 transition: padding ease-out 0.1s;
1431 }
1432 }
1433 .dataviews-no-results,
1434 .dataviews-loading {
1435 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1436 flex-grow: 1;
1437 display: flex;
1438 align-items: center;
1439 justify-content: center;
1440 }
1441
1442 @media not (prefers-reduced-motion) {
1443 .dataviews-no-results,
1444 .dataviews-loading {
1445 transition: padding ease-out 0.1s;
1446 }
1447 }
1448 .dataviews-no-results.is-refreshing {
1449 opacity: 0.5;
1450 pointer-events: none;
1451 }
1452
1453 @media not (prefers-reduced-motion) {
1454 .dataviews-no-results.is-refreshing {
1455 opacity: 1;
1456 animation: dataviews-pulse 1s ease-in-out infinite;
1457 }
1458 }
1459 @keyframes dataviews-pulse {
1460 0%, 100% {
1461 opacity: 1;
1462 }
1463 50% {
1464 opacity: 0.5;
1465 }
1466 }
1467 .dataviews-loading-more {
1468 text-align: center;
1469 }
1470
1471 @container (max-width: 430px) {
1472 .dataviews__view-actions,
1473 .dataviews-filters__container {
1474 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1475 }
1476 }
1477 .dataviews-title-field {
1478 font-size: var(--wpds-typography-font-size-md, 13px);
1479 font-weight: var(--wpds-typography-font-weight-medium, 499);
1480 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1481 text-overflow: ellipsis;
1482 white-space: nowrap;
1483 width: 100%;
1484 }
1485
1486 .dataviews-title-field a {
1487 text-decoration: none;
1488 text-overflow: ellipsis;
1489 white-space: nowrap;
1490 overflow: hidden;
1491 display: block;
1492 flex-grow: 0;
1493 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1494 }
1495
1496 .dataviews-title-field a:hover {
1497 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1498 }
1499
1500 .dataviews-title-field a:focus {
1501 color: var(--wp-admin-theme-color--rgb);
1502 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
1503 border-radius: 2px;
1504 }
1505
1506 .dataviews-title-field button.components-button.is-link {
1507 text-decoration: none;
1508 font-weight: inherit;
1509 text-overflow: ellipsis;
1510 white-space: nowrap;
1511 overflow: hidden;
1512 display: block;
1513 width: 100%;
1514 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
1515 }
1516
1517 .dataviews-title-field button.components-button.is-link:hover {
1518 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1519 }
1520
1521 .dataviews-title-field--clickable {
1522 cursor: var(--wpds-cursor-control, pointer);
1523 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1524 }
1525
1526 .dataviews-title-field--clickable:hover {
1527 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1528 }
1529
1530 .dataviews-title-field--clickable:focus {
1531 color: var(--wp-admin-theme-color--rgb);
1532 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
1533 border-radius: 2px;
1534 }
1535
1536 .dataviews__view-actions--infinite-scroll {
1537 position: sticky;
1538 top: 0;
1539 z-index: 2;
1540 background-color: #fff;
1541 }
1542
1543 /**
1544 * When DataViews are placed within cards, apply a consistent top padding.
1545 */
1546 .components-card__body:has(> .dataviews-wrapper),
1547 .components-card__body:has(> .dataviews-picker-wrapper) {
1548 padding: var(--wpds-dimension-padding-sm, 8px) 0 0;
1549 overflow: hidden;
1550 }
1551
1552 .dataviews-bulk-actions-footer__item-count {
1553 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1554 }
1555
1556 .dataviews-bulk-actions-footer__container {
1557 margin-right: auto;
1558 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1559 }
1560
1561 .dataviews-layout__container {
1562 flex: 1;
1563 min-height: 0;
1564 overflow: auto;
1565 display: flex;
1566 flex-direction: column;
1567 background-color: inherit;
1568 }
1569
1570 .dataviews-filters__button {
1571 position: relative;
1572 }
1573
1574 .dataviews-filters__container {
1575 padding-top: 0;
1576 }
1577
1578 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
1579 opacity: 0;
1580 }
1581
1582 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
1583 opacity: 1;
1584 }
1585
1586 .dataviews-filters__summary-popover {
1587 font-size: var(--wpds-typography-font-size-md, 13px);
1588 line-height: var(--wpds-typography-line-height-sm, 20px);
1589 }
1590
1591 .dataviews-filters__summary-popover .components-popover__content {
1592 width: 100%;
1593 min-width: 230px;
1594 max-width: 250px;
1595 border-radius: var(--wpds-border-radius-md, 4px);
1596 }
1597
1598 .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
1599 padding: 0;
1600 }
1601
1602 .dataviews-filters__summary-operators-container {
1603 padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-lg, 16px);
1604 }
1605
1606 .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-no-elements), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) {
1607 border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1608 }
1609
1610 .dataviews-filters__summary-operators-container:empty {
1611 display: none;
1612 }
1613
1614 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
1615 color: var(--wpds-color-fg-content-neutral-weak, #707070);
1616 white-space: nowrap;
1617 overflow: hidden;
1618 text-overflow: ellipsis;
1619 flex-shrink: 0; /* Prevents this element from shrinking */
1620 max-width: calc(100% - 55px);
1621 }
1622
1623 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
1624 width: 100%;
1625 white-space: nowrap;
1626 overflow: hidden;
1627 }
1628
1629 .dataviews-filters__summary-chip-container {
1630 position: relative;
1631 white-space: pre-wrap;
1632 }
1633
1634 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
1635 border-radius: var(--wpds-border-radius-lg, 8px);
1636 border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1637 cursor: var(--wpds-cursor-control, pointer);
1638 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
1639 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1640 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1641 position: relative;
1642 display: flex;
1643 align-items: center;
1644 box-sizing: border-box;
1645 }
1646
1647 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable {
1648 cursor: default;
1649 }
1650
1651 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
1652 padding-inline-end: calc(24px + var(--wpds-dimension-padding-xs, 4px));
1653 }
1654
1655 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
1656 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1657 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1658 background-color: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
1659 }
1660
1661 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
1662 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1663 background: var(--wpds-color-bg-interactive-brand-weak, rgba(0, 0, 0, 0));
1664 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1665 }
1666
1667 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
1668 color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
1669 background: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1670 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1671 }
1672
1673 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
1674 outline: none;
1675 box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1676 }
1677
1678 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
1679 font-weight: var(--wpds-typography-font-weight-medium, 499);
1680 }
1681
1682 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
1683 width: 24px;
1684 height: 24px;
1685 border-radius: var(--wpds-border-radius-md, 4px);
1686 border: 0;
1687 padding: 0;
1688 position: absolute;
1689 right: var(--wpds-dimension-padding-xs, 4px);
1690 top: 50%;
1691 transform: translateY(-50%);
1692 display: flex;
1693 align-items: center;
1694 justify-content: center;
1695 background: transparent;
1696 cursor: var(--wpds-cursor-control, pointer);
1697 }
1698
1699 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1700 fill: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
1701 }
1702
1703 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1704 background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
1705 }
1706
1707 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
1708 fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
1709 }
1710
1711 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1712 fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1713 }
1714
1715 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1716 background: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1717 }
1718
1719 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
1720 outline: none;
1721 box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
1722 }
1723
1724 .dataviews-filters__search-widget-filter-combobox-list {
1725 max-height: calc(var(--wpds-dimension-base, 4px) * 46);
1726 padding: var(--wpds-dimension-padding-xs, 4px);
1727 overflow: auto;
1728 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1729 }
1730
1731 .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
1732 font-weight: 600;
1733 }
1734
1735 .dataviews-filters__search-widget-listbox {
1736 padding: var(--wpds-dimension-padding-xs, 4px);
1737 overflow: auto;
1738 }
1739
1740 .dataviews-filters__search-widget-listitem {
1741 display: flex;
1742 align-items: center;
1743 gap: var(--wpds-dimension-gap-md, 12px);
1744 border-radius: var(--wpds-border-radius-sm, 2px);
1745 box-sizing: border-box;
1746 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
1747 cursor: default;
1748 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1749 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1750 font-weight: 400;
1751 font-size: 13px;
1752 line-height: 20px;
1753 }
1754
1755 .dataviews-filters__search-widget-listitem:last-child {
1756 margin-block-end: 0;
1757 }
1758
1759 .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
1760 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1761 }
1762
1763 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
1764 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1765 background: var(--wpds-color-bg-surface-neutral-strong, #fff);
1766 }
1767
1768 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1769 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1770 background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1771 }
1772
1773 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
1774 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1775 background: var(--wpds-color-bg-surface-neutral-strong, #fff);
1776 }
1777
1778 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
1779 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1780 background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1781 }
1782
1783 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
1784 overflow: hidden;
1785 text-overflow: ellipsis;
1786 white-space: nowrap;
1787 min-width: 0;
1788 }
1789
1790 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
1791 display: block;
1792 overflow: hidden;
1793 text-overflow: ellipsis;
1794 font-size: var(--wpds-typography-font-size-sm, 12px);
1795 line-height: 16px;
1796 color: var(--wpds-color-fg-content-neutral-weak, #707070);
1797 }
1798
1799 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1800 border: 1px solid #1e1e1e;
1801 margin-right: 12px;
1802 transition: none;
1803 border-radius: 50%;
1804 width: 24px;
1805 height: 24px;
1806 min-width: 24px;
1807 max-width: 24px;
1808 position: relative;
1809 }
1810
1811 @media not (prefers-reduced-motion) {
1812 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1813 transition: box-shadow 0.1s linear;
1814 }
1815 }
1816 @media (min-width: 600px) {
1817 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1818 height: 16px;
1819 width: 16px;
1820 min-width: 16px;
1821 max-width: 16px;
1822 }
1823 }
1824 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
1825 box-sizing: inherit;
1826 width: 12px;
1827 height: 12px;
1828 position: absolute;
1829 top: 50%;
1830 left: 50%;
1831 transform: translate(-50%, -50%);
1832 margin: 0;
1833 background-color: #fff;
1834 border: 4px solid #fff;
1835 }
1836
1837 @media (min-width: 600px) {
1838 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
1839 width: 8px;
1840 height: 8px;
1841 }
1842 }
1843 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus {
1844 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
1845 outline: 2px solid transparent;
1846 }
1847
1848 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked {
1849 background: var(--wp-admin-theme-color);
1850 border: none;
1851 }
1852
1853 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1854 margin: 0;
1855 padding: 0;
1856 }
1857
1858 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1859 background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1860 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1861 }
1862
1863 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
1864 content: "";
1865 border-radius: 50%;
1866 box-sizing: inherit;
1867 width: 12px;
1868 height: 12px;
1869 position: absolute;
1870 top: 50%;
1871 left: 50%;
1872 transform: translate(-50%, -50%);
1873 margin: 0;
1874 background-color: var(--wpds-color-fg-interactive-brand-strong, #fff);
1875 border: 4px solid var(--wpds-color-fg-interactive-brand-strong, #fff);
1876 }
1877
1878 @media (min-width: 600px) {
1879 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
1880 width: 8px;
1881 height: 8px;
1882 }
1883 }
1884 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1885 --checkbox-size: 24px;
1886 flex-shrink: 0;
1887 border: 1px solid #1e1e1e;
1888 margin-right: 12px;
1889 transition: none;
1890 border-radius: 2px;
1891 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1892 padding: 6px 8px;
1893 /* Fonts smaller than 16px causes mobile safari to zoom. */
1894 font-size: 16px;
1895 /* Override core line-height. To be reviewed. */
1896 line-height: normal;
1897 box-shadow: 0 0 0 transparent;
1898 border-radius: 2px;
1899 border: 1px solid #949494;
1900 }
1901
1902 @media not (prefers-reduced-motion) {
1903 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1904 transition: box-shadow 0.1s linear;
1905 }
1906 }
1907 @media (min-width: 600px) {
1908 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1909 font-size: 13px;
1910 /* Override core line-height. To be reviewed. */
1911 line-height: normal;
1912 }
1913 }
1914 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1915 border-color: var(--wp-admin-theme-color);
1916 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
1917 outline: 2px solid transparent;
1918 }
1919
1920 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1921 color: rgba(30, 30, 30, 0.62);
1922 }
1923
1924 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1925 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
1926 outline: 2px solid transparent;
1927 }
1928
1929 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked {
1930 background: var(--wp-admin-theme-color);
1931 border-color: var(--wp-admin-theme-color);
1932 }
1933
1934 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1935 margin: -3px -5px;
1936 color: #fff;
1937 }
1938
1939 @media (min-width: 782px) {
1940 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1941 margin: -4px 0 0 -5px;
1942 }
1943 }
1944 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] {
1945 background: var(--wp-admin-theme-color);
1946 border-color: var(--wp-admin-theme-color);
1947 }
1948
1949 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1950 content: "\f460";
1951 float: left;
1952 display: inline-block;
1953 vertical-align: middle;
1954 width: 16px;
1955 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
1956 font: normal 30px/1 dashicons;
1957 speak: none;
1958 -webkit-font-smoothing: antialiased;
1959 -moz-osx-font-smoothing: grayscale;
1960 }
1961
1962 @media (min-width: 782px) {
1963 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1964 float: none;
1965 font-size: 21px;
1966 }
1967 }
1968 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
1969 background: #f0f0f0;
1970 border-color: #ddd;
1971 cursor: default;
1972 opacity: 1;
1973 }
1974
1975 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1976 position: relative;
1977 background: var(--wpds-color-bg-interactive-neutral-weak, rgba(0, 0, 0, 0));
1978 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
1979 margin: 0;
1980 padding: 0;
1981 width: var(--checkbox-size);
1982 height: var(--checkbox-size);
1983 }
1984
1985 @media (min-width: 600px) {
1986 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1987 --checkbox-size: 16px;
1988 }
1989 }
1990 @media not (prefers-reduced-motion) {
1991 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1992 transition: 0.1s border-color ease-in-out;
1993 }
1994 }
1995 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
1996 background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1997 border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1998 }
1999
2000 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2001 --checkmark-size: var(--checkbox-size);
2002 fill: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
2003 position: absolute;
2004 left: 50%;
2005 top: 50%;
2006 transform: translate(-50%, -50%);
2007 width: var(--checkmark-size);
2008 height: var(--checkmark-size);
2009 }
2010
2011 @media (min-width: 600px) {
2012 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2013 --checkmark-size: calc(var(--checkbox-size) + 4px);
2014 }
2015 }
2016 .dataviews-filters__search-widget-filter-combobox__wrapper {
2017 position: relative;
2018 padding: var(--wpds-dimension-padding-sm, 8px);
2019 }
2020
2021 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2022 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2023 padding: 6px 8px;
2024 /* Fonts smaller than 16px causes mobile safari to zoom. */
2025 font-size: 16px;
2026 /* Override core line-height. To be reviewed. */
2027 line-height: normal;
2028 box-shadow: 0 0 0 transparent;
2029 border-radius: 2px;
2030 border: 1px solid #949494;
2031 }
2032
2033 @media not (prefers-reduced-motion) {
2034 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2035 transition: box-shadow 0.1s linear;
2036 }
2037 }
2038 @media (min-width: 600px) {
2039 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2040 font-size: 13px;
2041 /* Override core line-height. To be reviewed. */
2042 line-height: normal;
2043 }
2044 }
2045 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2046 border-color: var(--wp-admin-theme-color);
2047 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2048 outline: 2px solid transparent;
2049 }
2050
2051 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2052 color: rgba(30, 30, 30, 0.62);
2053 }
2054
2055 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2056 display: block;
2057 padding: 0 var(--wpds-dimension-padding-sm, 8px) 0 calc(var(--wpds-dimension-base, 4px) * 8);
2058 width: 100%;
2059 height: calc(var(--wpds-dimension-base, 4px) * 8);
2060 margin-left: 0;
2061 margin-right: 0;
2062 /* Fonts smaller than 16px causes mobile safari to zoom. */
2063 font-size: 16px;
2064 }
2065
2066 @media (min-width: 600px) {
2067 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2068 font-size: var(--wpds-typography-font-size-md, 13px);
2069 }
2070 }
2071 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2072 background: var(--wpds-color-bg-surface-neutral-strong, #fff);
2073 box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2074 }
2075
2076 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2077 color: var(--wpds-color-fg-content-neutral-weak, #707070);
2078 }
2079
2080 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration {
2081 -webkit-appearance: none;
2082 }
2083
2084 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
2085 position: absolute;
2086 inset-inline-start: var(--wpds-dimension-gap-md, 12px);
2087 top: 0;
2088 bottom: 0;
2089 display: flex;
2090 align-items: center;
2091 justify-content: center;
2092 width: 24px;
2093 }
2094
2095 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
2096 transform: scaleX(-1);
2097 }
2098
2099 .dataviews-filters__container-visibility-toggle {
2100 position: relative;
2101 flex-shrink: 0;
2102 }
2103
2104 .dataviews-filters-toggle__count {
2105 position: absolute;
2106 top: 0;
2107 right: 0;
2108 transform: translate(50%, -50%);
2109 background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2110 height: calc(var(--wpds-dimension-base, 4px) * 4);
2111 min-width: calc(var(--wpds-dimension-base, 4px) * 4);
2112 line-height: var(--wpds-typography-line-height-xs, 16px);
2113 padding: 0 var(--wpds-dimension-padding-xs, 4px);
2114 text-align: center;
2115 border-radius: var(--wpds-border-radius-lg, 8px);
2116 font-size: 11px;
2117 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-bg-surface-neutral-strong, #fff);
2118 color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
2119 box-sizing: border-box;
2120 }
2121
2122 .dataviews-search {
2123 width: fit-content;
2124 }
2125
2126 .dataviews-filters__user-input-widget {
2127 padding: var(--wpds-dimension-padding-lg, 16px);
2128 }
2129
2130 .dataviews-filters__user-input-widget .components-input-control__prefix {
2131 padding-left: var(--wpds-dimension-padding-sm, 8px);
2132 }
2133
2134 .dataviews-filters__search-widget-no-elements {
2135 display: flex;
2136 align-items: center;
2137 justify-content: center;
2138 padding: var(--wpds-dimension-padding-lg, 16px);
2139 }
2140
2141 .dataviews-footer {
2142 position: sticky;
2143 bottom: 0;
2144 left: 0;
2145 background-color: inherit;
2146 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
2147 border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
2148 flex-shrink: 0;
2149 }
2150
2151 @media not (prefers-reduced-motion) {
2152 .dataviews-footer {
2153 transition: padding ease-out 0.1s;
2154 }
2155 }
2156 .dataviews-footer {
2157 z-index: 1;
2158 }
2159
2160 .dataviews-footer .is-refreshing {
2161 opacity: 0.5;
2162 pointer-events: none;
2163 }
2164
2165 @media not (prefers-reduced-motion) {
2166 .dataviews-footer .is-refreshing {
2167 opacity: 1;
2168 animation: dataviews-pulse 1s ease-in-out infinite;
2169 }
2170 }
2171 @container (max-width: 560px) {
2172 .dataviews-footer__content {
2173 flex-direction: column !important;
2174 }
2175 .dataviews-footer__content .dataviews-bulk-actions-footer__container {
2176 width: 100%;
2177 }
2178 .dataviews-footer__content .dataviews-bulk-actions-footer__item-count {
2179 flex-grow: 1;
2180 }
2181 .dataviews-footer__content .dataviews-pagination {
2182 width: 100%;
2183 justify-content: space-between;
2184 }
2185 }
2186 .dataviews-pagination__page-select {
2187 font-size: 11px;
2188 font-weight: var(--wpds-typography-font-weight-medium, 499);
2189 text-transform: uppercase;
2190 }
2191
2192 @media (min-width: 600px) {
2193 .dataviews-pagination__page-select .components-select-control__input {
2194 font-size: 11px !important;
2195 font-weight: var(--wpds-typography-font-weight-medium, 499);
2196 }
2197 }
2198 .dataviews-action-modal {
2199 z-index: 1000001;
2200 }
2201
2202 .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
2203 padding: 0 var(--wpds-dimension-padding-xs, 4px);
2204 }
2205
2206 .dataviews-selection-checkbox {
2207 --checkbox-input-size: 24px;
2208 }
2209
2210 @media (min-width: 600px) {
2211 .dataviews-selection-checkbox {
2212 --checkbox-input-size: 16px;
2213 }
2214 }
2215 .dataviews-selection-checkbox {
2216 line-height: 0;
2217 flex-shrink: 0;
2218 }
2219
2220 .dataviews-selection-checkbox .components-checkbox-control__input-container {
2221 margin: 0;
2222 }
2223
2224 .dataviews-view-config {
2225 width: 320px;
2226 /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
2227 container-type: inline-size;
2228 font-size: var(--wpds-typography-font-size-md, 13px);
2229 line-height: var(--wpds-typography-line-height-sm, 20px);
2230 }
2231
2232 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
2233 overflow-y: scroll;
2234 height: 100%;
2235 }
2236
2237 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config {
2238 width: auto;
2239 }
2240
2241 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
2242 text-transform: uppercase;
2243 }
2244
2245 .dataviews-settings-section__title.dataviews-settings-section__title {
2246 line-height: var(--wpds-typography-line-height-md, 24px);
2247 font-size: 15px;
2248 }
2249
2250 .dataviews-settings-section__sidebar {
2251 grid-column: span 4;
2252 }
2253
2254 .dataviews-settings-section__content,
2255 .dataviews-settings-section__content > * {
2256 grid-column: span 8;
2257 }
2258
2259 .dataviews-settings-section__content .is-divided-in-two {
2260 display: contents;
2261 }
2262
2263 .dataviews-settings-section__content .is-divided-in-two > * {
2264 grid-column: span 4;
2265 }
2266
2267 .dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
2268 display: none;
2269 }
2270
2271 @container (max-width: 500px) {
2272 .dataviews-settings-section.dataviews-settings-section {
2273 grid-template-columns: repeat(2, 1fr);
2274 }
2275 .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar {
2276 grid-column: span 2;
2277 }
2278 .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content {
2279 grid-column: span 2;
2280 }
2281 }
2282 .dataviews-view-config__sort-controls > * {
2283 flex: 1;
2284 }
2285
2286 .dataviews-view-config__label {
2287 text-wrap: nowrap;
2288 }
2289
2290 .dataviews-view-config__toggle-wrapper {
2291 position: relative;
2292 display: inline-flex;
2293 }
2294
2295 .dataviews-view-config__modified-indicator {
2296 position: absolute;
2297 top: var(--wpds-dimension-gap-xs, 4px);
2298 right: var(--wpds-dimension-gap-xs, 4px);
2299 width: var(--wpds-dimension-gap-xs, 4px);
2300 height: var(--wpds-dimension-gap-xs, 4px);
2301 background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2302 border-radius: 50%;
2303 pointer-events: none;
2304 }
2305
2306 .dataviews-view-grid-items {
2307 margin-bottom: auto;
2308 display: grid;
2309 gap: var(--wpds-dimension-gap-xl, 24px);
2310 grid-template-rows: max-content;
2311 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
2312 padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2313 container-type: inline-size;
2314 }
2315
2316 @media not (prefers-reduced-motion) {
2317 .dataviews-view-grid-items {
2318 transition: padding ease-out 0.1s;
2319 }
2320 }
2321 .dataviews-view-grid-items.has-compact-density {
2322 gap: var(--wpds-dimension-gap-lg, 16px);
2323 }
2324
2325 .dataviews-view-grid-items.has-comfortable-density {
2326 gap: var(--wpds-dimension-gap-2xl, 32px);
2327 }
2328
2329 .dataviews-view-grid {
2330 padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2331 display: flex;
2332 flex-direction: column;
2333 gap: var(--wpds-dimension-gap-xl, 24px);
2334 container-type: inline-size;
2335 margin-bottom: auto;
2336 }
2337
2338 @media not (prefers-reduced-motion) {
2339 .dataviews-view-grid {
2340 transition: padding ease-out 0.1s;
2341 }
2342 }
2343 .dataviews-view-grid.has-compact-density {
2344 gap: var(--wpds-dimension-gap-lg, 16px);
2345 }
2346
2347 .dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
2348 gap: var(--wpds-dimension-gap-lg, 16px);
2349 }
2350
2351 .dataviews-view-grid.has-comfortable-density {
2352 gap: var(--wpds-dimension-gap-2xl, 32px);
2353 }
2354
2355 .dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
2356 gap: var(--wpds-dimension-gap-2xl, 32px);
2357 }
2358
2359 .dataviews-view-grid .dataviews-view-grid__row {
2360 display: grid;
2361 gap: var(--wpds-dimension-gap-xl, 24px);
2362 }
2363
2364 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
2365 border-radius: var(--wpds-border-radius-md, 4px);
2366 position: relative;
2367 }
2368
2369 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after {
2370 content: "";
2371 position: absolute;
2372 top: 0;
2373 left: 0;
2374 width: 100%;
2375 height: 100%;
2376 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2377 border-radius: var(--wpds-border-radius-md, 4px);
2378 pointer-events: none;
2379 outline: 2px solid transparent;
2380 }
2381
2382 .dataviews-view-grid .dataviews-view-grid__card,
2383 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card {
2384 height: 100%;
2385 justify-content: flex-start;
2386 position: relative;
2387 isolation: isolate;
2388 }
2389
2390 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions,
2391 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-actions {
2392 padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
2393 }
2394
2395 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
2396 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
2397 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2398 overflow: hidden;
2399 align-content: center;
2400 text-align: start;
2401 }
2402
2403 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2404 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2405 width: fit-content;
2406 }
2407
2408 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
2409 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2410 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2411 }
2412
2413 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
2414 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
2415 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-bg-surface-neutral-strong, #fff);
2416 }
2417
2418 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
2419 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
2420 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2421 }
2422
2423 .dataviews-view-grid .dataviews-view-grid__media,
2424 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
2425 width: 100%;
2426 aspect-ratio: 1/1;
2427 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2428 border-radius: var(--wpds-border-radius-md, 4px);
2429 overflow: hidden;
2430 position: relative;
2431 }
2432
2433 .dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder,
2434 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
2435 aspect-ratio: 3/1;
2436 }
2437
2438 .dataviews-view-grid .dataviews-view-grid__media img,
2439 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2440 object-fit: cover;
2441 width: 100%;
2442 height: 100%;
2443 }
2444
2445 .dataviews-view-grid .dataviews-view-grid__media::after,
2446 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after {
2447 content: "";
2448 position: absolute;
2449 top: 0;
2450 left: 0;
2451 width: 100%;
2452 height: 100%;
2453 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2454 border-radius: var(--wpds-border-radius-md, 4px);
2455 pointer-events: none;
2456 }
2457
2458 .dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder,
2459 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
2460 width: 100%;
2461 height: 100%;
2462 display: block;
2463 border-radius: var(--wpds-border-radius-md, 4px);
2464 box-shadow: none;
2465 background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
2466 }
2467
2468 .dataviews-view-grid .dataviews-view-grid__fields,
2469 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
2470 position: relative;
2471 font-size: 12px;
2472 line-height: 16px;
2473 }
2474
2475 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
2476 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
2477 padding: 0 0 var(--wpds-dimension-padding-md, 12px);
2478 }
2479
2480 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
2481 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
2482 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2483 line-height: var(--wpds-typography-line-height-sm, 20px);
2484 padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
2485 }
2486
2487 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
2488 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
2489 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2490 align-items: center;
2491 }
2492
2493 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
2494 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
2495 width: 35%;
2496 color: var(--wpds-color-fg-content-neutral-weak, #707070);
2497 overflow: hidden;
2498 text-overflow: ellipsis;
2499 white-space: nowrap;
2500 }
2501
2502 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
2503 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2504 width: 65%;
2505 overflow: hidden;
2506 text-overflow: ellipsis;
2507 white-space: nowrap;
2508 }
2509
2510 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))),
2511 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
2512 display: none;
2513 }
2514
2515 .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
2516 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
2517 padding-bottom: var(--wpds-dimension-padding-md, 12px);
2518 }
2519
2520 .dataviews-view-grid.is-refreshing,
2521 .dataviews-view-grid-infinite-scroll.is-refreshing {
2522 opacity: 0.5;
2523 pointer-events: none;
2524 }
2525
2526 @media not (prefers-reduced-motion) {
2527 .dataviews-view-grid.is-refreshing,
2528 .dataviews-view-grid-infinite-scroll.is-refreshing {
2529 opacity: 1;
2530 animation: dataviews-pulse 1s ease-in-out infinite;
2531 }
2532 }
2533 .dataviews-view-grid__field-value:empty,
2534 .dataviews-view-grid__field:empty {
2535 display: none;
2536 }
2537
2538 .dataviews-view-grid__card .dataviews-selection-checkbox {
2539 position: absolute;
2540 top: -9999em;
2541 left: var(--wpds-dimension-padding-sm, 8px);
2542 z-index: 1;
2543 opacity: 0;
2544 }
2545
2546 @media not (prefers-reduced-motion) {
2547 .dataviews-view-grid__card .dataviews-selection-checkbox {
2548 transition: opacity 0.1s linear;
2549 }
2550 }
2551 @media (hover: none) {
2552 .dataviews-view-grid__card .dataviews-selection-checkbox {
2553 opacity: 1;
2554 top: var(--wpds-dimension-padding-sm, 8px);
2555 }
2556 }
2557 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
2558 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
2559 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
2560 opacity: 1;
2561 top: var(--wpds-dimension-padding-sm, 8px);
2562 }
2563
2564 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2565 position: absolute;
2566 z-index: 1;
2567 top: var(--wpds-dimension-padding-xs, 4px);
2568 opacity: 0;
2569 right: var(--wpds-dimension-padding-xs, 4px);
2570 }
2571
2572 .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
2573 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2574 }
2575
2576 @media not (prefers-reduced-motion) {
2577 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2578 transition: opacity 0.1s linear;
2579 }
2580 }
2581 @media (hover: none) {
2582 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2583 opacity: 1;
2584 top: var(--wpds-dimension-padding-xs, 4px);
2585 }
2586 }
2587 .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
2588 .dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
2589 .dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
2590 opacity: 1;
2591 }
2592
2593 .dataviews-view-grid__media--clickable {
2594 cursor: var(--wpds-cursor-control, pointer);
2595 }
2596
2597 .dataviews-view-grid__group-header {
2598 font-size: var(--wpds-typography-font-size-lg, 15px);
2599 font-weight: var(--wpds-typography-font-weight-medium, 499);
2600 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2601 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2602 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
2603 container-type: inline-size;
2604 }
2605
2606 div.dataviews-view-list {
2607 list-style-type: none;
2608 }
2609
2610 .dataviews-view-list {
2611 margin: 0 0 auto;
2612 }
2613
2614 .dataviews-view-list div[role=row],
2615 .dataviews-view-list div[role=article] {
2616 margin: 0;
2617 border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
2618 }
2619
2620 .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
2621 .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
2622 position: relative;
2623 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
2624 box-sizing: border-box;
2625 }
2626
2627 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2628 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2629 display: flex;
2630 width: max-content;
2631 flex: 0 0 auto;
2632 gap: var(--wpds-dimension-gap-xs, 4px);
2633 white-space: nowrap;
2634 }
2635
2636 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button,
2637 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions .components-button {
2638 position: relative;
2639 z-index: 1;
2640 }
2641
2642 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
2643 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
2644 height: 24px;
2645 }
2646
2647 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
2648 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
2649 flex: 0;
2650 overflow: hidden;
2651 width: 0;
2652 }
2653
2654 .dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child),
2655 .dataviews-view-list div[role=article]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child) {
2656 flex-basis: min-content;
2657 width: auto;
2658 overflow: unset;
2659 }
2660
2661 @media (hover: none) {
2662 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
2663 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
2664 flex-basis: min-content;
2665 width: auto;
2666 overflow: unset;
2667 }
2668 }
2669 .dataviews-view-list div[role=row].is-selected.is-selected,
2670 .dataviews-view-list div[role=article].is-selected.is-selected {
2671 border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
2672 }
2673
2674 .dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article],
2675 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
2676 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
2677 border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
2678 }
2679
2680 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
2681 .dataviews-view-list div[role=article]:not(.is-selected):hover,
2682 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
2683 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
2684 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2685 background-color: var(--wpds-color-bg-interactive-brand-weak, rgba(0, 0, 0, 0));
2686 }
2687
2688 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
2689 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
2690 .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-title-field,
2691 .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field,
2692 .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-title-field,
2693 .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__field,
2694 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
2695 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
2696 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
2697 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
2698 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2699 }
2700
2701 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2702 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
2703 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
2704 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
2705 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2706 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
2707 }
2708
2709 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2710 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2711 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2712 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2713 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2714 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2715 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2716 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
2717 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
2718 }
2719
2720 .dataviews-view-list .dataviews-view-list__item {
2721 position: absolute;
2722 z-index: 1;
2723 inset: 0;
2724 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2725 appearance: none;
2726 border: none;
2727 background: none;
2728 padding: 0;
2729 cursor: var(--wpds-cursor-control, pointer);
2730 }
2731
2732 .dataviews-view-list .dataviews-view-list__item:focus-visible {
2733 outline: none;
2734 }
2735
2736 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
2737 position: absolute;
2738 content: "";
2739 inset: var(--wp-admin-border-width-focus);
2740 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
2741 border-radius: var(--wpds-border-radius-sm, 2px);
2742 outline: 2px solid transparent;
2743 }
2744
2745 .dataviews-view-list .dataviews-view-list__title-field {
2746 flex: 1;
2747 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2748 line-height: var(--wpds-typography-line-height-md, 24px);
2749 overflow: hidden;
2750 }
2751
2752 .dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
2753 z-index: 1;
2754 }
2755
2756 .dataviews-view-list .dataviews-view-list__media-wrapper {
2757 width: calc(var(--wpds-dimension-base, 4px) * 13);
2758 height: calc(var(--wpds-dimension-base, 4px) * 13);
2759 overflow: hidden;
2760 position: relative;
2761 flex-shrink: 0;
2762 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
2763 border-radius: var(--wpds-border-radius-md, 4px);
2764 }
2765
2766 .dataviews-view-list .dataviews-view-list__media-wrapper img {
2767 width: 100%;
2768 height: 100%;
2769 object-fit: cover;
2770 }
2771
2772 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
2773 content: "";
2774 position: absolute;
2775 top: 0;
2776 left: 0;
2777 width: 100%;
2778 height: 100%;
2779 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2780 border-radius: var(--wpds-border-radius-md, 4px);
2781 }
2782
2783 .dataviews-view-list .dataviews-view-list__field-wrapper {
2784 min-height: calc(var(--wpds-dimension-base, 4px) * 13);
2785 flex-grow: 1;
2786 min-width: 0;
2787 }
2788
2789 .dataviews-view-list .dataviews-view-list__field {
2790 color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
2791 }
2792
2793 .dataviews-view-list .dataviews-view-list__fields {
2794 display: flex;
2795 gap: var(--wpds-dimension-gap-md, 12px);
2796 row-gap: var(--wpds-dimension-gap-xs, 4px);
2797 flex-wrap: wrap;
2798 font-size: 12px;
2799 }
2800
2801 .dataviews-view-list .dataviews-view-list__fields:empty {
2802 display: none;
2803 }
2804
2805 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
2806 display: none;
2807 }
2808
2809 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
2810 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2811 line-height: var(--wpds-typography-line-height-sm, 20px);
2812 display: flex;
2813 align-items: center;
2814 }
2815
2816 .dataviews-view-list + .dataviews-pagination {
2817 justify-content: space-between;
2818 }
2819
2820 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper {
2821 padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px);
2822 }
2823
2824 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
2825 min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2826 line-height: var(--wpds-typography-line-height-xs, 16px);
2827 }
2828
2829 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
2830 width: calc(var(--wpds-dimension-base, 4px) * 8);
2831 height: calc(var(--wpds-dimension-base, 4px) * 8);
2832 }
2833
2834 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
2835 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2836 }
2837
2838 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
2839 gap: var(--wpds-dimension-gap-sm, 8px);
2840 row-gap: var(--wpds-dimension-gap-xs, 4px);
2841 }
2842
2843 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
2844 min-height: calc(var(--wpds-dimension-base, 4px) * 4);
2845 line-height: var(--wpds-typography-line-height-xs, 16px);
2846 }
2847
2848 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
2849 padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2850 }
2851
2852 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
2853 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2854 line-height: var(--wpds-typography-line-height-xl, 32px);
2855 }
2856
2857 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
2858 width: calc(var(--wpds-dimension-base, 4px) * 16);
2859 height: calc(var(--wpds-dimension-base, 4px) * 16);
2860 }
2861
2862 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper {
2863 min-height: calc(var(--wpds-dimension-base, 4px) * 16);
2864 }
2865
2866 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
2867 gap: var(--wpds-dimension-gap-lg, 16px);
2868 row-gap: var(--wpds-dimension-gap-sm, 8px);
2869 }
2870
2871 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
2872 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2873 line-height: var(--wpds-typography-line-height-md, 24px);
2874 }
2875
2876 .dataviews-view-list.is-refreshing {
2877 opacity: 0.5;
2878 pointer-events: none;
2879 }
2880
2881 @media not (prefers-reduced-motion) {
2882 .dataviews-view-list.is-refreshing {
2883 opacity: 1;
2884 animation: dataviews-pulse 1s ease-in-out infinite;
2885 }
2886 }
2887 .dataviews-view-list__group-header {
2888 font-size: var(--wpds-typography-font-size-lg, 15px);
2889 font-weight: var(--wpds-typography-font-weight-medium, 499);
2890 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2891 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2892 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
2893 }
2894
2895 .dataviews-view-table {
2896 width: 100%;
2897 text-indent: 0;
2898 border-color: inherit;
2899 border-collapse: collapse;
2900 position: relative;
2901 color: var(--wpds-color-fg-content-neutral-weak, #707070);
2902 margin-bottom: auto;
2903 background-color: inherit;
2904 }
2905
2906 .dataviews-view-table th {
2907 text-align: left;
2908 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2909 font-weight: normal;
2910 font-size: var(--wpds-typography-font-size-md, 13px);
2911 }
2912
2913 .dataviews-view-table td,
2914 .dataviews-view-table th {
2915 padding: var(--wpds-dimension-padding-md, 12px);
2916 }
2917
2918 .dataviews-view-table td.dataviews-view-table__actions-column,
2919 .dataviews-view-table th.dataviews-view-table__actions-column {
2920 text-align: right;
2921 }
2922
2923 .dataviews-view-table td.dataviews-view-table__actions-column--sticky,
2924 .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
2925 position: sticky;
2926 right: 0;
2927 background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
2928 }
2929
2930 .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
2931 .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
2932 display: block;
2933 content: "";
2934 position: absolute;
2935 top: 0;
2936 bottom: 0;
2937 left: 0;
2938 width: 1px;
2939 background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
2940 }
2941
2942 .dataviews-view-table td.dataviews-view-table__checkbox-column,
2943 .dataviews-view-table th.dataviews-view-table__checkbox-column {
2944 padding-right: 0;
2945 }
2946
2947 .dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper,
2948 .dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper {
2949 max-width: auto;
2950 min-width: auto;
2951 }
2952
2953 .dataviews-view-table tr {
2954 border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
2955 background-color: inherit;
2956 }
2957
2958 .dataviews-view-table tr td:first-child,
2959 .dataviews-view-table tr th:first-child {
2960 padding-left: var(--wpds-dimension-padding-2xl, 24px);
2961 }
2962
2963 .dataviews-view-table tr td:last-child,
2964 .dataviews-view-table tr th:last-child {
2965 padding-right: var(--wpds-dimension-padding-2xl, 24px);
2966 }
2967
2968 .dataviews-view-table tr:last-child {
2969 border-bottom: 0;
2970 }
2971
2972 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
2973 opacity: 0;
2974 }
2975
2976 @media (hover: none) {
2977 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
2978 opacity: 1;
2979 }
2980 }
2981 .dataviews-view-table tr.is-selected {
2982 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2983 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2984 }
2985
2986 .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
2987 border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 46%, white));
2988 }
2989
2990 .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
2991 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2992 }
2993
2994 .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
2995 opacity: 1;
2996 }
2997
2998 .dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr:hover .dataviews-view-table__actions-column--sticky {
2999 background-color: var(--wp-dataviews-color-background, var(--wpds-color-bg-surface-neutral-strong, #fff));
3000 }
3001
3002 .dataviews-view-table.has-bulk-actions tr.is-selected .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
3003 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3004 }
3005
3006 .dataviews-view-table thead {
3007 position: sticky;
3008 inset-block-start: 0;
3009 z-index: 1;
3010 background-color: inherit;
3011 }
3012
3013 .dataviews-view-table thead.dataviews-view-table__thead--stuck::after {
3014 display: block;
3015 content: "";
3016 position: absolute;
3017 bottom: 0;
3018 left: 0;
3019 right: 0;
3020 height: 1px;
3021 background-color: var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
3022 }
3023
3024 .dataviews-view-table thead tr {
3025 border: 0;
3026 }
3027
3028 .dataviews-view-table thead th {
3029 background-color: inherit;
3030 padding-top: var(--wpds-dimension-padding-sm, 8px);
3031 padding-bottom: var(--wpds-dimension-padding-sm, 8px);
3032 font-size: 11px;
3033 text-transform: uppercase;
3034 font-weight: var(--wpds-typography-font-weight-medium, 499);
3035 }
3036
3037 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
3038 padding-left: var(--wpds-dimension-padding-xs, 4px);
3039 padding-right: var(--wpds-dimension-padding-xs, 4px);
3040 }
3041
3042 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
3043 gap: var(--wpds-dimension-gap-xs, 4px);
3044 }
3045
3046 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
3047 padding-left: var(--wpds-dimension-padding-lg, 16px);
3048 }
3049
3050 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
3051 padding-right: var(--wpds-dimension-padding-lg, 16px);
3052 }
3053
3054 .dataviews-view-table tbody td {
3055 vertical-align: top;
3056 }
3057
3058 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
3059 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
3060 display: flex;
3061 align-items: center;
3062 white-space: nowrap;
3063 }
3064
3065 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
3066 justify-content: flex-end;
3067 font-variant-numeric: tabular-nums;
3068 }
3069
3070 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
3071 justify-content: center;
3072 }
3073
3074 .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
3075 min-height: 0;
3076 }
3077
3078 .dataviews-view-table .dataviews-view-table-header-button {
3079 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
3080 font-size: 11px;
3081 text-transform: uppercase;
3082 font-weight: var(--wpds-typography-font-weight-medium, 499);
3083 }
3084
3085 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
3086 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
3087 }
3088
3089 .dataviews-view-table .dataviews-view-table-header-button span {
3090 speak: none;
3091 }
3092
3093 .dataviews-view-table .dataviews-view-table-header-button span:empty {
3094 display: none;
3095 }
3096
3097 .dataviews-view-table .dataviews-view-table-header {
3098 padding-left: var(--wpds-dimension-padding-xs, 4px);
3099 }
3100
3101 .dataviews-view-table .dataviews-view-table__actions-column {
3102 width: auto;
3103 white-space: nowrap;
3104 }
3105
3106 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) {
3107 padding-left: 0;
3108 }
3109
3110 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
3111 padding-right: 0;
3112 }
3113
3114 .dataviews-view-table.has-compact-density td,
3115 .dataviews-view-table.has-compact-density th {
3116 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
3117 }
3118
3119 .dataviews-view-table.has-comfortable-density td,
3120 .dataviews-view-table.has-comfortable-density th {
3121 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-md, 12px);
3122 }
3123
3124 .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
3125 .dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column,
3126 .dataviews-view-table.has-comfortable-density th.dataviews-view-table__checkbox-column {
3127 padding-right: 0;
3128 }
3129
3130 .dataviews-view-table-selection-checkbox {
3131 --checkbox-input-size: 24px;
3132 }
3133
3134 @media (min-width: 600px) {
3135 .dataviews-view-table-selection-checkbox {
3136 --checkbox-input-size: 16px;
3137 }
3138 }
3139 .dataviews-column-primary__media {
3140 max-width: 60px;
3141 min-width: calc(var(--wpds-dimension-base, 4px) * 8);
3142 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
3143 overflow: hidden;
3144 position: relative;
3145 flex-shrink: 0;
3146 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
3147 border-radius: var(--wpds-border-radius-md, 4px);
3148 }
3149
3150 .dataviews-column-primary__media img {
3151 width: calc(var(--wpds-dimension-base, 4px) * 8);
3152 height: calc(var(--wpds-dimension-base, 4px) * 8);
3153 object-fit: cover;
3154 }
3155
3156 .dataviews-column-primary__media::after {
3157 content: "";
3158 position: absolute;
3159 top: 0;
3160 left: 0;
3161 width: 100%;
3162 height: 100%;
3163 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3164 border-radius: var(--wpds-border-radius-md, 4px);
3165 }
3166
3167 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
3168 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
3169 min-width: 15ch;
3170 max-width: 80ch;
3171 }
3172
3173 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
3174 font-weight: var(--wpds-typography-font-weight-medium, 499);
3175 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
3176 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
3177 }
3178
3179 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
3180 .dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
3181 width: 1%;
3182 }
3183
3184 .dataviews-view-table.is-refreshing {
3185 opacity: 0.5;
3186 pointer-events: none;
3187 }
3188
3189 @media not (prefers-reduced-motion) {
3190 .dataviews-view-table.is-refreshing {
3191 opacity: 1;
3192 animation: dataviews-pulse 1s ease-in-out infinite;
3193 }
3194 }
3195 .dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
3196 gap: var(--wpds-dimension-gap-lg, 16px);
3197 }
3198
3199 .dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
3200 gap: var(--wpds-dimension-gap-2xl, 32px);
3201 }
3202
3203 .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
3204 height: 100%;
3205 justify-content: flex-start;
3206 position: relative;
3207 isolation: isolate;
3208 }
3209
3210 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
3211 padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
3212 }
3213
3214 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
3215 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
3216 overflow: hidden;
3217 align-content: center;
3218 text-align: start;
3219 }
3220
3221 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3222 width: fit-content;
3223 }
3224
3225 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
3226 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
3227 }
3228
3229 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
3230 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-bg-surface-neutral-strong, #fff);
3231 }
3232
3233 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
3234 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
3235 }
3236
3237 .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
3238 outline: none;
3239 }
3240
3241 .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
3242 outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
3243 }
3244
3245 .dataviews-view-picker-grid .dataviews-selection-checkbox {
3246 top: var(--wpds-dimension-padding-sm, 8px) !important;
3247 }
3248
3249 .dataviews-view-picker-grid .dataviews-selection-checkbox input {
3250 pointer-events: none;
3251 }
3252
3253 .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
3254 width: 100%;
3255 aspect-ratio: 1/1;
3256 min-height: 0;
3257 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
3258 border-radius: var(--wpds-border-radius-md, 4px);
3259 position: relative;
3260 }
3261
3262 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3263 object-fit: cover;
3264 width: 100%;
3265 height: 100%;
3266 }
3267
3268 .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
3269 content: "";
3270 position: absolute;
3271 top: 0;
3272 left: 0;
3273 width: 100%;
3274 height: 100%;
3275 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3276 border-radius: var(--wpds-border-radius-md, 4px);
3277 pointer-events: none;
3278 }
3279
3280 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
3281 position: relative;
3282 font-size: 12px;
3283 line-height: 16px;
3284 }
3285
3286 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
3287 padding: 0 0 var(--wpds-dimension-padding-md, 12px);
3288 }
3289
3290 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
3291 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
3292 line-height: var(--wpds-typography-line-height-sm, 20px);
3293 padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
3294 }
3295
3296 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
3297 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
3298 align-items: center;
3299 }
3300
3301 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
3302 width: 35%;
3303 color: var(--wpds-color-fg-content-neutral-weak, #707070);
3304 overflow: hidden;
3305 text-overflow: ellipsis;
3306 white-space: nowrap;
3307 }
3308
3309 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
3310 width: 65%;
3311 overflow: hidden;
3312 text-overflow: ellipsis;
3313 white-space: nowrap;
3314 }
3315
3316 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
3317 display: none;
3318 }
3319
3320 .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
3321 padding-bottom: var(--wpds-dimension-padding-md, 12px);
3322 }
3323
3324 .dataviews-view-picker-grid__field-value:empty,
3325 .dataviews-view-picker-grid__field:empty {
3326 display: none;
3327 }
3328
3329 .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3330 position: absolute;
3331 top: -9999em;
3332 left: var(--wpds-dimension-padding-sm, 8px);
3333 z-index: 1;
3334 }
3335
3336 @media (hover: none) {
3337 .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3338 top: var(--wpds-dimension-padding-sm, 8px);
3339 }
3340 }
3341 .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
3342 .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
3343 .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
3344 top: var(--wpds-dimension-padding-sm, 8px);
3345 }
3346
3347 .dataviews-view-picker-grid__media--clickable {
3348 cursor: var(--wpds-cursor-control, pointer);
3349 }
3350
3351 .dataviews-view-picker-grid-group__header {
3352 font-size: var(--wpds-typography-font-size-lg, 15px);
3353 font-weight: var(--wpds-typography-font-weight-medium, 499);
3354 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
3355 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3356 padding: 0 calc(var(--wpds-dimension-base, 4px) * 12);
3357 }
3358
3359 .dataviews-view-picker-table {
3360 background-color: inherit;
3361 }
3362
3363 .dataviews-view-picker-table .dataviews-view-table__checkbox-column {
3364 width: calc(var(--wpds-dimension-base, 4px) * 12);
3365 }
3366
3367 .dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] {
3368 outline: none;
3369 }
3370
3371 .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
3372 outline: 2px solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
3373 }
3374
3375 .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
3376 pointer-events: none;
3377 opacity: 1;
3378 }
3379
3380 .dataviews-view-picker-table .dataviews-view-table__row {
3381 cursor: var(--wpds-cursor-control, pointer);
3382 }
3383
3384 .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
3385 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3386 }
3387
3388 .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
3389 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3390 }
3391
3392 .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
3393 background-color: var(--wpds-color-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3394 }
3395
3396 .dataviews-view-activity {
3397 margin: 0 0 auto;
3398 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
3399 }
3400
3401 .dataviews-view-activity .dataviews-view-activity__group-header {
3402 font-size: var(--wpds-typography-font-size-lg, 15px);
3403 font-weight: var(--wpds-typography-font-weight-medium, 499);
3404 color: var(--wpds-color-fg-content-neutral-weak, #707070);
3405 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3406 padding: 0;
3407 }
3408
3409 .dataviews-view-activity .dataviews-view-activity__item-actions {
3410 min-width: calc(var(--wpds-dimension-base, 4px) * 6);
3411 }
3412
3413 .dataviews-view-activity .dataviews-view-activity__item-content {
3414 flex-grow: 1;
3415 }
3416
3417 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
3418 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
3419 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
3420 min-height: calc(var(--wpds-dimension-base, 4px) * 4);
3421 }
3422
3423 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
3424 position: relative;
3425 display: flex;
3426 align-items: center;
3427 flex: 1;
3428 overflow: hidden;
3429 }
3430
3431 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable {
3432 cursor: var(--wpds-cursor-control, pointer);
3433 }
3434
3435 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
3436 outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
3437 outline-offset: var(--wp-admin-border-width-focus);
3438 border-radius: var(--wpds-border-radius-sm, 2px);
3439 }
3440
3441 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3442 display: flex;
3443 width: max-content;
3444 flex: 0 0 auto;
3445 }
3446
3447 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions .components-button {
3448 position: relative;
3449 z-index: 1;
3450 }
3451
3452 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
3453 color: var(--wpds-color-fg-content-neutral-weak, #707070);
3454 display: flex;
3455 gap: var(--wpds-dimension-gap-md, 12px);
3456 row-gap: var(--wpds-dimension-gap-xs, 4px);
3457 flex-wrap: wrap;
3458 }
3459
3460 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty {
3461 display: none;
3462 }
3463
3464 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field:has(.dataviews-view-activity__item-field-value:empty) {
3465 display: none;
3466 }
3467
3468 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field-value {
3469 display: flex;
3470 align-items: center;
3471 }
3472
3473 .dataviews-view-activity .dataviews-view-activity__item-type {
3474 align-self: stretch;
3475 flex-shrink: 0;
3476 }
3477
3478 .dataviews-view-activity .dataviews-view-activity__item-type::after {
3479 content: "";
3480 flex: 1 1 auto;
3481 width: 1px;
3482 margin: 0 auto;
3483 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3484 }
3485
3486 .dataviews-view-activity .dataviews-view-activity__item-type::before {
3487 content: "";
3488 flex: 0 0 auto;
3489 width: 1px;
3490 margin: 0 auto;
3491 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3492 }
3493
3494 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
3495 width: var(--wpds-dimension-padding-md, 12px);
3496 }
3497
3498 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
3499 height: calc(var(--wpds-dimension-base, 4px) * 3);
3500 }
3501
3502 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
3503 width: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
3504 height: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
3505 }
3506
3507 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
3508 margin: var(--wpds-dimension-gap-md, 12px) 0;
3509 }
3510
3511 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
3512 width: calc(var(--wpds-dimension-base, 4px) * 6);
3513 }
3514
3515 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
3516 height: calc(var(--wpds-dimension-base, 4px) * 3);
3517 }
3518
3519 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
3520 width: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
3521 height: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
3522 }
3523
3524 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
3525 margin: var(--wpds-dimension-gap-md, 12px) 0;
3526 padding-top: var(--wpds-dimension-padding-sm, 8px);
3527 }
3528
3529 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
3530 width: calc(var(--wpds-dimension-base, 4px) * 8);
3531 }
3532
3533 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
3534 height: calc(var(--wpds-dimension-base, 4px) * 2);
3535 }
3536
3537 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
3538 width: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
3539 height: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
3540 }
3541
3542 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
3543 margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
3544 padding-top: var(--wpds-dimension-padding-md, 12px);
3545 }
3546
3547 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet {
3548 width: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
3549 height: calc(var(--wpds-dimension-base, 4px) * 2 + 1px);
3550 position: relative;
3551 top: 50%;
3552 transform: translateY(-50%);
3553 }
3554
3555 .dataviews-view-activity .dataviews-view-activity__item:first-child .dataviews-view-activity__item-type::before {
3556 visibility: hidden;
3557 }
3558
3559 .dataviews-view-activity .dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type .dataviews-view-activity__item-type::after, .dataviews-view-activity > .dataviews-view-activity__item:last-child .dataviews-view-activity__item-type::after {
3560 background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%);
3561 }
3562
3563 .dataviews-view-activity .dataviews-view-activity__item-type-icon {
3564 overflow: hidden;
3565 flex-shrink: 0;
3566 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
3567 }
3568
3569 .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
3570 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
3571 .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
3572 display: block;
3573 width: 100%;
3574 height: 100%;
3575 margin: 0 auto;
3576 object-fit: cover;
3577 border-radius: 50%;
3578 box-sizing: border-box;
3579 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3580 }
3581
3582 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
3583 padding: var(--wpds-dimension-padding-xs, 4px);
3584 }
3585
3586 .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
3587 content: "";
3588 background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3589 }
3590
3591 .dataviews-view-activity.is-refreshing {
3592 opacity: 0.5;
3593 pointer-events: none;
3594 }
3595
3596 @media not (prefers-reduced-motion) {
3597 .dataviews-view-activity.is-refreshing {
3598 opacity: 1;
3599 animation: dataviews-pulse 1s ease-in-out infinite;
3600 }
3601 }
3602 .dataviews-view-activity + .dataviews-pagination {
3603 justify-content: space-between;
3604 }
3605
3606 .dataviews-picker-footer__bulk-selection {
3607 align-self: flex-start;
3608 height: calc(var(--wpds-dimension-base, 4px) * 8);
3609 }
3610
3611 .dataviews-picker-footer__actions {
3612 align-self: flex-end;
3613 }
3614
3615 .dataviews-controls__datetime {
3616 border: none;
3617 padding: 0;
3618 }
3619
3620 .dataviews-controls__relative-date-number,
3621 .dataviews-controls__relative-date-unit {
3622 flex: 1 1 50%;
3623 }
3624
3625 .dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
3626 .dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
3627 display: none;
3628 -webkit-appearance: none;
3629 }
3630
3631 .dataviews-controls__date-range-inputs > * {
3632 min-width: 0;
3633 }
3634
3635 .dataviews-controls__color-picker-dropdown {
3636 display: flex;
3637 }
3638
3639 .dataviews-controls__date-preset {
3640 border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3641 }
3642
3643 .dataviews-controls__date-preset:active {
3644 background-color: var(--wpds-color-bg-interactive-neutral-strong-active, #1e1e1e);
3645 }
3646
3647 .dataforms-layouts-panel__field-trigger {
3648 position: relative;
3649 color: inherit;
3650 display: flex;
3651 width: 100%;
3652 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
3653 cursor: var(--wpds-cursor-control, pointer);
3654 align-items: flex-start;
3655 border-radius: var(--wpds-border-radius-sm, 2px);
3656 isolation: isolate;
3657 }
3658
3659 .dataforms-layouts-panel__field-trigger--label-side {
3660 flex-direction: row;
3661 gap: var(--wpds-dimension-gap-md, 12px);
3662 }
3663
3664 .dataforms-layouts-panel__field-trigger--label-top {
3665 display: grid;
3666 grid-template-columns: 1fr auto;
3667 }
3668
3669 .dataforms-layouts-panel__field-trigger--label-none {
3670 align-items: center;
3671 }
3672
3673 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
3674 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3675 }
3676
3677 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
3678 opacity: 1;
3679 }
3680
3681 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
3682 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3683 }
3684
3685 .dataforms-layouts-panel__field-trigger.is-disabled {
3686 cursor: default;
3687 }
3688
3689 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
3690 color: var(--wpds-color-fg-content-neutral-weak, #707070);
3691 font-weight: var(--wpds-typography-font-weight-regular, 400);
3692 }
3693
3694 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
3695 opacity: 1;
3696 fill: currentColor;
3697 }
3698
3699 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:hover, .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3700 fill: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3701 }
3702
3703 .dataforms-layouts-panel__field-trigger-icon {
3704 padding: 0;
3705 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3706 flex: 0 0 auto;
3707 opacity: 0;
3708 border-radius: var(--wpds-border-radius-xs, 1px);
3709 }
3710
3711 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3712 opacity: 1;
3713 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
3714 }
3715
3716 .dataforms-layouts-panel__field-dropdown-anchor {
3717 width: 100%;
3718 }
3719
3720 .dataforms-layouts-panel__field-dropdown-anchor .components-dropdown {
3721 width: 100%;
3722 }
3723
3724 .dataforms-layouts-panel__field-label {
3725 width: 38%;
3726 flex-shrink: 0;
3727 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
3728 display: flex;
3729 align-items: center;
3730 line-height: var(--wpds-typography-line-height-sm, 20px);
3731 hyphens: auto;
3732 color: var(--wpds-color-fg-content-neutral-weak, #707070);
3733 }
3734
3735 .dataforms-layouts-panel__field-label .components-base-control__label {
3736 display: inline;
3737 margin-bottom: 0;
3738 line-height: inherit;
3739 }
3740
3741 .dataforms-layouts-panel__field-label.has-error {
3742 color: var(--wpds-color-fg-content-error-weak, #cc1818);
3743 }
3744
3745 .dataforms-layouts-panel__field-label-error-content {
3746 position: relative;
3747 z-index: 1;
3748 cursor: help;
3749 fill: var(--wpds-color-fg-content-error-weak, #cc1818);
3750 display: inline-flex;
3751 flex-direction: row;
3752 align-items: center;
3753 gap: var(--wpds-dimension-gap-xs, 4px);
3754 }
3755
3756 .dataforms-layouts-panel__field-label-error-content svg {
3757 fill: currentColor;
3758 }
3759
3760 .dataforms-layouts-panel__field-control {
3761 flex-grow: 1;
3762 min-width: 0;
3763 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
3764 line-height: var(--wpds-typography-line-height-md, 24px);
3765 display: flex;
3766 align-items: center;
3767 overflow: hidden;
3768 word-break: break-word;
3769 font-weight: var(--wpds-typography-font-weight-medium, 499);
3770 }
3771
3772 .dataforms-layouts-panel__field-control > * {
3773 min-width: 0;
3774 }
3775
3776 .dataforms-layouts-panel__field-control .components-button {
3777 max-width: 100%;
3778 text-align: left;
3779 white-space: normal;
3780 text-wrap: balance;
3781 text-wrap: pretty;
3782 min-height: 32px;
3783 }
3784
3785 .dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
3786 text-decoration: none;
3787 }
3788
3789 .dataforms-layouts-panel__field-control .components-dropdown {
3790 max-width: 100%;
3791 }
3792
3793 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
3794 width: 100%;
3795 }
3796
3797 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control {
3798 grid-column: 1/-1;
3799 }
3800
3801 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon {
3802 grid-row: 1;
3803 grid-column: 2;
3804 }
3805
3806 .dataforms-layouts-panel__field-dropdown .components-popover__content {
3807 min-width: 320px;
3808 padding: var(--wpds-dimension-padding-lg, 16px);
3809 }
3810
3811 .dataforms-layouts-panel__dropdown-header {
3812 margin-bottom: var(--wpds-dimension-gap-lg, 16px);
3813 }
3814
3815 .dataforms-layouts-panel__modal-footer {
3816 margin-top: var(--wpds-dimension-gap-lg, 16px);
3817 }
3818
3819 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
3820 z-index: 159990;
3821 }
3822
3823 .dataforms-layouts-panel__summary-button:empty {
3824 min-width: 160px;
3825 }
3826
3827 .dataforms-layouts-regular__field {
3828 width: 100%;
3829 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
3830 justify-content: flex-start !important;
3831 align-items: flex-start !important;
3832 }
3833
3834 .dataforms-layouts-regular__field .components-base-control__label,
3835 .dataforms-layouts-regular__field .components-input-control__label,
3836 .dataforms-layouts-regular__field .components-form-token-field__label {
3837 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
3838 }
3839
3840 .dataforms-layouts-regular__field-label {
3841 width: 38%;
3842 flex-shrink: 0;
3843 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
3844 display: flex;
3845 align-items: center;
3846 line-height: var(--wpds-typography-line-height-sm, 20px);
3847 hyphens: auto;
3848 }
3849
3850 .dataforms-layouts-regular__field-label--label-position-side {
3851 align-self: center;
3852 }
3853
3854 .dataforms-layouts-regular__field-label .components-base-control__label {
3855 margin-bottom: 0;
3856 }
3857
3858 .dataforms-layouts-regular__field-control {
3859 flex-grow: 1;
3860 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
3861 display: flex;
3862 align-items: center;
3863 }
3864
3865 .dataforms-layouts-card__field {
3866 width: 100%;
3867 }
3868
3869 .dataforms-layouts-card__field-header-content {
3870 min-height: 24px;
3871 }
3872
3873 .dataforms-layouts-card__field-header-content-description {
3874 display: contents;
3875 }
3876
3877 .dataforms-layouts-card__field-description {
3878 color: var(--wpds-color-fg-content-neutral-weak, #707070);
3879 display: block;
3880 font-size: var(--wpds-typography-font-size-md, 13px);
3881 margin-bottom: var(--wpds-dimension-gap-lg, 16px);
3882 }
3883
3884 .dataforms-layouts-card__field-summary {
3885 display: flex;
3886 flex-direction: row;
3887 gap: var(--wpds-dimension-gap-lg, 16px);
3888 align-items: center;
3889 }
3890
3891 .dataforms-layouts-details__summary-content {
3892 display: inline-flex;
3893 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
3894 }
3895
3896 .dataforms-layouts-details__content {
3897 padding-top: var(--wpds-dimension-padding-md, 12px);
3898 }
3899
3900 .dataforms-layouts-row__field-control {
3901 width: 100%;
3902 }
3903
3904 .dataforms-layouts__wrapper {
3905 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3906 font-weight: 400;
3907 font-size: 13px;
3908 line-height: 20px;
3909 }
3910
3911 /**
3912 * Typography
3913 */
3914 /**
3915 * SCSS Variables.
3916 *
3917 * Please use variables from this sheet to ensure consistency across the UI.
3918 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
3919 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
3920 */
3921 /**
3922 * Colors
3923 */
3924 /**
3925 * Fonts & basic variables.
3926 */
3927 /**
3928 * Typography
3929 */
3930 /**
3931 * Grid System.
3932 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
3933 */
3934 /**
3935 * Radius scale.
3936 */
3937 /**
3938 * Elevation scale.
3939 */
3940 /**
3941 * Dimensions.
3942 */
3943 /**
3944 * Mobile specific styles
3945 */
3946 /**
3947 * Editor styles.
3948 */
3949 /**
3950 * Block & Editor UI.
3951 */
3952 /**
3953 * Block paddings.
3954 */
3955 /**
3956 * React Native specific.
3957 * These variables do not appear to be used anywhere else.
3958 */
3959 /**
3960 * Breakpoints & Media Queries
3961 */
3962 /**
3963 * Converts a hex value into the rgb equivalent.
3964 *
3965 * @param {string} hex - the hexadecimal value to convert
3966 * @return {string} comma separated rgb values
3967 */
3968 /**
3969 * Long content fade mixin
3970 *
3971 * Creates a fading overlay to signify that the content is longer
3972 * than the space allows.
3973 */
3974 /**
3975 * Breakpoint mixins
3976 */
3977 /**
3978 * Focus styles.
3979 */
3980 /**
3981 * Applies editor left position to the selector passed as argument
3982 */
3983 /**
3984 * Styles that are reused verbatim in a few places
3985 */
3986 /**
3987 * Allows users to opt-out of animations via OS-level preferences.
3988 */
3989 /**
3990 * Reset default styles for JavaScript UI based pages.
3991 * This is a WP-admin agnostic reset
3992 */
3993 /**
3994 * Reset the WP Admin page styles for Gutenberg-like pages.
3995 */
3996 /**
3997 * Creates a checkerboard pattern background to indicate transparency.
3998 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
3999 */
4000 :root {
4001 --wp-block-synced-color: #7a00df;
4002 --wp-block-synced-color--rgb: 122, 0, 223;
4003 --wp-bound-block-color: var(--wp-block-synced-color);
4004 --wp-editor-canvas-background: #ddd;
4005 --wp-admin-theme-color: #007cba;
4006 --wp-admin-theme-color--rgb: 0, 124, 186;
4007 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
4008 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
4009 --wp-admin-theme-color-darker-20: #005a87;
4010 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
4011 --wp-admin-border-width-focus: 2px;
4012 }
4013
4014 @media (min-resolution: 192dpi) {
4015 :root {
4016 --wp-admin-border-width-focus: 1.5px;
4017 }
4018 }
4019 .fields-create-template-part-modal {
4020 z-index: 1000001;
4021 }
4022
4023 .fields-create-template-part-modal__area-fieldset {
4024 border: 0;
4025 padding: 0;
4026 margin: 0;
4027 }
4028
4029 .fields-create-template-part-modal__area-radio-group {
4030 border: 1px solid #949494;
4031 border-radius: 2px;
4032 }
4033
4034 .fields-create-template-part-modal__area-radio-wrapper {
4035 position: relative;
4036 padding: 12px;
4037 display: grid;
4038 align-items: center;
4039 grid-template-columns: min-content 1fr min-content;
4040 grid-gap: 4px 8px;
4041 color: #1e1e1e;
4042 }
4043
4044 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
4045 border-top: 1px solid #949494;
4046 }
4047
4048 .fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
4049 position: absolute;
4050 opacity: 0;
4051 }
4052
4053 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
4054 z-index: 1;
4055 }
4056
4057 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
4058 color: var(--wp-admin-theme-color);
4059 }
4060
4061 .fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
4062 pointer-events: none;
4063 }
4064
4065 .fields-create-template-part-modal__area-radio-label::before {
4066 content: "";
4067 position: absolute;
4068 inset: 0;
4069 }
4070
4071 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
4072 cursor: var(--wpds-cursor-control, pointer);
4073 }
4074
4075 input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
4076 outline: 4px solid transparent;
4077 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4078 }
4079
4080 .fields-create-template-part-modal__area-radio-icon,
4081 .fields-create-template-part-modal__area-radio-checkmark {
4082 fill: currentColor;
4083 }
4084
4085 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
4086 opacity: 0;
4087 }
4088
4089 .fields-create-template-part-modal__area-radio-description {
4090 grid-column: 2/3;
4091 margin: 0;
4092 color: #757575;
4093 font-size: 12px;
4094 line-height: normal;
4095 text-wrap: pretty;
4096 }
4097
4098 input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
4099 color: inherit;
4100 }
4101
4102 fieldset.fields__media-edit {
4103 border: 0;
4104 padding: 0;
4105 margin: 0;
4106 width: 100%;
4107 }
4108
4109 fieldset.fields__media-edit .components-base-control__label {
4110 color: #1e1e1e;
4111 }
4112
4113 fieldset.fields__media-edit .fields__media-edit-description {
4114 font-size: 12px;
4115 line-height: 1.5;
4116 }
4117
4118 fieldset.fields__media-edit {
4119 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
4120 container-type: inline-size;
4121 }
4122
4123 fieldset.fields__media-edit .fields__media-edit-compact-group {
4124 border: 1px dashed #949494;
4125 border-radius: 4px;
4126 overflow: hidden;
4127 }
4128
4129 fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
4130 border-radius: 2px;
4131 }
4132
4133 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
4134 border: 0;
4135 border-radius: 0;
4136 }
4137
4138 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
4139 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4140 }
4141
4142 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
4143 border-bottom: 1px solid #f0f0f0;
4144 }
4145
4146 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
4147 display: flex;
4148 align-items: center;
4149 gap: 8px;
4150 }
4151
4152 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4153 margin: 0;
4154 }
4155
4156 fieldset.fields__media-edit .fields__media-edit-compact {
4157 position: relative;
4158 min-width: 0;
4159 }
4160
4161 fieldset.fields__media-edit .fields__media-edit-compact:hover .fields__media-edit-compact-movers, fieldset.fields__media-edit .fields__media-edit-compact:focus-within .fields__media-edit-compact-movers {
4162 opacity: 1;
4163 }
4164
4165 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
4166 position: absolute;
4167 right: 8px;
4168 top: 50%;
4169 transform: translateY(-50%);
4170 opacity: 0;
4171 pointer-events: none;
4172 z-index: 1;
4173 border-radius: 2px;
4174 background: #fff;
4175 }
4176
4177 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
4178 pointer-events: auto;
4179 }
4180
4181 fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner {
4182 display: flex;
4183 align-items: center;
4184 gap: 8px;
4185 }
4186
4187 fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4188 margin: 0;
4189 }
4190
4191 fieldset.fields__media-edit .fields__media-edit-picker-button {
4192 position: relative;
4193 display: flex;
4194 align-items: center;
4195 gap: 8px;
4196 border: 1px dashed #949494;
4197 border-radius: 2px;
4198 padding: 4px 8px;
4199 min-height: 40px;
4200 cursor: var(--wpds-cursor-control, pointer);
4201 min-width: 0;
4202 }
4203
4204 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
4205 border-color: var(--wp-admin-theme-color);
4206 color: var(--wp-admin-theme-color);
4207 }
4208
4209 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
4210 background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
4211 color: var(--wp-admin-theme-color-darker-20);
4212 border-color: var(--wp-admin-theme-color-darker-20);
4213 }
4214
4215 fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
4216 color: var(--wp-admin-theme-color);
4217 }
4218
4219 fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
4220 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4221 outline: none;
4222 }
4223
4224 fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] {
4225 opacity: 0.6;
4226 cursor: default;
4227 }
4228
4229 fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner {
4230 position: absolute;
4231 top: 50%;
4232 left: 50%;
4233 transform: translate(-50%, -50%);
4234 z-index: 1;
4235 }
4236
4237 fieldset.fields__media-edit .fields__media-edit-filename,
4238 fieldset.fields__media-edit .fields__media-edit-placeholder {
4239 flex: 1;
4240 width: 100%;
4241 min-width: 0;
4242 }
4243
4244 fieldset.fields__media-edit .fields__media-edit-placeholder {
4245 text-align: center;
4246 }
4247
4248 fieldset.fields__media-edit .fields__media-edit-thumbnail {
4249 width: 24px;
4250 aspect-ratio: 1/1;
4251 flex-shrink: 0;
4252 border-radius: 2px;
4253 }
4254
4255 fieldset.fields__media-edit .fields__media-edit-expanded {
4256 display: grid;
4257 gap: 8px;
4258 }
4259
4260 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
4261 display: flex;
4262 align-items: center;
4263 gap: 8px;
4264 }
4265
4266 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4267 margin: 0;
4268 }
4269
4270 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview {
4271 position: relative;
4272 width: 100%;
4273 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
4274 border-radius: 2px;
4275 padding: 4px;
4276 overflow: hidden;
4277 display: flex;
4278 align-items: center;
4279 justify-content: center;
4280 }
4281
4282 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack {
4283 width: 100%;
4284 height: 100%;
4285 }
4286
4287 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
4288 position: absolute;
4289 top: 0;
4290 left: 0;
4291 right: 0;
4292 bottom: 0;
4293 opacity: 0;
4294 pointer-events: none;
4295 }
4296
4297 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
4298 pointer-events: auto;
4299 }
4300
4301 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
4302 position: absolute;
4303 top: 4px;
4304 right: 4px;
4305 border-radius: 2px;
4306 background: #fff;
4307 }
4308
4309 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
4310 position: relative;
4311 min-width: 0;
4312 border-radius: 4px;
4313 }
4314
4315 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:hover .fields__media-edit-expanded-overlay, fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:focus-within .fields__media-edit-expanded-overlay {
4316 opacity: 1;
4317 }
4318
4319 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack {
4320 padding: 8px;
4321 }
4322
4323 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4324 width: 100%;
4325 height: 100%;
4326 object-fit: cover;
4327 object-position: 50% 50%;
4328 }
4329
4330 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
4331 text-align: center;
4332 flex: none;
4333 }
4334
4335 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg {
4336 margin: 0;
4337 }
4338
4339 fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
4340 grid-template-columns: 1fr;
4341 }
4342
4343 fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
4344 aspect-ratio: 2/1;
4345 }
4346
4347 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
4348 border-radius: 4px;
4349 }
4350
4351 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
4352 border-radius: 2px;
4353 }
4354
4355 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
4356 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
4357 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
4358 }
4359
4360 @container (max-width: 500px) {
4361 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
4362 grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
4363 }
4364 }
4365 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button {
4366 padding: 0;
4367 }
4368
4369 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder {
4370 display: flex;
4371 align-items: center;
4372 justify-content: center;
4373 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
4374 }
4375
4376 .fields-controls__author-avatar {
4377 flex-shrink: 0;
4378 overflow: hidden;
4379 width: 24px;
4380 height: 24px;
4381 align-items: center;
4382 justify-content: left;
4383 display: flex;
4384 }
4385
4386 .fields-controls__author-avatar img {
4387 width: 16px;
4388 height: 16px;
4389 object-fit: cover;
4390 opacity: 0;
4391 border-radius: 100%;
4392 }
4393
4394 @media not (prefers-reduced-motion) {
4395 .fields-controls__author-avatar img {
4396 transition: opacity 0.1s linear;
4397 }
4398 }
4399 .fields-controls__author-avatar.is-loaded img {
4400 opacity: 1;
4401 }
4402
4403 .fields-controls__author-icon {
4404 display: flex;
4405 flex-shrink: 0;
4406 width: 24px;
4407 height: 24px;
4408 }
4409
4410 .fields-controls__author-icon svg {
4411 margin-left: -4px;
4412 fill: currentColor;
4413 }
4414
4415 .fields-controls__author-name {
4416 text-overflow: ellipsis;
4417 overflow: hidden;
4418 }
4419
4420 .fields-controls__slug {
4421 border: 0;
4422 padding: 0;
4423 margin: 0;
4424 }
4425
4426 .fields-controls__slug .fields-controls__slug-external-icon {
4427 margin-left: 5ch;
4428 }
4429
4430 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4431 padding-inline-start: 0 !important;
4432 }
4433
4434 .fields-controls__slug .fields-controls__slug-help-link {
4435 word-break: break-word;
4436 }
4437
4438 .fields-controls__slug .fields-controls__slug-help {
4439 display: flex;
4440 flex-direction: column;
4441 }
4442
4443 .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
4444 font-weight: 600;
4445 }
4446
4447 .fields-controls__featured-image-image,
4448 .fields-controls__featured-image-placeholder {
4449 width: 100%;
4450 height: 100%;
4451 display: block;
4452 border-radius: 4px;
4453 }
4454
4455 .fields-controls__featured-image-placeholder {
4456 box-shadow: none;
4457 background: #f0f0f0;
4458 }
4459
4460 .fields-controls__parent {
4461 border: 0;
4462 padding: 0;
4463 margin: 0;
4464 }
4465
4466 .fields-controls__password {
4467 border: 0;
4468 padding: 0;
4469 margin: 0;
4470 }
4471
4472 .fields-controls__status-icon {
4473 height: 24px;
4474 width: 24px;
4475 }
4476
4477 .fields-controls__status-icon svg {
4478 fill: currentColor;
4479 margin-left: -4px;
4480 }
4481
4482 .fields-field__title > span:first-child {
4483 text-overflow: ellipsis;
4484 overflow: hidden;
4485 text-decoration: none;
4486 white-space: nowrap;
4487 display: block;
4488 flex-grow: 0;
4489 }
4490
4491 .fields-field__pattern-title span:first-child {
4492 flex: 1;
4493 }
4494
4495 /**
4496 * Colors
4497 */
4498 /**
4499 * SCSS Variables.
4500 *
4501 * Please use variables from this sheet to ensure consistency across the UI.
4502 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
4503 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
4504 */
4505 /**
4506 * Fonts & basic variables.
4507 */
4508 /**
4509 * Typography
4510 */
4511 /**
4512 * Grid System.
4513 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
4514 */
4515 /**
4516 * Radius scale.
4517 */
4518 /**
4519 * Elevation scale.
4520 */
4521 /**
4522 * Dimensions.
4523 */
4524 /**
4525 * Mobile specific styles
4526 */
4527 /**
4528 * Editor styles.
4529 */
4530 /**
4531 * Block & Editor UI.
4532 */
4533 /**
4534 * Block paddings.
4535 */
4536 /**
4537 * React Native specific.
4538 * These variables do not appear to be used anywhere else.
4539 */
4540 .media-editor-preview {
4541 box-sizing: border-box;
4542 display: flex;
4543 justify-content: center;
4544 align-items: center;
4545 min-height: 100%;
4546 padding: 32px;
4547 position: relative;
4548 }
4549
4550 .media-editor-preview__spinner {
4551 position: absolute;
4552 top: 50%;
4553 left: 50%;
4554 transform: translate(-50%, -50%);
4555 }
4556
4557 .media-editor-preview--loading {
4558 width: 100%;
4559 height: 100%;
4560 }
4561
4562 .media-editor-preview--image img {
4563 max-width: 100%;
4564 max-height: 100%;
4565 object-fit: contain;
4566 width: auto;
4567 height: auto;
4568 opacity: 0;
4569 }
4570
4571 @keyframes __wp-base-styles-fade-in {
4572 from {
4573 opacity: 0;
4574 }
4575 to {
4576 opacity: 1;
4577 }
4578 }
4579 @media not (prefers-reduced-motion) {
4580 .media-editor-preview--image img.loaded {
4581 animation: __wp-base-styles-fade-in 0.08s linear 0s;
4582 animation-fill-mode: forwards;
4583 }
4584 }
4585 .media-editor-preview--video video {
4586 max-width: 100%;
4587 max-height: 100%;
4588 object-fit: contain;
4589 width: auto;
4590 height: auto;
4591 }
4592
4593 .media-editor-preview--audio audio {
4594 max-width: 100%;
4595 }
4596
4597 .media-editor-preview--file {
4598 text-align: center;
4599 }
4600
4601 .media-editor-preview__file-info {
4602 background: #f0f0f0;
4603 padding: 24px;
4604 border-radius: 2px;
4605 }
4606
4607 .media-editor-preview__file-name {
4608 font-weight: 600;
4609 margin-bottom: 8px;
4610 }
4611
4612 .media-editor-preview__mime-type {
4613 color: #757575;
4614 font-size: 0.9em;
4615 margin-bottom: 16px;
4616 }
4617
4618 .media-editor-preview__download-link {
4619 display: inline-block;
4620 margin-top: 8px;
4621 }
4622
4623 .media-editor-preview--error, .media-editor-preview--empty {
4624 color: #757575;
4625 text-align: center;
4626 }
4627
4628 .media-editor-preview__url {
4629 font-size: 0.9em;
4630 color: #949494;
4631 word-break: break-all;
4632 margin-top: 8px;
4633 }
4634
4635 .wp-media-editor-image-editor {
4636 position: relative;
4637 overflow: hidden;
4638 width: 100%;
4639 height: 100%;
4640 touch-action: none;
4641 -webkit-user-select: none;
4642 user-select: none;
4643 cursor: grab;
4644 }
4645
4646 .wp-media-editor-image-editor__canvas {
4647 position: absolute;
4648 inset: 22px;
4649 }
4650
4651 .wp-media-editor-image-editor__canvas:focus {
4652 outline: none;
4653 }
4654
4655 .wp-media-editor-image-editor__stage {
4656 position: absolute;
4657 inset: 0;
4658 }
4659
4660 .wp-media-editor-image-editor--dragging {
4661 cursor: grabbing;
4662 }
4663
4664 .wp-media-editor-image-editor__image {
4665 position: absolute;
4666 top: 0;
4667 left: 0;
4668 will-change: transform;
4669 transform-origin: center center;
4670 }
4671
4672 .wp-media-editor-image-editor__stencil {
4673 position: absolute;
4674 pointer-events: none;
4675 }
4676
4677 .wp-media-editor-image-editor__dimming {
4678 position: absolute;
4679 pointer-events: none;
4680 /* Large shadow spread dims everything outside the crop area.
4681 Darker at rest for clear crop framing, lighter during drag
4682 so the user can see where they're panning. */
4683 box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
4684 transition: box-shadow 0.15s ease;
4685 }
4686
4687 .wp-media-editor-image-editor--dragging .wp-media-editor-image-editor__dimming {
4688 box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
4689 }
4690
4691 .wp-media-editor-image-editor__grid {
4692 position: absolute;
4693 pointer-events: none;
4694 overflow: hidden;
4695 transition: opacity 0.15s ease;
4696 }
4697
4698 .wp-media-editor-image-editor__canvas--grid-interactive .wp-media-editor-image-editor__grid {
4699 opacity: 0;
4700 transition-delay: 0.1s;
4701 }
4702
4703 .wp-media-editor-image-editor__canvas--show-grid .wp-media-editor-image-editor__grid {
4704 opacity: 1;
4705 transition-delay: 0s;
4706 }
4707
4708 .wp-media-editor-image-editor__canvas--settling .wp-media-editor-image-editor__grid {
4709 opacity: 0;
4710 transition: none;
4711 }
4712
4713 .wp-media-editor-image-editor__grid-line {
4714 position: absolute;
4715 background: rgba(255, 255, 255, 0.4);
4716 }
4717
4718 .wp-media-editor-image-editor__grid-line--horizontal {
4719 left: 0;
4720 width: 100%;
4721 height: 1px;
4722 }
4723
4724 .wp-media-editor-image-editor__grid-line--vertical {
4725 top: 0;
4726 height: 100%;
4727 width: 1px;
4728 }
4729
4730 .wp-media-editor-image-editor__dimensions-tooltip {
4731 position: absolute;
4732 padding: 2px 6px;
4733 background: #fff;
4734 color: #1e1e1e;
4735 font-size: 11px;
4736 line-height: 1.4;
4737 font-variant-numeric: tabular-nums;
4738 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
4739 pointer-events: none;
4740 white-space: nowrap;
4741 z-index: 2;
4742 }
4743
4744 .wp-media-editor-image-editor__stencil-rect {
4745 position: absolute;
4746 border: 1px solid rgba(255, 255, 255, 0.7);
4747 box-sizing: border-box;
4748 pointer-events: none;
4749 transition: border-color 0.15s ease, box-shadow 0.15s ease;
4750 }
4751
4752 .wp-media-editor-image-editor__canvas--focus-visible:focus .wp-media-editor-image-editor__stencil-rect {
4753 border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
4754 box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
4755 }
4756
4757 .wp-media-editor-image-editor__handle {
4758 appearance: none;
4759 margin: 0;
4760 padding: 0;
4761 font: inherit;
4762 cursor: default;
4763 position: absolute;
4764 width: 12px;
4765 height: 12px;
4766 background: rgba(255, 255, 255, 0.6);
4767 border: 1px solid rgba(255, 255, 255, 0.9);
4768 border-radius: 50%;
4769 box-sizing: border-box;
4770 pointer-events: auto;
4771 transition: background-color 0.15s ease, box-shadow 0.15s ease;
4772 }
4773
4774 .wp-media-editor-image-editor__handle:focus {
4775 outline: none;
4776 }
4777
4778 .wp-media-editor-image-editor__canvas--focus-visible .wp-media-editor-image-editor__handle:focus {
4779 background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
4780 border-color: transparent;
4781 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
4782 }
4783
4784 .wp-media-editor-image-editor__handle::before {
4785 content: "";
4786 position: absolute;
4787 top: 50%;
4788 left: 50%;
4789 width: 44px;
4790 height: 44px;
4791 transform: translate(-50%, -50%);
4792 }
4793
4794 .wp-media-editor-image-editor__handle {
4795 /* Offset by half the handle width (12px / 2 = 6px) to center on crop edge */
4796 }
4797
4798 .wp-media-editor-image-editor__handle--n {
4799 top: -6px;
4800 left: 50%;
4801 margin-left: -6px;
4802 cursor: ns-resize;
4803 }
4804
4805 .wp-media-editor-image-editor__handle--s {
4806 bottom: -6px;
4807 left: 50%;
4808 margin-left: -6px;
4809 cursor: ns-resize;
4810 }
4811
4812 .wp-media-editor-image-editor__handle--e {
4813 top: 50%;
4814 right: -6px;
4815 margin-top: -6px;
4816 cursor: ew-resize;
4817 }
4818
4819 .wp-media-editor-image-editor__handle--w {
4820 top: 50%;
4821 left: -6px;
4822 margin-top: -6px;
4823 cursor: ew-resize;
4824 }
4825
4826 .wp-media-editor-image-editor__handle--nw {
4827 top: -6px;
4828 left: -6px;
4829 cursor: nwse-resize;
4830 }
4831
4832 .wp-media-editor-image-editor__handle--ne {
4833 top: -6px;
4834 right: -6px;
4835 cursor: nesw-resize;
4836 }
4837
4838 .wp-media-editor-image-editor__handle--sw {
4839 bottom: -6px;
4840 left: -6px;
4841 cursor: nesw-resize;
4842 }
4843
4844 .wp-media-editor-image-editor__handle--se {
4845 bottom: -6px;
4846 right: -6px;
4847 cursor: nwse-resize;
4848 }
4849
4850 /**
4851 * Typography
4852 */
4853 /**
4854 * Breakpoints & Media Queries
4855 */
4856 /**
4857 * Converts a hex value into the rgb equivalent.
4858 *
4859 * @param {string} hex - the hexadecimal value to convert
4860 * @return {string} comma separated rgb values
4861 */
4862 /**
4863 * Long content fade mixin
4864 *
4865 * Creates a fading overlay to signify that the content is longer
4866 * than the space allows.
4867 */
4868 /**
4869 * Breakpoint mixins
4870 */
4871 /**
4872 * Focus styles.
4873 */
4874 /**
4875 * Applies editor left position to the selector passed as argument
4876 */
4877 /**
4878 * Styles that are reused verbatim in a few places
4879 */
4880 /**
4881 * Allows users to opt-out of animations via OS-level preferences.
4882 */
4883 /**
4884 * Reset default styles for JavaScript UI based pages.
4885 * This is a WP-admin agnostic reset
4886 */
4887 /**
4888 * Reset the WP Admin page styles for Gutenberg-like pages.
4889 */
4890 /**
4891 * Creates a checkerboard pattern background to indicate transparency.
4892 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
4893 */
4894 .media-editor {
4895 display: flex;
4896 flex: 1;
4897 flex-direction: column;
4898 height: 100%;
4899 min-height: 0;
4900 }
4901
4902 .media-editor .media-editor__loading {
4903 height: 100%;
4904 display: flex;
4905 align-items: center;
4906 justify-content: center;
4907 }
4908
4909 .media-editor .interface-interface-skeleton {
4910 position: relative;
4911 top: auto;
4912 right: auto;
4913 bottom: auto;
4914 left: auto;
4915 height: 100%;
4916 max-height: none;
4917 flex: 1;
4918 flex-direction: column;
4919 }
4920
4921 .media-editor .interface-interface-skeleton__editor {
4922 min-width: 0;
4923 flex: 1;
4924 }
4925
4926 .media-editor .media-editor__canvas {
4927 display: flex;
4928 align-items: center;
4929 justify-content: center;
4930 background: #f0f0f0;
4931 overflow: auto;
4932 height: 100%;
4933 }
4934
4935 .media-editor .media-editor__canvas .media-editor-preview {
4936 height: 100%;
4937 }
4938
4939 .media-editor .media-editor__canvas img,
4940 .media-editor .media-editor__canvas video {
4941 max-width: 100%;
4942 max-height: 100%;
4943 object-fit: contain;
4944 }
4945
4946 .media-editor .media-editor__sidebar {
4947 box-sizing: border-box;
4948 }
4949
4950 .media-editor .media-editor__sidebar *,
4951 .media-editor .media-editor__sidebar *::before,
4952 .media-editor .media-editor__sidebar *::after {
4953 box-sizing: inherit;
4954 }
4955
4956 .media-editor .media-editor__panel {
4957 padding: 16px;
4958 }
4959
4960 .media-editor .components-panel__header.media-editor__sidebar-header {
4961 padding-left: 0;
4962 padding-right: 8px;
4963 }
4964
4965 .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
4966 padding: 0;
4967 }
4968
4969 @media (min-width: 782px) {
4970 .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
4971 display: flex;
4972 }
4973 }
4974 .media-editor__snackbar {
4975 position: fixed;
4976 bottom: 24px;
4977 left: 0;
4978 right: 0;
4979 padding-inline: 16px;
4980 box-sizing: border-box;
4981 display: flex;
4982 flex-direction: column;
4983 pointer-events: none;
4984 }
4985
4986 .media-editor__snackbar .components-snackbar {
4987 margin-inline: auto;
4988 }
4989
4990 .media-editor-modal.components-modal__frame .components-modal__content {
4991 padding: 0;
4992 margin-bottom: 0;
4993 display: flex;
4994 flex-direction: column;
4995 min-height: 0;
4996 }
4997
4998 .media-editor-modal.components-modal__frame .components-modal__children-container {
4999 display: flex;
5000 flex: 1;
5001 flex-direction: column;
5002 min-height: 0;
5003 }
5004
5005 .media-editor-modal.components-modal__frame .media-editor-modal__footer {
5006 flex-shrink: 0;
5007 display: flex;
5008 gap: 16px;
5009 padding: 8px 24px;
5010 border-top: 1px solid #ddd;
5011 background: #fff;
5012 }
5013
5014 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5015 flex-direction: row;
5016 align-items: center;
5017 }
5018
5019 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor-modal__footer-toolbar {
5020 flex: 1 1 0;
5021 min-width: 0;
5022 display: flex;
5023 align-items: center;
5024 justify-content: center;
5025 gap: 8px;
5026 }
5027
5028 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor-fine-rotation {
5029 flex: 1 1 280px;
5030 min-width: 0;
5031 max-width: 360px;
5032 }
5033
5034 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor-transform-controls {
5035 border-left: 1px solid #ddd;
5036 padding-left: 12px;
5037 }
5038
5039 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__footer-actions {
5040 margin-left: auto;
5041 }
5042
5043 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-medium, .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5044 flex-direction: column;
5045 }
5046
5047 .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-transform-controls {
5048 align-self: center;
5049 }
5050
5051 .media-editor-modal__footer-row {
5052 display: flex;
5053 flex-wrap: wrap;
5054 align-items: center;
5055 gap: 16px;
5056 }
5057
5058 .media-editor-modal__footer-row .media-editor-transform-controls,
5059 .media-editor-modal__footer-row .media-editor__footer-actions {
5060 margin-left: auto;
5061 }
5062
5063 .media-editor-modal {
5064 display: flex;
5065 flex-direction: column;
5066 }
5067
5068 .media-editor-modal__snackbar {
5069 position: fixed;
5070 bottom: 24px;
5071 left: 0;
5072 right: 0;
5073 padding-inline: 16px;
5074 box-sizing: border-box;
5075 display: flex;
5076 flex-direction: column;
5077 pointer-events: none;
5078 }
5079
5080 .media-editor-modal__snackbar .components-snackbar {
5081 margin-inline: auto;
5082 }
5083
5084 .media-editor-modal__snackbar {
5085 z-index: 1000001;
5086 }
5087
5088 .media-editor-canvas {
5089 position: relative;
5090 width: 100%;
5091 height: 100%;
5092 }
5093
5094 .media-editor-transform-controls {
5095 display: flex;
5096 flex-wrap: nowrap;
5097 align-items: center;
5098 gap: 8px;
5099 }
5100
5101 .media-editor-keyboard-shortcuts-modal {
5102 min-width: 280px;
5103 }
5104
5105 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__note {
5106 margin: 0 0 16px;
5107 color: #757575;
5108 font-size: 13px;
5109 }
5110
5111 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-list {
5112 list-style: none;
5113 margin: 0;
5114 padding: 0;
5115 }
5116
5117 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut {
5118 display: flex;
5119 align-items: baseline;
5120 padding: 0.6rem 0;
5121 border-top: 1px solid #ddd;
5122 margin-bottom: 0;
5123 }
5124
5125 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut:last-child {
5126 border-bottom: 1px solid #ddd;
5127 }
5128
5129 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-description {
5130 flex: 1;
5131 margin: 0;
5132 }
5133
5134 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-term {
5135 background: none;
5136 font-weight: 600;
5137 margin: 0 0 0 1rem;
5138 padding: 0;
5139 text-align: right;
5140 }
5141
5142 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key {
5143 padding: 0.25rem 0.5rem;
5144 border-radius: 8%;
5145 margin: 0 0.2rem 0 0.2rem;
5146 }
5147
5148 .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key:last-child {
5149 margin: 0 0 0 0.2rem;
5150 }
5151
5152 .rotation-ruler {
5153 position: relative;
5154 min-width: 180px;
5155 height: 32px;
5156 padding: 0 8px;
5157 box-sizing: border-box;
5158 color: #1e1e1e;
5159 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5160 -webkit-user-select: none;
5161 user-select: none;
5162 touch-action: none;
5163 cursor: ew-resize;
5164 container-type: inline-size;
5165 }
5166
5167 .rotation-ruler[data-disabled] {
5168 opacity: 0.5;
5169 pointer-events: none;
5170 cursor: default;
5171 }
5172
5173 .rotation-ruler:has(.rotation-ruler__input:focus-visible) {
5174 outline: 2px solid var(--wp-admin-theme-color, #3858e9);
5175 outline-offset: 2px;
5176 border-radius: 4px;
5177 }
5178
5179 .rotation-ruler__input {
5180 position: absolute;
5181 width: 1px;
5182 height: 1px;
5183 margin: -1px;
5184 padding: 0;
5185 border: 0;
5186 clip: rect(0 0 0 0);
5187 overflow: hidden;
5188 white-space: nowrap;
5189 }
5190
5191 .rotation-ruler__pointer {
5192 position: absolute;
5193 bottom: 0;
5194 left: 50%;
5195 width: 2px;
5196 height: 18px;
5197 background: var(--wp-admin-theme-color, #3858e9);
5198 border-radius: 1px;
5199 transform: translateX(-50%);
5200 pointer-events: none;
5201 }
5202
5203 .rotation-ruler__strip {
5204 position: absolute;
5205 inset: 0;
5206 overflow: hidden;
5207 mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
5208 -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
5209 }
5210
5211 .rotation-ruler__ticks {
5212 position: absolute;
5213 left: 50%;
5214 top: 0;
5215 display: block;
5216 overflow: visible;
5217 }
5218
5219 .rotation-ruler__tick {
5220 stroke: currentColor;
5221 stroke-width: 1;
5222 }
5223
5224 .rotation-ruler__tick--minor {
5225 opacity: 0.35;
5226 }
5227
5228 .rotation-ruler__tick--mid {
5229 opacity: 0.6;
5230 }
5231
5232 .rotation-ruler__tick--major {
5233 opacity: 1;
5234 }
5235
5236 .rotation-ruler__label {
5237 fill: currentColor;
5238 font-size: 10px;
5239 font-weight: 400;
5240 opacity: 0.45;
5241 }
5242
5243 .rotation-ruler__active-label {
5244 position: absolute;
5245 top: 0;
5246 left: 50%;
5247 height: 14px;
5248 transform: translateX(-50%);
5249 font-size: 12px;
5250 font-weight: 600;
5251 line-height: 14px;
5252 color: #1e1e1e;
5253 pointer-events: none;
5254 }
5255
5256 .rotation-ruler__active-label::before {
5257 content: "";
5258 position: absolute;
5259 top: 0;
5260 left: 50%;
5261 width: 60px;
5262 height: 100%;
5263 transform: translateX(-50%);
5264 background: linear-gradient(to right, transparent 0, #fff 12px, #fff calc(100% - 12px), transparent 100%);
5265 }
5266
5267 .rotation-ruler__active-label-number {
5268 position: relative;
5269 display: inline-block;
5270 }
5271
5272 .rotation-ruler__active-label-sign {
5273 position: absolute;
5274 top: 0;
5275 right: 100%;
5276 }
5277
5278 .rotation-ruler__active-label-unit {
5279 position: absolute;
5280 top: 0;
5281 left: 100%;
5282 }
5283
5284 @container (max-width: 220px) {
5285 .rotation-ruler__tick--minor {
5286 opacity: 0;
5287 }
5288 }
5289 @media (prefers-reduced-motion: reduce) {
5290 .rotation-ruler__ticks {
5291 transition: none;
5292 }
5293 }
5294 .editor-autocompleters__link {
5295 white-space: nowrap;
5296 gap: 8px;
5297 }
5298
5299 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5300 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5301 font: normal 20px/1 dashicons;
5302 content: "\f110";
5303 margin-right: 5px;
5304 vertical-align: middle;
5305 }
5306 .editor-autocompleters__user .editor-autocompleters__user-avatar {
5307 margin-right: 8px;
5308 flex-grow: 0;
5309 flex-shrink: 0;
5310 max-width: none;
5311 width: 24px;
5312 height: 24px;
5313 }
5314 .editor-autocompleters__user .editor-autocompleters__user-name {
5315 white-space: nowrap;
5316 text-overflow: ellipsis;
5317 overflow: hidden;
5318 max-width: 200px;
5319 flex-shrink: 0;
5320 flex-grow: 1;
5321 }
5322 .editor-autocompleters__user .editor-autocompleters__user-slug {
5323 margin-left: 8px;
5324 white-space: nowrap;
5325 text-overflow: ellipsis;
5326 overflow: none;
5327 max-width: 100px;
5328 flex-grow: 0;
5329 flex-shrink: 0;
5330 }
5331 .editor-autocompleters__user:not(.is-primary) .editor-autocompleters__user-slug {
5332 color: #757575;
5333 }
5334
5335 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
5336 box-shadow: none;
5337 }
5338 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) .interface-complementary-area-header {
5339 display: none;
5340 }
5341
5342 .editor-collab-sidebar {
5343 height: 100%;
5344 overflow: hidden;
5345 }
5346
5347 .editor-collab-sidebar-panel {
5348 position: relative;
5349 padding: 16px 16px 24px;
5350 height: 100%;
5351 overflow: hidden;
5352 }
5353
5354 .editor-collab-sidebar-panel__thread {
5355 position: relative;
5356 padding: 16px;
5357 border-radius: 8px;
5358 border: 1px solid #ddd;
5359 background-color: #f0f0f0;
5360 overflow: hidden;
5361 width: auto;
5362 }
5363 .editor-collab-sidebar-panel__thread.is-selected {
5364 background-color: #fff;
5365 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
5366 z-index: 1;
5367 }
5368 .editor-collab-sidebar-panel__thread:focus {
5369 outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
5370 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
5371 }
5372 .editor-collab-sidebar-panel__thread.is-floating {
5373 left: 16px;
5374 right: 16px;
5375 position: absolute;
5376 margin-top: 16px;
5377 transform: translateY(var(--canvas-scroll, 0));
5378 will-change: transform;
5379 max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 128px);
5380 overflow-y: auto;
5381 }
5382
5383 .editor-collab-sidebar-panel__user-name {
5384 font-size: 12px;
5385 font-weight: 400;
5386 line-height: 16px;
5387 text-align: left;
5388 color: #757575;
5389 text-transform: capitalize;
5390 }
5391
5392 .editor-collab-sidebar-panel__user-time {
5393 font-size: 12px;
5394 font-weight: 400;
5395 line-height: 16px;
5396 text-align: left;
5397 color: #757575;
5398 }
5399
5400 .editor-collab-sidebar-panel__note-content p:last-child {
5401 margin-bottom: 0;
5402 }
5403
5404 .editor-collab-sidebar-panel__user-avatar {
5405 border-radius: 50%;
5406 flex-shrink: 0;
5407 border-width: var(--wp-admin-border-width-focus);
5408 border-style: solid;
5409 padding: var(--wp-admin-border-width-focus);
5410 background: #fff;
5411 }
5412
5413 .editor-collab-sidebar-panel__note-actions {
5414 margin-left: auto;
5415 }
5416 .editor-collab-sidebar-panel__note-actions button.has-icon:not(.has-text) {
5417 min-width: 24px;
5418 padding: 0;
5419 width: 24px;
5420 height: 24px;
5421 flex-shrink: 0;
5422 }
5423
5424 .editor-collab-sidebar-panel__more-reply-separator::before, .editor-collab-sidebar-panel__more-reply-separator::after {
5425 content: "";
5426 display: block;
5427 width: 100%;
5428 height: 1px;
5429 background-color: #ddd;
5430 flex: 1;
5431 }
5432
5433 .editor-collab-sidebar-panel__more-reply-button {
5434 font-weight: 499;
5435 }
5436
5437 .editor-collab-sidebar-panel__deleted-block-notice {
5438 font-weight: 499;
5439 color: #757575;
5440 }
5441
5442 .editor-collab-sidebar-panel__resolution-text {
5443 font-style: italic;
5444 }
5445
5446 .editor-collab-sidebar-panel__note-form textarea {
5447 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5448 padding: 6px 8px;
5449 /* Fonts smaller than 16px causes mobile safari to zoom. */
5450 font-size: 16px;
5451 /* Override core line-height. To be reviewed. */
5452 line-height: normal;
5453 box-shadow: 0 0 0 transparent;
5454 border-radius: 2px;
5455 border: 1px solid #949494;
5456 }
5457 @media not (prefers-reduced-motion) {
5458 .editor-collab-sidebar-panel__note-form textarea {
5459 transition: box-shadow 0.1s linear;
5460 }
5461 }
5462 @media (min-width: 600px) {
5463 .editor-collab-sidebar-panel__note-form textarea {
5464 font-size: 13px;
5465 /* Override core line-height. To be reviewed. */
5466 line-height: normal;
5467 }
5468 }
5469 .editor-collab-sidebar-panel__note-form textarea:focus {
5470 border-color: var(--wp-admin-theme-color);
5471 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
5472 outline: 2px solid transparent;
5473 }
5474 .editor-collab-sidebar-panel__note-form textarea::placeholder {
5475 color: rgba(30, 30, 30, 0.62);
5476 }
5477 .editor-collab-sidebar-panel__note-form textarea {
5478 padding: 9px 11px;
5479 line-height: 20px !important;
5480 display: block;
5481 }
5482
5483 .editor-collab-sidebar-panel__skip-to-note,
5484 .editor-collab-sidebar-panel__skip-to-block {
5485 position: absolute;
5486 top: -9999px;
5487 right: -9999px;
5488 overflow: hidden;
5489 clip-path: inset(50%);
5490 background: #fff !important;
5491 z-index: -1;
5492 }
5493 .editor-collab-sidebar-panel__skip-to-note:focus,
5494 .editor-collab-sidebar-panel__skip-to-block:focus {
5495 overflow: visible;
5496 clip-path: none;
5497 z-index: 1;
5498 right: 8px;
5499 }
5500
5501 .editor-collab-sidebar-panel__skip-to-note:focus {
5502 top: 8px;
5503 }
5504
5505 .editor-collab-sidebar-panel__skip-to-block:focus {
5506 top: auto;
5507 bottom: 8px;
5508 }
5509
5510 .editor-note-indicator__avatar {
5511 width: 24px;
5512 border-radius: 50%;
5513 margin-left: -12px;
5514 border-width: var(--wp-admin-border-width-focus);
5515 border-style: solid;
5516 padding: var(--wp-admin-border-width-focus);
5517 background: #fff;
5518 box-sizing: border-box;
5519 }
5520 .editor-note-indicator__avatar:first-child {
5521 margin-left: 0;
5522 }
5523
5524 .editor-note-indicator__overflow {
5525 font-weight: 499;
5526 }
5527
5528 .show-icon-labels .editor-note-indicator {
5529 width: auto;
5530 }
5531 .show-icon-labels .editor-note-indicator div {
5532 display: none;
5533 }
5534 .show-icon-labels .editor-note-indicator::after {
5535 content: attr(aria-label);
5536 font-size: 12px;
5537 }
5538
5539 .editor-avatar {
5540 position: relative;
5541 display: inline-flex;
5542 align-items: center;
5543 border-radius: 9999px;
5544 flex-shrink: 0;
5545 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
5546 }
5547
5548 .editor-avatar__image {
5549 box-sizing: border-box;
5550 position: relative;
5551 width: 32px;
5552 height: 32px;
5553 border-radius: 9999px;
5554 border: 0;
5555 background-color: var(--wp-admin-theme-color, #3858e9);
5556 overflow: hidden;
5557 overflow: clip;
5558 flex-shrink: 0;
5559 font-size: 0;
5560 color: #fff;
5561 }
5562 .is-small > .editor-avatar__image {
5563 width: 24px;
5564 height: 24px;
5565 }
5566 .has-avatar-border-color > .editor-avatar__image {
5567 border: var(--wp-admin-border-width-focus) solid var(--editor-avatar-outline-color);
5568 background-clip: padding-box;
5569 }
5570 .has-avatar-border-color > .editor-avatar__image::after {
5571 content: "";
5572 position: absolute;
5573 inset: 0;
5574 border-radius: inherit;
5575 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;
5576 pointer-events: none;
5577 z-index: 1;
5578 }
5579
5580 .editor-avatar__img {
5581 position: absolute;
5582 inset: 0;
5583 width: 100%;
5584 height: 100%;
5585 object-fit: cover;
5586 border-radius: inherit;
5587 opacity: 0;
5588 }
5589 .has-src > .editor-avatar__image > .editor-avatar__img {
5590 opacity: 1;
5591 }
5592
5593 .editor-avatar:not(.has-src) > .editor-avatar__image {
5594 display: flex;
5595 align-items: center;
5596 justify-content: center;
5597 font-size: 11px;
5598 font-weight: 499;
5599 border: 0;
5600 background-clip: border-box;
5601 }
5602 .editor-avatar:not(.has-src) > .editor-avatar__image::after {
5603 content: none;
5604 }
5605
5606 .editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {
5607 background-color: var(--editor-avatar-outline-color);
5608 }
5609
5610 .editor-avatar__name {
5611 font-size: 13px;
5612 font-weight: 499;
5613 line-height: 20px;
5614 color: var(--editor-avatar-name-color, #fff);
5615 min-width: 0;
5616 padding-bottom: 2px;
5617 overflow: hidden;
5618 opacity: 0;
5619 white-space: nowrap;
5620 transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
5621 }
5622
5623 .editor-avatar.is-badge {
5624 display: inline-grid;
5625 grid-template-columns: min-content 0fr;
5626 column-gap: 0;
5627 padding-inline-end: 0;
5628 background-color: var(--wp-admin-theme-color, #3858e9);
5629 transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
5630 }
5631 .editor-avatar.is-badge:hover {
5632 grid-template-columns: min-content 1fr;
5633 column-gap: 4px;
5634 padding-inline-end: 8px;
5635 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
5636 }
5637 .editor-avatar.is-badge:hover .editor-avatar__name {
5638 opacity: 1;
5639 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
5640 }
5641
5642 .editor-avatar.is-badge.has-avatar-border-color {
5643 background-color: var(--editor-avatar-outline-color);
5644 }
5645
5646 .editor-avatar.is-dimmed > .editor-avatar__image {
5647 opacity: 0.5;
5648 background-color: #757575;
5649 }
5650
5651 .editor-avatar.is-dimmed.has-avatar-border-color > .editor-avatar__image {
5652 border-color: #757575;
5653 }
5654
5655 .editor-avatar.is-dimmed .editor-avatar__img {
5656 filter: grayscale(1);
5657 }
5658
5659 .editor-avatar__status-indicator {
5660 position: absolute;
5661 top: 0;
5662 left: 0;
5663 width: 32px;
5664 height: 32px;
5665 display: flex;
5666 align-items: center;
5667 justify-content: center;
5668 z-index: 1;
5669 color: #1e1e1e;
5670 fill: #1e1e1e;
5671 }
5672 .is-small > .editor-avatar__status-indicator {
5673 width: 24px;
5674 height: 24px;
5675 }
5676 .editor-avatar__status-indicator svg {
5677 width: 75%;
5678 height: 75%;
5679 }
5680
5681 @media (prefers-reduced-motion: reduce) {
5682 .editor-avatar.is-badge,
5683 .editor-avatar__name {
5684 transition: none;
5685 }
5686 }
5687 .editor-avatar-group {
5688 display: flex;
5689 align-items: center;
5690 }
5691 .editor-avatar-group > .editor-avatar + .editor-avatar {
5692 margin-inline-start: -8px;
5693 }
5694 .editor-avatar-group > .editor-avatar {
5695 position: relative;
5696 }
5697 .editor-avatar-group > .editor-avatar:nth-child(1) {
5698 z-index: 10;
5699 }
5700 .editor-avatar-group > .editor-avatar:nth-child(2) {
5701 z-index: 9;
5702 }
5703 .editor-avatar-group > .editor-avatar:nth-child(3) {
5704 z-index: 8;
5705 }
5706 .editor-avatar-group > .editor-avatar:nth-child(4) {
5707 z-index: 7;
5708 }
5709 .editor-avatar-group > .editor-avatar:nth-child(5) {
5710 z-index: 6;
5711 }
5712 .editor-avatar-group > .editor-avatar:nth-child(6) {
5713 z-index: 5;
5714 }
5715 .editor-avatar-group > .editor-avatar:nth-child(7) {
5716 z-index: 4;
5717 }
5718 .editor-avatar-group > .editor-avatar:nth-child(8) {
5719 z-index: 3;
5720 }
5721 .editor-avatar-group > .editor-avatar:nth-child(9) {
5722 z-index: 2;
5723 }
5724 .editor-avatar-group > .editor-avatar:nth-child(10) {
5725 z-index: 1;
5726 }
5727
5728 .editor-avatar-group__overflow {
5729 margin-inline-start: 4px;
5730 margin-inline-end: 4px;
5731 font-size: 12px;
5732 line-height: 20px;
5733 color: #1e1e1e;
5734 white-space: nowrap;
5735 }
5736
5737 .editor-collaborators-presence__list.components-popover .components-popover__content {
5738 border: 1px solid #ddd;
5739 border-width: 1px 0 0 1px;
5740 border-radius: 8px;
5741 background: #fff;
5742 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
5743 }
5744 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content {
5745 min-width: 280px;
5746 }
5747 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header {
5748 display: flex;
5749 justify-content: space-between;
5750 align-items: center;
5751 padding: 8px 16px;
5752 }
5753 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title {
5754 font-size: 13px;
5755 font-weight: 499;
5756 line-height: 20px;
5757 display: flex;
5758 gap: 4px;
5759 }
5760 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span {
5761 color: #757575;
5762 }
5763 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action {
5764 padding: 0;
5765 }
5766 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button {
5767 color: #1e1e1e;
5768 height: 32px;
5769 width: 32px;
5770 padding: 0;
5771 }
5772 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items {
5773 display: flex;
5774 flex-direction: column;
5775 padding-bottom: 16px;
5776 }
5777 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item {
5778 all: unset;
5779 box-sizing: border-box;
5780 display: flex;
5781 align-items: center;
5782 padding: 12px 16px;
5783 gap: 8px;
5784 width: 100%;
5785 cursor: var(--wpds-cursor-control, pointer);
5786 transition: background-color 0.2s ease;
5787 }
5788 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled) {
5789 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
5790 }
5791 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled) {
5792 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
5793 }
5794 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible {
5795 outline: 2px solid var(--wp-admin-theme-color, #3858e9);
5796 outline-offset: -2px;
5797 }
5798 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled {
5799 cursor: default;
5800 }
5801 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info {
5802 display: flex;
5803 flex-direction: column;
5804 flex: 1;
5805 min-width: 0;
5806 }
5807 .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name {
5808 font-size: 13px;
5809 font-weight: 499;
5810 line-height: 20px;
5811 color: #1e1e1e;
5812 overflow: hidden;
5813 text-overflow: ellipsis;
5814 white-space: nowrap;
5815 }
5816
5817 .editor-collaborators-presence {
5818 display: flex;
5819 align-items: center;
5820 flex-shrink: 0;
5821 height: 32px;
5822 background: #f0f0f0;
5823 border-radius: 4px;
5824 }
5825 .editor-collaborators-presence:hover {
5826 background-color: #e0e0e0;
5827 }
5828 .editor-collaborators-presence:has(.is-pressed) {
5829 background-color: #e0e0e0;
5830 }
5831
5832 .editor-header__center .editor-collaborators-presence {
5833 margin-right: 8px;
5834 }
5835
5836 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
5837 display: flex;
5838 align-items: center;
5839 cursor: var(--wpds-cursor-control, pointer);
5840 position: relative;
5841 padding: 4px;
5842 border-radius: 4px;
5843 height: 100%;
5844 box-sizing: border-box;
5845 color: #2f2f2f;
5846 background: transparent;
5847 }
5848 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover {
5849 background: transparent;
5850 color: #2f2f2f;
5851 }
5852 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed, .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover {
5853 background: transparent;
5854 color: #2f2f2f;
5855 }
5856 .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
5857 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
5858 outline: none;
5859 }
5860
5861 .editor-collapsible-block-toolbar {
5862 overflow: hidden;
5863 display: flex;
5864 align-items: center;
5865 height: 64px;
5866 }
5867 .editor-collapsible-block-toolbar .block-editor-block-contextual-toolbar {
5868 border-bottom: 0;
5869 height: 100%;
5870 background: transparent;
5871 }
5872 .editor-collapsible-block-toolbar .block-editor-block-toolbar {
5873 height: 100%;
5874 padding-top: 17px;
5875 }
5876 .editor-collapsible-block-toolbar .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
5877 height: 32px;
5878 }
5879 .editor-collapsible-block-toolbar::after {
5880 content: "";
5881 width: 1px;
5882 height: 24px;
5883 background-color: #ddd;
5884 margin-right: 7px;
5885 }
5886 .editor-collapsible-block-toolbar .components-toolbar-group,
5887 .editor-collapsible-block-toolbar .components-toolbar {
5888 border-right: none;
5889 position: relative;
5890 }
5891 .editor-collapsible-block-toolbar .components-toolbar-group::after,
5892 .editor-collapsible-block-toolbar .components-toolbar::after {
5893 content: "";
5894 width: 1px;
5895 height: 24px;
5896 background-color: #ddd;
5897 top: 4px;
5898 position: absolute;
5899 right: -1px;
5900 }
5901 .editor-collapsible-block-toolbar .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
5902 .editor-collapsible-block-toolbar .components-toolbar .components-toolbar-group.components-toolbar-group::after {
5903 display: none;
5904 }
5905 .editor-collapsible-block-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
5906 height: 32px;
5907 overflow: visible;
5908 }
5909 @media (min-width: 600px) {
5910 .editor-collapsible-block-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
5911 height: 40px;
5912 position: relative;
5913 top: -4px;
5914 }
5915 }
5916 .editor-collapsible-block-toolbar.is-collapsed {
5917 display: none;
5918 }
5919
5920 .editor-block-visibility__disabled-blocks-count {
5921 border: 1px solid #ddd;
5922 border-width: 1px 0;
5923 box-shadow: -32px 0 0 0 #fff, 32px 0 0 0 #fff;
5924 padding: 8px;
5925 background-color: #fff;
5926 text-align: center;
5927 position: sticky;
5928 top: -5px;
5929 z-index: 1;
5930 }
5931 .editor-block-visibility__disabled-blocks-count ~ .block-editor-block-manager__content .block-editor-block-manager__category-title {
5932 top: 31px;
5933 }
5934 .editor-block-visibility__disabled-blocks-count .is-link {
5935 margin-left: 12px;
5936 }
5937
5938 .editor-blog-title-dropdown__content .components-popover__content {
5939 min-width: 320px;
5940 padding: 16px;
5941 }
5942
5943 .editor-document-bar {
5944 display: flex;
5945 align-items: center;
5946 height: 32px;
5947 justify-content: space-between;
5948 min-width: 0;
5949 background: #f0f0f0;
5950 border-radius: 4px;
5951 width: min(100%, 450px);
5952 }
5953 .editor-document-bar:hover {
5954 background-color: #e0e0e0;
5955 }
5956 .editor-document-bar .components-button {
5957 border-radius: 4px;
5958 }
5959 @media not (prefers-reduced-motion) {
5960 .editor-document-bar .components-button {
5961 transition: background-color 0.1s ease-out;
5962 }
5963 }
5964 .editor-document-bar .components-button:hover {
5965 background: #e0e0e0;
5966 }
5967 @media screen and (min-width: 782px) and (max-width: 960px) {
5968 .editor-document-bar.has-back-button .editor-document-bar__post-type-label {
5969 display: none;
5970 }
5971 }
5972
5973 .editor-document-bar__command {
5974 flex-grow: 1;
5975 color: var(--wp-block-synced-color);
5976 overflow: hidden;
5977 }
5978
5979 .editor-document-bar__title {
5980 overflow: hidden;
5981 color: #1e1e1e;
5982 margin: 0 auto;
5983 max-width: 70%;
5984 }
5985 @media (min-width: 782px) {
5986 .editor-document-bar__title {
5987 padding-left: 24px;
5988 }
5989 }
5990 .editor-document-bar__title h1 {
5991 display: flex;
5992 align-items: center;
5993 justify-content: center;
5994 font-weight: 400;
5995 white-space: nowrap;
5996 overflow: hidden;
5997 }
5998
5999 .editor-document-bar__post-title {
6000 color: currentColor;
6001 flex: 1;
6002 overflow: hidden;
6003 text-overflow: ellipsis;
6004 }
6005
6006 .editor-document-bar__post-type-label {
6007 flex: 0;
6008 color: #2f2f2f;
6009 padding-left: 4px;
6010 }
6011 @media screen and (max-width: 600px) {
6012 .editor-document-bar__post-type-label {
6013 display: none;
6014 }
6015 }
6016
6017 .editor-document-bar__shortcut {
6018 color: #2f2f2f;
6019 min-width: 24px;
6020 display: none;
6021 }
6022 @media (min-width: 782px) {
6023 .editor-document-bar__shortcut {
6024 display: initial;
6025 }
6026 }
6027
6028 .editor-document-bar__back.components-button.has-icon.has-text {
6029 min-width: 36px;
6030 flex-shrink: 0;
6031 color: #757575;
6032 gap: 0;
6033 z-index: 1;
6034 position: absolute;
6035 }
6036 .editor-document-bar__back.components-button.has-icon.has-text:hover {
6037 color: #1e1e1e;
6038 background-color: transparent;
6039 }
6040
6041 .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6042 position: absolute;
6043 margin-left: 12px;
6044 display: none;
6045 pointer-events: none;
6046 }
6047 .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg {
6048 fill: #949494;
6049 }
6050 @media (min-width: 600px) {
6051 .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6052 display: flex;
6053 }
6054 }
6055
6056 .document-outline ul {
6057 margin: 0;
6058 padding: 0;
6059 }
6060
6061 .document-outline__item {
6062 display: flex;
6063 margin: 4px 0;
6064 }
6065 .document-outline__item a {
6066 text-decoration: none;
6067 }
6068 .document-outline__item .document-outline__emdash::before {
6069 color: #ddd;
6070 margin-right: 4px;
6071 }
6072 .document-outline__item.is-h2 .document-outline__emdash::before {
6073 content: "—";
6074 }
6075 .document-outline__item.is-h3 .document-outline__emdash::before {
6076 content: "——";
6077 }
6078 .document-outline__item.is-h4 .document-outline__emdash::before {
6079 content: "———";
6080 }
6081 .document-outline__item.is-h5 .document-outline__emdash::before {
6082 content: "————";
6083 }
6084 .document-outline__item.is-h6 .document-outline__emdash::before {
6085 content: "—————";
6086 }
6087
6088 .document-outline__button {
6089 cursor: var(--wpds-cursor-control, pointer);
6090 background: none;
6091 border: none;
6092 display: flex;
6093 align-items: flex-start;
6094 margin: 0 0 0 -1px;
6095 padding: 2px 5px 2px 1px;
6096 color: #1e1e1e;
6097 text-align: left;
6098 border-radius: 2px;
6099 }
6100 .document-outline__button[aria-disabled=true], .document-outline__button:disabled {
6101 cursor: default;
6102 color: #757575;
6103 }
6104 .document-outline__button:focus {
6105 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
6106 outline: 2px solid transparent;
6107 }
6108
6109 .document-outline__level {
6110 background: #ddd;
6111 color: #1e1e1e;
6112 border-radius: 3px;
6113 font-size: 13px;
6114 padding: 1px 6px;
6115 margin-right: 4px;
6116 }
6117 .is-invalid .document-outline__level {
6118 background: #f0b849;
6119 }
6120
6121 .document-outline__item-content {
6122 padding: 1px 0;
6123 }
6124
6125 .editor-document-outline.has-no-headings > svg {
6126 margin-top: 28px;
6127 }
6128 .editor-document-outline.has-no-headings > p {
6129 padding-left: 32px;
6130 padding-right: 32px;
6131 }
6132 .editor-document-outline.has-no-headings {
6133 text-align: center;
6134 color: #757575;
6135 }
6136
6137 .editor-document-tools {
6138 display: inline-flex;
6139 align-items: center;
6140 }
6141 .editor-document-tools .editor-document-tools__left > .editor-history__redo,
6142 .editor-document-tools .editor-document-tools__left > .editor-history__undo {
6143 display: none;
6144 }
6145 @media (min-width: 782px) {
6146 .editor-document-tools .editor-document-tools__left > .editor-history__redo,
6147 .editor-document-tools .editor-document-tools__left > .editor-history__undo {
6148 display: inline-flex;
6149 }
6150 }
6151 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle {
6152 display: inline-flex;
6153 }
6154 @media not (prefers-reduced-motion) {
6155 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle svg {
6156 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
6157 }
6158 }
6159 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.is-pressed svg {
6160 transform: rotate(45deg);
6161 }
6162 .editor-document-tools .block-editor-list-view {
6163 display: none;
6164 }
6165 @media (min-width: 600px) {
6166 .editor-document-tools .block-editor-list-view {
6167 display: flex;
6168 }
6169 }
6170 .editor-document-tools .editor-document-tools__left > .components-button.has-icon,
6171 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon {
6172 height: 32px;
6173 min-width: 32px;
6174 padding: 4px;
6175 }
6176 .editor-document-tools .editor-document-tools__left > .components-button.has-icon.is-pressed,
6177 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon.is-pressed {
6178 background: #1e1e1e;
6179 }
6180 .editor-document-tools .editor-document-tools__left > .components-button.has-icon:focus:not(:disabled),
6181 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
6182 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
6183 outline: 1px solid transparent;
6184 }
6185 .editor-document-tools .editor-document-tools__left > .components-button.has-icon::before,
6186 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon::before {
6187 display: none;
6188 }
6189
6190 .editor-document-tools__left {
6191 display: inline-flex;
6192 align-items: center;
6193 gap: 8px;
6194 }
6195 .editor-document-tools__left:not(:last-child) {
6196 margin-inline-end: 8px;
6197 }
6198
6199 .show-icon-labels .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
6200 width: auto;
6201 padding: 0 8px;
6202 }
6203
6204 .show-icon-labels .editor-document-tools__left > * + * {
6205 margin-left: 8px;
6206 }
6207
6208 .editor-editor-interface .entities-saved-states__panel-header {
6209 height: 65px;
6210 }
6211
6212 .editor-editor-interface .interface-interface-skeleton__content {
6213 isolation: isolate;
6214 }
6215
6216 .editor-editor-interface .editor-notices {
6217 padding: var(--wpds-dimension-padding-md, 12px);
6218 }
6219
6220 .editor-visual-editor {
6221 flex: 1 0 auto;
6222 }
6223
6224 .editor-notices__dismissible,
6225 .editor-notices__pinned {
6226 position: relative;
6227 left: 0;
6228 top: 0;
6229 right: 0;
6230 }
6231
6232 .entities-saved-states__panel-header {
6233 box-sizing: border-box;
6234 background: #fff;
6235 padding-left: 16px;
6236 padding-right: 16px;
6237 height: 64px;
6238 border-bottom: 1px solid #ddd;
6239 }
6240
6241 .entities-saved-states__text-prompt {
6242 padding: 16px;
6243 padding-bottom: 4px;
6244 }
6245 .entities-saved-states__text-prompt .entities-saved-states__text-prompt--header {
6246 display: block;
6247 margin-bottom: 12px;
6248 }
6249
6250 .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt {
6251 padding: 0;
6252 }
6253 .entities-saved-states__panel.is-inline .entities-saved-states__panel-body {
6254 padding-left: 0;
6255 padding-right: 0;
6256 border: 0;
6257 }
6258 .entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 {
6259 margin-left: -16px;
6260 margin-right: -16px;
6261 margin-bottom: 0;
6262 }
6263 .entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 button {
6264 font-size: 11px;
6265 text-transform: uppercase;
6266 }
6267 .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--header-wrapper {
6268 display: none;
6269 }
6270 .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--changes-count {
6271 margin-top: 0;
6272 margin-bottom: 8px;
6273 }
6274 .entities-saved-states__panel.is-inline .entities-saved-states__panel-footer {
6275 margin-top: 16px;
6276 }
6277
6278 .entities-saved-states__change-control {
6279 flex: 1;
6280 }
6281
6282 .entities-saved-states__changes {
6283 font-size: 13px;
6284 margin: 4px 16px 0 24px;
6285 list-style: disc;
6286 }
6287 .entities-saved-states__changes li {
6288 margin-bottom: 4px;
6289 }
6290
6291 .editor-error-boundary {
6292 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6293 margin: auto;
6294 max-width: 780px;
6295 padding: 1em;
6296 margin-top: 64px;
6297 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);
6298 border: 1px solid #1e1e1e;
6299 border-radius: 2px;
6300 background-color: #fff;
6301 }
6302
6303 .editor-global-styles-header__description {
6304 padding: 0 16px;
6305 }
6306
6307 .editor-global-styles-header {
6308 margin-bottom: 0 !important;
6309 }
6310
6311 .editor-global-styles-sidebar {
6312 display: flex;
6313 flex-direction: column;
6314 min-height: 100%;
6315 }
6316 .editor-global-styles-sidebar__panel {
6317 flex: 1;
6318 }
6319
6320 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
6321 margin: 0;
6322 }
6323
6324 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions {
6325 flex: 1;
6326 }
6327
6328 .editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
6329 border: 0;
6330 }
6331
6332 .editor-global-styles-sidebar .single-column {
6333 grid-column: span 1;
6334 }
6335
6336 .editor-global-styles-sidebar .components-tools-panel .span-columns {
6337 grid-column: 1/-1;
6338 }
6339
6340 .editor-global-styles-sidebar__blocks-group {
6341 padding-top: 24px;
6342 border-top: 1px solid #e0e0e0;
6343 }
6344
6345 .editor-global-styles-sidebar__blocks-group-help {
6346 padding: 0 16px;
6347 }
6348
6349 .global-styles-ui-color-palette-panel,
6350 .global-styles-ui-gradient-palette-panel {
6351 padding: 16px;
6352 }
6353
6354 .editor-global-styles-sidebar hr {
6355 margin: 0;
6356 }
6357
6358 .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon {
6359 width: auto;
6360 }
6361 .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon svg {
6362 display: none;
6363 }
6364 .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon::after {
6365 content: attr(aria-label);
6366 font-size: 12px;
6367 }
6368
6369 .editor-welcome-guide {
6370 width: 312px;
6371 }
6372 .editor-welcome-guide.guide-styles .editor-welcome-guide__image {
6373 background: #00a0d2;
6374 }
6375 .editor-welcome-guide__image {
6376 margin: 0 0 16px;
6377 }
6378 .editor-welcome-guide__image > img {
6379 display: block;
6380 max-width: 100%;
6381 object-fit: cover;
6382 }
6383 .editor-welcome-guide__heading {
6384 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6385 font-size: 24px;
6386 line-height: 1.4;
6387 margin: 16px 0 16px 0;
6388 padding: 0 32px;
6389 }
6390 .editor-welcome-guide__text {
6391 font-size: 13px;
6392 line-height: 1.4;
6393 margin: 0 0 16px 0;
6394 padding: 0 32px;
6395 }
6396 .editor-welcome-guide__text img {
6397 vertical-align: bottom;
6398 }
6399 .editor-welcome-guide .components-button:hover svg {
6400 fill: #fff;
6401 }
6402
6403 .editor-header {
6404 box-sizing: border-box;
6405 }
6406 .editor-header *,
6407 .editor-header *::before,
6408 .editor-header *::after {
6409 box-sizing: inherit;
6410 }
6411 .editor-header {
6412 height: 64px;
6413 background: #fff;
6414 display: grid;
6415 grid-auto-flow: row;
6416 grid-template: auto/64px minmax(0, max-content) minmax(min-content, 1fr) 64px;
6417 }
6418 .editor-header:has(> .editor-header__center) {
6419 grid-template: auto/64px min-content 1fr min-content 64px;
6420 }
6421 @media (min-width: 782px) {
6422 .editor-header:has(> .editor-header__center) {
6423 grid-template: auto/64px minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
6424 }
6425 }
6426 @media (min-width: 480px) {
6427 .editor-header {
6428 gap: 16px;
6429 }
6430 }
6431 .editor-header {
6432 align-items: center;
6433 max-width: 100vw;
6434 justify-content: space-between;
6435 }
6436 @media (min-width: 280px) {
6437 .editor-header {
6438 flex-wrap: nowrap;
6439 }
6440 }
6441
6442 .editor-header__toolbar {
6443 grid-column: 1/3;
6444 }
6445 .editor-header__toolbar > :first-child {
6446 margin-inline: 16px 0;
6447 }
6448 .editor-header__back-button + .editor-header__toolbar {
6449 grid-column: 2/3;
6450 }
6451 @media (min-width: 480px) {
6452 .editor-header__back-button + .editor-header__toolbar > :first-child {
6453 margin-inline: 0;
6454 }
6455 }
6456 .editor-header__toolbar {
6457 display: flex;
6458 min-width: 0;
6459 align-items: center;
6460 clip-path: inset(-2px);
6461 }
6462 @media (min-width: 480px) {
6463 .editor-header__toolbar {
6464 clip-path: none;
6465 }
6466 }
6467 .editor-header__toolbar .table-of-contents {
6468 display: none;
6469 }
6470 @media (min-width: 600px) {
6471 .editor-header__toolbar .table-of-contents {
6472 display: block;
6473 }
6474 }
6475 .editor-header__toolbar .editor-collapsible-block-toolbar {
6476 margin-inline: 8px 0;
6477 }
6478 .editor-header__toolbar .editor-collapsible-block-toolbar.is-collapsed ~ .editor-collapsible-block-toolbar__toggle {
6479 margin-inline: 8px 0;
6480 }
6481
6482 .editor-header__center {
6483 grid-column: 3/4;
6484 display: flex;
6485 justify-content: center;
6486 align-items: center;
6487 min-width: 0;
6488 clip-path: inset(-2px);
6489 }
6490 @media (max-width: 479px) {
6491 .editor-header__center > :first-child {
6492 margin-inline-start: 8px;
6493 }
6494 .editor-header__center > :last-child {
6495 margin-inline-end: 8px;
6496 }
6497 }
6498 .editor-revisions-header .editor-header__center {
6499 clip-path: none;
6500 }
6501
6502 /**
6503 * Buttons on the right side
6504 */
6505 .editor-header__settings {
6506 grid-column: 3/-1;
6507 }
6508 .editor-header:has(> .editor-header__center) .editor-header__settings {
6509 grid-column: 4/-1;
6510 }
6511 .editor-header__settings {
6512 justify-self: end;
6513 display: inline-flex;
6514 align-items: center;
6515 flex-wrap: nowrap;
6516 padding-right: 4px;
6517 }
6518 @media (min-width: 600px) {
6519 .editor-header__settings {
6520 padding-right: 8px;
6521 }
6522 }
6523 .editor-header__settings {
6524 gap: 8px;
6525 }
6526
6527 /**
6528 * Show icon labels.
6529 */
6530 .show-icon-labels.interface-pinned-items .components-button.has-icon,
6531 .show-icon-labels .editor-header .components-button.has-icon {
6532 width: auto;
6533 }
6534 .show-icon-labels.interface-pinned-items .components-button.has-icon svg,
6535 .show-icon-labels .editor-header .components-button.has-icon svg {
6536 display: none;
6537 }
6538 .show-icon-labels.interface-pinned-items .components-button.has-icon::after,
6539 .show-icon-labels .editor-header .components-button.has-icon::after {
6540 content: attr(aria-label);
6541 white-space: nowrap;
6542 }
6543 .show-icon-labels.interface-pinned-items .components-button.has-icon[aria-disabled=true],
6544 .show-icon-labels .editor-header .components-button.has-icon[aria-disabled=true] {
6545 background-color: transparent;
6546 }
6547 .show-icon-labels.interface-pinned-items .is-tertiary:active,
6548 .show-icon-labels .editor-header .is-tertiary:active {
6549 box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
6550 background-color: transparent;
6551 }
6552 .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle svg,
6553 .show-icon-labels .editor-header .components-button.has-icon.button-toggle svg {
6554 display: block;
6555 }
6556 .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle::after,
6557 .show-icon-labels .editor-header .components-button.has-icon.button-toggle::after {
6558 content: none;
6559 }
6560 .show-icon-labels.interface-pinned-items .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
6561 .show-icon-labels .editor-header .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
6562 display: block;
6563 }
6564 .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6565 .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
6566 .show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6567 .show-icon-labels .editor-header .interface-pinned-items .components-button {
6568 padding-left: 8px;
6569 padding-right: 8px;
6570 }
6571 @media (min-width: 600px) {
6572 .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6573 .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
6574 .show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6575 .show-icon-labels .editor-header .interface-pinned-items .components-button {
6576 padding-left: 12px;
6577 padding-right: 12px;
6578 }
6579 }
6580 .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
6581 .show-icon-labels.interface-pinned-items .editor-post-saved-state.editor-post-saved-state::after,
6582 .show-icon-labels .editor-header .editor-post-save-draft.editor-post-save-draft::after,
6583 .show-icon-labels .editor-header .editor-post-saved-state.editor-post-saved-state::after {
6584 content: none;
6585 }
6586
6587 .show-icon-labels .editor-header__toolbar .block-editor-block-mover {
6588 border-left: none;
6589 }
6590 .show-icon-labels .editor-header__toolbar .block-editor-block-mover::before {
6591 content: "";
6592 width: 1px;
6593 height: 24px;
6594 background-color: #ddd;
6595 margin-top: 4px;
6596 margin-left: 8px;
6597 }
6598 .show-icon-labels .editor-header__toolbar .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
6599 width: calc(100% - 24px);
6600 background: #ddd;
6601 left: calc(50% + 1px);
6602 }
6603
6604 .show-icon-labels.interface-pinned-items {
6605 padding: 6px 12px 12px;
6606 margin-top: 0;
6607 margin-bottom: 0;
6608 margin-left: -12px;
6609 margin-right: -12px;
6610 border-bottom: 1px solid #ccc;
6611 display: block;
6612 }
6613 .show-icon-labels.interface-pinned-items > .components-button.has-icon {
6614 margin: 0;
6615 padding: 6px 6px 6px 8px;
6616 width: 14.625rem;
6617 justify-content: flex-start;
6618 }
6619 .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=true] svg {
6620 display: block;
6621 max-width: 24px;
6622 }
6623 .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=false] {
6624 padding-left: 40px;
6625 }
6626 .show-icon-labels.interface-pinned-items > .components-button.has-icon svg {
6627 margin-right: 8px;
6628 }
6629
6630 @media (min-width: 480px) {
6631 .editor-header__post-preview-button {
6632 display: none;
6633 }
6634 }
6635
6636 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header {
6637 border-bottom: none;
6638 }
6639 .editor-editor-interface.is-distraction-free .editor-header {
6640 background-color: #fff;
6641 width: 100%;
6642 }
6643 @media (min-width: 782px) {
6644 .editor-editor-interface.is-distraction-free .editor-header {
6645 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
6646 position: absolute;
6647 }
6648 }
6649 .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
6650 visibility: hidden;
6651 }
6652 .editor-editor-interface.is-distraction-free .editor-header > .editor-header__toolbar .editor-document-tools__document-overview-toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-preview-dropdown, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .interface-pinned-items, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-zoom-out-toggle {
6653 display: none;
6654 }
6655 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
6656 opacity: 1 !important;
6657 }
6658 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div {
6659 transform: translateX(0) translateZ(0) !important;
6660 }
6661 .editor-editor-interface.is-distraction-free .components-editor-notices__dismissible {
6662 position: absolute;
6663 z-index: 35;
6664 }
6665
6666 .components-popover.more-menu-dropdown__content {
6667 z-index: 99998;
6668 }
6669
6670 .editor-inserter-sidebar {
6671 box-sizing: border-box;
6672 }
6673 .editor-inserter-sidebar *,
6674 .editor-inserter-sidebar *::before,
6675 .editor-inserter-sidebar *::after {
6676 box-sizing: inherit;
6677 }
6678 .editor-inserter-sidebar {
6679 height: 100%;
6680 display: flex;
6681 flex-direction: column;
6682 }
6683
6684 .editor-inserter-sidebar__content {
6685 height: 100%;
6686 }
6687
6688 .editor-keyboard-shortcut-help-modal__section {
6689 margin: 0 0 2rem 0;
6690 }
6691 .editor-keyboard-shortcut-help-modal__section-title {
6692 font-size: 0.9rem;
6693 font-weight: 600;
6694 }
6695 .editor-keyboard-shortcut-help-modal__shortcut {
6696 display: flex;
6697 align-items: baseline;
6698 padding: 0.6rem 0;
6699 border-top: 1px solid #ddd;
6700 margin-bottom: 0;
6701 }
6702 .editor-keyboard-shortcut-help-modal__shortcut:last-child {
6703 border-bottom: 1px solid #ddd;
6704 }
6705 .editor-keyboard-shortcut-help-modal__shortcut:empty {
6706 display: none;
6707 }
6708 .editor-keyboard-shortcut-help-modal__shortcut-term {
6709 font-weight: 600;
6710 margin: 0 0 0 1rem;
6711 text-align: right;
6712 }
6713 .editor-keyboard-shortcut-help-modal__shortcut-description {
6714 flex: 1;
6715 margin: 0;
6716 }
6717 .editor-keyboard-shortcut-help-modal__shortcut-key-combination {
6718 display: block;
6719 background: none;
6720 margin: 0;
6721 padding: 0;
6722 }
6723 .editor-keyboard-shortcut-help-modal__shortcut-key-combination + .editor-keyboard-shortcut-help-modal__shortcut-key-combination {
6724 margin-top: 10px;
6725 }
6726 .editor-keyboard-shortcut-help-modal__shortcut-key {
6727 padding: 0.25rem 0.5rem;
6728 border-radius: 8%;
6729 margin: 0 0.2rem 0 0.2rem;
6730 }
6731 .editor-keyboard-shortcut-help-modal__shortcut-key:last-child {
6732 margin: 0 0 0 0.2rem;
6733 }
6734
6735 .editor-list-view-sidebar {
6736 height: 100%;
6737 }
6738 @media (min-width: 782px) {
6739 .editor-list-view-sidebar {
6740 width: 350px;
6741 }
6742 }
6743
6744 .editor-list-view-sidebar__list-view-panel-content,
6745 .editor-list-view-sidebar__list-view-container > .document-outline {
6746 height: 100%;
6747 }
6748 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar,
6749 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar {
6750 width: 12px;
6751 height: 12px;
6752 }
6753 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar-track,
6754 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar-track {
6755 background-color: transparent;
6756 }
6757 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar-thumb,
6758 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar-thumb {
6759 background-color: transparent;
6760 border-radius: 8px;
6761 border: 3px solid transparent;
6762 background-clip: padding-box;
6763 }
6764 .editor-list-view-sidebar__list-view-panel-content:hover::-webkit-scrollbar-thumb, .editor-list-view-sidebar__list-view-panel-content:focus::-webkit-scrollbar-thumb, .editor-list-view-sidebar__list-view-panel-content:focus-within::-webkit-scrollbar-thumb,
6765 .editor-list-view-sidebar__list-view-container > .document-outline:hover::-webkit-scrollbar-thumb,
6766 .editor-list-view-sidebar__list-view-container > .document-outline:focus::-webkit-scrollbar-thumb,
6767 .editor-list-view-sidebar__list-view-container > .document-outline:focus-within::-webkit-scrollbar-thumb {
6768 background-color: #949494;
6769 }
6770 .editor-list-view-sidebar__list-view-panel-content,
6771 .editor-list-view-sidebar__list-view-container > .document-outline {
6772 scrollbar-width: thin;
6773 scrollbar-gutter: stable both-edges;
6774 scrollbar-color: transparent transparent;
6775 }
6776 .editor-list-view-sidebar__list-view-panel-content:hover, .editor-list-view-sidebar__list-view-panel-content:focus, .editor-list-view-sidebar__list-view-panel-content:focus-within,
6777 .editor-list-view-sidebar__list-view-container > .document-outline:hover,
6778 .editor-list-view-sidebar__list-view-container > .document-outline:focus,
6779 .editor-list-view-sidebar__list-view-container > .document-outline:focus-within {
6780 scrollbar-color: #949494 transparent;
6781 }
6782 .editor-list-view-sidebar__list-view-panel-content,
6783 .editor-list-view-sidebar__list-view-container > .document-outline {
6784 will-change: transform;
6785 }
6786 @media (hover: none) {
6787 .editor-list-view-sidebar__list-view-panel-content,
6788 .editor-list-view-sidebar__list-view-container > .document-outline {
6789 scrollbar-color: #949494 transparent;
6790 }
6791 }
6792 .editor-list-view-sidebar__list-view-panel-content,
6793 .editor-list-view-sidebar__list-view-container > .document-outline {
6794 overflow: auto;
6795 scrollbar-gutter: auto;
6796 }
6797
6798 .editor-list-view-sidebar__list-view-panel-content {
6799 padding: 4px;
6800 }
6801
6802 .editor-list-view-sidebar__list-view-container {
6803 display: flex;
6804 flex-direction: column;
6805 height: 100%;
6806 }
6807 .editor-list-view-sidebar__list-view-container > .document-outline {
6808 padding: 16px;
6809 }
6810
6811 .editor-list-view-sidebar__tab-panel {
6812 height: 100%;
6813 }
6814
6815 .editor-list-view-sidebar__outline {
6816 display: flex;
6817 flex-direction: column;
6818 gap: 8px;
6819 border-bottom: 1px solid #ddd;
6820 padding: 16px;
6821 }
6822 .editor-list-view-sidebar__outline > div > span:first-child {
6823 width: 90px;
6824 display: inline-block;
6825 }
6826 .editor-list-view-sidebar__outline > div > span {
6827 font-size: 12px;
6828 line-height: 1.4;
6829 color: #757575;
6830 }
6831
6832 .editor-post-parent__panel,
6833 .editor-post-order__panel {
6834 padding-top: 8px;
6835 }
6836 .editor-post-parent__panel .editor-post-panel__row-control > div,
6837 .editor-post-order__panel .editor-post-panel__row-control > div {
6838 width: 100%;
6839 }
6840
6841 .editor-post-parent__panel-dialog .editor-post-parent,
6842 .editor-post-parent__panel-dialog .editor-post-order,
6843 .editor-post-order__panel-dialog .editor-post-parent,
6844 .editor-post-order__panel-dialog .editor-post-order {
6845 margin: 8px;
6846 }
6847 .editor-post-parent__panel-dialog .components-popover__content,
6848 .editor-post-order__panel-dialog .components-popover__content {
6849 min-width: 320px;
6850 }
6851
6852 .editor-post-author__panel {
6853 padding-top: 8px;
6854 }
6855
6856 .editor-post-author__panel .editor-post-panel__row-control > div {
6857 width: 100%;
6858 }
6859
6860 .editor-post-author__panel-dialog .editor-post-author {
6861 min-width: 248px;
6862 margin: 8px;
6863 }
6864
6865 .editor-action-modal {
6866 z-index: 1000001;
6867 }
6868
6869 .editor-post-card-panel__content {
6870 flex-grow: 1;
6871 }
6872 .editor-post-card-panel__title {
6873 width: 100%;
6874 }
6875 .editor-post-card-panel__title.editor-post-card-panel__title {
6876 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6877 font-weight: 499;
6878 font-size: 13px;
6879 line-height: 20px;
6880 margin: 0;
6881 display: flex;
6882 align-items: center;
6883 flex-wrap: wrap;
6884 column-gap: 8px;
6885 row-gap: 4px;
6886 word-break: break-word;
6887 }
6888 .editor-post-card-panel__icon {
6889 flex: 0 0 24px;
6890 width: 24px;
6891 height: 24px;
6892 }
6893 .editor-post-card-panel__header {
6894 display: flex;
6895 justify-content: space-between;
6896 }
6897 .editor-post-card-panel.has-description .editor-post-card-panel__header {
6898 margin-bottom: 8px;
6899 }
6900 .editor-post-card-panel .editor-post-card-panel__title-name {
6901 padding: 2px 0;
6902 }
6903 .editor-post-card-panel .editor-post-card-panel__description {
6904 color: #757575;
6905 }
6906
6907 .editor-post-content-information {
6908 color: #757575;
6909 }
6910 .editor-post-content-information .components-text {
6911 color: inherit;
6912 }
6913
6914 .editor-post-discussion__panel-dialog .editor-post-discussion {
6915 min-width: 248px;
6916 margin: 8px;
6917 }
6918
6919 .editor-post-discussion__panel-toggle .components-text {
6920 color: inherit;
6921 }
6922
6923 .editor-post-discussion__panel-dialog .components-popover__content {
6924 min-width: 320px;
6925 }
6926
6927 .editor-post-excerpt__textarea {
6928 width: 100%;
6929 margin-bottom: 10px;
6930 }
6931
6932 .editor-post-excerpt__dropdown__content .components-popover__content {
6933 min-width: 320px;
6934 padding: 16px;
6935 }
6936
6937 .editor-post-featured-image {
6938 padding: 0;
6939 }
6940 .editor-post-featured-image .hidden {
6941 display: none;
6942 }
6943 .editor-post-featured-image .components-spinner {
6944 position: absolute;
6945 top: 50%;
6946 left: 50%;
6947 margin-top: -9px;
6948 margin-left: -9px;
6949 }
6950
6951 .editor-post-featured-image__container {
6952 position: relative;
6953 }
6954 .editor-post-featured-image__container:hover .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image), .editor-post-featured-image__container:focus .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image), .editor-post-featured-image__container:focus-within .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image) {
6955 opacity: 1;
6956 }
6957 .editor-post-featured-image__container .editor-post-featured-image__actions.editor-post-featured-image__actions-missing-image {
6958 opacity: 1;
6959 margin-top: 16px;
6960 }
6961 .editor-post-featured-image__container .components-drop-zone__content {
6962 border-radius: 2px;
6963 }
6964 .editor-post-featured-image__container:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner {
6965 display: flex;
6966 align-items: center;
6967 gap: 8px;
6968 }
6969 .editor-post-featured-image__container:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
6970 margin: 0;
6971 }
6972
6973 .editor-post-featured-image__toggle,
6974 .editor-post-featured-image__preview {
6975 width: 100%;
6976 padding: 0;
6977 box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
6978 overflow: hidden;
6979 outline-offset: -1px;
6980 min-height: 40px;
6981 display: flex;
6982 justify-content: center;
6983 }
6984
6985 .editor-post-featured-image__preview {
6986 height: auto !important;
6987 outline: 1px solid rgba(0, 0, 0, 0.1);
6988 /*rtl:begin:ignore*/
6989 background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
6990 background-position: 0 0, 12px 12px;
6991 /*rtl:end:ignore*/
6992 background-size: 24px 24px;
6993 }
6994 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
6995 object-fit: cover;
6996 width: 100%;
6997 object-position: 50% 50%;
6998 aspect-ratio: 2/1;
6999 }
7000
7001 .editor-post-featured-image__toggle {
7002 box-shadow: inset 0 0 0 1px #ccc;
7003 }
7004 .editor-post-featured-image__toggle:focus:not(:disabled) {
7005 box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7006 }
7007
7008 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
7009 bottom: 0;
7010 opacity: 0;
7011 padding: 8px;
7012 position: absolute;
7013 }
7014 @media not (prefers-reduced-motion) {
7015 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
7016 transition: opacity 50ms ease-out;
7017 }
7018 }
7019 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) .editor-post-featured-image__action {
7020 backdrop-filter: blur(16px) saturate(180%);
7021 background: rgba(255, 255, 255, 0.75);
7022 }
7023 .editor-post-featured-image__actions .editor-post-featured-image__action {
7024 flex-grow: 1;
7025 justify-content: center;
7026 }
7027
7028 [class].editor-post-format__suggestion {
7029 margin: 4px 0 0 0;
7030 }
7031
7032 .editor-post-format__dialog .editor-post-format__dialog-content {
7033 min-width: 248px;
7034 margin: 8px;
7035 }
7036
7037 .editor-post-last-edited-panel {
7038 color: #757575;
7039 }
7040 .editor-post-last-edited-panel .components-text {
7041 color: inherit;
7042 }
7043
7044 .editor-post-last-revision__title {
7045 width: 100%;
7046 font-weight: 499;
7047 }
7048
7049 .editor-post-last-revision__title.components-button.has-icon {
7050 height: 100%;
7051 justify-content: space-between;
7052 }
7053 .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
7054 background: #f0f0f0;
7055 }
7056 .editor-post-last-revision__title.components-button.has-icon:focus {
7057 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7058 border-radius: 0;
7059 }
7060
7061 .components-panel__body.is-opened.editor-post-last-revision__panel {
7062 padding: 0;
7063 height: 48px;
7064 }
7065 .components-panel__body.is-opened.editor-post-last-revision__panel .editor-post-last-revision__title.components-button.components-button {
7066 padding: 16px;
7067 }
7068
7069 .editor-post-locked-modal__buttons {
7070 margin-top: 24px;
7071 }
7072
7073 .editor-post-locked-modal__avatar {
7074 border-radius: 50%;
7075 margin-top: 16px;
7076 min-width: initial !important;
7077 }
7078
7079 .editor-post-panel__row {
7080 width: 100%;
7081 min-height: 32px;
7082 justify-content: flex-start !important;
7083 align-items: flex-start !important;
7084 }
7085
7086 .editor-post-panel__row-label {
7087 width: 38%;
7088 flex-shrink: 0;
7089 min-height: 32px;
7090 display: flex;
7091 align-items: center;
7092 padding: 6px 0;
7093 line-height: 20px;
7094 hyphens: auto;
7095 word-break: break-word;
7096 }
7097
7098 .editor-post-panel__row-control {
7099 flex-grow: 1;
7100 min-height: 32px;
7101 display: flex;
7102 align-items: center;
7103 }
7104 .editor-post-panel__row-control .components-button {
7105 max-width: 100%;
7106 text-align: left;
7107 white-space: normal;
7108 text-wrap: balance;
7109 text-wrap: pretty;
7110 height: auto;
7111 min-height: 32px;
7112 font-weight: 400;
7113 }
7114 .editor-post-panel__row-control .components-dropdown {
7115 max-width: 100%;
7116 }
7117
7118 .editor-post-panel__section {
7119 padding: 16px;
7120 }
7121
7122 .editor-post-publish-panel__content {
7123 min-height: calc(100% - 148px);
7124 }
7125 .editor-post-publish-panel__content > .components-spinner {
7126 display: block;
7127 margin: 100px auto 0;
7128 }
7129
7130 .editor-post-publish-panel__header {
7131 background: #fff;
7132 padding-left: 16px;
7133 padding-right: 16px;
7134 height: 65px;
7135 border-bottom: 1px solid #ddd;
7136 display: flex;
7137 align-items: center;
7138 align-content: space-between;
7139 }
7140 .editor-post-publish-panel__header .components-button {
7141 width: 100%;
7142 justify-content: center;
7143 }
7144 .editor-post-publish-panel__header .has-icon {
7145 margin-left: auto;
7146 width: auto;
7147 }
7148
7149 .components-site-card {
7150 display: flex;
7151 align-items: center;
7152 margin: 16px 0;
7153 }
7154
7155 .components-site-icon {
7156 border: none;
7157 border-radius: 2px;
7158 margin-right: 12px;
7159 flex-shrink: 0;
7160 height: 36px;
7161 width: 36px;
7162 }
7163
7164 .components-site-name {
7165 display: block;
7166 font-size: 14px;
7167 }
7168
7169 .components-site-home {
7170 display: block;
7171 color: #757575;
7172 font-size: 12px;
7173 word-break: break-word;
7174 }
7175
7176 .editor-post-publish-panel__header-publish-button,
7177 .editor-post-publish-panel__header-cancel-button {
7178 flex: 1;
7179 }
7180 @media (min-width: 480px) {
7181 .editor-post-publish-panel__header-publish-button,
7182 .editor-post-publish-panel__header-cancel-button {
7183 max-width: 160px;
7184 }
7185 }
7186
7187 .editor-post-publish-panel__header-publish-button {
7188 padding-left: 4px;
7189 justify-content: center;
7190 }
7191
7192 .editor-post-publish-panel__header-cancel-button {
7193 padding-right: 4px;
7194 }
7195
7196 .editor-post-publish-panel__header-published {
7197 flex-grow: 1;
7198 }
7199
7200 .editor-post-publish-panel__footer {
7201 padding: 16px;
7202 }
7203
7204 .components-button.editor-post-publish-panel__toggle.is-primary {
7205 display: inline-flex;
7206 align-items: center;
7207 }
7208 .components-button.editor-post-publish-panel__toggle.is-primary.is-busy .dashicon {
7209 display: none;
7210 }
7211 .components-button.editor-post-publish-panel__toggle.is-primary .dashicon {
7212 margin-right: -4px;
7213 }
7214
7215 .editor-post-publish-panel__link {
7216 font-weight: 400;
7217 padding-left: 4px;
7218 }
7219
7220 .editor-post-publish-panel__prepublish {
7221 padding: 16px;
7222 }
7223 .editor-post-publish-panel__prepublish strong {
7224 color: #1e1e1e;
7225 }
7226 .editor-post-publish-panel__prepublish .components-panel__body {
7227 background: #fff;
7228 margin-left: -16px;
7229 margin-right: -16px;
7230 }
7231 .editor-post-publish-panel__prepublish .editor-post-visibility__dialog-legend {
7232 display: none;
7233 }
7234 .editor-post-publish-panel__prepublish .components-panel__body-title .components-button {
7235 align-items: flex-start;
7236 text-wrap: balance;
7237 text-wrap: pretty;
7238 }
7239
7240 .post-publish-panel__postpublish .components-panel__body {
7241 border-bottom: 1px solid #e0e0e0;
7242 border-top: none;
7243 word-break: break-word;
7244 }
7245
7246 .post-publish-panel__postpublish-buttons {
7247 display: flex;
7248 align-content: space-between;
7249 flex-wrap: wrap;
7250 gap: 16px;
7251 }
7252 .post-publish-panel__postpublish-buttons .components-button,
7253 .post-publish-panel__postpublish-buttons .components-button.has-icon {
7254 justify-content: center;
7255 flex: 1;
7256 min-width: unset;
7257 }
7258 .post-publish-panel__postpublish-buttons .components-clipboard-button {
7259 width: 100%;
7260 }
7261
7262 .post-publish-panel__postpublish-post-address-container {
7263 display: flex;
7264 align-items: flex-end;
7265 margin-bottom: 16px;
7266 }
7267 .post-publish-panel__postpublish-post-address-container .post-publish-panel__postpublish-post-address {
7268 flex: 1;
7269 }
7270 .post-publish-panel__postpublish-post-address-container input[readonly] {
7271 padding: 12px;
7272 background: #f0f0f0;
7273 border-color: #ccc;
7274 overflow: hidden;
7275 text-overflow: ellipsis;
7276 height: 36px;
7277 }
7278
7279 .post-publish-panel__postpublish-post-address__copy-button-wrap {
7280 flex-shrink: 0;
7281 margin-left: 16px;
7282 }
7283
7284 .post-publish-panel__postpublish-header {
7285 font-weight: 499;
7286 }
7287
7288 .post-publish-panel__postpublish-subheader {
7289 margin: 0 0 8px;
7290 }
7291
7292 .post-publish-panel__tip {
7293 color: #f0b849;
7294 }
7295
7296 @media screen and (max-width: 782px) {
7297 .post-publish-panel__postpublish-post-address__button-wrap .components-button {
7298 height: 40px;
7299 }
7300 }
7301 .editor-post-publish-panel {
7302 box-sizing: border-box;
7303 }
7304 .editor-post-publish-panel *,
7305 .editor-post-publish-panel *::before,
7306 .editor-post-publish-panel *::after {
7307 box-sizing: inherit;
7308 }
7309 .editor-post-publish-panel {
7310 position: fixed;
7311 z-index: 100001;
7312 background: #fff;
7313 top: 46px;
7314 bottom: 0;
7315 right: 0;
7316 left: 0;
7317 overflow: auto;
7318 }
7319 @media (min-width: 782px) {
7320 .editor-post-publish-panel {
7321 z-index: 99998;
7322 top: 32px;
7323 left: auto;
7324 width: 281px;
7325 border-left: 1px solid #ddd;
7326 }
7327 }
7328 @media (min-width: 782px) and (not (prefers-reduced-motion)) {
7329 .editor-post-publish-panel {
7330 transform: translateX(100%);
7331 animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
7332 }
7333 }
7334 @media (min-width: 782px) {
7335 body.is-fullscreen-mode .editor-post-publish-panel {
7336 top: 0;
7337 }
7338 [role=region]:focus .editor-post-publish-panel {
7339 transform: translateX(0%);
7340 }
7341 }
7342
7343 @keyframes editor-post-publish-panel__slide-in-animation {
7344 100% {
7345 transform: translateX(0%);
7346 }
7347 }
7348 .editor-post-revisions-panel .editor-post-revisions-panel__view-all {
7349 justify-content: center;
7350 }
7351 .editor-post-revisions-panel .editor-post-revisions-panel__revision-date {
7352 text-transform: uppercase;
7353 font-weight: 600;
7354 font-size: 12px;
7355 }
7356
7357 .editor-post-revisions-panel__revisions-count {
7358 margin-top: -4.5px;
7359 margin-bottom: -4.5px;
7360 }
7361
7362 .editor-revisions-header__slider {
7363 width: 100%;
7364 }
7365 .editor-revisions-header__slider .components-range-control__tooltip {
7366 white-space: nowrap;
7367 }
7368
7369 .editor-revisions-header__no-revisions {
7370 color: #757575;
7371 font-size: 13px;
7372 }
7373
7374 .editor-revisions-canvas__loading {
7375 display: flex;
7376 align-items: center;
7377 justify-content: center;
7378 height: 100%;
7379 }
7380
7381 .editor-revisions-canvas__content {
7382 display: flex;
7383 height: 100%;
7384 }
7385 .editor-revisions-canvas__content .editor-visual-editor {
7386 flex: 1;
7387 min-width: 0;
7388 }
7389
7390 .revision-diff-markers {
7391 position: relative;
7392 flex-shrink: 0;
7393 width: max(16px, 1rem);
7394 background: rgba(0, 0, 0, 0.05);
7395 }
7396 .revision-diff-markers .revision-diff-marker {
7397 position: absolute;
7398 width: 100%;
7399 min-height: 4px;
7400 border: none;
7401 padding: 0;
7402 cursor: var(--wpds-cursor-control, pointer);
7403 transition: opacity 0.1s ease;
7404 }
7405 .revision-diff-markers .revision-diff-marker.is-added {
7406 background: #008a20;
7407 }
7408 .revision-diff-markers .revision-diff-marker.is-removed {
7409 background: repeating-linear-gradient(45deg, #d63638, #d63638 6px, rgba(214, 54, 56, 0.45) 6px, rgba(214, 54, 56, 0.45) 8px);
7410 }
7411 .revision-diff-markers .revision-diff-marker.is-modified {
7412 background: repeating-linear-gradient(-45deg, #9a7000, #9a7000 6px, rgba(154, 112, 0, 0.45) 6px, rgba(154, 112, 0, 0.45) 8px);
7413 }
7414 .revision-diff-markers .revision-diff-marker:hover {
7415 opacity: 0.7;
7416 }
7417 .revision-diff-markers .revision-diff-marker:focus {
7418 outline: 2px solid #1e1e1e;
7419 outline-offset: -2px;
7420 }
7421
7422 .editor-revision-fields-diff__value {
7423 word-break: break-word;
7424 }
7425
7426 .editor-revision-fields-diff__added {
7427 background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
7428 text-decoration: none;
7429 }
7430
7431 .editor-revision-fields-diff__removed {
7432 text-decoration: line-through;
7433 color: #d63638;
7434 }
7435
7436 .editor-post-saved-state {
7437 display: flex;
7438 align-items: center;
7439 width: 28px;
7440 padding: 12px 4px;
7441 color: #757575;
7442 overflow: hidden;
7443 white-space: nowrap;
7444 }
7445 .editor-post-saved-state.is-saving[aria-disabled=true], .editor-post-saved-state.is-saving[aria-disabled=true]:hover, .editor-post-saved-state.is-saved[aria-disabled=true], .editor-post-saved-state.is-saved[aria-disabled=true]:hover {
7446 background: transparent;
7447 color: #757575;
7448 }
7449 .editor-post-saved-state svg {
7450 display: inline-block;
7451 flex: 0 0 auto;
7452 fill: currentColor;
7453 margin-right: 8px;
7454 }
7455 @media (min-width: 600px) {
7456 .editor-post-saved-state {
7457 width: auto;
7458 padding: 8px 12px;
7459 text-indent: inherit;
7460 }
7461 .editor-post-saved-state svg {
7462 margin-right: 0;
7463 }
7464 }
7465
7466 .editor-post-save-draft.has-text.has-icon svg {
7467 margin-right: 0;
7468 }
7469
7470 .editor-post-schedule__panel-dropdown {
7471 width: 100%;
7472 }
7473
7474 .editor-post-schedule__dialog .components-popover__content {
7475 min-width: 320px;
7476 padding: 16px;
7477 }
7478
7479 .editor-post-status {
7480 max-width: 100%;
7481 }
7482 .editor-post-status.is-read-only {
7483 padding: 6px 12px;
7484 }
7485 .editor-post-status .editor-post-status__toggle.editor-post-status__toggle {
7486 padding-top: 4px;
7487 padding-bottom: 4px;
7488 }
7489
7490 .editor-change-status__password-fieldset,
7491 .editor-change-status__publish-date-wrapper {
7492 border-top: 1px solid #e0e0e0;
7493 padding-top: 16px;
7494 }
7495
7496 .editor-change-status__content .components-popover__content {
7497 min-width: 320px;
7498 padding: 16px;
7499 }
7500 .editor-change-status__content .editor-change-status__password-legend {
7501 padding: 0;
7502 margin-bottom: 8px;
7503 }
7504 .editor-change-status__content p.components-base-control__help:has(.components-checkbox-control__help) {
7505 margin-top: 4px;
7506 }
7507
7508 .editor-post-sticky__checkbox-control {
7509 border-top: 1px solid #e0e0e0;
7510 padding-top: 16px;
7511 }
7512
7513 .editor-post-sync-status__value {
7514 padding: 6px 0 6px 12px;
7515 }
7516
7517 .editor-post-taxonomies__hierarchical-terms-list {
7518 max-height: 14em;
7519 overflow: auto;
7520 margin-left: -6px;
7521 padding-left: 6px;
7522 margin-top: -6px;
7523 padding-top: 6px;
7524 }
7525
7526 .editor-post-taxonomies__hierarchical-terms-choice {
7527 margin-bottom: 8px;
7528 }
7529 .editor-post-taxonomies__hierarchical-terms-choice:last-child {
7530 margin-bottom: 4px;
7531 }
7532
7533 .editor-post-taxonomies__hierarchical-terms-subchoices {
7534 margin-top: 8px;
7535 margin-left: 16px;
7536 }
7537
7538 .editor-post-taxonomies__flat-term-most-used .editor-post-taxonomies__flat-term-most-used-label {
7539 margin-bottom: 4px;
7540 }
7541
7542 .editor-post-taxonomies__flat-term-most-used-list {
7543 margin: 0;
7544 }
7545 .editor-post-taxonomies__flat-term-most-used-list li {
7546 display: inline-block;
7547 margin-right: 8px;
7548 }
7549
7550 .editor-sync-connection-error-modal {
7551 z-index: 1000001;
7552 }
7553
7554 .editor-sync-connection-error-modal p {
7555 margin: 0;
7556 }
7557
7558 .editor-sync-connection-error-modal__retry-countdown {
7559 color: #757575;
7560 }
7561
7562 .editor-post-template__swap-template-modal {
7563 z-index: 1000001;
7564 }
7565 .editor-post-template__swap-template-modal .editor-post-template__swap-template-search {
7566 background: #fff;
7567 position: sticky;
7568 top: 0;
7569 padding: 16px 0;
7570 transform: translateY(-4px);
7571 margin-bottom: -4px;
7572 z-index: 2;
7573 }
7574
7575 .editor-post-template__create-template-modal {
7576 z-index: 1000001;
7577 }
7578
7579 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7580 column-count: 2;
7581 column-gap: 24px;
7582 padding-top: 2px;
7583 }
7584 @media (min-width: 782px) {
7585 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7586 column-count: 3;
7587 }
7588 }
7589 @media (min-width: 1280px) {
7590 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7591 column-count: 4;
7592 }
7593 }
7594 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
7595 break-inside: avoid-column;
7596 }
7597
7598 .editor-post-template__dropdown .components-popover__content {
7599 min-width: 240px;
7600 }
7601 .editor-post-template__dropdown .components-button.is-pressed,
7602 .editor-post-template__dropdown .components-button.is-pressed:hover {
7603 background: inherit;
7604 color: inherit;
7605 }
7606
7607 .editor-post-template__classic-theme-dropdown {
7608 padding: 8px;
7609 }
7610
7611 .editor-template-actions-panel__preview .block-editor-block-preview__container {
7612 display: flex;
7613 aspect-ratio: 4/3;
7614 overflow: hidden;
7615 border-radius: 4px;
7616 }
7617 .editor-template-actions-panel__preview .block-editor-block-preview__container::after {
7618 outline: 1px solid rgba(0, 0, 0, 0.1);
7619 outline-offset: -1px;
7620 border-radius: 4px;
7621 }
7622 @media not (prefers-reduced-motion) {
7623 .editor-template-actions-panel__preview .block-editor-block-preview__container::after {
7624 transition: outline 0.1s linear;
7625 }
7626 }
7627 .editor-template-actions-panel__preview[role=button] {
7628 cursor: var(--wpds-cursor-control, pointer);
7629 }
7630 .editor-template-actions-panel__preview[role=button]:hover .block-editor-block-preview__container::after {
7631 outline-color: rgba(0, 0, 0, 0.3);
7632 }
7633 .editor-template-actions-panel__preview[role=button]:focus-visible .block-editor-block-preview__container::after {
7634 outline-color: var(--wp-admin-theme-color);
7635 outline-width: var(--wp-admin-border-width-focus);
7636 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
7637 }
7638
7639 .editor-template-actions-panel__action {
7640 flex: 1;
7641 justify-content: center;
7642 }
7643
7644 textarea.editor-post-text-editor {
7645 border: 1px solid #949494;
7646 border-radius: 0;
7647 display: block;
7648 margin: 0;
7649 width: 100%;
7650 box-shadow: none;
7651 resize: none;
7652 overflow: hidden;
7653 font-family: Menlo, Consolas, monaco, monospace;
7654 line-height: 2.4;
7655 min-height: 200px;
7656 }
7657 @media not (prefers-reduced-motion) {
7658 textarea.editor-post-text-editor {
7659 transition: border 0.1s ease-out, box-shadow 0.1s linear;
7660 }
7661 }
7662 textarea.editor-post-text-editor {
7663 padding: 16px;
7664 }
7665 @media (min-width: 600px) {
7666 textarea.editor-post-text-editor {
7667 padding: 24px;
7668 }
7669 }
7670 textarea.editor-post-text-editor {
7671 /* Fonts smaller than 16px causes mobile safari to zoom. */
7672 font-size: 16px !important;
7673 }
7674 @media (min-width: 600px) {
7675 textarea.editor-post-text-editor {
7676 font-size: 15px !important;
7677 }
7678 }
7679 textarea.editor-post-text-editor:focus {
7680 border-color: var(--wp-admin-theme-color);
7681 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7682 position: relative;
7683 }
7684 textarea.editor-post-text-editor::placeholder {
7685 color: rgba(30, 30, 30, 0.62);
7686 }
7687
7688 .editor-post-title.is-raw-text {
7689 margin-bottom: 24px;
7690 margin-top: 2px;
7691 max-width: none;
7692 }
7693
7694 .editor-post-url__panel-dropdown {
7695 width: 100%;
7696 }
7697
7698 .editor-post-url__panel-dialog .editor-post-url {
7699 min-width: 248px;
7700 margin: 8px;
7701 }
7702
7703 /* rtl:begin:ignore */
7704 .editor-post-url__link,
7705 .editor-post-url__front-page-link {
7706 direction: ltr;
7707 word-break: break-word;
7708 }
7709
7710 /* rtl:end:ignore */
7711 .editor-post-url__front-page-link {
7712 padding: 6px 12px;
7713 border-radius: 2px;
7714 color: var(--wp-admin-theme-color);
7715 }
7716 .editor-post-url__front-page-link:hover {
7717 background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
7718 color: var(--wp-admin-theme-color-darker-20, #183ad6);
7719 }
7720 .editor-post-url__front-page-link:focus {
7721 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7722 color: var(--wp-admin-theme-color);
7723 outline: 3px solid rgba(0, 0, 0, 0);
7724 }
7725
7726 .editor-post-url__link-slug {
7727 font-weight: 600;
7728 }
7729
7730 .editor-post-url__input input.components-input-control__input {
7731 padding-inline-start: 0 !important;
7732 }
7733
7734 .editor-post-url__panel-toggle,
7735 .editor-post-parent__panel-toggle {
7736 word-break: break-word;
7737 }
7738
7739 .editor-post-url__intro {
7740 margin: 0;
7741 }
7742
7743 .editor-post-url__permalink {
7744 margin-top: 8px;
7745 margin-bottom: 0;
7746 }
7747 .editor-post-url__permalink-visual-label {
7748 display: block;
7749 }
7750
7751 .editor-posts-per-page-dropdown__content .components-popover__content {
7752 min-width: 320px;
7753 padding: 16px;
7754 }
7755
7756 .editor-post-trash.components-button {
7757 flex-grow: 1;
7758 justify-content: center;
7759 }
7760
7761 .editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
7762 padding-right: 4px;
7763 padding-left: 6px;
7764 }
7765
7766 .editor-preview-dropdown__button-external {
7767 width: 100%;
7768 display: flex;
7769 justify-content: space-between;
7770 }
7771
7772 .editor-resizable-editor.is-resizable {
7773 overflow: visible;
7774 margin: 0 auto;
7775 }
7776
7777 .editor-resizable-editor__resize-handle {
7778 position: absolute;
7779 top: 0;
7780 bottom: 0;
7781 padding: 0;
7782 margin: auto 0;
7783 width: 12px;
7784 appearance: none;
7785 cursor: ew-resize;
7786 outline: none;
7787 background: none;
7788 border-radius: 9999px;
7789 border: 0;
7790 height: 100px;
7791 }
7792 .editor-resizable-editor__resize-handle::after {
7793 position: absolute;
7794 top: 16px;
7795 left: 4px;
7796 right: 0;
7797 bottom: 16px;
7798 content: "";
7799 width: 4px;
7800 background-color: rgba(117, 117, 117, 0.4);
7801 border-radius: 9999px;
7802 }
7803 .editor-resizable-editor__resize-handle.is-left {
7804 left: -18px;
7805 }
7806 .editor-resizable-editor__resize-handle.is-right {
7807 right: -18px;
7808 }
7809 .editor-resizable-editor__resize-handle:hover, .editor-resizable-editor__resize-handle:focus, .editor-resizable-editor__resize-handle:active {
7810 opacity: 1;
7811 }
7812 .editor-resizable-editor__resize-handle:hover::after, .editor-resizable-editor__resize-handle:focus::after, .editor-resizable-editor__resize-handle:active::after {
7813 background-color: var(--wp-admin-theme-color);
7814 }
7815
7816 .editor-layout__toggle-publish-panel,
7817 .editor-layout__toggle-sidebar-panel,
7818 .editor-layout__toggle-entities-saved-states-panel {
7819 z-index: 100000;
7820 position: fixed !important;
7821 top: -9999em;
7822 bottom: auto;
7823 left: auto;
7824 right: 0;
7825 box-sizing: border-box;
7826 width: 280px;
7827 background-color: #fff;
7828 border: 1px dotted #ddd;
7829 height: auto !important;
7830 padding: 24px;
7831 display: flex;
7832 justify-content: center;
7833 }
7834
7835 .interface-interface-skeleton__actions:focus .editor-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .editor-layout__toggle-entities-saved-states-panel,
7836 .interface-interface-skeleton__actions:focus .editor-layout__toggle-publish-panel,
7837 .interface-interface-skeleton__actions:focus-within .editor-layout__toggle-publish-panel {
7838 top: auto;
7839 bottom: 0;
7840 }
7841
7842 .editor-start-page-options__modal .editor-start-page-options__modal__actions {
7843 position: absolute;
7844 bottom: 0;
7845 width: 100%;
7846 height: 72px;
7847 background-color: #fff;
7848 margin-left: -32px;
7849 margin-right: -32px;
7850 padding-left: 32px;
7851 padding-right: 32px;
7852 border-top: 1px solid #ddd;
7853 z-index: 1;
7854 }
7855 .editor-start-page-options__modal .block-editor-block-patterns-list {
7856 padding-bottom: 72px;
7857 }
7858
7859 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
7860 column-count: 2;
7861 column-gap: 24px;
7862 }
7863 @media (min-width: 782px) {
7864 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
7865 column-count: 3;
7866 }
7867 }
7868 @media (min-width: 1280px) {
7869 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
7870 column-count: 4;
7871 }
7872 }
7873 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
7874 break-inside: avoid-column;
7875 margin-bottom: 24px;
7876 }
7877 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
7878 min-height: 100px;
7879 }
7880 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
7881 width: 100%;
7882 }
7883
7884 .editor-start-template-options__modal .editor-start-template-options__modal__actions {
7885 position: absolute;
7886 bottom: 0;
7887 width: 100%;
7888 height: 92px;
7889 background-color: #fff;
7890 margin-left: -32px;
7891 margin-right: -32px;
7892 padding-left: 32px;
7893 padding-right: 32px;
7894 border-top: 1px solid #ddd;
7895 z-index: 1;
7896 }
7897 .editor-start-template-options__modal .block-editor-block-patterns-list {
7898 padding-bottom: 92px;
7899 }
7900
7901 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
7902 column-count: 2;
7903 column-gap: 24px;
7904 }
7905 @media (min-width: 782px) {
7906 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
7907 column-count: 3;
7908 }
7909 }
7910 @media (min-width: 1280px) {
7911 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
7912 column-count: 4;
7913 }
7914 }
7915 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
7916 break-inside: avoid-column;
7917 }
7918 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
7919 display: none;
7920 }
7921
7922 .components-panel__header.editor-sidebar__panel-tabs {
7923 padding-left: 0;
7924 padding-right: 8px;
7925 }
7926 .components-panel__header.editor-sidebar__panel-tabs .components-button.has-icon {
7927 padding: 0;
7928 }
7929 @media (min-width: 782px) {
7930 .components-panel__header.editor-sidebar__panel-tabs .components-button.has-icon {
7931 display: flex;
7932 }
7933 }
7934
7935 .editor-post-summary .components-v-stack:empty {
7936 display: none;
7937 }
7938
7939 .editor-sidebar {
7940 box-sizing: border-box;
7941 }
7942 .editor-sidebar *,
7943 .editor-sidebar *::before,
7944 .editor-sidebar *::after {
7945 box-sizing: inherit;
7946 }
7947 .editor-sidebar__revisions-block-message {
7948 padding: 16px;
7949 color: #757575;
7950 font-size: 13px;
7951 }
7952
7953 .fields-controls__password {
7954 border-top: 1px solid #e0e0e0;
7955 padding-top: 16px;
7956 }
7957
7958 .editor-site-discussion-dropdown__content .components-popover__content {
7959 min-width: 320px;
7960 padding: 16px;
7961 }
7962
7963 .editor-style-book {
7964 height: 100%;
7965 }
7966 .editor-style-book.is-button {
7967 border-radius: 8px;
7968 }
7969 .editor-style-book {
7970 display: flex;
7971 flex-direction: column;
7972 align-items: stretch;
7973 }
7974
7975 .editor-style-book__iframe {
7976 display: block;
7977 height: 100%;
7978 width: 100%;
7979 }
7980 .editor-style-book__iframe.is-button {
7981 border-radius: 8px;
7982 }
7983 .editor-style-book__iframe.is-focused {
7984 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
7985 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
7986 }
7987
7988 .editor-style-book__tablist-container {
7989 flex: none;
7990 display: flex;
7991 width: 100%;
7992 padding-right: 56px;
7993 background: #fff;
7994 }
7995
7996 .editor-style-book__tabpanel {
7997 flex: 1 0 auto;
7998 overflow: auto;
7999 }
8000
8001 .editor-styles-canvas {
8002 height: 100%;
8003 padding: 16px;
8004 background-color: var(--wp-editor-canvas-background);
8005 }
8006 .editor-styles-canvas iframe {
8007 display: block;
8008 width: 100%;
8009 height: 100%;
8010 }
8011
8012 .editor-styles-canvas__section {
8013 background: #fff;
8014 border-radius: 8px;
8015 bottom: 0;
8016 left: 0;
8017 overflow: hidden;
8018 position: absolute;
8019 right: 0;
8020 top: 0;
8021 }
8022 @media not (prefers-reduced-motion) {
8023 .editor-styles-canvas__section {
8024 transition: all 0.3s;
8025 }
8026 }
8027
8028 .editor-styles-canvas__close-button {
8029 position: absolute;
8030 right: 8px;
8031 top: 8px;
8032 z-index: 2;
8033 background: #fff;
8034 }
8035
8036 .table-of-contents__popover.components-popover .components-popover__content {
8037 min-width: 380px;
8038 }
8039
8040 .components-popover.table-of-contents__popover {
8041 z-index: 99998;
8042 }
8043
8044 .table-of-contents__popover .components-popover__content {
8045 padding: 16px;
8046 }
8047 @media (min-width: 600px) {
8048 .table-of-contents__popover .components-popover__content {
8049 max-height: calc(100vh - 120px);
8050 overflow-y: auto;
8051 }
8052 }
8053 .table-of-contents__popover hr {
8054 margin: 10px -16px 0;
8055 }
8056
8057 .table-of-contents__wrapper:focus::before {
8058 content: "";
8059 display: block;
8060 position: absolute;
8061 top: 0;
8062 right: 0;
8063 bottom: 0;
8064 left: 0;
8065 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8066 pointer-events: none;
8067 }
8068
8069 .table-of-contents__counts {
8070 display: flex;
8071 flex-wrap: wrap;
8072 margin: 0;
8073 margin-top: -8px;
8074 }
8075
8076 .table-of-contents__count {
8077 flex-basis: 33%;
8078 display: flex;
8079 flex-direction: column;
8080 font-size: 13px;
8081 color: #1e1e1e;
8082 padding-right: 8px;
8083 margin-bottom: 0;
8084 margin-top: 8px;
8085 }
8086 .table-of-contents__count:nth-child(4n) {
8087 padding-right: 0;
8088 }
8089
8090 .table-of-contents__number,
8091 .table-of-contents__popover .word-count {
8092 font-size: 21px;
8093 font-weight: 400;
8094 line-height: 30px;
8095 color: #1e1e1e;
8096 }
8097
8098 .table-of-contents__title {
8099 display: block;
8100 margin-top: 20px;
8101 font-size: 15px;
8102 font-weight: 600;
8103 }
8104
8105 .editor-text-editor {
8106 box-sizing: border-box;
8107 }
8108 .editor-text-editor *,
8109 .editor-text-editor *::before,
8110 .editor-text-editor *::after {
8111 box-sizing: inherit;
8112 }
8113 .editor-text-editor {
8114 position: relative;
8115 isolation: isolate;
8116 width: 100%;
8117 background-color: #fff;
8118 flex-grow: 1;
8119 }
8120 .editor-text-editor .editor-post-title:not(.is-raw-text),
8121 .editor-text-editor .editor-post-title.is-raw-text textarea {
8122 max-width: none;
8123 line-height: 1.4;
8124 font-family: Menlo, Consolas, monaco, monospace;
8125 font-size: 2.5em;
8126 font-weight: normal;
8127 border: 1px solid #949494;
8128 border-radius: 0;
8129 padding: 16px;
8130 }
8131 @media (min-width: 600px) {
8132 .editor-text-editor .editor-post-title:not(.is-raw-text),
8133 .editor-text-editor .editor-post-title.is-raw-text textarea {
8134 padding: 24px;
8135 }
8136 }
8137 .editor-text-editor .editor-post-title:not(.is-raw-text):focus,
8138 .editor-text-editor .editor-post-title.is-raw-text textarea:focus {
8139 border-color: var(--wp-admin-theme-color);
8140 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8141 }
8142
8143 .editor-text-editor__body {
8144 width: 100%;
8145 padding: 0 12px 12px 12px;
8146 max-width: 1080px;
8147 margin-left: auto;
8148 margin-right: auto;
8149 }
8150 @media (min-width: 960px) {
8151 .editor-text-editor__body {
8152 padding: 0 24px 24px 24px;
8153 }
8154 }
8155
8156 .editor-text-editor__toolbar {
8157 position: sticky;
8158 z-index: 1;
8159 top: 0;
8160 left: 0;
8161 right: 0;
8162 display: flex;
8163 background: rgba(255, 255, 255, 0.8);
8164 padding: 4px 12px;
8165 }
8166 @media (min-width: 600px) {
8167 .editor-text-editor__toolbar {
8168 padding: 12px;
8169 }
8170 }
8171 @media (min-width: 960px) {
8172 .editor-text-editor__toolbar {
8173 padding: 12px 24px;
8174 }
8175 }
8176 .editor-text-editor__toolbar h2 {
8177 line-height: 40px;
8178 margin: 0 auto 0 0;
8179 font-size: 13px;
8180 color: #1e1e1e;
8181 }
8182
8183 .editor-visual-editor {
8184 position: relative;
8185 display: flex;
8186 background-color: var(--wp-editor-canvas-background);
8187 }
8188 .editor-visual-editor iframe[name=editor-canvas] {
8189 background-color: transparent;
8190 }
8191 .editor-visual-editor {
8192 align-items: center;
8193 }
8194 .editor-visual-editor.is-resizable {
8195 max-height: 100%;
8196 }
8197 .editor-visual-editor.has-padding {
8198 padding: 24px 24px 0;
8199 }
8200 .editor-visual-editor.is-iframed {
8201 overflow: hidden;
8202 }
8203 .editor-visual-editor .components-button {
8204 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
8205 font-size: 13px;
8206 padding: 6px 12px;
8207 }
8208 .editor-visual-editor .components-button.is-tertiary, .editor-visual-editor .components-button.has-icon {
8209 padding: 6px;
8210 }
8211
8212 .editor-fields-content-preview {
8213 display: flex;
8214 flex-direction: column;
8215 height: 100%;
8216 border-radius: 4px;
8217 }
8218 .dataviews-view-table .editor-fields-content-preview {
8219 width: 96px;
8220 flex-grow: 0;
8221 }
8222 .editor-fields-content-preview .block-editor-block-preview__container,
8223 .editor-fields-content-preview .editor-fields-content-preview__empty {
8224 margin-top: auto;
8225 margin-bottom: auto;
8226 }
8227
8228 .editor-fields-content-preview__empty {
8229 text-align: center;
8230 }
8231
8232 .editor-push-changes-to-global-styles-control .components-button {
8233 justify-content: center;
8234 width: 100%;
8235 }