PluginProbe
Gutenberg / 23.4.0
Gutenberg v23.4.0
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.4.0, at build/styles/edit-site/style.css

5,821 lines 177.0 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: calc(var(--wpds-dimension-base, 4px) * 16);
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-bg-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-fg-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-fg-interactive-neutral, #1e1e1e);
292 }
293
294 .dataviews-title-field a:hover {
295 color: var(--wpds-color-fg-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-fg-interactive-neutral-active, #1e1e1e);
313 }
314
315 .dataviews-title-field button.components-button.is-link:hover {
316 color: var(--wpds-color-fg-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-fg-interactive-neutral, #1e1e1e);
322 }
323
324 .dataviews-title-field--clickable:hover {
325 color: var(--wpds-color-fg-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-fg-content-neutral, #1e1e1e);
352 }
353
354 .dataviews-bulk-actions-footer__container {
355 margin-right: auto;
356 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
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-fg-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: calc(var(--wpds-dimension-base, 4px) * 8);
438 color: var(--wpds-color-fg-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(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-fg-interactive-neutral, #1e1e1e);
455 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
456 background-color: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
457 }
458
459 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
460 color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
461 background: var(--wpds-color-bg-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-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
467 background: var(--wpds-color-bg-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-brand, 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: 24px;
482 height: 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-fg-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-bg-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-fg-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-fg-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-bg-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-brand, var(--wp-admin-theme-color, #3858e9));
520 }
521
522 .dataviews-filters__search-widget-filter-combobox-list {
523 max-height: calc(var(--wpds-dimension-base, 4px) * 46);
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: calc(var(--wpds-dimension-base, 4px) * 8);
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-bg-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-bg-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-bg-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-bg-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-bg-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-fg-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-bg-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-fg-interactive-brand-strong, #fff);
673 border: 4px solid var(--wpds-color-fg-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-bg-interactive-neutral-weak, rgba(0, 0, 0, 0));
780 color: var(--wpds-color-fg-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-bg-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-fg-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 calc(var(--wpds-dimension-base, 4px) * 8);
864 width: 100%;
865 height: calc(var(--wpds-dimension-base, 4px) * 8);
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-bg-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-brand, 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-fg-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-fg-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: 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-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
920 height: calc(var(--wpds-dimension-base, 4px) * 4);
921 min-width: calc(var(--wpds-dimension-base, 4px) * 4);
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-bg-surface-neutral-strong, #fff);
928 color: var(--wpds-color-fg-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-bg-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-brand, 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: calc(var(--wpds-dimension-base, 4px) * 6);
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-fg-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-bg-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-brand, 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-bg-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-bg-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: calc(var(--wpds-dimension-base, 4px) * 6);
1296 line-height: var(--wpds-typography-line-height-sm, 20px);
1297 padding-top: calc(var(--wpds-dimension-base, 4px) / 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: calc(var(--wpds-dimension-base, 4px) * 6);
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-fg-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-bg-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-fg-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: 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-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1499 background-color: var(--wpds-color-bg-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-fg-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-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1520 color: var(--wpds-color-fg-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-fg-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-brand, 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: calc(var(--wpds-dimension-base, 4px) * 6);
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: calc(var(--wpds-dimension-base, 4px) * 13);
1574 height: calc(var(--wpds-dimension-base, 4px) * 13);
1575 overflow: hidden;
1576 position: relative;
1577 flex-shrink: 0;
1578 background-color: var(--wpds-color-bg-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: calc(var(--wpds-dimension-base, 4px) * 13);
1602 flex-grow: 1;
1603 min-width: 0;
1604 }
1605
1606 .dataviews-view-list .dataviews-view-list__field {
1607 color: var(--wpds-color-fg-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: calc(var(--wpds-dimension-base, 4px) * 6);
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: calc(var(--wpds-dimension-base, 4px) * 4);
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: calc(var(--wpds-dimension-base, 4px) * 8);
1648 height: calc(var(--wpds-dimension-base, 4px) * 8);
1649 }
1650
1651 .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
1652 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
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: calc(var(--wpds-dimension-base, 4px) * 4);
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: calc(var(--wpds-dimension-base, 4px) * 8);
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: calc(var(--wpds-dimension-base, 4px) * 16);
1676 height: calc(var(--wpds-dimension-base, 4px) * 16);
1677 }
1678
1679 .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper {
1680 min-height: calc(var(--wpds-dimension-base, 4px) * 16);
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: calc(var(--wpds-dimension-base, 4px) * 8);
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-fg-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-fg-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-fg-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-bg-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-bg-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-bg-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1800 color: var(--wpds-color-fg-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-bg-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-bg-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-bg-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: calc(var(--wpds-dimension-base, 4px) * 8);
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-fg-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: calc(var(--wpds-dimension-base, 4px) * 8);
1959 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
1960 overflow: hidden;
1961 position: relative;
1962 flex-shrink: 0;
1963 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
1964 border-radius: var(--wpds-border-radius-md, 4px);
1965 }
1966
1967 .dataviews-column-primary__media img {
1968 width: calc(var(--wpds-dimension-base, 4px) * 8);
1969 height: calc(var(--wpds-dimension-base, 4px) * 8);
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-fg-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: calc(var(--wpds-dimension-base, 4px) * 6);
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-fg-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-bg-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-brand, 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-brand, 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-bg-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: calc(var(--wpds-dimension-base, 4px) * 6);
2112 line-height: var(--wpds-typography-line-height-sm, 20px);
2113 padding-top: calc(var(--wpds-dimension-base, 4px) / 2);
2114 }
2115
2116 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2117 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
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-fg-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-fg-content-neutral, #1e1e1e);
2175 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2176 padding: 0 calc(var(--wpds-dimension-base, 4px) * 12);
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: calc(var(--wpds-dimension-base, 4px) * 12);
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-brand, 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-bg-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-bg-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-bg-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-fg-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: calc(var(--wpds-dimension-base, 4px) * 6);
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: calc(var(--wpds-dimension-base, 4px) * 4);
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-brand, 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-fg-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: calc(var(--wpds-dimension-base, 4px) * 3);
2321 }
2322
2323 .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
2324 width: calc(var(--wpds-dimension-base, 4px) * 3 - 1px);
2325 height: calc(var(--wpds-dimension-base, 4px) * 3 - 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: calc(var(--wpds-dimension-base, 4px) * 6);
2334 }
2335
2336 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2337 height: calc(var(--wpds-dimension-base, 4px) * 3);
2338 }
2339
2340 .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
2341 width: calc(var(--wpds-dimension-base, 4px) * 6 + 1px);
2342 height: calc(var(--wpds-dimension-base, 4px) * 6 + 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: calc(var(--wpds-dimension-base, 4px) * 8);
2352 }
2353
2354 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2355 height: calc(var(--wpds-dimension-base, 4px) * 2);
2356 }
2357
2358 .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
2359 width: calc(var(--wpds-dimension-base, 4px) * 8 + 1px);
2360 height: calc(var(--wpds-dimension-base, 4px) * 8 + 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-base, 4px) * 2 + 1px);
2370 height: calc(var(--wpds-dimension-base, 4px) * 2 + 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-bg-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-brand, 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-bg-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: calc(var(--wpds-dimension-base, 4px) * 3);
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-base, 4px) * 3 - 1px);
2469 height: calc(var(--wpds-dimension-base, 4px) * 3 - 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: calc(var(--wpds-dimension-base, 4px) * 6);
2478 }
2479
2480 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
2481 height: calc(var(--wpds-dimension-base, 4px) * 3);
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-base, 4px) * 6 + 1px);
2486 height: calc(var(--wpds-dimension-base, 4px) * 6 + 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: calc(var(--wpds-dimension-base, 4px) * 8);
2496 }
2497
2498 .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
2499 height: calc(var(--wpds-dimension-base, 4px) * 2);
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-base, 4px) * 8 + 1px);
2504 height: calc(var(--wpds-dimension-base, 4px) * 8 + 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-base, 4px) * 2 + 1px);
2514 height: calc(var(--wpds-dimension-base, 4px) * 2 + 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: calc(var(--wpds-dimension-base, 4px) * 4);
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-fg-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-fg-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: calc(var(--wpds-dimension-base, 4px) * 8);
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-bg-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: calc(var(--wpds-dimension-base, 4px) * 6);
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-md, 12px);
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-fg-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-fg-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-fg-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-fg-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-fg-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-brand, 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: calc(var(--wpds-dimension-base, 4px) * 6);
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-fg-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-fg-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 fill: var(--wpds-color-fg-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-label-error-content svg {
2780 fill: currentColor;
2781 }
2782
2783 .dataforms-layouts-panel__field-control {
2784 flex-grow: 1;
2785 min-width: 0;
2786 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2787 line-height: var(--wpds-typography-line-height-md, 24px);
2788 display: flex;
2789 align-items: center;
2790 overflow: hidden;
2791 word-break: break-word;
2792 font-weight: var(--wpds-typography-font-weight-medium, 499);
2793 }
2794
2795 .dataforms-layouts-panel__field-control > * {
2796 min-width: 0;
2797 }
2798
2799 .dataforms-layouts-panel__field-control .components-button {
2800 max-width: 100%;
2801 text-align: left;
2802 white-space: normal;
2803 text-wrap: balance;
2804 text-wrap: pretty;
2805 min-height: 32px;
2806 }
2807
2808 .dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
2809 text-decoration: none;
2810 }
2811
2812 .dataforms-layouts-panel__field-control .components-dropdown {
2813 max-width: 100%;
2814 }
2815
2816 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2817 width: 100%;
2818 }
2819
2820 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control {
2821 grid-column: 1/-1;
2822 }
2823
2824 .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon {
2825 grid-row: 1;
2826 grid-column: 2;
2827 }
2828
2829 .dataforms-layouts-panel__field-dropdown .components-popover__content {
2830 min-width: 320px;
2831 padding: var(--wpds-dimension-padding-lg, 16px);
2832 }
2833
2834 .dataforms-layouts-panel__dropdown-header {
2835 margin-bottom: var(--wpds-dimension-gap-lg, 16px);
2836 }
2837
2838 .dataforms-layouts-panel__modal-footer {
2839 margin-top: var(--wpds-dimension-gap-lg, 16px);
2840 }
2841
2842 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2843 z-index: 159990;
2844 }
2845
2846 .dataforms-layouts-panel__summary-button:empty {
2847 min-width: 160px;
2848 }
2849
2850 .dataforms-layouts-regular__field {
2851 width: 100%;
2852 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2853 justify-content: flex-start !important;
2854 align-items: flex-start !important;
2855 }
2856
2857 .dataforms-layouts-regular__field .components-base-control__label,
2858 .dataforms-layouts-regular__field .components-input-control__label,
2859 .dataforms-layouts-regular__field .components-form-token-field__label {
2860 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
2861 }
2862
2863 .dataforms-layouts-regular__field-label {
2864 width: 38%;
2865 flex-shrink: 0;
2866 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2867 display: flex;
2868 align-items: center;
2869 line-height: var(--wpds-typography-line-height-sm, 20px);
2870 hyphens: auto;
2871 }
2872
2873 .dataforms-layouts-regular__field-label--label-position-side {
2874 align-self: center;
2875 }
2876
2877 .dataforms-layouts-regular__field-label .components-base-control__label {
2878 margin-bottom: 0;
2879 }
2880
2881 .dataforms-layouts-regular__field-control {
2882 flex-grow: 1;
2883 min-height: calc(var(--wpds-dimension-base, 4px) * 8);
2884 display: flex;
2885 align-items: center;
2886 }
2887
2888 .dataforms-layouts-card__field {
2889 width: 100%;
2890 }
2891
2892 .dataforms-layouts-card__field-header-content {
2893 min-height: 24px;
2894 }
2895
2896 .dataforms-layouts-card__field-header-content-description {
2897 display: contents;
2898 }
2899
2900 .dataforms-layouts-card__field-description {
2901 color: var(--wpds-color-fg-content-neutral-weak, #707070);
2902 display: block;
2903 font-size: var(--wpds-typography-font-size-md, 13px);
2904 margin-bottom: var(--wpds-dimension-gap-lg, 16px);
2905 }
2906
2907 .dataforms-layouts-card__field-summary {
2908 display: flex;
2909 flex-direction: row;
2910 gap: var(--wpds-dimension-gap-lg, 16px);
2911 align-items: center;
2912 }
2913
2914 .dataforms-layouts-details__summary-content {
2915 display: inline-flex;
2916 min-height: calc(var(--wpds-dimension-base, 4px) * 6);
2917 }
2918
2919 .dataforms-layouts-details__content {
2920 padding-top: var(--wpds-dimension-padding-md, 12px);
2921 }
2922
2923 .dataforms-layouts-row__field-control {
2924 width: 100%;
2925 }
2926
2927 .dataforms-layouts__wrapper {
2928 font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2929 font-weight: 400;
2930 font-size: 13px;
2931 line-height: 20px;
2932 }
2933
2934 /**
2935 * Typography
2936 */
2937 /**
2938 * SCSS Variables.
2939 *
2940 * Please use variables from this sheet to ensure consistency across the UI.
2941 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
2942 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
2943 */
2944 /**
2945 * Colors
2946 */
2947 /**
2948 * Fonts & basic variables.
2949 */
2950 /**
2951 * Typography
2952 */
2953 /**
2954 * Grid System.
2955 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
2956 */
2957 /**
2958 * Radius scale.
2959 */
2960 /**
2961 * Elevation scale.
2962 */
2963 /**
2964 * Dimensions.
2965 */
2966 /**
2967 * Mobile specific styles
2968 */
2969 /**
2970 * Editor styles.
2971 */
2972 /**
2973 * Block & Editor UI.
2974 */
2975 /**
2976 * Block paddings.
2977 */
2978 /**
2979 * React Native specific.
2980 * These variables do not appear to be used anywhere else.
2981 */
2982 /**
2983 * Breakpoints & Media Queries
2984 */
2985 /**
2986 * Converts a hex value into the rgb equivalent.
2987 *
2988 * @param {string} hex - the hexadecimal value to convert
2989 * @return {string} comma separated rgb values
2990 */
2991 /**
2992 * Long content fade mixin
2993 *
2994 * Creates a fading overlay to signify that the content is longer
2995 * than the space allows.
2996 */
2997 /**
2998 * Breakpoint mixins
2999 */
3000 /**
3001 * Focus styles.
3002 */
3003 /**
3004 * Applies editor left position to the selector passed as argument
3005 */
3006 /**
3007 * Styles that are reused verbatim in a few places
3008 */
3009 /**
3010 * Allows users to opt-out of animations via OS-level preferences.
3011 */
3012 /**
3013 * Reset default styles for JavaScript UI based pages.
3014 * This is a WP-admin agnostic reset
3015 */
3016 /**
3017 * Reset the WP Admin page styles for Gutenberg-like pages.
3018 */
3019 /**
3020 * Creates a checkerboard pattern background to indicate transparency.
3021 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
3022 */
3023 :root {
3024 --wp-block-synced-color: #7a00df;
3025 --wp-block-synced-color--rgb: 122, 0, 223;
3026 --wp-bound-block-color: var(--wp-block-synced-color);
3027 --wp-editor-canvas-background: #ddd;
3028 --wp-admin-theme-color: #007cba;
3029 --wp-admin-theme-color--rgb: 0, 124, 186;
3030 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
3031 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
3032 --wp-admin-theme-color-darker-20: #005a87;
3033 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
3034 --wp-admin-border-width-focus: 2px;
3035 }
3036
3037 @media (min-resolution: 192dpi) {
3038 :root {
3039 --wp-admin-border-width-focus: 1.5px;
3040 }
3041 }
3042 .fields-create-template-part-modal {
3043 z-index: 1000001;
3044 }
3045
3046 .fields-create-template-part-modal__area-fieldset {
3047 border: 0;
3048 padding: 0;
3049 margin: 0;
3050 }
3051
3052 .fields-create-template-part-modal__area-radio-group {
3053 border: 1px solid #949494;
3054 border-radius: 2px;
3055 }
3056
3057 .fields-create-template-part-modal__area-radio-wrapper {
3058 position: relative;
3059 padding: 12px;
3060 display: grid;
3061 align-items: center;
3062 grid-template-columns: min-content 1fr min-content;
3063 grid-gap: 4px 8px;
3064 color: #1e1e1e;
3065 }
3066
3067 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
3068 border-top: 1px solid #949494;
3069 }
3070
3071 .fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
3072 position: absolute;
3073 opacity: 0;
3074 }
3075
3076 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
3077 z-index: 1;
3078 }
3079
3080 .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
3081 color: var(--wp-admin-theme-color);
3082 }
3083
3084 .fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
3085 pointer-events: none;
3086 }
3087
3088 .fields-create-template-part-modal__area-radio-label::before {
3089 content: "";
3090 position: absolute;
3091 inset: 0;
3092 }
3093
3094 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
3095 cursor: var(--wpds-cursor-control, pointer);
3096 }
3097
3098 input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
3099 outline: 4px solid transparent;
3100 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3101 }
3102
3103 .fields-create-template-part-modal__area-radio-icon,
3104 .fields-create-template-part-modal__area-radio-checkmark {
3105 fill: currentColor;
3106 }
3107
3108 input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
3109 opacity: 0;
3110 }
3111
3112 .fields-create-template-part-modal__area-radio-description {
3113 grid-column: 2/3;
3114 margin: 0;
3115 color: #757575;
3116 font-size: 12px;
3117 line-height: normal;
3118 text-wrap: pretty;
3119 }
3120
3121 input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
3122 color: inherit;
3123 }
3124
3125 fieldset.fields__media-edit {
3126 border: 0;
3127 padding: 0;
3128 margin: 0;
3129 width: 100%;
3130 }
3131
3132 fieldset.fields__media-edit .components-base-control__label {
3133 color: #1e1e1e;
3134 }
3135
3136 fieldset.fields__media-edit .fields__media-edit-description {
3137 font-size: 12px;
3138 line-height: 1.5;
3139 }
3140
3141 fieldset.fields__media-edit {
3142 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3143 container-type: inline-size;
3144 }
3145
3146 fieldset.fields__media-edit .fields__media-edit-compact-group {
3147 border: 1px dashed #949494;
3148 border-radius: 4px;
3149 overflow: hidden;
3150 }
3151
3152 fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
3153 border-radius: 2px;
3154 }
3155
3156 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
3157 border: 0;
3158 border-radius: 0;
3159 }
3160
3161 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
3162 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3163 }
3164
3165 fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
3166 border-bottom: 1px solid #f0f0f0;
3167 }
3168
3169 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
3170 display: flex;
3171 align-items: center;
3172 gap: 8px;
3173 }
3174
3175 fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
3176 margin: 0;
3177 }
3178
3179 fieldset.fields__media-edit .fields__media-edit-compact {
3180 position: relative;
3181 min-width: 0;
3182 }
3183
3184 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 {
3185 opacity: 1;
3186 }
3187
3188 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
3189 position: absolute;
3190 right: 8px;
3191 top: 50%;
3192 transform: translateY(-50%);
3193 opacity: 0;
3194 pointer-events: none;
3195 z-index: 1;
3196 border-radius: 2px;
3197 background: #fff;
3198 }
3199
3200 fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
3201 pointer-events: auto;
3202 }
3203
3204 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 {
3205 display: flex;
3206 align-items: center;
3207 gap: 8px;
3208 }
3209
3210 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 {
3211 margin: 0;
3212 }
3213
3214 fieldset.fields__media-edit .fields__media-edit-picker-button {
3215 position: relative;
3216 display: flex;
3217 align-items: center;
3218 gap: 8px;
3219 border: 1px dashed #949494;
3220 border-radius: 2px;
3221 padding: 4px 8px;
3222 min-height: 40px;
3223 cursor: var(--wpds-cursor-control, pointer);
3224 min-width: 0;
3225 }
3226
3227 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
3228 border-color: var(--wp-admin-theme-color);
3229 color: var(--wp-admin-theme-color);
3230 }
3231
3232 fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
3233 background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
3234 color: var(--wp-admin-theme-color-darker-20);
3235 border-color: var(--wp-admin-theme-color-darker-20);
3236 }
3237
3238 fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
3239 color: var(--wp-admin-theme-color);
3240 }
3241
3242 fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
3243 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3244 outline: none;
3245 }
3246
3247 fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] {
3248 opacity: 0.6;
3249 cursor: default;
3250 }
3251
3252 fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner {
3253 position: absolute;
3254 top: 50%;
3255 left: 50%;
3256 transform: translate(-50%, -50%);
3257 z-index: 1;
3258 }
3259
3260 fieldset.fields__media-edit .fields__media-edit-filename,
3261 fieldset.fields__media-edit .fields__media-edit-placeholder {
3262 flex: 1;
3263 width: 100%;
3264 min-width: 0;
3265 }
3266
3267 fieldset.fields__media-edit .fields__media-edit-placeholder {
3268 text-align: center;
3269 }
3270
3271 fieldset.fields__media-edit .fields__media-edit-thumbnail {
3272 width: 24px;
3273 aspect-ratio: 1/1;
3274 flex-shrink: 0;
3275 border-radius: 2px;
3276 }
3277
3278 fieldset.fields__media-edit .fields__media-edit-expanded {
3279 display: grid;
3280 gap: 8px;
3281 }
3282
3283 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
3284 display: flex;
3285 align-items: center;
3286 gap: 8px;
3287 }
3288
3289 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
3290 margin: 0;
3291 }
3292
3293 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview {
3294 position: relative;
3295 width: 100%;
3296 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3297 border-radius: 2px;
3298 padding: 4px;
3299 overflow: hidden;
3300 display: flex;
3301 align-items: center;
3302 justify-content: center;
3303 }
3304
3305 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack {
3306 width: 100%;
3307 height: 100%;
3308 }
3309
3310 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
3311 position: absolute;
3312 top: 0;
3313 left: 0;
3314 right: 0;
3315 bottom: 0;
3316 opacity: 0;
3317 pointer-events: none;
3318 }
3319
3320 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
3321 pointer-events: auto;
3322 }
3323
3324 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
3325 position: absolute;
3326 top: 4px;
3327 right: 4px;
3328 border-radius: 2px;
3329 background: #fff;
3330 }
3331
3332 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
3333 position: relative;
3334 min-width: 0;
3335 border-radius: 4px;
3336 }
3337
3338 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 {
3339 opacity: 1;
3340 }
3341
3342 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack {
3343 padding: 8px;
3344 }
3345
3346 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3347 width: 100%;
3348 height: 100%;
3349 -o-object-fit: cover;
3350 object-fit: cover;
3351 -o-object-position: 50% 50%;
3352 object-position: 50% 50%;
3353 }
3354
3355 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
3356 text-align: center;
3357 flex: none;
3358 }
3359
3360 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg {
3361 margin: 0;
3362 }
3363
3364 fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
3365 grid-template-columns: 1fr;
3366 }
3367
3368 fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
3369 aspect-ratio: 2/1;
3370 }
3371
3372 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
3373 border-radius: 4px;
3374 }
3375
3376 fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
3377 border-radius: 2px;
3378 }
3379
3380 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3381 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3382 /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3383 }
3384
3385 @container (max-width: 500px) {
3386 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3387 grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
3388 }
3389 }
3390 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button {
3391 padding: 0;
3392 }
3393
3394 fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder {
3395 display: flex;
3396 align-items: center;
3397 justify-content: center;
3398 aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3399 }
3400
3401 .fields-controls__author-avatar {
3402 flex-shrink: 0;
3403 overflow: hidden;
3404 width: 24px;
3405 height: 24px;
3406 align-items: center;
3407 justify-content: left;
3408 display: flex;
3409 }
3410
3411 .fields-controls__author-avatar img {
3412 width: 16px;
3413 height: 16px;
3414 -o-object-fit: cover;
3415 object-fit: cover;
3416 opacity: 0;
3417 border-radius: 100%;
3418 }
3419
3420 @media not (prefers-reduced-motion) {
3421 .fields-controls__author-avatar img {
3422 transition: opacity 0.1s linear;
3423 }
3424 }
3425 .fields-controls__author-avatar.is-loaded img {
3426 opacity: 1;
3427 }
3428
3429 .fields-controls__author-icon {
3430 display: flex;
3431 flex-shrink: 0;
3432 width: 24px;
3433 height: 24px;
3434 }
3435
3436 .fields-controls__author-icon svg {
3437 margin-left: -4px;
3438 fill: currentColor;
3439 }
3440
3441 .fields-controls__author-name {
3442 text-overflow: ellipsis;
3443 overflow: hidden;
3444 }
3445
3446 .fields-controls__slug {
3447 border: 0;
3448 padding: 0;
3449 margin: 0;
3450 }
3451
3452 .fields-controls__slug .fields-controls__slug-external-icon {
3453 margin-left: 5ch;
3454 }
3455
3456 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3457 padding-inline-start: 0 !important;
3458 }
3459
3460 .fields-controls__slug .fields-controls__slug-help-link {
3461 word-break: break-word;
3462 }
3463
3464 .fields-controls__slug .fields-controls__slug-help {
3465 display: flex;
3466 flex-direction: column;
3467 }
3468
3469 .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
3470 font-weight: 600;
3471 }
3472
3473 .fields-controls__featured-image-image,
3474 .fields-controls__featured-image-placeholder {
3475 width: 100%;
3476 height: 100%;
3477 display: block;
3478 border-radius: 4px;
3479 }
3480
3481 .fields-controls__featured-image-placeholder {
3482 box-shadow: none;
3483 background: #f0f0f0;
3484 }
3485
3486 .fields-controls__parent {
3487 border: 0;
3488 padding: 0;
3489 margin: 0;
3490 }
3491
3492 .fields-controls__password {
3493 border: 0;
3494 padding: 0;
3495 margin: 0;
3496 }
3497
3498 .fields-controls__status-icon {
3499 height: 24px;
3500 width: 24px;
3501 }
3502
3503 .fields-controls__status-icon svg {
3504 fill: currentColor;
3505 margin-left: -4px;
3506 }
3507
3508 .fields-field__title > span:first-child {
3509 text-overflow: ellipsis;
3510 overflow: hidden;
3511 text-decoration: none;
3512 white-space: nowrap;
3513 display: block;
3514 flex-grow: 0;
3515 }
3516
3517 .fields-field__pattern-title span:first-child {
3518 flex: 1;
3519 }
3520
3521 /**
3522 * SCSS Variables.
3523 *
3524 * Please use variables from this sheet to ensure consistency across the UI.
3525 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
3526 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
3527 */
3528 /**
3529 * Colors
3530 */
3531 /**
3532 * Fonts & basic variables.
3533 */
3534 /**
3535 * Typography
3536 */
3537 /**
3538 * Grid System.
3539 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
3540 */
3541 /**
3542 * Radius scale.
3543 */
3544 /**
3545 * Elevation scale.
3546 */
3547 /**
3548 * Dimensions.
3549 */
3550 /**
3551 * Mobile specific styles
3552 */
3553 /**
3554 * Editor styles.
3555 */
3556 /**
3557 * Block & Editor UI.
3558 */
3559 /**
3560 * Block paddings.
3561 */
3562 /**
3563 * React Native specific.
3564 * These variables do not appear to be used anywhere else.
3565 */
3566 /**
3567 * Typography
3568 */
3569 /**
3570 * Breakpoints & Media Queries
3571 */
3572 /**
3573 * Converts a hex value into the rgb equivalent.
3574 *
3575 * @param {string} hex - the hexadecimal value to convert
3576 * @return {string} comma separated rgb values
3577 */
3578 /**
3579 * Long content fade mixin
3580 *
3581 * Creates a fading overlay to signify that the content is longer
3582 * than the space allows.
3583 */
3584 /**
3585 * Breakpoint mixins
3586 */
3587 /**
3588 * Focus styles.
3589 */
3590 /**
3591 * Applies editor left position to the selector passed as argument
3592 */
3593 /**
3594 * Styles that are reused verbatim in a few places
3595 */
3596 /**
3597 * Allows users to opt-out of animations via OS-level preferences.
3598 */
3599 /**
3600 * Reset default styles for JavaScript UI based pages.
3601 * This is a WP-admin agnostic reset
3602 */
3603 /**
3604 * Reset the WP Admin page styles for Gutenberg-like pages.
3605 */
3606 /**
3607 * Creates a checkerboard pattern background to indicate transparency.
3608 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
3609 */
3610 @media (min-width: 782px) {
3611 .font-library-modal.font-library-modal {
3612 width: 65vw;
3613 }
3614 }
3615 .font-library-modal .components-modal__header {
3616 border-bottom: none;
3617 }
3618
3619 .font-library-modal .components-modal__content {
3620 padding: 0;
3621 margin-bottom: 90px;
3622 }
3623
3624 .font-library-modal .font-library__subtitle {
3625 text-transform: uppercase;
3626 font-weight: 499;
3627 font-size: 11px;
3628 }
3629
3630 .font-library-modal__tab-panel {
3631 height: calc(100% - 50px);
3632 }
3633
3634 .font-library__tabpanel-layout {
3635 height: 100%;
3636 display: flex;
3637 flex-direction: column;
3638 }
3639
3640 .font-library__tabpanel-layout > div {
3641 flex-grow: 1;
3642 }
3643
3644 .font-library__tabpanel-layout .font-library__loading {
3645 width: 100%;
3646 height: 100%;
3647 display: flex;
3648 position: absolute;
3649 left: 0;
3650 top: 0;
3651 align-items: center;
3652 justify-content: center;
3653 padding-top: 124px;
3654 box-sizing: border-box;
3655 }
3656
3657 .font-library__tabpanel-layout .components-navigator-screen {
3658 padding: 24px;
3659 width: 100%;
3660 }
3661
3662 .font-library__footer {
3663 position: absolute;
3664 width: 100%;
3665 bottom: 0;
3666 border-top: 1px solid #ddd;
3667 padding: 24px;
3668 background-color: #fff;
3669 box-sizing: border-box;
3670 flex-grow: 0 !important;
3671 flex-shrink: 0;
3672 height: 90px;
3673 }
3674
3675 .font-library__page-selection {
3676 font-size: 11px;
3677 font-weight: 499;
3678 text-transform: uppercase;
3679 }
3680
3681 @media (min-width: 600px) {
3682 .font-library__page-selection .font-library__page-selection-trigger {
3683 font-size: 11px !important;
3684 font-weight: 499;
3685 }
3686 }
3687 .font-library__fonts-title {
3688 text-transform: uppercase;
3689 font-size: 11px;
3690 font-weight: 600;
3691 margin-top: 0;
3692 margin-bottom: 0;
3693 }
3694
3695 .font-library__fonts-list {
3696 list-style: none;
3697 padding: 0;
3698 margin-top: 0;
3699 margin-bottom: 0;
3700 }
3701
3702 .font-library__fonts-list-item {
3703 margin-bottom: 0;
3704 }
3705
3706 .font-library__font-card {
3707 box-sizing: border-box;
3708 border: 1px solid #ddd;
3709 width: 100%;
3710 height: auto !important;
3711 padding: 16px;
3712 margin-top: -1px; /* To collapse the margin with the previous element */
3713 }
3714
3715 .font-library__font-card:hover {
3716 background-color: #f0f0f0;
3717 }
3718
3719 .font-library__font-card:focus {
3720 position: relative;
3721 }
3722
3723 .font-library__font-card .font-library__font-card__name {
3724 font-weight: bold;
3725 }
3726
3727 .font-library__font-card .font-library__font-card__count {
3728 color: #757575;
3729 }
3730
3731 .font-library__font-card .font-library__font-variant_demo-image {
3732 display: block;
3733 height: 24px;
3734 width: auto;
3735 }
3736
3737 .font-library__font-card .font-library__font-variant_demo-text {
3738 white-space: nowrap;
3739 flex-shrink: 0;
3740 }
3741
3742 @media not (prefers-reduced-motion) {
3743 .font-library__font-card .font-library__font-variant_demo-text {
3744 transition: opacity 0.3s ease-in-out;
3745 }
3746 }
3747 .font-library-modal__tablist-container {
3748 position: sticky;
3749 top: 0;
3750 border-bottom: 1px solid #ddd;
3751 background: #fff;
3752 z-index: 1;
3753 }
3754
3755 .font-library__upload-area {
3756 align-items: center;
3757 display: flex;
3758 justify-content: center;
3759 height: 256px !important;
3760 width: 100%;
3761 }
3762
3763 button.font-library__upload-area {
3764 background-color: #f0f0f0;
3765 }
3766
3767 .font-library__local-fonts {
3768 margin: 24px auto;
3769 width: 80%;
3770 }
3771
3772 .font-library__local-fonts .font-library__upload-area__text {
3773 color: #757575;
3774 }
3775
3776 .font-library__google-fonts-confirm {
3777 display: flex;
3778 justify-content: center;
3779 align-items: center;
3780 margin-top: 64px;
3781 }
3782
3783 .font-library__google-fonts-confirm p {
3784 line-height: 1.4;
3785 }
3786
3787 .font-library__google-fonts-confirm h2 {
3788 font-size: 1.2rem;
3789 font-weight: 400;
3790 }
3791
3792 .font-library__google-fonts-confirm .components-card {
3793 padding: 16px;
3794 width: 400px;
3795 }
3796
3797 .font-library__google-fonts-confirm .components-button {
3798 width: 100%;
3799 justify-content: center;
3800 }
3801
3802 .font-library__select-all {
3803 padding: 16px 16px 16px 17px;
3804 }
3805
3806 .font-library__select-all .components-checkbox-control__label {
3807 padding-left: 16px;
3808 }
3809
3810 .global-styles-ui-pagination .components-button.is-tertiary {
3811 width: 32px;
3812 height: 32px;
3813 justify-content: center;
3814 }
3815
3816 .global-styles-ui-screen-revisions__revisions-list {
3817 list-style: none;
3818 margin: 0 16px 16px 16px;
3819 flex-grow: 1;
3820 }
3821
3822 .global-styles-ui-screen-revisions__revisions-list li {
3823 margin-bottom: 0;
3824 }
3825
3826 .global-styles-ui-screen-revisions__revision-item {
3827 position: relative;
3828 cursor: var(--wpds-cursor-control, pointer);
3829 display: flex;
3830 flex-direction: column;
3831 }
3832
3833 .global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3834 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3835 outline: 2px solid transparent;
3836 }
3837
3838 .global-styles-ui-screen-revisions__revision-item:hover {
3839 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3840 }
3841
3842 .global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3843 color: var(--wp-admin-theme-color);
3844 }
3845
3846 .global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3847 position: absolute;
3848 content: "\a";
3849 display: block;
3850 }
3851
3852 .global-styles-ui-screen-revisions__revision-item::before {
3853 background: #ddd;
3854 border-radius: 50%;
3855 height: 8px;
3856 width: 8px;
3857 top: 18px;
3858 left: 17px;
3859 transform: translate(-50%, -50%);
3860 z-index: 1;
3861 border: 4px solid transparent;
3862 }
3863
3864 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3865 border-radius: 2px;
3866 outline: 3px solid transparent;
3867 outline-offset: -2px;
3868 color: var(--wp-admin-theme-color);
3869 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3870 }
3871
3872 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3873 color: var(--wp-admin-theme-color);
3874 }
3875
3876 .global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3877 background: var(--wp-admin-theme-color);
3878 }
3879
3880 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3881 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta,
3882 .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__applied-text {
3883 color: #1e1e1e;
3884 }
3885
3886 .global-styles-ui-screen-revisions__revision-item::after {
3887 height: 100%;
3888 left: 16px;
3889 top: 0;
3890 width: 0;
3891 border: 0.5px solid #ddd;
3892 }
3893
3894 .global-styles-ui-screen-revisions__revision-item:first-child::after {
3895 top: 18px;
3896 }
3897
3898 .global-styles-ui-screen-revisions__revision-item:last-child::after {
3899 height: 18px;
3900 }
3901
3902 .global-styles-ui-screen-revisions__revision-item-wrapper {
3903 display: block;
3904 padding: 12px 12px 4px 40px;
3905 }
3906
3907 .global-styles-ui-screen-revisions__apply-button.is-primary,
3908 .global-styles-ui-screen-revisions__applied-text {
3909 align-self: flex-start;
3910 margin: 4px 12px 12px 40px;
3911 }
3912
3913 .global-styles-ui-screen-revisions__changes,
3914 .global-styles-ui-screen-revisions__meta,
3915 .global-styles-ui-screen-revisions__applied-text {
3916 color: #757575;
3917 font-size: 12px;
3918 }
3919
3920 .global-styles-ui-screen-revisions__description {
3921 display: flex;
3922 flex-direction: column;
3923 align-items: flex-start;
3924 gap: 8px;
3925 }
3926
3927 .global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3928 text-transform: uppercase;
3929 font-weight: 600;
3930 font-size: 12px;
3931 }
3932
3933 .global-styles-ui-screen-revisions__meta {
3934 display: flex;
3935 justify-content: start;
3936 width: 100%;
3937 align-items: flex-start;
3938 text-align: left;
3939 margin-bottom: 4px;
3940 }
3941
3942 .global-styles-ui-screen-revisions__meta img {
3943 width: 16px;
3944 height: 16px;
3945 border-radius: 100%;
3946 margin-right: 8px;
3947 }
3948
3949 .global-styles-ui-screen-revisions__loading {
3950 margin: 24px auto !important;
3951 }
3952
3953 .global-styles-ui-screen-revisions__changes {
3954 text-align: left;
3955 line-height: 1.4;
3956 margin-left: 12px;
3957 list-style: disc;
3958 }
3959
3960 .global-styles-ui-screen-revisions__changes li {
3961 margin-bottom: 4px;
3962 }
3963
3964 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
3965 justify-content: space-between;
3966 gap: 2px;
3967 }
3968
3969 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
3970 position: absolute;
3971 left: -1000px;
3972 height: 1px;
3973 margin: -1px;
3974 overflow: hidden;
3975 }
3976
3977 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
3978 font-size: 12px;
3979 will-change: opacity;
3980 }
3981
3982 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
3983 color: #1e1e1e;
3984 }
3985
3986 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
3987 .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
3988 color: #949494;
3989 }
3990
3991 .global-styles-ui-screen-revisions__footer {
3992 height: 56px;
3993 z-index: 1;
3994 position: sticky;
3995 min-width: 100%;
3996 bottom: 0;
3997 background: #fff;
3998 padding: 12px;
3999 border-top: 1px solid #ddd;
4000 box-sizing: border-box;
4001 }
4002
4003 .global-styles-ui-variations_item {
4004 box-sizing: border-box;
4005 cursor: var(--wpds-cursor-control, pointer);
4006 }
4007
4008 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
4009 border-radius: 2px;
4010 outline: 1px solid rgba(0, 0, 0, 0.1);
4011 outline-offset: -1px;
4012 overflow: hidden;
4013 position: relative;
4014 }
4015
4016 @media not (prefers-reduced-motion) {
4017 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
4018 transition: outline 0.1s linear;
4019 }
4020 }
4021 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
4022 height: 32px;
4023 }
4024
4025 .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
4026 overflow: hidden;
4027 }
4028
4029 .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
4030 outline-color: rgba(0, 0, 0, 0.3);
4031 }
4032
4033 .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 {
4034 outline-color: #1e1e1e;
4035 outline-offset: 1px;
4036 outline-width: var(--wp-admin-border-width-focus);
4037 }
4038
4039 .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
4040 outline-color: var(--wp-admin-theme-color);
4041 }
4042
4043 .global-styles-ui-preview__wrapper {
4044 max-width: 100%;
4045 display: block;
4046 width: 100%;
4047 }
4048
4049 .global-styles-ui-preview__wrapper.is-hoverable {
4050 cursor: var(--wpds-cursor-control, pointer);
4051 }
4052
4053 .global-styles-ui-typography-preview {
4054 display: flex;
4055 align-items: center;
4056 justify-content: center;
4057 min-height: 100px;
4058 margin-bottom: 20px;
4059 background: #f0f0f0;
4060 border-radius: 2px;
4061 overflow: hidden;
4062 }
4063
4064 .global-styles-ui-font-size__item {
4065 white-space: nowrap;
4066 text-overflow: ellipsis;
4067 overflow: hidden;
4068 line-break: anywhere;
4069 }
4070
4071 .global-styles-ui-font-size__item-value {
4072 color: #757575;
4073 }
4074
4075 .global-styles-ui-screen-typography__indicator {
4076 height: 24px;
4077 width: 24px;
4078 font-size: 14px;
4079 display: flex !important;
4080 align-items: center;
4081 justify-content: center;
4082 border-radius: 2px;
4083 }
4084
4085 .global-styles-ui-block-types-search {
4086 margin-bottom: 10px;
4087 padding: 0 16px;
4088 }
4089
4090 .global-styles-ui-screen-typography__font-variants-count {
4091 color: #757575;
4092 }
4093
4094 .global-styles-ui-font-families__manage-fonts {
4095 justify-content: center;
4096 }
4097
4098 .global-styles-ui-screen .color-block-support-panel {
4099 padding-left: 0;
4100 padding-right: 0;
4101 padding-top: 0;
4102 border-top: none;
4103 row-gap: 12px;
4104 }
4105
4106 .global-styles-ui-header {
4107 margin-bottom: 0 !important;
4108 line-height: 1.9 !important;
4109 }
4110
4111 .global-styles-ui-subtitle {
4112 margin-bottom: 0 !important;
4113 text-transform: uppercase;
4114 font-weight: 499 !important;
4115 font-size: 11px !important;
4116 }
4117
4118 .global-styles-ui-section-title {
4119 color: #2f2f2f;
4120 font-weight: 600;
4121 line-height: 1.2;
4122 padding: 16px 16px 0;
4123 margin: 0;
4124 }
4125
4126 .global-styles-ui-icon-with-current-color {
4127 fill: currentColor;
4128 }
4129
4130 .global-styles-ui__color-indicator-wrapper {
4131 height: 24px;
4132 flex-shrink: 0;
4133 }
4134
4135 .global-styles-ui__shadows-panel__options-container,
4136 .global-styles-ui__typography-panel__options-container {
4137 height: 24px;
4138 }
4139
4140 .global-styles-ui__block-preview-panel {
4141 position: relative;
4142 width: 100%;
4143 border: #ddd 1px solid;
4144 border-radius: 2px;
4145 overflow: hidden;
4146 }
4147
4148 .global-styles-ui__shadow-preview-panel {
4149 height: 144px;
4150 border: #ddd 1px solid;
4151 border-radius: 2px;
4152 overflow: auto;
4153 /*rtl:begin:ignore*/
4154 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);
4155 background-position: 0 0, 8px 8px;
4156 /*rtl:end:ignore*/
4157 background-size: 16px 16px;
4158 }
4159
4160 .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4161 border: #ddd 1px solid;
4162 border-radius: 2px;
4163 background-color: #fff;
4164 width: 60%;
4165 height: 60px;
4166 }
4167
4168 .global-styles-ui__shadow-editor__dropdown-content {
4169 width: 280px;
4170 }
4171
4172 .global-styles-ui__shadow-editor-panel {
4173 margin-bottom: 4px;
4174 }
4175
4176 .global-styles-ui__shadow-editor__dropdown {
4177 width: 100%;
4178 position: relative;
4179 }
4180
4181 .global-styles-ui__shadow-editor__dropdown-toggle {
4182 width: 100%;
4183 height: auto;
4184 padding-top: 8px;
4185 padding-bottom: 8px;
4186 text-align: left;
4187 border-radius: inherit;
4188 }
4189
4190 .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4191 background: #f0f0f0;
4192 color: var(--wp-admin-theme-color);
4193 }
4194
4195 .global-styles-ui__shadow-editor__remove-button {
4196 position: absolute;
4197 right: 8px;
4198 top: 8px;
4199 opacity: 0;
4200 }
4201
4202 .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4203 border: none;
4204 }
4205
4206 .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 {
4207 opacity: 1;
4208 }
4209
4210 @media (hover: none) {
4211 .global-styles-ui__shadow-editor__remove-button {
4212 opacity: 1;
4213 }
4214 }
4215 .global-styles-ui-screen-css {
4216 flex: 1 1 auto;
4217 display: flex;
4218 flex-direction: column;
4219 margin: 16px;
4220 }
4221
4222 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
4223 flex: 1 1 auto;
4224 }
4225
4226 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
4227 flex: 1 1 auto;
4228 display: flex;
4229 flex-direction: column;
4230 }
4231
4232 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4233 flex: 1 1 auto;
4234 display: flex;
4235 flex-direction: column;
4236 }
4237
4238 .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
4239 flex: 1 1 auto;
4240 }
4241
4242 .global-styles-ui-screen-css-help-link {
4243 display: inline-block;
4244 margin-top: 8px;
4245 }
4246
4247 .global-styles-ui-screen-variations {
4248 margin-top: 16px;
4249 border-top: 1px solid #ddd;
4250 }
4251
4252 .global-styles-ui-screen-variations > * {
4253 margin: 24px 16px;
4254 }
4255
4256 .global-styles-ui-sidebar__navigator-provider {
4257 height: 100%;
4258 }
4259
4260 .global-styles-ui-sidebar__navigator-screen {
4261 display: flex;
4262 flex-direction: column;
4263 height: 100%;
4264 }
4265
4266 .global-styles-ui-sidebar__navigator-screen .single-column {
4267 grid-column: span 1;
4268 }
4269
4270 .global-styles-ui-screen-root.global-styles-ui-screen-root,
4271 .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4272 background: unset;
4273 color: inherit;
4274 }
4275
4276 .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4277 fill: currentColor;
4278 }
4279
4280 .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 {
4281 border-radius: 2px;
4282 }
4283
4284 .global-styles-ui-screen-root__active-style-tile-preview {
4285 clip-path: border-box;
4286 }
4287
4288 .global-styles-ui-color-palette-panel,
4289 .global-styles-ui-gradient-palette-panel {
4290 padding: 16px;
4291 }
4292
4293 .edit-site-custom-template-modal__contents-wrapper {
4294 height: 100%;
4295 justify-content: flex-start !important;
4296 }
4297 .edit-site-custom-template-modal__contents-wrapper > * {
4298 width: 100%;
4299 }
4300 .edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4301 margin-left: -12px;
4302 margin-right: -12px;
4303 width: calc(100% + 24px);
4304 }
4305 .edit-site-custom-template-modal__contents > .components-button {
4306 height: auto;
4307 justify-content: center;
4308 }
4309 @media (min-width: 782px) {
4310 .edit-site-custom-template-modal {
4311 width: 456px;
4312 }
4313 }
4314 @media (min-width: 600px) {
4315 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4316 max-height: 224px;
4317 overflow-y: auto;
4318 }
4319 }
4320 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4321 display: block;
4322 width: 100%;
4323 text-align: left;
4324 white-space: pre-wrap;
4325 overflow-wrap: break-word;
4326 height: auto;
4327 padding: 8px 12px;
4328 }
4329 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4330 font-weight: 700;
4331 background: none;
4332 }
4333 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4334 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4335 }
4336 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4337 color: var(--wp-admin-theme-color);
4338 }
4339 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4340 color: var(--wp-admin-theme-color);
4341 }
4342 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4343 background-color: #f0f0f0;
4344 }
4345 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4346 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4347 }
4348 .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 {
4349 overflow: hidden;
4350 text-overflow: ellipsis;
4351 display: block;
4352 }
4353 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4354 word-break: break-all;
4355 color: #757575;
4356 }
4357
4358 .edit-site-custom-template-modal__no-results {
4359 border: 1px solid #ccc;
4360 border-radius: 2px;
4361 padding: 16px;
4362 }
4363
4364 .edit-site-custom-generic-template__modal .components-modal__header {
4365 border-bottom: none;
4366 }
4367 .edit-site-custom-generic-template__modal .components-modal__content::before {
4368 margin-bottom: 4px;
4369 }
4370
4371 @media (min-width: 960px) {
4372 .edit-site-add-new-template__modal {
4373 max-width: 832px;
4374 margin-top: 64px;
4375 width: calc(100% - 128px);
4376 max-height: calc(100% - 128px);
4377 }
4378 }
4379 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4380 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4381 fill: var(--wp-admin-theme-color);
4382 }
4383 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4384 flex-grow: 1;
4385 align-items: flex-start;
4386 }
4387 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4388 padding: 8px;
4389 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4390 border-radius: 100%;
4391 max-height: 40px;
4392 max-width: 40px;
4393 }
4394
4395 .edit-site-custom-template-modal__contents > .components-button,
4396 .edit-site-add-new-template__template-list__contents > .components-button {
4397 padding: 32px;
4398 display: flex;
4399 flex-direction: column;
4400 border: 1px solid #ddd;
4401 justify-content: center;
4402 outline: 1px solid transparent;
4403 }
4404 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4405 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4406 color: #1e1e1e;
4407 }
4408 .edit-site-custom-template-modal__contents > .components-button span,
4409 .edit-site-add-new-template__template-list__contents > .components-button span {
4410 color: #757575;
4411 }
4412 .edit-site-custom-template-modal__contents > .components-button:hover,
4413 .edit-site-add-new-template__template-list__contents > .components-button:hover {
4414 color: var(--wp-admin-theme-color-darker-10);
4415 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4416 border-color: transparent;
4417 }
4418 .edit-site-custom-template-modal__contents > .components-button:hover span,
4419 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4420 color: var(--wp-admin-theme-color);
4421 }
4422 .edit-site-custom-template-modal__contents > .components-button:focus,
4423 .edit-site-add-new-template__template-list__contents > .components-button:focus {
4424 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4425 border-color: transparent;
4426 outline: 3px solid transparent;
4427 }
4428 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4429 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4430 color: var(--wp-admin-theme-color);
4431 }
4432 .edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4433 .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4434 .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4435 .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4436 grid-column: 1/-1;
4437 }
4438
4439 .edit-site-add-new-template__template-list__contents > .components-button {
4440 height: 100%;
4441 text-align: start;
4442 align-items: flex-start;
4443 }
4444
4445 .edit-site-visual-editor__editor-canvas.is-focused {
4446 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4447 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4448 }
4449
4450 .edit-site-canvas-loader {
4451 width: 100%;
4452 height: 100%;
4453 display: flex;
4454 position: absolute;
4455 top: 0;
4456 left: 0;
4457 opacity: 0;
4458 align-items: center;
4459 justify-content: center;
4460 }
4461 @media not (prefers-reduced-motion) {
4462 .edit-site-canvas-loader {
4463 animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4464 animation-fill-mode: forwards;
4465 }
4466 }
4467 .edit-site-canvas-loader > div {
4468 width: 160px;
4469 }
4470
4471 @keyframes edit-site-canvas-loader__fade-in-animation {
4472 from {
4473 opacity: 0;
4474 }
4475 to {
4476 opacity: 1;
4477 }
4478 }
4479 .edit-site-patterns__delete-modal {
4480 width: 400px;
4481 }
4482
4483 .page-patterns-preview-field {
4484 display: flex;
4485 justify-content: center;
4486 align-items: center;
4487 flex-direction: column;
4488 height: 100%;
4489 border-radius: 4px;
4490 }
4491 .dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4492 height: 100%;
4493 }
4494 .dataviews-view-table .page-patterns-preview-field {
4495 width: 96px;
4496 flex-grow: 0;
4497 text-wrap: balance;
4498 text-wrap: pretty;
4499 }
4500
4501 .edit-site-patterns__pattern-icon {
4502 fill: var(--wp-block-synced-color);
4503 flex-shrink: 0;
4504 }
4505
4506 .edit-site-patterns__section-header {
4507 border-bottom: 1px solid #f0f0f0;
4508 padding: 16px 48px;
4509 position: sticky;
4510 top: 0;
4511 z-index: 2;
4512 flex-shrink: 0;
4513 min-height: 40px;
4514 }
4515 @media not (prefers-reduced-motion) {
4516 .edit-site-patterns__section-header {
4517 transition: padding ease-out 0.1s;
4518 }
4519 }
4520 .edit-site-patterns__section-header .edit-site-patterns__title {
4521 min-height: 40px;
4522 }
4523 .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4524 flex-grow: 1;
4525 flex-basis: 0;
4526 white-space: nowrap;
4527 }
4528 .edit-site-patterns__section-header .edit-site-patterns__sub-title {
4529 margin-bottom: 8px;
4530 }
4531 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4532 top: 0;
4533 }
4534
4535 .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4536 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4537 color: var(--wp-block-synced-color);
4538 }
4539
4540 .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4541 width: 350px;
4542 }
4543 .dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4544 position: relative;
4545 }
4546 .dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4547 position: absolute;
4548 border: 1px solid var(--wp-admin-theme-color);
4549 border-bottom-left-radius: 2px;
4550 border-bottom-right-radius: 2px;
4551 box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4552 box-sizing: border-box;
4553 z-index: 1;
4554 background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
4555 width: calc(100% + 2px);
4556 left: -1px;
4557 min-width: initial;
4558 max-height: 96px;
4559 }
4560
4561 @media (min-width: 600px) {
4562 .dataviews-action-modal__duplicate-template-part .components-modal__frame {
4563 max-width: 500px;
4564 }
4565 }
4566
4567 @container (max-width: 430px) {
4568 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4569 padding-left: 24px;
4570 padding-right: 24px;
4571 }
4572 }
4573 .show-icon-labels .edit-site-patterns__button.has-icon {
4574 width: auto;
4575 padding: 0 var(--wpds-dimension-padding-xs, 4px);
4576 }
4577 .show-icon-labels .edit-site-patterns__button.has-icon svg {
4578 display: none;
4579 }
4580 .show-icon-labels .edit-site-patterns__button.has-icon::after {
4581 content: attr(aria-label);
4582 font-size: var(--wpds-typography-font-size-sm, 12px);
4583 }
4584
4585 .page-templates-preview-field {
4586 display: flex;
4587 justify-content: center;
4588 align-items: center;
4589 flex-direction: column;
4590 height: 100%;
4591 width: 100%;
4592 border-radius: 4px;
4593 }
4594 .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4595 height: 120px;
4596 }
4597 .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4598 height: 100%;
4599 }
4600 .dataviews-view-table .page-templates-preview-field {
4601 position: relative;
4602 width: 120px;
4603 max-height: 160px;
4604 text-wrap: balance;
4605 text-wrap: pretty;
4606 }
4607
4608 .edit-site-list__rename-modal {
4609 z-index: 1000001;
4610 }
4611 @media (min-width: 782px) {
4612 .edit-site-list__rename-modal .components-base-control {
4613 width: 320px;
4614 }
4615 }
4616
4617 .edit-site-editor__editor-interface {
4618 opacity: 1;
4619 }
4620 @media not (prefers-reduced-motion) {
4621 .edit-site-editor__editor-interface {
4622 transition: opacity 0.1s ease-out;
4623 }
4624 }
4625 .edit-site-editor__editor-interface.is-loading {
4626 opacity: 0;
4627 }
4628
4629 .edit-site-editor__toggle-save-panel {
4630 box-sizing: border-box;
4631 width: 280px;
4632 background-color: #fff;
4633 border: 1px dotted #ddd;
4634 padding: 24px;
4635 display: flex;
4636 justify-content: center;
4637 }
4638
4639 .edit-site-editor__view-mode-toggle {
4640 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4641 view-transition-name: toggle;
4642 /* stylelint-enable */
4643 top: 0;
4644 left: 0;
4645 height: 64px;
4646 width: 64px;
4647 z-index: 100;
4648 }
4649 .edit-site-editor__view-mode-toggle .components-button {
4650 color: #fff;
4651 height: 100%;
4652 width: 100%;
4653 border-radius: 0;
4654 overflow: hidden;
4655 padding: 0;
4656 display: flex;
4657 align-items: center;
4658 justify-content: center;
4659 }
4660 .edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4661 color: #fff;
4662 }
4663 .edit-site-editor__view-mode-toggle .components-button:focus {
4664 box-shadow: none;
4665 }
4666 .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4667 .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4668 background: #1e1e1e;
4669 display: block;
4670 }
4671
4672 .edit-site-editor__back-icon {
4673 position: absolute;
4674 top: 0;
4675 left: 0;
4676 width: 64px;
4677 height: 64px;
4678 display: flex;
4679 align-items: center;
4680 justify-content: center;
4681 background-color: hsl(0, 0%, 80%);
4682 pointer-events: none;
4683 }
4684 .edit-site-editor__back-icon svg {
4685 fill: currentColor;
4686 }
4687 .edit-site-editor__back-icon.has-site-icon {
4688 background-color: hsla(0, 0%, 100%, 0.6);
4689 backdrop-filter: saturate(180%) blur(15px);
4690 }
4691
4692 .edit-site-welcome-guide {
4693 width: 312px;
4694 }
4695 .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4696 background: #00a0d2;
4697 }
4698 .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4699 border-right: #3858e9 16px solid;
4700 border-top: #3858e9 16px solid;
4701 }
4702 .edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4703 border-left: #3858e9 16px solid;
4704 border-top: #3858e9 16px solid;
4705 }
4706 .edit-site-welcome-guide__image {
4707 margin: 0 0 16px;
4708 }
4709 .edit-site-welcome-guide__image > img {
4710 display: block;
4711 max-width: 100%;
4712 -o-object-fit: cover;
4713 object-fit: cover;
4714 }
4715 .edit-site-welcome-guide__heading {
4716 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4717 font-size: 24px;
4718 line-height: 1.4;
4719 margin: 16px 0 16px 0;
4720 padding: 0 32px;
4721 }
4722 .edit-site-welcome-guide__text {
4723 font-size: 13px;
4724 line-height: 1.4;
4725 margin: 0 0 16px 0;
4726 padding: 0 32px;
4727 }
4728 .edit-site-welcome-guide__text img {
4729 vertical-align: bottom;
4730 }
4731 .edit-site-welcome-guide__inserter-icon {
4732 margin: 0 4px;
4733 vertical-align: text-top;
4734 }
4735 .edit-site-welcome-guide .components-button:hover svg {
4736 fill: #fff;
4737 }
4738
4739 .edit-site-layout {
4740 height: 100%;
4741 background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4742 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4743 display: flex;
4744 flex-direction: column;
4745 }
4746 .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4747 background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4748 }
4749
4750 .edit-site-layout__content {
4751 height: 100%;
4752 flex-grow: 1;
4753 display: flex;
4754 }
4755
4756 .edit-site-layout__sidebar-region {
4757 z-index: 1;
4758 width: 100vw;
4759 flex-shrink: 0;
4760 }
4761 @media (min-width: 782px) {
4762 .edit-site-layout__sidebar-region {
4763 width: 300px;
4764 }
4765 }
4766 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4767 position: fixed !important;
4768 height: 100vh;
4769 left: 0;
4770 top: 0;
4771 }
4772 .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4773 display: flex;
4774 flex-direction: column;
4775 height: 100%;
4776 }
4777 .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4778 right: 0;
4779 }
4780
4781 .edit-site-layout__main {
4782 flex-grow: 1;
4783 overflow: hidden;
4784 display: flex;
4785 flex-direction: column;
4786 }
4787
4788 .edit-site-layout__mobile {
4789 position: relative;
4790 width: 100%;
4791 z-index: 2;
4792 display: flex;
4793 flex-direction: column;
4794 /*
4795 * The SiteHubMobile component is displayed
4796 * for pages that do not have a sidebar,
4797 * yet it needs the Sidebar component for the React context.
4798 *
4799 * This removes the padding in this scenario.
4800 * See https://github.com/WordPress/gutenberg/pull/63118
4801 */
4802 }
4803 .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4804 padding: 0;
4805 }
4806 .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4807 padding: 0 12px;
4808 }
4809
4810 .edit-site-layout__mobile-content {
4811 display: flex;
4812 flex-direction: column;
4813 flex-grow: 1;
4814 background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
4815 }
4816
4817 .edit-site-layout__canvas-container {
4818 position: relative;
4819 flex-grow: 1;
4820 z-index: 2;
4821 overflow: visible;
4822 }
4823
4824 .edit-site-layout__canvas {
4825 position: absolute;
4826 top: 0;
4827 left: 0;
4828 bottom: 0;
4829 width: 100%;
4830 display: flex;
4831 justify-content: center;
4832 align-items: center;
4833 }
4834 .edit-site-layout__canvas.is-right-aligned {
4835 justify-content: flex-end;
4836 }
4837 .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4838 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4839 }
4840 @media (min-width: 782px) {
4841 .edit-site-layout__canvas {
4842 top: 16px;
4843 bottom: 16px;
4844 width: calc(100% - 16px);
4845 }
4846 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4847 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);
4848 overflow: hidden;
4849 }
4850 }
4851 @media (min-width: 782px) and (not (prefers-reduced-motion)) {
4852 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4853 transition: border-radius, box-shadow 0.4s;
4854 }
4855 }
4856 @media (min-width: 782px) {
4857 .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4858 border-radius: 8px;
4859 }
4860 .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4861 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);
4862 }
4863 }
4864 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4865 top: 0;
4866 bottom: 0;
4867 width: 100%;
4868 }
4869
4870 .edit-site-layout__mobile .interface-interface-skeleton,
4871 .edit-site-layout__canvas .interface-interface-skeleton,
4872 .edit-site-template-pages-preview .interface-interface-skeleton {
4873 position: relative !important;
4874 min-height: 100% !important;
4875 }
4876
4877 .edit-site-template-pages-preview {
4878 height: 100%;
4879 }
4880
4881 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4882 html.canvas-mode-edit-transition::view-transition-group(toggle) {
4883 animation-delay: 255ms;
4884 }
4885
4886 @media (prefers-reduced-motion) {
4887 ::view-transition-group(*),
4888 ::view-transition-old(*),
4889 ::view-transition-new(*) {
4890 animation: none !important;
4891 }
4892 }
4893 /* stylelint-enable */
4894 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4895 display: none;
4896 }
4897
4898 .edit-site-layout__view-mode-toggle.components-button {
4899 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4900 view-transition-name: toggle;
4901 /* stylelint-enable */
4902 position: relative;
4903 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
4904 height: 64px;
4905 width: 64px;
4906 overflow: hidden;
4907 padding: 0;
4908 display: flex;
4909 align-items: center;
4910 justify-content: center;
4911 background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4912 border-radius: 0;
4913 }
4914 .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4915 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
4916 }
4917 .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4918 box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4919 outline: 4px solid rgba(0, 0, 0, 0);
4920 outline-offset: 4px;
4921 }
4922 .edit-site-layout__view-mode-toggle.components-button::before {
4923 content: "";
4924 display: block;
4925 position: absolute;
4926 top: 9px;
4927 right: 9px;
4928 bottom: 9px;
4929 left: 17px;
4930 border-radius: 4px;
4931 box-shadow: none;
4932 }
4933 @media not (prefers-reduced-motion) {
4934 .edit-site-layout__view-mode-toggle.components-button::before {
4935 transition: box-shadow 0.1s ease;
4936 }
4937 }
4938 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4939 display: flex;
4940 height: 64px;
4941 width: 64px;
4942 justify-content: center;
4943 align-items: center;
4944 }
4945
4946 .edit-site-layout__actions {
4947 z-index: 100000;
4948 position: fixed !important;
4949 top: -9999em;
4950 bottom: auto;
4951 left: auto;
4952 right: 0;
4953 width: 280px;
4954 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4955 background: var(--wpds-color-bg-surface-neutral-strong, #fff);
4956 }
4957 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4958 top: auto;
4959 bottom: 0;
4960 }
4961 .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4962 top: 0;
4963 }
4964 @media (min-width: 782px) {
4965 .edit-site-layout__actions {
4966 border-left: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4967 }
4968 }
4969
4970 .edit-site-layout__area {
4971 flex-grow: 1;
4972 margin: 0;
4973 overflow: hidden;
4974 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);
4975 }
4976 @media (min-width: 782px) {
4977 .edit-site-layout__area {
4978 border-radius: 8px;
4979 margin: 16px 16px 16px 0;
4980 }
4981 }
4982
4983 .edit-site-layout__snackbar {
4984 position: fixed;
4985 bottom: 24px;
4986 left: 0;
4987 right: 0;
4988 padding-inline: 16px;
4989 box-sizing: border-box;
4990 display: flex;
4991 flex-direction: column;
4992 pointer-events: none;
4993 }
4994 .edit-site-layout__snackbar .components-snackbar {
4995 margin-inline: auto;
4996 }
4997
4998 .edit-site-save-hub {
4999 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
5000 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5001 flex-shrink: 0;
5002 margin: 0;
5003 padding: 16px 16px;
5004 }
5005
5006 .edit-site-save-hub__button {
5007 color: inherit;
5008 width: 100%;
5009 justify-content: center;
5010 }
5011 .edit-site-save-hub__button[aria-disabled=true] {
5012 opacity: 1;
5013 }
5014 .edit-site-save-hub__button[aria-disabled=true], .edit-site-save-hub__button[aria-disabled=true]:hover {
5015 color: inherit;
5016 }
5017 .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
5018 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5019 }
5020
5021 @media (min-width: 600px) {
5022 .edit-site-save-panel__modal {
5023 width: 600px;
5024 }
5025 }
5026
5027 .edit-site-sidebar__content {
5028 flex-grow: 1;
5029 overflow-y: auto;
5030 overflow-x: hidden;
5031 contain: content;
5032 }
5033
5034 @keyframes local--slide-from-right {
5035 from {
5036 transform: translateX(50px);
5037 opacity: 0;
5038 }
5039 to {
5040 transform: none;
5041 opacity: 1;
5042 }
5043 }
5044 @keyframes local--slide-from-left {
5045 from {
5046 transform: translateX(-50px);
5047 opacity: 0;
5048 }
5049 to {
5050 transform: none;
5051 opacity: 1;
5052 }
5053 }
5054 .edit-site-sidebar__screen-wrapper {
5055 overflow-x: auto;
5056 }
5057 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
5058 width: 12px;
5059 height: 12px;
5060 }
5061 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
5062 background-color: transparent;
5063 }
5064 .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
5065 background-color: transparent;
5066 border-radius: 8px;
5067 border: 3px solid transparent;
5068 background-clip: padding-box;
5069 }
5070 .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 {
5071 background-color: #757575;
5072 }
5073 .edit-site-sidebar__screen-wrapper {
5074 scrollbar-width: thin;
5075 scrollbar-gutter: stable both-edges;
5076 scrollbar-color: transparent transparent;
5077 }
5078 .edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
5079 scrollbar-color: #757575 transparent;
5080 }
5081 .edit-site-sidebar__screen-wrapper {
5082 will-change: transform;
5083 }
5084 @media (hover: none) {
5085 .edit-site-sidebar__screen-wrapper {
5086 scrollbar-color: #757575 transparent;
5087 }
5088 }
5089 .edit-site-sidebar__screen-wrapper {
5090 scrollbar-gutter: stable;
5091 display: flex;
5092 flex-direction: column;
5093 height: 100%;
5094 max-height: 100%;
5095 padding: 0 12px;
5096 animation-duration: 0.14s;
5097 animation-timing-function: ease-in-out;
5098 will-change: transform, opacity;
5099 }
5100 @media (prefers-reduced-motion: reduce) {
5101 .edit-site-sidebar__screen-wrapper {
5102 animation-duration: 0s;
5103 }
5104 }
5105 .edit-site-sidebar__screen-wrapper.slide-from-left {
5106 animation-name: local--slide-from-left;
5107 }
5108 .edit-site-sidebar__screen-wrapper.slide-from-right {
5109 animation-name: local--slide-from-right;
5110 }
5111
5112 .edit-site-sidebar-button {
5113 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5114 flex-shrink: 0;
5115 }
5116 .edit-site-sidebar-button:focus:not(:disabled) {
5117 box-shadow: none;
5118 outline: none;
5119 }
5120 .edit-site-sidebar-button:focus-visible:not(:disabled) {
5121 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5122 outline: 3px solid transparent;
5123 }
5124 .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] {
5125 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5126 }
5127
5128 .edit-site-sidebar-navigation-item.components-item {
5129 color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5130 padding: 8px 6px 8px 16px;
5131 border: none;
5132 min-height: 40px;
5133 }
5134 .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] {
5135 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5136 }
5137 .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 {
5138 fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5139 }
5140 .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5141 background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
5142 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5143 font-weight: 499;
5144 }
5145 .edit-site-sidebar-navigation-item.components-item:focus-visible {
5146 transform: translateZ(0);
5147 }
5148 .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5149 fill: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5150 }
5151 .edit-site-sidebar-navigation-item.components-item.with-suffix {
5152 padding-right: 16px;
5153 }
5154
5155 .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
5156 cursor: grab;
5157 padding: 8px 8px 8px 0;
5158 }
5159
5160 .edit-site-sidebar-navigation-screen {
5161 display: flex;
5162 flex-direction: column;
5163 overflow-x: unset !important;
5164 position: relative;
5165 }
5166
5167 .edit-site-sidebar-navigation-screen__main {
5168 flex-grow: 1;
5169 margin-bottom: 16px;
5170 }
5171 .edit-site-sidebar-navigation-screen__main.has-footer {
5172 margin-bottom: 0;
5173 }
5174
5175 .edit-site-sidebar-navigation-screen__content {
5176 padding: 0 16px;
5177 }
5178 .edit-site-sidebar-navigation-screen__content .components-text {
5179 color: var(--wpds-color-fg-content-neutral, #1e1e1e);
5180 }
5181 .edit-site-sidebar-navigation-screen__content .components-heading {
5182 margin-bottom: 8px;
5183 }
5184
5185 .edit-site-sidebar-navigation-screen__title-icon {
5186 position: sticky;
5187 top: 0;
5188 background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5189 padding-top: 48px;
5190 margin-bottom: 8px;
5191 padding-bottom: 8px;
5192 z-index: 1;
5193 }
5194
5195 .edit-site-sidebar-navigation-screen__title {
5196 flex-grow: 1;
5197 overflow-wrap: break-word;
5198 }
5199 .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 {
5200 line-height: 32px;
5201 }
5202
5203 .edit-site-sidebar-navigation-screen__actions {
5204 display: flex;
5205 flex-shrink: 0;
5206 }
5207
5208 @media (min-width: 782px) {
5209 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
5210 max-width: 292px;
5211 }
5212 }
5213
5214 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
5215 outline-color: rgba(255, 255, 255, 0.05);
5216 }
5217 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
5218 outline-color: rgba(255, 255, 255, 0.15);
5219 }
5220 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
5221 outline-color: #fff;
5222 }
5223 .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
5224 outline-color: var(--wp-admin-theme-color);
5225 }
5226
5227 .edit-site-sidebar-navigation-screen__footer {
5228 position: sticky;
5229 bottom: 0;
5230 background-color: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5231 gap: 0;
5232 padding: 8px 16px;
5233 margin: 16px 0 0;
5234 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5235 }
5236 .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5237 margin-left: -16px;
5238 margin-right: -16px;
5239 }
5240
5241 /* In general style overrides are discouraged.
5242 * This is a temporary solution to override the InputControl component's styles.
5243 * The `Theme` component will potentially be the more appropriate approach
5244 * once that component is stabilized.
5245 * See: packages/components/src/theme
5246 */
5247 .edit-site-sidebar-navigation-screen__input-control {
5248 width: 100%;
5249 }
5250 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5251 background: var(--wpds-color-bg-interactive-neutral-weak, #0000);
5252 }
5253 .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5254 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e) !important;
5255 }
5256 .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5257 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e) !important;
5258 background: var(--wpds-color-bg-interactive-neutral-weak, #0000) !important;
5259 }
5260 .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5261 border: 4px !important;
5262 }
5263 .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5264 color: var(--wpds-color-fg-content-neutral-weak, #707070);
5265 }
5266
5267 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5268 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5269 .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5270 background: none;
5271 }
5272
5273 .sidebar-navigation__more-menu .components-button {
5274 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5275 }
5276 .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5277 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5278 }
5279
5280 .edit-site-sidebar-navigation-screen-patterns__group {
5281 margin-bottom: 24px;
5282 margin-left: -16px;
5283 margin-right: -16px;
5284 }
5285 .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5286 border-bottom: 0;
5287 padding-bottom: 0;
5288 margin-bottom: 0;
5289 }
5290
5291 .edit-site-sidebar-navigation-screen-patterns__group-header {
5292 margin-top: 16px;
5293 }
5294 .edit-site-sidebar-navigation-screen-patterns__group-header p {
5295 color: var(--wpds-color-fg-content-neutral-weak, #707070);
5296 }
5297 .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5298 font-size: 11px;
5299 font-weight: 499;
5300 text-transform: uppercase;
5301 }
5302
5303 .edit-site-sidebar-navigation-screen-patterns__divider {
5304 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5305 margin: 16px 0;
5306 }
5307
5308 .edit-site-sidebar-navigation-screen__description {
5309 margin: 0 0 32px 0;
5310 }
5311
5312 .edit-site-sidebar-navigation-screen-navigation-menus {
5313 margin-left: -16px;
5314 margin-right: -16px;
5315 }
5316
5317 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5318 white-space: normal;
5319 }
5320 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5321 margin-top: 3px;
5322 }
5323 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5324 padding-right: 0;
5325 }
5326 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5327 color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5328 }
5329 .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] {
5330 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5331 }
5332 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5333 color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5334 }
5335 .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 {
5336 color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5337 }
5338 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5339 background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5340 color: var(--wpds-color-fg-interactive-brand-strong, #fff);
5341 }
5342 .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 {
5343 background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5344 color: var(--wpds-color-fg-interactive-brand-strong-active, #fff);
5345 }
5346
5347 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5348 margin-left: auto;
5349 margin-right: auto;
5350 display: block;
5351 }
5352
5353 .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5354 display: none;
5355 }
5356
5357 .edit-site-sidebar-navigation-screen-main {
5358 margin-left: -16px;
5359 margin-right: -16px;
5360 }
5361
5362 .edit-site-sidebar-navigation-screen-templates-browse {
5363 margin-left: -16px;
5364 margin-right: -16px;
5365 }
5366
5367 .edit-site-sidebar-dataviews {
5368 margin-left: -16px;
5369 margin-right: -16px;
5370 }
5371
5372 .edit-site-site-hub {
5373 display: flex;
5374 align-items: center;
5375 justify-content: space-between;
5376 gap: 8px;
5377 margin-right: 12px;
5378 height: 64px;
5379 }
5380
5381 .edit-site-site-hub__actions {
5382 flex-shrink: 0;
5383 }
5384
5385 .edit-site-site-hub__view-mode-toggle-container {
5386 height: 64px;
5387 width: 64px;
5388 flex-shrink: 0;
5389 }
5390 .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5391 background: transparent;
5392 }
5393
5394 .edit-site-site-hub__title .components-button {
5395 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5396 display: block;
5397 flex-grow: 1;
5398 font-size: 15px;
5399 font-weight: 499;
5400 overflow: hidden;
5401 padding-right: 16px;
5402 margin-left: -4px;
5403 position: relative;
5404 text-decoration: none;
5405 text-overflow: ellipsis;
5406 white-space: nowrap;
5407 }
5408 .edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5409 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5410 }
5411 .edit-site-site-hub__title .components-button:focus {
5412 box-shadow: none;
5413 outline: none;
5414 }
5415 .edit-site-site-hub__title .components-button:focus-visible {
5416 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-bg-surface-neutral-weak, #f4f4f4), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5417 outline: 2px solid transparent;
5418 outline-offset: 2px;
5419 }
5420 .edit-site-site-hub__title .components-button::after {
5421 content: "↗";
5422 font-weight: 400;
5423 opacity: 0;
5424 position: absolute;
5425 right: 0;
5426 }
5427 @media not (prefers-reduced-motion) {
5428 .edit-site-site-hub__title .components-button::after {
5429 transition: opacity 0.1s linear;
5430 }
5431 }
5432 .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 {
5433 opacity: 1;
5434 }
5435
5436 .edit-site-site-hub_toggle-command-center {
5437 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5438 }
5439 .edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5440 fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5441 }
5442
5443 .edit-site-site-icon__icon {
5444 fill: currentColor;
5445 width: 100%;
5446 height: 100%;
5447 }
5448 .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5449 padding: 12px;
5450 }
5451
5452 .edit-site-site-icon__image {
5453 width: 100%;
5454 height: 100%;
5455 -o-object-fit: cover;
5456 object-fit: cover;
5457 background: #333;
5458 aspect-ratio: 1/1;
5459 }
5460 .edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5461 border-radius: 0;
5462 }
5463
5464 .edit-site-editor__view-mode-toggle button:focus {
5465 position: relative;
5466 }
5467 .edit-site-editor__view-mode-toggle button:focus::before {
5468 content: "";
5469 display: block;
5470 position: absolute;
5471 z-index: 1;
5472 top: 0;
5473 right: 0;
5474 bottom: 0;
5475 left: 0;
5476 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;
5477 }
5478
5479 .fields-controls__password {
5480 border-top: 1px solid #e0e0e0;
5481 padding-top: 16px;
5482 }
5483
5484 .dataviews-action-modal__quick-edit {
5485 justify-content: flex-end;
5486 align-items: stretch;
5487 }
5488 .dataviews-action-modal__quick-edit .components-modal__frame {
5489 margin: 16px 16px 16px 0;
5490 height: calc(100% - 32px);
5491 max-height: calc(100% - 32px);
5492 max-width: 400px;
5493 border-radius: 8px;
5494 position: relative;
5495 animation-name: none;
5496 }
5497 @media (prefers-reduced-motion: no-preference) {
5498 .dataviews-action-modal__quick-edit .components-modal__frame {
5499 animation-name: quick-edit-slide-in-right;
5500 animation-duration: 0.2s;
5501 animation-timing-function: ease-out;
5502 }
5503 }
5504 .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5505 animation-name: none;
5506 }
5507 @media (prefers-reduced-motion: no-preference) {
5508 .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5509 animation-name: quick-edit-slide-out-right;
5510 animation-duration: 0.2s;
5511 animation-timing-function: ease-out;
5512 }
5513 }
5514 .dataviews-action-modal__quick-edit .components-modal__content {
5515 display: flex;
5516 flex-direction: column;
5517 overflow: hidden;
5518 padding: 0;
5519 }
5520 .dataviews-action-modal__quick-edit .components-modal__content > * {
5521 display: flex;
5522 flex-direction: column;
5523 flex: 1;
5524 min-height: 0;
5525 }
5526 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5527 padding: 24px 24px 0;
5528 }
5529 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5530 flex: 1;
5531 min-height: 0;
5532 overflow-y: auto;
5533 padding-top: 16px;
5534 }
5535 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5536 flex: 1;
5537 padding: 0 24px 4px;
5538 }
5539 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5540 position: sticky;
5541 bottom: 0;
5542 flex-shrink: 0;
5543 padding: 16px 24px 24px;
5544 }
5545 .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5546 flex: 1;
5547 justify-content: center;
5548 }
5549
5550 @keyframes quick-edit-slide-in-right {
5551 from {
5552 transform: translateX(100%);
5553 }
5554 to {
5555 transform: translateX(0);
5556 }
5557 }
5558 @keyframes quick-edit-slide-out-right {
5559 from {
5560 transform: translateX(0);
5561 }
5562 to {
5563 transform: translateX(100%);
5564 }
5565 }
5566 .edit-site-resizable-frame__inner {
5567 position: relative;
5568 }
5569 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5570 cursor: col-resize;
5571 -webkit-user-select: none;
5572 -moz-user-select: none;
5573 user-select: none;
5574 }
5575
5576 .edit-site-resizable-frame__inner.is-resizing::before {
5577 position: absolute;
5578 z-index: 1;
5579 inset: 0;
5580 content: "";
5581 }
5582
5583 .edit-site-resizable-frame__inner-content {
5584 position: absolute;
5585 z-index: 0;
5586 inset: 0;
5587 }
5588
5589 .edit-site-resizable-frame__handle {
5590 align-items: center;
5591 background-color: rgba(117, 117, 117, 0.4);
5592 border: 0;
5593 border-radius: 4px;
5594 cursor: col-resize;
5595 display: flex;
5596 height: 64px;
5597 justify-content: flex-end;
5598 padding: 0;
5599 position: absolute;
5600 top: calc(50% - 32px);
5601 width: 4px;
5602 z-index: 100;
5603 }
5604 .edit-site-resizable-frame__handle::before {
5605 content: "";
5606 height: 100%;
5607 left: 100%;
5608 position: absolute;
5609 width: 32px;
5610 }
5611 .edit-site-resizable-frame__handle::after {
5612 content: "";
5613 height: 100%;
5614 position: absolute;
5615 right: 100%;
5616 width: 32px;
5617 }
5618 .edit-site-resizable-frame__handle:focus-visible {
5619 outline: 2px solid transparent;
5620 }
5621 .edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5622 background-color: var(--wp-admin-theme-color);
5623 }
5624
5625 .edit-site-pagination .components-button.is-tertiary {
5626 width: 32px;
5627 height: 32px;
5628 justify-content: center;
5629 }
5630
5631 .edit-site-styles .global-styles-ui-screen-root {
5632 box-shadow: none;
5633 }
5634 .edit-site-styles .global-styles-ui-screen-root > div > hr {
5635 display: none;
5636 }
5637 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5638 border-top: none;
5639 }
5640 .edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5641 overflow-y: auto;
5642 padding-left: 0;
5643 padding-right: 0;
5644 }
5645 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5646 padding-top: 12px;
5647 padding-left: 12px;
5648 padding-right: 12px;
5649 padding-bottom: 12px;
5650 outline: none;
5651 }
5652 .edit-site-styles .edit-site-sidebar-button {
5653 color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5654 }
5655
5656 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5657 width: auto;
5658 padding: 0 var(--wpds-dimension-padding-xs, 4px);
5659 }
5660 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon svg {
5661 display: none;
5662 }
5663 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon::after {
5664 content: attr(aria-label);
5665 font-size: var(--wpds-typography-font-size-sm, 12px);
5666 }
5667
5668 body.has-admin-bar-in-editor {
5669 margin-top: 0;
5670 height: 100%;
5671 }
5672 body.has-admin-bar-in-editor:has(.editor-editor-interface.is-distraction-free) {
5673 --wp-admin--admin-bar--height: 0;
5674 }
5675 body.has-admin-bar-in-editor .edit-site-site-hub__title,
5676 body.has-admin-bar-in-editor .edit-site-site-hub__actions {
5677 display: none;
5678 }
5679 body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
5680 background: transparent;
5681 }
5682 body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
5683 color: var(--wp-admin-theme-color);
5684 }
5685 body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5686 padding-top: 16px;
5687 }
5688 body.has-admin-bar-in-editor .edit-site-layout__content,
5689 body.has-admin-bar-in-editor .edit-site-layout__sidebar {
5690 min-height: 0;
5691 }
5692 body.has-admin-bar-in-editor .edit-site-sidebar__content {
5693 flex-basis: 0;
5694 min-height: 0;
5695 }
5696 body.has-admin-bar-in-editor .edit-site {
5697 box-sizing: border-box;
5698 padding-top: var(--wp-admin--admin-bar--height, 0);
5699 height: 100vh;
5700 min-height: 100vh;
5701 }
5702 @media (min-width: 600px) {
5703 body.has-admin-bar-in-editor .edit-site {
5704 padding-top: 0;
5705 top: var(--wp-admin--admin-bar--height, 0);
5706 height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5707 min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5708 }
5709 }
5710 body.has-admin-bar-in-editor .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
5711 top: var(--wp-admin--admin-bar--height, 0);
5712 height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5713 }
5714 body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
5715 body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within,
5716 body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus,
5717 body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus-within {
5718 top: var(--wp-admin--admin-bar--height, 0);
5719 }
5720 body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
5721 display: block;
5722 }
5723 body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5724 display: none;
5725 }
5726
5727 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5728 ::view-transition-image-pair(root) {
5729 isolation: auto;
5730 }
5731
5732 ::view-transition-old(root),
5733 ::view-transition-new(root) {
5734 animation: none;
5735 mix-blend-mode: normal;
5736 display: block;
5737 }
5738
5739 /* stylelint-enable */
5740 body.js #wpadminbar {
5741 display: none;
5742 }
5743
5744 body.js #wpbody {
5745 padding-top: 0;
5746 }
5747
5748 body.js.appearance_page_gutenberg-template-parts,
5749 body.js.site-editor-php {
5750 background: #fff;
5751 }
5752 body.js.appearance_page_gutenberg-template-parts #wpcontent,
5753 body.js.site-editor-php #wpcontent {
5754 padding-left: 0;
5755 }
5756 body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5757 body.js.site-editor-php #wpbody-content {
5758 padding-bottom: 0;
5759 }
5760 body.js.appearance_page_gutenberg-template-parts,
5761 body.js.site-editor-php {
5762 /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5763 Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5764 }
5765 body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5766 body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5767 display: none;
5768 }
5769 body.js.appearance_page_gutenberg-template-parts #wpfooter,
5770 body.js.site-editor-php #wpfooter {
5771 display: none;
5772 }
5773 body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5774 body.js.site-editor-php .a11y-speak-region {
5775 left: -1px;
5776 top: -1px;
5777 }
5778 body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5779 body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5780 body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5781 body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5782 border-right-color: #fff;
5783 }
5784 body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5785 body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5786 width: auto;
5787 max-width: 100%;
5788 }
5789
5790 body.js.site-editor-php {
5791 background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5792 }
5793
5794 .edit-site {
5795 box-sizing: border-box;
5796 }
5797 .edit-site *,
5798 .edit-site *::before,
5799 .edit-site *::after {
5800 box-sizing: inherit;
5801 }
5802 .edit-site {
5803 height: 100vh;
5804 }
5805 @media (min-width: 600px) {
5806 .edit-site {
5807 bottom: 0;
5808 left: 0;
5809 min-height: 100vh;
5810 position: fixed;
5811 right: 0;
5812 top: 0;
5813 }
5814 }
5815 .no-js .edit-site {
5816 min-height: 0;
5817 position: static;
5818 }
5819 .edit-site .interface-interface-skeleton {
5820 top: 0;
5821 }