[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: left;
 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-left: -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    right: 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    left: 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    /*rtl:begin:ignore*/
 448    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);
 449    background-position: 0 0, 4px 4px;
 450    /*rtl:end:ignore*/
 451    background-size: 8px 8px;
 452  }
 453  fieldset.media-edit .media-edit__expanded {
 454    display: grid;
 455    gap: 8px;
 456  }
 457  fieldset.media-edit .media-edit__expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
 458    display: flex;
 459    align-items: center;
 460    gap: 8px;
 461  }
 462  fieldset.media-edit .media-edit__expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
 463    margin: 0;
 464  }
 465  fieldset.media-edit .media-edit__expanded .media-edit__expanded-preview {
 466    position: relative;
 467    width: 100%;
 468    aspect-ratio: var(--media-edit-expanded-multiple-aspect-ratio, 3/2);
 469    border-radius: 2px;
 470    padding: 4px;
 471    overflow: hidden;
 472    display: flex;
 473    align-items: center;
 474    justify-content: center;
 475  }
 476  fieldset.media-edit .media-edit__expanded .media-edit__expanded-preview .media-edit__expanded-preview-stack {
 477    width: 100%;
 478    height: 100%;
 479  }
 480  fieldset.media-edit .media-edit__expanded .media-edit__expanded-overlay {
 481    position: absolute;
 482    top: 0;
 483    left: 0;
 484    right: 0;
 485    bottom: 0;
 486    opacity: 0;
 487    pointer-events: none;
 488  }
 489  fieldset.media-edit .media-edit__expanded .media-edit__expanded-overlay * {
 490    pointer-events: auto;
 491  }
 492  fieldset.media-edit .media-edit__expanded .media-edit__expanded-actions {
 493    position: absolute;
 494    top: 4px;
 495    right: 4px;
 496    border-radius: 2px;
 497    background: #fff;
 498  }
 499  fieldset.media-edit .media-edit__expanded .media-edit__expanded-item {
 500    position: relative;
 501    min-width: 0;
 502    border-radius: 4px;
 503  }
 504  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 {
 505    opacity: 1;
 506  }
 507  fieldset.media-edit .media-edit__expanded .media-edit__expanded-item:not(.has-preview-image) .media-edit__expanded-preview-stack {
 508    padding: 8px;
 509  }
 510  fieldset.media-edit .media-edit__expanded .media-edit__thumbnail {
 511    width: 100%;
 512    height: 100%;
 513    object-fit: cover;
 514    object-position: 50% 50%;
 515    /*rtl:begin:ignore*/
 516    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);
 517    background-position: 0 0, 12px 12px;
 518    /*rtl:end:ignore*/
 519    background-size: 24px 24px;
 520  }
 521  fieldset.media-edit .media-edit__expanded .media-edit__filename {
 522    text-align: center;
 523    flex: none;
 524  }
 525  fieldset.media-edit .media-edit__expanded .media-edit__picker-button-spinner svg {
 526    margin: 0;
 527  }
 528  fieldset.media-edit .media-edit__expanded.is-single {
 529    grid-template-columns: 1fr;
 530  }
 531  fieldset.media-edit .media-edit__expanded.is-single .media-edit__expanded-preview {
 532    aspect-ratio: 2/1;
 533  }
 534  fieldset.media-edit .media-edit__expanded .media-edit__picker-button {
 535    border-radius: 4px;
 536  }
 537  fieldset.media-edit .media-edit__expanded.is-empty .media-edit__picker-button {
 538    border-radius: 2px;
 539  }
 540  fieldset.media-edit .media-edit__expanded.is-multiple:not(.is-empty) {
 541    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 542  }
 543  @container (max-width: 500px) {
 544    fieldset.media-edit .media-edit__expanded.is-multiple:not(.is-empty) {
 545      grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
 546    }
 547  }
 548  fieldset.media-edit .media-edit__expanded:not(.is-empty) .media-edit__picker-button {
 549    padding: 0;
 550  }
 551  fieldset.media-edit .media-edit__expanded:not(.is-empty) .media-edit__placeholder {
 552    display: flex;
 553    align-items: center;
 554    justify-content: center;
 555    aspect-ratio: var(--media-edit-expanded-multiple-aspect-ratio, 3/2);
 556  }
 557  
 558  .media-upload-modal .components-modal__header {
 559    padding-bottom: 8px;
 560  }
 561  .media-upload-modal .components-modal__frame.is-full-screen .components-modal__content {
 562    margin-bottom: 0;
 563  }
 564  .media-upload-modal .components-modal__content {
 565    padding: 0;
 566  }
 567  .media-upload-modal .dataviews-picker-wrapper > .dataviews__view-actions {
 568    padding-top: 8px;
 569  }
 570  .media-upload-modal .media-upload-modal__footer {
 571    position: sticky;
 572    bottom: 0;
 573    background-color: inherit;
 574    z-index: 2;
 575  }
 576  .media-upload-modal .media-upload-modal__footer.is-uploading .dataviews-picker-footer__bulk-selection {
 577    visibility: hidden;
 578  }
 579  .media-upload-modal .media-upload-modal__footer .dataviews-footer {
 580    position: static;
 581    z-index: auto;
 582  }
 583  .media-upload-modal .media-upload-modal__upload-status {
 584    position: absolute;
 585    display: flex;
 586    align-items: center;
 587    gap: 8px;
 588    background-color: var(--wp-dataviews-color-background, #fff);
 589    left: 24px;
 590    top: 1px;
 591    bottom: 1px;
 592    z-index: 1;
 593  }
 594  .media-upload-modal .media-upload-modal__upload-status .components-spinner {
 595    width: 16px;
 596    height: 16px;
 597    margin: 0;
 598  }
 599  
 600  .media-upload-modal__snackbar {
 601    position: fixed;
 602    bottom: var(--wpds-dimension-size-md, 32px);
 603    left: 0;
 604    right: 0;
 605    padding-inline: 16px;
 606    box-sizing: border-box;
 607    display: flex;
 608    flex-direction: column;
 609    pointer-events: none;
 610  }
 611  .media-upload-modal__snackbar .components-snackbar {
 612    margin-inline: auto;
 613  }
 614  .media-upload-modal__snackbar {
 615    z-index: 200000;
 616  }
 617  .media-upload-modal__snackbar > div {
 618    transform: none !important;
 619    transform-origin: 0 !important;
 620  }
 621  
 622  .media-upload-modal__upload-status__popover .components-popover__content {
 623    width: 320px;
 624  }
 625  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__header {
 626    display: flex;
 627    align-items: center;
 628    justify-content: space-between;
 629    padding: 12px 16px;
 630  }
 631  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__header h3 {
 632    margin: 0;
 633    font-size: 13px;
 634    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 635  }
 636  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__list {
 637    max-height: 200px;
 638    overflow-y: auto;
 639    margin: 0;
 640    padding: 0 0 4px;
 641    list-style: none;
 642  }
 643  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__item {
 644    display: flex;
 645    align-items: flex-start;
 646    margin-bottom: 0;
 647    justify-content: space-between;
 648    gap: 8px;
 649    padding: 8px 16px;
 650  }
 651  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__item .components-spinner {
 652    flex-shrink: 0;
 653    width: 16px;
 654    height: 16px;
 655    margin: 0;
 656  }
 657  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__filename {
 658    overflow: hidden;
 659    text-overflow: ellipsis;
 660    white-space: nowrap;
 661    min-width: 0;
 662    flex: 1;
 663    font-size: 12px;
 664  }