PluginProbe
Gutenberg / 23.4.0
Gutenberg v23.4.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 7.4.0 All 402 releases
gutenberg / build / styles / block-library / editor.css

editor.css in Gutenberg 23.4.0, 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) .block-editor-media-placeholder.is-appender .components-placeholder__label {
716 display: none;
717 }
718 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__button {
719 margin-bottom: 0;
720 }
721 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder {
722 margin: 0;
723 }
724 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder .components-placeholder__label {
725 display: flex;
726 }
727 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder figcaption {
728 z-index: 2;
729 }
730 :root :where(figure.wp-block-gallery) .components-spinner {
731 position: absolute;
732 top: 50%;
733 left: 50%;
734 margin-top: -9px;
735 margin-left: -9px;
736 }
737
738 /**
739 * Gallery inspector controls settings.
740 */
741 .gallery-settings-buttons .components-button:first-child {
742 margin-right: 8px;
743 }
744
745 /**
746 * Deprecated css past this point. This can be removed once all galleries are migrated
747 * to V2.
748 */
749 .blocks-gallery-item figure:not(.is-selected):focus,
750 .blocks-gallery-item img:focus {
751 outline: none;
752 }
753 .blocks-gallery-item figure.is-selected::before {
754 box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
755 content: "";
756 outline: 2px solid transparent;
757 position: absolute;
758 top: 0;
759 right: 0;
760 bottom: 0;
761 left: 0;
762 z-index: 1;
763 pointer-events: none;
764 }
765 .blocks-gallery-item figure.is-transient img {
766 opacity: 0.3;
767 }
768 .blocks-gallery-item .block-editor-media-placeholder {
769 margin: 0;
770 height: 100%;
771 }
772 .blocks-gallery-item .block-editor-media-placeholder .components-placeholder__label {
773 display: flex;
774 }
775
776 .wp-block-gallery ul.blocks-gallery-grid {
777 padding: 0;
778 margin: 0;
779 }
780
781 @media (min-width: 600px) {
782 .wp-block-update-gallery-modal {
783 max-width: 480px;
784 }
785 }
786
787 .wp-block-update-gallery-modal-buttons {
788 display: flex;
789 justify-content: flex-end;
790 gap: 12px;
791 }
792
793 /**
794 * Group: All Alignment Settings
795 */
796 .wp-block-group .block-editor-block-list__insertion-point {
797 left: 0;
798 right: 0;
799 }
800
801 [data-type="core/group"].is-selected .block-list-appender {
802 margin-left: 0;
803 margin-right: 0;
804 }
805 [data-type="core/group"].is-selected .has-background .block-list-appender {
806 margin-top: 18px;
807 margin-bottom: 18px;
808 }
809
810 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child {
811 gap: inherit;
812 }
813 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child,
814 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-default-block-appender__content,
815 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter {
816 display: inherit;
817 width: 100%;
818 flex-direction: inherit;
819 flex: 1;
820 }
821 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child::after {
822 content: "";
823 display: flex;
824 flex: 1 0 40px;
825 pointer-events: none;
826 min-height: 38px;
827 border: 1px dashed currentColor;
828 }
829 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child {
830 pointer-events: none;
831 }
832 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-inserter,
833 .wp-block-group.is-layout-flex.block-editor-block-list__block > .block-list-appender:only-child .block-editor-button-block-appender {
834 pointer-events: all;
835 }
836
837 .block-library-html__edit .block-library-html__preview-overlay {
838 position: absolute;
839 width: 100%;
840 height: 100%;
841 top: 0;
842 left: 0;
843 }
844
845 @media (min-width: 600px) {
846 .block-library-html__modal:not(.is-full-screen) {
847 height: 9999rem;
848 }
849 }
850 .block-library-html__modal .components-modal__children-container {
851 height: 100%;
852 }
853
854 .block-library-html__modal-tabs {
855 flex: 1;
856 }
857
858 .block-library-html__modal-content {
859 flex: 1;
860 }
861
862 .block-library-html__modal-tab {
863 height: 100%;
864 display: flex;
865 flex-direction: column;
866 margin: 0;
867 box-sizing: border-box;
868 border: 1px solid #e0e0e0;
869 border-radius: 2px;
870 padding: 16px;
871 font-family: Menlo, Consolas, monaco, monospace;
872 }
873
874 .block-library-html__modal-editor {
875 width: 100%;
876 height: 100%;
877 flex: 1;
878 border: none;
879 background: transparent;
880 padding: 0;
881 font-family: inherit;
882 font-size: inherit;
883 line-height: inherit;
884 color: inherit;
885 resize: none;
886 /*rtl:ignore*/
887 direction: ltr;
888 overflow-x: auto;
889 box-sizing: border-box;
890 }
891 .block-library-html__modal-editor:focus {
892 outline: none;
893 box-shadow: none;
894 }
895
896 .block-library-html__preview {
897 display: flex;
898 align-items: center;
899 justify-content: center;
900 min-height: 0;
901 overflow-y: auto;
902 flex: 1;
903 }
904 .block-library-html__preview iframe {
905 height: 100%;
906 }
907
908 .wp-block[data-align=center] > .wp-block-icon {
909 display: flex;
910 justify-content: center;
911 }
912
913 .wp-block-icon__inserter {
914 padding: 0 24px;
915 margin: 0 -24px;
916 }
917
918 .wp-block-icon__inserter-header {
919 align-items: center;
920 display: flex;
921 justify-content: space-between;
922 margin-bottom: 16px;
923 }
924
925 .wp-block-icon__inserter-grid-icons-list {
926 display: grid;
927 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
928 }
929
930 .wp-block-icon__inserter-grid-no-results {
931 display: flex;
932 justify-content: center;
933 }
934
935 .wp-block-icon__inserter-grid-icons-list-item {
936 display: flex;
937 flex-direction: column;
938 height: auto !important;
939 }
940
941 .wp-block-icon__inserter-grid-icons-list-item-icon {
942 padding: 12px;
943 }
944
945 .wp-block-icon__inserter-grid-icons-list-item-title {
946 font-size: 12px;
947 padding: 4px 4px 8px;
948 overflow: hidden;
949 text-overflow: ellipsis;
950 white-space: nowrap;
951 }
952
953 .wp-block-icon__toolbar-content {
954 width: 250px;
955 }
956
957 .wp-block-icon__placeholder {
958 backdrop-filter: blur(100px);
959 }
960
961 .wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
962 min-height: 60px;
963 }
964
965 figure.wp-block-image:not(.wp-block) {
966 margin: 0;
967 }
968
969 .wp-block-image {
970 position: relative;
971 }
972 .wp-block-image .is-applying img, .wp-block-image.is-transient img {
973 opacity: 0.3;
974 }
975 .wp-block-image figcaption img {
976 display: inline;
977 }
978 .wp-block-image .components-spinner {
979 position: absolute;
980 top: 50%;
981 left: 50%;
982 transform: translate(-50%, -50%);
983 margin: 0;
984 }
985
986 .wp-block-image__placeholder {
987 aspect-ratio: 4/3;
988 }
989 .wp-block-image__placeholder.has-illustration::before {
990 background: #fff;
991 opacity: 0.8;
992 }
993 .wp-block-image__placeholder .components-placeholder__illustration {
994 opacity: 0.1;
995 }
996
997 .wp-block-image.is-selected .block-editor-media-placeholder {
998 filter: none !important;
999 }
1000
1001 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
1002 position: absolute;
1003 left: 0;
1004 right: 0;
1005 margin: -1px 0;
1006 }
1007 @media (min-width: 600px) {
1008 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
1009 margin: -1px;
1010 }
1011 }
1012
1013 [data-align=wide] > .wp-block-image img,
1014 [data-align=full] > .wp-block-image img {
1015 height: auto;
1016 width: 100%;
1017 }
1018
1019 .wp-block[data-align=left] > .wp-block-image,
1020 .wp-block[data-align=center] > .wp-block-image,
1021 .wp-block[data-align=right] > .wp-block-image {
1022 display: table;
1023 }
1024 .wp-block[data-align=left] > .wp-block-image > figcaption,
1025 .wp-block[data-align=center] > .wp-block-image > figcaption,
1026 .wp-block[data-align=right] > .wp-block-image > figcaption {
1027 display: table-caption;
1028 caption-side: bottom;
1029 }
1030
1031 .wp-block[data-align=left] > .wp-block-image {
1032 margin-right: 1em;
1033 margin-left: 0;
1034 margin-top: 0.5em;
1035 margin-bottom: 0.5em;
1036 }
1037
1038 .wp-block[data-align=right] > .wp-block-image {
1039 margin-left: 1em;
1040 margin-right: 0;
1041 margin-top: 0.5em;
1042 margin-bottom: 0.5em;
1043 }
1044
1045 .wp-block[data-align=center] > .wp-block-image {
1046 margin-left: auto;
1047 margin-right: auto;
1048 text-align: center;
1049 }
1050
1051 .wp-block[data-align]:has(> .wp-block-image) {
1052 position: relative;
1053 }
1054
1055 .wp-block-image__crop-area {
1056 position: relative;
1057 max-width: 100%;
1058 width: 100%;
1059 overflow: hidden;
1060 }
1061 .wp-block-image__crop-area .reactEasyCrop_Container {
1062 pointer-events: auto;
1063 }
1064 .wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
1065 border: none;
1066 border-radius: 0;
1067 }
1068
1069 .wp-block-image__crop-icon {
1070 padding: 0 8px;
1071 min-width: 48px;
1072 display: flex;
1073 justify-content: center;
1074 align-items: center;
1075 }
1076 .wp-block-image__crop-icon svg {
1077 fill: currentColor;
1078 }
1079
1080 .wp-block-image__zoom .components-popover__content {
1081 min-width: 260px;
1082 overflow: visible !important;
1083 }
1084
1085 .wp-block-image__toolbar_content_textarea__container {
1086 padding: 8px;
1087 }
1088
1089 .wp-block-image__toolbar_content_textarea {
1090 width: 250px;
1091 }
1092
1093 .wp-block-latest-posts > li {
1094 overflow: hidden;
1095 }
1096
1097 .wp-block-latest-posts li a > div {
1098 display: inline;
1099 }
1100
1101 :root :where(.wp-block-latest-posts) {
1102 padding-left: 2.5em;
1103 }
1104
1105 :root :where(.wp-block-latest-posts.is-grid),
1106 :root :where(.wp-block-latest-posts__list) {
1107 padding-left: 0;
1108 }
1109
1110 .wp-block-math__textarea-control textarea {
1111 font-family: Menlo, Consolas, monaco, monospace;
1112 /*rtl:ignore*/
1113 direction: ltr;
1114 }
1115
1116 .wp-block-media-text__media {
1117 position: relative;
1118 }
1119 .wp-block-media-text__media.is-transient img {
1120 opacity: 0.3;
1121 }
1122 .wp-block-media-text__media .components-spinner {
1123 position: absolute;
1124 top: 50%;
1125 left: 50%;
1126 margin-top: -9px;
1127 margin-left: -9px;
1128 }
1129
1130 .wp-block-media-text .__resizable_base__ {
1131 grid-column: 1/span 2;
1132 grid-row: 2;
1133 }
1134
1135 .wp-block-media-text .editor-media-container__resizer {
1136 width: 100% !important;
1137 }
1138
1139 .wp-block-media-text.is-image-fill .editor-media-container__resizer,
1140 .wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
1141 .wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
1142 .wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
1143 height: 100% !important;
1144 }
1145
1146 .wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
1147 max-width: unset;
1148 }
1149
1150 /* Make the featured image placeholder the same height as the media selection area. */
1151 .wp-block-media-text--placeholder-image {
1152 min-height: 205px;
1153 }
1154
1155 .block-editor-block-list__block[data-type="core/more"] {
1156 max-width: 100%;
1157 text-align: center;
1158 margin-top: 28px;
1159 margin-bottom: 28px;
1160 }
1161
1162 .wp-block-more {
1163 display: block;
1164 text-align: center;
1165 white-space: nowrap;
1166 }
1167 .wp-block-more .rich-text {
1168 position: relative;
1169 font-size: 13px;
1170 text-transform: uppercase;
1171 font-weight: 600;
1172 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1173 color: #757575;
1174 display: inline-flex;
1175 white-space: nowrap;
1176 text-align: center;
1177 background: #fff;
1178 padding: 10px 36px;
1179 }
1180 .wp-block-more::before {
1181 content: "";
1182 position: absolute;
1183 top: 50%;
1184 left: 0;
1185 right: 0;
1186 border-top: 3px dashed #ccc;
1187 }
1188
1189 /**
1190 * Editor only CSS.
1191 */
1192 .editor-styles-wrapper .wp-block-navigation ul {
1193 margin-top: 0;
1194 margin-bottom: 0;
1195 margin-left: 0;
1196 padding-left: 0;
1197 }
1198 .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
1199 margin: revert;
1200 }
1201
1202 .wp-block-navigation-item__label {
1203 display: inline;
1204 }
1205
1206 /**
1207 * Submenus.
1208 */
1209 .wp-block-navigation__container,
1210 .wp-block-navigation-item {
1211 background-color: inherit;
1212 }
1213
1214 .wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container {
1215 opacity: 0;
1216 visibility: hidden;
1217 }
1218
1219 .has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container {
1220 display: flex;
1221 opacity: 1;
1222 visibility: visible;
1223 }
1224
1225 .is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container {
1226 opacity: 1;
1227 visibility: visible;
1228 }
1229
1230 .is-editing > .wp-block-navigation__container {
1231 visibility: visible;
1232 opacity: 1;
1233 display: flex;
1234 flex-direction: column;
1235 }
1236
1237 .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
1238 opacity: 1;
1239 visibility: hidden;
1240 }
1241 .is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container .block-editor-block-draggable-chip-wrapper {
1242 visibility: visible;
1243 }
1244
1245 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender {
1246 display: block;
1247 position: static;
1248 width: 100%;
1249 }
1250 .is-editing > .wp-block-navigation__submenu-container > .block-list-appender .block-editor-button-block-appender {
1251 color: #fff;
1252 background: #1e1e1e;
1253 padding: 0;
1254 width: 24px;
1255 margin-right: 0;
1256 margin-left: auto;
1257 }
1258
1259 .wp-block-navigation__submenu-container .block-list-appender {
1260 display: none;
1261 }
1262
1263 /**
1264 * Colors Selector component
1265 */
1266 .block-library-colors-selector {
1267 width: auto;
1268 }
1269 .block-library-colors-selector .block-library-colors-selector__toggle {
1270 display: block;
1271 margin: 0 auto;
1272 padding: 3px;
1273 width: auto;
1274 }
1275 .block-library-colors-selector .block-library-colors-selector__icon-container {
1276 height: 30px;
1277 position: relative;
1278 margin: 0 auto;
1279 padding: 3px;
1280 display: flex;
1281 align-items: center;
1282 border-radius: 4px;
1283 }
1284 .block-library-colors-selector .block-library-colors-selector__state-selection {
1285 margin-left: auto;
1286 margin-right: auto;
1287 border-radius: 11px;
1288 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1289 width: 22px;
1290 min-width: 22px;
1291 height: 22px;
1292 min-height: 22px;
1293 line-height: 20px;
1294 padding: 2px;
1295 }
1296 .block-library-colors-selector .block-library-colors-selector__state-selection > svg {
1297 min-width: auto !important;
1298 }
1299 .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg,
1300 .block-library-colors-selector .block-library-colors-selector__state-selection.has-text-color > svg path {
1301 color: inherit;
1302 }
1303
1304 .block-library-colors-selector__popover .color-palette-controller-container {
1305 padding: 16px;
1306 }
1307 .block-library-colors-selector__popover .components-base-control__label {
1308 height: 20px;
1309 line-height: 20px;
1310 }
1311 .block-library-colors-selector__popover .component-color-indicator {
1312 float: right;
1313 margin-top: 2px;
1314 }
1315 .block-library-colors-selector__popover .components-panel__body-title {
1316 display: none;
1317 }
1318
1319 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
1320 background-color: #1e1e1e;
1321 color: #fff;
1322 height: 24px;
1323 }
1324 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender {
1325 padding: 0;
1326 }
1327
1328 .wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender {
1329 background-color: transparent;
1330 color: #1e1e1e;
1331 }
1332
1333 /**
1334 * Setup state
1335 */
1336 @keyframes loadingpulse {
1337 0% {
1338 opacity: 1;
1339 }
1340 50% {
1341 opacity: 0.5;
1342 }
1343 100% {
1344 opacity: 1;
1345 }
1346 }
1347 .components-placeholder.wp-block-navigation-placeholder {
1348 outline: none;
1349 padding: 0;
1350 box-shadow: none;
1351 background: none;
1352 min-height: 0;
1353 }
1354 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset {
1355 font-size: inherit;
1356 }
1357 .components-placeholder.wp-block-navigation-placeholder .components-placeholder__fieldset .components-button {
1358 margin-bottom: 0;
1359 }
1360 .components-placeholder.wp-block-navigation-placeholder {
1361 color: inherit;
1362 }
1363 .wp-block-navigation.is-selected .components-placeholder.wp-block-navigation-placeholder {
1364 color: #1e1e1e;
1365 }
1366
1367 .wp-block-navigation-placeholder__preview {
1368 display: flex;
1369 align-items: center;
1370 min-width: 96px;
1371 font-size: 13px;
1372 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1373 }
1374 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview {
1375 display: none;
1376 }
1377 .wp-block-navigation-placeholder__preview {
1378 color: currentColor;
1379 background: transparent;
1380 }
1381 .wp-block-navigation-placeholder__preview::before {
1382 content: "";
1383 display: block;
1384 position: absolute;
1385 top: 0;
1386 right: 0;
1387 bottom: 0;
1388 left: 0;
1389 pointer-events: none;
1390 border: 1px dashed currentColor;
1391 border-radius: inherit;
1392 }
1393 .wp-block-navigation-placeholder__preview > svg {
1394 fill: currentColor;
1395 }
1396
1397 .wp-block-navigation.is-vertical .is-small .components-placeholder__fieldset,
1398 .wp-block-navigation.is-vertical .is-medium .components-placeholder__fieldset {
1399 min-height: 90px;
1400 }
1401
1402 .wp-block-navigation.is-vertical .is-large .components-placeholder__fieldset {
1403 min-height: 132px;
1404 }
1405
1406 .wp-block-navigation-placeholder__preview,
1407 .wp-block-navigation-placeholder__controls {
1408 padding: 6px 8px;
1409 flex-direction: row;
1410 align-items: flex-start;
1411 }
1412
1413 .wp-block-navigation-placeholder__controls {
1414 border-radius: 2px;
1415 background-color: #fff;
1416 box-shadow: inset 0 0 0 1px #1e1e1e;
1417 display: none;
1418 position: relative;
1419 z-index: 1;
1420 }
1421 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__controls {
1422 display: flex;
1423 }
1424 .wp-block-navigation-placeholder__controls {
1425 float: left;
1426 width: 100%;
1427 }
1428 .is-small .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator,
1429 .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,
1430 .is-medium .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__actions__indicator + hr {
1431 display: none;
1432 }
1433 .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 {
1434 flex-direction: column;
1435 align-items: flex-start;
1436 }
1437 .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 {
1438 display: none;
1439 }
1440 .wp-block-navigation-placeholder__controls .wp-block-navigation-placeholder__icon {
1441 margin-right: 12px;
1442 height: 36px;
1443 }
1444
1445 .wp-block-navigation-placeholder__actions__indicator {
1446 display: flex;
1447 padding: 0 6px 0 0;
1448 align-items: center;
1449 justify-content: flex-start;
1450 line-height: 0;
1451 height: 36px;
1452 margin-left: 4px;
1453 }
1454 .wp-block-navigation-placeholder__actions__indicator svg {
1455 margin-right: 4px;
1456 fill: currentColor;
1457 }
1458
1459 .wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset {
1460 flex-direction: row !important;
1461 }
1462
1463 .wp-block-navigation-placeholder__actions {
1464 display: flex;
1465 font-size: 13px;
1466 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1467 gap: 6px;
1468 align-items: center;
1469 }
1470 .wp-block-navigation-placeholder__actions .components-dropdown,
1471 .wp-block-navigation-placeholder__actions > .components-button {
1472 margin-right: 0;
1473 }
1474 .wp-block-navigation-placeholder__actions {
1475 height: 100%;
1476 }
1477 .wp-block-navigation-placeholder__actions.wp-block-navigation-placeholder__actions hr {
1478 border: 0;
1479 min-height: 1px;
1480 min-width: 1px;
1481 background-color: #1e1e1e;
1482 margin: auto 0;
1483 height: 100%;
1484 max-height: 16px;
1485 }
1486
1487 /**
1488 * Mobile menu.
1489 */
1490 @media (min-width: 600px) {
1491 .wp-block-navigation__responsive-container:not(.is-menu-open) .components-button.wp-block-navigation__responsive-container-close {
1492 display: none;
1493 }
1494 }
1495
1496 .wp-block-navigation__responsive-container.is-menu-open {
1497 position: fixed;
1498 top: 159px;
1499 }
1500 @media (min-width: 782px) {
1501 .wp-block-navigation__responsive-container.is-menu-open {
1502 top: 97px;
1503 }
1504 }
1505 @media (min-width: 782px) {
1506 .wp-block-navigation__responsive-container.is-menu-open {
1507 left: 36px;
1508 }
1509 }
1510 @media (min-width: 960px) {
1511 .wp-block-navigation__responsive-container.is-menu-open {
1512 left: 160px;
1513 }
1514 }
1515
1516 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
1517 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
1518 top: 145px;
1519 }
1520
1521 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open {
1522 left: 0;
1523 top: 159px;
1524 }
1525 @media (min-width: 782px) {
1526 .is-fullscreen-mode .wp-block-navigation__responsive-container.is-menu-open {
1527 top: 65px;
1528 }
1529 }
1530 .is-fullscreen-mode .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
1531 .is-fullscreen-mode .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
1532 top: 113px;
1533 }
1534
1535 body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
1536 top: 0;
1537 right: 0;
1538 bottom: 0;
1539 left: 0;
1540 }
1541
1542 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
1543 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
1544 padding: 0;
1545 height: auto;
1546 color: inherit;
1547 }
1548
1549 .components-heading.wp-block-navigation-off-canvas-editor__title {
1550 margin: 0;
1551 }
1552
1553 .wp-block-navigation-off-canvas-editor__header {
1554 margin-bottom: 8px;
1555 }
1556
1557 .is-menu-open .wp-block-navigation__responsive-container-content * .block-list-appender {
1558 margin-top: 16px;
1559 }
1560
1561 @keyframes fadein {
1562 0% {
1563 opacity: 0;
1564 }
1565 100% {
1566 opacity: 1;
1567 }
1568 }
1569 .wp-block-navigation__loading-indicator-container {
1570 padding: 8px 12px;
1571 }
1572
1573 .wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
1574 margin-top: 0;
1575 }
1576
1577 @keyframes fadeouthalf {
1578 0% {
1579 opacity: 1;
1580 }
1581 100% {
1582 opacity: 0.5;
1583 }
1584 }
1585 .wp-block-navigation-delete-menu-button {
1586 width: 100%;
1587 justify-content: center;
1588 margin-bottom: 16px;
1589 }
1590
1591 .components-button.is-link.wp-block-navigation-manage-menus-button {
1592 margin-bottom: 16px;
1593 }
1594
1595 .wp-block-navigation__overlay-menu-preview {
1596 display: flex;
1597 align-items: center;
1598 justify-content: space-between;
1599 width: 100%;
1600 background-color: #f0f0f0;
1601 padding: 0 24px;
1602 height: 64px !important;
1603 grid-column: span 2;
1604 }
1605 .wp-block-navigation__overlay-menu-preview.open {
1606 box-shadow: inset 0 0 0 1px #e0e0e0;
1607 outline: 1px solid transparent;
1608 background-color: #fff;
1609 }
1610
1611 .wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty {
1612 display: none;
1613 }
1614
1615 .wp-block-navigation-placeholder__actions hr + hr {
1616 display: none;
1617 }
1618
1619 /**
1620 * Navigation selector styles
1621 */
1622 .wp-block-navigation__navigation-selector {
1623 margin-bottom: 16px;
1624 width: 100%;
1625 }
1626
1627 .wp-block-navigation__navigation-selector-button {
1628 border: 1px solid;
1629 justify-content: space-between;
1630 width: 100%;
1631 }
1632
1633 .wp-block-navigation__navigation-selector-button__icon {
1634 flex: 0 0 auto;
1635 }
1636
1637 .wp-block-navigation__navigation-selector-button__label {
1638 flex: 0 1 auto;
1639 overflow: hidden;
1640 text-overflow: ellipsis;
1641 white-space: nowrap;
1642 }
1643
1644 .wp-block-navigation__navigation-selector-button--createnew {
1645 border: 1px solid;
1646 margin-bottom: 16px;
1647 width: 100%;
1648 }
1649
1650 .wp-block-navigation__responsive-container-open.components-button {
1651 opacity: 1;
1652 }
1653
1654 .wp-block-navigation__menu-inspector-controls__empty-message {
1655 margin-left: 24px;
1656 }
1657
1658 .editor-sidebar__panel .wp-block-navigation__submenu-header {
1659 margin-top: 0;
1660 margin-bottom: 0;
1661 }
1662
1663 .wp-block-navigation__submenu-accessibility-notice {
1664 grid-column: span 2;
1665 }
1666
1667 .wp-block-navigation__overlay-selector {
1668 position: relative;
1669 }
1670
1671 .wp-block-navigation__overlay-selector-controls {
1672 margin-bottom: 8px;
1673 }
1674
1675 .wp-block-navigation__overlay-create-button {
1676 position: absolute;
1677 top: -4px;
1678 right: 0;
1679 z-index: 1;
1680 }
1681
1682 .wp-block-navigation__overlay-preview {
1683 border: 1px solid #ddd;
1684 border-radius: 2px;
1685 overflow-y: auto;
1686 max-height: 200px;
1687 background: #fff;
1688 }
1689
1690 .wp-block-navigation__overlay-preview-loading {
1691 display: flex;
1692 align-items: center;
1693 justify-content: center;
1694 min-height: 200px;
1695 background: #f0f0f0;
1696 }
1697
1698 .wp-block-navigation__overlay-preview-empty {
1699 display: flex;
1700 align-items: center;
1701 justify-content: center;
1702 min-height: 200px;
1703 padding: 16px;
1704 text-align: center;
1705 color: #757575;
1706 background: #f0f0f0;
1707 font-style: italic;
1708 }
1709
1710 .wp-block-navigation__overlay-preview-placeholder {
1711 width: 100%;
1712 height: 200px;
1713 background: #f0f0f0;
1714 animation: wp-block-navigation-overlay-preview-pulse 1.5s ease-in-out infinite;
1715 }
1716
1717 @keyframes wp-block-navigation-overlay-preview-pulse {
1718 0%, 100% {
1719 opacity: 1;
1720 }
1721 50% {
1722 opacity: 0.5;
1723 }
1724 }
1725 .wp-block-navigation__deleted-overlay-warning {
1726 margin-top: 12px;
1727 }
1728
1729 .wp-block-navigation__overlay-create-button-prominent {
1730 width: 100%;
1731 justify-content: center;
1732 margin-bottom: 8px;
1733 }
1734
1735 .wp-block-navigation__overlay-help-text-wrapper {
1736 margin-top: 8px;
1737 }
1738
1739 /**
1740 * Appender
1741 */
1742 .wp-block-navigation .block-list-appender {
1743 position: relative;
1744 }
1745
1746 /**
1747 * Submenus.
1748 */
1749 .wp-block-navigation .has-child {
1750 cursor: pointer;
1751 }
1752 .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
1753 z-index: 28;
1754 }
1755 .wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container {
1756 z-index: 29;
1757 }
1758 .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 {
1759 visibility: visible !important;
1760 opacity: 1 !important;
1761 min-width: 200px !important;
1762 height: auto !important;
1763 width: auto !important;
1764 overflow: visible !important;
1765 }
1766
1767 /**
1768 * Navigation Items.
1769 */
1770 .wp-block-navigation-item .wp-block-navigation-item__content {
1771 cursor: text;
1772 }
1773 .wp-block-navigation-item.is-editing, .wp-block-navigation-item.is-selected {
1774 min-width: 20px;
1775 }
1776 .wp-block-navigation-item .block-list-appender {
1777 margin-top: 16px;
1778 margin-right: auto;
1779 margin-bottom: 16px;
1780 margin-left: 16px;
1781 }
1782
1783 .wp-block-navigation-link__invalid-item {
1784 color: #000;
1785 }
1786
1787 /**
1788 * Menu item setup state. Is shown when a menu item has no URL configured.
1789 */
1790 .wp-block-navigation-link__placeholder {
1791 position: relative;
1792 text-decoration: none !important;
1793 box-shadow: none !important;
1794 background-image: none !important;
1795 }
1796 .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {
1797 -webkit-text-decoration: wavy underline;
1798 text-decoration: wavy underline;
1799 -webkit-text-decoration-skip-ink: none;
1800 text-decoration-skip-ink: none;
1801 text-underline-offset: 0.25rem;
1802 }
1803 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
1804 cursor: pointer;
1805 }
1806
1807 /**
1808 * Link Control Transforms
1809 */
1810 .link-control-transform {
1811 border-top: 1px solid #ccc;
1812 padding: 0 16px 8px 16px;
1813 }
1814
1815 .link-control-transform__subheading {
1816 font-size: 11px;
1817 text-transform: uppercase;
1818 font-weight: 499;
1819 color: #1e1e1e;
1820 margin-bottom: 1.5em;
1821 }
1822
1823 .link-control-transform__items {
1824 display: flex;
1825 justify-content: space-between;
1826 }
1827
1828 .link-control-transform__item {
1829 flex-basis: 33%;
1830 flex-direction: column;
1831 gap: 8px;
1832 height: auto;
1833 }
1834
1835 .link-ui-page-creator {
1836 max-width: 350px;
1837 min-width: auto;
1838 width: 90vw;
1839 padding-top: 8px;
1840 }
1841 .link-ui-page-creator__inner {
1842 padding: 16px;
1843 }
1844 .link-ui-page-creator__back {
1845 margin-left: 8px;
1846 text-transform: uppercase;
1847 }
1848
1849 /**
1850 * Error text styling for missing entity help text.
1851 */
1852 .navigation-link-control__error-text {
1853 color: #cc1818;
1854 }
1855
1856 .navigation-link-to__action-button {
1857 grid-column: auto;
1858 }
1859 .navigation-link-to__action-button:nth-last-child(1 of .navigation-link-to__action-button):nth-child(odd of .navigation-link-to__action-button) {
1860 grid-column: 1/-1;
1861 }
1862 .navigation-link-to__action-button.navigation-link-to__action-button.navigation-link-to__action-button {
1863 justify-content: center;
1864 }
1865
1866 .wp-block-navigation-submenu {
1867 display: block;
1868 }
1869 .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
1870 z-index: 28;
1871 }
1872 .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container {
1873 visibility: visible !important;
1874 opacity: 1 !important;
1875 min-width: 200px !important;
1876 height: auto !important;
1877 width: auto !important;
1878 position: absolute;
1879 left: -1px;
1880 top: 100%;
1881 }
1882 @media (min-width: 782px) {
1883 .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
1884 left: 100%;
1885 top: -1px;
1886 }
1887 .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
1888 content: "";
1889 position: absolute;
1890 right: 100%;
1891 height: 100%;
1892 display: block;
1893 width: 0.5em;
1894 background: transparent;
1895 }
1896 }
1897
1898 .block-editor-block-list__block[data-type="core/nextpage"] {
1899 max-width: 100%;
1900 text-align: center;
1901 margin-top: 28px;
1902 margin-bottom: 28px;
1903 }
1904
1905 .wp-block-nextpage {
1906 display: block;
1907 text-align: center;
1908 white-space: nowrap;
1909 }
1910 .wp-block-nextpage > span {
1911 font-size: 13px;
1912 position: relative;
1913 text-transform: uppercase;
1914 font-weight: 600;
1915 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1916 color: #757575;
1917 border-radius: 4px;
1918 background: #fff;
1919 padding: 6px 8px;
1920 height: 24px;
1921 }
1922 .wp-block-nextpage::before {
1923 content: "";
1924 position: absolute;
1925 top: 50%;
1926 left: 0;
1927 right: 0;
1928 border-top: 3px dashed #ccc;
1929 }
1930
1931 .wp-block-navigation.items-justified-space-between .wp-block-page-list > div,
1932 .wp-block-navigation.items-justified-space-between .wp-block-page-list {
1933 display: contents;
1934 flex: 1;
1935 }
1936 .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 {
1937 flex: inherit;
1938 }
1939
1940 .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list {
1941 display: block;
1942 }
1943
1944 .wp-block-pages-list__item__link {
1945 pointer-events: none;
1946 }
1947
1948 @media (min-width: 600px) {
1949 .wp-block-page-list-modal {
1950 max-width: 480px;
1951 }
1952 }
1953
1954 .wp-block-page-list-modal-buttons {
1955 display: flex;
1956 justify-content: flex-end;
1957 gap: 12px;
1958 }
1959
1960 .wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
1961 visibility: visible;
1962 opacity: 1;
1963 width: auto;
1964 height: auto;
1965 min-width: 200px;
1966 }
1967
1968 .wp-block-page-list__loading-indicator-container {
1969 padding: 8px 12px;
1970 }
1971
1972 .block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus {
1973 min-height: auto !important;
1974 }
1975
1976 .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
1977 opacity: 1;
1978 }
1979
1980 .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] {
1981 opacity: 0;
1982 }
1983
1984 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
1985 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
1986 rotate: 180deg;
1987 }
1988
1989 .is-zoomed-out .block-editor-block-list__block[data-empty=true] [data-rich-text-placeholder] {
1990 opacity: 0;
1991 }
1992
1993 html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
1994 float: initial;
1995 margin-left: 0.1em;
1996 }
1997
1998 .wp-block-post-author__transform {
1999 background: #f0f0f0;
2000 border-radius: 2px;
2001 margin: 16px;
2002 padding: 16px;
2003 }
2004
2005 .wp-block-playlist li.block-list-appender.block-list-appender {
2006 position: initial;
2007 margin-top: var(--wp--preset--spacing--30, 1em);
2008 }
2009
2010 .wp-block-post-excerpt .wp-block-post-excerpt__excerpt.is-inline {
2011 display: inline;
2012 }
2013
2014 .wp-block-pullquote.is-style-solid-color blockquote p {
2015 font-size: 32px;
2016 }
2017 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation {
2018 text-transform: none;
2019 font-style: normal;
2020 }
2021
2022 .wp-block-pullquote__citation {
2023 color: inherit;
2024 }
2025
2026 .wp-block-rss li a > div {
2027 display: inline;
2028 }
2029
2030 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
2031 flex: 1 1 auto;
2032 }
2033
2034 .wp-block-rss .wp-block-rss {
2035 all: inherit;
2036 margin: 0;
2037 padding: 0;
2038 }
2039
2040 .wp-block[data-align=center] .wp-block-search .wp-block-search__inside-wrapper {
2041 margin: auto;
2042 }
2043
2044 .wp-block-search :where(.wp-block-search__button) {
2045 height: auto;
2046 border-radius: initial;
2047 display: flex;
2048 align-items: center;
2049 justify-content: center;
2050 text-align: center;
2051 }
2052
2053 .wp-block-search__inspector-controls .components-base-control {
2054 margin-bottom: 0;
2055 }
2056
2057 .block-editor-block-list__block[data-type="core/separator"] {
2058 padding-top: 0.1px;
2059 padding-bottom: 0.1px;
2060 }
2061
2062 .blocks-shortcode__textarea {
2063 box-sizing: border-box;
2064 max-height: 250px;
2065 resize: none;
2066 font-family: Menlo, Consolas, monaco, monospace !important;
2067 color: #1e1e1e !important;
2068 background: #fff !important;
2069 padding: 12px !important;
2070 border: 1px solid #1e1e1e !important;
2071 box-shadow: none !important;
2072 border-radius: 2px !important;
2073 font-size: 16px !important;
2074 }
2075 @media (min-width: 600px) {
2076 .blocks-shortcode__textarea {
2077 font-size: 13px !important;
2078 }
2079 }
2080 .blocks-shortcode__textarea:focus {
2081 border-color: var(--wp-admin-theme-color) !important;
2082 box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
2083 outline: 2px solid transparent !important;
2084 }
2085
2086 .wp-block[data-align=center] > .wp-block-site-logo,
2087 .wp-block-site-logo.aligncenter > div {
2088 display: table;
2089 margin-left: auto;
2090 margin-right: auto;
2091 }
2092
2093 .wp-block-site-logo a {
2094 pointer-events: none;
2095 }
2096 .wp-block-site-logo .custom-logo-link {
2097 cursor: inherit;
2098 }
2099 .wp-block-site-logo .custom-logo-link:focus {
2100 box-shadow: none;
2101 }
2102 .wp-block-site-logo img {
2103 display: block;
2104 height: auto;
2105 max-width: 100%;
2106 }
2107 .wp-block-site-logo.is-transient {
2108 position: relative;
2109 }
2110 .wp-block-site-logo.is-transient img {
2111 opacity: 0.3;
2112 }
2113 .wp-block-site-logo.is-transient .components-spinner {
2114 position: absolute;
2115 top: 50%;
2116 left: 50%;
2117 transform: translate(-50%, -50%);
2118 margin: 0;
2119 }
2120
2121 .wp-block-site-logo.wp-block-site-logo.is-default-size .components-placeholder {
2122 height: 60px;
2123 width: 60px;
2124 }
2125 .wp-block-site-logo.wp-block-site-logo > div,
2126 .wp-block-site-logo.wp-block-site-logo .components-resizable-box__container {
2127 border-radius: inherit;
2128 }
2129 .wp-block-site-logo.wp-block-site-logo .components-placeholder {
2130 display: flex;
2131 justify-content: center;
2132 align-items: center;
2133 padding: 0;
2134 border-radius: inherit;
2135 min-height: 48px;
2136 min-width: 48px;
2137 height: 100%;
2138 width: 100%;
2139 }
2140 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-form-file-upload {
2141 display: none;
2142 }
2143 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-drop-zone__content-text {
2144 display: none;
2145 }
2146 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button {
2147 padding: 0;
2148 margin: auto;
2149 display: flex;
2150 justify-content: center;
2151 align-items: center;
2152 width: 48px;
2153 height: 48px;
2154 border-radius: 50%;
2155 position: relative;
2156 background: var(--wp-admin-theme-color);
2157 border-color: var(--wp-admin-theme-color);
2158 border-style: solid;
2159 color: #fff;
2160 }
2161 .wp-block-site-logo.wp-block-site-logo .components-placeholder .components-button.components-button > svg {
2162 color: inherit;
2163 }
2164
2165 .block-library-site-logo__inspector-media-replace-container {
2166 position: relative;
2167 }
2168 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
2169 word-break: break-all;
2170 white-space: normal;
2171 text-align: start;
2172 -moz-text-align-last: center;
2173 text-align-last: center;
2174 }
2175 .block-library-site-logo__inspector-media-replace-container img {
2176 width: 20px;
2177 min-width: 20px;
2178 aspect-ratio: 1;
2179 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
2180 border-radius: 2px;
2181 }
2182 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-readonly-logo-preview {
2183 padding: 6px 12px;
2184 display: flex;
2185 height: 40px;
2186 }
2187
2188 .wp-block-site-tagline__placeholder {
2189 padding: 1em 0;
2190 border: 1px dashed;
2191 }
2192
2193 .wp-block-site-title__placeholder {
2194 padding: 1em 0;
2195 border: 1px dashed;
2196 }
2197
2198 .wp-block-social-links .wp-social-link {
2199 line-height: 0;
2200 }
2201
2202 .wp-block-social-link-anchor {
2203 align-items: center;
2204 background: none;
2205 border: 0;
2206 box-sizing: border-box;
2207 cursor: pointer;
2208 display: inline-flex;
2209 font-size: inherit;
2210 color: currentColor;
2211 height: auto;
2212 font-weight: inherit;
2213 font-family: inherit;
2214 margin: 0;
2215 opacity: 1;
2216 padding: 0.25em;
2217 }
2218 .wp-block-social-link-anchor:hover {
2219 transform: none;
2220 }
2221
2222 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
2223 padding-left: 0.6666666667em;
2224 padding-right: 0.6666666667em;
2225 }
2226
2227 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
2228 padding: 0;
2229 }
2230
2231 .wp-block-social-link__toolbar_content_text {
2232 width: 250px;
2233 }
2234
2235 .wp-block-social-links div.block-editor-url-input {
2236 display: inline-block;
2237 margin-left: 8px;
2238 }
2239
2240 .wp-social-link:hover {
2241 transform: none;
2242 }
2243
2244 :root :where(.wp-block-social-links) {
2245 padding: 0;
2246 }
2247
2248 .wp-block[data-align=center] > .wp-block-social-links,
2249 .wp-block.wp-block-social-links.aligncenter {
2250 justify-content: center;
2251 }
2252
2253 .block-editor-block-preview__content .components-button:disabled {
2254 opacity: 1;
2255 }
2256
2257 .wp-social-link.wp-social-link__is-incomplete {
2258 opacity: 0.5;
2259 }
2260
2261 .wp-block-social-links .is-selected .wp-social-link__is-incomplete,
2262 .wp-social-link.wp-social-link__is-incomplete:hover,
2263 .wp-social-link.wp-social-link__is-incomplete:focus {
2264 opacity: 1;
2265 }
2266
2267 .wp-block-social-links .block-list-appender {
2268 position: static;
2269 }
2270 .wp-block-social-links .block-list-appender .block-editor-inserter {
2271 font-size: inherit;
2272 }
2273 .wp-block-social-links .block-list-appender .block-editor-button-block-appender {
2274 height: 1.5em;
2275 width: 1.5em;
2276 font-size: inherit;
2277 padding: 0;
2278 }
2279
2280 .block-editor-block-list__block[data-type="core/spacer"]::before {
2281 content: "";
2282 display: block;
2283 position: absolute;
2284 z-index: 1;
2285 width: 100%;
2286 min-height: 8px;
2287 min-width: 8px;
2288 height: 100%;
2289 }
2290
2291 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
2292 .block-library-spacer__resize-container.has-show-handle,
2293 .wp-block-spacer.is-selected.custom-sizes-disabled {
2294 background: rgba(0, 0, 0, 0.1);
2295 }
2296 .is-dark-theme .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
2297 .is-dark-theme .block-library-spacer__resize-container.has-show-handle,
2298 .is-dark-theme .wp-block-spacer.is-selected.custom-sizes-disabled {
2299 background: rgba(255, 255, 255, 0.15);
2300 }
2301
2302 .block-library-spacer__resize-container {
2303 clear: both;
2304 }
2305 .block-library-spacer__resize-container:not(.is-resizing) {
2306 height: 100% !important;
2307 width: 100% !important;
2308 }
2309 .block-library-spacer__resize-container .components-resizable-box__handle::before {
2310 content: none;
2311 }
2312 .block-library-spacer__resize-container.resize-horizontal {
2313 margin-bottom: 0;
2314 height: 100% !important;
2315 }
2316
2317 .wp-block[data-align=left] > .wp-block-table, .wp-block[data-align=right] > .wp-block-table, .wp-block[data-align=center] > .wp-block-table {
2318 height: auto;
2319 }
2320 .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 {
2321 width: auto;
2322 }
2323 .wp-block[data-align=left] > .wp-block-table td,
2324 .wp-block[data-align=left] > .wp-block-table th, .wp-block[data-align=right] > .wp-block-table td,
2325 .wp-block[data-align=right] > .wp-block-table th, .wp-block[data-align=center] > .wp-block-table td,
2326 .wp-block[data-align=center] > .wp-block-table th {
2327 word-break: break-word;
2328 }
2329 .wp-block[data-align=center] > .wp-block-table {
2330 text-align: initial;
2331 }
2332 .wp-block[data-align=center] > .wp-block-table table {
2333 margin: 0 auto;
2334 }
2335 .wp-block-table td,
2336 .wp-block-table th {
2337 border: 1px solid;
2338 padding: 0.5em;
2339 }
2340 .wp-block-table td.is-selected,
2341 .wp-block-table th.is-selected {
2342 border-color: var(--wp-admin-theme-color);
2343 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2344 border-style: double;
2345 }
2346 .wp-block-table table.has-individual-borders > *,
2347 .wp-block-table table.has-individual-borders tr,
2348 .wp-block-table table.has-individual-borders th,
2349 .wp-block-table table.has-individual-borders td {
2350 border-width: 1px;
2351 border-style: solid;
2352 border-color: currentColor;
2353 }
2354
2355 .blocks-table__placeholder-form.blocks-table__placeholder-form {
2356 display: flex;
2357 flex-direction: column;
2358 align-items: flex-start;
2359 gap: 8px;
2360 }
2361 @media (min-width: 782px) {
2362 .blocks-table__placeholder-form.blocks-table__placeholder-form {
2363 flex-direction: row;
2364 align-items: flex-end;
2365 }
2366 }
2367
2368 .blocks-table__placeholder-input {
2369 width: 112px;
2370 }
2371
2372 .wp-block-tab-list > .block-editor-block-list__layout {
2373 display: contents;
2374 }
2375 .wp-block-tab-list .block-editor-block-list__block:has(> .wp-block-tab) {
2376 display: contents;
2377 }
2378
2379 .wp-block-tab.is-selected {
2380 outline-offset: 2px;
2381 }
2382
2383 .block-editor-block-preview__live-content:has(.wp-block-tab) {
2384 flex-basis: inherit !important;
2385 flex-grow: inherit !important;
2386 }
2387 .block-editor-block-preview__live-content:has(.wp-block-tab) .wp-block-tab {
2388 flex-basis: 100% !important;
2389 }
2390
2391 .block-editor-template-part__selection-modal {
2392 z-index: 1000001;
2393 }
2394 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2395 -moz-column-count: 2;
2396 column-count: 2;
2397 -moz-column-gap: 24px;
2398 column-gap: 24px;
2399 }
2400 @media (min-width: 1280px) {
2401 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2402 -moz-column-count: 3;
2403 column-count: 3;
2404 }
2405 }
2406 .block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2407 -moz-column-break-inside: avoid;
2408 break-inside: avoid-column;
2409 }
2410
2411 .block-library-template-part__selection-search {
2412 background: #fff;
2413 position: sticky;
2414 top: 0;
2415 padding: 16px 0;
2416 z-index: 2;
2417 }
2418
2419 .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,
2420 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after,
2421 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
2422 outline-color: var(--wp-block-synced-color);
2423 }
2424 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
2425 .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
2426 outline-color: var(--wp-block-synced-color);
2427 }
2428
2429 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
2430 border: none;
2431 }
2432
2433 .wp-block-term-template .term-loading .term-loading-placeholder {
2434 width: 100%;
2435 height: 1.5em;
2436 margin-bottom: 0.25em;
2437 background-color: #f0f0f0;
2438 border-radius: 2px;
2439 }
2440 @media not (prefers-reduced-motion) {
2441 .wp-block-term-template .term-loading .term-loading-placeholder {
2442 animation: loadingpulse 1.5s ease-in-out infinite;
2443 }
2444 }
2445
2446 @keyframes loadingpulse {
2447 0% {
2448 opacity: 1;
2449 }
2450 50% {
2451 opacity: 0.5;
2452 }
2453 100% {
2454 opacity: 1;
2455 }
2456 }
2457 .wp-block-text-columns .block-editor-rich-text__editable:focus {
2458 outline: 1px solid #ddd;
2459 }
2460
2461 .wp-block[data-align=center] > .wp-block-video {
2462 text-align: center;
2463 }
2464
2465 .wp-block-video {
2466 position: relative;
2467 }
2468 .wp-block-video.is-transient video {
2469 opacity: 0.3;
2470 }
2471 .wp-block-video .components-spinner {
2472 position: absolute;
2473 top: 50%;
2474 left: 50%;
2475 margin-top: -9px;
2476 margin-left: -9px;
2477 }
2478
2479 .block-library-video-tracks-editor {
2480 z-index: 159990;
2481 }
2482
2483 .modal-open .block-library-video-tracks-editor {
2484 z-index: 99999;
2485 }
2486
2487 .block-library-video-tracks-editor__track-list-track {
2488 padding-left: 12px;
2489 }
2490
2491 .block-library-video-tracks-editor__single-track-editor-kind-select {
2492 max-width: 240px;
2493 }
2494
2495 .block-library-video-tracks-editor__tracks-informative-message-title,
2496 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
2497 margin-top: 4px;
2498 color: #757575;
2499 text-transform: uppercase;
2500 font-size: 11px;
2501 font-weight: 499;
2502 display: block;
2503 }
2504
2505 .block-library-video-tracks-editor > .components-popover__content {
2506 width: 360px;
2507 }
2508
2509 .block-library-video-tracks-editor__track-list .components-menu-group__label,
2510 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
2511 padding: 0;
2512 }
2513
2514 .block-library-video-tracks-editor__tracks-informative-message {
2515 padding: 8px;
2516 }
2517 .block-library-video-tracks-editor__tracks-informative-message-description {
2518 margin-bottom: 0;
2519 }
2520
2521 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2522 -moz-column-count: 2;
2523 column-count: 2;
2524 -moz-column-gap: 24px;
2525 column-gap: 24px;
2526 }
2527 @media (min-width: 1280px) {
2528 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2529 -moz-column-count: 3;
2530 column-count: 3;
2531 }
2532 }
2533 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2534 -moz-column-break-inside: avoid;
2535 break-inside: avoid-column;
2536 }
2537 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
2538 background: #fff;
2539 position: sticky;
2540 top: 0;
2541 padding: 16px 0;
2542 transform: translateY(-4px);
2543 margin-bottom: -4px;
2544 z-index: 2;
2545 }
2546
2547 @media (min-width: 600px) {
2548 .wp-block-query__enhanced-pagination-modal {
2549 max-width: 480px;
2550 }
2551 }
2552
2553 .block-editor-block-settings-menu__popover.is-expanded {
2554 overflow-y: scroll;
2555 }
2556 .block-editor-block-settings-menu__popover .block-library-query-pattern__selection-content {
2557 height: 100%;
2558 }
2559 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2560 display: grid;
2561 grid-template-columns: 1fr;
2562 }
2563 @media (min-width: 600px) {
2564 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2565 grid-template-columns: 1fr 1fr;
2566 }
2567 }
2568 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2569 grid-gap: 12px;
2570 min-width: 280px;
2571 }
2572 @media (min-width: 600px) {
2573 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2574 min-width: 480px;
2575 }
2576 }
2577 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list__list-item {
2578 margin-bottom: 0;
2579 }
2580
2581 .wp-block-query > .block-editor-media-placeholder.is-small {
2582 min-height: 60px;
2583 }
2584
2585 .wp-block[data-align=center] > .wp-block-query-pagination {
2586 justify-content: center;
2587 }
2588
2589 :where(.editor-styles-wrapper) .wp-block-query-pagination {
2590 max-width: 100%;
2591 }
2592 :where(.editor-styles-wrapper) .wp-block-query-pagination.block-editor-block-list__layout {
2593 margin: 0;
2594 }
2595
2596 .wp-block-query-pagination-numbers a {
2597 text-decoration: underline;
2598 }
2599 .wp-block-query-pagination-numbers .page-numbers {
2600 margin-right: 2px;
2601 }
2602 .wp-block-query-pagination-numbers .page-numbers:last-child {
2603 /*rtl:ignore*/
2604 margin-right: 0;
2605 }
2606
2607 .wp-block-post-featured-image .block-editor-media-placeholder {
2608 z-index: 1;
2609 backdrop-filter: none;
2610 }
2611 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2612 .wp-block-post-featured-image .components-placeholder {
2613 justify-content: center;
2614 align-items: center;
2615 padding: 0;
2616 display: flex;
2617 }
2618 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
2619 .wp-block-post-featured-image .components-placeholder .components-form-file-upload {
2620 display: none;
2621 }
2622 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
2623 .wp-block-post-featured-image .components-placeholder .components-button {
2624 margin: auto;
2625 padding: 0;
2626 display: flex;
2627 justify-content: center;
2628 align-items: center;
2629 width: 48px;
2630 height: 48px;
2631 border-radius: 50%;
2632 position: relative;
2633 background: var(--wp-admin-theme-color);
2634 border-color: var(--wp-admin-theme-color);
2635 border-style: solid;
2636 color: #fff;
2637 }
2638 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button > svg,
2639 .wp-block-post-featured-image .components-placeholder .components-button > svg {
2640 color: inherit;
2641 }
2642 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2643 .wp-block-post-featured-image .components-placeholder {
2644 min-height: 200px;
2645 }
2646 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
2647 .wp-block-post-featured-image .components-placeholder:where(.has-border-color),
2648 .wp-block-post-featured-image img:where(.has-border-color) {
2649 border-style: solid;
2650 }
2651 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),
2652 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),
2653 .wp-block-post-featured-image img:where([style*=border-top-color]) {
2654 border-top-style: solid;
2655 }
2656 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),
2657 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),
2658 .wp-block-post-featured-image img:where([style*=border-right-color]) {
2659 border-right-style: solid;
2660 }
2661 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),
2662 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),
2663 .wp-block-post-featured-image img:where([style*=border-bottom-color]) {
2664 border-bottom-style: solid;
2665 }
2666 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),
2667 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),
2668 .wp-block-post-featured-image img:where([style*=border-left-color]) {
2669 border-left-style: solid;
2670 }
2671 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),
2672 .wp-block-post-featured-image .components-placeholder:where([style*=border-width]),
2673 .wp-block-post-featured-image img:where([style*=border-width]) {
2674 border-style: solid;
2675 }
2676 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),
2677 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),
2678 .wp-block-post-featured-image img:where([style*=border-top-width]) {
2679 border-top-style: solid;
2680 }
2681 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),
2682 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),
2683 .wp-block-post-featured-image img:where([style*=border-right-width]) {
2684 border-right-style: solid;
2685 }
2686 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),
2687 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),
2688 .wp-block-post-featured-image img:where([style*=border-bottom-width]) {
2689 border-bottom-style: solid;
2690 }
2691 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),
2692 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),
2693 .wp-block-post-featured-image img:where([style*=border-left-width]) {
2694 border-left-style: solid;
2695 }
2696 .wp-block-post-featured-image[style*=height] .components-placeholder {
2697 min-height: 48px;
2698 min-width: 48px;
2699 height: 100%;
2700 width: 100%;
2701 }
2702 .wp-block-post-featured-image > a {
2703 pointer-events: none;
2704 }
2705 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
2706 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
2707 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
2708 opacity: 1;
2709 pointer-events: auto;
2710 }
2711 .wp-block-post-featured-image.is-transient {
2712 position: relative;
2713 }
2714 .wp-block-post-featured-image.is-transient img {
2715 opacity: 0.3;
2716 }
2717 .wp-block-post-featured-image.is-transient .components-spinner {
2718 position: absolute;
2719 top: 50%;
2720 left: 50%;
2721 transform: translate(-50%, -50%);
2722 }
2723
2724 div[data-type="core/post-featured-image"] img {
2725 max-width: 100%;
2726 height: auto;
2727 display: block;
2728 }
2729
2730 .wp-block-post-comments-form * {
2731 pointer-events: none;
2732 }
2733 .wp-block-post-comments-form *.block-editor-warning * {
2734 pointer-events: auto;
2735 }
2736
2737 /**
2738 * Element styles for the editor
2739 */
2740 .wp-element-button {
2741 cursor: revert;
2742 }
2743 .wp-element-button[role=textbox] {
2744 cursor: text;
2745 }
2746
2747 .block-library-poster-image__container {
2748 position: relative;
2749 }
2750 .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 {
2751 opacity: 1;
2752 }
2753 .block-library-poster-image__container .block-library-poster-image__actions.block-library-poster-image__actions-select {
2754 opacity: 1;
2755 margin-top: 16px;
2756 }
2757 .block-library-poster-image__container .components-drop-zone__content {
2758 border-radius: 2px;
2759 }
2760 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner {
2761 display: flex;
2762 align-items: center;
2763 gap: 8px;
2764 }
2765 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
2766 margin: 0;
2767 }
2768 .block-library-poster-image__container .components-spinner {
2769 position: absolute;
2770 top: 50%;
2771 left: 50%;
2772 margin-top: -9px;
2773 margin-left: -9px;
2774 }
2775
2776 .block-library-poster-image__preview {
2777 width: 100%;
2778 padding: 0;
2779 overflow: hidden;
2780 outline-offset: -1px;
2781 min-height: 40px;
2782 display: flex;
2783 justify-content: center;
2784 height: auto !important;
2785 outline: 1px solid rgba(0, 0, 0, 0.1);
2786 }
2787 .block-library-poster-image__preview .block-library-poster-image__preview-image {
2788 -o-object-fit: cover;
2789 object-fit: cover;
2790 width: 100%;
2791 -o-object-position: 50% 50%;
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 }