[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  .block-editor-format-toolbar__image-popover {
  84    z-index: 159990;
  85  }
  86  
  87  .block-editor-format-toolbar__image-container-content {
  88    display: flex;
  89  }
  90  .block-editor-format-toolbar__image-container-content .components-button {
  91    align-self: flex-end;
  92    height: 30px;
  93    margin-bottom: 8px;
  94    margin-left: 8px;
  95    padding: 0 6px;
  96  }
  97  
  98  .block-editor-format-toolbar__image-container-value {
  99    margin: 7px;
 100    flex-grow: 1;
 101    flex-shrink: 1;
 102    white-space: nowrap;
 103    min-width: 150px;
 104    max-width: 500px;
 105  }
 106  .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__field {
 107    margin-bottom: 0;
 108  }
 109  .block-editor-format-toolbar__image-container-value.components-base-control .components-base-control__label {
 110    display: block;
 111  }
 112  
 113  .block-editor-format-toolbar__link-container-content {
 114    display: flex;
 115  }
 116  
 117  .block-editor-format-toolbar__link-container-value {
 118    margin: 7px;
 119    flex-grow: 1;
 120    flex-shrink: 1;
 121    overflow: hidden;
 122    text-overflow: ellipsis;
 123    white-space: nowrap;
 124    min-width: 150px;
 125    max-width: 500px;
 126  }
 127  .block-editor-format-toolbar__link-container-value.has-invalid-link {
 128    color: #cc1818;
 129  }
 130  
 131  .components-inline-color__indicator {
 132    position: absolute;
 133    background: #000;
 134    height: 3px;
 135    width: 20px;
 136    bottom: 6px;
 137    right: auto;
 138    left: auto;
 139    margin: 0 5px;
 140  }
 141  
 142  .components-inline-color-popover .components-popover__content > div {
 143    padding: 20px 18px;
 144  }
 145  .components-inline-color-popover .components-popover__content .components-color-palette {
 146    margin-top: 0.6rem;
 147  }
 148  .components-inline-color-popover .components-popover__content .components-base-control__title {
 149    display: block;
 150    margin-bottom: 16px;
 151    font-weight: 600;
 152    color: #191e23;
 153  }
 154  .components-inline-color-popover .components-popover__content .component-color-indicator {
 155    vertical-align: text-bottom;
 156  }
 157  
 158  .format-library-text-color-button {
 159    position: relative;
 160  }
 161  
 162  .format-library-text-color-button__indicator {
 163    height: 4px;
 164    width: 20px;
 165    position: absolute;
 166    bottom: 10px;
 167    right: 8px;
 168  }