PluginProbe
Gutenberg / 23.7.2
Gutenberg v23.7.2
23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 7.4.0 All 402 releases
gutenberg / build / styles / editor / style-rtl.css

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

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