[Summary view] [Print] [Text view]

   1  /**
   2   * Colors
   3   */
   4  /**
   5   * Breakpoints & Media Queries
   6   */
   7  /**
   8   * SCSS Variables.
   9   *
  10   * Please use variables from this sheet to ensure consistency across the UI.
  11   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  12   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  13   */
  14  /**
  15   * Colors
  16   */
  17  /**
  18   * Fonts & basic variables.
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Dimensions.
  26   */
  27  /**
  28   * Shadows.
  29   */
  30  /**
  31   * Editor widths.
  32   */
  33  /**
  34   * Block & Editor UI.
  35   */
  36  /**
  37   * Block paddings.
  38   */
  39  /**
  40   * React Native specific.
  41   * These variables do not appear to be used anywhere else.
  42   */
  43  /**
  44   * Breakpoint mixins
  45   */
  46  /**
  47   * Long content fade mixin
  48   *
  49   * Creates a fading overlay to signify that the content is longer
  50   * than the space allows.
  51   */
  52  /**
  53   * Focus styles.
  54   */
  55  /**
  56   * Applies editor left position to the selector passed as argument
  57   */
  58  /**
  59   * Styles that are reused verbatim in a few places
  60   */
  61  /**
  62   * Allows users to opt-out of animations via OS-level preferences.
  63   */
  64  /**
  65   * Reset default styles for JavaScript UI based pages.
  66   * This is a WP-admin agnostic reset
  67   */
  68  /**
  69   * Reset the WP Admin page styles for Gutenberg-like pages.
  70   */
  71  :root {
  72    --wp-admin-theme-color: #007cba;
  73    --wp-admin-theme-color-darker-10: #006ba1;
  74    --wp-admin-theme-color-darker-20: #005a87;
  75    --wp-admin-border-width-focus: 2px;
  76  }
  77  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  78    :root {
  79      --wp-admin-border-width-focus: 1.5px;
  80    }
  81  }
  82  
  83  .list-reusable-blocks-import-dropdown__content .components-popover__content > div {
  84    padding: 10px;
  85  }
  86  
  87  .list-reusable-blocks-import-form__label {
  88    display: block;
  89    margin-bottom: 10px;
  90  }
  91  
  92  .list-reusable-blocks-import-form__button {
  93    margin-top: 10px;
  94    margin-bottom: 10px;
  95    float: right;
  96  }
  97  
  98  .list-reusable-blocks-import-form .components-notice__content {
  99    margin: 0;
 100  }
 101  .list-reusable-blocks-import-form .components-notice.is-dismissible {
 102    padding-right: 0;
 103    margin: 5px 0;
 104  }
 105  
 106  .list-reusable-blocks__container {
 107    display: inline-flex;
 108    align-items: center;
 109    position: relative;
 110    top: -3px;
 111  }
 112  .list-reusable-blocks__container .components-button {
 113    height: 26px;
 114  }
 115  
 116  body.admin-color-light {
 117    --wp-admin-theme-color: #0085ba;
 118    --wp-admin-theme-color-darker-10: #0073a1;
 119    --wp-admin-theme-color-darker-20: #006187;
 120    --wp-admin-border-width-focus: 2px;
 121  }
 122  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 123    body.admin-color-light {
 124      --wp-admin-border-width-focus: 1.5px;
 125    }
 126  }
 127  
 128  body.admin-color-modern {
 129    --wp-admin-theme-color: #3858e9;
 130    --wp-admin-theme-color-darker-10: #2145e6;
 131    --wp-admin-theme-color-darker-20: #183ad6;
 132    --wp-admin-border-width-focus: 2px;
 133  }
 134  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 135    body.admin-color-modern {
 136      --wp-admin-border-width-focus: 1.5px;
 137    }
 138  }
 139  
 140  body.admin-color-blue {
 141    --wp-admin-theme-color: #096484;
 142    --wp-admin-theme-color-darker-10: #07526c;
 143    --wp-admin-theme-color-darker-20: #064054;
 144    --wp-admin-border-width-focus: 2px;
 145  }
 146  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 147    body.admin-color-blue {
 148      --wp-admin-border-width-focus: 1.5px;
 149    }
 150  }
 151  
 152  body.admin-color-coffee {
 153    --wp-admin-theme-color: #46403c;
 154    --wp-admin-theme-color-darker-10: #383330;
 155    --wp-admin-theme-color-darker-20: #2b2724;
 156    --wp-admin-border-width-focus: 2px;
 157  }
 158  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 159    body.admin-color-coffee {
 160      --wp-admin-border-width-focus: 1.5px;
 161    }
 162  }
 163  
 164  body.admin-color-ectoplasm {
 165    --wp-admin-theme-color: #523f6d;
 166    --wp-admin-theme-color-darker-10: #46365d;
 167    --wp-admin-theme-color-darker-20: #3a2c4d;
 168    --wp-admin-border-width-focus: 2px;
 169  }
 170  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 171    body.admin-color-ectoplasm {
 172      --wp-admin-border-width-focus: 1.5px;
 173    }
 174  }
 175  
 176  body.admin-color-midnight {
 177    --wp-admin-theme-color: #e14d43;
 178    --wp-admin-theme-color-darker-10: #dd382d;
 179    --wp-admin-theme-color-darker-20: #d02c21;
 180    --wp-admin-border-width-focus: 2px;
 181  }
 182  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 183    body.admin-color-midnight {
 184      --wp-admin-border-width-focus: 1.5px;
 185    }
 186  }
 187  
 188  body.admin-color-ocean {
 189    --wp-admin-theme-color: #627c83;
 190    --wp-admin-theme-color-darker-10: #576e74;
 191    --wp-admin-theme-color-darker-20: #4c6066;
 192    --wp-admin-border-width-focus: 2px;
 193  }
 194  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 195    body.admin-color-ocean {
 196      --wp-admin-border-width-focus: 1.5px;
 197    }
 198  }
 199  
 200  body.admin-color-sunrise {
 201    --wp-admin-theme-color: #dd823b;
 202    --wp-admin-theme-color-darker-10: #d97426;
 203    --wp-admin-theme-color-darker-20: #c36922;
 204    --wp-admin-border-width-focus: 2px;
 205  }
 206  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 207    body.admin-color-sunrise {
 208      --wp-admin-border-width-focus: 1.5px;
 209    }
 210  }