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

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