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

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

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