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

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

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