[Summary view] [Print] [Text view]

   1  /**
   2   * SCSS Variables.
   3   *
   4   * Please use variables from this sheet to ensure consistency across the UI.
   5   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   6   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
   7   */
   8  /**
   9   * Colors
  10   */
  11  /**
  12   * Fonts & basic variables.
  13   */
  14  /**
  15   * Typography
  16   */
  17  /**
  18   * Grid System.
  19   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  20   */
  21  /**
  22   * Radius scale.
  23   */
  24  /**
  25   * Elevation scale.
  26   */
  27  /**
  28   * Dimensions.
  29   */
  30  /**
  31   * Mobile specific styles
  32   */
  33  /**
  34   * Editor styles.
  35   */
  36  /**
  37   * Block & Editor UI.
  38   */
  39  /**
  40   * Block paddings.
  41   */
  42  /**
  43   * React Native specific.
  44   * These variables do not appear to be used anywhere else.
  45   */
  46  .components-popover__content:has(.dataviews-media-field__attached-to) {
  47    margin-bottom: 96px;
  48  }
  49  
  50  .components-popover__content:has(.dataviews-media-field__attached-to):has(.components-form-token-field__suggestions-list) {
  51    margin-bottom: 0;
  52  }
  53  
  54  .components-popover__content:has(.dataviews-media-field__attached-to) .components-form-token-field__suggestions-list {
  55    height: 96px;
  56    max-height: none;
  57  }
  58  
  59  /**
  60   * Typography
  61   */
  62  /**
  63   * Breakpoints & Media Queries
  64   */
  65  /**
  66  *  Converts a hex value into the rgb equivalent.
  67  *
  68  * @param {string} hex - the hexadecimal value to convert
  69  * @return {string} comma separated rgb values
  70  */
  71  /**
  72   * Long content fade mixin
  73   *
  74   * Creates a fading overlay to signify that the content is longer
  75   * than the space allows.
  76   */
  77  /**
  78   * Breakpoint mixins
  79   */
  80  /**
  81   * Focus styles.
  82   */
  83  /**
  84   * Standard focus rings for the WordPress Design System.
  85   *
  86   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  87   * e.g. `&:focus { @include outset-ring__focus(); }`.
  88   */
  89  /**
  90   * Applies editor left position to the selector passed as argument
  91   */
  92  /**
  93   * Styles that are reused verbatim in a few places
  94   */
  95  /**
  96   * Allows users to opt-out of animations via OS-level preferences.
  97   */
  98  /**
  99   * Reset default styles for JavaScript UI based pages.
 100   * This is a WP-admin agnostic reset
 101   */
 102  /**
 103   * Reset the WP Admin page styles for Gutenberg-like pages.
 104   */
 105  /**
 106   * Creates a checkerboard pattern background to indicate transparency.
 107   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
 108   */
 109  .media-author-field__avatar {
 110    flex-shrink: 0;
 111    overflow: hidden;
 112    width: 24px;
 113    height: 24px;
 114    align-items: center;
 115    justify-content: right;
 116    display: flex;
 117  }
 118  
 119  .media-author-field__avatar img {
 120    width: 16px;
 121    height: 16px;
 122    object-fit: cover;
 123    opacity: 1;
 124    border-radius: 100%;
 125  }
 126  
 127  @media not (prefers-reduced-motion) {
 128    .media-author-field__avatar.is-loading img, .media-author-field__avatar.is-loaded img {
 129      transition: opacity 0.1s linear;
 130    }
 131  }
 132  .media-author-field__avatar.is-loading img {
 133    opacity: 0;
 134  }
 135  
 136  .media-author-field__avatar.is-loaded img {
 137    opacity: 1;
 138  }
 139  
 140  .media-author-field__icon {
 141    display: flex;
 142    flex-shrink: 0;
 143    width: 24px;
 144    height: 24px;
 145  }
 146  
 147  .media-author-field__icon svg {
 148    margin-right: -4px;
 149    fill: currentColor;
 150  }
 151  
 152  .media-author-field__name {
 153    text-overflow: ellipsis;
 154    overflow: hidden;
 155  }
 156  
 157  .dataviews-view-table .dataviews-media-field__filename,
 158  .dataviews-view-grid .dataviews-media-field__filename,
 159  .dataviews-view-list .dataviews-media-field__filename {
 160    display: inline-block;
 161    max-inline-size: 15ch;
 162    overflow: hidden;
 163    text-overflow: ellipsis;
 164    white-space: nowrap;
 165    vertical-align: top;
 166  }
 167  
 168  .dataviews-media-field__media-thumbnail {
 169    display: flex;
 170    align-items: center;
 171    position: relative;
 172    height: 100%;
 173  }
 174  
 175  @media not (prefers-reduced-motion) {
 176    .dataviews-media-field__media-thumbnail.is-loading img, .dataviews-media-field__media-thumbnail.is-loaded img {
 177      transition: opacity 0.1s linear;
 178    }
 179  }
 180  .dataviews-media-field__media-thumbnail.is-loading img {
 181    opacity: 0;
 182  }
 183  
 184  .dataviews-media-field__media-thumbnail.is-loaded img {
 185    opacity: 1;
 186  }
 187  
 188  .dataviews-media-field__media-thumbnail--image {
 189    display: block;
 190    width: 100%;
 191    height: 100%;
 192    object-fit: cover;
 193  }
 194  
 195  .dataviews-media-field__media-thumbnail__stack {
 196    color: #757575;
 197    box-sizing: border-box;
 198    width: 100%;
 199    height: 100%;
 200  }
 201  
 202  .dataviews-media-field__media-thumbnail--icon {
 203    color: #757575;
 204    fill: currentColor;
 205  }
 206  
 207  .dataviews-media-field__media-thumbnail__filename {
 208    box-sizing: border-box;
 209    text-align: center;
 210    padding: 0 16px;
 211    width: 100%;
 212    container-type: inline-size;
 213    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 214    font-weight: var(--wpds-typography-font-weight-default, 400);
 215    font-size: 12px;
 216    line-height: 16px;
 217  }
 218  
 219  .dataviews-media-field__media-thumbnail__filename__truncate {
 220    margin-top: 4px;
 221  }
 222  
 223  @container (max-width: 90px) {
 224    .dataviews-media-field__media-thumbnail__filename__truncate {
 225      display: none !important;
 226    }
 227  }
 228  /**
 229   * Colors
 230   */
 231  /**
 232   * Typography
 233   */
 234  /**
 235   * SCSS Variables.
 236   *
 237   * Please use variables from this sheet to ensure consistency across the UI.
 238   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 239   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 240   */
 241  /**
 242   * Fonts & basic variables.
 243   */
 244  /**
 245   * Typography
 246   */
 247  /**
 248   * Grid System.
 249   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 250   */
 251  /**
 252   * Radius scale.
 253   */
 254  /**
 255   * Elevation scale.
 256   */
 257  /**
 258   * Dimensions.
 259   */
 260  /**
 261   * Mobile specific styles
 262   */
 263  /**
 264   * Editor styles.
 265   */
 266  /**
 267   * Block & Editor UI.
 268   */
 269  /**
 270   * Block paddings.
 271   */
 272  /**
 273   * React Native specific.
 274   * These variables do not appear to be used anywhere else.
 275   */
 276  /**
 277   * Breakpoints & Media Queries
 278   */
 279  /**
 280  *  Converts a hex value into the rgb equivalent.
 281  *
 282  * @param {string} hex - the hexadecimal value to convert
 283  * @return {string} comma separated rgb values
 284  */
 285  /**
 286   * Long content fade mixin
 287   *
 288   * Creates a fading overlay to signify that the content is longer
 289   * than the space allows.
 290   */
 291  /**
 292   * Breakpoint mixins
 293   */
 294  /**
 295   * Focus styles.
 296   */
 297  /**
 298   * Standard focus rings for the WordPress Design System.
 299   *
 300   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
 301   * e.g. `&:focus { @include outset-ring__focus(); }`.
 302   */
 303  /**
 304   * Applies editor left position to the selector passed as argument
 305   */
 306  /**
 307   * Styles that are reused verbatim in a few places
 308   */
 309  /**
 310   * Allows users to opt-out of animations via OS-level preferences.
 311   */
 312  /**
 313   * Reset default styles for JavaScript UI based pages.
 314   * This is a WP-admin agnostic reset
 315   */
 316  /**
 317   * Reset the WP Admin page styles for Gutenberg-like pages.
 318   */
 319  /**
 320   * Creates a checkerboard pattern background to indicate transparency.
 321   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
 322   */
 323  fieldset.media-edit {
 324    border: 0;
 325    padding: 0;
 326    margin: 0;
 327    width: 100%;
 328  }
 329  fieldset.media-edit .components-base-control__label {
 330    color: #1e1e1e;
 331  }
 332  fieldset.media-edit .media-edit__description {
 333    font-size: 12px;
 334    line-height: 1.5;
 335  }
 336  fieldset.media-edit {
 337    container-type: inline-size;
 338  }
 339  fieldset.media-edit .media-edit__compact-group {
 340    border: 1px dashed #949494;
 341    border-radius: 4px;
 342  }
 343  fieldset.media-edit .media-edit__compact-group.is-single {
 344    border-radius: 2px;
 345  }
 346  fieldset.media-edit .media-edit__compact-group .media-edit__picker-button {
 347    border: 0;
 348  }
 349  fieldset.media-edit .media-edit__compact-group .media-edit__picker-button:focus-visible {
 350    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)));
 351    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 352    outline-offset: calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 1px);
 353  }
 354  fieldset.media-edit .media-edit__compact-group .media-edit__compact:not(:last-child) {
 355    border-bottom: 1px solid #f0f0f0;
 356  }
 357  fieldset.media-edit .media-edit__compact .components-drop-zone .components-drop-zone__content-inner {
 358    display: flex;
 359    align-items: center;
 360    gap: 8px;
 361  }
 362  fieldset.media-edit .media-edit__compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
 363    margin: 0;
 364  }
 365  fieldset.media-edit .media-edit__compact {
 366    position: relative;
 367    min-width: 0;
 368  }
 369  fieldset.media-edit .media-edit__compact:hover .media-edit__compact-movers, fieldset.media-edit .media-edit__compact:focus-within .media-edit__compact-movers {
 370    opacity: 1;
 371  }
 372  fieldset.media-edit .media-edit__compact .media-edit__compact-movers {
 373    position: absolute;
 374    left: 8px;
 375    top: 50%;
 376    transform: translateY(-50%);
 377    opacity: 0;
 378    pointer-events: none;
 379    z-index: 1;
 380    border-radius: 2px;
 381    background: #fff;
 382  }
 383  fieldset.media-edit .media-edit__compact .media-edit__compact-movers * {
 384    pointer-events: auto;
 385  }
 386  fieldset.media-edit .media-edit__picker-button:has(.media-edit__placeholder):not(.media-edit__expanded *) .components-drop-zone .components-drop-zone__content-inner {
 387    display: flex;
 388    align-items: center;
 389    gap: 8px;
 390  }
 391  fieldset.media-edit .media-edit__picker-button:has(.media-edit__placeholder):not(.media-edit__expanded *) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
 392    margin: 0;
 393  }
 394  fieldset.media-edit .media-edit__picker-button {
 395    position: relative;
 396    display: flex;
 397    align-items: center;
 398    gap: 8px;
 399    border: 1px dashed #949494;
 400    border-radius: 2px;
 401    padding: 4px 8px;
 402    min-height: 40px;
 403    cursor: var(--wpds-cursor-control, pointer);
 404    min-width: 0;
 405  }
 406  fieldset.media-edit .media-edit__picker-button:not(.has-attachment) {
 407    border-color: var(--wp-admin-theme-color);
 408    color: var(--wp-admin-theme-color);
 409  }
 410  fieldset.media-edit .media-edit__picker-button:not(.has-attachment):hover {
 411    background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
 412    color: var(--wp-admin-theme-color-darker-20);
 413    border-color: var(--wp-admin-theme-color-darker-20);
 414  }
 415  fieldset.media-edit .media-edit__picker-button:hover {
 416    color: var(--wp-admin-theme-color);
 417  }
 418  fieldset.media-edit .media-edit__picker-button[aria-disabled=true] {
 419    opacity: 0.6;
 420    cursor: default;
 421  }
 422  fieldset.media-edit .media-edit__picker-button:focus-visible {
 423    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)));
 424    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 425  }
 426  fieldset.media-edit .media-edit__picker-button .media-edit__picker-button-spinner {
 427    position: absolute;
 428    top: 50%;
 429    right: 50%;
 430    transform: translate(50%, -50%);
 431    z-index: 1;
 432  }
 433  fieldset.media-edit .media-edit__filename,
 434  fieldset.media-edit .media-edit__placeholder {
 435    flex: 1;
 436    width: 100%;
 437    min-width: 0;
 438  }
 439  fieldset.media-edit .media-edit__placeholder {
 440    text-align: center;
 441  }
 442  fieldset.media-edit .media-edit__thumbnail {
 443    width: 24px;
 444    aspect-ratio: 1/1;
 445    flex-shrink: 0;
 446    border-radius: 2px;
 447    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);
 448    background-position: 0 0, 4px 4px;
 449    background-size: 8px 8px;
 450  }
 451  fieldset.media-edit .media-edit__expanded {
 452    display: grid;
 453    gap: 8px;
 454  }
 455  fieldset.media-edit .media-edit__expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
 456    display: flex;
 457    align-items: center;
 458    gap: 8px;
 459  }
 460  fieldset.media-edit .media-edit__expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
 461    margin: 0;
 462  }
 463  fieldset.media-edit .media-edit__expanded .media-edit__expanded-preview {
 464    position: relative;
 465    width: 100%;
 466    aspect-ratio: var(--media-edit-expanded-multiple-aspect-ratio, 3/2);
 467    border-radius: 2px;
 468    padding: 4px;
 469    overflow: hidden;
 470    display: flex;
 471    align-items: center;
 472    justify-content: center;
 473  }
 474  fieldset.media-edit .media-edit__expanded .media-edit__expanded-preview .media-edit__expanded-preview-stack {
 475    width: 100%;
 476    height: 100%;
 477  }
 478  fieldset.media-edit .media-edit__expanded .media-edit__expanded-overlay {
 479    position: absolute;
 480    top: 0;
 481    right: 0;
 482    left: 0;
 483    bottom: 0;
 484    opacity: 0;
 485    pointer-events: none;
 486  }
 487  fieldset.media-edit .media-edit__expanded .media-edit__expanded-overlay * {
 488    pointer-events: auto;
 489  }
 490  fieldset.media-edit .media-edit__expanded .media-edit__expanded-actions {
 491    position: absolute;
 492    top: 4px;
 493    left: 4px;
 494    border-radius: 2px;
 495    background: #fff;
 496  }
 497  fieldset.media-edit .media-edit__expanded .media-edit__expanded-item {
 498    position: relative;
 499    min-width: 0;
 500    border-radius: 4px;
 501  }
 502  fieldset.media-edit .media-edit__expanded .media-edit__expanded-item:hover .media-edit__expanded-overlay, fieldset.media-edit .media-edit__expanded .media-edit__expanded-item:focus-within .media-edit__expanded-overlay {
 503    opacity: 1;
 504  }
 505  fieldset.media-edit .media-edit__expanded .media-edit__expanded-item:not(.has-preview-image) .media-edit__expanded-preview-stack {
 506    padding: 8px;
 507  }
 508  fieldset.media-edit .media-edit__expanded .media-edit__thumbnail {
 509    width: 100%;
 510    height: 100%;
 511    object-fit: cover;
 512    object-position: 50% 50%;
 513    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);
 514    background-position: 0 0, 12px 12px;
 515    background-size: 24px 24px;
 516  }
 517  fieldset.media-edit .media-edit__expanded .media-edit__filename {
 518    text-align: center;
 519    flex: none;
 520  }
 521  fieldset.media-edit .media-edit__expanded .media-edit__picker-button-spinner svg {
 522    margin: 0;
 523  }
 524  fieldset.media-edit .media-edit__expanded.is-single {
 525    grid-template-columns: 1fr;
 526  }
 527  fieldset.media-edit .media-edit__expanded.is-single .media-edit__expanded-preview {
 528    aspect-ratio: 2/1;
 529  }
 530  fieldset.media-edit .media-edit__expanded .media-edit__picker-button {
 531    border-radius: 4px;
 532  }
 533  fieldset.media-edit .media-edit__expanded.is-empty .media-edit__picker-button {
 534    border-radius: 2px;
 535  }
 536  fieldset.media-edit .media-edit__expanded.is-multiple:not(.is-empty) {
 537    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 538  }
 539  @container (max-width: 500px) {
 540    fieldset.media-edit .media-edit__expanded.is-multiple:not(.is-empty) {
 541      grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
 542    }
 543  }
 544  fieldset.media-edit .media-edit__expanded:not(.is-empty) .media-edit__picker-button {
 545    padding: 0;
 546  }
 547  fieldset.media-edit .media-edit__expanded:not(.is-empty) .media-edit__placeholder {
 548    display: flex;
 549    align-items: center;
 550    justify-content: center;
 551    aspect-ratio: var(--media-edit-expanded-multiple-aspect-ratio, 3/2);
 552  }
 553  
 554  .media-upload-modal .components-modal__header {
 555    padding-bottom: 8px;
 556  }
 557  .media-upload-modal .components-modal__frame.is-full-screen .components-modal__content {
 558    margin-bottom: 0;
 559  }
 560  .media-upload-modal .components-modal__content {
 561    padding: 0;
 562  }
 563  .media-upload-modal .dataviews-picker-wrapper > .dataviews__view-actions {
 564    padding-top: 8px;
 565  }
 566  .media-upload-modal .media-upload-modal__footer {
 567    position: sticky;
 568    bottom: 0;
 569    background-color: inherit;
 570    z-index: 2;
 571  }
 572  .media-upload-modal .media-upload-modal__footer.is-uploading .dataviews-picker-footer__bulk-selection {
 573    visibility: hidden;
 574  }
 575  .media-upload-modal .media-upload-modal__footer .dataviews-footer {
 576    position: static;
 577    z-index: auto;
 578  }
 579  .media-upload-modal .media-upload-modal__upload-status {
 580    position: absolute;
 581    display: flex;
 582    align-items: center;
 583    gap: 8px;
 584    background-color: var(--wp-dataviews-color-background, #fff);
 585    right: 24px;
 586    top: 1px;
 587    bottom: 1px;
 588    z-index: 1;
 589  }
 590  .media-upload-modal .media-upload-modal__upload-status .components-spinner {
 591    width: 16px;
 592    height: 16px;
 593    margin: 0;
 594  }
 595  
 596  .media-upload-modal__snackbar {
 597    position: fixed;
 598    bottom: var(--wpds-dimension-size-md, 32px);
 599    right: 0;
 600    left: 0;
 601    padding-inline: 16px;
 602    box-sizing: border-box;
 603    display: flex;
 604    flex-direction: column;
 605    pointer-events: none;
 606  }
 607  .media-upload-modal__snackbar .components-snackbar {
 608    margin-inline: auto;
 609  }
 610  .media-upload-modal__snackbar {
 611    z-index: 200000;
 612  }
 613  .media-upload-modal__snackbar > div {
 614    transform: none !important;
 615    transform-origin: 100% !important;
 616  }
 617  
 618  .media-upload-modal__upload-status__popover .components-popover__content {
 619    width: 320px;
 620  }
 621  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__header {
 622    display: flex;
 623    align-items: center;
 624    justify-content: space-between;
 625    padding: 12px 16px;
 626  }
 627  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__header h3 {
 628    margin: 0;
 629    font-size: 13px;
 630    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 631  }
 632  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__list {
 633    max-height: 200px;
 634    overflow-y: auto;
 635    margin: 0;
 636    padding: 0 0 4px;
 637    list-style: none;
 638  }
 639  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__item {
 640    display: flex;
 641    align-items: flex-start;
 642    margin-bottom: 0;
 643    justify-content: space-between;
 644    gap: 8px;
 645    padding: 8px 16px;
 646  }
 647  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__item .components-spinner {
 648    flex-shrink: 0;
 649    width: 16px;
 650    height: 16px;
 651    margin: 0;
 652  }
 653  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__filename {
 654    overflow: hidden;
 655    text-overflow: ellipsis;
 656    white-space: nowrap;
 657    min-width: 0;
 658    flex: 1;
 659    font-size: 12px;
 660  }