[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  :root {
  84    /* stylelint-disable function-comma-space-after */
  85    /* stylelint-enable function-comma-space-after */
  86  }
  87  :root .has-pale-pink-background-color {
  88    background-color: #f78da7;
  89  }
  90  :root .has-vivid-red-background-color {
  91    background-color: #cf2e2e;
  92  }
  93  :root .has-luminous-vivid-orange-background-color {
  94    background-color: #ff6900;
  95  }
  96  :root .has-luminous-vivid-amber-background-color {
  97    background-color: #fcb900;
  98  }
  99  :root .has-light-green-cyan-background-color {
 100    background-color: #7bdcb5;
 101  }
 102  :root .has-vivid-green-cyan-background-color {
 103    background-color: #00d084;
 104  }
 105  :root .has-pale-cyan-blue-background-color {
 106    background-color: #8ed1fc;
 107  }
 108  :root .has-vivid-cyan-blue-background-color {
 109    background-color: #0693e3;
 110  }
 111  :root .has-vivid-purple-background-color {
 112    background-color: #9b51e0;
 113  }
 114  :root .has-white-background-color {
 115    background-color: #fff;
 116  }
 117  :root .has-very-light-gray-background-color {
 118    background-color: #eee;
 119  }
 120  :root .has-cyan-bluish-gray-background-color {
 121    background-color: #abb8c3;
 122  }
 123  :root .has-very-dark-gray-background-color {
 124    background-color: #313131;
 125  }
 126  :root .has-black-background-color {
 127    background-color: #000;
 128  }
 129  :root .has-pale-pink-color {
 130    color: #f78da7;
 131  }
 132  :root .has-vivid-red-color {
 133    color: #cf2e2e;
 134  }
 135  :root .has-luminous-vivid-orange-color {
 136    color: #ff6900;
 137  }
 138  :root .has-luminous-vivid-amber-color {
 139    color: #fcb900;
 140  }
 141  :root .has-light-green-cyan-color {
 142    color: #7bdcb5;
 143  }
 144  :root .has-vivid-green-cyan-color {
 145    color: #00d084;
 146  }
 147  :root .has-pale-cyan-blue-color {
 148    color: #8ed1fc;
 149  }
 150  :root .has-vivid-cyan-blue-color {
 151    color: #0693e3;
 152  }
 153  :root .has-vivid-purple-color {
 154    color: #9b51e0;
 155  }
 156  :root .has-white-color {
 157    color: #fff;
 158  }
 159  :root .has-very-light-gray-color {
 160    color: #eee;
 161  }
 162  :root .has-cyan-bluish-gray-color {
 163    color: #abb8c3;
 164  }
 165  :root .has-very-dark-gray-color {
 166    color: #313131;
 167  }
 168  :root .has-black-color {
 169    color: #000;
 170  }
 171  :root .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
 172    background: linear-gradient(-135deg, #0693e3 0%, #9b51e0 100%);
 173  }
 174  :root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
 175    background: linear-gradient(-135deg, #00d084 0%, #0693e3 100%);
 176  }
 177  :root .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
 178    background: linear-gradient(-135deg, #7adcb4 0%, #00d082 100%);
 179  }
 180  :root .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
 181    background: linear-gradient(-135deg, #fcb900 0%, #ff6900 100%);
 182  }
 183  :root .has-luminous-vivid-orange-to-vivid-red-gradient-background {
 184    background: linear-gradient(-135deg, #ff6900 0%, #cf2e2e 100%);
 185  }
 186  :root .has-very-light-gray-to-cyan-bluish-gray-gradient-background {
 187    background: linear-gradient(-135deg, #eeeeee 0%, #a9b8c3 100%);
 188  }
 189  :root .has-cool-to-warm-spectrum-gradient-background {
 190    background: linear-gradient(-135deg, #4aeadc 0%, #9778d1 20%, #cf2aba 40%, #ee2c82 60%, #fb6962 80%, #fef84c 100%);
 191  }
 192  :root .has-blush-light-purple-gradient-background {
 193    background: linear-gradient(-135deg, #ffceec 0%, #9896f0 100%);
 194  }
 195  :root .has-blush-bordeaux-gradient-background {
 196    background: linear-gradient(-135deg, #fecda5 0%, #fe2d2d 50%, #6b003e 100%);
 197  }
 198  :root .has-purple-crush-gradient-background {
 199    background: linear-gradient(-135deg, #34e2e4 0%, #4721fb 50%, #ab1dfe 100%);
 200  }
 201  :root .has-luminous-dusk-gradient-background {
 202    background: linear-gradient(-135deg, #ffcb70 0%, #c751c0 50%, #4158d0 100%);
 203  }
 204  :root .has-hazy-dawn-gradient-background {
 205    background: linear-gradient(-135deg, #faaca8 0%, #dad0ec 100%);
 206  }
 207  :root .has-pale-ocean-gradient-background {
 208    background: linear-gradient(-135deg, #fff5cb 0%, #b6e3d4 50%, #33a7b5 100%);
 209  }
 210  :root .has-electric-grass-gradient-background {
 211    background: linear-gradient(-135deg, #caf880 0%, #71ce7e 100%);
 212  }
 213  :root .has-subdued-olive-gradient-background {
 214    background: linear-gradient(-135deg, #fafae1 0%, #67a671 100%);
 215  }
 216  :root .has-atomic-cream-gradient-background {
 217    background: linear-gradient(-135deg, #fdd79a 0%, #004a59 100%);
 218  }
 219  :root .has-nightshade-gradient-background {
 220    background: linear-gradient(-135deg, #330968 0%, #31cdcf 100%);
 221  }
 222  :root .has-midnight-gradient-background {
 223    background: linear-gradient(-135deg, #020381 0%, #2874fc 100%);
 224  }
 225  
 226  .has-small-font-size {
 227    font-size: 0.8125em;
 228  }
 229  
 230  .has-regular-font-size,
 231  .has-normal-font-size {
 232    font-size: 1em;
 233  }
 234  
 235  .has-medium-font-size {
 236    font-size: 1.25em;
 237  }
 238  
 239  .has-large-font-size {
 240    font-size: 2.25em;
 241  }
 242  
 243  .has-larger-font-size,
 244  .has-huge-font-size {
 245    font-size: 2.625em;
 246  }
 247  
 248  .has-text-align-center {
 249    text-align: center;
 250  }
 251  
 252  .has-text-align-left {
 253    text-align: left;
 254  }
 255  
 256  .has-text-align-right {
 257    text-align: right;
 258  }
 259  
 260  #end-resizable-editor-section {
 261    display: none;
 262  }
 263  
 264  .aligncenter {
 265    clear: both;
 266  }
 267  
 268  .items-justified-left {
 269    justify-content: flex-start;
 270  }
 271  
 272  .items-justified-center {
 273    justify-content: center;
 274  }
 275  
 276  .items-justified-right {
 277    justify-content: flex-end;
 278  }
 279  
 280  .items-justified-space-between {
 281    justify-content: space-between;
 282  }
 283  
 284  .screen-reader-text {
 285    border: 0;
 286    clip: rect(1px, 1px, 1px, 1px);
 287    -webkit-clip-path: inset(50%);
 288    clip-path: inset(50%);
 289    height: 1px;
 290    margin: -1px;
 291    overflow: hidden;
 292    padding: 0;
 293    position: absolute;
 294    width: 1px;
 295    word-wrap: normal !important;
 296  }
 297  
 298  .screen-reader-text:focus {
 299    background-color: #ddd;
 300    clip: auto !important;
 301    -webkit-clip-path: none;
 302            clip-path: none;
 303    color: #444;
 304    display: block;
 305    font-size: 1em;
 306    height: auto;
 307    right: 5px;
 308    line-height: normal;
 309    padding: 15px 23px 14px;
 310    text-decoration: none;
 311    top: 5px;
 312    width: auto;
 313    z-index: 100000;
 314  }