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

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

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