PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
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.css

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

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