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