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

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

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