PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
gutenberg / build / styles / block-library / editor-rtl.css

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

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