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

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

2,861 lines 73.8 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 text-align-last: center;
2173 }
2174 .block-library-site-logo__inspector-media-replace-container img {
2175 width: 20px;
2176 min-width: 20px;
2177 aspect-ratio: 1;
2178 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
2179 border-radius: 2px;
2180 }
2181 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-readonly-logo-preview {
2182 padding: 6px 12px;
2183 display: flex;
2184 height: 40px;
2185 }
2186
2187 .wp-block-site-tagline__placeholder {
2188 padding: 1em 0;
2189 border: 1px dashed;
2190 }
2191
2192 .wp-block-site-title__placeholder {
2193 padding: 1em 0;
2194 border: 1px dashed;
2195 }
2196
2197 .wp-block-social-links .wp-social-link {
2198 line-height: 0;
2199 }
2200
2201 .wp-block-social-link-anchor {
2202 align-items: center;
2203 background: none;
2204 border: 0;
2205 box-sizing: border-box;
2206 cursor: pointer;
2207 display: inline-flex;
2208 font-size: inherit;
2209 color: currentColor;
2210 height: auto;
2211 font-weight: inherit;
2212 font-family: inherit;
2213 margin: 0;
2214 opacity: 1;
2215 padding: 0.25em;
2216 }
2217 .wp-block-social-link-anchor:hover {
2218 transform: none;
2219 }
2220
2221 :root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
2222 padding-left: 0.6666666667em;
2223 padding-right: 0.6666666667em;
2224 }
2225
2226 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
2227 padding: 0;
2228 }
2229
2230 .wp-block-social-link__toolbar_content_text {
2231 width: 250px;
2232 }
2233
2234 .wp-block-social-links div.block-editor-url-input {
2235 display: inline-block;
2236 margin-left: 8px;
2237 }
2238
2239 .wp-social-link:hover {
2240 transform: none;
2241 }
2242
2243 :root :where(.wp-block-social-links) {
2244 padding: 0;
2245 }
2246
2247 .wp-block[data-align=center] > .wp-block-social-links,
2248 .wp-block.wp-block-social-links.aligncenter {
2249 justify-content: center;
2250 }
2251
2252 .block-editor-block-preview__content .components-button:disabled {
2253 opacity: 1;
2254 }
2255
2256 .wp-social-link.wp-social-link__is-incomplete {
2257 opacity: 0.5;
2258 }
2259
2260 .wp-block-social-links .is-selected .wp-social-link__is-incomplete,
2261 .wp-social-link.wp-social-link__is-incomplete:hover,
2262 .wp-social-link.wp-social-link__is-incomplete:focus {
2263 opacity: 1;
2264 }
2265
2266 .wp-block-social-links .block-list-appender {
2267 position: static;
2268 }
2269 .wp-block-social-links .block-list-appender .block-editor-inserter {
2270 font-size: inherit;
2271 }
2272 .wp-block-social-links .block-list-appender .block-editor-button-block-appender {
2273 height: 1.5em;
2274 width: 1.5em;
2275 font-size: inherit;
2276 padding: 0;
2277 }
2278
2279 .block-editor-block-list__block[data-type="core/spacer"]::before {
2280 content: "";
2281 display: block;
2282 position: absolute;
2283 z-index: 1;
2284 width: 100%;
2285 min-height: 8px;
2286 min-width: 8px;
2287 height: 100%;
2288 }
2289
2290 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
2291 .block-library-spacer__resize-container.has-show-handle,
2292 .wp-block-spacer.is-selected.custom-sizes-disabled {
2293 background: rgba(0, 0, 0, 0.1);
2294 }
2295 .is-dark-theme .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
2296 .is-dark-theme .block-library-spacer__resize-container.has-show-handle,
2297 .is-dark-theme .wp-block-spacer.is-selected.custom-sizes-disabled {
2298 background: rgba(255, 255, 255, 0.15);
2299 }
2300
2301 .block-library-spacer__resize-container {
2302 clear: both;
2303 }
2304 .block-library-spacer__resize-container:not(.is-resizing) {
2305 height: 100% !important;
2306 width: 100% !important;
2307 }
2308 .block-library-spacer__resize-container .components-resizable-box__handle::before {
2309 content: none;
2310 }
2311 .block-library-spacer__resize-container.resize-horizontal {
2312 margin-bottom: 0;
2313 height: 100% !important;
2314 }
2315
2316 .wp-block[data-align=left] > .wp-block-table, .wp-block[data-align=right] > .wp-block-table, .wp-block[data-align=center] > .wp-block-table {
2317 height: auto;
2318 }
2319 .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 {
2320 width: auto;
2321 }
2322 .wp-block[data-align=left] > .wp-block-table td,
2323 .wp-block[data-align=left] > .wp-block-table th, .wp-block[data-align=right] > .wp-block-table td,
2324 .wp-block[data-align=right] > .wp-block-table th, .wp-block[data-align=center] > .wp-block-table td,
2325 .wp-block[data-align=center] > .wp-block-table th {
2326 word-break: break-word;
2327 }
2328 .wp-block[data-align=center] > .wp-block-table {
2329 text-align: initial;
2330 }
2331 .wp-block[data-align=center] > .wp-block-table table {
2332 margin: 0 auto;
2333 }
2334 .wp-block-table td,
2335 .wp-block-table th {
2336 border: 1px solid;
2337 padding: 0.5em;
2338 }
2339 .wp-block-table td.is-selected,
2340 .wp-block-table th.is-selected {
2341 border-color: var(--wp-admin-theme-color);
2342 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
2343 border-style: double;
2344 }
2345 .wp-block-table table.has-individual-borders > *,
2346 .wp-block-table table.has-individual-borders tr,
2347 .wp-block-table table.has-individual-borders th,
2348 .wp-block-table table.has-individual-borders td {
2349 border-width: 1px;
2350 border-style: solid;
2351 border-color: currentColor;
2352 }
2353
2354 .blocks-table__placeholder-form.blocks-table__placeholder-form {
2355 display: flex;
2356 flex-direction: column;
2357 align-items: flex-start;
2358 gap: 8px;
2359 }
2360 @media (min-width: 782px) {
2361 .blocks-table__placeholder-form.blocks-table__placeholder-form {
2362 flex-direction: row;
2363 align-items: flex-end;
2364 }
2365 }
2366
2367 .blocks-table__placeholder-input {
2368 width: 112px;
2369 }
2370
2371 .wp-block-tab-list > .block-editor-block-list__layout {
2372 display: contents;
2373 }
2374 .wp-block-tab-list .block-editor-block-list__block:has(> .wp-block-tab) {
2375 display: contents;
2376 }
2377
2378 .wp-block-tab.is-selected {
2379 outline-offset: 2px;
2380 }
2381
2382 .block-editor-block-preview__live-content:has(.wp-block-tab) {
2383 flex-basis: inherit !important;
2384 flex-grow: inherit !important;
2385 }
2386 .block-editor-block-preview__live-content:has(.wp-block-tab) .wp-block-tab {
2387 flex-basis: 100% !important;
2388 }
2389
2390 .block-editor-template-part__selection-modal {
2391 z-index: 1000001;
2392 }
2393 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2394 column-count: 2;
2395 column-gap: 24px;
2396 }
2397 @media (min-width: 1280px) {
2398 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2399 column-count: 3;
2400 }
2401 }
2402 .block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2403 break-inside: avoid-column;
2404 }
2405
2406 .block-library-template-part__selection-search {
2407 background: #fff;
2408 position: sticky;
2409 top: 0;
2410 padding: 16px 0;
2411 z-index: 2;
2412 }
2413
2414 .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,
2415 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after,
2416 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
2417 outline-color: var(--wp-block-synced-color);
2418 }
2419 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
2420 .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
2421 outline-color: var(--wp-block-synced-color);
2422 }
2423
2424 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
2425 border: none;
2426 }
2427
2428 .wp-block-term-template .term-loading .term-loading-placeholder {
2429 width: 100%;
2430 height: 1.5em;
2431 margin-bottom: 0.25em;
2432 background-color: #f0f0f0;
2433 border-radius: 2px;
2434 }
2435 @media not (prefers-reduced-motion) {
2436 .wp-block-term-template .term-loading .term-loading-placeholder {
2437 animation: loadingpulse 1.5s ease-in-out infinite;
2438 }
2439 }
2440
2441 @keyframes loadingpulse {
2442 0% {
2443 opacity: 1;
2444 }
2445 50% {
2446 opacity: 0.5;
2447 }
2448 100% {
2449 opacity: 1;
2450 }
2451 }
2452 .wp-block-text-columns .block-editor-rich-text__editable:focus {
2453 outline: 1px solid #ddd;
2454 }
2455
2456 .wp-block[data-align=center] > .wp-block-video {
2457 text-align: center;
2458 }
2459
2460 .wp-block-video {
2461 position: relative;
2462 }
2463 .wp-block-video.is-transient video {
2464 opacity: 0.3;
2465 }
2466 .wp-block-video .components-spinner {
2467 position: absolute;
2468 top: 50%;
2469 left: 50%;
2470 margin-top: -9px;
2471 margin-left: -9px;
2472 }
2473
2474 .block-library-video-tracks-editor {
2475 z-index: 159990;
2476 }
2477
2478 .modal-open .block-library-video-tracks-editor {
2479 z-index: 99999;
2480 }
2481
2482 .block-library-video-tracks-editor__track-list-track {
2483 padding-left: 12px;
2484 }
2485
2486 .block-library-video-tracks-editor__single-track-editor-kind-select {
2487 max-width: 240px;
2488 }
2489
2490 .block-library-video-tracks-editor__tracks-informative-message-title,
2491 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
2492 margin-top: 4px;
2493 color: #757575;
2494 text-transform: uppercase;
2495 font-size: 11px;
2496 font-weight: 499;
2497 display: block;
2498 }
2499
2500 .block-library-video-tracks-editor > .components-popover__content {
2501 width: 360px;
2502 }
2503
2504 .block-library-video-tracks-editor__track-list .components-menu-group__label,
2505 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
2506 padding: 0;
2507 }
2508
2509 .block-library-video-tracks-editor__tracks-informative-message {
2510 padding: 8px;
2511 }
2512 .block-library-video-tracks-editor__tracks-informative-message-description {
2513 margin-bottom: 0;
2514 }
2515
2516 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2517 column-count: 2;
2518 column-gap: 24px;
2519 }
2520 @media (min-width: 1280px) {
2521 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2522 column-count: 3;
2523 }
2524 }
2525 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2526 break-inside: avoid-column;
2527 }
2528 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
2529 background: #fff;
2530 position: sticky;
2531 top: 0;
2532 padding: 16px 0;
2533 transform: translateY(-4px);
2534 margin-bottom: -4px;
2535 z-index: 2;
2536 }
2537
2538 @media (min-width: 600px) {
2539 .wp-block-query__enhanced-pagination-modal {
2540 max-width: 480px;
2541 }
2542 }
2543
2544 .block-editor-block-settings-menu__popover.is-expanded {
2545 overflow-y: scroll;
2546 }
2547 .block-editor-block-settings-menu__popover .block-library-query-pattern__selection-content {
2548 height: 100%;
2549 }
2550 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2551 display: grid;
2552 grid-template-columns: 1fr;
2553 }
2554 @media (min-width: 600px) {
2555 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2556 grid-template-columns: 1fr 1fr;
2557 }
2558 }
2559 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2560 grid-gap: 12px;
2561 min-width: 280px;
2562 }
2563 @media (min-width: 600px) {
2564 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2565 min-width: 480px;
2566 }
2567 }
2568 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list__list-item {
2569 margin-bottom: 0;
2570 }
2571
2572 .wp-block-query > .block-editor-media-placeholder.is-small {
2573 min-height: 60px;
2574 }
2575
2576 .wp-block[data-align=center] > .wp-block-query-pagination {
2577 justify-content: center;
2578 }
2579
2580 :where(.editor-styles-wrapper) .wp-block-query-pagination {
2581 max-width: 100%;
2582 }
2583 :where(.editor-styles-wrapper) .wp-block-query-pagination.block-editor-block-list__layout {
2584 margin: 0;
2585 }
2586
2587 .wp-block-query-pagination-numbers a {
2588 text-decoration: underline;
2589 }
2590 .wp-block-query-pagination-numbers .page-numbers {
2591 margin-right: 2px;
2592 }
2593 .wp-block-query-pagination-numbers .page-numbers:last-child {
2594 /*rtl:ignore*/
2595 margin-right: 0;
2596 }
2597
2598 .wp-block-post-featured-image .block-editor-media-placeholder {
2599 z-index: 1;
2600 backdrop-filter: none;
2601 }
2602 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2603 .wp-block-post-featured-image .components-placeholder {
2604 justify-content: center;
2605 align-items: center;
2606 padding: 0;
2607 display: flex;
2608 }
2609 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
2610 .wp-block-post-featured-image .components-placeholder .components-form-file-upload {
2611 display: none;
2612 }
2613 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
2614 .wp-block-post-featured-image .components-placeholder .components-button {
2615 margin: auto;
2616 padding: 0;
2617 display: flex;
2618 justify-content: center;
2619 align-items: center;
2620 width: 48px;
2621 height: 48px;
2622 border-radius: 50%;
2623 position: relative;
2624 background: var(--wp-admin-theme-color);
2625 border-color: var(--wp-admin-theme-color);
2626 border-style: solid;
2627 color: #fff;
2628 }
2629 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button > svg,
2630 .wp-block-post-featured-image .components-placeholder .components-button > svg {
2631 color: inherit;
2632 }
2633 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2634 .wp-block-post-featured-image .components-placeholder {
2635 min-height: 200px;
2636 }
2637 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
2638 .wp-block-post-featured-image .components-placeholder:where(.has-border-color),
2639 .wp-block-post-featured-image img:where(.has-border-color) {
2640 border-style: solid;
2641 }
2642 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),
2643 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),
2644 .wp-block-post-featured-image img:where([style*=border-top-color]) {
2645 border-top-style: solid;
2646 }
2647 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),
2648 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),
2649 .wp-block-post-featured-image img:where([style*=border-right-color]) {
2650 border-right-style: solid;
2651 }
2652 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),
2653 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),
2654 .wp-block-post-featured-image img:where([style*=border-bottom-color]) {
2655 border-bottom-style: solid;
2656 }
2657 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),
2658 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),
2659 .wp-block-post-featured-image img:where([style*=border-left-color]) {
2660 border-left-style: solid;
2661 }
2662 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),
2663 .wp-block-post-featured-image .components-placeholder:where([style*=border-width]),
2664 .wp-block-post-featured-image img:where([style*=border-width]) {
2665 border-style: solid;
2666 }
2667 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),
2668 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),
2669 .wp-block-post-featured-image img:where([style*=border-top-width]) {
2670 border-top-style: solid;
2671 }
2672 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),
2673 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),
2674 .wp-block-post-featured-image img:where([style*=border-right-width]) {
2675 border-right-style: solid;
2676 }
2677 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),
2678 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),
2679 .wp-block-post-featured-image img:where([style*=border-bottom-width]) {
2680 border-bottom-style: solid;
2681 }
2682 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),
2683 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),
2684 .wp-block-post-featured-image img:where([style*=border-left-width]) {
2685 border-left-style: solid;
2686 }
2687 .wp-block-post-featured-image[style*=height] .components-placeholder {
2688 min-height: 48px;
2689 min-width: 48px;
2690 height: 100%;
2691 width: 100%;
2692 }
2693 .wp-block-post-featured-image > a {
2694 pointer-events: none;
2695 }
2696 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
2697 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
2698 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
2699 opacity: 1;
2700 pointer-events: auto;
2701 }
2702 .wp-block-post-featured-image.is-transient {
2703 position: relative;
2704 }
2705 .wp-block-post-featured-image.is-transient img {
2706 opacity: 0.3;
2707 }
2708 .wp-block-post-featured-image.is-transient .components-spinner {
2709 position: absolute;
2710 top: 50%;
2711 left: 50%;
2712 transform: translate(-50%, -50%);
2713 }
2714
2715 div[data-type="core/post-featured-image"] img {
2716 max-width: 100%;
2717 height: auto;
2718 display: block;
2719 }
2720
2721 .wp-block-post-comments-form * {
2722 pointer-events: none;
2723 }
2724 .wp-block-post-comments-form *.block-editor-warning * {
2725 pointer-events: auto;
2726 }
2727
2728 /**
2729 * Element styles for the editor
2730 */
2731 .wp-element-button {
2732 cursor: revert;
2733 }
2734 .wp-element-button[role=textbox] {
2735 cursor: text;
2736 }
2737
2738 .block-library-poster-image__container {
2739 position: relative;
2740 }
2741 .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 {
2742 opacity: 1;
2743 }
2744 .block-library-poster-image__container .block-library-poster-image__actions.block-library-poster-image__actions-select {
2745 opacity: 1;
2746 margin-top: 16px;
2747 }
2748 .block-library-poster-image__container .components-drop-zone__content {
2749 border-radius: 2px;
2750 }
2751 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner {
2752 display: flex;
2753 align-items: center;
2754 gap: 8px;
2755 }
2756 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
2757 margin: 0;
2758 }
2759 .block-library-poster-image__container .components-spinner {
2760 position: absolute;
2761 top: 50%;
2762 left: 50%;
2763 margin-top: -9px;
2764 margin-left: -9px;
2765 }
2766
2767 .block-library-poster-image__preview {
2768 width: 100%;
2769 padding: 0;
2770 overflow: hidden;
2771 outline-offset: -1px;
2772 min-height: 40px;
2773 display: flex;
2774 justify-content: center;
2775 height: auto !important;
2776 outline: 1px solid rgba(0, 0, 0, 0.1);
2777 }
2778 .block-library-poster-image__preview .block-library-poster-image__preview-image {
2779 object-fit: cover;
2780 width: 100%;
2781 object-position: 50% 50%;
2782 aspect-ratio: 2/1;
2783 }
2784
2785 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
2786 bottom: 0;
2787 opacity: 0;
2788 padding: 8px;
2789 position: absolute;
2790 }
2791 @media not (prefers-reduced-motion) {
2792 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
2793 transition: opacity 50ms ease-out;
2794 }
2795 }
2796 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) .block-library-poster-image__action {
2797 backdrop-filter: blur(16px) saturate(180%);
2798 background: rgba(255, 255, 255, 0.75);
2799 }
2800 .block-library-poster-image__actions .block-library-poster-image__action {
2801 flex-grow: 1;
2802 justify-content: center;
2803 }
2804
2805 :root .editor-styles-wrapper .has-very-light-gray-background-color {
2806 background-color: #eee;
2807 }
2808 :root .editor-styles-wrapper .has-very-dark-gray-background-color {
2809 background-color: #313131;
2810 }
2811 :root .editor-styles-wrapper .has-very-light-gray-color {
2812 color: #eee;
2813 }
2814 :root .editor-styles-wrapper .has-very-dark-gray-color {
2815 color: #313131;
2816 }
2817 :root .editor-styles-wrapper {
2818 /* stylelint-disable @stylistic/function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
2819 }
2820 :root .editor-styles-wrapper .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
2821 background: linear-gradient(135deg, rgb(0, 208, 132) 0%, rgb(6, 147, 227) 100%);
2822 }
2823 :root .editor-styles-wrapper .has-purple-crush-gradient-background {
2824 background: linear-gradient(135deg, rgb(52, 226, 228) 0%, rgb(71, 33, 251) 50%, rgb(171, 29, 254) 100%);
2825 }
2826 :root .editor-styles-wrapper .has-hazy-dawn-gradient-background {
2827 background: linear-gradient(135deg, rgb(250, 172, 168) 0%, rgb(218, 208, 236) 100%);
2828 }
2829 :root .editor-styles-wrapper .has-subdued-olive-gradient-background {
2830 background: linear-gradient(135deg, rgb(250, 250, 225) 0%, rgb(103, 166, 113) 100%);
2831 }
2832 :root .editor-styles-wrapper .has-atomic-cream-gradient-background {
2833 background: linear-gradient(135deg, rgb(253, 215, 154) 0%, rgb(0, 74, 89) 100%);
2834 }
2835 :root .editor-styles-wrapper .has-nightshade-gradient-background {
2836 background: linear-gradient(135deg, rgb(51, 9, 104) 0%, rgb(49, 205, 207) 100%);
2837 }
2838 :root .editor-styles-wrapper .has-midnight-gradient-background {
2839 background: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
2840 }
2841 :root .editor-styles-wrapper {
2842 /* stylelint-enable @stylistic/function-comma-space-after */
2843 }
2844
2845 :where(.editor-styles-wrapper) .has-regular-font-size {
2846 font-size: 16px;
2847 }
2848
2849 :where(.editor-styles-wrapper) .has-larger-font-size {
2850 font-size: 42px;
2851 }
2852
2853 /**
2854 * Editor Normalization Styles
2855 *
2856 * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
2857 * This allows us to create normalization styles that are easily overridden by editor styles.
2858 */
2859 :where(.editor-styles-wrapper) iframe:not([frameborder]) {
2860 border: 0;
2861 }