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

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

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