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