PluginProbe
Gutenberg / 23.0.1
Gutenberg v23.0.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 / edit-site / style.css

style.css in Gutenberg 23.0.1, at build/styles/edit-site/style.css

5,680 lines 152.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /**
3 * Colors
4 */
5 /**
6 * Typography
7 */
8 /**
9 * SCSS Variables.
10 *
11 * Please use variables from this sheet to ensure consistency across the UI.
12 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
13 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
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 .admin-ui-page {
111 display: flex;
112 height: 100%;
113 background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
114 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
115 position: relative;
116 z-index: 1;
117 flex-flow: column;
118 text-wrap: pretty;
119 }
120
121 .admin-ui-page__header {
122 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
123 border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
124 background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
125 position: sticky;
126 top: 0;
127 z-index: 1;
128 }
129
130 .admin-ui-page__header-title {
131 font-family: var(--wpds-typography-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
132 font-size: var(--wpds-typography-font-size-lg, 15px);
133 font-weight: var(--wpds-typography-font-weight-medium, 499);
134 line-height: var(--wpds-typography-line-height-lg, 28px);
135 margin: 0;
136 overflow: hidden;
137 text-overflow: ellipsis;
138 white-space: nowrap;
139 }
140
141 .admin-ui-page__sidebar-toggle-slot:empty {
142 display: none;
143 }
144
145 .admin-ui-page__header-subtitle {
146 padding-block-end: var(--wpds-dimension-padding-xs, 4px);
147 color: var(--wpds-color-fg-content-neutral-weak, #707070);
148 font-size: var(--wpds-typography-font-size-md, 13px);
149 line-height: var(--wpds-typography-line-height-md, 24px);
150 margin: 0;
151 }
152
153 .admin-ui-page__content {
154 flex-grow: 1;
155 overflow: auto;
156 display: flex;
157 flex-direction: column;
158 }
159
160 .admin-ui-page__content.has-padding {
161 padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
162 }
163
164 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
165 width: auto;
166 padding: 0 var(--wpds-dimension-padding-xs, 4px);
167 }
168
169 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
170 display: none;
171 }
172
173 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
174 content: attr(aria-label);
175 font-size: var(--wpds-typography-font-size-sm, 12px);
176 }
177
178 /**
179 * SCSS Variables.
180 *
181 * Please use variables from this sheet to ensure consistency across the UI.
182 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
183 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
184 */
185 /**
186 * Colors
187 */
188 /**
189 * Fonts & basic variables.
190 */
191 /**
192 * Typography
193 */
194 /**
195 * Grid System.
196 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
197 */
198 /**
199 * Radius scale.
200 */
201 /**
202 * Elevation scale.
203 */
204 /**
205 * Dimensions.
206 */
207 /**
208 * Mobile specific styles
209 */
210 /**
211 * Editor styles.
212 */
213 /**
214 * Block & Editor UI.
215 */
216 /**
217 * Block paddings.
218 */
219 /**
220 * React Native specific.
221 * These variables do not appear to be used anywhere else.
222 */
223 .admin-ui-breadcrumbs__list {
224 font-family: var(--wpds-typography-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
225 font-size: var(--wpds-typography-font-size-lg, 15px);
226 font-weight: var(--wpds-typography-font-weight-medium, 499);
227 line-height: var(--wpds-typography-line-height-lg, 28px);
228 list-style: none;
229 padding: 0;
230 margin: 0;
231 gap: 0;
232 min-height: 32px;
233 }
234
235 .admin-ui-breadcrumbs__list li:not(:last-child)::after {
236 content: "/";
237 margin: 0 8px;
238 }
239
240 .admin-ui-breadcrumbs__list h1 {
241 font-size: inherit;
242 line-height: inherit;
243 }
244
245 /**
246 * Colors
247 */
248 /**
249 * SCSS Variables.
250 *
251 * Please use variables from this sheet to ensure consistency across the UI.
252 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
253 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
254 */
255 /**
256 * Fonts & basic variables.
257 */
258 /**
259 * Typography
260 */
261 /**
262 * Grid System.
263 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
264 */
265 /**
266 * Radius scale.
267 */
268 /**
269 * Elevation scale.
270 */
271 /**
272 * Dimensions.
273 */
274 /**
275 * Mobile specific styles
276 */
277 /**
278 * Editor styles.
279 */
280 /**
281 * Block & Editor UI.
282 */
283 /**
284 * Block paddings.
285 */
286 /**
287 * React Native specific.
288 * These variables do not appear to be used anywhere else.
289 */
290 /**
291 * Typography
292 */
293 /**
294 * Breakpoints & Media Queries
295 */
296 /**
297 * Converts a hex value into the rgb equivalent.
298 *
299 * @param {string} hex - the hexadecimal value to convert
300 * @return {string} comma separated rgb values
301 */
302 /**
303 * Long content fade mixin
304 *
305 * Creates a fading overlay to signify that the content is longer
306 * than the space allows.
307 */
308 /**
309 * Breakpoint mixins
310 */
311 /**
312 * Focus styles.
313 */
314 /**
315 * Applies editor left position to the selector passed as argument
316 */
317 /**
318 * Styles that are reused verbatim in a few places
319 */
320 /**
321 * Allows users to opt-out of animations via OS-level preferences.
322 */
323 /**
324 * Reset default styles for JavaScript UI based pages.
325 * This is a WP-admin agnostic reset
326 */
327 /**
328 * Reset the WP Admin page styles for Gutenberg-like pages.
329 */
330 /**
331 * Creates a checkerboard pattern background to indicate transparency.
332 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
333 */
334 .dataviews-wrapper,
335 .dataviews-picker-wrapper {
336 height: 100%;
337 box-sizing: border-box;
338 scroll-padding-bottom: 64px;
339 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
340 container: dataviews-wrapper/inline-size;
341 display: flex;
342 flex-direction: column;
343 font-size: 13px;
344 line-height: 1.4;
345 background-color: var(--wp-dataviews-color-background, #fff);
346 }
347
348 .dataviews__view-actions,
349 .dataviews-filters__container {
350 box-sizing: border-box;
351 padding: 16px 24px;
352 flex-shrink: 0;
353 position: sticky;
354 left: 0;
355 background-color: inherit;
356 }
357
358 @media not (prefers-reduced-motion) {
359 .dataviews__view-actions,
360 .dataviews-filters__container {
361 transition: padding ease-out 0.1s;
362 }
363 }
364 .dataviews-no-results,
365 .dataviews-loading {
366 padding: 0 24px;
367 flex-grow: 1;
368 display: flex;
369 align-items: center;
370 justify-content: center;
371 }
372
373 @media not (prefers-reduced-motion) {
374 .dataviews-no-results,
375 .dataviews-loading {
376 transition: padding ease-out 0.1s;
377 }
378 }
379 .dataviews-no-results.is-refreshing {
380 opacity: 0.5;
381 pointer-events: none;
382 }
383
384 @media not (prefers-reduced-motion) {
385 .dataviews-no-results.is-refreshing {
386 opacity: 1;
387 animation: dataviews-pulse 1s ease-in-out infinite;
388 }
389 }
390 @keyframes dataviews-pulse {
391 0%, 100% {
392 opacity: 1;
393 }
394 50% {
395 opacity: 0.5;
396 }
397 }
398 .dataviews-loading-more {
399 text-align: center;
400 }
401
402 @container (max-width: 430px) {
403 .dataviews__view-actions,
404 .dataviews-filters__container {
405 padding: 12px 24px;
406 }
407 }
408 .dataviews-title-field {
409 font-size: 13px;
410 font-weight: 499;
411 color: #2f2f2f;
412 text-overflow: ellipsis;
413 white-space: nowrap;
414 width: 100%;
415 }
416
417 .dataviews-title-field a {
418 text-decoration: none;
419 text-overflow: ellipsis;
420 white-space: nowrap;
421 overflow: hidden;
422 display: block;
423 flex-grow: 0;
424 color: #2f2f2f;
425 }
426
427 .dataviews-title-field a:hover {
428 color: var(--wp-admin-theme-color);
429 }
430
431 .dataviews-title-field a:focus {
432 color: var(--wp-admin-theme-color--rgb);
433 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
434 border-radius: 2px;
435 }
436
437 .dataviews-title-field button.components-button.is-link {
438 text-decoration: none;
439 font-weight: inherit;
440 text-overflow: ellipsis;
441 white-space: nowrap;
442 overflow: hidden;
443 display: block;
444 width: 100%;
445 color: #1e1e1e;
446 }
447
448 .dataviews-title-field button.components-button.is-link:hover {
449 color: var(--wp-admin-theme-color);
450 }
451
452 .dataviews-title-field--clickable {
453 cursor: var(--wpds-cursor-control, pointer);
454 color: #2f2f2f;
455 }
456
457 .dataviews-title-field--clickable:hover {
458 color: var(--wp-admin-theme-color);
459 }
460
461 .dataviews-title-field--clickable:focus {
462 color: var(--wp-admin-theme-color--rgb);
463 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
464 border-radius: 2px;
465 }
466
467 .dataviews__view-actions--infinite-scroll {
468 position: sticky;
469 top: 0;
470 z-index: 2;
471 background-color: #fff;
472 }
473
474 .dataviews-bulk-actions-footer__item-count {
475 color: #1e1e1e;
476 }
477
478 .dataviews-bulk-actions-footer__container {
479 margin-right: auto;
480 min-height: 32px;
481 }
482
483 .dataviews-layout__container {
484 flex: 1;
485 min-height: 0;
486 overflow: auto;
487 display: flex;
488 flex-direction: column;
489 background-color: inherit;
490 }
491
492 .dataviews-filters__button {
493 position: relative;
494 }
495
496 .dataviews-filters__container {
497 padding-top: 0;
498 }
499
500 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
501 opacity: 0;
502 }
503
504 .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
505 opacity: 1;
506 }
507
508 .dataviews-filters__summary-popover {
509 font-size: 13px;
510 line-height: 1.4;
511 }
512
513 .dataviews-filters__summary-popover .components-popover__content {
514 width: 100%;
515 min-width: 230px;
516 max-width: 250px;
517 border-radius: 4px;
518 }
519
520 .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
521 padding: 0;
522 }
523
524 .dataviews-filters__summary-operators-container {
525 padding: 8px 16px;
526 }
527
528 .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) {
529 border-bottom: 1px solid #e0e0e0;
530 }
531
532 .dataviews-filters__summary-operators-container:empty {
533 display: none;
534 }
535
536 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
537 color: #757575;
538 white-space: nowrap;
539 overflow: hidden;
540 text-overflow: ellipsis;
541 flex-shrink: 0; /* Prevents this element from shrinking */
542 max-width: calc(100% - 55px);
543 }
544
545 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
546 width: 100%;
547 white-space: nowrap;
548 overflow: hidden;
549 }
550
551 .dataviews-filters__summary-chip-container {
552 position: relative;
553 white-space: pre-wrap;
554 }
555
556 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
557 border-radius: 16px;
558 border: 1px solid transparent;
559 cursor: var(--wpds-cursor-control, pointer);
560 padding: 4px 12px;
561 min-height: 32px;
562 background: #f0f0f0;
563 color: #2f2f2f;
564 position: relative;
565 display: flex;
566 align-items: center;
567 box-sizing: border-box;
568 }
569
570 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable {
571 cursor: default;
572 }
573
574 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
575 padding-inline-end: 28px;
576 }
577
578 .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] {
579 background: #e0e0e0;
580 color: #1e1e1e;
581 }
582
583 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
584 color: var(--wp-admin-theme-color);
585 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
586 }
587
588 .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] {
589 background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
590 }
591
592 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
593 outline: none;
594 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
595 }
596
597 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
598 font-weight: 499;
599 }
600
601 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
602 width: 24px;
603 height: 24px;
604 border-radius: 50%;
605 border: 0;
606 padding: 0;
607 position: absolute;
608 right: 4px;
609 top: 50%;
610 transform: translateY(-50%);
611 display: flex;
612 align-items: center;
613 justify-content: center;
614 background: transparent;
615 cursor: var(--wpds-cursor-control, pointer);
616 }
617
618 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
619 fill: #757575;
620 }
621
622 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
623 background: #e0e0e0;
624 }
625
626 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
627 fill: #1e1e1e;
628 }
629
630 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
631 fill: var(--wp-admin-theme-color);
632 }
633
634 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
635 background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
636 }
637
638 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
639 outline: none;
640 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
641 }
642
643 .dataviews-filters__search-widget-filter-combobox-list {
644 max-height: 184px;
645 padding: 4px;
646 overflow: auto;
647 border-top: 1px solid #e0e0e0;
648 }
649
650 .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
651 font-weight: 600;
652 }
653
654 .dataviews-filters__search-widget-listbox {
655 padding: 4px;
656 overflow: auto;
657 }
658
659 .dataviews-filters__search-widget-listitem {
660 display: flex;
661 align-items: center;
662 gap: 8px;
663 border-radius: 2px;
664 box-sizing: border-box;
665 padding: 4px 12px;
666 cursor: default;
667 min-height: 32px;
668 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
669 font-weight: 400;
670 font-size: 13px;
671 line-height: 20px;
672 }
673
674 .dataviews-filters__search-widget-listitem:last-child {
675 margin-block-end: 0;
676 }
677
678 .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
679 background-color: var(--wp-admin-theme-color);
680 color: #fff;
681 }
682
683 .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 {
684 color: #fff;
685 }
686
687 .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 {
688 border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
689 background: #fff;
690 }
691
692 .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 {
693 border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
694 background: var(--wp-admin-theme-color-darker-20, #183ad6);
695 }
696
697 .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 {
698 border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
699 }
700
701 .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 {
702 border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
703 background: var(--wp-admin-theme-color-darker-20, #183ad6);
704 }
705
706 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
707 overflow: hidden;
708 text-overflow: ellipsis;
709 white-space: nowrap;
710 min-width: 0;
711 }
712
713 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
714 display: block;
715 overflow: hidden;
716 text-overflow: ellipsis;
717 font-size: 12px;
718 line-height: 16px;
719 color: #757575;
720 }
721
722 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
723 border: 1px solid #1e1e1e;
724 margin-right: 12px;
725 transition: none;
726 border-radius: 50%;
727 width: 24px;
728 height: 24px;
729 min-width: 24px;
730 max-width: 24px;
731 position: relative;
732 }
733
734 @media not (prefers-reduced-motion) {
735 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
736 transition: box-shadow 0.1s linear;
737 }
738 }
739 @media (min-width: 600px) {
740 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
741 height: 16px;
742 width: 16px;
743 min-width: 16px;
744 max-width: 16px;
745 }
746 }
747 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
748 box-sizing: inherit;
749 width: 12px;
750 height: 12px;
751 position: absolute;
752 top: 50%;
753 left: 50%;
754 transform: translate(-50%, -50%);
755 margin: 0;
756 background-color: #fff;
757 border: 4px solid #fff;
758 }
759
760 @media (min-width: 600px) {
761 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
762 width: 8px;
763 height: 8px;
764 }
765 }
766 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus {
767 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
768 outline: 2px solid transparent;
769 }
770
771 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked {
772 background: var(--wp-admin-theme-color);
773 border: none;
774 }
775
776 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
777 margin: 0;
778 padding: 0;
779 }
780
781 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
782 background: var(--wp-admin-theme-color, #3858e9);
783 border-color: var(--wp-admin-theme-color, #3858e9);
784 }
785
786 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
787 content: "";
788 border-radius: 50%;
789 box-sizing: inherit;
790 width: 12px;
791 height: 12px;
792 position: absolute;
793 top: 50%;
794 left: 50%;
795 transform: translate(-50%, -50%);
796 margin: 0;
797 background-color: #fff;
798 border: 4px solid #fff;
799 }
800
801 @media (min-width: 600px) {
802 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
803 width: 8px;
804 height: 8px;
805 }
806 }
807 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
808 --checkbox-size: 24px;
809 flex-shrink: 0;
810 border: 1px solid #1e1e1e;
811 margin-right: 12px;
812 transition: none;
813 border-radius: 2px;
814 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
815 padding: 6px 8px;
816 /* Fonts smaller than 16px causes mobile safari to zoom. */
817 font-size: 16px;
818 /* Override core line-height. To be reviewed. */
819 line-height: normal;
820 box-shadow: 0 0 0 transparent;
821 border-radius: 2px;
822 border: 1px solid #949494;
823 }
824
825 @media not (prefers-reduced-motion) {
826 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
827 transition: box-shadow 0.1s linear;
828 }
829 }
830 @media (min-width: 600px) {
831 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
832 font-size: 13px;
833 /* Override core line-height. To be reviewed. */
834 line-height: normal;
835 }
836 }
837 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
838 border-color: var(--wp-admin-theme-color);
839 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
840 outline: 2px solid transparent;
841 }
842
843 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
844 color: rgba(30, 30, 30, 0.62);
845 }
846
847 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
848 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
849 outline: 2px solid transparent;
850 }
851
852 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked {
853 background: var(--wp-admin-theme-color);
854 border-color: var(--wp-admin-theme-color);
855 }
856
857 .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 {
858 margin: -3px -5px;
859 color: #fff;
860 }
861
862 @media (min-width: 782px) {
863 .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 {
864 margin: -4px 0 0 -5px;
865 }
866 }
867 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] {
868 background: var(--wp-admin-theme-color);
869 border-color: var(--wp-admin-theme-color);
870 }
871
872 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
873 content: "\f460";
874 float: left;
875 display: inline-block;
876 vertical-align: middle;
877 width: 16px;
878 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
879 font: normal 30px/1 dashicons;
880 speak: none;
881 -webkit-font-smoothing: antialiased;
882 -moz-osx-font-smoothing: grayscale;
883 }
884
885 @media (min-width: 782px) {
886 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
887 float: none;
888 font-size: 21px;
889 }
890 }
891 .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 {
892 background: #f0f0f0;
893 border-color: #ddd;
894 cursor: default;
895 opacity: 1;
896 }
897
898 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
899 position: relative;
900 background: #fff;
901 color: #1e1e1e;
902 margin: 0;
903 padding: 0;
904 width: var(--checkbox-size);
905 height: var(--checkbox-size);
906 }
907
908 @media (min-width: 600px) {
909 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
910 --checkbox-size: 16px;
911 }
912 }
913 @media not (prefers-reduced-motion) {
914 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
915 transition: 0.1s border-color ease-in-out;
916 }
917 }
918 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
919 background: var(--wp-admin-theme-color, #3858e9);
920 border-color: var(--wp-admin-theme-color, #3858e9);
921 }
922
923 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
924 --checkmark-size: var(--checkbox-size);
925 fill: #fff;
926 position: absolute;
927 left: 50%;
928 top: 50%;
929 transform: translate(-50%, -50%);
930 width: var(--checkmark-size);
931 height: var(--checkmark-size);
932 }
933
934 @media (min-width: 600px) {
935 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
936 --checkmark-size: calc(var(--checkbox-size) + 4px);
937 }
938 }
939 .dataviews-filters__search-widget-filter-combobox__wrapper {
940 position: relative;
941 padding: 8px;
942 }
943
944 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
945 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
946 padding: 6px 8px;
947 /* Fonts smaller than 16px causes mobile safari to zoom. */
948 font-size: 16px;
949 /* Override core line-height. To be reviewed. */
950 line-height: normal;
951 box-shadow: 0 0 0 transparent;
952 border-radius: 2px;
953 border: 1px solid #949494;
954 }
955
956 @media not (prefers-reduced-motion) {
957 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
958 transition: box-shadow 0.1s linear;
959 }
960 }
961 @media (min-width: 600px) {
962 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
963 font-size: 13px;
964 /* Override core line-height. To be reviewed. */
965 line-height: normal;
966 }
967 }
968 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
969 border-color: var(--wp-admin-theme-color);
970 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
971 outline: 2px solid transparent;
972 }
973
974 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
975 color: rgba(30, 30, 30, 0.62);
976 }
977
978 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
979 display: block;
980 padding: 0 8px 0 32px;
981 width: 100%;
982 height: 32px;
983 margin-left: 0;
984 margin-right: 0;
985 /* Fonts smaller than 16px causes mobile safari to zoom. */
986 font-size: 16px;
987 }
988
989 @media (min-width: 600px) {
990 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
991 font-size: 13px;
992 }
993 }
994 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
995 background: #fff;
996 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
997 }
998
999 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
1000 color: #757575;
1001 }
1002
1003 .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 {
1004 -webkit-appearance: none;
1005 }
1006
1007 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
1008 position: absolute;
1009 inset-inline-start: 12px;
1010 top: 0;
1011 bottom: 0;
1012 display: flex;
1013 align-items: center;
1014 justify-content: center;
1015 width: 24px;
1016 }
1017
1018 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
1019 transform: scaleX(-1);
1020 }
1021
1022 .dataviews-filters__container-visibility-toggle {
1023 position: relative;
1024 flex-shrink: 0;
1025 }
1026
1027 .dataviews-filters-toggle__count {
1028 position: absolute;
1029 top: 0;
1030 right: 0;
1031 transform: translate(50%, -50%);
1032 background: var(--wp-admin-theme-color, #3858e9);
1033 height: 16px;
1034 min-width: 16px;
1035 line-height: 16px;
1036 padding: 0 4px;
1037 text-align: center;
1038 border-radius: 8px;
1039 font-size: 11px;
1040 outline: var(--wp-admin-border-width-focus) solid #fff;
1041 color: #fff;
1042 box-sizing: border-box;
1043 }
1044
1045 .dataviews-search {
1046 width: fit-content;
1047 }
1048
1049 .dataviews-filters__user-input-widget {
1050 padding: 16px;
1051 }
1052
1053 .dataviews-filters__user-input-widget .components-input-control__prefix {
1054 padding-left: 8px;
1055 }
1056
1057 .dataviews-filters__search-widget-no-elements {
1058 display: flex;
1059 align-items: center;
1060 justify-content: center;
1061 padding: 16px;
1062 }
1063
1064 .dataviews-footer {
1065 position: sticky;
1066 bottom: 0;
1067 left: 0;
1068 background-color: inherit;
1069 padding: 12px 24px;
1070 border-top: 1px solid #f0f0f0;
1071 flex-shrink: 0;
1072 }
1073
1074 @media not (prefers-reduced-motion) {
1075 .dataviews-footer {
1076 transition: padding ease-out 0.1s;
1077 }
1078 }
1079 .dataviews-footer {
1080 z-index: 2;
1081 }
1082
1083 .dataviews-footer .is-refreshing {
1084 opacity: 0.5;
1085 pointer-events: none;
1086 }
1087
1088 @media not (prefers-reduced-motion) {
1089 .dataviews-footer .is-refreshing {
1090 opacity: 1;
1091 animation: dataviews-pulse 1s ease-in-out infinite;
1092 }
1093 }
1094 @container (max-width: 560px) {
1095 .dataviews-footer__content {
1096 flex-direction: column !important;
1097 }
1098 .dataviews-footer__content .dataviews-bulk-actions-footer__container {
1099 width: 100%;
1100 }
1101 .dataviews-footer__content .dataviews-bulk-actions-footer__item-count {
1102 flex-grow: 1;
1103 }
1104 .dataviews-footer__content .dataviews-pagination {
1105 width: 100%;
1106 justify-content: space-between;
1107 }
1108 }
1109 .dataviews-pagination__page-select {
1110 font-size: 11px;
1111 font-weight: 499;
1112 text-transform: uppercase;
1113 }
1114
1115 @media (min-width: 600px) {
1116 .dataviews-pagination__page-select .components-select-control__input {
1117 font-size: 11px !important;
1118 font-weight: 499;
1119 }
1120 }
1121 .dataviews-action-modal {
1122 z-index: 1000001;
1123 }
1124
1125 .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1126 padding: 0 4px;
1127 }
1128
1129 .dataviews-selection-checkbox {
1130 --checkbox-input-size: 24px;
1131 }
1132
1133 @media (min-width: 600px) {
1134 .dataviews-selection-checkbox {
1135 --checkbox-input-size: 16px;
1136 }
1137 }
1138 .dataviews-selection-checkbox {
1139 line-height: 0;
1140 flex-shrink: 0;
1141 }
1142
1143 .dataviews-selection-checkbox .components-checkbox-control__input-container {
1144 margin: 0;
1145 }
1146
1147 .dataviews-view-config {
1148 width: 320px;
1149 /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
1150 container-type: inline-size;
1151 font-size: 13px;
1152 line-height: 1.4;
1153 }
1154
1155 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
1156 overflow-y: scroll;
1157 height: 100%;
1158 }
1159
1160 .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config {
1161 width: auto;
1162 }
1163
1164 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
1165 text-transform: uppercase;
1166 }
1167
1168 .dataviews-settings-section__title.dataviews-settings-section__title {
1169 line-height: 24px;
1170 font-size: 15px;
1171 }
1172
1173 .dataviews-settings-section__sidebar {
1174 grid-column: span 4;
1175 }
1176
1177 .dataviews-settings-section__content,
1178 .dataviews-settings-section__content > * {
1179 grid-column: span 8;
1180 }
1181
1182 .dataviews-settings-section__content .is-divided-in-two {
1183 display: contents;
1184 }
1185
1186 .dataviews-settings-section__content .is-divided-in-two > * {
1187 grid-column: span 4;
1188 }
1189
1190 .dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
1191 display: none;
1192 }
1193
1194 @container (max-width: 500px) {
1195 .dataviews-settings-section.dataviews-settings-section {
1196 grid-template-columns: repeat(2, 1fr);
1197 }
1198 .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar {
1199 grid-column: span 2;
1200 }
1201 .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content {
1202 grid-column: span 2;
1203 }
1204 }
1205 .dataviews-view-config__sort-controls > * {
1206 flex: 1;
1207 }
1208
1209 .dataviews-view-config__label {
1210 text-wrap: nowrap;
1211 }
1212
1213 .dataviews-view-config__toggle-wrapper {
1214 position: relative;
1215 display: inline-flex;
1216 }
1217
1218 .dataviews-view-config__modified-indicator {
1219 position: absolute;
1220 top: 4px;
1221 right: 4px;
1222 width: 4px;
1223 height: 4px;
1224 background: var(--wp-admin-theme-color, #3858e9);
1225 border-radius: 50%;
1226 pointer-events: none;
1227 }
1228
1229 .dataviews-view-grid-items {
1230 margin-bottom: auto;
1231 display: grid;
1232 gap: 24px;
1233 grid-template-rows: max-content;
1234 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
1235 padding: 0 24px 24px;
1236 container-type: inline-size;
1237 }
1238
1239 @media not (prefers-reduced-motion) {
1240 .dataviews-view-grid-items {
1241 transition: padding ease-out 0.1s;
1242 }
1243 }
1244 .dataviews-view-grid-items.has-compact-density {
1245 gap: 16px;
1246 }
1247
1248 .dataviews-view-grid-items.has-comfortable-density {
1249 gap: 32px;
1250 }
1251
1252 .dataviews-view-grid {
1253 padding: 0 24px 24px;
1254 display: flex;
1255 flex-direction: column;
1256 gap: 24px;
1257 container-type: inline-size;
1258 margin-bottom: auto;
1259 }
1260
1261 @media not (prefers-reduced-motion) {
1262 .dataviews-view-grid {
1263 transition: padding ease-out 0.1s;
1264 }
1265 }
1266 .dataviews-view-grid.has-compact-density {
1267 gap: 16px;
1268 }
1269
1270 .dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
1271 gap: 16px;
1272 }
1273
1274 .dataviews-view-grid.has-comfortable-density {
1275 gap: 32px;
1276 }
1277
1278 .dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
1279 gap: 32px;
1280 }
1281
1282 .dataviews-view-grid .dataviews-view-grid__row {
1283 display: grid;
1284 gap: 24px;
1285 }
1286
1287 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
1288 border-radius: 4px;
1289 position: relative;
1290 }
1291
1292 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after {
1293 content: "";
1294 position: absolute;
1295 top: 0;
1296 left: 0;
1297 width: 100%;
1298 height: 100%;
1299 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1300 border-radius: 4px;
1301 pointer-events: none;
1302 outline: 2px solid transparent;
1303 }
1304
1305 .dataviews-view-grid .dataviews-view-grid__card,
1306 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card {
1307 height: 100%;
1308 justify-content: flex-start;
1309 position: relative;
1310 }
1311
1312 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title,
1313 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title {
1314 padding: 8px 0 4px;
1315 }
1316
1317 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1318 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1319 min-height: 24px;
1320 overflow: hidden;
1321 align-content: center;
1322 text-align: start;
1323 }
1324
1325 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1326 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1327 width: fit-content;
1328 }
1329
1330 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1331 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1332 color: #1e1e1e;
1333 }
1334
1335 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1336 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1337 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1338 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1339 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1340 }
1341
1342 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1343 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
1344 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
1345 }
1346
1347 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1348 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1349 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1350 }
1351
1352 .dataviews-view-grid .dataviews-view-grid__media,
1353 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1354 width: 100%;
1355 aspect-ratio: 1/1;
1356 background-color: #fff;
1357 border-radius: 4px;
1358 overflow: hidden;
1359 position: relative;
1360 }
1361
1362 .dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder,
1363 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
1364 aspect-ratio: 3/1;
1365 }
1366
1367 .dataviews-view-grid .dataviews-view-grid__media img,
1368 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1369 object-fit: cover;
1370 width: 100%;
1371 height: 100%;
1372 }
1373
1374 .dataviews-view-grid .dataviews-view-grid__media::after,
1375 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after {
1376 content: "";
1377 position: absolute;
1378 top: 0;
1379 left: 0;
1380 width: 100%;
1381 height: 100%;
1382 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1383 border-radius: 4px;
1384 pointer-events: none;
1385 }
1386
1387 .dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder,
1388 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
1389 width: 100%;
1390 height: 100%;
1391 display: block;
1392 border-radius: 4px;
1393 box-shadow: none;
1394 background: #f0f0f0;
1395 }
1396
1397 .dataviews-view-grid .dataviews-view-grid__fields,
1398 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
1399 position: relative;
1400 font-size: 12px;
1401 line-height: 16px;
1402 }
1403
1404 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
1405 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
1406 padding: 0 0 12px;
1407 }
1408
1409 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1410 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
1411 min-height: 24px;
1412 line-height: 20px;
1413 padding-top: 2px;
1414 }
1415
1416 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1417 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1418 min-height: 24px;
1419 align-items: center;
1420 }
1421
1422 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1423 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1424 width: 35%;
1425 color: #757575;
1426 overflow: hidden;
1427 text-overflow: ellipsis;
1428 white-space: nowrap;
1429 }
1430
1431 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1432 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1433 width: 65%;
1434 overflow: hidden;
1435 text-overflow: ellipsis;
1436 white-space: nowrap;
1437 }
1438
1439 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))),
1440 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
1441 display: none;
1442 }
1443
1444 .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
1445 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
1446 padding-bottom: 12px;
1447 }
1448
1449 .dataviews-view-grid.is-refreshing,
1450 .dataviews-view-grid-infinite-scroll.is-refreshing {
1451 opacity: 0.5;
1452 pointer-events: none;
1453 }
1454
1455 @media not (prefers-reduced-motion) {
1456 .dataviews-view-grid.is-refreshing,
1457 .dataviews-view-grid-infinite-scroll.is-refreshing {
1458 opacity: 1;
1459 animation: dataviews-pulse 1s ease-in-out infinite;
1460 }
1461 }
1462 .dataviews-view-grid__field-value:empty,
1463 .dataviews-view-grid__field:empty {
1464 display: none;
1465 }
1466
1467 .dataviews-view-grid__card .dataviews-selection-checkbox {
1468 position: absolute;
1469 top: -9999em;
1470 left: 8px;
1471 z-index: 1;
1472 opacity: 0;
1473 }
1474
1475 @media not (prefers-reduced-motion) {
1476 .dataviews-view-grid__card .dataviews-selection-checkbox {
1477 transition: opacity 0.1s linear;
1478 }
1479 }
1480 @media (hover: none) {
1481 .dataviews-view-grid__card .dataviews-selection-checkbox {
1482 opacity: 1;
1483 top: 8px;
1484 }
1485 }
1486 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
1487 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
1488 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
1489 opacity: 1;
1490 top: 8px;
1491 }
1492
1493 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1494 position: absolute;
1495 z-index: 1;
1496 top: 4px;
1497 opacity: 0;
1498 right: 4px;
1499 }
1500
1501 .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1502 background-color: #fff;
1503 }
1504
1505 @media not (prefers-reduced-motion) {
1506 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1507 transition: opacity 0.1s linear;
1508 }
1509 }
1510 @media (hover: none) {
1511 .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1512 opacity: 1;
1513 top: 4px;
1514 }
1515 }
1516 .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
1517 .dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
1518 .dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
1519 opacity: 1;
1520 }
1521
1522 .dataviews-view-grid__media--clickable {
1523 cursor: var(--wpds-cursor-control, pointer);
1524 }
1525
1526 .dataviews-view-grid__group-header {
1527 font-size: 15px;
1528 font-weight: 499;
1529 color: #1e1e1e;
1530 margin: 0 0 8px 0;
1531 padding: 0 24px;
1532 container-type: inline-size;
1533 }
1534
1535 div.dataviews-view-list {
1536 list-style-type: none;
1537 }
1538
1539 .dataviews-view-list {
1540 margin: 0 0 auto;
1541 }
1542
1543 .dataviews-view-list div[role=row],
1544 .dataviews-view-list div[role=article] {
1545 margin: 0;
1546 border-top: 1px solid #f0f0f0;
1547 }
1548
1549 .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
1550 .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
1551 position: relative;
1552 padding: 16px 24px;
1553 box-sizing: border-box;
1554 }
1555
1556 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1557 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1558 display: flex;
1559 width: max-content;
1560 flex: 0 0 auto;
1561 gap: 4px;
1562 white-space: nowrap;
1563 }
1564
1565 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button,
1566 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions .components-button {
1567 position: relative;
1568 z-index: 1;
1569 }
1570
1571 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
1572 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
1573 height: 24px;
1574 }
1575
1576 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1577 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
1578 flex: 0;
1579 overflow: hidden;
1580 width: 0;
1581 }
1582
1583 .dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child),
1584 .dataviews-view-list div[role=article]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child) {
1585 flex-basis: min-content;
1586 width: auto;
1587 overflow: unset;
1588 }
1589
1590 @media (hover: none) {
1591 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1592 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
1593 flex-basis: min-content;
1594 width: auto;
1595 overflow: unset;
1596 }
1597 }
1598 .dataviews-view-list div[role=row].is-selected.is-selected,
1599 .dataviews-view-list div[role=article].is-selected.is-selected {
1600 border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1601 }
1602
1603 .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],
1604 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
1605 .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
1606 border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1607 }
1608
1609 .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,
1610 .dataviews-view-list div[role=article]:not(.is-selected):hover,
1611 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1612 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1613 color: var(--wp-admin-theme-color);
1614 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
1615 border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1616 }
1617
1618 .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],
1619 .dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=row],
1620 .dataviews-view-list div[role=article]:not(.is-selected):hover + div[role=article],
1621 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=row],
1622 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered + div[role=article],
1623 .dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=row],
1624 .dataviews-view-list div[role=article]:not(.is-selected):focus-within + div[role=article] {
1625 border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1626 }
1627
1628 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1629 .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,
1630 .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,
1631 .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field,
1632 .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-title-field,
1633 .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__field,
1634 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
1635 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1636 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1637 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1638 color: var(--wp-admin-theme-color);
1639 }
1640
1641 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1642 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1643 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1644 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1645 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
1646 color: #1e1e1e;
1647 }
1648
1649 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1650 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1651 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1652 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1653 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1654 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1655 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1656 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1657 color: #1e1e1e;
1658 }
1659
1660 .dataviews-view-list .dataviews-view-list__item {
1661 position: absolute;
1662 z-index: 1;
1663 inset: 0;
1664 scroll-margin: 8px 0;
1665 appearance: none;
1666 border: none;
1667 background: none;
1668 padding: 0;
1669 cursor: var(--wpds-cursor-control, pointer);
1670 }
1671
1672 .dataviews-view-list .dataviews-view-list__item:focus-visible {
1673 outline: none;
1674 }
1675
1676 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
1677 position: absolute;
1678 content: "";
1679 inset: var(--wp-admin-border-width-focus);
1680 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1681 border-radius: 2px;
1682 outline: 2px solid transparent;
1683 }
1684
1685 .dataviews-view-list .dataviews-view-list__title-field {
1686 flex: 1;
1687 min-height: 24px;
1688 line-height: 24px;
1689 overflow: hidden;
1690 }
1691
1692 .dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
1693 z-index: 1;
1694 }
1695
1696 .dataviews-view-list .dataviews-view-list__media-wrapper {
1697 width: 52px;
1698 height: 52px;
1699 overflow: hidden;
1700 position: relative;
1701 flex-shrink: 0;
1702 background-color: #fff;
1703 border-radius: 4px;
1704 }
1705
1706 .dataviews-view-list .dataviews-view-list__media-wrapper img {
1707 width: 100%;
1708 height: 100%;
1709 object-fit: cover;
1710 }
1711
1712 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
1713 content: "";
1714 position: absolute;
1715 top: 0;
1716 left: 0;
1717 width: 100%;
1718 height: 100%;
1719 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1720 border-radius: 4px;
1721 }
1722
1723 .dataviews-view-list .dataviews-view-list__field-wrapper {
1724 flex-grow: 1;
1725 min-width: 0;
1726 }
1727
1728 .dataviews-view-list .dataviews-view-list__field {
1729 color: #757575;
1730 }
1731
1732 .dataviews-view-list .dataviews-view-list__fields {
1733 display: flex;
1734 gap: 12px;
1735 row-gap: 4px;
1736 flex-wrap: wrap;
1737 font-size: 12px;
1738 }
1739
1740 .dataviews-view-list .dataviews-view-list__fields:empty {
1741 display: none;
1742 }
1743
1744 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
1745 display: none;
1746 }
1747
1748 .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1749 min-height: 24px;
1750 line-height: 20px;
1751 display: flex;
1752 align-items: center;
1753 }
1754
1755 .dataviews-view-list + .dataviews-pagination {
1756 justify-content: space-between;
1757 }
1758
1759 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper {
1760 padding: 8px 24px;
1761 }
1762
1763 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1764 min-height: 16px;
1765 line-height: 16px;
1766 }
1767
1768 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
1769 width: 32px;
1770 height: 32px;
1771 }
1772
1773 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
1774 gap: 8px;
1775 row-gap: 4px;
1776 }
1777
1778 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1779 min-height: 16px;
1780 line-height: 16px;
1781 }
1782
1783 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
1784 padding: 24px 24px;
1785 }
1786
1787 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1788 min-height: 32px;
1789 line-height: 32px;
1790 }
1791
1792 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
1793 width: 64px;
1794 height: 64px;
1795 }
1796
1797 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
1798 gap: 16px;
1799 row-gap: 8px;
1800 }
1801
1802 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1803 min-height: 32px;
1804 line-height: 24px;
1805 }
1806
1807 .dataviews-view-list.is-refreshing {
1808 opacity: 0.5;
1809 pointer-events: none;
1810 }
1811
1812 @media not (prefers-reduced-motion) {
1813 .dataviews-view-list.is-refreshing {
1814 opacity: 1;
1815 animation: dataviews-pulse 1s ease-in-out infinite;
1816 }
1817 }
1818 .dataviews-view-list__group-header {
1819 font-size: 15px;
1820 font-weight: 499;
1821 color: #1e1e1e;
1822 margin: 0 0 8px 0;
1823 padding: 0 24px;
1824 }
1825
1826 .dataviews-view-table {
1827 width: 100%;
1828 text-indent: 0;
1829 border-color: inherit;
1830 border-collapse: collapse;
1831 position: relative;
1832 color: #757575;
1833 margin-bottom: auto;
1834 background-color: inherit;
1835 }
1836
1837 .dataviews-view-table th {
1838 text-align: left;
1839 color: #1e1e1e;
1840 font-weight: normal;
1841 font-size: 13px;
1842 }
1843
1844 .dataviews-view-table td,
1845 .dataviews-view-table th {
1846 padding: 12px;
1847 }
1848
1849 .dataviews-view-table td.dataviews-view-table__actions-column,
1850 .dataviews-view-table th.dataviews-view-table__actions-column {
1851 text-align: right;
1852 }
1853
1854 .dataviews-view-table td.dataviews-view-table__actions-column--sticky,
1855 .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1856 position: sticky;
1857 right: 0;
1858 background-color: var(--wp-dataviews-color-background, #fff);
1859 }
1860
1861 .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
1862 .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
1863 display: block;
1864 content: "";
1865 position: absolute;
1866 top: 0;
1867 bottom: 0;
1868 left: 0;
1869 width: 1px;
1870 background-color: #f0f0f0;
1871 }
1872
1873 .dataviews-view-table td.dataviews-view-table__checkbox-column,
1874 .dataviews-view-table th.dataviews-view-table__checkbox-column {
1875 padding-right: 0;
1876 }
1877
1878 .dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper,
1879 .dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper {
1880 max-width: auto;
1881 min-width: auto;
1882 }
1883
1884 .dataviews-view-table tr {
1885 border-top: 1px solid #f0f0f0;
1886 background-color: inherit;
1887 }
1888
1889 .dataviews-view-table tr td:first-child,
1890 .dataviews-view-table tr th:first-child {
1891 padding-left: 24px;
1892 }
1893
1894 .dataviews-view-table tr td:last-child,
1895 .dataviews-view-table tr th:last-child {
1896 padding-right: 24px;
1897 }
1898
1899 .dataviews-view-table tr:last-child {
1900 border-bottom: 0;
1901 }
1902
1903 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1904 opacity: 0;
1905 }
1906
1907 @media (hover: none) {
1908 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1909 opacity: 1;
1910 }
1911 }
1912 .dataviews-view-table tr.is-selected {
1913 background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1914 color: #757575;
1915 }
1916
1917 .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
1918 border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
1919 }
1920
1921 .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
1922 background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1923 }
1924
1925 .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) {
1926 opacity: 1;
1927 }
1928
1929 .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 {
1930 background-color: var(--wp-dataviews-color-background, #fff);
1931 }
1932
1933 .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 {
1934 background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
1935 }
1936
1937 .dataviews-view-table thead {
1938 position: sticky;
1939 inset-block-start: 0;
1940 z-index: 1;
1941 background-color: inherit;
1942 }
1943
1944 .dataviews-view-table thead.dataviews-view-table__thead--stuck::after {
1945 display: block;
1946 content: "";
1947 position: absolute;
1948 bottom: 0;
1949 left: 0;
1950 right: 0;
1951 height: 1px;
1952 background-color: #f0f0f0;
1953 }
1954
1955 .dataviews-view-table thead tr {
1956 border: 0;
1957 }
1958
1959 .dataviews-view-table thead th {
1960 background-color: inherit;
1961 padding-top: 8px;
1962 padding-bottom: 8px;
1963 font-size: 11px;
1964 text-transform: uppercase;
1965 font-weight: 499;
1966 }
1967
1968 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
1969 padding-left: 4px;
1970 padding-right: 4px;
1971 }
1972
1973 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
1974 gap: 4px;
1975 }
1976
1977 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
1978 padding-left: 16px;
1979 }
1980
1981 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1982 padding-right: 16px;
1983 }
1984
1985 .dataviews-view-table tbody td {
1986 vertical-align: top;
1987 }
1988
1989 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1990 min-height: 32px;
1991 display: flex;
1992 align-items: center;
1993 white-space: nowrap;
1994 }
1995
1996 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
1997 justify-content: flex-end;
1998 font-variant-numeric: tabular-nums;
1999 }
2000
2001 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
2002 justify-content: center;
2003 }
2004
2005 .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
2006 min-height: 0;
2007 }
2008
2009 .dataviews-view-table .dataviews-view-table-header-button {
2010 padding: 4px 8px;
2011 font-size: 11px;
2012 text-transform: uppercase;
2013 font-weight: 499;
2014 }
2015
2016 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
2017 color: #1e1e1e;
2018 }
2019
2020 .dataviews-view-table .dataviews-view-table-header-button span {
2021 speak: none;
2022 }
2023
2024 .dataviews-view-table .dataviews-view-table-header-button span:empty {
2025 display: none;
2026 }
2027
2028 .dataviews-view-table .dataviews-view-table-header {
2029 padding-left: 4px;
2030 }
2031
2032 .dataviews-view-table .dataviews-view-table__actions-column {
2033 width: auto;
2034 white-space: nowrap;
2035 }
2036
2037 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) {
2038 padding-left: 0;
2039 }
2040
2041 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
2042 padding-right: 0;
2043 }
2044
2045 .dataviews-view-table.has-compact-density td,
2046 .dataviews-view-table.has-compact-density th {
2047 padding: 4px 8px;
2048 }
2049
2050 .dataviews-view-table.has-comfortable-density td,
2051 .dataviews-view-table.has-comfortable-density th {
2052 padding: 16px 12px;
2053 }
2054
2055 .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
2056 .dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column,
2057 .dataviews-view-table.has-comfortable-density th.dataviews-view-table__checkbox-column {
2058 padding-right: 0;
2059 }
2060
2061 .dataviews-view-table-selection-checkbox {
2062 --checkbox-input-size: 24px;
2063 }
2064
2065 @media (min-width: 600px) {
2066 .dataviews-view-table-selection-checkbox {
2067 --checkbox-input-size: 16px;
2068 }
2069 }
2070 .dataviews-column-primary__media {
2071 max-width: 60px;
2072 min-width: 32px;
2073 min-height: 32px;
2074 overflow: hidden;
2075 position: relative;
2076 flex-shrink: 0;
2077 background-color: #fff;
2078 border-radius: 4px;
2079 }
2080
2081 .dataviews-column-primary__media img {
2082 width: 32px;
2083 height: 32px;
2084 object-fit: cover;
2085 }
2086
2087 .dataviews-column-primary__media::after {
2088 content: "";
2089 position: absolute;
2090 top: 0;
2091 left: 0;
2092 width: 100%;
2093 height: 100%;
2094 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2095 border-radius: 4px;
2096 }
2097
2098 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
2099 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
2100 min-width: 15ch;
2101 max-width: 80ch;
2102 }
2103
2104 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
2105 font-weight: 499;
2106 padding: 12px 24px;
2107 color: #1e1e1e;
2108 }
2109
2110 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
2111 .dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
2112 width: 1%;
2113 }
2114
2115 .dataviews-view-table.is-refreshing {
2116 opacity: 0.5;
2117 pointer-events: none;
2118 }
2119
2120 @media not (prefers-reduced-motion) {
2121 .dataviews-view-table.is-refreshing {
2122 opacity: 1;
2123 animation: dataviews-pulse 1s ease-in-out infinite;
2124 }
2125 }
2126 .dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
2127 gap: 16px;
2128 }
2129
2130 .dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
2131 gap: 32px;
2132 }
2133
2134 .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
2135 height: 100%;
2136 justify-content: flex-start;
2137 position: relative;
2138 }
2139
2140 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
2141 padding: 8px 0 4px;
2142 }
2143
2144 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
2145 min-height: 24px;
2146 overflow: hidden;
2147 align-content: center;
2148 text-align: start;
2149 }
2150
2151 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2152 width: fit-content;
2153 }
2154
2155 .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 {
2156 color: #1e1e1e;
2157 }
2158
2159 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
2160 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2161 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2162 }
2163
2164 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
2165 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2166 }
2167
2168 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2169 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2170 }
2171
2172 .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
2173 outline: none;
2174 }
2175
2176 .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
2177 outline: 2px solid var(--wp-admin-theme-color);
2178 }
2179
2180 .dataviews-view-picker-grid .dataviews-selection-checkbox {
2181 top: 8px !important;
2182 }
2183
2184 .dataviews-view-picker-grid .dataviews-selection-checkbox input {
2185 pointer-events: none;
2186 }
2187
2188 .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
2189 width: 100%;
2190 aspect-ratio: 1/1;
2191 min-height: 0;
2192 background-color: #fff;
2193 border-radius: 4px;
2194 position: relative;
2195 }
2196
2197 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2198 object-fit: cover;
2199 width: 100%;
2200 height: 100%;
2201 }
2202
2203 .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
2204 content: "";
2205 position: absolute;
2206 top: 0;
2207 left: 0;
2208 width: 100%;
2209 height: 100%;
2210 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2211 border-radius: 4px;
2212 pointer-events: none;
2213 }
2214
2215 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
2216 position: relative;
2217 font-size: 12px;
2218 line-height: 16px;
2219 }
2220
2221 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
2222 padding: 0 0 12px;
2223 }
2224
2225 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
2226 min-height: 24px;
2227 line-height: 20px;
2228 padding-top: 2px;
2229 }
2230
2231 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2232 min-height: 24px;
2233 align-items: center;
2234 }
2235
2236 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
2237 width: 35%;
2238 color: #757575;
2239 overflow: hidden;
2240 text-overflow: ellipsis;
2241 white-space: nowrap;
2242 }
2243
2244 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
2245 width: 65%;
2246 overflow: hidden;
2247 text-overflow: ellipsis;
2248 white-space: nowrap;
2249 }
2250
2251 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
2252 display: none;
2253 }
2254
2255 .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
2256 padding-bottom: 12px;
2257 }
2258
2259 .dataviews-view-picker-grid__field-value:empty,
2260 .dataviews-view-picker-grid__field:empty {
2261 display: none;
2262 }
2263
2264 .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2265 position: absolute;
2266 top: -9999em;
2267 left: 8px;
2268 z-index: 1;
2269 }
2270
2271 @media (hover: none) {
2272 .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2273 top: 8px;
2274 }
2275 }
2276 .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
2277 .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
2278 .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
2279 top: 8px;
2280 }
2281
2282 .dataviews-view-picker-grid__media--clickable {
2283 cursor: var(--wpds-cursor-control, pointer);
2284 }
2285
2286 .dataviews-view-picker-grid-group__header {
2287 font-size: 15px;
2288 font-weight: 499;
2289 color: #1e1e1e;
2290 margin: 0 0 8px 0;
2291 padding: 0 48px;
2292 }
2293
2294 .dataviews-view-picker-table {
2295 background-color: inherit;
2296 }
2297
2298 .dataviews-view-picker-table .dataviews-view-table__checkbox-column {
2299 width: 48px;
2300 }
2301
2302 .dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] {
2303 outline: none;
2304 }
2305
2306 .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
2307 outline: 2px solid var(--wp-admin-theme-color);
2308 }
2309
2310 .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
2311 pointer-events: none;
2312 opacity: 1;
2313 }
2314
2315 .dataviews-view-picker-table .dataviews-view-table__row {
2316 cursor: var(--wpds-cursor-control, pointer);
2317 }
2318
2319 .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
2320 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2321 }
2322
2323 .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
2324 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
2325 }
2326
2327 .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
2328 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
2329 }
2330
2331 .dataviews-view-activity {
2332 margin: 0 0 auto;
2333 padding: 0 24px;
2334 }
2335
2336 .dataviews-view-activity .dataviews-view-activity__group-header {
2337 font-size: 15px;
2338 font-weight: 499;
2339 color: #949494;
2340 margin: 0 0 8px 0;
2341 padding: 0;
2342 }
2343
2344 .dataviews-view-activity .dataviews-view-activity__item-actions {
2345 min-width: 24px;
2346 }
2347
2348 .dataviews-view-activity .dataviews-view-activity__item-content {
2349 flex-grow: 1;
2350 }
2351
2352 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
2353 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
2354 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2355 min-height: 16px;
2356 }
2357
2358 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
2359 position: relative;
2360 display: flex;
2361 align-items: center;
2362 flex: 1;
2363 overflow: hidden;
2364 }
2365
2366 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable {
2367 cursor: var(--wpds-cursor-control, pointer);
2368 }
2369
2370 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
2371 outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
2372 outline-offset: var(--wp-admin-border-width-focus);
2373 border-radius: 2px;
2374 }
2375
2376 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2377 display: flex;
2378 width: max-content;
2379 flex: 0 0 auto;
2380 }
2381
2382 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions .components-button {
2383 position: relative;
2384 z-index: 1;
2385 }
2386
2387 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2388 color: #757575;
2389 display: flex;
2390 gap: 12px;
2391 row-gap: 4px;
2392 flex-wrap: wrap;
2393 }
2394
2395 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty {
2396 display: none;
2397 }
2398
2399 .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) {
2400 display: none;
2401 }
2402
2403 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field-value {
2404 display: flex;
2405 align-items: center;
2406 }
2407
2408 .dataviews-view-activity .dataviews-view-activity__item-type {
2409 align-self: stretch;
2410 flex-shrink: 0;
2411 }
2412
2413 .dataviews-view-activity .dataviews-view-activity__item-type::after {
2414 content: "";
2415 flex: 1 1 auto;
2416 width: 1px;
2417 margin: 0 auto;
2418 background-color: #ddd;
2419 }
2420
2421 .dataviews-view-activity .dataviews-view-activity__item-type::before {
2422 content: "";
2423 flex: 0 0 auto;
2424 width: 1px;
2425 margin: 0 auto;
2426 background-color: #ddd;
2427 }
2428
2429 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
2430 width: 12px;
2431 }
2432
2433 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
2434 height: 12px;
2435 }
2436
2437 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
2438 width: 11px;
2439 height: 11px;
2440 }
2441
2442 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
2443 margin: 12px 0;
2444 }
2445
2446 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
2447 width: 24px;
2448 }
2449
2450 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2451 height: 12px;
2452 }
2453
2454 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
2455 width: 25px;
2456 height: 25px;
2457 }
2458
2459 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
2460 margin: 12px 0;
2461 padding-top: 8px;
2462 }
2463
2464 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
2465 width: 32px;
2466 }
2467
2468 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2469 height: 8px;
2470 }
2471
2472 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
2473 width: 33px;
2474 height: 33px;
2475 }
2476
2477 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
2478 margin: 8px 0 16px;
2479 padding-top: 12px;
2480 }
2481
2482 .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 {
2483 width: 9px;
2484 height: 9px;
2485 position: relative;
2486 top: 50%;
2487 transform: translateY(-50%);
2488 }
2489
2490 .dataviews-view-activity .dataviews-view-activity__item:first-child .dataviews-view-activity__item-type::before {
2491 visibility: hidden;
2492 }
2493
2494 .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 {
2495 background: linear-gradient(to bottom, #ddd 0%, rgba(221, 221, 221, 0.2) 60%, rgba(221, 221, 221, 0) 100%);
2496 }
2497
2498 .dataviews-view-activity .dataviews-view-activity__item-type-icon {
2499 overflow: hidden;
2500 flex-shrink: 0;
2501 background-color: #fff;
2502 }
2503
2504 .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
2505 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
2506 .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
2507 display: block;
2508 width: 100%;
2509 height: 100%;
2510 margin: 0 auto;
2511 object-fit: cover;
2512 border-radius: 50%;
2513 box-sizing: border-box;
2514 box-shadow: inset 0 0 0 1px #ddd;
2515 }
2516
2517 .dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
2518 padding: 4px;
2519 }
2520
2521 .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
2522 content: "";
2523 background-color: #ddd;
2524 }
2525
2526 .dataviews-view-activity.is-refreshing {
2527 opacity: 0.5;
2528 pointer-events: none;
2529 }
2530
2531 @media not (prefers-reduced-motion) {
2532 .dataviews-view-activity.is-refreshing {
2533 opacity: 1;
2534 animation: dataviews-pulse 1s ease-in-out infinite;
2535 }
2536 }
2537 .dataviews-view-activity + .dataviews-pagination {
2538 justify-content: space-between;
2539 }
2540
2541 .dataviews-picker-footer__bulk-selection {
2542 align-self: flex-start;
2543 height: 32px;
2544 }
2545
2546 .dataviews-picker-footer__actions {
2547 align-self: flex-end;
2548 }
2549
2550 .dataviews-controls__datetime {
2551 border: none;
2552 padding: 0;
2553 }
2554
2555 .dataviews-controls__relative-date-number,
2556 .dataviews-controls__relative-date-unit {
2557 flex: 1 1 50%;
2558 }
2559
2560 .dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
2561 .dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
2562 display: none;
2563 -webkit-appearance: none;
2564 }
2565
2566 .dataviews-controls__date-range-inputs > * {
2567 min-width: 0;
2568 }
2569
2570 .dataviews-controls__color-picker-dropdown {
2571 display: flex;
2572 }
2573
2574 .dataviews-controls__date-preset {
2575 border: 1px solid #ddd;
2576 }
2577
2578 .dataviews-controls__date-preset:active {
2579 background-color: #000;
2580 }
2581
2582 .dataforms-layouts-panel__field-trigger {
2583 position: relative;
2584 color: inherit;
2585 display: flex;
2586 width: 100%;
2587 min-height: 24px;
2588 cursor: var(--wpds-cursor-control, pointer);
2589 align-items: flex-start;
2590 border-radius: 2px;
2591 isolation: isolate;
2592 }
2593
2594 .dataforms-layouts-panel__field-trigger--label-side {
2595 flex-direction: row;
2596 gap: var(--wpds-dimension-gap-md, 12px);
2597 }
2598
2599 .dataforms-layouts-panel__field-trigger--label-top {
2600 display: grid;
2601 grid-template-columns: 1fr auto;
2602 }
2603
2604 .dataforms-layouts-panel__field-trigger--label-none {
2605 align-items: center;
2606 }
2607
2608 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2609 color: var(--wp-admin-theme-color);
2610 }
2611
2612 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
2613 opacity: 1;
2614 }
2615
2616 .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
2617 color: var(--wp-admin-theme-color);
2618 }
2619
2620 .dataforms-layouts-panel__field-trigger.is-disabled {
2621 cursor: default;
2622 }
2623
2624 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2625 color: #757575;
2626 font-weight: var(--wpds-typography-font-weight-regular, 400);
2627 }
2628
2629 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
2630 opacity: 1;
2631 fill: currentColor;
2632 }
2633
2634 .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 {
2635 fill: var(--wp-admin-theme-color);
2636 }
2637
2638 .dataforms-layouts-panel__field-trigger-icon {
2639 padding: 0;
2640 color: var(--wp-admin-theme-color);
2641 flex: 0 0 auto;
2642 opacity: 0;
2643 border-radius: var(--wpds-border-radius-xs, 1px);
2644 }
2645
2646 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2647 opacity: 1;
2648 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wp-admin-theme-color);
2649 }
2650
2651 .dataforms-layouts-panel__field-dropdown-anchor {
2652 width: 100%;
2653 }
2654
2655 .dataforms-layouts-panel__field-dropdown-anchor .components-dropdown {
2656 width: 100%;
2657 }
2658
2659 .dataforms-layouts-panel__field-label {
2660 width: 38%;
2661 flex-shrink: 0;
2662 min-height: 24px;
2663 display: flex;
2664 align-items: center;
2665 line-height: 20px;
2666 hyphens: auto;
2667 color: #757575;
2668 }
2669
2670 .dataforms-layouts-panel__field-label .components-base-control__label {
2671 display: inline;
2672 margin-bottom: 0;
2673 line-height: inherit;
2674 }
2675
2676 .dataforms-layouts-panel__field-label.has-error {
2677 color: #cc1818;
2678 }
2679
2680 .dataforms-layouts-panel__field-label-error-content {
2681 position: relative;
2682 z-index: 1;
2683 cursor: help;
2684 fill: #cc1818;
2685 display: inline-flex;
2686 flex-direction: row;
2687 align-items: center;
2688 gap: 4px;
2689 }
2690
2691 .dataforms-layouts-panel__field-label-error-content svg {
2692 fill: currentColor;
2693 }
2694
2695 .dataforms-layouts-panel__field-control {
2696 flex-grow: 1;
2697 min-width: 0;
2698 min-height: 24px;
2699 line-height: var(--wpds-typography-line-height-md, 24px);
2700 display: flex;
2701 align-items: center;
2702 overflow: hidden;
2703 word-break: break-word;
2704 font-weight: var(--wpds-typography-font-weight-medium, 499);
2705 }
2706
2707 .dataforms-layouts-panel__field-control > * {
2708 min-width: 0;
2709 }
2710
2711 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2712 width: 100%;
2713 }
2714
2715 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control {
2716 grid-column: 1/-1;
2717 }
2718
2719 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon {
2720 grid-row: 1;
2721 grid-column: 2;
2722 }
2723
2724 .dataforms-layouts-panel__field-dropdown .components-popover__content {
2725 min-width: 256px;
2726 padding: 16px;
2727 }
2728
2729 .dataforms-layouts-panel__dropdown-header {
2730 margin-bottom: 16px;
2731 }
2732
2733 .dataforms-layouts-panel__modal-footer {
2734 margin-top: 16px;
2735 }
2736
2737 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2738 z-index: 159990;
2739 }
2740
2741 .dataforms-layouts-regular__field {
2742 width: 100%;
2743 min-height: 32px;
2744 justify-content: flex-start !important;
2745 align-items: flex-start !important;
2746 }
2747
2748 .dataforms-layouts-regular__field .components-base-control__label,
2749 .dataforms-layouts-regular__field .components-input-control__label,
2750 .dataforms-layouts-regular__field .components-form-token-field__label {
2751 color: #1e1e1e;
2752 }
2753
2754 .dataforms-layouts-regular__field-label {
2755 width: 38%;
2756 flex-shrink: 0;
2757 min-height: 32px;
2758 display: flex;
2759 align-items: center;
2760 line-height: 20px;
2761 hyphens: auto;
2762 }
2763
2764 .dataforms-layouts-regular__field-label--label-position-side {
2765 align-self: center;
2766 }
2767
2768 .dataforms-layouts-regular__field-label .components-base-control__label {
2769 margin-bottom: 0;
2770 }
2771
2772 .dataforms-layouts-regular__field-control {
2773 flex-grow: 1;
2774 min-height: 32px;
2775 display: flex;
2776 align-items: center;
2777 }
2778
2779 .dataforms-layouts-card__field {
2780 width: 100%;
2781 }
2782
2783 .dataforms-layouts-card__field-header-content {
2784 min-height: 24px;
2785 }
2786
2787 .dataforms-layouts-card__field-header-content-description {
2788 display: contents;
2789 }
2790
2791 .dataforms-layouts-card__field-description {
2792 color: #757575;
2793 display: block;
2794 font-size: 13px;
2795 margin-bottom: 16px;
2796 }
2797
2798 .dataforms-layouts-card__field-summary {
2799 display: flex;
2800 flex-direction: row;
2801 gap: 16px;
2802 align-items: center;
2803 }
2804
2805 .dataforms-layouts-details__summary-content {
2806 display: inline-flex;
2807 min-height: 24px;
2808 }
2809
2810 .dataforms-layouts-details__content {
2811 padding-top: 12px;
2812 }
2813
2814 .dataforms-layouts-row__field-control {
2815 width: 100%;
2816 }
2817
2818 .dataforms-layouts__wrapper {
2819 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2820 font-weight: 400;
2821 font-size: 13px;
2822 line-height: 20px;
2823 }
2824
2825 /**
2826 * Typography
2827 */
2828 /**
2829 * SCSS Variables.
2830 *
2831 * Please use variables from this sheet to ensure consistency across the UI.
2832 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
2833 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
2834 */
2835 /**
2836 * Colors
2837 */
2838 /**
2839 * Fonts & basic variables.
2840 */
2841 /**
2842 * Typography
2843 */
2844 /**
2845 * Grid System.
2846 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
2847 */
2848 /**
2849 * Radius scale.
2850 */
2851 /**
2852 * Elevation scale.
2853 */
2854 /**
2855 * Dimensions.
2856 */
2857 /**
2858 * Mobile specific styles
2859 */
2860 /**
2861 * Editor styles.
2862 */
2863 /**
2864 * Block & Editor UI.
2865 */
2866 /**
2867 * Block paddings.
2868 */
2869 /**
2870 * React Native specific.
2871 * These variables do not appear to be used anywhere else.
2872 */
2873 /**
2874 * Breakpoints & Media Queries
2875 */
2876 /**
2877 * Converts a hex value into the rgb equivalent.
2878 *
2879 * @param {string} hex - the hexadecimal value to convert
2880 * @return {string} comma separated rgb values
2881 */
2882 /**
2883 * Long content fade mixin
2884 *
2885 * Creates a fading overlay to signify that the content is longer
2886 * than the space allows.
2887 */
2888 /**
2889 * Breakpoint mixins
2890 */
2891 /**
2892 * Focus styles.
2893 */
2894 /**
2895 * Applies editor left position to the selector passed as argument
2896 */
2897 /**
2898 * Styles that are reused verbatim in a few places
2899 */
2900 /**
2901 * Allows users to opt-out of animations via OS-level preferences.
2902 */
2903 /**
2904 * Reset default styles for JavaScript UI based pages.
2905 * This is a WP-admin agnostic reset
2906 */
2907 /**
2908 * Reset the WP Admin page styles for Gutenberg-like pages.
2909 */
2910 /**
2911 * Creates a checkerboard pattern background to indicate transparency.
2912 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
2913 */
2914 :root {
2915 --wp-block-synced-color: #7a00df;
2916 --wp-block-synced-color--rgb: 122, 0, 223;
2917 --wp-bound-block-color: var(--wp-block-synced-color);
2918 --wp-editor-canvas-background: #ddd;
2919 --wp-admin-theme-color: #007cba;
2920 --wp-admin-theme-color--rgb: 0, 124, 186;
2921 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
2922 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
2923 --wp-admin-theme-color-darker-20: #005a87;
2924 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
2925 --wp-admin-border-width-focus: 2px;
2926 }
2927
2928 @media (min-resolution: 192dpi) {
2929 :root {
2930 --wp-admin-border-width-focus: 1.5px;
2931 }
2932 }
2933 .fields-create-template-part-modal {
2934 z-index: 1000001;
2935 }
2936
2937 .fields-create-template-part-modal__area-fieldset {
2938 border: 0;
2939 padding: 0;
2940 margin: 0;
2941 }
2942
2943 .fields-create-template-part-modal__area-radio-group {
2944 border: 1px solid #949494;
2945 border-radius: 2px;
2946 }
2947
2948 .fields-create-template-part-modal__area-radio-wrapper {
2949 position: relative;
2950 padding: 12px;
2951 display: grid;
2952 align-items: center;
2953 grid-template-columns: min-content 1fr min-content;
2954 grid-gap: 4px 8px;
2955 color: #1e1e1e;
2956 }
2957
2958 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
2959 border-top: 1px solid #949494;
2960 }
2961
2962 .fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
2963 position: absolute;
2964 opacity: 0;
2965 }
2966
2967 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
2968 z-index: 1;
2969 }
2970
2971 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
2972 color: var(--wp-admin-theme-color);
2973 }
2974
2975 .fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
2976 pointer-events: none;
2977 }
2978
2979 .fields-create-template-part-modal__area-radio-label::before {
2980 content: "";
2981 position: absolute;
2982 inset: 0;
2983 }
2984
2985 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
2986 cursor: pointer;
2987 }
2988
2989 input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
2990 outline: 4px solid transparent;
2991 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2992 }
2993
2994 .fields-create-template-part-modal__area-radio-icon,
2995 .fields-create-template-part-modal__area-radio-checkmark {
2996 fill: currentColor;
2997 }
2998
2999 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
3000 opacity: 0;
3001 }
3002
3003 .fields-create-template-part-modal__area-radio-description {
3004 grid-column: 2/3;
3005 margin: 0;
3006 color: #757575;
3007 font-size: 12px;
3008 line-height: normal;
3009 text-wrap: pretty;
3010 }
3011
3012 input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
3013 color: inherit;
3014 }
3015
3016 fieldset.fields__media-edit {
3017 border: 0;
3018 padding: 0;
3019 margin: 0;
3020 width: 100%;
3021 }
3022
3023 fieldset.fields__media-edit .components-base-control__label {
3024 color: #1e1e1e;
3025 }
3026
3027 fieldset.fields__media-edit .fields__media-edit-description {
3028 font-size: 12px;
3029 line-height: 1.5;
3030 }
3031
3032 fieldset.fields__media-edit {
3033 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3034 container-type: inline-size;
3035 }
3036
3037 fieldset.fields__media-edit .fields__media-edit-compact-group {
3038 border: 1px dashed #949494;
3039 border-radius: 4px;
3040 overflow: hidden;
3041 }
3042
3043 fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
3044 border-radius: 2px;
3045 }
3046
3047 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
3048 border: 0;
3049 border-radius: 0;
3050 }
3051
3052 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
3053 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3054 }
3055
3056 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
3057 border-bottom: 1px solid #f0f0f0;
3058 }
3059
3060 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
3061 display: flex;
3062 align-items: center;
3063 gap: 8px;
3064 }
3065
3066 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
3067 margin: 0;
3068 }
3069
3070 fieldset.fields__media-edit .fields__media-edit-compact {
3071 position: relative;
3072 min-width: 0;
3073 }
3074
3075 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 {
3076 opacity: 1;
3077 }
3078
3079 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
3080 position: absolute;
3081 right: 8px;
3082 top: 50%;
3083 transform: translateY(-50%);
3084 opacity: 0;
3085 pointer-events: none;
3086 z-index: 1;
3087 border-radius: 2px;
3088 background: #fff;
3089 }
3090
3091 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
3092 pointer-events: auto;
3093 }
3094
3095 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 {
3096 display: flex;
3097 align-items: center;
3098 gap: 8px;
3099 }
3100
3101 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 {
3102 margin: 0;
3103 }
3104
3105 fieldset.fields__media-edit .fields__media-edit-picker-button {
3106 position: relative;
3107 display: flex;
3108 align-items: center;
3109 gap: 8px;
3110 border: 1px dashed #949494;
3111 border-radius: 2px;
3112 padding: 4px 8px;
3113 min-height: 40px;
3114 cursor: pointer;
3115 min-width: 0;
3116 }
3117
3118 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
3119 border-color: var(--wp-admin-theme-color);
3120 color: var(--wp-admin-theme-color);
3121 }
3122
3123 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
3124 background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
3125 color: var(--wp-admin-theme-color-darker-20);
3126 border-color: var(--wp-admin-theme-color-darker-20);
3127 }
3128
3129 fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
3130 color: var(--wp-admin-theme-color);
3131 }
3132
3133 fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
3134 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3135 outline: none;
3136 }
3137
3138 fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] {
3139 opacity: 0.6;
3140 cursor: default;
3141 }
3142
3143 fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner {
3144 position: absolute;
3145 top: 50%;
3146 left: 50%;
3147 transform: translate(-50%, -50%);
3148 z-index: 1;
3149 }
3150
3151 fieldset.fields__media-edit .fields__media-edit-filename,
3152 fieldset.fields__media-edit .fields__media-edit-placeholder {
3153 flex: 1;
3154 width: 100%;
3155 min-width: 0;
3156 }
3157
3158 fieldset.fields__media-edit .fields__media-edit-placeholder {
3159 text-align: center;
3160 }
3161
3162 fieldset.fields__media-edit .fields__media-edit-thumbnail {
3163 width: 24px;
3164 aspect-ratio: 1/1;
3165 flex-shrink: 0;
3166 border-radius: 2px;
3167 }
3168
3169 fieldset.fields__media-edit .fields__media-edit-expanded {
3170 display: grid;
3171 gap: 8px;
3172 }
3173
3174 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
3175 display: flex;
3176 align-items: center;
3177 gap: 8px;
3178 }
3179
3180 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
3181 margin: 0;
3182 }
3183
3184 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview {
3185 position: relative;
3186 width: 100%;
3187 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3188 border-radius: 2px;
3189 padding: 4px;
3190 overflow: hidden;
3191 display: flex;
3192 align-items: center;
3193 justify-content: center;
3194 }
3195
3196 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack {
3197 width: 100%;
3198 height: 100%;
3199 }
3200
3201 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
3202 position: absolute;
3203 top: 0;
3204 left: 0;
3205 right: 0;
3206 bottom: 0;
3207 opacity: 0;
3208 pointer-events: none;
3209 }
3210
3211 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
3212 pointer-events: auto;
3213 }
3214
3215 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
3216 position: absolute;
3217 top: 4px;
3218 right: 4px;
3219 border-radius: 2px;
3220 background: #fff;
3221 }
3222
3223 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
3224 position: relative;
3225 min-width: 0;
3226 border-radius: 4px;
3227 }
3228
3229 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 {
3230 opacity: 1;
3231 }
3232
3233 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack {
3234 padding: 8px;
3235 }
3236
3237 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3238 width: 100%;
3239 height: 100%;
3240 object-fit: cover;
3241 object-position: 50% 50%;
3242 }
3243
3244 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
3245 text-align: center;
3246 flex: none;
3247 }
3248
3249 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg {
3250 margin: 0;
3251 }
3252
3253 fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
3254 grid-template-columns: 1fr;
3255 }
3256
3257 fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
3258 aspect-ratio: 2/1;
3259 }
3260
3261 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
3262 border-radius: 4px;
3263 }
3264
3265 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
3266 border-radius: 2px;
3267 }
3268
3269 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3270 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3271 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3272 }
3273
3274 @container (max-width: 500px) {
3275 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3276 grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
3277 }
3278 }
3279 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button {
3280 padding: 0;
3281 }
3282
3283 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder {
3284 display: flex;
3285 align-items: center;
3286 justify-content: center;
3287 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3288 }
3289
3290 .fields-controls__author-avatar {
3291 flex-shrink: 0;
3292 overflow: hidden;
3293 width: 24px;
3294 height: 24px;
3295 align-items: center;
3296 justify-content: left;
3297 display: flex;
3298 }
3299
3300 .fields-controls__author-avatar img {
3301 width: 16px;
3302 height: 16px;
3303 object-fit: cover;
3304 opacity: 0;
3305 border-radius: 100%;
3306 }
3307
3308 @media not (prefers-reduced-motion) {
3309 .fields-controls__author-avatar img {
3310 transition: opacity 0.1s linear;
3311 }
3312 }
3313 .fields-controls__author-avatar.is-loaded img {
3314 opacity: 1;
3315 }
3316
3317 .fields-controls__author-icon {
3318 display: flex;
3319 flex-shrink: 0;
3320 width: 24px;
3321 height: 24px;
3322 }
3323
3324 .fields-controls__author-icon svg {
3325 margin-left: -4px;
3326 fill: currentColor;
3327 }
3328
3329 .fields-controls__author-name {
3330 text-overflow: ellipsis;
3331 overflow: hidden;
3332 }
3333
3334 .fields-controls__slug {
3335 border: 0;
3336 padding: 0;
3337 margin: 0;
3338 }
3339
3340 .fields-controls__slug .fields-controls__slug-external-icon {
3341 margin-left: 5ch;
3342 }
3343
3344 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3345 padding-inline-start: 0 !important;
3346 }
3347
3348 .fields-controls__slug .fields-controls__slug-help-link {
3349 word-break: break-word;
3350 }
3351
3352 .fields-controls__slug .fields-controls__slug-help {
3353 display: flex;
3354 flex-direction: column;
3355 }
3356
3357 .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
3358 font-weight: 600;
3359 }
3360
3361 .fields-controls__featured-image-image,
3362 .fields-controls__featured-image-placeholder {
3363 width: 100%;
3364 height: 100%;
3365 display: block;
3366 border-radius: 4px;
3367 }
3368
3369 .fields-controls__featured-image-placeholder {
3370 box-shadow: none;
3371 background: #f0f0f0;
3372 }
3373
3374 .fields-controls__parent {
3375 border: 0;
3376 padding: 0;
3377 margin: 0;
3378 }
3379
3380 .fields-controls__password {
3381 border: 0;
3382 padding: 0;
3383 margin: 0;
3384 }
3385
3386 .fields-controls__status-icon {
3387 height: 24px;
3388 width: 24px;
3389 }
3390
3391 .fields-controls__status-icon svg {
3392 fill: currentColor;
3393 margin-left: -4px;
3394 }
3395
3396 .fields-field__title > span:first-child {
3397 text-overflow: ellipsis;
3398 overflow: hidden;
3399 text-decoration: none;
3400 white-space: nowrap;
3401 display: block;
3402 flex-grow: 0;
3403 }
3404
3405 .fields-field__pattern-title span:first-child {
3406 flex: 1;
3407 }
3408
3409 /**
3410 * SCSS Variables.
3411 *
3412 * Please use variables from this sheet to ensure consistency across the UI.
3413 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
3414 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
3415 */
3416 /**
3417 * Colors
3418 */
3419 /**
3420 * Fonts & basic variables.
3421 */
3422 /**
3423 * Typography
3424 */
3425 /**
3426 * Grid System.
3427 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
3428 */
3429 /**
3430 * Radius scale.
3431 */
3432 /**
3433 * Elevation scale.
3434 */
3435 /**
3436 * Dimensions.
3437 */
3438 /**
3439 * Mobile specific styles
3440 */
3441 /**
3442 * Editor styles.
3443 */
3444 /**
3445 * Block & Editor UI.
3446 */
3447 /**
3448 * Block paddings.
3449 */
3450 /**
3451 * React Native specific.
3452 * These variables do not appear to be used anywhere else.
3453 */
3454 /**
3455 * Typography
3456 */
3457 /**
3458 * Breakpoints & Media Queries
3459 */
3460 /**
3461 * Converts a hex value into the rgb equivalent.
3462 *
3463 * @param {string} hex - the hexadecimal value to convert
3464 * @return {string} comma separated rgb values
3465 */
3466 /**
3467 * Long content fade mixin
3468 *
3469 * Creates a fading overlay to signify that the content is longer
3470 * than the space allows.
3471 */
3472 /**
3473 * Breakpoint mixins
3474 */
3475 /**
3476 * Focus styles.
3477 */
3478 /**
3479 * Applies editor left position to the selector passed as argument
3480 */
3481 /**
3482 * Styles that are reused verbatim in a few places
3483 */
3484 /**
3485 * Allows users to opt-out of animations via OS-level preferences.
3486 */
3487 /**
3488 * Reset default styles for JavaScript UI based pages.
3489 * This is a WP-admin agnostic reset
3490 */
3491 /**
3492 * Reset the WP Admin page styles for Gutenberg-like pages.
3493 */
3494 /**
3495 * Creates a checkerboard pattern background to indicate transparency.
3496 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
3497 */
3498 @media (min-width: 782px) {
3499 .font-library-modal.font-library-modal {
3500 width: 65vw;
3501 }
3502 }
3503 .font-library-modal .components-modal__header {
3504 border-bottom: none;
3505 }
3506
3507 .font-library-modal .components-modal__content {
3508 padding: 0;
3509 margin-bottom: 90px;
3510 }
3511
3512 .font-library-modal .font-library__subtitle {
3513 text-transform: uppercase;
3514 font-weight: 499;
3515 font-size: 11px;
3516 }
3517
3518 .font-library-modal__tab-panel {
3519 height: calc(100% - 50px);
3520 }
3521
3522 .font-library__tabpanel-layout {
3523 height: 100%;
3524 display: flex;
3525 flex-direction: column;
3526 }
3527
3528 .font-library__tabpanel-layout > div {
3529 flex-grow: 1;
3530 }
3531
3532 .font-library__tabpanel-layout .font-library__loading {
3533 width: 100%;
3534 height: 100%;
3535 display: flex;
3536 position: absolute;
3537 left: 0;
3538 top: 0;
3539 align-items: center;
3540 justify-content: center;
3541 padding-top: 124px;
3542 box-sizing: border-box;
3543 }
3544
3545 .font-library__tabpanel-layout .components-navigator-screen {
3546 padding: 24px;
3547 width: 100%;
3548 }
3549
3550 .font-library__footer {
3551 position: absolute;
3552 width: 100%;
3553 bottom: 0;
3554 border-top: 1px solid #ddd;
3555 padding: 24px;
3556 background-color: #fff;
3557 box-sizing: border-box;
3558 flex-grow: 0 !important;
3559 flex-shrink: 0;
3560 height: 90px;
3561 }
3562
3563 .font-library__page-selection {
3564 font-size: 11px;
3565 font-weight: 499;
3566 text-transform: uppercase;
3567 }
3568
3569 @media (min-width: 600px) {
3570 .font-library__page-selection .font-library__page-selection-trigger {
3571 font-size: 11px !important;
3572 font-weight: 499;
3573 }
3574 }
3575 .font-library__fonts-title {
3576 text-transform: uppercase;
3577 font-size: 11px;
3578 font-weight: 600;
3579 margin-top: 0;
3580 margin-bottom: 0;
3581 }
3582
3583 .font-library__fonts-list {
3584 list-style: none;
3585 padding: 0;
3586 margin-top: 0;
3587 margin-bottom: 0;
3588 }
3589
3590 .font-library__fonts-list-item {
3591 margin-bottom: 0;
3592 }
3593
3594 .font-library__font-card {
3595 box-sizing: border-box;
3596 border: 1px solid #ddd;
3597 width: 100%;
3598 height: auto !important;
3599 padding: 16px;
3600 margin-top: -1px; /* To collapse the margin with the previous element */
3601 }
3602
3603 .font-library__font-card:hover {
3604 background-color: #f0f0f0;
3605 }
3606
3607 .font-library__font-card:focus {
3608 position: relative;
3609 }
3610
3611 .font-library__font-card .font-library__font-card__name {
3612 font-weight: bold;
3613 }
3614
3615 .font-library__font-card .font-library__font-card__count {
3616 color: #757575;
3617 }
3618
3619 .font-library__font-card .font-library__font-variant_demo-image {
3620 display: block;
3621 height: 24px;
3622 width: auto;
3623 }
3624
3625 .font-library__font-card .font-library__font-variant_demo-text {
3626 white-space: nowrap;
3627 flex-shrink: 0;
3628 }
3629
3630 @media not (prefers-reduced-motion) {
3631 .font-library__font-card .font-library__font-variant_demo-text {
3632 transition: opacity 0.3s ease-in-out;
3633 }
3634 }
3635 .font-library-modal__tablist-container {
3636 position: sticky;
3637 top: 0;
3638 border-bottom: 1px solid #ddd;
3639 background: #fff;
3640 z-index: 1;
3641 }
3642
3643 .font-library__upload-area {
3644 align-items: center;
3645 display: flex;
3646 justify-content: center;
3647 height: 256px !important;
3648 width: 100%;
3649 }
3650
3651 button.font-library__upload-area {
3652 background-color: #f0f0f0;
3653 }
3654
3655 .font-library__local-fonts {
3656 margin: 24px auto;
3657 width: 80%;
3658 }
3659
3660 .font-library__local-fonts .font-library__upload-area__text {
3661 color: #757575;
3662 }
3663
3664 .font-library__google-fonts-confirm {
3665 display: flex;
3666 justify-content: center;
3667 align-items: center;
3668 margin-top: 64px;
3669 }
3670
3671 .font-library__google-fonts-confirm p {
3672 line-height: 1.4;
3673 }
3674
3675 .font-library__google-fonts-confirm h2 {
3676 font-size: 1.2rem;
3677 font-weight: 400;
3678 }
3679
3680 .font-library__google-fonts-confirm .components-card {
3681 padding: 16px;
3682 width: 400px;
3683 }
3684
3685 .font-library__google-fonts-confirm .components-button {
3686 width: 100%;
3687 justify-content: center;
3688 }
3689
3690 .font-library__select-all {
3691 padding: 16px 16px 16px 17px;
3692 }
3693
3694 .font-library__select-all .components-checkbox-control__label {
3695 padding-left: 16px;
3696 }
3697
3698 .global-styles-ui-pagination .components-button.is-tertiary {
3699 width: 32px;
3700 height: 32px;
3701 justify-content: center;
3702 }
3703
3704 .global-styles-ui-screen-revisions__revisions-list {
3705 list-style: none;
3706 margin: 0 16px 16px 16px;
3707 flex-grow: 1;
3708 }
3709
3710 .global-styles-ui-screen-revisions__revisions-list li {
3711 margin-bottom: 0;
3712 }
3713
3714 .global-styles-ui-screen-revisions__revision-item {
3715 position: relative;
3716 cursor: pointer;
3717 display: flex;
3718 flex-direction: column;
3719 }
3720
3721 .global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3722 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3723 outline: 2px solid transparent;
3724 }
3725
3726 .global-styles-ui-screen-revisions__revision-item:hover {
3727 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3728 }
3729
3730 .global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3731 color: var(--wp-admin-theme-color);
3732 }
3733
3734 .global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3735 position: absolute;
3736 content: "\a";
3737 display: block;
3738 }
3739
3740 .global-styles-ui-screen-revisions__revision-item::before {
3741 background: #ddd;
3742 border-radius: 50%;
3743 height: 8px;
3744 width: 8px;
3745 top: 18px;
3746 left: 17px;
3747 transform: translate(-50%, -50%);
3748 z-index: 1;
3749 border: 4px solid transparent;
3750 }
3751
3752 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3753 border-radius: 2px;
3754 outline: 3px solid transparent;
3755 outline-offset: -2px;
3756 color: var(--wp-admin-theme-color);
3757 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3758 }
3759
3760 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3761 color: var(--wp-admin-theme-color);
3762 }
3763
3764 .global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3765 background: var(--wp-admin-theme-color);
3766 }
3767
3768 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3769 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
3770 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
3771 color: #1e1e1e;
3772 }
3773
3774 .global-styles-ui-screen-revisions__revision-item::after {
3775 height: 100%;
3776 left: 16px;
3777 top: 0;
3778 width: 0;
3779 border: 0.5px solid #ddd;
3780 }
3781
3782 .global-styles-ui-screen-revisions__revision-item:first-child::after {
3783 top: 18px;
3784 }
3785
3786 .global-styles-ui-screen-revisions__revision-item:last-child::after {
3787 height: 18px;
3788 }
3789
3790 .global-styles-ui-screen-revisions__revision-item-wrapper {
3791 display: block;
3792 padding: 12px 12px 4px 40px;
3793 }
3794
3795 .global-styles-ui-screen-revisions__apply-button.is-primary,
3796 .global-styles-ui-screen-revisions__applied-text {
3797 align-self: flex-start;
3798 margin: 4px 12px 12px 40px;
3799 }
3800
3801 .global-styles-ui-screen-revisions__changes,
3802 .global-styles-ui-screen-revisions__meta,
3803 .global-styles-ui-screen-revisions__applied-text {
3804 color: #757575;
3805 font-size: 12px;
3806 }
3807
3808 .global-styles-ui-screen-revisions__description {
3809 display: flex;
3810 flex-direction: column;
3811 align-items: flex-start;
3812 gap: 8px;
3813 }
3814
3815 .global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3816 text-transform: uppercase;
3817 font-weight: 600;
3818 font-size: 12px;
3819 }
3820
3821 .global-styles-ui-screen-revisions__meta {
3822 display: flex;
3823 justify-content: start;
3824 width: 100%;
3825 align-items: flex-start;
3826 text-align: left;
3827 margin-bottom: 4px;
3828 }
3829
3830 .global-styles-ui-screen-revisions__meta img {
3831 width: 16px;
3832 height: 16px;
3833 border-radius: 100%;
3834 margin-right: 8px;
3835 }
3836
3837 .global-styles-ui-screen-revisions__loading {
3838 margin: 24px auto !important;
3839 }
3840
3841 .global-styles-ui-screen-revisions__changes {
3842 text-align: left;
3843 line-height: 1.4;
3844 margin-left: 12px;
3845 list-style: disc;
3846 }
3847
3848 .global-styles-ui-screen-revisions__changes li {
3849 margin-bottom: 4px;
3850 }
3851
3852 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
3853 justify-content: space-between;
3854 gap: 2px;
3855 }
3856
3857 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
3858 position: absolute;
3859 left: -1000px;
3860 height: 1px;
3861 margin: -1px;
3862 overflow: hidden;
3863 }
3864
3865 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
3866 font-size: 12px;
3867 will-change: opacity;
3868 }
3869
3870 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
3871 color: #1e1e1e;
3872 }
3873
3874 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
3875 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
3876 color: #949494;
3877 }
3878
3879 .global-styles-ui-screen-revisions__footer {
3880 height: 56px;
3881 z-index: 1;
3882 position: sticky;
3883 min-width: 100%;
3884 bottom: 0;
3885 background: #fff;
3886 padding: 12px;
3887 border-top: 1px solid #ddd;
3888 box-sizing: border-box;
3889 }
3890
3891 .global-styles-ui-variations_item {
3892 box-sizing: border-box;
3893 cursor: pointer;
3894 }
3895
3896 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
3897 border-radius: 2px;
3898 outline: 1px solid rgba(0, 0, 0, 0.1);
3899 outline-offset: -1px;
3900 overflow: hidden;
3901 position: relative;
3902 }
3903
3904 @media not (prefers-reduced-motion) {
3905 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
3906 transition: outline 0.1s linear;
3907 }
3908 }
3909 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
3910 height: 32px;
3911 }
3912
3913 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
3914 overflow: hidden;
3915 }
3916
3917 .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
3918 outline-color: rgba(0, 0, 0, 0.3);
3919 }
3920
3921 .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 {
3922 outline-color: #1e1e1e;
3923 outline-offset: 1px;
3924 outline-width: var(--wp-admin-border-width-focus);
3925 }
3926
3927 .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
3928 outline-color: var(--wp-admin-theme-color);
3929 }
3930
3931 .global-styles-ui-preview {
3932 display: flex;
3933 align-items: center;
3934 justify-content: center;
3935 line-height: 1;
3936 cursor: pointer;
3937 }
3938
3939 .global-styles-ui-preview__wrapper {
3940 max-width: 100%;
3941 display: block;
3942 width: 100%;
3943 }
3944
3945 .global-styles-ui-typography-preview {
3946 display: flex;
3947 align-items: center;
3948 justify-content: center;
3949 min-height: 100px;
3950 margin-bottom: 20px;
3951 background: #f0f0f0;
3952 border-radius: 2px;
3953 overflow: hidden;
3954 }
3955
3956 .global-styles-ui-font-size__item {
3957 white-space: nowrap;
3958 text-overflow: ellipsis;
3959 overflow: hidden;
3960 line-break: anywhere;
3961 }
3962
3963 .global-styles-ui-font-size__item-value {
3964 color: #757575;
3965 }
3966
3967 .global-styles-ui-screen-typography__indicator {
3968 height: 24px;
3969 width: 24px;
3970 font-size: 14px;
3971 display: flex !important;
3972 align-items: center;
3973 justify-content: center;
3974 border-radius: 2px;
3975 }
3976
3977 .global-styles-ui-block-types-search {
3978 margin-bottom: 10px;
3979 padding: 0 16px;
3980 }
3981
3982 .global-styles-ui-screen-typography__font-variants-count {
3983 color: #757575;
3984 }
3985
3986 .global-styles-ui-font-families__manage-fonts {
3987 justify-content: center;
3988 }
3989
3990 .global-styles-ui-screen .color-block-support-panel {
3991 padding-left: 0;
3992 padding-right: 0;
3993 padding-top: 0;
3994 border-top: none;
3995 row-gap: 12px;
3996 }
3997
3998 .global-styles-ui-header {
3999 margin-bottom: 0 !important;
4000 }
4001
4002 .global-styles-ui-subtitle {
4003 margin-bottom: 0 !important;
4004 text-transform: uppercase;
4005 font-weight: 499 !important;
4006 font-size: 11px !important;
4007 }
4008
4009 .global-styles-ui-section-title {
4010 color: #2f2f2f;
4011 font-weight: 600;
4012 line-height: 1.2;
4013 padding: 16px 16px 0;
4014 margin: 0;
4015 }
4016
4017 .global-styles-ui-icon-with-current-color {
4018 fill: currentColor;
4019 }
4020
4021 .global-styles-ui__color-indicator-wrapper {
4022 height: 24px;
4023 flex-shrink: 0;
4024 }
4025
4026 .global-styles-ui__shadows-panel__options-container,
4027 .global-styles-ui__typography-panel__options-container {
4028 height: 24px;
4029 }
4030
4031 .global-styles-ui__block-preview-panel {
4032 position: relative;
4033 width: 100%;
4034 border: #ddd 1px solid;
4035 border-radius: 2px;
4036 overflow: hidden;
4037 }
4038
4039 .global-styles-ui__shadow-preview-panel {
4040 height: 144px;
4041 border: #ddd 1px solid;
4042 border-radius: 2px;
4043 overflow: auto;
4044 /*rtl:begin:ignore*/
4045 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);
4046 background-position: 0 0, 8px 8px;
4047 /*rtl:end:ignore*/
4048 background-size: 16px 16px;
4049 }
4050
4051 .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4052 border: #ddd 1px solid;
4053 border-radius: 2px;
4054 background-color: #fff;
4055 width: 60%;
4056 height: 60px;
4057 }
4058
4059 .global-styles-ui__shadow-editor__dropdown-content {
4060 width: 280px;
4061 }
4062
4063 .global-styles-ui__shadow-editor-panel {
4064 margin-bottom: 4px;
4065 }
4066
4067 .global-styles-ui__shadow-editor__dropdown {
4068 width: 100%;
4069 position: relative;
4070 }
4071
4072 .global-styles-ui__shadow-editor__dropdown-toggle {
4073 width: 100%;
4074 height: auto;
4075 padding-top: 8px;
4076 padding-bottom: 8px;
4077 text-align: left;
4078 border-radius: inherit;
4079 }
4080
4081 .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4082 background: #f0f0f0;
4083 color: var(--wp-admin-theme-color);
4084 }
4085
4086 .global-styles-ui__shadow-editor__remove-button {
4087 position: absolute;
4088 right: 8px;
4089 top: 8px;
4090 opacity: 0;
4091 }
4092
4093 .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4094 border: none;
4095 }
4096
4097 .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 {
4098 opacity: 1;
4099 }
4100
4101 @media (hover: none) {
4102 .global-styles-ui__shadow-editor__remove-button {
4103 opacity: 1;
4104 }
4105 }
4106 .global-styles-ui-screen-css {
4107 flex: 1 1 auto;
4108 display: flex;
4109 flex-direction: column;
4110 margin: 16px;
4111 }
4112
4113 .global-styles-ui-screen-css .components-v-stack {
4114 flex: 1 1 auto;
4115 }
4116
4117 .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
4118 flex: 1 1 auto;
4119 display: flex;
4120 flex-direction: column;
4121 }
4122
4123 .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4124 flex: 1 1 auto;
4125 display: flex;
4126 flex-direction: column;
4127 }
4128
4129 .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 {
4130 flex: 1 1 auto;
4131 /*rtl:ignore*/
4132 direction: ltr;
4133 }
4134
4135 .global-styles-ui-screen-css-help-link {
4136 display: inline-block;
4137 margin-top: 8px;
4138 }
4139
4140 .global-styles-ui-screen-variations {
4141 margin-top: 16px;
4142 border-top: 1px solid #ddd;
4143 }
4144
4145 .global-styles-ui-screen-variations > * {
4146 margin: 24px 16px;
4147 }
4148
4149 .global-styles-ui-sidebar__navigator-provider {
4150 height: 100%;
4151 }
4152
4153 .global-styles-ui-sidebar__navigator-screen {
4154 display: flex;
4155 flex-direction: column;
4156 height: 100%;
4157 }
4158
4159 .global-styles-ui-sidebar__navigator-screen .single-column {
4160 grid-column: span 1;
4161 }
4162
4163 .global-styles-ui-screen-root.global-styles-ui-screen-root,
4164 .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4165 background: unset;
4166 color: inherit;
4167 }
4168
4169 .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4170 fill: currentColor;
4171 }
4172
4173 .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 {
4174 border-radius: 2px;
4175 }
4176
4177 .global-styles-ui-screen-root__active-style-tile-preview {
4178 clip-path: border-box;
4179 }
4180
4181 .global-styles-ui-color-palette-panel,
4182 .global-styles-ui-gradient-palette-panel {
4183 padding: 16px;
4184 }
4185
4186 .edit-site-custom-template-modal__contents-wrapper {
4187 height: 100%;
4188 justify-content: flex-start !important;
4189 }
4190 .edit-site-custom-template-modal__contents-wrapper > * {
4191 width: 100%;
4192 }
4193 .edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4194 margin-left: -12px;
4195 margin-right: -12px;
4196 width: calc(100% + 24px);
4197 }
4198 .edit-site-custom-template-modal__contents > .components-button {
4199 height: auto;
4200 justify-content: center;
4201 }
4202 @media (min-width: 782px) {
4203 .edit-site-custom-template-modal {
4204 width: 456px;
4205 }
4206 }
4207 @media (min-width: 600px) {
4208 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4209 max-height: 224px;
4210 overflow-y: auto;
4211 }
4212 }
4213 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4214 display: block;
4215 width: 100%;
4216 text-align: left;
4217 white-space: pre-wrap;
4218 overflow-wrap: break-word;
4219 height: auto;
4220 padding: 8px 12px;
4221 }
4222 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4223 font-weight: 700;
4224 background: none;
4225 }
4226 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4227 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4228 }
4229 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4230 color: var(--wp-admin-theme-color);
4231 }
4232 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4233 color: var(--wp-admin-theme-color);
4234 }
4235 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4236 background-color: #f0f0f0;
4237 }
4238 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4239 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4240 }
4241 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4242 overflow: hidden;
4243 text-overflow: ellipsis;
4244 display: block;
4245 }
4246 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4247 word-break: break-all;
4248 color: #757575;
4249 }
4250
4251 .edit-site-custom-template-modal__no-results {
4252 border: 1px solid #ccc;
4253 border-radius: 2px;
4254 padding: 16px;
4255 }
4256
4257 .edit-site-custom-generic-template__modal .components-modal__header {
4258 border-bottom: none;
4259 }
4260 .edit-site-custom-generic-template__modal .components-modal__content::before {
4261 margin-bottom: 4px;
4262 }
4263
4264 @media (min-width: 960px) {
4265 .edit-site-add-new-template__modal {
4266 max-width: 832px;
4267 margin-top: 64px;
4268 width: calc(100% - 128px);
4269 max-height: calc(100% - 128px);
4270 }
4271 }
4272 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4273 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4274 fill: var(--wp-admin-theme-color);
4275 }
4276 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4277 flex-grow: 1;
4278 align-items: flex-start;
4279 }
4280 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4281 padding: 8px;
4282 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4283 border-radius: 100%;
4284 max-height: 40px;
4285 max-width: 40px;
4286 }
4287
4288 .edit-site-custom-template-modal__contents > .components-button,
4289 .edit-site-add-new-template__template-list__contents > .components-button {
4290 padding: 32px;
4291 display: flex;
4292 flex-direction: column;
4293 border: 1px solid #ddd;
4294 justify-content: center;
4295 outline: 1px solid transparent;
4296 }
4297 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4298 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4299 color: #1e1e1e;
4300 }
4301 .edit-site-custom-template-modal__contents > .components-button span,
4302 .edit-site-add-new-template__template-list__contents > .components-button span {
4303 color: #757575;
4304 }
4305 .edit-site-custom-template-modal__contents > .components-button:hover,
4306 .edit-site-add-new-template__template-list__contents > .components-button:hover {
4307 color: var(--wp-admin-theme-color-darker-10);
4308 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4309 border-color: transparent;
4310 }
4311 .edit-site-custom-template-modal__contents > .components-button:hover span,
4312 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4313 color: var(--wp-admin-theme-color);
4314 }
4315 .edit-site-custom-template-modal__contents > .components-button:focus,
4316 .edit-site-add-new-template__template-list__contents > .components-button:focus {
4317 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4318 border-color: transparent;
4319 outline: 3px solid transparent;
4320 }
4321 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4322 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4323 color: var(--wp-admin-theme-color);
4324 }
4325 .edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4326 .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4327 .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4328 .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4329 grid-column: 1/-1;
4330 }
4331
4332 .edit-site-add-new-template__template-list__contents > .components-button {
4333 height: 100%;
4334 text-align: start;
4335 align-items: flex-start;
4336 }
4337
4338 .edit-site-visual-editor__editor-canvas.is-focused {
4339 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4340 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4341 }
4342
4343 .edit-site-canvas-loader {
4344 width: 100%;
4345 height: 100%;
4346 display: flex;
4347 position: absolute;
4348 top: 0;
4349 left: 0;
4350 opacity: 0;
4351 align-items: center;
4352 justify-content: center;
4353 }
4354 @media not (prefers-reduced-motion) {
4355 .edit-site-canvas-loader {
4356 animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4357 animation-fill-mode: forwards;
4358 }
4359 }
4360 .edit-site-canvas-loader > div {
4361 width: 160px;
4362 }
4363
4364 @keyframes edit-site-canvas-loader__fade-in-animation {
4365 from {
4366 opacity: 0;
4367 }
4368 to {
4369 opacity: 1;
4370 }
4371 }
4372 .edit-site-patterns__delete-modal {
4373 width: 400px;
4374 }
4375
4376 .page-patterns-preview-field {
4377 display: flex;
4378 justify-content: center;
4379 align-items: center;
4380 flex-direction: column;
4381 height: 100%;
4382 border-radius: 4px;
4383 }
4384 .dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4385 height: 100%;
4386 }
4387 .dataviews-view-table .page-patterns-preview-field {
4388 width: 96px;
4389 flex-grow: 0;
4390 text-wrap: balance;
4391 text-wrap: pretty;
4392 }
4393
4394 .edit-site-patterns__pattern-icon {
4395 fill: var(--wp-block-synced-color);
4396 flex-shrink: 0;
4397 }
4398
4399 .edit-site-patterns__section-header {
4400 border-bottom: 1px solid #f0f0f0;
4401 padding: 16px 48px;
4402 position: sticky;
4403 top: 0;
4404 z-index: 2;
4405 flex-shrink: 0;
4406 min-height: 40px;
4407 }
4408 @media not (prefers-reduced-motion) {
4409 .edit-site-patterns__section-header {
4410 transition: padding ease-out 0.1s;
4411 }
4412 }
4413 .edit-site-patterns__section-header .edit-site-patterns__title {
4414 min-height: 40px;
4415 }
4416 .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4417 flex-grow: 1;
4418 flex-basis: 0;
4419 white-space: nowrap;
4420 }
4421 .edit-site-patterns__section-header .edit-site-patterns__sub-title {
4422 margin-bottom: 8px;
4423 }
4424 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4425 top: 0;
4426 }
4427
4428 .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4429 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4430 color: var(--wp-block-synced-color);
4431 }
4432
4433 .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4434 width: 350px;
4435 }
4436 .dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4437 position: relative;
4438 }
4439 .dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4440 position: absolute;
4441 border: 1px solid var(--wp-admin-theme-color);
4442 border-bottom-left-radius: 2px;
4443 border-bottom-right-radius: 2px;
4444 box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4445 box-sizing: border-box;
4446 z-index: 1;
4447 background-color: #fff;
4448 width: calc(100% + 2px);
4449 left: -1px;
4450 min-width: initial;
4451 max-height: 96px;
4452 }
4453
4454 @media (min-width: 600px) {
4455 .dataviews-action-modal__duplicate-template-part .components-modal__frame {
4456 max-width: 500px;
4457 }
4458 }
4459
4460 @container (max-width: 430px) {
4461 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4462 padding-left: 24px;
4463 padding-right: 24px;
4464 }
4465 }
4466 .page-templates-preview-field {
4467 display: flex;
4468 justify-content: center;
4469 align-items: center;
4470 flex-direction: column;
4471 height: 100%;
4472 width: 100%;
4473 border-radius: 4px;
4474 }
4475 .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4476 height: 120px;
4477 }
4478 .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4479 height: 100%;
4480 }
4481 .dataviews-view-table .page-templates-preview-field {
4482 position: relative;
4483 width: 120px;
4484 max-height: 160px;
4485 text-wrap: balance;
4486 text-wrap: pretty;
4487 }
4488
4489 .edit-site-page-templates .dataviews-pagination {
4490 z-index: 2;
4491 }
4492
4493 .edit-site-list__rename-modal {
4494 z-index: 1000001;
4495 }
4496 @media (min-width: 782px) {
4497 .edit-site-list__rename-modal .components-base-control {
4498 width: 320px;
4499 }
4500 }
4501
4502 .edit-site-editor__editor-interface {
4503 opacity: 1;
4504 }
4505 @media not (prefers-reduced-motion) {
4506 .edit-site-editor__editor-interface {
4507 transition: opacity 0.1s ease-out;
4508 }
4509 }
4510 .edit-site-editor__editor-interface.is-loading {
4511 opacity: 0;
4512 }
4513
4514 .edit-site-editor__toggle-save-panel {
4515 box-sizing: border-box;
4516 width: 280px;
4517 background-color: #fff;
4518 border: 1px dotted #ddd;
4519 padding: 24px;
4520 display: flex;
4521 justify-content: center;
4522 }
4523
4524 .edit-site-editor__view-mode-toggle {
4525 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4526 view-transition-name: toggle;
4527 /* stylelint-enable */
4528 top: 0;
4529 left: 0;
4530 height: 64px;
4531 width: 64px;
4532 z-index: 100;
4533 }
4534 .edit-site-editor__view-mode-toggle .components-button {
4535 color: #fff;
4536 height: 100%;
4537 width: 100%;
4538 border-radius: 0;
4539 overflow: hidden;
4540 padding: 0;
4541 display: flex;
4542 align-items: center;
4543 justify-content: center;
4544 }
4545 .edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4546 color: #fff;
4547 }
4548 .edit-site-editor__view-mode-toggle .components-button:focus {
4549 box-shadow: none;
4550 }
4551 .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4552 .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4553 background: #1e1e1e;
4554 display: block;
4555 }
4556
4557 .edit-site-editor__back-icon {
4558 position: absolute;
4559 top: 0;
4560 left: 0;
4561 width: 64px;
4562 height: 64px;
4563 display: flex;
4564 align-items: center;
4565 justify-content: center;
4566 background-color: hsl(0, 0%, 80%);
4567 pointer-events: none;
4568 }
4569 .edit-site-editor__back-icon svg {
4570 fill: currentColor;
4571 }
4572 .edit-site-editor__back-icon.has-site-icon {
4573 background-color: hsla(0, 0%, 100%, 0.6);
4574 backdrop-filter: saturate(180%) blur(15px);
4575 }
4576
4577 .edit-site-welcome-guide {
4578 width: 312px;
4579 }
4580 .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4581 background: #00a0d2;
4582 }
4583 .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4584 border-right: #3858e9 16px solid;
4585 border-top: #3858e9 16px solid;
4586 }
4587 .edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4588 border-left: #3858e9 16px solid;
4589 border-top: #3858e9 16px solid;
4590 }
4591 .edit-site-welcome-guide__image {
4592 margin: 0 0 16px;
4593 }
4594 .edit-site-welcome-guide__image > img {
4595 display: block;
4596 max-width: 100%;
4597 object-fit: cover;
4598 }
4599 .edit-site-welcome-guide__heading {
4600 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4601 font-size: 24px;
4602 line-height: 1.4;
4603 margin: 16px 0 16px 0;
4604 padding: 0 32px;
4605 }
4606 .edit-site-welcome-guide__text {
4607 font-size: 13px;
4608 line-height: 1.4;
4609 margin: 0 0 16px 0;
4610 padding: 0 32px;
4611 }
4612 .edit-site-welcome-guide__text img {
4613 vertical-align: bottom;
4614 }
4615 .edit-site-welcome-guide__inserter-icon {
4616 margin: 0 4px;
4617 vertical-align: text-top;
4618 }
4619 .edit-site-welcome-guide .components-button:hover svg {
4620 fill: #fff;
4621 }
4622
4623 .edit-site-layout {
4624 height: 100%;
4625 background: #1e1e1e;
4626 color: #ccc;
4627 display: flex;
4628 flex-direction: column;
4629 }
4630 .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4631 background: #1e1e1e;
4632 }
4633
4634 .edit-site-layout__content {
4635 height: 100%;
4636 flex-grow: 1;
4637 display: flex;
4638 }
4639
4640 .edit-site-layout__sidebar-region {
4641 z-index: 1;
4642 width: 100vw;
4643 flex-shrink: 0;
4644 }
4645 @media (min-width: 782px) {
4646 .edit-site-layout__sidebar-region {
4647 width: 300px;
4648 }
4649 }
4650 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4651 position: fixed !important;
4652 height: 100vh;
4653 left: 0;
4654 top: 0;
4655 }
4656 .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4657 display: flex;
4658 flex-direction: column;
4659 height: 100%;
4660 }
4661 .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4662 right: 0;
4663 }
4664
4665 .edit-site-layout__main {
4666 flex-grow: 1;
4667 overflow: hidden;
4668 display: flex;
4669 flex-direction: column;
4670 }
4671
4672 .edit-site-layout__mobile {
4673 position: relative;
4674 width: 100%;
4675 z-index: 2;
4676 display: flex;
4677 flex-direction: column;
4678 /*
4679 * The SiteHubMobile component is displayed
4680 * for pages that do not have a sidebar,
4681 * yet it needs the Sidebar component for the React context.
4682 *
4683 * This removes the padding in this scenario.
4684 * See https://github.com/WordPress/gutenberg/pull/63118
4685 */
4686 }
4687 .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4688 padding: 0;
4689 }
4690 .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4691 padding: 0 12px;
4692 }
4693
4694 .edit-site-layout__canvas-container {
4695 position: relative;
4696 flex-grow: 1;
4697 z-index: 2;
4698 overflow: visible;
4699 }
4700 .edit-site-layout__canvas-container.is-resizing::after {
4701 position: absolute;
4702 top: 0;
4703 left: 0;
4704 right: 0;
4705 bottom: 0;
4706 content: "";
4707 z-index: 100;
4708 }
4709
4710 .edit-site-layout__canvas {
4711 position: absolute;
4712 top: 0;
4713 left: 0;
4714 bottom: 0;
4715 width: 100%;
4716 display: flex;
4717 justify-content: center;
4718 align-items: center;
4719 }
4720 .edit-site-layout__canvas.is-right-aligned {
4721 justify-content: flex-end;
4722 }
4723 .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4724 color: #1e1e1e;
4725 }
4726 @media (min-width: 782px) {
4727 .edit-site-layout__canvas {
4728 top: 16px;
4729 bottom: 16px;
4730 width: calc(100% - 16px);
4731 }
4732 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4733 box-shadow: 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);
4734 overflow: hidden;
4735 }
4736 }
4737 @media (min-width: 782px) and (not (prefers-reduced-motion)) {
4738 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4739 transition: border-radius, box-shadow 0.4s;
4740 }
4741 }
4742 @media (min-width: 782px) {
4743 .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4744 border-radius: 8px;
4745 }
4746 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4747 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);
4748 }
4749 }
4750 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4751 top: 0;
4752 bottom: 0;
4753 width: 100%;
4754 }
4755
4756 .edit-site-layout__mobile .interface-interface-skeleton,
4757 .edit-site-layout__canvas .interface-interface-skeleton,
4758 .edit-site-template-pages-preview .interface-interface-skeleton {
4759 position: relative !important;
4760 min-height: 100% !important;
4761 }
4762
4763 .edit-site-template-pages-preview {
4764 height: 100%;
4765 }
4766
4767 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4768 html.canvas-mode-edit-transition::view-transition-group(toggle) {
4769 animation-delay: 255ms;
4770 }
4771
4772 @media (prefers-reduced-motion) {
4773 ::view-transition-group(*),
4774 ::view-transition-old(*),
4775 ::view-transition-new(*) {
4776 animation: none !important;
4777 }
4778 }
4779 /* stylelint-enable */
4780 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4781 display: none;
4782 }
4783
4784 .edit-site-layout__view-mode-toggle.components-button {
4785 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4786 view-transition-name: toggle;
4787 /* stylelint-enable */
4788 position: relative;
4789 color: #fff;
4790 height: 64px;
4791 width: 64px;
4792 overflow: hidden;
4793 padding: 0;
4794 display: flex;
4795 align-items: center;
4796 justify-content: center;
4797 background: #1e1e1e;
4798 border-radius: 0;
4799 }
4800 .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4801 color: #fff;
4802 }
4803 .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4804 box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4805 outline: 4px solid rgba(0, 0, 0, 0);
4806 outline-offset: 4px;
4807 }
4808 .edit-site-layout__view-mode-toggle.components-button::before {
4809 content: "";
4810 display: block;
4811 position: absolute;
4812 top: 9px;
4813 right: 9px;
4814 bottom: 9px;
4815 left: 17px;
4816 border-radius: 4px;
4817 box-shadow: none;
4818 }
4819 @media not (prefers-reduced-motion) {
4820 .edit-site-layout__view-mode-toggle.components-button::before {
4821 transition: box-shadow 0.1s ease;
4822 }
4823 }
4824 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4825 display: flex;
4826 height: 64px;
4827 width: 64px;
4828 justify-content: center;
4829 align-items: center;
4830 }
4831
4832 .edit-site-layout__actions {
4833 z-index: 100000;
4834 position: fixed !important;
4835 top: -9999em;
4836 bottom: auto;
4837 left: auto;
4838 right: 0;
4839 width: 280px;
4840 color: #1e1e1e;
4841 background: #fff;
4842 }
4843 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4844 top: auto;
4845 bottom: 0;
4846 }
4847 .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4848 top: 0;
4849 }
4850 @media (min-width: 782px) {
4851 .edit-site-layout__actions {
4852 border-left: 1px solid #ddd;
4853 }
4854 }
4855
4856 .edit-site-layout__area {
4857 flex-grow: 1;
4858 margin: 0;
4859 overflow: hidden;
4860 box-shadow: 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);
4861 }
4862 @media (min-width: 782px) {
4863 .edit-site-layout__area {
4864 border-radius: 8px;
4865 margin: 16px 16px 16px 0;
4866 }
4867 }
4868
4869 .edit-site-layout__snackbar {
4870 position: fixed;
4871 bottom: 24px;
4872 left: 0;
4873 right: 0;
4874 padding-inline: 16px;
4875 box-sizing: border-box;
4876 display: flex;
4877 flex-direction: column;
4878 pointer-events: none;
4879 }
4880 .edit-site-layout__snackbar .components-snackbar {
4881 margin-inline: auto;
4882 }
4883
4884 .edit-site-save-hub {
4885 color: #949494;
4886 border-top: 1px solid #2f2f2f;
4887 flex-shrink: 0;
4888 margin: 0;
4889 padding: 16px 16px;
4890 }
4891
4892 .edit-site-save-hub__button {
4893 color: inherit;
4894 width: 100%;
4895 justify-content: center;
4896 }
4897 .edit-site-save-hub__button[aria-disabled=true] {
4898 opacity: 1;
4899 }
4900 .edit-site-save-hub__button[aria-disabled=true]:hover {
4901 color: inherit;
4902 }
4903 .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4904 color: #1e1e1e;
4905 }
4906
4907 @media (min-width: 600px) {
4908 .edit-site-save-panel__modal {
4909 width: 600px;
4910 }
4911 }
4912
4913 .edit-site-sidebar__content {
4914 flex-grow: 1;
4915 overflow-y: auto;
4916 overflow-x: hidden;
4917 contain: content;
4918 }
4919
4920 @keyframes local--slide-from-right {
4921 from {
4922 transform: translateX(50px);
4923 opacity: 0;
4924 }
4925 to {
4926 transform: none;
4927 opacity: 1;
4928 }
4929 }
4930 @keyframes local--slide-from-left {
4931 from {
4932 transform: translateX(-50px);
4933 opacity: 0;
4934 }
4935 to {
4936 transform: none;
4937 opacity: 1;
4938 }
4939 }
4940 .edit-site-sidebar__screen-wrapper {
4941 overflow-x: auto;
4942 }
4943 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
4944 width: 12px;
4945 height: 12px;
4946 }
4947 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
4948 background-color: transparent;
4949 }
4950 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
4951 background-color: transparent;
4952 border-radius: 8px;
4953 border: 3px solid transparent;
4954 background-clip: padding-box;
4955 }
4956 .edit-site-sidebar__screen-wrapper:hover::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus-within::-webkit-scrollbar-thumb {
4957 background-color: #757575;
4958 }
4959 .edit-site-sidebar__screen-wrapper {
4960 scrollbar-width: thin;
4961 scrollbar-gutter: stable both-edges;
4962 scrollbar-color: transparent transparent;
4963 }
4964 .edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
4965 scrollbar-color: #757575 transparent;
4966 }
4967 .edit-site-sidebar__screen-wrapper {
4968 will-change: transform;
4969 }
4970 @media (hover: none) {
4971 .edit-site-sidebar__screen-wrapper {
4972 scrollbar-color: #757575 transparent;
4973 }
4974 }
4975 .edit-site-sidebar__screen-wrapper {
4976 scrollbar-gutter: stable;
4977 display: flex;
4978 flex-direction: column;
4979 height: 100%;
4980 max-height: 100%;
4981 padding: 0 12px;
4982 animation-duration: 0.14s;
4983 animation-timing-function: ease-in-out;
4984 will-change: transform, opacity;
4985 }
4986 @media (prefers-reduced-motion: reduce) {
4987 .edit-site-sidebar__screen-wrapper {
4988 animation-duration: 0s;
4989 }
4990 }
4991 .edit-site-sidebar__screen-wrapper.slide-from-left {
4992 animation-name: local--slide-from-left;
4993 }
4994 .edit-site-sidebar__screen-wrapper.slide-from-right {
4995 animation-name: local--slide-from-right;
4996 }
4997
4998 .edit-site-sidebar-button {
4999 color: #e0e0e0;
5000 flex-shrink: 0;
5001 }
5002 .edit-site-sidebar-button:focus:not(:disabled) {
5003 box-shadow: none;
5004 outline: none;
5005 }
5006 .edit-site-sidebar-button:focus-visible:not(:disabled) {
5007 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5008 outline: 3px solid transparent;
5009 }
5010 .edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
5011 color: #f0f0f0;
5012 }
5013
5014 .edit-site-sidebar-navigation-item.components-item {
5015 color: #949494;
5016 padding: 8px 6px 8px 16px;
5017 border: none;
5018 min-height: 40px;
5019 }
5020 .edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5021 color: #e0e0e0;
5022 }
5023 .edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current=true] .edit-site-sidebar-navigation-item__drilldown-indicator {
5024 fill: #e0e0e0;
5025 }
5026 .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5027 background: #2f2f2f;
5028 color: #fff;
5029 font-weight: 499;
5030 }
5031 .edit-site-sidebar-navigation-item.components-item:focus-visible {
5032 transform: translateZ(0);
5033 }
5034 .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5035 fill: #949494;
5036 }
5037 .edit-site-sidebar-navigation-item.components-item.with-suffix {
5038 padding-right: 16px;
5039 }
5040
5041 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
5042 cursor: grab;
5043 padding: 8px 8px 8px 0;
5044 }
5045
5046 .edit-site-sidebar-navigation-screen {
5047 display: flex;
5048 flex-direction: column;
5049 overflow-x: unset !important;
5050 position: relative;
5051 }
5052
5053 .edit-site-sidebar-navigation-screen__main {
5054 flex-grow: 1;
5055 margin-bottom: 16px;
5056 }
5057 .edit-site-sidebar-navigation-screen__main.has-footer {
5058 margin-bottom: 0;
5059 }
5060
5061 .edit-site-sidebar-navigation-screen__content {
5062 padding: 0 16px;
5063 }
5064 .edit-site-sidebar-navigation-screen__content .components-text {
5065 color: #ccc;
5066 }
5067 .edit-site-sidebar-navigation-screen__content .components-heading {
5068 margin-bottom: 8px;
5069 }
5070
5071 .edit-site-sidebar-navigation-screen__title-icon {
5072 position: sticky;
5073 top: 0;
5074 background: #1e1e1e;
5075 padding-top: 48px;
5076 margin-bottom: 8px;
5077 padding-bottom: 8px;
5078 z-index: 1;
5079 }
5080
5081 .edit-site-sidebar-navigation-screen__title {
5082 flex-grow: 1;
5083 overflow-wrap: break-word;
5084 }
5085 .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title, .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title .edit-site-sidebar-navigation-screen__title {
5086 line-height: 32px;
5087 }
5088
5089 .edit-site-sidebar-navigation-screen__actions {
5090 display: flex;
5091 flex-shrink: 0;
5092 }
5093
5094 @media (min-width: 782px) {
5095 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
5096 max-width: 292px;
5097 }
5098 }
5099
5100 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
5101 outline-color: rgba(255, 255, 255, 0.05);
5102 }
5103 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
5104 outline-color: rgba(255, 255, 255, 0.15);
5105 }
5106 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
5107 outline-color: #fff;
5108 }
5109 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
5110 outline-color: var(--wp-admin-theme-color);
5111 }
5112
5113 .edit-site-sidebar-navigation-screen__footer {
5114 position: sticky;
5115 bottom: 0;
5116 background-color: #1e1e1e;
5117 gap: 0;
5118 padding: 8px 16px;
5119 margin: 16px 0 0;
5120 border-top: 1px solid #2f2f2f;
5121 }
5122 .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5123 margin-left: -16px;
5124 margin-right: -16px;
5125 }
5126
5127 /* In general style overrides are discouraged.
5128 * This is a temporary solution to override the InputControl component's styles.
5129 * The `Theme` component will potentially be the more appropriate approach
5130 * once that component is stabilized.
5131 * See: packages/components/src/theme
5132 */
5133 .edit-site-sidebar-navigation-screen__input-control {
5134 width: 100%;
5135 }
5136 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5137 background: #2f2f2f;
5138 }
5139 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5140 color: #e0e0e0 !important;
5141 }
5142 .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5143 color: #e0e0e0 !important;
5144 background: #2f2f2f !important;
5145 }
5146 .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5147 border: 4px !important;
5148 }
5149 .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5150 color: #949494;
5151 }
5152
5153 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5154 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5155 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5156 background: none;
5157 }
5158
5159 .sidebar-navigation__more-menu .components-button {
5160 color: #e0e0e0;
5161 }
5162 .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5163 color: #f0f0f0;
5164 }
5165
5166 .edit-site-sidebar-navigation-screen-patterns__group {
5167 margin-bottom: 24px;
5168 margin-left: -16px;
5169 margin-right: -16px;
5170 }
5171 .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5172 border-bottom: 0;
5173 padding-bottom: 0;
5174 margin-bottom: 0;
5175 }
5176
5177 .edit-site-sidebar-navigation-screen-patterns__group-header {
5178 margin-top: 16px;
5179 }
5180 .edit-site-sidebar-navigation-screen-patterns__group-header p {
5181 color: #949494;
5182 }
5183 .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5184 font-size: 11px;
5185 font-weight: 499;
5186 text-transform: uppercase;
5187 }
5188
5189 .edit-site-sidebar-navigation-screen-patterns__divider {
5190 border-top: 1px solid #2f2f2f;
5191 margin: 16px 0;
5192 }
5193
5194 .edit-site-sidebar-navigation-screen__description {
5195 margin: 0 0 32px 0;
5196 }
5197
5198 .edit-site-sidebar-navigation-screen-navigation-menus {
5199 margin-left: -16px;
5200 margin-right: -16px;
5201 }
5202
5203 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5204 white-space: normal;
5205 }
5206 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5207 margin-top: 3px;
5208 }
5209 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5210 padding-right: 0;
5211 }
5212 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5213 color: #949494;
5214 }
5215 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button[aria-current] {
5216 color: #fff;
5217 }
5218 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5219 color: #949494;
5220 }
5221 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:focus {
5222 color: #fff;
5223 }
5224
5225 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5226 margin-left: auto;
5227 margin-right: auto;
5228 display: block;
5229 }
5230
5231 .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5232 display: none;
5233 }
5234
5235 .edit-site-sidebar-navigation-screen-main {
5236 margin-left: -16px;
5237 margin-right: -16px;
5238 }
5239
5240 .edit-site-sidebar-navigation-screen-templates-browse {
5241 margin-left: -16px;
5242 margin-right: -16px;
5243 }
5244
5245 .edit-site-sidebar-dataviews {
5246 margin-left: -16px;
5247 margin-right: -16px;
5248 }
5249
5250 .edit-site-site-hub {
5251 display: flex;
5252 align-items: center;
5253 justify-content: space-between;
5254 gap: 8px;
5255 margin-right: 12px;
5256 height: 64px;
5257 }
5258
5259 .edit-site-site-hub__actions {
5260 flex-shrink: 0;
5261 }
5262
5263 .edit-site-site-hub__view-mode-toggle-container {
5264 height: 64px;
5265 width: 64px;
5266 flex-shrink: 0;
5267 }
5268 .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5269 background: transparent;
5270 }
5271
5272 .edit-site-site-hub__title .components-button {
5273 color: #e0e0e0;
5274 display: block;
5275 flex-grow: 1;
5276 font-size: 15px;
5277 font-weight: 499;
5278 overflow: hidden;
5279 padding-right: 16px;
5280 margin-left: -4px;
5281 position: relative;
5282 text-decoration: none;
5283 text-overflow: ellipsis;
5284 white-space: nowrap;
5285 }
5286 .edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5287 color: #e0e0e0;
5288 }
5289 .edit-site-site-hub__title .components-button:focus {
5290 box-shadow: none;
5291 outline: none;
5292 }
5293 .edit-site-site-hub__title .components-button:focus-visible {
5294 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5295 outline: 2px solid transparent;
5296 outline-offset: 2px;
5297 }
5298 .edit-site-site-hub__title .components-button::after {
5299 content: "↗";
5300 font-weight: 400;
5301 opacity: 0;
5302 position: absolute;
5303 right: 0;
5304 }
5305 @media not (prefers-reduced-motion) {
5306 .edit-site-site-hub__title .components-button::after {
5307 transition: opacity 0.1s linear;
5308 }
5309 }
5310 .edit-site-site-hub__title .components-button:hover::after, .edit-site-site-hub__title .components-button:focus::after, .edit-site-site-hub__title .components-button:active::after {
5311 opacity: 1;
5312 }
5313
5314 .edit-site-site-hub_toggle-command-center {
5315 color: #e0e0e0;
5316 }
5317 .edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5318 fill: #f0f0f0;
5319 }
5320
5321 .edit-site-site-icon__icon {
5322 fill: currentColor;
5323 width: 100%;
5324 height: 100%;
5325 }
5326 .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5327 padding: 12px;
5328 }
5329
5330 .edit-site-site-icon__image {
5331 width: 100%;
5332 height: 100%;
5333 object-fit: cover;
5334 background: #333;
5335 aspect-ratio: 1/1;
5336 }
5337 .edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5338 border-radius: 0;
5339 }
5340
5341 .edit-site-editor__view-mode-toggle button:focus {
5342 position: relative;
5343 }
5344 .edit-site-editor__view-mode-toggle button:focus::before {
5345 content: "";
5346 display: block;
5347 position: absolute;
5348 z-index: 1;
5349 top: 0;
5350 right: 0;
5351 bottom: 0;
5352 left: 0;
5353 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
5354 }
5355
5356 .edit-site-post-list__featured-image {
5357 height: 100%;
5358 object-fit: cover;
5359 width: 100%;
5360 }
5361
5362 .edit-site-post-list__featured-image-wrapper {
5363 height: 100%;
5364 width: 100%;
5365 border-radius: 4px;
5366 }
5367 .edit-site-post-list__featured-image-wrapper.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)), .edit-site-post-list__featured-image-wrapper.is-layout-table .edit-site-post-list__featured-image-button {
5368 width: 32px;
5369 height: 32px;
5370 display: block;
5371 border-radius: 4px;
5372 position: relative;
5373 overflow: hidden;
5374 background-color: #f0f0f0;
5375 flex-grow: 0 !important;
5376 }
5377 .edit-site-post-list__featured-image-wrapper.is-layout-table:not(:has(.edit-site-post-list__featured-image-button))::after, .edit-site-post-list__featured-image-wrapper.is-layout-table .edit-site-post-list__featured-image-button::after {
5378 border-radius: 4px;
5379 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
5380 content: "";
5381 height: 100%;
5382 left: 0;
5383 position: absolute;
5384 top: 0;
5385 width: 100%;
5386 }
5387
5388 .edit-site-post-list__featured-image-button {
5389 box-shadow: none;
5390 border: none;
5391 padding: 0;
5392 background-color: unset;
5393 box-sizing: border-box;
5394 cursor: pointer;
5395 overflow: hidden;
5396 height: 100%;
5397 width: 100%;
5398 border-radius: 4px;
5399 }
5400 .edit-site-post-list__featured-image-button:focus-visible {
5401 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5402 outline: 2px solid transparent;
5403 }
5404
5405 .dataviews-view-grid__card.is-selected .edit-site-post-list__featured-image-button::after {
5406 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5407 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
5408 }
5409
5410 .fields-controls__password {
5411 border-top: 1px solid #e0e0e0;
5412 padding-top: 16px;
5413 }
5414
5415 .dataviews-action-modal__quick-edit {
5416 justify-content: flex-end;
5417 align-items: stretch;
5418 }
5419 .dataviews-action-modal__quick-edit .components-modal__frame {
5420 margin: 16px 16px 16px 0;
5421 height: calc(100% - 32px);
5422 max-height: calc(100% - 32px);
5423 max-width: 400px;
5424 border-radius: 8px;
5425 position: relative;
5426 animation-name: none;
5427 }
5428 @media (prefers-reduced-motion: no-preference) {
5429 .dataviews-action-modal__quick-edit .components-modal__frame {
5430 animation-name: quick-edit-slide-in-right;
5431 animation-duration: 0.2s;
5432 animation-timing-function: ease-out;
5433 }
5434 }
5435 .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5436 animation-name: none;
5437 }
5438 @media (prefers-reduced-motion: no-preference) {
5439 .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5440 animation-name: quick-edit-slide-out-right;
5441 animation-duration: 0.2s;
5442 animation-timing-function: ease-out;
5443 }
5444 }
5445 .dataviews-action-modal__quick-edit .components-modal__content {
5446 display: flex;
5447 flex-direction: column;
5448 overflow: hidden;
5449 padding: 0;
5450 }
5451 .dataviews-action-modal__quick-edit .components-modal__content > * {
5452 display: flex;
5453 flex-direction: column;
5454 flex: 1;
5455 min-height: 0;
5456 }
5457 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5458 padding: 24px 24px 0;
5459 }
5460 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5461 flex: 1;
5462 min-height: 0;
5463 overflow-y: auto;
5464 padding-top: 16px;
5465 }
5466 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5467 flex: 1;
5468 padding: 0 24px 4px;
5469 }
5470 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5471 position: sticky;
5472 bottom: 0;
5473 flex-shrink: 0;
5474 padding: 16px 24px 24px;
5475 }
5476 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5477 flex: 1;
5478 justify-content: center;
5479 }
5480
5481 @keyframes quick-edit-slide-in-right {
5482 from {
5483 transform: translateX(100%);
5484 }
5485 to {
5486 transform: translateX(0);
5487 }
5488 }
5489 @keyframes quick-edit-slide-out-right {
5490 from {
5491 transform: translateX(0);
5492 }
5493 to {
5494 transform: translateX(100%);
5495 }
5496 }
5497 .edit-site-resizable-frame__inner {
5498 position: relative;
5499 }
5500 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5501 cursor: col-resize;
5502 -webkit-user-select: none;
5503 user-select: none;
5504 }
5505
5506 .edit-site-resizable-frame__inner.is-resizing::before {
5507 position: absolute;
5508 z-index: 1;
5509 inset: 0;
5510 content: "";
5511 }
5512
5513 .edit-site-resizable-frame__inner-content {
5514 position: absolute;
5515 z-index: 0;
5516 inset: 0;
5517 }
5518
5519 .edit-site-resizable-frame__handle {
5520 align-items: center;
5521 background-color: rgba(117, 117, 117, 0.4);
5522 border: 0;
5523 border-radius: 4px;
5524 cursor: col-resize;
5525 display: flex;
5526 height: 64px;
5527 justify-content: flex-end;
5528 padding: 0;
5529 position: absolute;
5530 top: calc(50% - 32px);
5531 width: 4px;
5532 z-index: 100;
5533 }
5534 .edit-site-resizable-frame__handle::before {
5535 content: "";
5536 height: 100%;
5537 left: 100%;
5538 position: absolute;
5539 width: 32px;
5540 }
5541 .edit-site-resizable-frame__handle::after {
5542 content: "";
5543 height: 100%;
5544 position: absolute;
5545 right: 100%;
5546 width: 32px;
5547 }
5548 .edit-site-resizable-frame__handle:focus-visible {
5549 outline: 2px solid transparent;
5550 }
5551 .edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5552 background-color: var(--wp-admin-theme-color);
5553 }
5554
5555 .edit-site-pagination .components-button.is-tertiary {
5556 width: 32px;
5557 height: 32px;
5558 justify-content: center;
5559 }
5560
5561 .edit-site-styles .global-styles-ui-screen-root {
5562 box-shadow: none;
5563 }
5564 .edit-site-styles .global-styles-ui-screen-root > div > hr {
5565 display: none;
5566 }
5567 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5568 border-top: none;
5569 }
5570 .edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5571 overflow-y: auto;
5572 padding-left: 0;
5573 padding-right: 0;
5574 }
5575 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5576 padding-top: 12px;
5577 padding-left: 12px;
5578 padding-right: 12px;
5579 padding-bottom: 12px;
5580 outline: none;
5581 }
5582 .edit-site-styles .edit-site-sidebar-button {
5583 color: #1e1e1e;
5584 }
5585
5586 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5587 ::view-transition-image-pair(root) {
5588 isolation: auto;
5589 }
5590
5591 ::view-transition-old(root),
5592 ::view-transition-new(root) {
5593 animation: none;
5594 mix-blend-mode: normal;
5595 display: block;
5596 }
5597
5598 /* stylelint-enable */
5599 body.js #wpadminbar {
5600 display: none;
5601 }
5602
5603 body.js #wpbody {
5604 padding-top: 0;
5605 }
5606
5607 body.js.appearance_page_gutenberg-template-parts,
5608 body.js.site-editor-php {
5609 background: #fff;
5610 }
5611 body.js.appearance_page_gutenberg-template-parts #wpcontent,
5612 body.js.site-editor-php #wpcontent {
5613 padding-left: 0;
5614 }
5615 body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5616 body.js.site-editor-php #wpbody-content {
5617 padding-bottom: 0;
5618 }
5619 body.js.appearance_page_gutenberg-template-parts,
5620 body.js.site-editor-php {
5621 /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5622 Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5623 }
5624 body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5625 body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5626 display: none;
5627 }
5628 body.js.appearance_page_gutenberg-template-parts #wpfooter,
5629 body.js.site-editor-php #wpfooter {
5630 display: none;
5631 }
5632 body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5633 body.js.site-editor-php .a11y-speak-region {
5634 left: -1px;
5635 top: -1px;
5636 }
5637 body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5638 body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5639 body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5640 body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5641 border-right-color: #fff;
5642 }
5643 body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5644 body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5645 width: auto;
5646 max-width: 100%;
5647 }
5648
5649 body.js.site-editor-php {
5650 background: #1e1e1e;
5651 }
5652
5653 .edit-site {
5654 box-sizing: border-box;
5655 }
5656 .edit-site *,
5657 .edit-site *::before,
5658 .edit-site *::after {
5659 box-sizing: inherit;
5660 }
5661 .edit-site {
5662 height: 100vh;
5663 }
5664 @media (min-width: 600px) {
5665 .edit-site {
5666 bottom: 0;
5667 left: 0;
5668 min-height: 100vh;
5669 position: fixed;
5670 right: 0;
5671 top: 0;
5672 }
5673 }
5674 .no-js .edit-site {
5675 min-height: 0;
5676 position: static;
5677 }
5678 .edit-site .interface-interface-skeleton {
5679 top: 0;
5680 }