PluginProbe
Gutenberg / 23.6.2
Gutenberg v23.6.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.6.2, at build/styles/editor/style-rtl.css

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