|
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 .wp-block-freeform.block-library-rich-text__tinymce { |
|
72 height: auto; |
|
73 /* Allow height of embed iframes to be calculated properly */ |
|
74 /* Remove blue highlighting of selected images in WebKit */ |
|
75 /* Image captions */ |
|
76 /* WP Views */ |
|
77 } |
|
78 .wp-block-freeform.block-library-rich-text__tinymce p, |
|
79 .wp-block-freeform.block-library-rich-text__tinymce li { |
|
80 line-height: 1.8; |
|
81 } |
|
82 .wp-block-freeform.block-library-rich-text__tinymce ul, |
|
83 .wp-block-freeform.block-library-rich-text__tinymce ol { |
|
84 padding-left: 2.5em; |
|
85 margin-left: 0; |
|
86 } |
|
87 .wp-block-freeform.block-library-rich-text__tinymce blockquote { |
|
88 margin: 0; |
|
89 box-shadow: inset 0 0 0 0 #ddd; |
|
90 border-left: 4px solid #000; |
|
91 padding-left: 1em; |
|
92 } |
|
93 .wp-block-freeform.block-library-rich-text__tinymce pre { |
|
94 white-space: pre-wrap; |
|
95 font-family: Menlo, Consolas, monaco, monospace; |
|
96 font-size: 15px; |
|
97 color: #1e1e1e; |
|
98 } |
|
99 .wp-block-freeform.block-library-rich-text__tinymce > *:first-child { |
|
100 margin-top: 0; |
|
101 } |
|
102 .wp-block-freeform.block-library-rich-text__tinymce > *:last-child { |
|
103 margin-bottom: 0; |
|
104 } |
|
105 .wp-block-freeform.block-library-rich-text__tinymce.mce-edit-focus { |
|
106 outline: none; |
|
107 } |
|
108 .wp-block-freeform.block-library-rich-text__tinymce a { |
|
109 color: var(--wp-admin-theme-color); |
|
110 } |
|
111 .wp-block-freeform.block-library-rich-text__tinymce:focus a[data-mce-selected] { |
|
112 padding: 0 2px; |
|
113 margin: 0 -2px; |
|
114 border-radius: 2px; |
|
115 box-shadow: 0 0 0 1px #e5f5fa; |
|
116 background: #e5f5fa; |
|
117 } |
|
118 .wp-block-freeform.block-library-rich-text__tinymce code { |
|
119 padding: 2px; |
|
120 border-radius: 2px; |
|
121 color: #1e1e1e; |
|
122 background: #f0f0f0; |
|
123 font-family: Menlo, Consolas, monaco, monospace; |
|
124 font-size: 14px; |
|
125 } |
|
126 .wp-block-freeform.block-library-rich-text__tinymce:focus code[data-mce-selected] { |
|
127 background: #ddd; |
|
128 } |
|
129 .wp-block-freeform.block-library-rich-text__tinymce .alignright { |
|
130 /*rtl:ignore*/ |
|
131 float: right; |
|
132 /*rtl:ignore*/ |
|
133 margin: 0.5em 0 0.5em 1em; |
|
134 } |
|
135 .wp-block-freeform.block-library-rich-text__tinymce .alignleft { |
|
136 /*rtl:ignore*/ |
|
137 float: left; |
|
138 /*rtl:ignore*/ |
|
139 margin: 0.5em 1em 0.5em 0; |
|
140 } |
|
141 .wp-block-freeform.block-library-rich-text__tinymce .aligncenter { |
|
142 display: block; |
|
143 margin-left: auto; |
|
144 margin-right: auto; |
|
145 } |
|
146 .wp-block-freeform.block-library-rich-text__tinymce .wp-more-tag { |
|
147 width: 96%; |
|
148 height: 20px; |
|
149 display: block; |
|
150 margin: 15px auto; |
|
151 outline: 0; |
|
152 cursor: default; |
|
153 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAADtgAAAAoBAMAAAA86gLBAAAAJFBMVEVMaXG7u7vBwcHDw8POzs68vLzGxsbMzMy+vr7AwMDQ0NDGxsYKLGzpAAAADHRSTlMA///zWf+/f///TMxNVGuqAAABwklEQVR4Ae3dMXLaQBTH4bfj8UCpx8hq0vgKvgFNemhT6Qo6gg6R+0ZahM2QLmyBJ99XWP9V5+o3jIUcLQEAAAAAAAAAAAAAAAAAAAAAAABQ8j0WL9lfTtlt18uNXAUA8O/KVtfa1tdcrOdSh9gCQAMlh1hMNbZZ1bsrsQWABsrhLRbz7z5in/32UbfUMUbkMQCAh5RfGYv82UdMdZ6HS2wjT2ILAI8r3XmM2B3WvM59vfO2xXYW2yYAENuPU8S+X/N67mKxzy225yaxBQCxLV392UdcvwV0jPVUj98ntkBWT7C7+9u2/V/vGtvXIWJ6/4rtbottWa6Ri0NUT/u72LYttrb97LHdvUXMxxrb8TO2W2TF1rYbbLG1bbGNjMi4+2Sbi1FsbbvNFlvbFtt5fDnE3d9sP1/XeIyV2Nr2U2/guZUuptNrH/dPI9eLB6SaAEBs6wPJf3/PNk9tYgsAYrv/8TFuzx/fvkFqGtrEFgDEdpcZUb7ejXy6ntrEFgDENvL6gsas4vbdyKt4DACI7TxElJv/Z7udpqFNbAFAbKduy2uU2trttM/x28UWAAAAAAAAAAAAAAAAAAAAAAAAAADgDyPwGmGTCZp7AAAAAElFTkSuQmCC); |
|
154 background-size: 1900px 20px; |
|
155 background-repeat: no-repeat; |
|
156 background-position: center; |
|
157 } |
|
158 .wp-block-freeform.block-library-rich-text__tinymce img::selection { |
|
159 background-color: transparent; |
|
160 } |
|
161 .wp-block-freeform.block-library-rich-text__tinymce div.mceTemp { |
|
162 -ms-user-select: element; |
|
163 } |
|
164 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption { |
|
165 margin: 0; |
|
166 /* dl browser reset */ |
|
167 max-width: 100%; |
|
168 } |
|
169 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption a, |
|
170 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption img { |
|
171 display: block; |
|
172 } |
|
173 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption, .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption * { |
|
174 -webkit-user-drag: none; |
|
175 } |
|
176 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption .wp-caption-dd { |
|
177 padding-top: 0.5em; |
|
178 margin: 0; |
|
179 /* browser dd reset */ |
|
180 } |
|
181 .wp-block-freeform.block-library-rich-text__tinymce .wpview { |
|
182 width: 99.99%; |
|
183 /* All IE need hasLayout, incl. 11 (ugh, not again!!) */ |
|
184 position: relative; |
|
185 clear: both; |
|
186 margin-bottom: 16px; |
|
187 border: 1px solid transparent; |
|
188 } |
|
189 .wp-block-freeform.block-library-rich-text__tinymce .wpview iframe { |
|
190 display: block; |
|
191 max-width: 100%; |
|
192 background: transparent; |
|
193 } |
|
194 .wp-block-freeform.block-library-rich-text__tinymce .wpview .mce-shim { |
|
195 position: absolute; |
|
196 top: 0; |
|
197 right: 0; |
|
198 bottom: 0; |
|
199 left: 0; |
|
200 } |
|
201 .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected="2"] .mce-shim { |
|
202 display: none; |
|
203 } |
|
204 .wp-block-freeform.block-library-rich-text__tinymce .wpview .loading-placeholder { |
|
205 border: 1px dashed #ddd; |
|
206 padding: 10px; |
|
207 } |
|
208 .wp-block-freeform.block-library-rich-text__tinymce .wpview .wpview-error { |
|
209 border: 1px solid #ddd; |
|
210 padding: 1em 0; |
|
211 margin: 0; |
|
212 word-wrap: break-word; |
|
213 } |
|
214 .wp-block-freeform.block-library-rich-text__tinymce .wpview .wpview-error p { |
|
215 margin: 0; |
|
216 text-align: center; |
|
217 } |
|
218 .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected] .loading-placeholder, .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected] .wpview-error { |
|
219 border-color: transparent; |
|
220 } |
|
221 .wp-block-freeform.block-library-rich-text__tinymce .wpview .dashicons { |
|
222 display: block; |
|
223 margin: 0 auto; |
|
224 width: 32px; |
|
225 height: 32px; |
|
226 font-size: 32px; |
|
227 } |
|
228 .wp-block-freeform.block-library-rich-text__tinymce .wpview.wpview-type-gallery::after { |
|
229 content: ""; |
|
230 display: table; |
|
231 clear: both; |
|
232 } |
|
233 .wp-block-freeform.block-library-rich-text__tinymce .gallery img[data-mce-selected]:focus { |
|
234 outline: none; |
|
235 } |
|
236 .wp-block-freeform.block-library-rich-text__tinymce .gallery a { |
|
237 cursor: default; |
|
238 } |
|
239 .wp-block-freeform.block-library-rich-text__tinymce .gallery { |
|
240 margin: auto -6px; |
|
241 padding: 6px 0; |
|
242 line-height: 1; |
|
243 overflow-x: hidden; |
|
244 } |
|
245 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-item { |
|
246 float: left; |
|
247 margin: 0; |
|
248 text-align: center; |
|
249 padding: 6px; |
|
250 box-sizing: border-box; |
|
251 } |
|
252 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-caption, |
|
253 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-icon { |
|
254 margin: 0; |
|
255 } |
|
256 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-caption { |
|
257 font-size: 13px; |
|
258 margin: 4px 0; |
|
259 } |
|
260 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-1 .gallery-item { |
|
261 width: 100%; |
|
262 } |
|
263 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-2 .gallery-item { |
|
264 width: 50%; |
|
265 } |
|
266 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-3 .gallery-item { |
|
267 width: 33.3333333333%; |
|
268 } |
|
269 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-4 .gallery-item { |
|
270 width: 25%; |
|
271 } |
|
272 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-5 .gallery-item { |
|
273 width: 20%; |
|
274 } |
|
275 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-6 .gallery-item { |
|
276 width: 16.6666666667%; |
|
277 } |
|
278 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-7 .gallery-item { |
|
279 width: 14.2857142857%; |
|
280 } |
|
281 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-8 .gallery-item { |
|
282 width: 12.5%; |
|
283 } |
|
284 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-9 .gallery-item { |
|
285 width: 11.1111111111%; |
|
286 } |
|
287 .wp-block-freeform.block-library-rich-text__tinymce .gallery img { |
|
288 max-width: 100%; |
|
289 height: auto; |
|
290 border: none; |
|
291 padding: 0; |
|
292 } |
|
293 |
|
294 div[data-type="core/freeform"]::before { |
|
295 transition: border-color 0.1s linear, box-shadow 0.1s linear; |
|
296 border: 1px solid #ddd; |
|
297 outline: 1px solid transparent; |
|
298 } |
|
299 @media (prefers-reduced-motion: reduce) { |
|
300 div[data-type="core/freeform"]::before { |
|
301 transition-duration: 0s; |
|
302 transition-delay: 0s; |
|
303 } |
|
304 } |
|
305 div[data-type="core/freeform"].is-selected::before { |
|
306 border-color: #1e1e1e; |
|
307 } |
|
308 div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div { |
|
309 margin-top: 0; |
|
310 padding-top: 0; |
|
311 } |
|
312 div[data-type="core/freeform"].is-selected .block-library-rich-text__tinymce::after { |
|
313 content: ""; |
|
314 display: table; |
|
315 clear: both; |
|
316 } |
|
317 |
|
318 .mce-toolbar-grp .mce-btn.mce-active button, |
|
319 .mce-toolbar-grp .mce-btn.mce-active:hover button, |
|
320 .mce-toolbar-grp .mce-btn.mce-active i, |
|
321 .mce-toolbar-grp .mce-btn.mce-active:hover i { |
|
322 color: #1e1e1e; |
|
323 } |
|
324 .mce-toolbar-grp .mce-rtl .mce-flow-layout-item.mce-last { |
|
325 margin-right: 0; |
|
326 margin-left: 8px; |
|
327 } |
|
328 .mce-toolbar-grp .mce-btn i { |
|
329 font-style: normal; |
|
330 } |
|
331 |
|
332 .block-library-classic__toolbar { |
|
333 display: none; |
|
334 width: auto; |
|
335 margin: 0; |
|
336 position: sticky; |
|
337 z-index: 31; |
|
338 top: 0; |
|
339 border: 1px solid #ddd; |
|
340 border-bottom: none; |
|
341 border-radius: 2px; |
|
342 margin-bottom: 8px; |
|
343 padding: 0; |
|
344 } |
|
345 div[data-type="core/freeform"].is-selected .block-library-classic__toolbar { |
|
346 display: block; |
|
347 border-color: #1e1e1e; |
|
348 } |
|
349 .block-library-classic__toolbar .mce-tinymce { |
|
350 box-shadow: none; |
|
351 } |
|
352 @media (min-width: 600px) { |
|
353 .block-library-classic__toolbar { |
|
354 padding: 0; |
|
355 } |
|
356 } |
|
357 .block-library-classic__toolbar:empty { |
|
358 display: block; |
|
359 background: #f5f5f5; |
|
360 border-bottom: 1px solid #e2e4e7; |
|
361 } |
|
362 .block-library-classic__toolbar:empty::before { |
|
363 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
364 font-size: 13px; |
|
365 content: attr(data-placeholder); |
|
366 color: #555d66; |
|
367 line-height: 37px; |
|
368 padding: 14px; |
|
369 } |
|
370 .block-library-classic__toolbar div.mce-toolbar-grp { |
|
371 border-bottom: 1px solid #1e1e1e; |
|
372 } |
|
373 .block-library-classic__toolbar .mce-tinymce-inline, |
|
374 .block-library-classic__toolbar .mce-tinymce-inline > div, |
|
375 .block-library-classic__toolbar div.mce-toolbar-grp, |
|
376 .block-library-classic__toolbar div.mce-toolbar-grp > div, |
|
377 .block-library-classic__toolbar .mce-menubar, |
|
378 .block-library-classic__toolbar .mce-menubar > div { |
|
379 height: auto !important; |
|
380 width: 100% !important; |
|
381 } |
|
382 .block-library-classic__toolbar .mce-container-body.mce-abs-layout { |
|
383 overflow: visible; |
|
384 } |
|
385 .block-library-classic__toolbar .mce-menubar, |
|
386 .block-library-classic__toolbar div.mce-toolbar-grp { |
|
387 position: static; |
|
388 } |
|
389 .block-library-classic__toolbar .mce-toolbar-grp > div { |
|
390 padding: 1px 3px; |
|
391 } |
|
392 .block-library-classic__toolbar .mce-toolbar-grp .mce-toolbar:not(:first-child) { |
|
393 display: none; |
|
394 } |
|
395 .block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar { |
|
396 display: block; |
|
397 } |