1 /** |
1 :root{ |
2 * Colors |
2 --wp-admin-theme-color:#007cba; |
3 */ |
3 --wp-admin-theme-color--rgb:0, 124, 186; |
4 /** |
4 --wp-admin-theme-color-darker-10:#006ba1; |
5 * Breakpoints & Media Queries |
5 --wp-admin-theme-color-darker-10--rgb:0, 107, 161; |
6 */ |
6 --wp-admin-theme-color-darker-20:#005a87; |
7 /** |
7 --wp-admin-theme-color-darker-20--rgb:0, 90, 135; |
8 * SCSS Variables. |
8 --wp-admin-border-width-focus:2px; |
9 * |
9 --wp-block-synced-color:#7a00df; |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 --wp-block-synced-color--rgb:122, 0, 223; |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 --wp-bound-block-color:var(--wp-block-synced-color); |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
12 } |
13 */ |
13 @media (min-resolution:192dpi){ |
14 /** |
14 :root{ |
15 * Colors |
15 --wp-admin-border-width-focus:1.5px; |
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 * Converts a hex value into the rgb equivalent. |
|
45 * |
|
46 * @param {string} hex - the hexadecimal value to convert |
|
47 * @return {string} comma separated rgb values |
|
48 */ |
|
49 /** |
|
50 * Breakpoint mixins |
|
51 */ |
|
52 /** |
|
53 * Long content fade mixin |
|
54 * |
|
55 * Creates a fading overlay to signify that the content is longer |
|
56 * than the space allows. |
|
57 */ |
|
58 /** |
|
59 * Focus styles. |
|
60 */ |
|
61 /** |
|
62 * Applies editor left position to the selector passed as argument |
|
63 */ |
|
64 /** |
|
65 * Styles that are reused verbatim in a few places |
|
66 */ |
|
67 /** |
|
68 * Allows users to opt-out of animations via OS-level preferences. |
|
69 */ |
|
70 /** |
|
71 * Reset default styles for JavaScript UI based pages. |
|
72 * This is a WP-admin agnostic reset |
|
73 */ |
|
74 /** |
|
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
|
76 */ |
|
77 :root { |
|
78 --wp-admin-theme-color: #007cba; |
|
79 --wp-admin-theme-color--rgb: 0, 124, 186; |
|
80 --wp-admin-theme-color-darker-10: #006ba1; |
|
81 --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; |
|
82 --wp-admin-theme-color-darker-20: #005a87; |
|
83 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; |
|
84 --wp-admin-border-width-focus: 2px; |
|
85 } |
|
86 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
|
87 :root { |
|
88 --wp-admin-border-width-focus: 1.5px; |
|
89 } |
16 } |
90 } |
17 } |
91 |
18 |
92 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector { |
19 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector{ |
93 background: #fff; |
20 background:#fff; |
94 box-sizing: border-box; |
21 box-sizing:border-box; |
95 } |
22 } |
96 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector * { |
23 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector *{ |
97 box-sizing: inherit; |
24 box-sizing:inherit; |
98 } |
25 } |
99 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector { |
26 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector{ |
100 margin: -12px; |
27 margin:-12px; |
101 } |
28 } |
102 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector h3 { |
29 #customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector .block-editor-block-inspector h3{ |
103 margin-bottom: 0; |
30 margin-bottom:0; |
104 } |
31 } |
105 |
32 |
106 #customize-theme-controls .customize-pane-child.control-section-sidebar.is-sub-section-open { |
33 #customize-theme-controls .customize-pane-child.control-section-sidebar.is-sub-section-open{ |
107 transform: translateX(100%); |
34 transform:translateX(100%); |
108 } |
35 } |
109 |
36 |
110 .customize-widgets-header { |
37 .customize-widgets-header{ |
111 display: flex; |
38 background:#f0f0f1; |
112 justify-content: flex-end; |
39 border-bottom:1px solid #e0e0e0; |
113 margin: -15px -12px 0 -12px; |
40 display:flex; |
114 background: #f0f0f1; |
41 justify-content:flex-end; |
115 border-bottom: 1px solid #e0e0e0; |
42 margin:-15px -12px 0; |
116 z-index: 8; |
43 z-index:8; |
117 } |
44 } |
118 @media (min-width: 782px) { |
45 @media (min-width:600px){ |
119 .customize-widgets-header { |
46 .customize-widgets-header{ |
120 margin-bottom: 44px; |
47 margin-bottom:44px; |
121 } |
48 } |
122 } |
49 } |
123 .customize-widgets-header.is-fixed-toolbar-active { |
50 .customize-widgets-header.is-fixed-toolbar-active{ |
124 margin-bottom: 0; |
51 margin-bottom:0; |
125 } |
52 } |
126 |
53 |
127 .customize-widgets-header-toolbar { |
54 .customize-widgets-header-toolbar{ |
128 display: flex; |
55 align-items:center; |
129 border: none; |
56 border:none; |
130 width: 100%; |
57 display:flex; |
131 align-items: center; |
58 width:100%; |
132 } |
59 } |
133 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon { |
60 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon{ |
134 border-radius: 2px; |
61 border-radius:2px; |
135 color: #fff; |
62 color:#fff; |
136 padding: 0; |
63 height:24px; |
137 min-width: 24px; |
64 margin:12px auto 12px 0; |
138 height: 24px; |
65 min-width:24px; |
139 margin: 12px auto 12px 0; |
66 padding:0; |
140 } |
67 } |
141 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon::before { |
68 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon:before{ |
142 content: none; |
69 content:none; |
143 } |
70 } |
144 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon.is-pressed { |
71 .customize-widgets-header-toolbar .customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon.is-pressed{ |
145 background: #1e1e1e; |
72 background:#1e1e1e; |
146 } |
73 } |
147 .customize-widgets-header-toolbar .components-button.has-icon.customize-widgets-editor-history-button.redo-button { |
74 .customize-widgets-header-toolbar .components-button.has-icon.customize-widgets-editor-history-button.redo-button{ |
148 margin-right: -12px; |
75 margin-right:-12px; |
149 } |
76 } |
150 |
77 |
151 #customize-sidebar-outer-content { |
78 #customize-sidebar-outer-content{ |
152 width: auto; |
79 min-width:100%; |
153 min-width: 100%; |
80 width:auto; |
154 } |
81 } |
155 |
82 |
156 #customize-outer-theme-controls .widgets-inserter { |
83 #customize-outer-theme-controls .widgets-inserter{ |
157 padding: 0; |
84 padding:0; |
158 } |
85 } |
159 #customize-outer-theme-controls .widgets-inserter .customize-section-description-container { |
86 #customize-outer-theme-controls .widgets-inserter .customize-section-description-container{ |
160 display: none; |
87 display:none; |
161 } |
88 } |
162 |
89 |
163 .customize-widgets-layout__inserter-panel { |
90 .customize-widgets-layout__inserter-panel{ |
164 background: #fff; |
91 background:#fff; |
165 } |
92 } |
166 |
93 |
167 .customize-widgets-layout__inserter-panel-header { |
94 .customize-widgets-layout__inserter-panel-header{ |
168 display: flex; |
95 align-items:center; |
169 justify-content: space-between; |
96 border-bottom:1px solid #ddd; |
170 align-items: center; |
97 box-sizing:border-box; |
171 padding: 16px; |
98 display:flex; |
172 height: 46px; |
99 height:46px; |
173 box-sizing: border-box; |
100 justify-content:space-between; |
174 border-bottom: 1px solid #ddd; |
101 padding:16px; |
175 } |
102 } |
176 .customize-widgets-layout__inserter-panel-header .customize-widgets-layout__inserter-panel-header-title { |
103 .customize-widgets-layout__inserter-panel-header .customize-widgets-layout__inserter-panel-header-title{ |
177 margin: 0; |
104 margin:0; |
178 } |
105 } |
179 |
106 |
180 .block-editor-inserter__quick-inserter .block-editor-inserter__panel-content { |
107 .block-editor-inserter__quick-inserter .block-editor-inserter__panel-content{ |
181 background: #fff; |
108 background:#fff; |
182 } |
109 } |
183 |
110 |
184 .customize-widgets-keyboard-shortcut-help-modal__section { |
111 .customize-widgets-keyboard-shortcut-help-modal__section{ |
185 margin: 0 0 2rem 0; |
112 margin:0 0 2rem; |
186 } |
113 } |
187 .customize-widgets-keyboard-shortcut-help-modal__main-shortcuts .customize-widgets-keyboard-shortcut-help-modal__shortcut-list { |
114 .customize-widgets-keyboard-shortcut-help-modal__section-title{ |
188 margin-top: -25px; |
115 font-size:.9rem; |
189 } |
116 font-weight:600; |
190 .customize-widgets-keyboard-shortcut-help-modal__section-title { |
117 } |
191 font-size: 0.9rem; |
118 .customize-widgets-keyboard-shortcut-help-modal__shortcut{ |
192 font-weight: 600; |
119 align-items:baseline; |
193 } |
120 border-top:1px solid #ddd; |
194 .customize-widgets-keyboard-shortcut-help-modal__shortcut { |
121 display:flex; |
195 display: flex; |
122 margin-bottom:0; |
196 align-items: baseline; |
123 padding:.6rem 0; |
197 padding: 0.6rem 0; |
124 } |
198 border-top: 1px solid #ddd; |
125 .customize-widgets-keyboard-shortcut-help-modal__shortcut:last-child{ |
199 margin-bottom: 0; |
126 border-bottom:1px solid #ddd; |
200 } |
127 } |
201 .customize-widgets-keyboard-shortcut-help-modal__shortcut:last-child { |
128 .customize-widgets-keyboard-shortcut-help-modal__shortcut:empty{ |
202 border-bottom: 1px solid #ddd; |
129 display:none; |
203 } |
130 } |
204 .customize-widgets-keyboard-shortcut-help-modal__shortcut:empty { |
131 .customize-widgets-keyboard-shortcut-help-modal__shortcut-term{ |
205 display: none; |
132 font-weight:600; |
206 } |
133 margin:0 1rem 0 0; |
207 .customize-widgets-keyboard-shortcut-help-modal__shortcut-term { |
134 text-align:left; |
208 font-weight: 600; |
135 } |
209 margin: 0 1rem 0 0; |
136 .customize-widgets-keyboard-shortcut-help-modal__shortcut-description{ |
210 text-align: left; |
137 flex:1; |
211 } |
138 flex-basis:auto; |
212 .customize-widgets-keyboard-shortcut-help-modal__shortcut-description { |
139 margin:0; |
213 flex: 1; |
140 } |
214 margin: 0; |
141 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination{ |
215 flex-basis: auto; |
142 background:none; |
216 } |
143 display:block; |
217 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination { |
144 margin:0; |
218 display: block; |
145 padding:0; |
219 background: none; |
146 } |
220 margin: 0; |
147 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination+.customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination{ |
221 padding: 0; |
148 margin-top:10px; |
222 } |
149 } |
223 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination { |
150 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key{ |
224 margin-top: 10px; |
151 border-radius:8%; |
225 } |
152 margin:0 .2rem; |
226 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key { |
153 padding:.25rem .5rem; |
227 padding: 0.25rem 0.5rem; |
154 } |
228 border-radius: 8%; |
155 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child{ |
229 margin: 0 0.2rem 0 0.2rem; |
156 margin:0 .2rem 0 0; |
230 } |
157 } |
231 .customize-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child { |
158 |
232 margin: 0 0.2rem 0 0; |
159 .components-popover.more-menu-dropdown__content{ |
233 } |
160 z-index:99998; |
234 |
161 } |
235 .block-editor-block-contextual-toolbar.is-fixed { |
162 |
236 top: 0; |
163 .customize-control-sidebar_block_editor .block-editor-block-list__block-popover{ |
237 margin-right: -12px; |
164 position:fixed !important; |
238 margin-left: -12px; |
165 z-index:7; |
239 width: calc(100% + 24px); |
166 } |
240 overflow-y: auto; |
167 |
241 z-index: 7; |
168 .customize-control-sidebar_block_editor .components-popover,.customize-widgets-popover .components-popover{ |
242 } |
169 position:fixed !important; |
243 |
170 } |
244 .customize-control-sidebar_block_editor .block-editor-block-list__block-popover { |
171 |
245 position: fixed; |
172 .customize-widgets-welcome-guide__image__wrapper{ |
246 z-index: 7; |
173 background:#00a0d2; |
247 } |
174 margin-bottom:8px; |
248 |
175 text-align:center; |
249 .customize-widgets-welcome-guide__image__wrapper { |
176 } |
250 background: #00a0d2; |
177 .customize-widgets-welcome-guide__image{ |
251 text-align: center; |
178 height:auto; |
252 margin-bottom: 8px; |
179 } |
253 } |
180 .wrap .customize-widgets-welcome-guide__heading{ |
254 .customize-widgets-welcome-guide__image { |
181 font-size:18px; |
255 height: auto; |
182 font-weight:600; |
256 } |
183 } |
257 .wrap .customize-widgets-welcome-guide__heading { |
184 .customize-widgets-welcome-guide__text{ |
258 font-size: 18px; |
185 line-height:1.7; |
259 font-weight: 600; |
186 } |
260 } |
187 .customize-widgets-welcome-guide__button{ |
261 .customize-widgets-welcome-guide__text { |
188 justify-content:center; |
262 line-height: 1.7; |
189 margin:1em 0; |
263 } |
190 width:100%; |
264 .customize-widgets-welcome-guide__button { |
191 } |
265 justify-content: center; |
192 .customize-widgets-welcome-guide__separator{ |
266 margin: 1em 0; |
193 margin:1em 0; |
267 width: 100%; |
194 } |
268 } |
195 .customize-widgets-welcome-guide__more-info{ |
269 .customize-widgets-welcome-guide__separator { |
196 line-height:1.4; |
270 margin: 1em 0; |
197 } |
271 } |
198 |
272 .customize-widgets-welcome-guide__more-info { |
199 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section{ |
273 line-height: 1.4; |
200 background-color:#fff; |
274 } |
201 min-height:100%; |
275 |
202 padding-top:12px !important; |
276 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section { |
203 } |
277 min-height: 100%; |
204 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section.open{ |
278 background-color: #fff; |
205 overflow:unset; |
279 padding-top: 12px !important; |
206 } |
280 } |
207 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section .customize-section-title{ |
281 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section.open { |
208 margin-top:-12px !important; |
282 overflow: unset; |
209 position:static !important; |
283 } |
210 width:unset !important; |
284 #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section .customize-section-title { |
211 } |
285 position: static !important; |
212 |
286 margin-top: -12px !important; |
213 .components-modal__screen-overlay{ |
287 width: unset !important; |
214 z-index:999999; |
288 } |
215 } |
289 |
216 |
290 .components-modal__screen-overlay { |
217 .customize-control-sidebar_block_editor,.customize-widgets-layout__inspector{ |
291 z-index: 999999; |
218 box-sizing:border-box; |
292 } |
219 } |
293 |
220 .customize-control-sidebar_block_editor *,.customize-control-sidebar_block_editor :after,.customize-control-sidebar_block_editor :before,.customize-widgets-layout__inspector *,.customize-widgets-layout__inspector :after,.customize-widgets-layout__inspector :before{ |
294 .customize-control-sidebar_block_editor, |
221 box-sizing:inherit; |
295 .customize-widgets-layout__inspector, |
222 } |
296 .customize-widgets-popover { |
|
297 box-sizing: border-box; |
|
298 } |
|
299 .customize-control-sidebar_block_editor *, |
|
300 .customize-control-sidebar_block_editor *::before, |
|
301 .customize-control-sidebar_block_editor *::after, |
|
302 .customize-widgets-layout__inspector *, |
|
303 .customize-widgets-layout__inspector *::before, |
|
304 .customize-widgets-layout__inspector *::after, |
|
305 .customize-widgets-popover *, |
|
306 .customize-widgets-popover *::before, |
|
307 .customize-widgets-popover *::after { |
|
308 box-sizing: inherit; |
|
309 } |
|