[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  #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector {
  84    background: #fff;
  85    box-sizing: border-box;
  86  }
  87  #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector * {
  88    box-sizing: inherit;
  89  }
  90  #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector {
  91    margin: -12px;
  92  }
  93  #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector h3 {
  94    margin-bottom: 0;
  95  }
  96  
  97  #customize-theme-controls .customize-pane-child.control-section-sidebar.is-sub-section-open {
  98    transform: translateX(100%);
  99  }
 100  
 101  .customize-widgets-header {
 102    display: flex;
 103    justify-content: flex-end;
 104    margin: -15px -12px 0 -12px;
 105    background: #f0f0f1;
 106    border-bottom: 1px solid #e0e0e0;
 107    z-index: 8;
 108  }
 109  @media (min-width: 782px) {
 110    .customize-widgets-header {
 111      margin-bottom: 76px;
 112    }
 113  }
 114  .customize-widgets-header.is-fixed-toolbar-active {
 115    margin-bottom: 0;
 116  }
 117  
 118  .customize-widgets-header-toolbar {
 119    display: flex;
 120    border: none;
 121    width: 100%;
 122    align-items: center;
 123  }
 124  .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon {
 125    border-radius: 2px;
 126    color: #fff;
 127    padding: 0;
 128    min-width: 24px;
 129    height: 24px;
 130    margin: 12px auto 12px 0;
 131  }
 132  .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon::before {
 133    content: none;
 134  }
 135  .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon.is-pressed {
 136    background: #1e1e1e;
 137  }
 138  .customize-widgets-header-toolbar .components-button.has-icon.customize-widgets-editor-history-button.redo-button {
 139    margin-right: -12px;
 140  }
 141  
 142  #customize-sidebar-outer-content {
 143    width: auto;
 144    min-width: 100%;
 145  }
 146  
 147  #customize-outer-theme-controls .widgets-inserter {
 148    padding: 0;
 149  }
 150  #customize-outer-theme-controls .widgets-inserter .customize-section-description-container {
 151    display: none;
 152  }
 153  
 154  .customize-widgets-layout__inserter-panel {
 155    background: #fff;
 156  }
 157  
 158  .customize-widgets-layout__inserter-panel-header {
 159    display: flex;
 160    justify-content: space-between;
 161    align-items: center;
 162    padding: 16px;
 163    height: 46px;
 164    box-sizing: border-box;
 165    border-bottom: 1px solid #ddd;
 166  }
 167  .customize-widgets-layout__inserter-panel-header .customize-widgets-layout__inserter-panel-header-title {
 168    margin: 0;
 169  }
 170  
 171  .block-editor-inserter__quick-inserter .block-editor-inserter__panel-content {
 172    background: #fff;
 173  }
 174  
 175  .customize-widgets-keyboard-shortcut-help-modal__section {
 176    margin: 0 0 2rem 0;
 177  }
 178  .customize-widgets-keyboard-shortcut-help-modal__main-shortcuts .customize-widgets-keyboard-shortcut-help-modal__shortcut-list {
 179    margin-top: -25px;
 180  }
 181  .customize-widgets-keyboard-shortcut-help-modal__section-title {
 182    font-size: 0.9rem;
 183    font-weight: 600;
 184  }
 185  .customize-widgets-keyboard-shortcut-help-modal__shortcut {
 186    display: flex;
 187    align-items: baseline;
 188    padding: 0.6rem 0;
 189    border-top: 1px solid #ddd;
 190    margin-bottom: 0;
 191  }
 192  .customize-widgets-keyboard-shortcut-help-modal__shortcut:last-child {
 193    border-bottom: 1px solid #ddd;
 194  }
 195  .customize-widgets-keyboard-shortcut-help-modal__shortcut:empty {
 196    display: none;
 197  }
 198  .customize-widgets-keyboard-shortcut-help-modal__shortcut-term {
 199    font-weight: 600;
 200    margin: 0 1rem 0 0;
 201    text-align: left;
 202  }
 203  .customize-widgets-keyboard-shortcut-help-modal__shortcut-description {
 204    flex: 1;
 205    margin: 0;
 206    flex-basis: auto;
 207  }
 208  .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
 209    display: block;
 210    background: none;
 211    margin: 0;
 212    padding: 0;
 213  }
 214  .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
 215    margin-top: 10px;
 216  }
 217  .customize-widgets-keyboard-shortcut-help-modal__shortcut-key {
 218    padding: 0.25rem 0.5rem;
 219    border-radius: 8%;
 220    margin: 0 0.2rem 0 0.2rem;
 221  }
 222  .customize-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child {
 223    margin: 0 0.2rem 0 0;
 224  }
 225  
 226  .customize-widgets-more-menu {
 227    margin-right: -4px;
 228  }
 229  .customize-widgets-more-menu .components-button {
 230    width: auto;
 231    padding: 0 2px;
 232  }
 233  @media (min-width: 600px) {
 234    .customize-widgets-more-menu {
 235      margin-right: 0;
 236    }
 237    .customize-widgets-more-menu .components-button {
 238      padding: 0 4px;
 239    }
 240  }
 241  
 242  .customize-widgets-more-menu__content .components-popover__content {
 243    min-width: 280px;
 244  }
 245  @media (min-width: 480px) {
 246    .customize-widgets-more-menu__content .components-popover__content {
 247      width: auto;
 248      max-width: 480px;
 249    }
 250  }
 251  .customize-widgets-more-menu__content .components-popover__content .components-dropdown-menu__menu {
 252    padding: 0;
 253  }
 254  
 255  .components-popover.customize-widgets-more-menu__content {
 256    z-index: 99998;
 257  }
 258  
 259  .block-editor-block-contextual-toolbar.is-fixed {
 260    top: 0;
 261    margin-right: -12px;
 262    margin-left: -12px;
 263    width: calc(100% + 24px);
 264    overflow-y: auto;
 265    z-index: 7;
 266  }
 267  
 268  .customize-control-sidebar_block_editor .block-editor-block-list__block-popover {
 269    position: fixed;
 270    z-index: 7;
 271  }
 272  
 273  .customize-widgets-welcome-guide__image__wrapper {
 274    background: #00a0d2;
 275    text-align: center;
 276    margin-bottom: 8px;
 277  }
 278  .customize-widgets-welcome-guide__image {
 279    height: auto;
 280  }
 281  .wrap .customize-widgets-welcome-guide__heading {
 282    font-size: 18px;
 283    font-weight: 600;
 284  }
 285  .customize-widgets-welcome-guide__text {
 286    line-height: 1.7;
 287  }
 288  .customize-widgets-welcome-guide__button {
 289    justify-content: center;
 290    margin: 1em 0;
 291    width: 100%;
 292  }
 293  .customize-widgets-welcome-guide__separator {
 294    margin: 1em 0;
 295  }
 296  .customize-widgets-welcome-guide__more-info {
 297    line-height: 1.4;
 298  }
 299  
 300  #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section {
 301    min-height: 100%;
 302    background-color: #fff;
 303    padding-top: 12px !important;
 304  }
 305  #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section.open {
 306    overflow: unset;
 307  }
 308  #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section .customize-section-title {
 309    position: static !important;
 310    margin-top: -12px !important;
 311    width: unset !important;
 312  }
 313  
 314  .components-modal__screen-overlay {
 315    z-index: 999999;
 316  }
 317  
 318  .customize-control-sidebar_block_editor,
 319  .customize-widgets-layout__inspector,
 320  .customize-widgets-popover {
 321    box-sizing: border-box;
 322  }
 323  .customize-control-sidebar_block_editor *,
 324  .customize-control-sidebar_block_editor *::before,
 325  .customize-control-sidebar_block_editor *::after,
 326  .customize-widgets-layout__inspector *,
 327  .customize-widgets-layout__inspector *::before,
 328  .customize-widgets-layout__inspector *::after,
 329  .customize-widgets-popover *,
 330  .customize-widgets-popover *::before,
 331  .customize-widgets-popover *::after {
 332    box-sizing: inherit;
 333  }