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-rtl.css

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

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