PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
gutenberg / build / styles / editor / style-rtl.css

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

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