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.css

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

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