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

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

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