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

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

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