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