style.css (8444B)
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 0 12px auto; 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-left: -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 0 0 1rem; 201 text-align: right; 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 0 0.2rem; 224 } 225 226 .customize-widgets-more-menu { 227 margin-left: -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-left: 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-left: -12px; 262 margin-right: -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 }