[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    -o-object-fit: cover;
 123    object-fit: cover;
 124    opacity: 1;
 125    border-radius: 100%;
 126  }
 127  
 128  @media not (prefers-reduced-motion) {
 129    .media-author-field__avatar.is-loading img, .media-author-field__avatar.is-loaded img {
 130      transition: opacity 0.1s linear;
 131    }
 132  }
 133  .media-author-field__avatar.is-loading img {
 134    opacity: 0;
 135  }
 136  
 137  .media-author-field__avatar.is-loaded img {
 138    opacity: 1;
 139  }
 140  
 141  .media-author-field__icon {
 142    display: flex;
 143    flex-shrink: 0;
 144    width: 24px;
 145    height: 24px;
 146  }
 147  
 148  .media-author-field__icon svg {
 149    margin-right: -4px;
 150    fill: currentColor;
 151  }
 152  
 153  .media-author-field__name {
 154    text-overflow: ellipsis;
 155    overflow: hidden;
 156  }
 157  
 158  .dataviews-view-table .dataviews-media-field__filename,
 159  .dataviews-view-grid .dataviews-media-field__filename,
 160  .dataviews-view-list .dataviews-media-field__filename {
 161    display: inline-block;
 162    max-inline-size: 15ch;
 163    overflow: hidden;
 164    text-overflow: ellipsis;
 165    white-space: nowrap;
 166    vertical-align: top;
 167  }
 168  
 169  .dataviews-media-field__media-thumbnail {
 170    display: flex;
 171    align-items: center;
 172    position: relative;
 173    height: 100%;
 174  }
 175  
 176  @media not (prefers-reduced-motion) {
 177    .dataviews-media-field__media-thumbnail.is-loading img, .dataviews-media-field__media-thumbnail.is-loaded img {
 178      transition: opacity 0.1s linear;
 179    }
 180  }
 181  .dataviews-media-field__media-thumbnail.is-loading img {
 182    opacity: 0;
 183  }
 184  
 185  .dataviews-media-field__media-thumbnail.is-loaded img {
 186    opacity: 1;
 187  }
 188  
 189  .dataviews-media-field__media-thumbnail--image {
 190    display: block;
 191    width: 100%;
 192    height: 100%;
 193    -o-object-fit: cover;
 194    object-fit: cover;
 195  }
 196  
 197  .dataviews-media-field__media-thumbnail__stack {
 198    color: #757575;
 199    box-sizing: border-box;
 200    width: 100%;
 201    height: 100%;
 202  }
 203  
 204  .dataviews-media-field__media-thumbnail--icon {
 205    color: #757575;
 206    fill: currentColor;
 207  }
 208  
 209  .dataviews-media-field__media-thumbnail__filename {
 210    box-sizing: border-box;
 211    text-align: center;
 212    padding: 0 16px;
 213    width: 100%;
 214    container-type: inline-size;
 215    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 216    font-weight: var(--wpds-typography-font-weight-default, 400);
 217    font-size: 12px;
 218    line-height: 16px;
 219  }
 220  
 221  .dataviews-media-field__media-thumbnail__filename__truncate {
 222    margin-top: 4px;
 223  }
 224  
 225  @container (max-width: 90px) {
 226    .dataviews-media-field__media-thumbnail__filename__truncate {
 227      display: none !important;
 228    }
 229  }
 230  /**
 231   * SCSS Variables.
 232   *
 233   * Please use variables from this sheet to ensure consistency across the UI.
 234   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 235   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 236   */
 237  /**
 238   * Colors
 239   */
 240  /**
 241   * Fonts & basic variables.
 242   */
 243  /**
 244   * Typography
 245   */
 246  /**
 247   * Grid System.
 248   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 249   */
 250  /**
 251   * Radius scale.
 252   */
 253  /**
 254   * Elevation scale.
 255   */
 256  /**
 257   * Dimensions.
 258   */
 259  /**
 260   * Mobile specific styles
 261   */
 262  /**
 263   * Editor styles.
 264   */
 265  /**
 266   * Block & Editor UI.
 267   */
 268  /**
 269   * Block paddings.
 270   */
 271  /**
 272   * React Native specific.
 273   * These variables do not appear to be used anywhere else.
 274   */
 275  /**
 276   * Typography
 277   */
 278  /**
 279   * Breakpoints & Media Queries
 280   */
 281  /**
 282  *  Converts a hex value into the rgb equivalent.
 283  *
 284  * @param {string} hex - the hexadecimal value to convert
 285  * @return {string} comma separated rgb values
 286  */
 287  /**
 288   * Long content fade mixin
 289   *
 290   * Creates a fading overlay to signify that the content is longer
 291   * than the space allows.
 292   */
 293  /**
 294   * Breakpoint mixins
 295   */
 296  /**
 297   * Focus styles.
 298   */
 299  /**
 300   * Standard focus rings for the WordPress Design System.
 301   *
 302   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
 303   * e.g. `&:focus { @include outset-ring__focus(); }`.
 304   */
 305  /**
 306   * Applies editor left position to the selector passed as argument
 307   */
 308  /**
 309   * Styles that are reused verbatim in a few places
 310   */
 311  /**
 312   * Allows users to opt-out of animations via OS-level preferences.
 313   */
 314  /**
 315   * Reset default styles for JavaScript UI based pages.
 316   * This is a WP-admin agnostic reset
 317   */
 318  /**
 319   * Reset the WP Admin page styles for Gutenberg-like pages.
 320   */
 321  /**
 322   * Creates a checkerboard pattern background to indicate transparency.
 323   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
 324   */
 325  .media-upload-modal .components-modal__header {
 326    padding-bottom: 8px;
 327  }
 328  .media-upload-modal .components-modal__frame.is-full-screen .components-modal__content {
 329    margin-bottom: 0;
 330  }
 331  .media-upload-modal .components-modal__content {
 332    padding: 0;
 333  }
 334  .media-upload-modal .dataviews-picker-wrapper > .dataviews__view-actions {
 335    padding-top: 8px;
 336  }
 337  .media-upload-modal .media-upload-modal__footer {
 338    position: sticky;
 339    bottom: 0;
 340    background-color: inherit;
 341    z-index: 2;
 342  }
 343  .media-upload-modal .media-upload-modal__footer.is-uploading .dataviews-picker-footer__bulk-selection {
 344    visibility: hidden;
 345  }
 346  .media-upload-modal .media-upload-modal__footer .dataviews-footer {
 347    position: static;
 348    z-index: auto;
 349  }
 350  .media-upload-modal .media-upload-modal__upload-status {
 351    position: absolute;
 352    display: flex;
 353    align-items: center;
 354    gap: 8px;
 355    background-color: var(--wp-dataviews-color-background, #fff);
 356    right: 24px;
 357    top: 1px;
 358    bottom: 1px;
 359    z-index: 1;
 360  }
 361  .media-upload-modal .media-upload-modal__upload-status .components-spinner {
 362    width: 16px;
 363    height: 16px;
 364    margin: 0;
 365  }
 366  
 367  .media-upload-modal__snackbar {
 368    position: fixed;
 369    bottom: var(--wpds-dimension-size-md, 32px);
 370    right: 0;
 371    left: 0;
 372    padding-inline: 16px;
 373    box-sizing: border-box;
 374    display: flex;
 375    flex-direction: column;
 376    pointer-events: none;
 377  }
 378  .media-upload-modal__snackbar .components-snackbar {
 379    margin-inline: auto;
 380  }
 381  .media-upload-modal__snackbar {
 382    z-index: 200000;
 383  }
 384  .media-upload-modal__snackbar > div {
 385    transform: none !important;
 386    transform-origin: 100% !important;
 387  }
 388  
 389  .media-upload-modal__upload-status__popover .components-popover__content {
 390    width: 320px;
 391  }
 392  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__header {
 393    display: flex;
 394    align-items: center;
 395    justify-content: space-between;
 396    padding: 12px 16px;
 397  }
 398  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__header h3 {
 399    margin: 0;
 400    font-size: 13px;
 401    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 402  }
 403  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__list {
 404    max-height: 200px;
 405    overflow-y: auto;
 406    margin: 0;
 407    padding: 0 0 4px;
 408    list-style: none;
 409  }
 410  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__item {
 411    display: flex;
 412    align-items: flex-start;
 413    margin-bottom: 0;
 414    justify-content: space-between;
 415    gap: 8px;
 416    padding: 8px 16px;
 417  }
 418  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__item .components-spinner {
 419    flex-shrink: 0;
 420    width: 16px;
 421    height: 16px;
 422    margin: 0;
 423  }
 424  .media-upload-modal__upload-status__popover .media-upload-modal__upload-status__filename {
 425    overflow: hidden;
 426    text-overflow: ellipsis;
 427    white-space: nowrap;
 428    min-width: 0;
 429    flex: 1;
 430    font-size: 12px;
 431  }