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

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

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