PluginProbe
Gutenberg / 23.5.2
Gutenberg v23.5.2
23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 7.4.0 All 402 releases
gutenberg / build / styles / edit-post / style.css

style.css in Gutenberg 23.5.2, at build/styles/edit-post/style.css

571 lines 14.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Typography
3 */
4 /**
5 * SCSS Variables.
6 *
7 * Please use variables from this sheet to ensure consistency across the UI.
8 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10 */
11 /**
12 * Colors
13 */
14 /**
15 * Fonts & basic variables.
16 */
17 /**
18 * Typography
19 */
20 /**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24 /**
25 * Radius scale.
26 */
27 /**
28 * Elevation scale.
29 */
30 /**
31 * Dimensions.
32 */
33 /**
34 * Mobile specific styles
35 */
36 /**
37 * Editor styles.
38 */
39 /**
40 * Block & Editor UI.
41 */
42 /**
43 * Block paddings.
44 */
45 /**
46 * React Native specific.
47 * These variables do not appear to be used anywhere else.
48 */
49 /**
50 * Breakpoints & Media Queries
51 */
52 /**
53 * Converts a hex value into the rgb equivalent.
54 *
55 * @param {string} hex - the hexadecimal value to convert
56 * @return {string} comma separated rgb values
57 */
58 /**
59 * Long content fade mixin
60 *
61 * Creates a fading overlay to signify that the content is longer
62 * than the space allows.
63 */
64 /**
65 * Breakpoint mixins
66 */
67 /**
68 * Focus styles.
69 */
70 /**
71 * Applies editor left position to the selector passed as argument
72 */
73 /**
74 * Styles that are reused verbatim in a few places
75 */
76 /**
77 * Allows users to opt-out of animations via OS-level preferences.
78 */
79 /**
80 * Reset default styles for JavaScript UI based pages.
81 * This is a WP-admin agnostic reset
82 */
83 /**
84 * Reset the WP Admin page styles for Gutenberg-like pages.
85 */
86 /**
87 * Creates a checkerboard pattern background to indicate transparency.
88 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89 */
90 :root {
91 --wp-block-synced-color: #7a00df;
92 --wp-block-synced-color--rgb: 122, 0, 223;
93 --wp-bound-block-color: var(--wp-block-synced-color);
94 --wp-editor-canvas-background: #ddd;
95 --wp-admin-theme-color: #007cba;
96 --wp-admin-theme-color--rgb: 0, 124, 186;
97 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
98 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
99 --wp-admin-theme-color-darker-20: #005a87;
100 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
101 --wp-admin-border-width-focus: 2px;
102 }
103 @media (min-resolution: 192dpi) {
104 :root {
105 --wp-admin-border-width-focus: 1.5px;
106 }
107 }
108
109 .edit-post-fullscreen-mode-close__view-mode-toggle {
110 top: 0;
111 left: 0;
112 height: 64px;
113 width: 64px;
114 z-index: 100;
115 }
116 .edit-post-fullscreen-mode-close__view-mode-toggle .components-button {
117 color: #fff;
118 height: 100%;
119 width: 100%;
120 border-radius: 0;
121 overflow: hidden;
122 padding: 0;
123 display: flex;
124 align-items: center;
125 justify-content: center;
126 }
127 .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:hover, .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:active {
128 color: #fff;
129 }
130 .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:focus {
131 box-shadow: none;
132 }
133 .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon svg,
134 .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon img {
135 background: #1e1e1e;
136 display: block;
137 }
138
139 .edit-post-fullscreen-mode-close-site-icon__icon {
140 fill: currentColor;
141 width: 100%;
142 height: 100%;
143 padding: 12px;
144 }
145
146 .edit-post-fullscreen-mode-close-site-icon__image {
147 width: 100%;
148 height: 100%;
149 -o-object-fit: cover;
150 object-fit: cover;
151 background: #333;
152 aspect-ratio: 1/1;
153 }
154
155 .edit-post-fullscreen-mode-close.components-button:focus {
156 position: relative;
157 }
158 .edit-post-fullscreen-mode-close.components-button:focus::before {
159 content: "";
160 display: block;
161 position: absolute;
162 z-index: 1;
163 top: 0;
164 right: 0;
165 bottom: 0;
166 left: 0;
167 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
168 }
169
170 .edit-post-fullscreen-mode-close__back-icon {
171 position: absolute;
172 top: 0;
173 left: 0;
174 width: 64px;
175 height: 64px;
176 display: flex;
177 align-items: center;
178 justify-content: center;
179 background-color: hsl(0, 0%, 80%);
180 pointer-events: none;
181 }
182 .edit-post-fullscreen-mode-close__back-icon svg {
183 fill: currentColor;
184 }
185 .edit-post-fullscreen-mode-close__back-icon.has-site-icon {
186 background-color: hsla(0, 0%, 100%, 0.6);
187 backdrop-filter: saturate(180%) blur(15px);
188 }
189
190 /**
191 * Show icon label overrides.
192 */
193 .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
194 width: 64px;
195 }
196 .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
197 display: block;
198 }
199 .show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
200 content: none;
201 }
202
203 .edit-post-meta-boxes-main {
204 filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
205 outline: 1px solid transparent;
206 background-color: #fff;
207 display: flex;
208 flex-direction: column;
209 overflow: hidden;
210 }
211
212 .edit-post-meta-boxes-main__presenter {
213 flex-shrink: 0;
214 display: flex;
215 justify-content: center;
216 box-shadow: 0 1px #ddd;
217 outline: 1px solid transparent;
218 position: relative;
219 z-index: 1;
220 height: 32px;
221 }
222 @media (pointer: coarse) {
223 .edit-post-meta-boxes-main__presenter {
224 height: 36px;
225 }
226 }
227 .edit-post-meta-boxes-main__presenter > button {
228 -webkit-appearance: none;
229 -moz-appearance: none;
230 appearance: none;
231 padding: 0;
232 border: none;
233 outline: none;
234 background-color: transparent;
235 touch-action: none;
236 }
237 .edit-post-meta-boxes-main__presenter > button[aria-expanded] {
238 cursor: var(--wpds-cursor-control, pointer);
239 width: 100%;
240 display: flex;
241 justify-content: space-between;
242 align-items: center;
243 padding-inline: 24px 12px;
244 }
245 .edit-post-meta-boxes-main__presenter > button[aria-expanded]:is(:hover, :focus-visible) {
246 color: var(--wp-admin-theme-color);
247 }
248 .edit-post-meta-boxes-main__presenter > button[aria-expanded]:focus-visible::after {
249 content: "";
250 position: absolute;
251 inset: var(--wp-admin-border-width-focus);
252 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
253 outline: 2px solid transparent;
254 }
255 .edit-post-meta-boxes-main__presenter > button[aria-expanded] > svg {
256 fill: currentColor;
257 }
258 .edit-post-meta-boxes-main__presenter > button[role=separator] {
259 cursor: row-resize;
260 position: absolute;
261 width: 64px;
262 height: inherit;
263 }
264 .edit-post-meta-boxes-main__presenter > button[role=separator]::before {
265 content: "";
266 background-color: #ddd;
267 outline: 2px solid transparent;
268 outline-offset: -2px;
269 position: absolute;
270 inset-block: calc(50% - 4px / 2) auto;
271 transform: translateX(-50%);
272 width: inherit;
273 height: 4px;
274 border-radius: 2px;
275 }
276 @media not (prefers-reduced-motion) {
277 .edit-post-meta-boxes-main__presenter > button[role=separator]::before {
278 transition: width 0.3s ease-out;
279 }
280 }
281 .edit-post-meta-boxes-main__presenter > button[role=separator]:is(:hover, :focus)::before {
282 background-color: var(--wp-admin-theme-color);
283 width: 80px;
284 }
285
286 .edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
287 overflow: auto;
288 }
289 .edit-post-meta-boxes-main__liner {
290 isolation: isolate;
291 }
292 .is-resizing.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
293 display: unset;
294 }
295
296 .edit-post-layout__metaboxes {
297 clear: both;
298 }
299
300 .has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
301 flex-shrink: 1;
302 flex-basis: 0%;
303 overflow: hidden;
304 isolation: isolate;
305 }
306
307 .edit-post-layout__snackbar {
308 position: fixed;
309 bottom: 24px;
310 left: 0;
311 right: 0;
312 padding-inline: 16px;
313 box-sizing: border-box;
314 display: flex;
315 flex-direction: column;
316 pointer-events: none;
317 }
318 .edit-post-layout__snackbar .components-snackbar {
319 margin-inline: auto;
320 }
321
322 .edit-post-meta-boxes-area {
323 position: relative;
324 /**
325 * The wordpress default for most meta-box elements is content-box. Some
326 * elements such as textarea and input are set to border-box in forms.css.
327 * These elements therefore specifically set back to border-box here, while
328 * other elements (such as .button) are unaffected by Gutenberg's style
329 * because of their higher specificity.
330 */
331 }
332 .edit-post-meta-boxes-area__container,
333 .edit-post-meta-boxes-area .inside {
334 box-sizing: content-box;
335 }
336 .edit-post-meta-boxes-area textarea,
337 .edit-post-meta-boxes-area input {
338 box-sizing: border-box;
339 }
340 .edit-post-meta-boxes-area .postbox-header {
341 border-top: 1px solid #ddd;
342 border-bottom: 0;
343 }
344 .edit-post-meta-boxes-area {
345 /* Match width and positioning of the meta boxes. Override default styles. */
346 }
347 .edit-post-meta-boxes-area #poststuff {
348 margin: 0 auto;
349 padding-top: 0;
350 min-width: auto;
351 }
352 .edit-post-meta-boxes-area {
353 /* Override Default meta box stylings */
354 }
355 .edit-post-meta-boxes-area #poststuff h3.hndle,
356 .edit-post-meta-boxes-area #poststuff .stuffbox > h3,
357 .edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */
358 box-sizing: border-box;
359 color: inherit;
360 font-weight: 600;
361 outline: none;
362 padding: 0 24px;
363 position: relative;
364 width: 100%;
365 }
366 .edit-post-meta-boxes-area .postbox {
367 border: 0;
368 color: inherit;
369 margin-bottom: 0;
370 }
371 .edit-post-meta-boxes-area .postbox > .inside {
372 color: inherit;
373 padding: 0 24px 24px;
374 margin: 0;
375 }
376 .edit-post-meta-boxes-area .postbox .handlediv {
377 height: 44px;
378 width: 44px;
379 }
380 .edit-post-meta-boxes-area.is-loading::before {
381 position: absolute;
382 top: 0;
383 left: 0;
384 right: 0;
385 bottom: 0;
386 content: "";
387 background: transparent;
388 z-index: 1;
389 }
390 .edit-post-meta-boxes-area .edit-post-meta-boxes-area__spinner {
391 position: absolute;
392 top: 10px;
393 right: 20px;
394 z-index: 2;
395 }
396 .edit-post-meta-boxes-area .is-hidden {
397 display: none;
398 }
399
400 .edit-post-meta-boxes-area__clear {
401 clear: both;
402 }
403
404 .edit-post-welcome-guide,
405 .edit-template-welcome-guide {
406 width: 312px;
407 }
408 .edit-post-welcome-guide__image,
409 .edit-template-welcome-guide__image {
410 background: #00a0d2;
411 margin: 0 0 16px;
412 }
413 .edit-post-welcome-guide__image > img,
414 .edit-template-welcome-guide__image > img {
415 display: block;
416 max-width: 100%;
417 -o-object-fit: cover;
418 object-fit: cover;
419 }
420 .edit-post-welcome-guide__heading,
421 .edit-template-welcome-guide__heading {
422 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
423 font-size: 24px;
424 line-height: 1.4;
425 margin: 16px 0 16px 0;
426 padding: 0 24px;
427 }
428 .edit-post-welcome-guide__text,
429 .edit-template-welcome-guide__text {
430 font-size: 13px;
431 line-height: 1.4;
432 margin: 0 0 24px 0;
433 padding: 0 24px;
434 }
435 .edit-post-welcome-guide__inserter-icon,
436 .edit-template-welcome-guide__inserter-icon {
437 margin: 0 4px;
438 vertical-align: text-top;
439 }
440 .edit-post-welcome-guide .components-button:hover svg,
441 .edit-template-welcome-guide .components-button:hover svg {
442 fill: #fff;
443 }
444
445 .edit-template-welcome-guide .components-button svg {
446 fill: #fff;
447 }
448
449 body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle {
450 display: flex;
451 align-items: center;
452 justify-content: center;
453 width: 32px;
454 height: 32px;
455 }
456 body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__back-icon {
457 top: auto;
458 left: auto;
459 width: 32px;
460 height: 32px;
461 background: transparent;
462 }
463 body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle:hover .edit-post-fullscreen-mode-close__back-icon {
464 color: var(--wp-admin-theme-color);
465 }
466 body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button) {
467 grid-template-columns: 32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
468 }
469 body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button):has(> .editor-header__center) {
470 grid-template-columns: 32px min-content 1fr min-content 64px;
471 }
472 body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header__back-button {
473 padding-left: 8px;
474 }
475 @media (min-width: 782px) {
476 body.has-admin-bar-in-editor.is-fullscreen-mode {
477 margin-top: 0;
478 height: 100%;
479 }
480 body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
481 display: block;
482 }
483 body.has-admin-bar-in-editor.is-fullscreen-mode .interface-interface-skeleton,
484 body.has-admin-bar-in-editor.is-fullscreen-mode .editor-post-publish-panel,
485 body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
486 body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
487 top: var(--wp-admin--admin-bar--height, 0);
488 }
489 body.has-admin-bar-in-editor.is-fullscreen-mode .block-editor__container {
490 min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
491 }
492 body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) {
493 --wp-admin--admin-bar--height: 0;
494 }
495 body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
496 display: none;
497 }
498 }
499
500 body.js.block-editor-page {
501 background: #fff;
502 }
503 body.js.block-editor-page #wpcontent {
504 padding-left: 0;
505 }
506 body.js.block-editor-page #wpbody-content {
507 padding-bottom: 0;
508 }
509 body.js.block-editor-page {
510 /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
511 Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
512 }
513 body.js.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
514 display: none;
515 }
516 body.js.block-editor-page #wpfooter {
517 display: none;
518 }
519 body.js.block-editor-page .a11y-speak-region {
520 left: -1px;
521 top: -1px;
522 }
523 body.js.block-editor-page ul#adminmenu a.wp-has-current-submenu::after,
524 body.js.block-editor-page ul#adminmenu > li.current > a.current::after {
525 border-right-color: #fff;
526 }
527 body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
528 width: auto;
529 max-width: 100%;
530 }
531
532 .block-editor-page #wpwrap {
533 overflow-y: auto;
534 }
535 @media (min-width: 782px) {
536 .block-editor-page #wpwrap {
537 overflow-y: initial;
538 }
539 }
540
541 .edit-post-visual-editor.is-iframed {
542 box-sizing: border-box;
543 }
544 .edit-post-visual-editor.is-iframed *,
545 .edit-post-visual-editor.is-iframed *::before,
546 .edit-post-visual-editor.is-iframed *::after {
547 box-sizing: inherit;
548 }
549
550 @media (min-width: 600px) {
551 .block-editor__container {
552 position: absolute;
553 top: 0;
554 right: 0;
555 bottom: 0;
556 left: 0;
557 min-height: calc(100vh - 46px);
558 }
559 }
560 @media (min-width: 782px) {
561 .block-editor__container {
562 min-height: calc(100vh - 32px);
563 }
564 body.is-fullscreen-mode .block-editor__container {
565 min-height: 100vh;
566 }
567 }
568 .block-editor__container img {
569 max-width: 100%;
570 height: auto;
571 }