PluginProbe
Gutenberg / 23.5.2
Gutenberg v23.5.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.5.2, at build/styles/editor/style-rtl.css

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