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

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

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