PluginProbe
Gutenberg / 22.7.0
Gutenberg v22.7.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 12.6.0 All 403 releases
gutenberg / build / styles / block-library / editor.css

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

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