PluginProbe
Gutenberg / 23.1.1
Gutenberg v23.1.1
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 / block-library / editor.css

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

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