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

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

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