PluginProbe
Gutenberg / 23.3.2
Gutenberg v23.3.2
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-rtl.css

style-rtl.css in Gutenberg 23.3.2, at build/styles/editor/style-rtl.css

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