PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 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 All 404 releases
gutenberg / build / styles / block-library / editor.css

editor.css in Gutenberg 24.1.0, at build/styles/block-library/editor.css

2,840 lines 73.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 * Standard focus rings for the WordPress Design System.
72 *
73 * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
74 * e.g. `&:focus { @include outset-ring__focus(); }`.
75 */
76 /**
77 * Applies editor left position to the selector passed as argument
78 */
79 /**
80 * Styles that are reused verbatim in a few places
81 */
82 /**
83 * Allows users to opt-out of animations via OS-level preferences.
84 */
85 /**
86 * Reset default styles for JavaScript UI based pages.
87 * This is a WP-admin agnostic reset
88 */
89 /**
90 * Reset the WP Admin page styles for Gutenberg-like pages.
91 */
92 /**
93 * Creates a checkerboard pattern background to indicate transparency.
94 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
95 */
96 .block-library-utils__media-control {
97 position: relative;
98 }
99 .block-library-utils__media-control .components-drop-zone__content-icon {
100 display: none;
101 }
102 .block-library-utils__media-control .block-library-utils__media-control__replace-flow {
103 display: block;
104 }
105 .block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button {
106 color: #1e1e1e;
107 border-color: #ccc;
108 width: 100%;
109 display: block;
110 height: 40px;
111 padding-right: 32px;
112 }
113 .block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:hover {
114 color: var(--wp-admin-theme-color);
115 }
116
117 .block-library-utils__media-control__inspector-media-replace-title {
118 word-break: break-all;
119 white-space: normal;
120 text-align: start;
121 }
122
123 .block-library-utils__media-control__inspector-image-indicator {
124 width: 20px;
125 height: 20px;
126 border-radius: 2px;
127 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
128 background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
129 background-size: cover;
130 outline: 1px solid transparent;
131 }
132
133 .block-library-utils__media-control__reset {
134 position: absolute;
135 right: 0;
136 top: 8px;
137 margin: auto 8px auto;
138 opacity: 0;
139 border-radius: 2px;
140 }
141 @media not (prefers-reduced-motion) {
142 .block-library-utils__media-control__reset {
143 transition: opacity 0.1s ease-in-out;
144 }
145 }
146 .block-library-utils__media-control:hover .block-library-utils__media-control__reset, .block-library-utils__media-control__reset:focus, .block-library-utils__media-control__reset:hover {
147 opacity: 1;
148 }
149 @media (hover: none) {
150 .block-library-utils__media-control__reset {
151 opacity: 1;
152 }
153 }
154
155 .wp-block-audio {
156 margin-left: 0;
157 margin-right: 0;
158 position: relative;
159 }
160 .wp-block-audio.is-transient audio {
161 opacity: 0.3;
162 }
163 .wp-block-audio .components-spinner {
164 position: absolute;
165 top: 50%;
166 left: 50%;
167 margin-top: -9px;
168 margin-left: -9px;
169 }
170
171 .wp-block-avatar__image img {
172 width: 100%;
173 }
174
175 .wp-block-avatar.aligncenter .components-resizable-box__container {
176 margin: 0 auto;
177 }
178
179 .wp-block[data-align=center] > .wp-block-button {
180 text-align: center;
181 margin-left: auto;
182 margin-right: auto;
183 }
184
185 .wp-block[data-align=right] > .wp-block-button {
186 /*!rtl:ignore*/
187 text-align: right;
188 }
189
190 .wp-block-button {
191 position: relative;
192 cursor: text;
193 }
194 .wp-block-button:focus {
195 box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
196 outline: 2px solid transparent;
197 outline-offset: -2px;
198 }
199 .wp-block-button[data-rich-text-placeholder]::after {
200 opacity: 0.8;
201 }
202
203 div[data-type="core/button"] {
204 display: table;
205 }
206
207 .wp-block-buttons > .wp-block {
208 margin: 0;
209 }
210 .wp-block-buttons > .wp-block-button.wp-block-button.wp-block-button.wp-block-button.wp-block-button {
211 margin: 0;
212 }
213 .wp-block-buttons > .block-list-appender {
214 display: inline-flex;
215 align-items: center;
216 }
217 .wp-block-buttons.is-vertical > .block-list-appender .block-list-appender__toggle {
218 justify-content: flex-start;
219 }
220 .wp-block-buttons > .wp-block-button:focus {
221 box-shadow: none;
222 }
223 .wp-block-buttons {
224 /* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
225 }
226 .wp-block-buttons:not(.is-content-justification-space-between,
227 .is-content-justification-right,
228 .is-content-justification-left,
229 .is-content-justification-center) .wp-block[data-align=center] {
230 /* stylelint-enable @stylistic/indentation */
231 margin-left: auto;
232 margin-right: auto;
233 margin-top: 0;
234 width: 100%;
235 }
236 .wp-block-buttons:not(.is-content-justification-space-between,
237 .is-content-justification-right,
238 .is-content-justification-left,
239 .is-content-justification-center) .wp-block[data-align=center] .wp-block-button {
240 margin-bottom: 0;
241 }
242
243 .wp-block[data-align=center] > .wp-block-buttons {
244 align-items: center;
245 justify-content: center;
246 }
247
248 .wp-block[data-align=right] > .wp-block-buttons {
249 justify-content: flex-end;
250 }
251
252 .wp-block-categories ul {
253 padding-left: 2.5em;
254 }
255 .wp-block-categories ul ul {
256 margin-top: 6px;
257 }
258
259 /* Center alignment for classic themes. */
260 [data-align=center] .wp-block-categories {
261 text-align: center;
262 }
263
264 .wp-block-categories__indentation {
265 padding-left: 16px;
266 }
267
268 .wp-block-code code {
269 background: none;
270 }
271
272 .wp-block-columns :where(.wp-block) {
273 max-width: none;
274 margin-left: 0;
275 margin-right: 0;
276 }
277
278 html :where(.wp-block-column) {
279 margin-top: 0;
280 margin-bottom: 0;
281 }
282
283 /* Styles for backwards compatibility with the legacy `post-comments` block */
284 .wp-block-post-comments, .wp-block-comments__legacy-placeholder {
285 box-sizing: border-box;
286 /* utility classes */
287 }
288 .wp-block-post-comments .alignleft, .wp-block-comments__legacy-placeholder .alignleft {
289 float: left;
290 }
291 .wp-block-post-comments .alignright, .wp-block-comments__legacy-placeholder .alignright {
292 float: right;
293 }
294 .wp-block-post-comments, .wp-block-comments__legacy-placeholder {
295 /* end utility classes */
296 }
297 .wp-block-post-comments .navigation::after, .wp-block-comments__legacy-placeholder .navigation::after {
298 content: "";
299 display: table;
300 clear: both;
301 }
302 .wp-block-post-comments .commentlist, .wp-block-comments__legacy-placeholder .commentlist {
303 clear: both;
304 list-style: none;
305 margin: 0;
306 padding: 0;
307 }
308 .wp-block-post-comments .commentlist .comment, .wp-block-comments__legacy-placeholder .commentlist .comment {
309 min-height: 2.25em;
310 padding-left: 3.25em;
311 }
312 .wp-block-post-comments .commentlist .comment p, .wp-block-comments__legacy-placeholder .commentlist .comment p {
313 font-size: 1em;
314 line-height: 1.8;
315 margin: 1em 0;
316 }
317 .wp-block-post-comments .commentlist .children, .wp-block-comments__legacy-placeholder .commentlist .children {
318 list-style: none;
319 margin: 0;
320 padding: 0;
321 }
322 .wp-block-post-comments .comment-author, .wp-block-comments__legacy-placeholder .comment-author {
323 line-height: 1.5;
324 }
325 .wp-block-post-comments .comment-author .avatar, .wp-block-comments__legacy-placeholder .comment-author .avatar {
326 border-radius: 1.5em;
327 display: block;
328 float: left;
329 height: 2.5em;
330 margin-top: 0.5em;
331 margin-right: 0.75em;
332 width: 2.5em;
333 }
334 .wp-block-post-comments .comment-author cite, .wp-block-comments__legacy-placeholder .comment-author cite {
335 font-style: normal;
336 }
337 .wp-block-post-comments .comment-meta, .wp-block-comments__legacy-placeholder .comment-meta {
338 font-size: 0.875em;
339 line-height: 1.5;
340 }
341 .wp-block-post-comments .comment-meta b, .wp-block-comments__legacy-placeholder .comment-meta b {
342 font-weight: 400;
343 }
344 .wp-block-post-comments .comment-meta .comment-awaiting-moderation, .wp-block-comments__legacy-placeholder .comment-meta .comment-awaiting-moderation {
345 margin-top: 1em;
346 margin-bottom: 1em;
347 display: block;
348 }
349 .wp-block-post-comments .comment-body .commentmetadata, .wp-block-comments__legacy-placeholder .comment-body .commentmetadata {
350 font-size: 0.875em;
351 }
352 .wp-block-post-comments .comment-form textarea, .wp-block-comments__legacy-placeholder .comment-form textarea,
353 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),
354 .wp-block-comments__legacy-placeholder .comment-form input:not([type=submit]):not([type=checkbox]) {
355 display: block;
356 box-sizing: border-box;
357 width: 100%;
358 }
359 .wp-block-post-comments .comment-form-cookies-consent, .wp-block-comments__legacy-placeholder .comment-form-cookies-consent {
360 display: flex;
361 gap: 0.25em;
362 }
363 .wp-block-post-comments .comment-form-cookies-consent #wp-comment-cookies-consent, .wp-block-comments__legacy-placeholder .comment-form-cookies-consent #wp-comment-cookies-consent {
364 margin-top: 0.35em;
365 }
366 .wp-block-post-comments .comment-reply-title, .wp-block-comments__legacy-placeholder .comment-reply-title {
367 margin-bottom: 0;
368 }
369 .wp-block-post-comments .comment-reply-title :where(small), .wp-block-comments__legacy-placeholder .comment-reply-title :where(small) {
370 font-size: var(--wp--preset--font-size--medium, smaller);
371 margin-left: 0.5em;
372 }
373 .wp-block-post-comments .reply, .wp-block-comments__legacy-placeholder .reply {
374 font-size: 0.875em;
375 margin-bottom: 1.4em;
376 }
377 .wp-block-post-comments textarea, .wp-block-comments__legacy-placeholder textarea,
378 .wp-block-post-comments input:not([type=submit]),
379 .wp-block-comments__legacy-placeholder input:not([type=submit]) {
380 border: 1px solid #949494;
381 font-size: 1em;
382 font-family: inherit;
383 }
384 .wp-block-post-comments textarea, .wp-block-comments__legacy-placeholder textarea,
385 .wp-block-post-comments input:not([type=submit]):not([type=checkbox]),
386 .wp-block-comments__legacy-placeholder input:not([type=submit]):not([type=checkbox]) {
387 padding: calc(0.667em + 2px);
388 }
389
390 :where(.wp-block-post-comments .comment-form-comment label, .wp-block-comments__legacy-placeholder .comment-form-comment label),
391 :where(.wp-block-post-comments .comment-form-author label, .wp-block-comments__legacy-placeholder .comment-form-author label),
392 :where(.wp-block-post-comments .comment-form-email label, .wp-block-comments__legacy-placeholder .comment-form-email label),
393 :where(.wp-block-post-comments .comment-form-url label, .wp-block-comments__legacy-placeholder .comment-form-url label) {
394 display: block;
395 margin-bottom: 0.25em;
396 }
397
398 :where(.wp-block-post-comments input[type=submit], .wp-block-comments__legacy-placeholder input[type=submit]) {
399 border: none;
400 }
401
402 .wp-block-comments {
403 box-sizing: border-box;
404 }
405
406 .block-library-comments-toolbar__popover .components-popover__content {
407 min-width: 230px;
408 }
409
410 .wp-block-comments__legacy-placeholder * {
411 pointer-events: none;
412 }
413
414 .wp-block-comment-author-avatar__placeholder {
415 border: currentColor 1px dashed;
416 width: 100%;
417 height: 100%;
418 stroke: currentColor;
419 stroke-dasharray: 3;
420 }
421
422 .wp-block[data-align=center] > .wp-block-comments-pagination {
423 justify-content: center;
424 }
425
426 :where(.editor-styles-wrapper) .wp-block-comments-pagination {
427 max-width: 100%;
428 }
429
430 .wp-block-comments-pagination > .wp-block-comments-pagination-next,
431 .wp-block-comments-pagination > .wp-block-comments-pagination-previous,
432 .wp-block-comments-pagination > .wp-block-comments-pagination-numbers {
433 font-size: inherit;
434 }
435
436 .wp-block-comments-pagination-numbers a {
437 text-decoration: underline;
438 }
439 .wp-block-comments-pagination-numbers .page-numbers {
440 margin-right: 2px;
441 }
442 .wp-block-comments-pagination-numbers .page-numbers:last-child {
443 /*rtl:ignore*/
444 margin-right: 0;
445 }
446
447 .wp-block-comments-title.has-background {
448 padding: inherit;
449 }
450
451 .wp-block-cover.is-placeholder {
452 padding: 0 !important;
453 display: flex;
454 align-items: stretch;
455 min-height: 240px;
456 }
457 .wp-block-cover.is-placeholder .components-placeholder.is-large {
458 justify-content: flex-start;
459 z-index: 1;
460 }
461 .wp-block-cover.is-placeholder:focus::after {
462 min-height: auto;
463 }
464 .wp-block-cover.components-placeholder h2 {
465 color: inherit;
466 }
467 .wp-block-cover.is-transient {
468 position: relative;
469 }
470 .wp-block-cover.is-transient::before {
471 background-color: #fff;
472 content: "";
473 height: 100%;
474 opacity: 0.3;
475 position: absolute;
476 width: 100%;
477 z-index: 1;
478 }
479 .wp-block-cover.is-transient .wp-block-cover__inner-container {
480 z-index: 2;
481 }
482 .wp-block-cover.is-transient .components-spinner {
483 z-index: 3;
484 }
485 .wp-block-cover .components-spinner {
486 position: absolute;
487 top: 50%;
488 left: 50%;
489 transform: translate(-50%, -50%);
490 margin: 0;
491 }
492 .wp-block-cover .wp-block-cover__inner-container {
493 text-align: left;
494 margin-left: 0;
495 margin-right: 0;
496 }
497 .wp-block-cover .wp-block-cover__placeholder-background-options {
498 width: 100%;
499 }
500 .wp-block-cover .wp-block-cover__image--placeholder-image {
501 position: absolute;
502 top: 0;
503 right: 0;
504 bottom: 0;
505 left: 0;
506 }
507
508 [data-align=left] > .wp-block-cover,
509 [data-align=right] > .wp-block-cover {
510 max-width: 420px;
511 width: 100%;
512 }
513
514 .block-library-cover__reset-button {
515 margin-left: auto;
516 }
517
518 .block-library-cover__resize-container {
519 position: absolute !important;
520 top: 0;
521 left: 0;
522 right: 0;
523 bottom: 0;
524 min-height: 50px;
525 }
526
527 .components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover .components-popover__content > div,
528 .components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover .block-library-cover__resize-container {
529 pointer-events: none;
530 overflow: visible;
531 }
532
533 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
534 background-attachment: scroll;
535 }
536
537 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
538 margin-top: 24px;
539 }
540
541 .wp-block-details summary div {
542 display: inline;
543 }
544
545 .wp-block-embed {
546 margin-left: 0;
547 margin-right: 0;
548 clear: both;
549 }
550 .wp-block-embed.is-loading {
551 display: flex;
552 justify-content: center;
553 }
554 .wp-block-embed .wp-block-embed__placeholder-input {
555 flex: 1 1 auto;
556 }
557 .wp-block-embed .components-placeholder__error {
558 word-break: normal;
559 overflow-wrap: break-word;
560 }
561
562 .wp-block-post-content .wp-block-embed__learn-more a {
563 color: var(--wp-admin-theme-color);
564 }
565
566 .block-library-embed__interactive-overlay {
567 position: absolute;
568 top: 0;
569 left: 0;
570 right: 0;
571 bottom: 0;
572 opacity: 0;
573 }
574
575 .wp-block[data-align=left] > .wp-block-embed,
576 .wp-block[data-align=right] > .wp-block-embed {
577 max-width: 360px;
578 width: 100%;
579 }
580 .wp-block[data-align=left] > .wp-block-embed .wp-block-embed__wrapper,
581 .wp-block[data-align=right] > .wp-block-embed .wp-block-embed__wrapper {
582 min-width: 280px;
583 }
584
585 .wp-block[data-align=left] > .wp-block-file, .wp-block[data-align=right] > .wp-block-file {
586 height: auto;
587 }
588 .wp-block[data-align=center] > .wp-block-file {
589 text-align: center;
590 }
591 .wp-block-file {
592 display: flex;
593 flex-wrap: wrap;
594 justify-content: space-between;
595 align-items: center;
596 margin-bottom: 0;
597 }
598 .wp-block-file .components-resizable-box__container {
599 margin-bottom: 1em;
600 }
601 .wp-block-file .wp-block-file__preview {
602 margin-bottom: 1em;
603 width: 100%;
604 height: 100%;
605 }
606 .wp-block-file .wp-block-file__preview-overlay {
607 position: absolute;
608 top: 0;
609 right: 0;
610 bottom: 0;
611 left: 0;
612 }
613 .wp-block-file .wp-block-file__content-wrapper {
614 flex-grow: 1;
615 }
616 .wp-block-file a {
617 min-width: 1em;
618 }
619 .wp-block-file a:not(.wp-block-file__button) {
620 display: inline-block;
621 }
622 .wp-block-file .wp-block-file__button-richtext-wrapper {
623 display: inline-block;
624 margin-left: 0.75em;
625 }
626
627 .block-editor-freeform-modal .block-editor-freeform-modal__content .mce-edit-area iframe {
628 height: 50vh !important;
629 }
630 @media (min-width: 960px) {
631 .block-editor-freeform-modal .block-editor-freeform-modal__content:not(.is-full-screen) {
632 height: 9999rem;
633 }
634 .block-editor-freeform-modal .block-editor-freeform-modal__content .components-modal__header + div {
635 height: 100%;
636 }
637 .block-editor-freeform-modal .block-editor-freeform-modal__content .mce-tinymce {
638 height: calc(100% - 36px - 16px);
639 }
640 .block-editor-freeform-modal .block-editor-freeform-modal__content .mce-container-body {
641 height: 100%;
642 display: flex;
643 flex-direction: column;
644 min-width: 50vw;
645 }
646 .block-editor-freeform-modal .block-editor-freeform-modal__content .mce-edit-area {
647 flex-grow: 1;
648 display: flex;
649 flex-direction: column;
650 }
651 .block-editor-freeform-modal .block-editor-freeform-modal__content .mce-edit-area iframe {
652 flex-grow: 1;
653 height: 10px !important;
654 }
655 }
656 .block-editor-freeform-modal__actions {
657 margin-top: 16px;
658 }
659
660 :root :where(figure.wp-block-gallery.is-layout-flex) {
661 display: block;
662 }
663 :root :where(figure.wp-block-gallery.is-layout-flex) > .blocks-gallery-caption {
664 flex: 0 0 100%;
665 }
666
667 :root :where(.wp-block-gallery.is-layout-grid) > .blocks-gallery-caption,
668 :root :where(.wp-block-gallery.is-layout-grid) > .components-placeholder,
669 :root :where(.wp-block-gallery.is-layout-grid) > .block-editor-media-placeholder {
670 grid-column: 1/-1;
671 }
672
673 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
674 display: none;
675 }
676 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__button {
677 margin-bottom: 0;
678 }
679 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder {
680 margin: 0;
681 }
682 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder .components-placeholder__label {
683 display: flex;
684 }
685 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder figcaption {
686 z-index: 2;
687 }
688 :root :where(figure.wp-block-gallery) .components-spinner {
689 position: absolute;
690 top: 50%;
691 left: 50%;
692 margin-top: -9px;
693 margin-left: -9px;
694 }
695
696 /**
697 * Gallery inspector controls settings.
698 */
699 .gallery-settings-buttons .components-button:first-child {
700 margin-right: 8px;
701 }
702
703 /**
704 * Deprecated css past this point. This can be removed once all galleries are migrated
705 * to V2.
706 */
707 .blocks-gallery-item figure:not(.is-selected):focus,
708 .blocks-gallery-item img:focus {
709 outline: none;
710 }
711 .blocks-gallery-item figure.is-selected::before {
712 box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
713 content: "";
714 outline: 2px solid transparent;
715 position: absolute;
716 top: 0;
717 right: 0;
718 bottom: 0;
719 left: 0;
720 z-index: 1;
721 pointer-events: none;
722 }
723 .blocks-gallery-item figure.is-transient img {
724 opacity: 0.3;
725 }
726 .blocks-gallery-item .block-editor-media-placeholder {
727 margin: 0;
728 height: 100%;
729 }
730 .blocks-gallery-item .block-editor-media-placeholder .components-placeholder__label {
731 display: flex;
732 }
733
734 .wp-block-gallery ul.blocks-gallery-grid {
735 padding: 0;
736 margin: 0;
737 }
738
739 @media (min-width: 600px) {
740 .wp-block-update-gallery-modal {
741 max-width: 480px;
742 }
743 }
744
745 .wp-block-update-gallery-modal-buttons {
746 display: flex;
747 justify-content: flex-end;
748 gap: 12px;
749 }
750
751 .wp-block-gallery__source-settings {
752 grid-column: 1/-1;
753 display: flex;
754 flex-direction: column;
755 gap: 8px;
756 }
757 .wp-block-gallery__source-settings .wp-block-gallery__source-description {
758 margin: 0;
759 color: #757575;
760 font-size: 12px;
761 }
762 .wp-block-gallery__source-settings .components-button {
763 justify-content: center;
764 width: 100%;
765 }
766
767 .wp-block-gallery__source-notice {
768 grid-column: 1/-1;
769 margin: 0;
770 }
771
772 /**
773 * Group: All Alignment Settings
774 */
775 .wp-block-group .block-editor-block-list__insertion-point {
776 left: 0;
777 right: 0;
778 }
779
780 [data-type="core/group"].is-selected .block-list-appender {
781 margin-left: 0;
782 margin-right: 0;
783 }
784 [data-type="core/group"].is-selected .has-background .block-list-appender {
785 margin-top: 18px;
786 margin-bottom: 18px;
787 }
788
789 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child {
790 gap: inherit;
791 }
792 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child,
793 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-default-block-appender__content,
794 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter {
795 display: inherit;
796 width: 100%;
797 flex-direction: inherit;
798 flex: 1;
799 }
800 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child::after {
801 content: "";
802 display: flex;
803 flex: 1 0 40px;
804 pointer-events: none;
805 min-height: 38px;
806 border: 1px dashed currentColor;
807 }
808 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child {
809 pointer-events: none;
810 }
811 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter,
812 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-button-block-appender {
813 pointer-events: all;
814 }
815
816 .block-library-html__edit .block-library-html__preview-overlay {
817 position: absolute;
818 width: 100%;
819 height: 100%;
820 top: 0;
821 left: 0;
822 }
823
824 .block-library-html__edit-code {
825 margin: 16px;
826 }
827 .block-library-html__edit-code .block-library-html__edit-code-button {
828 justify-content: center;
829 }
830
831 @media (min-width: 600px) {
832 .block-library-html__modal:not(.is-full-screen) {
833 height: 9999rem;
834 }
835 }
836 .block-library-html__modal .components-modal__children-container {
837 height: 100%;
838 }
839
840 .block-library-html__modal-tabs {
841 flex: 1;
842 }
843
844 .block-library-html__modal-content {
845 flex: 1;
846 }
847
848 .block-library-html__modal-tab {
849 height: 100%;
850 display: flex;
851 flex-direction: column;
852 margin: 0;
853 box-sizing: border-box;
854 border: 1px solid #e0e0e0;
855 border-radius: 2px;
856 padding: 16px;
857 font-family: Menlo, Consolas, monaco, monospace;
858 }
859
860 .block-library-html__modal-editor {
861 width: 100%;
862 height: 100%;
863 flex: 1;
864 border: none;
865 background: transparent;
866 padding: 0;
867 font-family: inherit;
868 font-size: inherit;
869 line-height: inherit;
870 color: inherit;
871 resize: none;
872 /*rtl:ignore*/
873 direction: ltr;
874 overflow-x: auto;
875 box-sizing: border-box;
876 }
877 .block-library-html__modal-editor:focus {
878 outline: none;
879 box-shadow: none;
880 }
881
882 .block-library-html__preview {
883 display: flex;
884 align-items: center;
885 justify-content: center;
886 min-height: 0;
887 overflow-y: auto;
888 flex: 1;
889 }
890 .block-library-html__preview iframe {
891 height: 100%;
892 }
893
894 .wp-block[data-align=center] > .wp-block-icon {
895 display: flex;
896 justify-content: center;
897 }
898
899 .wp-block-icon__inserter-sidebar {
900 padding-bottom: 24px;
901 }
902 @media (min-width: 782px) {
903 .wp-block-icon__inserter-sidebar {
904 overflow-x: visible;
905 overflow-y: auto;
906 position: absolute;
907 top: 72px;
908 left: 0;
909 bottom: 0;
910 width: 280px;
911 padding-top: 24px;
912 padding-inline: 24px;
913 }
914 }
915
916 @media (min-width: 782px) {
917 .wp-block-icon__inserter-panel {
918 margin-inline-start: 280px;
919 }
920 }
921
922 .wp-block-icon__inserter-loading {
923 display: flex;
924 justify-content: center;
925 padding: 24px;
926 }
927
928 .wp-block-icon__inserter-grid-icons-list {
929 display: grid;
930 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
931 }
932
933 .wp-block-icon__inserter-grid-no-results {
934 display: flex;
935 justify-content: center;
936 }
937
938 .wp-block-icon__inserter-grid-icons-list-item {
939 display: flex;
940 flex-direction: column;
941 height: auto !important;
942 }
943
944 .wp-block-icon__inserter-grid-icons-list-item-icon {
945 padding: 12px;
946 }
947 .wp-block-icon__inserter-grid-icons-list-item-icon svg {
948 display: block;
949 width: 24px;
950 height: 24px;
951 }
952
953 .wp-block-icon__inserter-grid-icons-list-item-title {
954 font-size: 12px;
955 padding: 4px 4px 8px;
956 overflow-wrap: break-word;
957 }
958
959 .wp-block-icon__toolbar-content {
960 width: 250px;
961 }
962
963 .wp-block-icon__placeholder {
964 backdrop-filter: blur(100px);
965 }
966
967 .wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
968 min-height: 60px;
969 }
970
971 figure.wp-block-image:not(.wp-block) {
972 margin: 0;
973 }
974
975 .wp-block-image {
976 position: relative;
977 }
978 .wp-block-image.is-transient:not(.alignwide):not(.alignfull), .wp-block-image:has(img.is-swapping-media):not(.alignwide):not(.alignfull) {
979 width: fit-content;
980 }
981 .wp-block-image .is-applying img, .wp-block-image.is-transient img,
982 .wp-block-image img.is-swapping-media {
983 opacity: 0.3;
984 }
985 .wp-block-image figcaption img {
986 display: inline;
987 }
988 .wp-block-image .components-spinner {
989 position: absolute;
990 top: 50%;
991 left: 50%;
992 transform: translate(-50%, -50%);
993 margin: 0;
994 }
995 .wp-block-image .components-resizable-box__container {
996 pointer-events: none;
997 }
998 .wp-block-image .components-resizable-box__handle {
999 pointer-events: auto;
1000 }
1001
1002 .wp-block-image__placeholder {
1003 aspect-ratio: 4/3;
1004 }
1005 .wp-block-image__placeholder.has-illustration::before {
1006 background: #fff;
1007 opacity: 0.8;
1008 }
1009 .wp-block-image__placeholder .components-placeholder__illustration {
1010 opacity: 0.1;
1011 }
1012
1013 .wp-block-image.is-selected .block-editor-media-placeholder {
1014 filter: none !important;
1015 }
1016
1017 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
1018 position: absolute;
1019 left: 0;
1020 right: 0;
1021 margin: -1px 0;
1022 }
1023 @media (min-width: 600px) {
1024 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
1025 margin: -1px;
1026 }
1027 }
1028
1029 [data-align=wide] > .wp-block-image img,
1030 [data-align=full] > .wp-block-image img {
1031 height: auto;
1032 width: 100%;
1033 }
1034
1035 .wp-block[data-align=left] > .wp-block-image,
1036 .wp-block[data-align=center] > .wp-block-image,
1037 .wp-block[data-align=right] > .wp-block-image {
1038 display: table;
1039 }
1040 .wp-block[data-align=left] > .wp-block-image > figcaption,
1041 .wp-block[data-align=center] > .wp-block-image > figcaption,
1042 .wp-block[data-align=right] > .wp-block-image > figcaption {
1043 display: table-caption;
1044 caption-side: bottom;
1045 }
1046
1047 .wp-block[data-align=left] > .wp-block-image {
1048 margin-right: 1em;
1049 margin-left: 0;
1050 margin-top: 0.5em;
1051 margin-bottom: 0.5em;
1052 }
1053
1054 .wp-block[data-align=right] > .wp-block-image {
1055 margin-left: 1em;
1056 margin-right: 0;
1057 margin-top: 0.5em;
1058 margin-bottom: 0.5em;
1059 }
1060
1061 .wp-block[data-align=center] > .wp-block-image {
1062 margin-left: auto;
1063 margin-right: auto;
1064 text-align: center;
1065 }
1066
1067 .wp-block[data-align]:has(> .wp-block-image) {
1068 position: relative;
1069 }
1070
1071 .wp-block-image__toolbar_content_textarea__container {
1072 padding: 8px;
1073 }
1074
1075 .wp-block-image__toolbar_content_textarea {
1076 width: 250px;
1077 }
1078
1079 .wp-block-latest-posts > li {
1080 overflow: hidden;
1081 }
1082
1083 .wp-block-latest-posts li a > div {
1084 display: inline;
1085 }
1086
1087 :root :where(.wp-block-latest-posts) {
1088 padding-left: 2.5em;
1089 }
1090
1091 :root :where(.wp-block-latest-posts.is-grid),
1092 :root :where(.wp-block-latest-posts__list) {
1093 padding-left: 0;
1094 }
1095
1096 .wp-block-math__textarea-control textarea {
1097 font-family: Menlo, Consolas, monaco, monospace;
1098 /*rtl:ignore*/
1099 direction: ltr;
1100 }
1101
1102 .wp-block-math__learn-more {
1103 display: inline-block;
1104 margin-top: var(--wpds-dimension-gap-sm, 8px);
1105 }
1106
1107 .wp-block-media-text__media {
1108 position: relative;
1109 }
1110 .wp-block-media-text__media.is-transient img {
1111 opacity: 0.3;
1112 }
1113 .wp-block-media-text__media .components-spinner {
1114 position: absolute;
1115 top: 50%;
1116 left: 50%;
1117 margin-top: -9px;
1118 margin-left: -9px;
1119 }
1120
1121 .wp-block-media-text .__resizable_base__ {
1122 grid-column: 1/span 2;
1123 grid-row: 2;
1124 }
1125
1126 .wp-block-media-text .editor-media-container__resizer {
1127 width: 100% !important;
1128 }
1129
1130 .wp-block-media-text.is-image-fill .editor-media-container__resizer,
1131 .wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
1132 .wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
1133 .wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
1134 height: 100% !important;
1135 }
1136
1137 .wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
1138 max-width: unset;
1139 }
1140
1141 /* Make the featured image placeholder the same height as the media selection area. */
1142 .wp-block-media-text--placeholder-image {
1143 min-height: 205px;
1144 }
1145
1146 .block-editor-block-list__block[data-type="core/more"] {
1147 max-width: 100%;
1148 text-align: center;
1149 margin-top: 28px;
1150 margin-bottom: 28px;
1151 }
1152
1153 .wp-block-more {
1154 display: block;
1155 text-align: center;
1156 white-space: nowrap;
1157 }
1158 .wp-block-more .rich-text {
1159 position: relative;
1160 font-size: 13px;
1161 text-transform: uppercase;
1162 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1163 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1164 color: #757575;
1165 display: inline-flex;
1166 white-space: nowrap;
1167 text-align: center;
1168 background: #fff;
1169 padding: 10px 36px;
1170 }
1171 .wp-block-more::before {
1172 content: "";
1173 position: absolute;
1174 top: 50%;
1175 left: 0;
1176 right: 0;
1177 border-top: 3px dashed #ccc;
1178 }
1179
1180 /**
1181 * Editor only CSS.
1182 */
1183 .editor-styles-wrapper .wp-block-navigation ul {
1184 margin-top: 0;
1185 margin-bottom: 0;
1186 margin-left: 0;
1187 padding-left: 0;
1188 }
1189 .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
1190 margin: revert;
1191 }
1192
1193 .wp-block-navigation-item__label {
1194 display: inline;
1195 }
1196
1197 /**
1198 * Submenus.
1199 */
1200 .wp-block-navigation__container,
1201 .wp-block-navigation-item {
1202 background-color: inherit;
1203 }
1204
1205 .wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container {
1206 opacity: 0;
1207 visibility: hidden;
1208 }
1209
1210 .has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container {
1211 display: flex;
1212 opacity: 1;
1213 visibility: visible;
1214 }
1215
1216 .is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container {
1217 opacity: 1;
1218 visibility: visible;
1219 }
1220
1221 .wp-block-navigation__container.block-editor-block-list__layout {
1222 flex-grow: 1;
1223 }
1224
1225 .is-editing > .wp-block-navigation__container {
1226 visibility: visible;
1227 opacity: 1;
1228 display: flex;
1229 flex-direction: column;
1230 }
1231
1232 .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
1233 opacity: 1;
1234 visibility: hidden;
1235 }
1236 .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container .block-editor-block-draggable-chip-wrapper {
1237 visibility: visible;
1238 }
1239
1240 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
1241 display: block;
1242 position: static;
1243 width: 100%;
1244 }
1245 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender .block-editor-button-block-appender {
1246 color: #fff;
1247 background: #1e1e1e;
1248 padding: 0;
1249 width: 24px;
1250 margin-right: 0;
1251 margin-left: auto;
1252 }
1253
1254 .wp-block-navigation__submenu-container .block-list-appender {
1255 display: none;
1256 }
1257
1258 /**
1259 * Colors Selector component
1260 */
1261 .block-library-colors-selector {
1262 width: auto;
1263 }
1264 .block-library-colors-selector .block-library-colors-selector__toggle {
1265 display: block;
1266 margin: 0 auto;
1267 padding: 3px;
1268 width: auto;
1269 }
1270 .block-library-colors-selector .block-library-colors-selector__icon-container {
1271 height: 30px;
1272 position: relative;
1273 margin: 0 auto;
1274 padding: 3px;
1275 display: flex;
1276 align-items: center;
1277 border-radius: 4px;
1278 }
1279 .block-library-colors-selector .block-library-colors-selector__state-selection {
1280 margin-left: auto;
1281 margin-right: auto;
1282 border-radius: 11px;
1283 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1284 width: 22px;
1285 min-width: 22px;
1286 height: 22px;
1287 min-height: 22px;
1288 line-height: 20px;
1289 padding: 2px;
1290 }
1291 .block-library-colors-selector .block-library-colors-selector__state-selection > svg {
1292 min-width: auto !important;
1293 }
1294 .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg,
1295 .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path {
1296 color: inherit;
1297 }
1298
1299 .block-library-colors-selector__popover .color-palette-controller-container {
1300 padding: 16px;
1301 }
1302 .block-library-colors-selector__popover .components-base-control__label {
1303 height: 20px;
1304 line-height: 20px;
1305 }
1306 .block-library-colors-selector__popover .component-color-indicator {
1307 float: right;
1308 margin-top: 2px;
1309 }
1310 .block-library-colors-selector__popover .components-panel__body-title {
1311 display: none;
1312 }
1313
1314 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
1315 background-color: #1e1e1e;
1316 color: #fff;
1317 height: 24px;
1318 width: 24px;
1319 }
1320 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender {
1321 padding: 0;
1322 }
1323
1324 .wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender {
1325 background-color: transparent;
1326 color: #1e1e1e;
1327 }
1328
1329 /**
1330 * Setup state
1331 */
1332 @keyframes loadingpulse {
1333 0% {
1334 opacity: 1;
1335 }
1336 50% {
1337 opacity: 0.5;
1338 }
1339 100% {
1340 opacity: 1;
1341 }
1342 }
1343 .components-placeholder.wp-block-navigation-placeholder {
1344 outline: none;
1345 padding: 0;
1346 box-shadow: none;
1347 background: none;
1348 min-height: 0;
1349 }
1350 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset {
1351 font-size: inherit;
1352 }
1353 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button {
1354 margin-bottom: 0;
1355 }
1356 .components-placeholder.wp-block-navigation-placeholder {
1357 color: inherit;
1358 }
1359 .wp-block-navigation.is-selected .components-placeholder.wp-block-navigation-placeholder {
1360 color: #1e1e1e;
1361 }
1362
1363 .wp-block-navigation-placeholder__preview {
1364 display: flex;
1365 align-items: center;
1366 min-width: 96px;
1367 font-size: 13px;
1368 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1369 }
1370 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview {
1371 display: none;
1372 }
1373 .wp-block-navigation-placeholder__preview {
1374 color: currentColor;
1375 background: transparent;
1376 }
1377 .wp-block-navigation-placeholder__preview::before {
1378 content: "";
1379 display: block;
1380 position: absolute;
1381 top: 0;
1382 right: 0;
1383 bottom: 0;
1384 left: 0;
1385 pointer-events: none;
1386 border: 1px dashed currentColor;
1387 border-radius: inherit;
1388 }
1389 .wp-block-navigation-placeholder__preview > svg {
1390 fill: currentColor;
1391 }
1392
1393 .wp-block-navigation.is-vertical .is-small .components-placeholder__fieldset,
1394 .wp-block-navigation.is-vertical .is-medium .components-placeholder__fieldset {
1395 min-height: 90px;
1396 }
1397
1398 .wp-block-navigation.is-vertical .is-large .components-placeholder__fieldset {
1399 min-height: 132px;
1400 }
1401
1402 .wp-block-navigation-placeholder__preview,
1403 .wp-block-navigation-placeholder__controls {
1404 padding: 6px 8px;
1405 flex-direction: row;
1406 align-items: flex-start;
1407 }
1408
1409 .wp-block-navigation-placeholder__controls {
1410 border-radius: 2px;
1411 background-color: #fff;
1412 box-shadow: inset 0 0 0 1px #1e1e1e;
1413 display: none;
1414 position: relative;
1415 z-index: 1;
1416 }
1417 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls {
1418 display: flex;
1419 }
1420 .wp-block-navigation-placeholder__controls {
1421 float: left;
1422 width: 100%;
1423 }
1424 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,
1425 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr, .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,
1426 .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr {
1427 display: none;
1428 }
1429 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions {
1430 flex-direction: column;
1431 align-items: flex-start;
1432 }
1433 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr, .wp-block-navigation.is-vertical .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions hr {
1434 display: none;
1435 }
1436 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon {
1437 margin-right: 12px;
1438 height: 36px;
1439 }
1440
1441 .wp-block-navigation-placeholder__actions__indicator {
1442 display: flex;
1443 padding: 0 6px 0 0;
1444 align-items: center;
1445 justify-content: flex-start;
1446 line-height: 0;
1447 height: 36px;
1448 margin-left: 4px;
1449 }
1450 .wp-block-navigation-placeholder__actions__indicator svg {
1451 margin-right: 4px;
1452 fill: currentColor;
1453 }
1454
1455 .wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset {
1456 flex-direction: row !important;
1457 }
1458
1459 .wp-block-navigation-placeholder__actions {
1460 display: flex;
1461 font-size: 13px;
1462 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1463 gap: 6px;
1464 align-items: center;
1465 }
1466 .wp-block-navigation-placeholder__actions .components-dropdown,
1467 .wp-block-navigation-placeholder__actions > .components-button {
1468 margin-right: 0;
1469 }
1470 .wp-block-navigation-placeholder__actions {
1471 height: 100%;
1472 }
1473 .wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr {
1474 border: 0;
1475 min-height: 1px;
1476 min-width: 1px;
1477 background-color: #1e1e1e;
1478 margin: auto 0;
1479 height: 100%;
1480 max-height: 16px;
1481 }
1482
1483 /**
1484 * Mobile menu.
1485 */
1486 @media (min-width: 600px) {
1487 .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close {
1488 display: none;
1489 }
1490 }
1491
1492 .wp-block-navigation__responsive-container.is-menu-open {
1493 position: fixed;
1494 top: 159px;
1495 }
1496 @media (min-width: 782px) {
1497 .wp-block-navigation__responsive-container.is-menu-open {
1498 top: 97px;
1499 }
1500 }
1501 @media (min-width: 782px) {
1502 .wp-block-navigation__responsive-container.is-menu-open {
1503 left: 36px;
1504 }
1505 }
1506 @media (min-width: 960px) {
1507 .wp-block-navigation__responsive-container.is-menu-open {
1508 left: 160px;
1509 }
1510 }
1511
1512 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
1513 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
1514 top: 145px;
1515 }
1516
1517 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open {
1518 left: 0;
1519 top: 159px;
1520 }
1521 @media (min-width: 782px) {
1522 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open {
1523 top: 65px;
1524 }
1525 }
1526 .is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
1527 .is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
1528 top: 113px;
1529 }
1530
1531 body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
1532 top: 0;
1533 right: 0;
1534 bottom: 0;
1535 left: 0;
1536 }
1537
1538 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
1539 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
1540 padding: 0;
1541 height: auto;
1542 color: inherit;
1543 }
1544
1545 .components-heading.wp-block-navigation-off-canvas-editor__title {
1546 margin: 0;
1547 }
1548
1549 .wp-block-navigation-off-canvas-editor__header {
1550 margin-bottom: 8px;
1551 }
1552
1553 .is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender {
1554 margin-top: 16px;
1555 }
1556
1557 @keyframes fadein {
1558 0% {
1559 opacity: 0;
1560 }
1561 100% {
1562 opacity: 1;
1563 }
1564 }
1565 .wp-block-navigation__loading-indicator-container {
1566 padding: 8px 12px;
1567 }
1568
1569 .wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
1570 margin-top: 0;
1571 }
1572
1573 @keyframes fadeouthalf {
1574 0% {
1575 opacity: 1;
1576 }
1577 100% {
1578 opacity: 0.5;
1579 }
1580 }
1581 .wp-block-navigation-delete-menu-button {
1582 width: 100%;
1583 justify-content: center;
1584 margin-bottom: 16px;
1585 }
1586
1587 .components-button.is-link.wp-block-navigation-manage-menus-button {
1588 margin-bottom: 16px;
1589 }
1590
1591 .wp-block-navigation__overlay-menu-preview {
1592 display: flex;
1593 align-items: center;
1594 justify-content: space-between;
1595 width: 100%;
1596 background-color: #f0f0f0;
1597 padding: 0 24px;
1598 height: 64px !important;
1599 grid-column: span 2;
1600 }
1601 .wp-block-navigation__overlay-menu-preview.open {
1602 border-color: #e0e0e0;
1603 background-color: #fff;
1604 }
1605
1606 .wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty {
1607 display: none;
1608 }
1609
1610 .wp-block-navigation-placeholder__actions hr + hr {
1611 display: none;
1612 }
1613
1614 /**
1615 * Navigation selector styles
1616 */
1617 .wp-block-navigation__navigation-selector {
1618 margin-bottom: 16px;
1619 width: 100%;
1620 }
1621
1622 .wp-block-navigation__navigation-selector-button {
1623 border: 1px solid;
1624 justify-content: space-between;
1625 width: 100%;
1626 }
1627
1628 .wp-block-navigation__navigation-selector-button__icon {
1629 flex: 0 0 auto;
1630 }
1631
1632 .wp-block-navigation__navigation-selector-button__label {
1633 flex: 0 1 auto;
1634 overflow: hidden;
1635 text-overflow: ellipsis;
1636 white-space: nowrap;
1637 }
1638
1639 .wp-block-navigation__navigation-selector-button--createnew {
1640 border: 1px solid;
1641 margin-bottom: 16px;
1642 width: 100%;
1643 }
1644
1645 .wp-block-navigation__responsive-container-open.components-button {
1646 opacity: 1;
1647 }
1648
1649 .wp-block-navigation__menu-inspector-controls__empty-message {
1650 margin-left: 24px;
1651 }
1652
1653 .editor-sidebar__panel .wp-block-navigation__submenu-header {
1654 margin-top: 0;
1655 margin-bottom: 0;
1656 }
1657
1658 .wp-block-navigation__submenu-accessibility-notice {
1659 grid-column: span 2;
1660 }
1661
1662 .wp-block-navigation__overlay-selector {
1663 position: relative;
1664 }
1665
1666 .wp-block-navigation__overlay-selector-controls {
1667 margin-bottom: 8px;
1668 }
1669
1670 .wp-block-navigation__overlay-create-button {
1671 position: absolute;
1672 top: -4px;
1673 right: 0;
1674 z-index: 1;
1675 }
1676
1677 .wp-block-navigation__overlay-preview {
1678 border: 1px solid #ddd;
1679 border-radius: 2px;
1680 overflow-y: auto;
1681 max-height: 200px;
1682 background: #fff;
1683 }
1684
1685 .wp-block-navigation__overlay-preview-loading {
1686 display: flex;
1687 align-items: center;
1688 justify-content: center;
1689 min-height: 200px;
1690 background: #f0f0f0;
1691 }
1692
1693 .wp-block-navigation__overlay-preview-empty {
1694 display: flex;
1695 align-items: center;
1696 justify-content: center;
1697 min-height: 200px;
1698 padding: 16px;
1699 text-align: center;
1700 color: #757575;
1701 background: #f0f0f0;
1702 font-style: italic;
1703 }
1704
1705 .wp-block-navigation__overlay-preview-placeholder {
1706 width: 100%;
1707 height: 200px;
1708 background: #f0f0f0;
1709 animation: wp-block-navigation-overlay-preview-pulse 1.5s ease-in-out infinite;
1710 }
1711
1712 @keyframes wp-block-navigation-overlay-preview-pulse {
1713 0%, 100% {
1714 opacity: 1;
1715 }
1716 50% {
1717 opacity: 0.5;
1718 }
1719 }
1720 .wp-block-navigation__deleted-overlay-warning {
1721 margin-top: 12px;
1722 }
1723
1724 .wp-block-navigation__overlay-create-button-prominent {
1725 width: 100%;
1726 justify-content: center;
1727 margin-bottom: 8px;
1728 }
1729
1730 .wp-block-navigation__overlay-help-text-wrapper {
1731 margin-top: 8px;
1732 }
1733
1734 .wp-block-audio__autoplay-help-text {
1735 grid-column: 1/-1;
1736 }
1737
1738 /**
1739 * Appender
1740 */
1741 .wp-block-navigation .block-list-appender {
1742 position: relative;
1743 }
1744
1745 /**
1746 * Submenus.
1747 */
1748 .wp-block-navigation .has-child {
1749 cursor: pointer;
1750 }
1751 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
1752 z-index: 28;
1753 }
1754 .wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container {
1755 z-index: 29;
1756 }
1757 .wp-block-navigation .has-child.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected > .wp-block-navigation__submenu-container {
1758 visibility: visible !important;
1759 opacity: 1 !important;
1760 height: auto !important;
1761 width: auto !important;
1762 overflow: visible !important;
1763 }
1764 .wp-block-navigation .has-child.is-selected:not(.open-always) > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected:not(.open-always) > .wp-block-navigation__submenu-container {
1765 min-width: 200px !important;
1766 }
1767
1768 /**
1769 * Navigation Items.
1770 */
1771 .wp-block-navigation-item .wp-block-navigation-item__content {
1772 cursor: text;
1773 }
1774 .wp-block-navigation-item.is-editing, .wp-block-navigation-item.is-selected {
1775 min-width: 20px;
1776 }
1777 .wp-block-navigation-item .block-list-appender {
1778 margin-top: 16px;
1779 margin-right: auto;
1780 margin-bottom: 16px;
1781 margin-left: 16px;
1782 }
1783
1784 .wp-block-navigation-link__invalid-item {
1785 color: #000;
1786 }
1787
1788 /**
1789 * Menu item setup state. Is shown when a menu item has no URL configured.
1790 */
1791 .wp-block-navigation-link__placeholder {
1792 position: relative;
1793 text-decoration: none !important;
1794 box-shadow: none !important;
1795 background-image: none !important;
1796 }
1797 .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {
1798 -webkit-text-decoration: wavy underline;
1799 text-decoration: wavy underline;
1800 -webkit-text-decoration-skip-ink: none;
1801 text-decoration-skip-ink: none;
1802 text-underline-offset: 0.25rem;
1803 }
1804 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
1805 cursor: pointer;
1806 }
1807
1808 /**
1809 * Link Control Transforms
1810 */
1811 .link-control-transform {
1812 border-top: 1px solid #ccc;
1813 padding: 0 16px 8px 16px;
1814 }
1815
1816 .link-control-transform__subheading {
1817 font-size: 11px;
1818 text-transform: uppercase;
1819 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1820 color: #1e1e1e;
1821 margin-bottom: 1.5em;
1822 }
1823
1824 .link-control-transform__items {
1825 display: flex;
1826 justify-content: space-between;
1827 }
1828
1829 .link-control-transform__item {
1830 flex-basis: 33%;
1831 flex-direction: column;
1832 gap: 8px;
1833 height: auto;
1834 }
1835
1836 .link-ui-page-creator {
1837 max-width: 350px;
1838 min-width: auto;
1839 width: 90vw;
1840 padding-top: 8px;
1841 }
1842 .link-ui-page-creator__inner {
1843 padding: 16px;
1844 }
1845 .link-ui-page-creator__back {
1846 margin-left: 8px;
1847 text-transform: uppercase;
1848 }
1849
1850 /**
1851 * Error text styling for missing entity help text.
1852 */
1853 .navigation-link-control__error-text {
1854 color: #cc1818;
1855 }
1856
1857 .navigation-link-to__action-button {
1858 grid-column: auto;
1859 }
1860 .navigation-link-to__action-button:nth-last-child(1 of .navigation-link-to__action-button):nth-child(odd of .navigation-link-to__action-button) {
1861 grid-column: 1/-1;
1862 }
1863 .navigation-link-to__action-button.navigation-link-to__action-button.navigation-link-to__action-button {
1864 justify-content: center;
1865 }
1866
1867 .wp-block-navigation-submenu {
1868 display: block;
1869 }
1870 .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
1871 z-index: 28;
1872 }
1873 .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container {
1874 visibility: visible !important;
1875 opacity: 1 !important;
1876 height: auto !important;
1877 width: auto !important;
1878 position: absolute;
1879 left: -1px;
1880 top: 100%;
1881 }
1882 @media (min-width: 782px) {
1883 .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
1884 left: 100%;
1885 top: -1px;
1886 }
1887 .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
1888 content: "";
1889 position: absolute;
1890 right: 100%;
1891 height: 100%;
1892 display: block;
1893 width: 0.5em;
1894 background: transparent;
1895 }
1896 }
1897 .wp-block-navigation-submenu.is-selected:not(.open-always) > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected:not(.open-always) > .wp-block-navigation__submenu-container {
1898 min-width: 200px !important;
1899 }
1900
1901 .block-editor-block-list__block[data-type="core/nextpage"] {
1902 max-width: 100%;
1903 text-align: center;
1904 margin-top: 28px;
1905 margin-bottom: 28px;
1906 }
1907
1908 .wp-block-nextpage {
1909 display: block;
1910 text-align: center;
1911 white-space: nowrap;
1912 }
1913 .wp-block-nextpage > span {
1914 font-size: 13px;
1915 position: relative;
1916 text-transform: uppercase;
1917 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1918 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1919 color: #757575;
1920 border-radius: 4px;
1921 background: #fff;
1922 padding: 6px 8px;
1923 height: 24px;
1924 }
1925 .wp-block-nextpage::before {
1926 content: "";
1927 position: absolute;
1928 top: 50%;
1929 left: 0;
1930 right: 0;
1931 border-top: 3px dashed #ccc;
1932 }
1933
1934 .wp-block-navigation.items-justified-space-between .wp-block-page-list > div,
1935 .wp-block-navigation.items-justified-space-between .wp-block-page-list {
1936 display: contents;
1937 flex: 1;
1938 }
1939 .wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list > div, .wp-block-navigation.items-justified-space-between.has-child-selected .wp-block-page-list, .wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list > div, .wp-block-navigation.items-justified-space-between.is-selected .wp-block-page-list {
1940 flex: inherit;
1941 }
1942
1943 .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
1944 display: block;
1945 }
1946
1947 .wp-block-pages-list__item__link {
1948 pointer-events: none;
1949 }
1950
1951 .wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
1952 visibility: visible;
1953 opacity: 1;
1954 width: auto;
1955 height: auto;
1956 min-width: 200px;
1957 }
1958
1959 .wp-block-page-list__loading-indicator-container {
1960 padding: 8px 12px;
1961 }
1962
1963 .block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus {
1964 min-height: auto !important;
1965 }
1966
1967 .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
1968 opacity: 1;
1969 }
1970
1971 .block-editor-block-list__block[data-empty=true] + .block-editor-block-list__block[data-empty=true]:not([data-custom-placeholder=true]) [data-rich-text-placeholder] {
1972 opacity: 0;
1973 }
1974
1975 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
1976 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
1977 rotate: 180deg;
1978 }
1979
1980 .is-zoomed-out .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
1981 opacity: 0;
1982 }
1983
1984 html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
1985 float: initial;
1986 margin-left: 0.1em;
1987 }
1988
1989 .wp-block-post-author__transform {
1990 background: #f0f0f0;
1991 border-radius: 2px;
1992 margin: 16px;
1993 padding: 16px;
1994 }
1995
1996 .wp-block-playlist__waveform-color-controls {
1997 display: grid;
1998 grid-column: 1/-1;
1999 row-gap: 0;
2000 }
2001
2002 .wp-block-post-excerpt .wp-block-post-excerpt__excerpt.is-inline {
2003 display: inline;
2004 }
2005
2006 .wp-block-pullquote.is-style-solid-color blockquote p {
2007 font-size: 32px;
2008 }
2009 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation {
2010 text-transform: none;
2011 font-style: normal;
2012 }
2013
2014 .wp-block-pullquote__citation {
2015 color: inherit;
2016 }
2017
2018 .wp-block-pullquote[style*=line-height] :where(p) {
2019 line-height: inherit;
2020 }
2021
2022 .wp-block-rss li a > div {
2023 display: inline;
2024 }
2025
2026 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
2027 flex: 1 1 auto;
2028 }
2029
2030 .wp-block-rss .wp-block-rss {
2031 all: inherit;
2032 margin: 0;
2033 padding: 0;
2034 }
2035
2036 .wp-block[data-align=center] .wp-block-search .wp-block-search__inside-wrapper {
2037 margin: auto;
2038 }
2039
2040 .wp-block-search :where(.wp-block-search__button) {
2041 height: auto;
2042 border-radius: initial;
2043 display: flex;
2044 align-items: center;
2045 justify-content: center;
2046 text-align: center;
2047 }
2048
2049 .wp-block-search__inspector-controls .components-base-control {
2050 margin-bottom: 0;
2051 }
2052
2053 .block-editor-block-list__block[data-type="core/separator"] {
2054 padding-top: 0.1px;
2055 padding-bottom: 0.1px;
2056 }
2057
2058 .blocks-shortcode__textarea {
2059 box-sizing: border-box;
2060 max-height: 250px;
2061 resize: none;
2062 font-family: Menlo, Consolas, monaco, monospace !important;
2063 color: #1e1e1e !important;
2064 background: #fff !important;
2065 padding: 12px !important;
2066 border: 1px solid #1e1e1e !important;
2067 box-shadow: none !important;
2068 border-radius: 2px !important;
2069 font-size: 16px !important;
2070 }
2071 @media (min-width: 600px) {
2072 .blocks-shortcode__textarea {
2073 font-size: 13px !important;
2074 }
2075 }
2076 .blocks-shortcode__textarea:focus {
2077 border-color: var(--wp-admin-theme-color) !important;
2078 box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
2079 outline: 2px solid transparent !important;
2080 }
2081
2082 .wp-block[data-align=center] > .wp-block-site-logo,
2083 .wp-block-site-logo.aligncenter > div {
2084 display: table;
2085 margin-left: auto;
2086 margin-right: auto;
2087 }
2088
2089 .wp-block-site-logo a {
2090 pointer-events: none;
2091 }
2092 .wp-block-site-logo .custom-logo-link {
2093 cursor: inherit;
2094 }
2095 .wp-block-site-logo .custom-logo-link:focus {
2096 box-shadow: none;
2097 }
2098 .wp-block-site-logo img {
2099 display: block;
2100 height: auto;
2101 max-width: 100%;
2102 }
2103 .wp-block-site-logo.is-transient {
2104 position: relative;
2105 }
2106 .wp-block-site-logo.is-transient img {
2107 opacity: 0.3;
2108 }
2109 .wp-block-site-logo.is-transient .components-spinner {
2110 position: absolute;
2111 top: 50%;
2112 left: 50%;
2113 transform: translate(-50%, -50%);
2114 margin: 0;
2115 }
2116
2117 .wp-block-site-logo.wp-block-site-logo.is-default-size .components-placeholder {
2118 height: 60px;
2119 width: 60px;
2120 }
2121 .wp-block-site-logo.wp-block-site-logo > div,
2122 .wp-block-site-logo.wp-block-site-logo .components-resizable-box__container {
2123 border-radius: inherit;
2124 }
2125 .wp-block-site-logo.wp-block-site-logo .components-placeholder {
2126 display: flex;
2127 justify-content: center;
2128 align-items: center;
2129 padding: 0;
2130 border-radius: inherit;
2131 min-height: 48px;
2132 min-width: 48px;
2133 height: 100%;
2134 width: 100%;
2135 }
2136 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-form-file-upload {
2137 display: none;
2138 }
2139 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-drop-zone__content-text {
2140 display: none;
2141 }
2142 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button {
2143 padding: 0;
2144 margin: auto;
2145 display: flex;
2146 justify-content: center;
2147 align-items: center;
2148 width: 48px;
2149 height: 48px;
2150 border-radius: 50%;
2151 position: relative;
2152 background: var(--wp-admin-theme-color);
2153 border-color: var(--wp-admin-theme-color);
2154 border-style: solid;
2155 color: #fff;
2156 }
2157 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg {
2158 color: inherit;
2159 }
2160
2161 .block-library-site-logo__inspector-media-replace-container {
2162 position: relative;
2163 }
2164 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
2165 word-break: break-all;
2166 white-space: normal;
2167 text-align: start;
2168 text-align-last: center;
2169 }
2170 .block-library-site-logo__inspector-media-replace-container img {
2171 width: 20px;
2172 min-width: 20px;
2173 aspect-ratio: 1;
2174 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
2175 border-radius: 2px;
2176 }
2177 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-readonly-logo-preview {
2178 padding: 6px 12px;
2179 display: flex;
2180 height: 40px;
2181 }
2182
2183 .wp-block-site-tagline__placeholder {
2184 padding: 1em 0;
2185 border: 1px dashed;
2186 }
2187
2188 .wp-block-site-title__placeholder {
2189 padding: 1em 0;
2190 border: 1px dashed;
2191 }
2192
2193 .wp-block-site-title.has-fit-text > * {
2194 white-space: inherit !important;
2195 }
2196
2197 .wp-block-social-links .wp-social-link {
2198 line-height: 0;
2199 }
2200
2201 .wp-block-social-link-anchor {
2202 align-items: center;
2203 background: none;
2204 border: 0;
2205 box-sizing: border-box;
2206 cursor: pointer;
2207 display: inline-flex;
2208 font-size: inherit;
2209 color: currentColor;
2210 height: auto;
2211 font-weight: inherit;
2212 font-family: inherit;
2213 margin: 0;
2214 opacity: 1;
2215 padding: 0.25em;
2216 }
2217 .wp-block-social-link-anchor:hover {
2218 transform: none;
2219 }
2220
2221 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
2222 padding-left: 0.6666666667em;
2223 padding-right: 0.6666666667em;
2224 }
2225
2226 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
2227 padding: 0;
2228 }
2229
2230 .wp-block-social-link__toolbar_content_text {
2231 width: 250px;
2232 }
2233
2234 .wp-block-social-links div.block-editor-url-input {
2235 display: inline-block;
2236 margin-left: 8px;
2237 }
2238
2239 .wp-social-link:hover {
2240 transform: none;
2241 }
2242
2243 :root :where(.wp-block-social-links) {
2244 padding: 0;
2245 }
2246
2247 .wp-block[data-align=center] > .wp-block-social-links,
2248 .wp-block.wp-block-social-links.aligncenter {
2249 justify-content: center;
2250 }
2251
2252 .block-editor-block-preview__content .components-button:disabled {
2253 opacity: 1;
2254 }
2255
2256 .wp-social-link.wp-social-link__is-incomplete {
2257 opacity: 0.5;
2258 }
2259
2260 .wp-block-social-links .is-selected .wp-social-link__is-incomplete,
2261 .wp-social-link.wp-social-link__is-incomplete:hover,
2262 .wp-social-link.wp-social-link__is-incomplete:focus {
2263 opacity: 1;
2264 }
2265
2266 .wp-block-social-links .block-list-appender {
2267 position: static;
2268 }
2269 .wp-block-social-links .block-list-appender .block-editor-inserter {
2270 font-size: inherit;
2271 }
2272 .wp-block-social-links .block-list-appender .block-editor-button-block-appender {
2273 height: 1.5em;
2274 width: 1.5em;
2275 font-size: inherit;
2276 padding: 0;
2277 }
2278
2279 .block-editor-block-list__block[data-type="core/spacer"]::before {
2280 content: "";
2281 display: block;
2282 position: absolute;
2283 z-index: 1;
2284 width: 100%;
2285 min-height: 8px;
2286 min-width: 8px;
2287 height: 100%;
2288 }
2289
2290 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
2291 .block-library-spacer__resize-container.has-show-handle,
2292 .wp-block-spacer.is-selected.custom-sizes-disabled {
2293 background: rgba(0, 0, 0, 0.1);
2294 }
2295 .is-dark-theme .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
2296 .is-dark-theme .block-library-spacer__resize-container.has-show-handle,
2297 .is-dark-theme .wp-block-spacer.is-selected.custom-sizes-disabled {
2298 background: rgba(255, 255, 255, 0.15);
2299 }
2300
2301 .block-library-spacer__resize-container {
2302 clear: both;
2303 }
2304 .block-library-spacer__resize-container:not(.is-resizing) {
2305 height: 100% !important;
2306 width: 100% !important;
2307 }
2308 .block-library-spacer__resize-container .components-resizable-box__handle::before {
2309 content: none;
2310 }
2311 .block-library-spacer__resize-container.resize-horizontal {
2312 margin-bottom: 0;
2313 height: 100% !important;
2314 }
2315
2316 @media (min-width: 600px) {
2317 .wp-block-tab-list__mover-button {
2318 width: 24px;
2319 min-width: 0 !important;
2320 }
2321 }
2322
2323 .wp-block[data-align=left] > .wp-block-table, .wp-block[data-align=right] > .wp-block-table, .wp-block[data-align=center] > .wp-block-table {
2324 height: auto;
2325 }
2326 .wp-block[data-align=left] > .wp-block-table table, .wp-block[data-align=right] > .wp-block-table table, .wp-block[data-align=center] > .wp-block-table table {
2327 width: auto;
2328 }
2329 .wp-block[data-align=left] > .wp-block-table td,
2330 .wp-block[data-align=left] > .wp-block-table th, .wp-block[data-align=right] > .wp-block-table td,
2331 .wp-block[data-align=right] > .wp-block-table th, .wp-block[data-align=center] > .wp-block-table td,
2332 .wp-block[data-align=center] > .wp-block-table th {
2333 word-break: break-word;
2334 }
2335 .wp-block[data-align=center] > .wp-block-table {
2336 text-align: initial;
2337 }
2338 .wp-block[data-align=center] > .wp-block-table table {
2339 margin: 0 auto;
2340 }
2341 .wp-block-table td,
2342 .wp-block-table th {
2343 border: 1px solid;
2344 padding: 0.5em;
2345 }
2346 .wp-block-table td.is-selected,
2347 .wp-block-table th.is-selected {
2348 border-color: var(--wp-admin-theme-color);
2349 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2350 border-style: double;
2351 }
2352 .wp-block-table table.has-individual-borders > *,
2353 .wp-block-table table.has-individual-borders tr,
2354 .wp-block-table table.has-individual-borders th,
2355 .wp-block-table table.has-individual-borders td {
2356 border-width: 1px;
2357 border-style: solid;
2358 border-color: currentColor;
2359 }
2360
2361 .blocks-table__placeholder-form.blocks-table__placeholder-form {
2362 display: flex;
2363 flex-direction: column;
2364 align-items: flex-start;
2365 gap: 8px;
2366 }
2367 @media (min-width: 782px) {
2368 .blocks-table__placeholder-form.blocks-table__placeholder-form {
2369 flex-direction: row;
2370 align-items: flex-end;
2371 }
2372 }
2373
2374 .blocks-table__placeholder-input {
2375 width: 112px;
2376 }
2377
2378 .block-editor-template-part__selection-modal {
2379 z-index: 1000001;
2380 }
2381 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2382 column-count: 2;
2383 column-gap: 24px;
2384 }
2385 @media (min-width: 1280px) {
2386 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2387 column-count: 3;
2388 }
2389 }
2390 .block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2391 break-inside: avoid-column;
2392 }
2393
2394 .block-library-template-part__selection-search {
2395 background: #fff;
2396 position: sticky;
2397 top: 0;
2398 padding: 16px 0;
2399 z-index: 2;
2400 }
2401
2402 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after, .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after,
2403 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after,
2404 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
2405 outline-color: var(--wp-block-synced-color);
2406 }
2407 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
2408 .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
2409 outline-color: var(--wp-block-synced-color);
2410 }
2411
2412 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
2413 border: none;
2414 }
2415
2416 .wp-block-term-template .term-loading .term-loading-placeholder {
2417 width: 100%;
2418 height: 1.5em;
2419 margin-bottom: 0.25em;
2420 background-color: #f0f0f0;
2421 border-radius: 2px;
2422 }
2423 @media not (prefers-reduced-motion) {
2424 .wp-block-term-template .term-loading .term-loading-placeholder {
2425 animation: loadingpulse 1.5s ease-in-out infinite;
2426 }
2427 }
2428
2429 @keyframes loadingpulse {
2430 0% {
2431 opacity: 1;
2432 }
2433 50% {
2434 opacity: 0.5;
2435 }
2436 100% {
2437 opacity: 1;
2438 }
2439 }
2440 .wp-block-text-columns .block-editor-rich-text__editable:focus {
2441 outline: 1px solid #ddd;
2442 }
2443
2444 .wp-block[data-align=center] > .wp-block-video {
2445 text-align: center;
2446 }
2447
2448 .wp-block-video {
2449 position: relative;
2450 }
2451 .wp-block-video.is-transient video {
2452 opacity: 0.3;
2453 }
2454 .wp-block-video .components-spinner {
2455 position: absolute;
2456 top: 50%;
2457 left: 50%;
2458 margin-top: -9px;
2459 margin-left: -9px;
2460 }
2461
2462 .block-library-video-tracks-editor {
2463 z-index: 159990;
2464 }
2465
2466 .modal-open .block-library-video-tracks-editor {
2467 z-index: 99999;
2468 }
2469
2470 .block-library-video-tracks-editor__track-list-track {
2471 padding-left: 12px;
2472 }
2473
2474 .block-library-video-tracks-editor__single-track-editor-kind-select {
2475 max-width: 240px;
2476 }
2477
2478 .block-library-video-tracks-editor__tracks-informative-message-title,
2479 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
2480 margin-top: 4px;
2481 color: #757575;
2482 text-transform: uppercase;
2483 font-size: 11px;
2484 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2485 display: block;
2486 }
2487
2488 .block-library-video-tracks-editor > .components-popover__content {
2489 width: 360px;
2490 }
2491
2492 .block-library-video-tracks-editor__track-list .components-menu-group__label,
2493 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
2494 padding: 0;
2495 }
2496
2497 .block-library-video-tracks-editor__tracks-informative-message {
2498 padding: 8px;
2499 }
2500 .block-library-video-tracks-editor__tracks-informative-message-description {
2501 margin-bottom: 0;
2502 }
2503
2504 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2505 column-count: 2;
2506 column-gap: 24px;
2507 }
2508 @media (min-width: 1280px) {
2509 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2510 column-count: 3;
2511 }
2512 }
2513 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2514 break-inside: avoid-column;
2515 }
2516 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
2517 background: #fff;
2518 position: sticky;
2519 top: 0;
2520 padding: 16px 0;
2521 transform: translateY(-4px);
2522 margin-bottom: -4px;
2523 z-index: 2;
2524 }
2525
2526 .block-editor-block-settings-menu__popover.is-expanded {
2527 overflow-y: scroll;
2528 }
2529 .block-editor-block-settings-menu__popover .block-library-query-pattern__selection-content {
2530 height: 100%;
2531 }
2532 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2533 display: grid;
2534 grid-template-columns: 1fr;
2535 }
2536 @media (min-width: 600px) {
2537 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2538 grid-template-columns: 1fr 1fr;
2539 }
2540 }
2541 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2542 gap: 12px;
2543 min-width: 280px;
2544 }
2545 @media (min-width: 600px) {
2546 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2547 min-width: 480px;
2548 }
2549 }
2550 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list__list-item {
2551 margin-bottom: 0;
2552 }
2553
2554 .wp-block-query > .block-editor-media-placeholder.is-small {
2555 min-height: 60px;
2556 }
2557
2558 .wp-block[data-align=center] > .wp-block-query-pagination {
2559 justify-content: center;
2560 }
2561
2562 :where(.editor-styles-wrapper) .wp-block-query-pagination {
2563 max-width: 100%;
2564 }
2565
2566 .wp-block-query-pagination-numbers a {
2567 text-decoration: underline;
2568 }
2569 .wp-block-query-pagination-numbers .page-numbers {
2570 margin-right: 2px;
2571 }
2572 .wp-block-query-pagination-numbers .page-numbers:last-child {
2573 /*rtl:ignore*/
2574 margin-right: 0;
2575 }
2576
2577 .wp-block-post-featured-image .block-editor-media-placeholder {
2578 z-index: 1;
2579 backdrop-filter: none;
2580 }
2581 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2582 .wp-block-post-featured-image .components-placeholder {
2583 justify-content: center;
2584 align-items: center;
2585 padding: 0;
2586 display: flex;
2587 }
2588 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
2589 .wp-block-post-featured-image .components-placeholder .components-form-file-upload {
2590 display: none;
2591 }
2592 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
2593 .wp-block-post-featured-image .components-placeholder .components-button {
2594 margin: auto;
2595 padding: 0;
2596 display: flex;
2597 justify-content: center;
2598 align-items: center;
2599 width: 48px;
2600 height: 48px;
2601 border-radius: 50%;
2602 position: relative;
2603 background: var(--wp-admin-theme-color);
2604 border-color: var(--wp-admin-theme-color);
2605 border-style: solid;
2606 color: #fff;
2607 }
2608 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button > svg,
2609 .wp-block-post-featured-image .components-placeholder .components-button > svg {
2610 color: inherit;
2611 }
2612 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2613 .wp-block-post-featured-image .components-placeholder {
2614 min-height: 200px;
2615 }
2616 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
2617 .wp-block-post-featured-image .components-placeholder:where(.has-border-color),
2618 .wp-block-post-featured-image img:where(.has-border-color) {
2619 border-style: solid;
2620 }
2621 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),
2622 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),
2623 .wp-block-post-featured-image img:where([style*=border-top-color]) {
2624 border-top-style: solid;
2625 }
2626 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),
2627 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),
2628 .wp-block-post-featured-image img:where([style*=border-right-color]) {
2629 border-right-style: solid;
2630 }
2631 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),
2632 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),
2633 .wp-block-post-featured-image img:where([style*=border-bottom-color]) {
2634 border-bottom-style: solid;
2635 }
2636 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),
2637 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),
2638 .wp-block-post-featured-image img:where([style*=border-left-color]) {
2639 border-left-style: solid;
2640 }
2641 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),
2642 .wp-block-post-featured-image .components-placeholder:where([style*=border-width]),
2643 .wp-block-post-featured-image img:where([style*=border-width]) {
2644 border-style: solid;
2645 }
2646 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),
2647 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),
2648 .wp-block-post-featured-image img:where([style*=border-top-width]) {
2649 border-top-style: solid;
2650 }
2651 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),
2652 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),
2653 .wp-block-post-featured-image img:where([style*=border-right-width]) {
2654 border-right-style: solid;
2655 }
2656 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),
2657 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),
2658 .wp-block-post-featured-image img:where([style*=border-bottom-width]) {
2659 border-bottom-style: solid;
2660 }
2661 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),
2662 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),
2663 .wp-block-post-featured-image img:where([style*=border-left-width]) {
2664 border-left-style: solid;
2665 }
2666 .wp-block-post-featured-image[style*=height] .components-placeholder {
2667 min-height: 48px;
2668 min-width: 48px;
2669 height: 100%;
2670 width: 100%;
2671 }
2672 .wp-block-post-featured-image > a {
2673 pointer-events: none;
2674 }
2675 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
2676 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
2677 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
2678 opacity: 1;
2679 pointer-events: auto;
2680 }
2681 .wp-block-post-featured-image.is-transient {
2682 position: relative;
2683 }
2684 .wp-block-post-featured-image.is-transient img {
2685 opacity: 0.3;
2686 }
2687 .wp-block-post-featured-image.is-transient .components-spinner {
2688 position: absolute;
2689 top: 50%;
2690 left: 50%;
2691 transform: translate(-50%, -50%);
2692 }
2693
2694 div[data-type="core/post-featured-image"] img {
2695 max-width: 100%;
2696 height: auto;
2697 display: block;
2698 }
2699
2700 .wp-block-post-comments-form * {
2701 pointer-events: none;
2702 }
2703 .wp-block-post-comments-form *.block-editor-warning * {
2704 pointer-events: auto;
2705 }
2706
2707 /**
2708 * Element styles for the editor
2709 */
2710 .wp-element-button {
2711 cursor: revert;
2712 }
2713 .wp-element-button[role=textbox] {
2714 cursor: text;
2715 }
2716
2717 .block-library-poster-image__container {
2718 position: relative;
2719 }
2720 .block-library-poster-image__container:hover .block-library-poster-image__actions, .block-library-poster-image__container:focus .block-library-poster-image__actions, .block-library-poster-image__container:focus-within .block-library-poster-image__actions {
2721 opacity: 1;
2722 }
2723 .block-library-poster-image__container .block-library-poster-image__actions.block-library-poster-image__actions-select {
2724 opacity: 1;
2725 margin-top: 16px;
2726 }
2727 .block-library-poster-image__container .components-drop-zone__content {
2728 border-radius: 2px;
2729 }
2730 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner {
2731 display: flex;
2732 align-items: center;
2733 gap: 8px;
2734 }
2735 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
2736 margin: 0;
2737 }
2738 .block-library-poster-image__container .components-spinner {
2739 position: absolute;
2740 top: 50%;
2741 left: 50%;
2742 margin-top: -9px;
2743 margin-left: -9px;
2744 }
2745
2746 .block-library-poster-image__preview {
2747 width: 100%;
2748 padding: 0;
2749 overflow: hidden;
2750 outline-offset: -1px;
2751 min-height: 40px;
2752 display: flex;
2753 justify-content: center;
2754 height: auto !important;
2755 outline: 1px solid rgba(0, 0, 0, 0.1);
2756 }
2757 .block-library-poster-image__preview .block-library-poster-image__preview-image {
2758 object-fit: cover;
2759 width: 100%;
2760 object-position: 50% 50%;
2761 aspect-ratio: 2/1;
2762 }
2763
2764 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
2765 bottom: 0;
2766 opacity: 0;
2767 padding: 8px;
2768 position: absolute;
2769 }
2770 @media not (prefers-reduced-motion) {
2771 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
2772 transition: opacity 50ms ease-out;
2773 }
2774 }
2775 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) .block-library-poster-image__action {
2776 backdrop-filter: blur(16px) saturate(180%);
2777 background: rgba(255, 255, 255, 0.75);
2778 }
2779 .block-library-poster-image__actions .block-library-poster-image__action {
2780 flex-grow: 1;
2781 justify-content: center;
2782 }
2783
2784 :root .editor-styles-wrapper .has-very-light-gray-background-color {
2785 background-color: #eee;
2786 }
2787 :root .editor-styles-wrapper .has-very-dark-gray-background-color {
2788 background-color: #313131;
2789 }
2790 :root .editor-styles-wrapper .has-very-light-gray-color {
2791 color: #eee;
2792 }
2793 :root .editor-styles-wrapper .has-very-dark-gray-color {
2794 color: #313131;
2795 }
2796 :root .editor-styles-wrapper {
2797 /* stylelint-disable @stylistic/function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
2798 }
2799 :root .editor-styles-wrapper .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
2800 background: linear-gradient(135deg, rgb(0, 208, 132) 0%, rgb(6, 147, 227) 100%);
2801 }
2802 :root .editor-styles-wrapper .has-purple-crush-gradient-background {
2803 background: linear-gradient(135deg, rgb(52, 226, 228) 0%, rgb(71, 33, 251) 50%, rgb(171, 29, 254) 100%);
2804 }
2805 :root .editor-styles-wrapper .has-hazy-dawn-gradient-background {
2806 background: linear-gradient(135deg, rgb(250, 172, 168) 0%, rgb(218, 208, 236) 100%);
2807 }
2808 :root .editor-styles-wrapper .has-subdued-olive-gradient-background {
2809 background: linear-gradient(135deg, rgb(250, 250, 225) 0%, rgb(103, 166, 113) 100%);
2810 }
2811 :root .editor-styles-wrapper .has-atomic-cream-gradient-background {
2812 background: linear-gradient(135deg, rgb(253, 215, 154) 0%, rgb(0, 74, 89) 100%);
2813 }
2814 :root .editor-styles-wrapper .has-nightshade-gradient-background {
2815 background: linear-gradient(135deg, rgb(51, 9, 104) 0%, rgb(49, 205, 207) 100%);
2816 }
2817 :root .editor-styles-wrapper .has-midnight-gradient-background {
2818 background: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
2819 }
2820 :root .editor-styles-wrapper {
2821 /* stylelint-enable @stylistic/function-comma-space-after */
2822 }
2823
2824 :where(.editor-styles-wrapper) .has-regular-font-size {
2825 font-size: 16px;
2826 }
2827
2828 :where(.editor-styles-wrapper) .has-larger-font-size {
2829 font-size: 42px;
2830 }
2831
2832 /**
2833 * Editor Normalization Styles
2834 *
2835 * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
2836 * This allows us to create normalization styles that are easily overridden by editor styles.
2837 */
2838 :where(.editor-styles-wrapper) iframe:not([frameborder]) {
2839 border: 0;
2840 }