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