[Summary view] [Print] [Text view]

   1  /**
   2   * Colors
   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   * 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  .wp-block-post-featured-image .block-editor-media-placeholder {
  47    z-index: 1;
  48    backdrop-filter: none;
  49  }
  50  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
  51  .wp-block-post-featured-image .components-placeholder {
  52    justify-content: center;
  53    align-items: center;
  54    padding: 0;
  55    display: flex;
  56  }
  57  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
  58  .wp-block-post-featured-image .components-placeholder .components-form-file-upload {
  59    display: none;
  60  }
  61  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
  62  .wp-block-post-featured-image .components-placeholder .components-button {
  63    margin: auto;
  64    padding: 0;
  65    display: flex;
  66    justify-content: center;
  67    align-items: center;
  68    width: 48px;
  69    height: 48px;
  70    border-radius: 50%;
  71    position: relative;
  72    background: var(--wp-admin-theme-color);
  73    border-color: var(--wp-admin-theme-color);
  74    border-style: solid;
  75    color: #fff;
  76  }
  77  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button > svg,
  78  .wp-block-post-featured-image .components-placeholder .components-button > svg {
  79    color: inherit;
  80  }
  81  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
  82  .wp-block-post-featured-image .components-placeholder {
  83    min-height: 200px;
  84  }
  85  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
  86  .wp-block-post-featured-image .components-placeholder:where(.has-border-color),
  87  .wp-block-post-featured-image img:where(.has-border-color) {
  88    border-style: solid;
  89  }
  90  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),
  91  .wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),
  92  .wp-block-post-featured-image img:where([style*=border-top-color]) {
  93    border-top-style: solid;
  94  }
  95  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),
  96  .wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),
  97  .wp-block-post-featured-image img:where([style*=border-right-color]) {
  98    border-right-style: solid;
  99  }
 100  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),
 101  .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),
 102  .wp-block-post-featured-image img:where([style*=border-bottom-color]) {
 103    border-bottom-style: solid;
 104  }
 105  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),
 106  .wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),
 107  .wp-block-post-featured-image img:where([style*=border-left-color]) {
 108    border-left-style: solid;
 109  }
 110  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),
 111  .wp-block-post-featured-image .components-placeholder:where([style*=border-width]),
 112  .wp-block-post-featured-image img:where([style*=border-width]) {
 113    border-style: solid;
 114  }
 115  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),
 116  .wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),
 117  .wp-block-post-featured-image img:where([style*=border-top-width]) {
 118    border-top-style: solid;
 119  }
 120  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),
 121  .wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),
 122  .wp-block-post-featured-image img:where([style*=border-right-width]) {
 123    border-right-style: solid;
 124  }
 125  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),
 126  .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),
 127  .wp-block-post-featured-image img:where([style*=border-bottom-width]) {
 128    border-bottom-style: solid;
 129  }
 130  .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),
 131  .wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),
 132  .wp-block-post-featured-image img:where([style*=border-left-width]) {
 133    border-left-style: solid;
 134  }
 135  .wp-block-post-featured-image[style*=height] .components-placeholder {
 136    min-height: 48px;
 137    min-width: 48px;
 138    height: 100%;
 139    width: 100%;
 140  }
 141  .wp-block-post-featured-image > a {
 142    pointer-events: none;
 143  }
 144  .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
 145  .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
 146  .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
 147    opacity: 1;
 148    pointer-events: auto;
 149  }
 150  .wp-block-post-featured-image.is-transient {
 151    position: relative;
 152  }
 153  .wp-block-post-featured-image.is-transient img {
 154    opacity: 0.3;
 155  }
 156  .wp-block-post-featured-image.is-transient .components-spinner {
 157    position: absolute;
 158    top: 50%;
 159    left: 50%;
 160    transform: translate(-50%, -50%);
 161  }
 162  
 163  div[data-type="core/post-featured-image"] img {
 164    max-width: 100%;
 165    height: auto;
 166    display: block;
 167  }