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

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

5,677 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 right: 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-left: 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 left: 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-left: 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 right: 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 right: 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-left: 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 -5px 0 0;
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: right;
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 right: 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 32px 0 8px;
981 width: 100%;
982 height: 32px;
983 margin-right: 0;
984 margin-left: 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 left: 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-right: 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 right: 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 left: 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 right: 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 right: 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 right: 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 left: 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 right: 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: right;
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: left;
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 left: 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 right: 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-left: 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-right: 24px;
1892 }
1893
1894 .dataviews-view-table tr td:last-child,
1895 .dataviews-view-table tr th:last-child {
1896 padding-left: 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 right: 0;
1950 left: 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-right: 4px;
1970 padding-left: 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-right: 16px;
1979 }
1980
1981 .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1982 padding-left: 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-right: 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-right: 0;
2039 }
2040
2041 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
2042 padding-left: 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-left: 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 right: 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 right: 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 right: 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 left: 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 right: 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 right: 0;
3205 left: 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 left: 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: right;
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-right: -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-right: 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-right: -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 right: 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 17px 16px 16px;
3692 }
3693
3694 .font-library__select-all .components-checkbox-control__label {
3695 padding-right: 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 right: 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 right: 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 40px 4px 12px;
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 40px 12px 12px;
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: right;
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-left: 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: right;
3843 line-height: 1.4;
3844 margin-right: 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 right: -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-right: 0;
3992 padding-left: 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 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);
4045 background-position: 0 0, 8px 8px;
4046 background-size: 16px 16px;
4047 }
4048
4049 .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4050 border: #ddd 1px solid;
4051 border-radius: 2px;
4052 background-color: #fff;
4053 width: 60%;
4054 height: 60px;
4055 }
4056
4057 .global-styles-ui__shadow-editor__dropdown-content {
4058 width: 280px;
4059 }
4060
4061 .global-styles-ui__shadow-editor-panel {
4062 margin-bottom: 4px;
4063 }
4064
4065 .global-styles-ui__shadow-editor__dropdown {
4066 width: 100%;
4067 position: relative;
4068 }
4069
4070 .global-styles-ui__shadow-editor__dropdown-toggle {
4071 width: 100%;
4072 height: auto;
4073 padding-top: 8px;
4074 padding-bottom: 8px;
4075 text-align: right;
4076 border-radius: inherit;
4077 }
4078
4079 .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4080 background: #f0f0f0;
4081 color: var(--wp-admin-theme-color);
4082 }
4083
4084 .global-styles-ui__shadow-editor__remove-button {
4085 position: absolute;
4086 left: 8px;
4087 top: 8px;
4088 opacity: 0;
4089 }
4090
4091 .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4092 border: none;
4093 }
4094
4095 .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 {
4096 opacity: 1;
4097 }
4098
4099 @media (hover: none) {
4100 .global-styles-ui__shadow-editor__remove-button {
4101 opacity: 1;
4102 }
4103 }
4104 .global-styles-ui-screen-css {
4105 flex: 1 1 auto;
4106 display: flex;
4107 flex-direction: column;
4108 margin: 16px;
4109 }
4110
4111 .global-styles-ui-screen-css .components-v-stack {
4112 flex: 1 1 auto;
4113 }
4114
4115 .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
4116 flex: 1 1 auto;
4117 display: flex;
4118 flex-direction: column;
4119 }
4120
4121 .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4122 flex: 1 1 auto;
4123 display: flex;
4124 flex-direction: column;
4125 }
4126
4127 .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 {
4128 flex: 1 1 auto;
4129 direction: ltr;
4130 }
4131
4132 .global-styles-ui-screen-css-help-link {
4133 display: inline-block;
4134 margin-top: 8px;
4135 }
4136
4137 .global-styles-ui-screen-variations {
4138 margin-top: 16px;
4139 border-top: 1px solid #ddd;
4140 }
4141
4142 .global-styles-ui-screen-variations > * {
4143 margin: 24px 16px;
4144 }
4145
4146 .global-styles-ui-sidebar__navigator-provider {
4147 height: 100%;
4148 }
4149
4150 .global-styles-ui-sidebar__navigator-screen {
4151 display: flex;
4152 flex-direction: column;
4153 height: 100%;
4154 }
4155
4156 .global-styles-ui-sidebar__navigator-screen .single-column {
4157 grid-column: span 1;
4158 }
4159
4160 .global-styles-ui-screen-root.global-styles-ui-screen-root,
4161 .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4162 background: unset;
4163 color: inherit;
4164 }
4165
4166 .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4167 fill: currentColor;
4168 }
4169
4170 .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 {
4171 border-radius: 2px;
4172 }
4173
4174 .global-styles-ui-screen-root__active-style-tile-preview {
4175 clip-path: border-box;
4176 }
4177
4178 .global-styles-ui-color-palette-panel,
4179 .global-styles-ui-gradient-palette-panel {
4180 padding: 16px;
4181 }
4182
4183 .edit-site-custom-template-modal__contents-wrapper {
4184 height: 100%;
4185 justify-content: flex-start !important;
4186 }
4187 .edit-site-custom-template-modal__contents-wrapper > * {
4188 width: 100%;
4189 }
4190 .edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4191 margin-right: -12px;
4192 margin-left: -12px;
4193 width: calc(100% + 24px);
4194 }
4195 .edit-site-custom-template-modal__contents > .components-button {
4196 height: auto;
4197 justify-content: center;
4198 }
4199 @media (min-width: 782px) {
4200 .edit-site-custom-template-modal {
4201 width: 456px;
4202 }
4203 }
4204 @media (min-width: 600px) {
4205 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4206 max-height: 224px;
4207 overflow-y: auto;
4208 }
4209 }
4210 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4211 display: block;
4212 width: 100%;
4213 text-align: right;
4214 white-space: pre-wrap;
4215 overflow-wrap: break-word;
4216 height: auto;
4217 padding: 8px 12px;
4218 }
4219 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4220 font-weight: 700;
4221 background: none;
4222 }
4223 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4224 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4225 }
4226 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4227 color: var(--wp-admin-theme-color);
4228 }
4229 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4230 color: var(--wp-admin-theme-color);
4231 }
4232 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4233 background-color: #f0f0f0;
4234 }
4235 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4236 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4237 }
4238 .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 {
4239 overflow: hidden;
4240 text-overflow: ellipsis;
4241 display: block;
4242 }
4243 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4244 word-break: break-all;
4245 color: #757575;
4246 }
4247
4248 .edit-site-custom-template-modal__no-results {
4249 border: 1px solid #ccc;
4250 border-radius: 2px;
4251 padding: 16px;
4252 }
4253
4254 .edit-site-custom-generic-template__modal .components-modal__header {
4255 border-bottom: none;
4256 }
4257 .edit-site-custom-generic-template__modal .components-modal__content::before {
4258 margin-bottom: 4px;
4259 }
4260
4261 @media (min-width: 960px) {
4262 .edit-site-add-new-template__modal {
4263 max-width: 832px;
4264 margin-top: 64px;
4265 width: calc(100% - 128px);
4266 max-height: calc(100% - 128px);
4267 }
4268 }
4269 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4270 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4271 fill: var(--wp-admin-theme-color);
4272 }
4273 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4274 flex-grow: 1;
4275 align-items: flex-start;
4276 }
4277 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4278 padding: 8px;
4279 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4280 border-radius: 100%;
4281 max-height: 40px;
4282 max-width: 40px;
4283 }
4284
4285 .edit-site-custom-template-modal__contents > .components-button,
4286 .edit-site-add-new-template__template-list__contents > .components-button {
4287 padding: 32px;
4288 display: flex;
4289 flex-direction: column;
4290 border: 1px solid #ddd;
4291 justify-content: center;
4292 outline: 1px solid transparent;
4293 }
4294 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4295 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4296 color: #1e1e1e;
4297 }
4298 .edit-site-custom-template-modal__contents > .components-button span,
4299 .edit-site-add-new-template__template-list__contents > .components-button span {
4300 color: #757575;
4301 }
4302 .edit-site-custom-template-modal__contents > .components-button:hover,
4303 .edit-site-add-new-template__template-list__contents > .components-button:hover {
4304 color: var(--wp-admin-theme-color-darker-10);
4305 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4306 border-color: transparent;
4307 }
4308 .edit-site-custom-template-modal__contents > .components-button:hover span,
4309 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4310 color: var(--wp-admin-theme-color);
4311 }
4312 .edit-site-custom-template-modal__contents > .components-button:focus,
4313 .edit-site-add-new-template__template-list__contents > .components-button:focus {
4314 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4315 border-color: transparent;
4316 outline: 3px solid transparent;
4317 }
4318 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4319 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4320 color: var(--wp-admin-theme-color);
4321 }
4322 .edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4323 .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4324 .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4325 .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4326 grid-column: 1/-1;
4327 }
4328
4329 .edit-site-add-new-template__template-list__contents > .components-button {
4330 height: 100%;
4331 text-align: start;
4332 align-items: flex-start;
4333 }
4334
4335 .edit-site-visual-editor__editor-canvas.is-focused {
4336 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4337 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4338 }
4339
4340 .edit-site-canvas-loader {
4341 width: 100%;
4342 height: 100%;
4343 display: flex;
4344 position: absolute;
4345 top: 0;
4346 right: 0;
4347 opacity: 0;
4348 align-items: center;
4349 justify-content: center;
4350 }
4351 @media not (prefers-reduced-motion) {
4352 .edit-site-canvas-loader {
4353 animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4354 animation-fill-mode: forwards;
4355 }
4356 }
4357 .edit-site-canvas-loader > div {
4358 width: 160px;
4359 }
4360
4361 @keyframes edit-site-canvas-loader__fade-in-animation {
4362 from {
4363 opacity: 0;
4364 }
4365 to {
4366 opacity: 1;
4367 }
4368 }
4369 .edit-site-patterns__delete-modal {
4370 width: 400px;
4371 }
4372
4373 .page-patterns-preview-field {
4374 display: flex;
4375 justify-content: center;
4376 align-items: center;
4377 flex-direction: column;
4378 height: 100%;
4379 border-radius: 4px;
4380 }
4381 .dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4382 height: 100%;
4383 }
4384 .dataviews-view-table .page-patterns-preview-field {
4385 width: 96px;
4386 flex-grow: 0;
4387 text-wrap: balance;
4388 text-wrap: pretty;
4389 }
4390
4391 .edit-site-patterns__pattern-icon {
4392 fill: var(--wp-block-synced-color);
4393 flex-shrink: 0;
4394 }
4395
4396 .edit-site-patterns__section-header {
4397 border-bottom: 1px solid #f0f0f0;
4398 padding: 16px 48px;
4399 position: sticky;
4400 top: 0;
4401 z-index: 2;
4402 flex-shrink: 0;
4403 min-height: 40px;
4404 }
4405 @media not (prefers-reduced-motion) {
4406 .edit-site-patterns__section-header {
4407 transition: padding ease-out 0.1s;
4408 }
4409 }
4410 .edit-site-patterns__section-header .edit-site-patterns__title {
4411 min-height: 40px;
4412 }
4413 .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4414 flex-grow: 1;
4415 flex-basis: 0;
4416 white-space: nowrap;
4417 }
4418 .edit-site-patterns__section-header .edit-site-patterns__sub-title {
4419 margin-bottom: 8px;
4420 }
4421 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4422 top: 0;
4423 }
4424
4425 .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4426 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4427 color: var(--wp-block-synced-color);
4428 }
4429
4430 .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4431 width: 350px;
4432 }
4433 .dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4434 position: relative;
4435 }
4436 .dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4437 position: absolute;
4438 border: 1px solid var(--wp-admin-theme-color);
4439 border-bottom-right-radius: 2px;
4440 border-bottom-left-radius: 2px;
4441 box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4442 box-sizing: border-box;
4443 z-index: 1;
4444 background-color: #fff;
4445 width: calc(100% + 2px);
4446 right: -1px;
4447 min-width: initial;
4448 max-height: 96px;
4449 }
4450
4451 @media (min-width: 600px) {
4452 .dataviews-action-modal__duplicate-template-part .components-modal__frame {
4453 max-width: 500px;
4454 }
4455 }
4456
4457 @container (max-width: 430px) {
4458 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4459 padding-right: 24px;
4460 padding-left: 24px;
4461 }
4462 }
4463 .page-templates-preview-field {
4464 display: flex;
4465 justify-content: center;
4466 align-items: center;
4467 flex-direction: column;
4468 height: 100%;
4469 width: 100%;
4470 border-radius: 4px;
4471 }
4472 .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4473 height: 120px;
4474 }
4475 .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4476 height: 100%;
4477 }
4478 .dataviews-view-table .page-templates-preview-field {
4479 position: relative;
4480 width: 120px;
4481 max-height: 160px;
4482 text-wrap: balance;
4483 text-wrap: pretty;
4484 }
4485
4486 .edit-site-page-templates .dataviews-pagination {
4487 z-index: 2;
4488 }
4489
4490 .edit-site-list__rename-modal {
4491 z-index: 1000001;
4492 }
4493 @media (min-width: 782px) {
4494 .edit-site-list__rename-modal .components-base-control {
4495 width: 320px;
4496 }
4497 }
4498
4499 .edit-site-editor__editor-interface {
4500 opacity: 1;
4501 }
4502 @media not (prefers-reduced-motion) {
4503 .edit-site-editor__editor-interface {
4504 transition: opacity 0.1s ease-out;
4505 }
4506 }
4507 .edit-site-editor__editor-interface.is-loading {
4508 opacity: 0;
4509 }
4510
4511 .edit-site-editor__toggle-save-panel {
4512 box-sizing: border-box;
4513 width: 280px;
4514 background-color: #fff;
4515 border: 1px dotted #ddd;
4516 padding: 24px;
4517 display: flex;
4518 justify-content: center;
4519 }
4520
4521 .edit-site-editor__view-mode-toggle {
4522 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4523 view-transition-name: toggle;
4524 /* stylelint-enable */
4525 top: 0;
4526 right: 0;
4527 height: 64px;
4528 width: 64px;
4529 z-index: 100;
4530 }
4531 .edit-site-editor__view-mode-toggle .components-button {
4532 color: #fff;
4533 height: 100%;
4534 width: 100%;
4535 border-radius: 0;
4536 overflow: hidden;
4537 padding: 0;
4538 display: flex;
4539 align-items: center;
4540 justify-content: center;
4541 }
4542 .edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4543 color: #fff;
4544 }
4545 .edit-site-editor__view-mode-toggle .components-button:focus {
4546 box-shadow: none;
4547 }
4548 .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4549 .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4550 background: #1e1e1e;
4551 display: block;
4552 }
4553
4554 .edit-site-editor__back-icon {
4555 position: absolute;
4556 top: 0;
4557 right: 0;
4558 width: 64px;
4559 height: 64px;
4560 display: flex;
4561 align-items: center;
4562 justify-content: center;
4563 background-color: hsl(0, 0%, 80%);
4564 pointer-events: none;
4565 }
4566 .edit-site-editor__back-icon svg {
4567 fill: currentColor;
4568 }
4569 .edit-site-editor__back-icon.has-site-icon {
4570 background-color: hsla(0, 0%, 100%, 0.6);
4571 backdrop-filter: saturate(180%) blur(15px);
4572 }
4573
4574 .edit-site-welcome-guide {
4575 width: 312px;
4576 }
4577 .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4578 background: #00a0d2;
4579 }
4580 .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4581 border-left: #3858e9 16px solid;
4582 border-top: #3858e9 16px solid;
4583 }
4584 .edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4585 border-right: #3858e9 16px solid;
4586 border-top: #3858e9 16px solid;
4587 }
4588 .edit-site-welcome-guide__image {
4589 margin: 0 0 16px;
4590 }
4591 .edit-site-welcome-guide__image > img {
4592 display: block;
4593 max-width: 100%;
4594 object-fit: cover;
4595 }
4596 .edit-site-welcome-guide__heading {
4597 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4598 font-size: 24px;
4599 line-height: 1.4;
4600 margin: 16px 0 16px 0;
4601 padding: 0 32px;
4602 }
4603 .edit-site-welcome-guide__text {
4604 font-size: 13px;
4605 line-height: 1.4;
4606 margin: 0 0 16px 0;
4607 padding: 0 32px;
4608 }
4609 .edit-site-welcome-guide__text img {
4610 vertical-align: bottom;
4611 }
4612 .edit-site-welcome-guide__inserter-icon {
4613 margin: 0 4px;
4614 vertical-align: text-top;
4615 }
4616 .edit-site-welcome-guide .components-button:hover svg {
4617 fill: #fff;
4618 }
4619
4620 .edit-site-layout {
4621 height: 100%;
4622 background: #1e1e1e;
4623 color: #ccc;
4624 display: flex;
4625 flex-direction: column;
4626 }
4627 .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4628 background: #1e1e1e;
4629 }
4630
4631 .edit-site-layout__content {
4632 height: 100%;
4633 flex-grow: 1;
4634 display: flex;
4635 }
4636
4637 .edit-site-layout__sidebar-region {
4638 z-index: 1;
4639 width: 100vw;
4640 flex-shrink: 0;
4641 }
4642 @media (min-width: 782px) {
4643 .edit-site-layout__sidebar-region {
4644 width: 300px;
4645 }
4646 }
4647 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4648 position: fixed !important;
4649 height: 100vh;
4650 right: 0;
4651 top: 0;
4652 }
4653 .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4654 display: flex;
4655 flex-direction: column;
4656 height: 100%;
4657 }
4658 .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4659 left: 0;
4660 }
4661
4662 .edit-site-layout__main {
4663 flex-grow: 1;
4664 overflow: hidden;
4665 display: flex;
4666 flex-direction: column;
4667 }
4668
4669 .edit-site-layout__mobile {
4670 position: relative;
4671 width: 100%;
4672 z-index: 2;
4673 display: flex;
4674 flex-direction: column;
4675 /*
4676 * The SiteHubMobile component is displayed
4677 * for pages that do not have a sidebar,
4678 * yet it needs the Sidebar component for the React context.
4679 *
4680 * This removes the padding in this scenario.
4681 * See https://github.com/WordPress/gutenberg/pull/63118
4682 */
4683 }
4684 .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4685 padding: 0;
4686 }
4687 .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4688 padding: 0 12px;
4689 }
4690
4691 .edit-site-layout__canvas-container {
4692 position: relative;
4693 flex-grow: 1;
4694 z-index: 2;
4695 overflow: visible;
4696 }
4697 .edit-site-layout__canvas-container.is-resizing::after {
4698 position: absolute;
4699 top: 0;
4700 right: 0;
4701 left: 0;
4702 bottom: 0;
4703 content: "";
4704 z-index: 100;
4705 }
4706
4707 .edit-site-layout__canvas {
4708 position: absolute;
4709 top: 0;
4710 right: 0;
4711 bottom: 0;
4712 width: 100%;
4713 display: flex;
4714 justify-content: center;
4715 align-items: center;
4716 }
4717 .edit-site-layout__canvas.is-right-aligned {
4718 justify-content: flex-end;
4719 }
4720 .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4721 color: #1e1e1e;
4722 }
4723 @media (min-width: 782px) {
4724 .edit-site-layout__canvas {
4725 top: 16px;
4726 bottom: 16px;
4727 width: calc(100% - 16px);
4728 }
4729 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4730 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);
4731 overflow: hidden;
4732 }
4733 }
4734 @media (min-width: 782px) and (not (prefers-reduced-motion)) {
4735 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4736 transition: border-radius, box-shadow 0.4s;
4737 }
4738 }
4739 @media (min-width: 782px) {
4740 .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4741 border-radius: 8px;
4742 }
4743 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4744 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);
4745 }
4746 }
4747 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4748 top: 0;
4749 bottom: 0;
4750 width: 100%;
4751 }
4752
4753 .edit-site-layout__mobile .interface-interface-skeleton,
4754 .edit-site-layout__canvas .interface-interface-skeleton,
4755 .edit-site-template-pages-preview .interface-interface-skeleton {
4756 position: relative !important;
4757 min-height: 100% !important;
4758 }
4759
4760 .edit-site-template-pages-preview {
4761 height: 100%;
4762 }
4763
4764 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4765 html.canvas-mode-edit-transition::view-transition-group(toggle) {
4766 animation-delay: 255ms;
4767 }
4768
4769 @media (prefers-reduced-motion) {
4770 ::view-transition-group(*),
4771 ::view-transition-old(*),
4772 ::view-transition-new(*) {
4773 animation: none !important;
4774 }
4775 }
4776 /* stylelint-enable */
4777 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4778 display: none;
4779 }
4780
4781 .edit-site-layout__view-mode-toggle.components-button {
4782 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4783 view-transition-name: toggle;
4784 /* stylelint-enable */
4785 position: relative;
4786 color: #fff;
4787 height: 64px;
4788 width: 64px;
4789 overflow: hidden;
4790 padding: 0;
4791 display: flex;
4792 align-items: center;
4793 justify-content: center;
4794 background: #1e1e1e;
4795 border-radius: 0;
4796 }
4797 .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4798 color: #fff;
4799 }
4800 .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4801 box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4802 outline: 4px solid rgba(0, 0, 0, 0);
4803 outline-offset: 4px;
4804 }
4805 .edit-site-layout__view-mode-toggle.components-button::before {
4806 content: "";
4807 display: block;
4808 position: absolute;
4809 top: 9px;
4810 left: 9px;
4811 bottom: 9px;
4812 right: 17px;
4813 border-radius: 4px;
4814 box-shadow: none;
4815 }
4816 @media not (prefers-reduced-motion) {
4817 .edit-site-layout__view-mode-toggle.components-button::before {
4818 transition: box-shadow 0.1s ease;
4819 }
4820 }
4821 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4822 display: flex;
4823 height: 64px;
4824 width: 64px;
4825 justify-content: center;
4826 align-items: center;
4827 }
4828
4829 .edit-site-layout__actions {
4830 z-index: 100000;
4831 position: fixed !important;
4832 top: -9999em;
4833 bottom: auto;
4834 right: auto;
4835 left: 0;
4836 width: 280px;
4837 color: #1e1e1e;
4838 background: #fff;
4839 }
4840 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4841 top: auto;
4842 bottom: 0;
4843 }
4844 .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4845 top: 0;
4846 }
4847 @media (min-width: 782px) {
4848 .edit-site-layout__actions {
4849 border-right: 1px solid #ddd;
4850 }
4851 }
4852
4853 .edit-site-layout__area {
4854 flex-grow: 1;
4855 margin: 0;
4856 overflow: hidden;
4857 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);
4858 }
4859 @media (min-width: 782px) {
4860 .edit-site-layout__area {
4861 border-radius: 8px;
4862 margin: 16px 0 16px 16px;
4863 }
4864 }
4865
4866 .edit-site-layout__snackbar {
4867 position: fixed;
4868 bottom: 24px;
4869 right: 0;
4870 left: 0;
4871 padding-inline: 16px;
4872 box-sizing: border-box;
4873 display: flex;
4874 flex-direction: column;
4875 pointer-events: none;
4876 }
4877 .edit-site-layout__snackbar .components-snackbar {
4878 margin-inline: auto;
4879 }
4880
4881 .edit-site-save-hub {
4882 color: #949494;
4883 border-top: 1px solid #2f2f2f;
4884 flex-shrink: 0;
4885 margin: 0;
4886 padding: 16px 16px;
4887 }
4888
4889 .edit-site-save-hub__button {
4890 color: inherit;
4891 width: 100%;
4892 justify-content: center;
4893 }
4894 .edit-site-save-hub__button[aria-disabled=true] {
4895 opacity: 1;
4896 }
4897 .edit-site-save-hub__button[aria-disabled=true]:hover {
4898 color: inherit;
4899 }
4900 .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4901 color: #1e1e1e;
4902 }
4903
4904 @media (min-width: 600px) {
4905 .edit-site-save-panel__modal {
4906 width: 600px;
4907 }
4908 }
4909
4910 .edit-site-sidebar__content {
4911 flex-grow: 1;
4912 overflow-y: auto;
4913 overflow-x: hidden;
4914 contain: content;
4915 }
4916
4917 @keyframes local--slide-from-right {
4918 from {
4919 transform: translateX(-50px);
4920 opacity: 0;
4921 }
4922 to {
4923 transform: none;
4924 opacity: 1;
4925 }
4926 }
4927 @keyframes local--slide-from-left {
4928 from {
4929 transform: translateX(50px);
4930 opacity: 0;
4931 }
4932 to {
4933 transform: none;
4934 opacity: 1;
4935 }
4936 }
4937 .edit-site-sidebar__screen-wrapper {
4938 overflow-x: auto;
4939 }
4940 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
4941 width: 12px;
4942 height: 12px;
4943 }
4944 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
4945 background-color: transparent;
4946 }
4947 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
4948 background-color: transparent;
4949 border-radius: 8px;
4950 border: 3px solid transparent;
4951 background-clip: padding-box;
4952 }
4953 .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 {
4954 background-color: #757575;
4955 }
4956 .edit-site-sidebar__screen-wrapper {
4957 scrollbar-width: thin;
4958 scrollbar-gutter: stable both-edges;
4959 scrollbar-color: transparent transparent;
4960 }
4961 .edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
4962 scrollbar-color: #757575 transparent;
4963 }
4964 .edit-site-sidebar__screen-wrapper {
4965 will-change: transform;
4966 }
4967 @media (hover: none) {
4968 .edit-site-sidebar__screen-wrapper {
4969 scrollbar-color: #757575 transparent;
4970 }
4971 }
4972 .edit-site-sidebar__screen-wrapper {
4973 scrollbar-gutter: stable;
4974 display: flex;
4975 flex-direction: column;
4976 height: 100%;
4977 max-height: 100%;
4978 padding: 0 12px;
4979 animation-duration: 0.14s;
4980 animation-timing-function: ease-in-out;
4981 will-change: transform, opacity;
4982 }
4983 @media (prefers-reduced-motion: reduce) {
4984 .edit-site-sidebar__screen-wrapper {
4985 animation-duration: 0s;
4986 }
4987 }
4988 .edit-site-sidebar__screen-wrapper.slide-from-left {
4989 animation-name: local--slide-from-left;
4990 }
4991 .edit-site-sidebar__screen-wrapper.slide-from-right {
4992 animation-name: local--slide-from-right;
4993 }
4994
4995 .edit-site-sidebar-button {
4996 color: #e0e0e0;
4997 flex-shrink: 0;
4998 }
4999 .edit-site-sidebar-button:focus:not(:disabled) {
5000 box-shadow: none;
5001 outline: none;
5002 }
5003 .edit-site-sidebar-button:focus-visible:not(:disabled) {
5004 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5005 outline: 3px solid transparent;
5006 }
5007 .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] {
5008 color: #f0f0f0;
5009 }
5010
5011 .edit-site-sidebar-navigation-item.components-item {
5012 color: #949494;
5013 padding: 8px 16px 8px 6px;
5014 border: none;
5015 min-height: 40px;
5016 }
5017 .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] {
5018 color: #e0e0e0;
5019 }
5020 .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 {
5021 fill: #e0e0e0;
5022 }
5023 .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5024 background: #2f2f2f;
5025 color: #fff;
5026 font-weight: 499;
5027 }
5028 .edit-site-sidebar-navigation-item.components-item:focus-visible {
5029 transform: translateZ(0);
5030 }
5031 .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5032 fill: #949494;
5033 }
5034 .edit-site-sidebar-navigation-item.components-item.with-suffix {
5035 padding-left: 16px;
5036 }
5037
5038 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
5039 cursor: grab;
5040 padding: 8px 0 8px 8px;
5041 }
5042
5043 .edit-site-sidebar-navigation-screen {
5044 display: flex;
5045 flex-direction: column;
5046 overflow-x: unset !important;
5047 position: relative;
5048 }
5049
5050 .edit-site-sidebar-navigation-screen__main {
5051 flex-grow: 1;
5052 margin-bottom: 16px;
5053 }
5054 .edit-site-sidebar-navigation-screen__main.has-footer {
5055 margin-bottom: 0;
5056 }
5057
5058 .edit-site-sidebar-navigation-screen__content {
5059 padding: 0 16px;
5060 }
5061 .edit-site-sidebar-navigation-screen__content .components-text {
5062 color: #ccc;
5063 }
5064 .edit-site-sidebar-navigation-screen__content .components-heading {
5065 margin-bottom: 8px;
5066 }
5067
5068 .edit-site-sidebar-navigation-screen__title-icon {
5069 position: sticky;
5070 top: 0;
5071 background: #1e1e1e;
5072 padding-top: 48px;
5073 margin-bottom: 8px;
5074 padding-bottom: 8px;
5075 z-index: 1;
5076 }
5077
5078 .edit-site-sidebar-navigation-screen__title {
5079 flex-grow: 1;
5080 overflow-wrap: break-word;
5081 }
5082 .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 {
5083 line-height: 32px;
5084 }
5085
5086 .edit-site-sidebar-navigation-screen__actions {
5087 display: flex;
5088 flex-shrink: 0;
5089 }
5090
5091 @media (min-width: 782px) {
5092 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
5093 max-width: 292px;
5094 }
5095 }
5096
5097 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
5098 outline-color: rgba(255, 255, 255, 0.05);
5099 }
5100 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
5101 outline-color: rgba(255, 255, 255, 0.15);
5102 }
5103 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
5104 outline-color: #fff;
5105 }
5106 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
5107 outline-color: var(--wp-admin-theme-color);
5108 }
5109
5110 .edit-site-sidebar-navigation-screen__footer {
5111 position: sticky;
5112 bottom: 0;
5113 background-color: #1e1e1e;
5114 gap: 0;
5115 padding: 8px 16px;
5116 margin: 16px 0 0;
5117 border-top: 1px solid #2f2f2f;
5118 }
5119 .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5120 margin-right: -16px;
5121 margin-left: -16px;
5122 }
5123
5124 /* In general style overrides are discouraged.
5125 * This is a temporary solution to override the InputControl component's styles.
5126 * The `Theme` component will potentially be the more appropriate approach
5127 * once that component is stabilized.
5128 * See: packages/components/src/theme
5129 */
5130 .edit-site-sidebar-navigation-screen__input-control {
5131 width: 100%;
5132 }
5133 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5134 background: #2f2f2f;
5135 }
5136 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5137 color: #e0e0e0 !important;
5138 }
5139 .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5140 color: #e0e0e0 !important;
5141 background: #2f2f2f !important;
5142 }
5143 .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5144 border: 4px !important;
5145 }
5146 .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5147 color: #949494;
5148 }
5149
5150 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5151 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5152 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5153 background: none;
5154 }
5155
5156 .sidebar-navigation__more-menu .components-button {
5157 color: #e0e0e0;
5158 }
5159 .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5160 color: #f0f0f0;
5161 }
5162
5163 .edit-site-sidebar-navigation-screen-patterns__group {
5164 margin-bottom: 24px;
5165 margin-right: -16px;
5166 margin-left: -16px;
5167 }
5168 .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5169 border-bottom: 0;
5170 padding-bottom: 0;
5171 margin-bottom: 0;
5172 }
5173
5174 .edit-site-sidebar-navigation-screen-patterns__group-header {
5175 margin-top: 16px;
5176 }
5177 .edit-site-sidebar-navigation-screen-patterns__group-header p {
5178 color: #949494;
5179 }
5180 .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5181 font-size: 11px;
5182 font-weight: 499;
5183 text-transform: uppercase;
5184 }
5185
5186 .edit-site-sidebar-navigation-screen-patterns__divider {
5187 border-top: 1px solid #2f2f2f;
5188 margin: 16px 0;
5189 }
5190
5191 .edit-site-sidebar-navigation-screen__description {
5192 margin: 0 0 32px 0;
5193 }
5194
5195 .edit-site-sidebar-navigation-screen-navigation-menus {
5196 margin-right: -16px;
5197 margin-left: -16px;
5198 }
5199
5200 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5201 white-space: normal;
5202 }
5203 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5204 margin-top: 3px;
5205 }
5206 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5207 padding-left: 0;
5208 }
5209 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5210 color: #949494;
5211 }
5212 .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] {
5213 color: #fff;
5214 }
5215 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5216 color: #949494;
5217 }
5218 .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 {
5219 color: #fff;
5220 }
5221
5222 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5223 margin-right: auto;
5224 margin-left: auto;
5225 display: block;
5226 }
5227
5228 .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5229 display: none;
5230 }
5231
5232 .edit-site-sidebar-navigation-screen-main {
5233 margin-right: -16px;
5234 margin-left: -16px;
5235 }
5236
5237 .edit-site-sidebar-navigation-screen-templates-browse {
5238 margin-right: -16px;
5239 margin-left: -16px;
5240 }
5241
5242 .edit-site-sidebar-dataviews {
5243 margin-right: -16px;
5244 margin-left: -16px;
5245 }
5246
5247 .edit-site-site-hub {
5248 display: flex;
5249 align-items: center;
5250 justify-content: space-between;
5251 gap: 8px;
5252 margin-left: 12px;
5253 height: 64px;
5254 }
5255
5256 .edit-site-site-hub__actions {
5257 flex-shrink: 0;
5258 }
5259
5260 .edit-site-site-hub__view-mode-toggle-container {
5261 height: 64px;
5262 width: 64px;
5263 flex-shrink: 0;
5264 }
5265 .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5266 background: transparent;
5267 }
5268
5269 .edit-site-site-hub__title .components-button {
5270 color: #e0e0e0;
5271 display: block;
5272 flex-grow: 1;
5273 font-size: 15px;
5274 font-weight: 499;
5275 overflow: hidden;
5276 padding-left: 16px;
5277 margin-right: -4px;
5278 position: relative;
5279 text-decoration: none;
5280 text-overflow: ellipsis;
5281 white-space: nowrap;
5282 }
5283 .edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5284 color: #e0e0e0;
5285 }
5286 .edit-site-site-hub__title .components-button:focus {
5287 box-shadow: none;
5288 outline: none;
5289 }
5290 .edit-site-site-hub__title .components-button:focus-visible {
5291 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);
5292 outline: 2px solid transparent;
5293 outline-offset: 2px;
5294 }
5295 .edit-site-site-hub__title .components-button::after {
5296 content: "↗";
5297 font-weight: 400;
5298 opacity: 0;
5299 position: absolute;
5300 left: 0;
5301 }
5302 @media not (prefers-reduced-motion) {
5303 .edit-site-site-hub__title .components-button::after {
5304 transition: opacity 0.1s linear;
5305 }
5306 }
5307 .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 {
5308 opacity: 1;
5309 }
5310
5311 .edit-site-site-hub_toggle-command-center {
5312 color: #e0e0e0;
5313 }
5314 .edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5315 fill: #f0f0f0;
5316 }
5317
5318 .edit-site-site-icon__icon {
5319 fill: currentColor;
5320 width: 100%;
5321 height: 100%;
5322 }
5323 .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5324 padding: 12px;
5325 }
5326
5327 .edit-site-site-icon__image {
5328 width: 100%;
5329 height: 100%;
5330 object-fit: cover;
5331 background: #333;
5332 aspect-ratio: 1/1;
5333 }
5334 .edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5335 border-radius: 0;
5336 }
5337
5338 .edit-site-editor__view-mode-toggle button:focus {
5339 position: relative;
5340 }
5341 .edit-site-editor__view-mode-toggle button:focus::before {
5342 content: "";
5343 display: block;
5344 position: absolute;
5345 z-index: 1;
5346 top: 0;
5347 left: 0;
5348 bottom: 0;
5349 right: 0;
5350 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;
5351 }
5352
5353 .edit-site-post-list__featured-image {
5354 height: 100%;
5355 object-fit: cover;
5356 width: 100%;
5357 }
5358
5359 .edit-site-post-list__featured-image-wrapper {
5360 height: 100%;
5361 width: 100%;
5362 border-radius: 4px;
5363 }
5364 .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 {
5365 width: 32px;
5366 height: 32px;
5367 display: block;
5368 border-radius: 4px;
5369 position: relative;
5370 overflow: hidden;
5371 background-color: #f0f0f0;
5372 flex-grow: 0 !important;
5373 }
5374 .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 {
5375 border-radius: 4px;
5376 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
5377 content: "";
5378 height: 100%;
5379 right: 0;
5380 position: absolute;
5381 top: 0;
5382 width: 100%;
5383 }
5384
5385 .edit-site-post-list__featured-image-button {
5386 box-shadow: none;
5387 border: none;
5388 padding: 0;
5389 background-color: unset;
5390 box-sizing: border-box;
5391 cursor: pointer;
5392 overflow: hidden;
5393 height: 100%;
5394 width: 100%;
5395 border-radius: 4px;
5396 }
5397 .edit-site-post-list__featured-image-button:focus-visible {
5398 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5399 outline: 2px solid transparent;
5400 }
5401
5402 .dataviews-view-grid__card.is-selected .edit-site-post-list__featured-image-button::after {
5403 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5404 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
5405 }
5406
5407 .fields-controls__password {
5408 border-top: 1px solid #e0e0e0;
5409 padding-top: 16px;
5410 }
5411
5412 .dataviews-action-modal__quick-edit {
5413 justify-content: flex-end;
5414 align-items: stretch;
5415 }
5416 .dataviews-action-modal__quick-edit .components-modal__frame {
5417 margin: 16px 0 16px 16px;
5418 height: calc(100% - 32px);
5419 max-height: calc(100% - 32px);
5420 max-width: 400px;
5421 border-radius: 8px;
5422 position: relative;
5423 animation-name: none;
5424 }
5425 @media (prefers-reduced-motion: no-preference) {
5426 .dataviews-action-modal__quick-edit .components-modal__frame {
5427 animation-name: quick-edit-slide-in-right;
5428 animation-duration: 0.2s;
5429 animation-timing-function: ease-out;
5430 }
5431 }
5432 .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5433 animation-name: none;
5434 }
5435 @media (prefers-reduced-motion: no-preference) {
5436 .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5437 animation-name: quick-edit-slide-out-right;
5438 animation-duration: 0.2s;
5439 animation-timing-function: ease-out;
5440 }
5441 }
5442 .dataviews-action-modal__quick-edit .components-modal__content {
5443 display: flex;
5444 flex-direction: column;
5445 overflow: hidden;
5446 padding: 0;
5447 }
5448 .dataviews-action-modal__quick-edit .components-modal__content > * {
5449 display: flex;
5450 flex-direction: column;
5451 flex: 1;
5452 min-height: 0;
5453 }
5454 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5455 padding: 24px 24px 0;
5456 }
5457 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5458 flex: 1;
5459 min-height: 0;
5460 overflow-y: auto;
5461 padding-top: 16px;
5462 }
5463 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5464 flex: 1;
5465 padding: 0 24px 4px;
5466 }
5467 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5468 position: sticky;
5469 bottom: 0;
5470 flex-shrink: 0;
5471 padding: 16px 24px 24px;
5472 }
5473 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5474 flex: 1;
5475 justify-content: center;
5476 }
5477
5478 @keyframes quick-edit-slide-in-right {
5479 from {
5480 transform: translateX(-100%);
5481 }
5482 to {
5483 transform: translateX(0);
5484 }
5485 }
5486 @keyframes quick-edit-slide-out-right {
5487 from {
5488 transform: translateX(0);
5489 }
5490 to {
5491 transform: translateX(-100%);
5492 }
5493 }
5494 .edit-site-resizable-frame__inner {
5495 position: relative;
5496 }
5497 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5498 cursor: col-resize;
5499 -webkit-user-select: none;
5500 user-select: none;
5501 }
5502
5503 .edit-site-resizable-frame__inner.is-resizing::before {
5504 position: absolute;
5505 z-index: 1;
5506 inset: 0;
5507 content: "";
5508 }
5509
5510 .edit-site-resizable-frame__inner-content {
5511 position: absolute;
5512 z-index: 0;
5513 inset: 0;
5514 }
5515
5516 .edit-site-resizable-frame__handle {
5517 align-items: center;
5518 background-color: rgba(117, 117, 117, 0.4);
5519 border: 0;
5520 border-radius: 4px;
5521 cursor: col-resize;
5522 display: flex;
5523 height: 64px;
5524 justify-content: flex-end;
5525 padding: 0;
5526 position: absolute;
5527 top: calc(50% - 32px);
5528 width: 4px;
5529 z-index: 100;
5530 }
5531 .edit-site-resizable-frame__handle::before {
5532 content: "";
5533 height: 100%;
5534 right: 100%;
5535 position: absolute;
5536 width: 32px;
5537 }
5538 .edit-site-resizable-frame__handle::after {
5539 content: "";
5540 height: 100%;
5541 position: absolute;
5542 left: 100%;
5543 width: 32px;
5544 }
5545 .edit-site-resizable-frame__handle:focus-visible {
5546 outline: 2px solid transparent;
5547 }
5548 .edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5549 background-color: var(--wp-admin-theme-color);
5550 }
5551
5552 .edit-site-pagination .components-button.is-tertiary {
5553 width: 32px;
5554 height: 32px;
5555 justify-content: center;
5556 }
5557
5558 .edit-site-styles .global-styles-ui-screen-root {
5559 box-shadow: none;
5560 }
5561 .edit-site-styles .global-styles-ui-screen-root > div > hr {
5562 display: none;
5563 }
5564 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5565 border-top: none;
5566 }
5567 .edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5568 overflow-y: auto;
5569 padding-right: 0;
5570 padding-left: 0;
5571 }
5572 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5573 padding-top: 12px;
5574 padding-right: 12px;
5575 padding-left: 12px;
5576 padding-bottom: 12px;
5577 outline: none;
5578 }
5579 .edit-site-styles .edit-site-sidebar-button {
5580 color: #1e1e1e;
5581 }
5582
5583 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5584 ::view-transition-image-pair(root) {
5585 isolation: auto;
5586 }
5587
5588 ::view-transition-old(root),
5589 ::view-transition-new(root) {
5590 animation: none;
5591 mix-blend-mode: normal;
5592 display: block;
5593 }
5594
5595 /* stylelint-enable */
5596 body.js #wpadminbar {
5597 display: none;
5598 }
5599
5600 body.js #wpbody {
5601 padding-top: 0;
5602 }
5603
5604 body.js.appearance_page_gutenberg-template-parts,
5605 body.js.site-editor-php {
5606 background: #fff;
5607 }
5608 body.js.appearance_page_gutenberg-template-parts #wpcontent,
5609 body.js.site-editor-php #wpcontent {
5610 padding-right: 0;
5611 }
5612 body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5613 body.js.site-editor-php #wpbody-content {
5614 padding-bottom: 0;
5615 }
5616 body.js.appearance_page_gutenberg-template-parts,
5617 body.js.site-editor-php {
5618 /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5619 Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5620 }
5621 body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5622 body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5623 display: none;
5624 }
5625 body.js.appearance_page_gutenberg-template-parts #wpfooter,
5626 body.js.site-editor-php #wpfooter {
5627 display: none;
5628 }
5629 body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5630 body.js.site-editor-php .a11y-speak-region {
5631 right: -1px;
5632 top: -1px;
5633 }
5634 body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5635 body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5636 body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5637 body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5638 border-left-color: #fff;
5639 }
5640 body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5641 body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5642 width: auto;
5643 max-width: 100%;
5644 }
5645
5646 body.js.site-editor-php {
5647 background: #1e1e1e;
5648 }
5649
5650 .edit-site {
5651 box-sizing: border-box;
5652 }
5653 .edit-site *,
5654 .edit-site *::before,
5655 .edit-site *::after {
5656 box-sizing: inherit;
5657 }
5658 .edit-site {
5659 height: 100vh;
5660 }
5661 @media (min-width: 600px) {
5662 .edit-site {
5663 bottom: 0;
5664 right: 0;
5665 min-height: 100vh;
5666 position: fixed;
5667 left: 0;
5668 top: 0;
5669 }
5670 }
5671 .no-js .edit-site {
5672 min-height: 0;
5673 position: static;
5674 }
5675 .edit-site .interface-interface-skeleton {
5676 top: 0;
5677 }