|
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-right: 2.5em; |
|
85 margin-right: 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-right: 4px solid #000; |
|
91 padding-right: 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 float: right; |
|
131 margin: 0.5em 0 0.5em 1em; |
|
132 } |
|
133 .wp-block-freeform.block-library-rich-text__tinymce .alignleft { |
|
134 float: left; |
|
135 margin: 0.5em 1em 0.5em 0; |
|
136 } |
|
137 .wp-block-freeform.block-library-rich-text__tinymce .aligncenter { |
|
138 display: block; |
|
139 margin-right: auto; |
|
140 margin-left: auto; |
|
141 } |
|
142 .wp-block-freeform.block-library-rich-text__tinymce .wp-more-tag { |
|
143 width: 96%; |
|
144 height: 20px; |
|
145 display: block; |
|
146 margin: 15px auto; |
|
147 outline: 0; |
|
148 cursor: default; |
|
149 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); |
|
150 background-size: 1900px 20px; |
|
151 background-repeat: no-repeat; |
|
152 background-position: center; |
|
153 } |
|
154 .wp-block-freeform.block-library-rich-text__tinymce img::selection { |
|
155 background-color: transparent; |
|
156 } |
|
157 .wp-block-freeform.block-library-rich-text__tinymce div.mceTemp { |
|
158 -ms-user-select: element; |
|
159 } |
|
160 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption { |
|
161 margin: 0; |
|
162 /* dl browser reset */ |
|
163 max-width: 100%; |
|
164 } |
|
165 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption a, |
|
166 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption img { |
|
167 display: block; |
|
168 } |
|
169 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption, .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption * { |
|
170 -webkit-user-drag: none; |
|
171 } |
|
172 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption .wp-caption-dd { |
|
173 padding-top: 0.5em; |
|
174 margin: 0; |
|
175 /* browser dd reset */ |
|
176 } |
|
177 .wp-block-freeform.block-library-rich-text__tinymce .wpview { |
|
178 width: 99.99%; |
|
179 /* All IE need hasLayout, incl. 11 (ugh, not again!!) */ |
|
180 position: relative; |
|
181 clear: both; |
|
182 margin-bottom: 16px; |
|
183 border: 1px solid transparent; |
|
184 } |
|
185 .wp-block-freeform.block-library-rich-text__tinymce .wpview iframe { |
|
186 display: block; |
|
187 max-width: 100%; |
|
188 background: transparent; |
|
189 } |
|
190 .wp-block-freeform.block-library-rich-text__tinymce .wpview .mce-shim { |
|
191 position: absolute; |
|
192 top: 0; |
|
193 left: 0; |
|
194 bottom: 0; |
|
195 right: 0; |
|
196 } |
|
197 .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected="2"] .mce-shim { |
|
198 display: none; |
|
199 } |
|
200 .wp-block-freeform.block-library-rich-text__tinymce .wpview .loading-placeholder { |
|
201 border: 1px dashed #ddd; |
|
202 padding: 10px; |
|
203 } |
|
204 .wp-block-freeform.block-library-rich-text__tinymce .wpview .wpview-error { |
|
205 border: 1px solid #ddd; |
|
206 padding: 1em 0; |
|
207 margin: 0; |
|
208 word-wrap: break-word; |
|
209 } |
|
210 .wp-block-freeform.block-library-rich-text__tinymce .wpview .wpview-error p { |
|
211 margin: 0; |
|
212 text-align: center; |
|
213 } |
|
214 .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 { |
|
215 border-color: transparent; |
|
216 } |
|
217 .wp-block-freeform.block-library-rich-text__tinymce .wpview .dashicons { |
|
218 display: block; |
|
219 margin: 0 auto; |
|
220 width: 32px; |
|
221 height: 32px; |
|
222 font-size: 32px; |
|
223 } |
|
224 .wp-block-freeform.block-library-rich-text__tinymce .wpview.wpview-type-gallery::after { |
|
225 content: ""; |
|
226 display: table; |
|
227 clear: both; |
|
228 } |
|
229 .wp-block-freeform.block-library-rich-text__tinymce .gallery img[data-mce-selected]:focus { |
|
230 outline: none; |
|
231 } |
|
232 .wp-block-freeform.block-library-rich-text__tinymce .gallery a { |
|
233 cursor: default; |
|
234 } |
|
235 .wp-block-freeform.block-library-rich-text__tinymce .gallery { |
|
236 margin: auto -6px; |
|
237 padding: 6px 0; |
|
238 line-height: 1; |
|
239 overflow-x: hidden; |
|
240 } |
|
241 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-item { |
|
242 float: right; |
|
243 margin: 0; |
|
244 text-align: center; |
|
245 padding: 6px; |
|
246 box-sizing: border-box; |
|
247 } |
|
248 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-caption, |
|
249 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-icon { |
|
250 margin: 0; |
|
251 } |
|
252 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-caption { |
|
253 font-size: 13px; |
|
254 margin: 4px 0; |
|
255 } |
|
256 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-1 .gallery-item { |
|
257 width: 100%; |
|
258 } |
|
259 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-2 .gallery-item { |
|
260 width: 50%; |
|
261 } |
|
262 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-3 .gallery-item { |
|
263 width: 33.3333333333%; |
|
264 } |
|
265 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-4 .gallery-item { |
|
266 width: 25%; |
|
267 } |
|
268 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-5 .gallery-item { |
|
269 width: 20%; |
|
270 } |
|
271 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-6 .gallery-item { |
|
272 width: 16.6666666667%; |
|
273 } |
|
274 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-7 .gallery-item { |
|
275 width: 14.2857142857%; |
|
276 } |
|
277 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-8 .gallery-item { |
|
278 width: 12.5%; |
|
279 } |
|
280 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-9 .gallery-item { |
|
281 width: 11.1111111111%; |
|
282 } |
|
283 .wp-block-freeform.block-library-rich-text__tinymce .gallery img { |
|
284 max-width: 100%; |
|
285 height: auto; |
|
286 border: none; |
|
287 padding: 0; |
|
288 } |
|
289 |
|
290 div[data-type="core/freeform"]::before { |
|
291 transition: border-color 0.1s linear, box-shadow 0.1s linear; |
|
292 border: 1px solid #ddd; |
|
293 outline: 1px solid transparent; |
|
294 } |
|
295 @media (prefers-reduced-motion: reduce) { |
|
296 div[data-type="core/freeform"]::before { |
|
297 transition-duration: 0s; |
|
298 transition-delay: 0s; |
|
299 } |
|
300 } |
|
301 div[data-type="core/freeform"].is-selected::before { |
|
302 border-color: #1e1e1e; |
|
303 } |
|
304 div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div { |
|
305 margin-top: 0; |
|
306 padding-top: 0; |
|
307 } |
|
308 div[data-type="core/freeform"].is-selected .block-library-rich-text__tinymce::after { |
|
309 content: ""; |
|
310 display: table; |
|
311 clear: both; |
|
312 } |
|
313 |
|
314 .mce-toolbar-grp .mce-btn.mce-active button, |
|
315 .mce-toolbar-grp .mce-btn.mce-active:hover button, |
|
316 .mce-toolbar-grp .mce-btn.mce-active i, |
|
317 .mce-toolbar-grp .mce-btn.mce-active:hover i { |
|
318 color: #1e1e1e; |
|
319 } |
|
320 .mce-toolbar-grp .mce-rtl .mce-flow-layout-item.mce-last { |
|
321 margin-left: 0; |
|
322 margin-right: 8px; |
|
323 } |
|
324 .mce-toolbar-grp .mce-btn i { |
|
325 font-style: normal; |
|
326 } |
|
327 |
|
328 .block-library-classic__toolbar { |
|
329 display: none; |
|
330 width: auto; |
|
331 margin: 0; |
|
332 position: sticky; |
|
333 z-index: 31; |
|
334 top: 0; |
|
335 border: 1px solid #ddd; |
|
336 border-bottom: none; |
|
337 border-radius: 2px; |
|
338 margin-bottom: 8px; |
|
339 padding: 0; |
|
340 } |
|
341 div[data-type="core/freeform"].is-selected .block-library-classic__toolbar { |
|
342 display: block; |
|
343 border-color: #1e1e1e; |
|
344 } |
|
345 .block-library-classic__toolbar .mce-tinymce { |
|
346 box-shadow: none; |
|
347 } |
|
348 @media (min-width: 600px) { |
|
349 .block-library-classic__toolbar { |
|
350 padding: 0; |
|
351 } |
|
352 } |
|
353 .block-library-classic__toolbar:empty { |
|
354 display: block; |
|
355 background: #f5f5f5; |
|
356 border-bottom: 1px solid #e2e4e7; |
|
357 } |
|
358 .block-library-classic__toolbar:empty::before { |
|
359 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; |
|
360 font-size: 13px; |
|
361 content: attr(data-placeholder); |
|
362 color: #555d66; |
|
363 line-height: 37px; |
|
364 padding: 14px; |
|
365 } |
|
366 .block-library-classic__toolbar div.mce-toolbar-grp { |
|
367 border-bottom: 1px solid #1e1e1e; |
|
368 } |
|
369 .block-library-classic__toolbar .mce-tinymce-inline, |
|
370 .block-library-classic__toolbar .mce-tinymce-inline > div, |
|
371 .block-library-classic__toolbar div.mce-toolbar-grp, |
|
372 .block-library-classic__toolbar div.mce-toolbar-grp > div, |
|
373 .block-library-classic__toolbar .mce-menubar, |
|
374 .block-library-classic__toolbar .mce-menubar > div { |
|
375 height: auto !important; |
|
376 width: 100% !important; |
|
377 } |
|
378 .block-library-classic__toolbar .mce-container-body.mce-abs-layout { |
|
379 overflow: visible; |
|
380 } |
|
381 .block-library-classic__toolbar .mce-menubar, |
|
382 .block-library-classic__toolbar div.mce-toolbar-grp { |
|
383 position: static; |
|
384 } |
|
385 .block-library-classic__toolbar .mce-toolbar-grp > div { |
|
386 padding: 1px 3px; |
|
387 } |
|
388 .block-library-classic__toolbar .mce-toolbar-grp .mce-toolbar:not(:first-child) { |
|
389 display: none; |
|
390 } |
|
391 .block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar { |
|
392 display: block; |
|
393 } |