PluginProbe
Gutenberg / 23.5.3
Gutenberg v23.5.3
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.5.3, at build/styles/block-library/editor-rtl.css

2,848 lines 73.7 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 .block-editor-template-part__selection-modal {
2369 z-index: 1000001;
2370 }
2371 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2372 -moz-column-count: 2;
2373 column-count: 2;
2374 -moz-column-gap: 24px;
2375 column-gap: 24px;
2376 }
2377 @media (min-width: 1280px) {
2378 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2379 -moz-column-count: 3;
2380 column-count: 3;
2381 }
2382 }
2383 .block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2384 -moz-column-break-inside: avoid;
2385 break-inside: avoid-column;
2386 }
2387
2388 .block-library-template-part__selection-search {
2389 background: #fff;
2390 position: sticky;
2391 top: 0;
2392 padding: 16px 0;
2393 z-index: 2;
2394 }
2395
2396 .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,
2397 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after,
2398 .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after {
2399 outline-color: var(--wp-block-synced-color);
2400 }
2401 .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
2402 .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
2403 outline-color: var(--wp-block-synced-color);
2404 }
2405
2406 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
2407 border: none;
2408 }
2409
2410 .wp-block-term-template .term-loading .term-loading-placeholder {
2411 width: 100%;
2412 height: 1.5em;
2413 margin-bottom: 0.25em;
2414 background-color: #f0f0f0;
2415 border-radius: 2px;
2416 }
2417 @media not (prefers-reduced-motion) {
2418 .wp-block-term-template .term-loading .term-loading-placeholder {
2419 animation: loadingpulse 1.5s ease-in-out infinite;
2420 }
2421 }
2422
2423 @keyframes loadingpulse {
2424 0% {
2425 opacity: 1;
2426 }
2427 50% {
2428 opacity: 0.5;
2429 }
2430 100% {
2431 opacity: 1;
2432 }
2433 }
2434 .wp-block-text-columns .block-editor-rich-text__editable:focus {
2435 outline: 1px solid #ddd;
2436 }
2437
2438 .wp-block[data-align=center] > .wp-block-video {
2439 text-align: center;
2440 }
2441
2442 .wp-block-video {
2443 position: relative;
2444 }
2445 .wp-block-video.is-transient video {
2446 opacity: 0.3;
2447 }
2448 .wp-block-video .components-spinner {
2449 position: absolute;
2450 top: 50%;
2451 right: 50%;
2452 margin-top: -9px;
2453 margin-right: -9px;
2454 }
2455
2456 .block-library-video-tracks-editor {
2457 z-index: 159990;
2458 }
2459
2460 .modal-open .block-library-video-tracks-editor {
2461 z-index: 99999;
2462 }
2463
2464 .block-library-video-tracks-editor__track-list-track {
2465 padding-right: 12px;
2466 }
2467
2468 .block-library-video-tracks-editor__single-track-editor-kind-select {
2469 max-width: 240px;
2470 }
2471
2472 .block-library-video-tracks-editor__tracks-informative-message-title,
2473 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
2474 margin-top: 4px;
2475 color: #757575;
2476 text-transform: uppercase;
2477 font-size: 11px;
2478 font-weight: 499;
2479 display: block;
2480 }
2481
2482 .block-library-video-tracks-editor > .components-popover__content {
2483 width: 360px;
2484 }
2485
2486 .block-library-video-tracks-editor__track-list .components-menu-group__label,
2487 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
2488 padding: 0;
2489 }
2490
2491 .block-library-video-tracks-editor__tracks-informative-message {
2492 padding: 8px;
2493 }
2494 .block-library-video-tracks-editor__tracks-informative-message-description {
2495 margin-bottom: 0;
2496 }
2497
2498 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2499 -moz-column-count: 2;
2500 column-count: 2;
2501 -moz-column-gap: 24px;
2502 column-gap: 24px;
2503 }
2504 @media (min-width: 1280px) {
2505 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2506 -moz-column-count: 3;
2507 column-count: 3;
2508 }
2509 }
2510 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2511 -moz-column-break-inside: avoid;
2512 break-inside: avoid-column;
2513 }
2514 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
2515 background: #fff;
2516 position: sticky;
2517 top: 0;
2518 padding: 16px 0;
2519 transform: translateY(-4px);
2520 margin-bottom: -4px;
2521 z-index: 2;
2522 }
2523
2524 @media (min-width: 600px) {
2525 .wp-block-query__enhanced-pagination-modal {
2526 max-width: 480px;
2527 }
2528 }
2529
2530 .block-editor-block-settings-menu__popover.is-expanded {
2531 overflow-y: scroll;
2532 }
2533 .block-editor-block-settings-menu__popover .block-library-query-pattern__selection-content {
2534 height: 100%;
2535 }
2536 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2537 display: grid;
2538 grid-template-columns: 1fr;
2539 }
2540 @media (min-width: 600px) {
2541 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2542 grid-template-columns: 1fr 1fr;
2543 }
2544 }
2545 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2546 grid-gap: 12px;
2547 min-width: 280px;
2548 }
2549 @media (min-width: 600px) {
2550 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2551 min-width: 480px;
2552 }
2553 }
2554 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list__list-item {
2555 margin-bottom: 0;
2556 }
2557
2558 .wp-block-query > .block-editor-media-placeholder.is-small {
2559 min-height: 60px;
2560 }
2561
2562 .wp-block[data-align=center] > .wp-block-query-pagination {
2563 justify-content: center;
2564 }
2565
2566 :where(.editor-styles-wrapper) .wp-block-query-pagination {
2567 max-width: 100%;
2568 }
2569 :where(.editor-styles-wrapper) .wp-block-query-pagination.block-editor-block-list__layout {
2570 margin: 0;
2571 }
2572
2573 .wp-block-query-pagination-numbers a {
2574 text-decoration: underline;
2575 }
2576 .wp-block-query-pagination-numbers .page-numbers {
2577 margin-left: 2px;
2578 }
2579 .wp-block-query-pagination-numbers .page-numbers:last-child {
2580 margin-right: 0;
2581 }
2582
2583 .wp-block-post-featured-image .block-editor-media-placeholder {
2584 z-index: 1;
2585 backdrop-filter: none;
2586 }
2587 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2588 .wp-block-post-featured-image .components-placeholder {
2589 justify-content: center;
2590 align-items: center;
2591 padding: 0;
2592 display: flex;
2593 }
2594 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload,
2595 .wp-block-post-featured-image .components-placeholder .components-form-file-upload {
2596 display: none;
2597 }
2598 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button,
2599 .wp-block-post-featured-image .components-placeholder .components-button {
2600 margin: auto;
2601 padding: 0;
2602 display: flex;
2603 justify-content: center;
2604 align-items: center;
2605 width: 48px;
2606 height: 48px;
2607 border-radius: 50%;
2608 position: relative;
2609 background: var(--wp-admin-theme-color);
2610 border-color: var(--wp-admin-theme-color);
2611 border-style: solid;
2612 color: #fff;
2613 }
2614 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button > svg,
2615 .wp-block-post-featured-image .components-placeholder .components-button > svg {
2616 color: inherit;
2617 }
2618 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
2619 .wp-block-post-featured-image .components-placeholder {
2620 min-height: 200px;
2621 }
2622 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),
2623 .wp-block-post-featured-image .components-placeholder:where(.has-border-color),
2624 .wp-block-post-featured-image img:where(.has-border-color) {
2625 border-style: solid;
2626 }
2627 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),
2628 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),
2629 .wp-block-post-featured-image img:where([style*=border-top-color]) {
2630 border-top-style: solid;
2631 }
2632 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),
2633 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),
2634 .wp-block-post-featured-image img:where([style*=border-right-color]) {
2635 border-left-style: solid;
2636 }
2637 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),
2638 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),
2639 .wp-block-post-featured-image img:where([style*=border-bottom-color]) {
2640 border-bottom-style: solid;
2641 }
2642 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),
2643 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),
2644 .wp-block-post-featured-image img:where([style*=border-left-color]) {
2645 border-right-style: solid;
2646 }
2647 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),
2648 .wp-block-post-featured-image .components-placeholder:where([style*=border-width]),
2649 .wp-block-post-featured-image img:where([style*=border-width]) {
2650 border-style: solid;
2651 }
2652 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),
2653 .wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),
2654 .wp-block-post-featured-image img:where([style*=border-top-width]) {
2655 border-top-style: solid;
2656 }
2657 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),
2658 .wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),
2659 .wp-block-post-featured-image img:where([style*=border-right-width]) {
2660 border-left-style: solid;
2661 }
2662 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),
2663 .wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),
2664 .wp-block-post-featured-image img:where([style*=border-bottom-width]) {
2665 border-bottom-style: solid;
2666 }
2667 .wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),
2668 .wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),
2669 .wp-block-post-featured-image img:where([style*=border-left-width]) {
2670 border-right-style: solid;
2671 }
2672 .wp-block-post-featured-image[style*=height] .components-placeholder {
2673 min-height: 48px;
2674 min-width: 48px;
2675 height: 100%;
2676 width: 100%;
2677 }
2678 .wp-block-post-featured-image > a {
2679 pointer-events: none;
2680 }
2681 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,
2682 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,
2683 .wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label {
2684 opacity: 1;
2685 pointer-events: auto;
2686 }
2687 .wp-block-post-featured-image.is-transient {
2688 position: relative;
2689 }
2690 .wp-block-post-featured-image.is-transient img {
2691 opacity: 0.3;
2692 }
2693 .wp-block-post-featured-image.is-transient .components-spinner {
2694 position: absolute;
2695 top: 50%;
2696 right: 50%;
2697 transform: translate(50%, -50%);
2698 }
2699
2700 div[data-type="core/post-featured-image"] img {
2701 max-width: 100%;
2702 height: auto;
2703 display: block;
2704 }
2705
2706 .wp-block-post-comments-form * {
2707 pointer-events: none;
2708 }
2709 .wp-block-post-comments-form *.block-editor-warning * {
2710 pointer-events: auto;
2711 }
2712
2713 /**
2714 * Element styles for the editor
2715 */
2716 .wp-element-button {
2717 cursor: revert;
2718 }
2719 .wp-element-button[role=textbox] {
2720 cursor: text;
2721 }
2722
2723 .block-library-poster-image__container {
2724 position: relative;
2725 }
2726 .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 {
2727 opacity: 1;
2728 }
2729 .block-library-poster-image__container .block-library-poster-image__actions.block-library-poster-image__actions-select {
2730 opacity: 1;
2731 margin-top: 16px;
2732 }
2733 .block-library-poster-image__container .components-drop-zone__content {
2734 border-radius: 2px;
2735 }
2736 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner {
2737 display: flex;
2738 align-items: center;
2739 gap: 8px;
2740 }
2741 .block-library-poster-image__container .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
2742 margin: 0;
2743 }
2744 .block-library-poster-image__container .components-spinner {
2745 position: absolute;
2746 top: 50%;
2747 right: 50%;
2748 margin-top: -9px;
2749 margin-right: -9px;
2750 }
2751
2752 .block-library-poster-image__preview {
2753 width: 100%;
2754 padding: 0;
2755 overflow: hidden;
2756 outline-offset: -1px;
2757 min-height: 40px;
2758 display: flex;
2759 justify-content: center;
2760 height: auto !important;
2761 outline: 1px solid rgba(0, 0, 0, 0.1);
2762 }
2763 .block-library-poster-image__preview .block-library-poster-image__preview-image {
2764 -o-object-fit: cover;
2765 object-fit: cover;
2766 width: 100%;
2767 -o-object-position: 50% 50%;
2768 object-position: 50% 50%;
2769 aspect-ratio: 2/1;
2770 }
2771
2772 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
2773 bottom: 0;
2774 opacity: 0;
2775 padding: 8px;
2776 position: absolute;
2777 }
2778 @media not (prefers-reduced-motion) {
2779 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {
2780 transition: opacity 50ms ease-out;
2781 }
2782 }
2783 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) .block-library-poster-image__action {
2784 backdrop-filter: blur(16px) saturate(180%);
2785 background: rgba(255, 255, 255, 0.75);
2786 }
2787 .block-library-poster-image__actions .block-library-poster-image__action {
2788 flex-grow: 1;
2789 justify-content: center;
2790 }
2791
2792 :root .editor-styles-wrapper .has-very-light-gray-background-color {
2793 background-color: #eee;
2794 }
2795 :root .editor-styles-wrapper .has-very-dark-gray-background-color {
2796 background-color: #313131;
2797 }
2798 :root .editor-styles-wrapper .has-very-light-gray-color {
2799 color: #eee;
2800 }
2801 :root .editor-styles-wrapper .has-very-dark-gray-color {
2802 color: #313131;
2803 }
2804 :root .editor-styles-wrapper {
2805 /* stylelint-disable @stylistic/function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
2806 }
2807 :root .editor-styles-wrapper .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
2808 background: linear-gradient(-135deg, rgb(0, 208, 132) 0%, rgb(6, 147, 227) 100%);
2809 }
2810 :root .editor-styles-wrapper .has-purple-crush-gradient-background {
2811 background: linear-gradient(-135deg, rgb(52, 226, 228) 0%, rgb(71, 33, 251) 50%, rgb(171, 29, 254) 100%);
2812 }
2813 :root .editor-styles-wrapper .has-hazy-dawn-gradient-background {
2814 background: linear-gradient(-135deg, rgb(250, 172, 168) 0%, rgb(218, 208, 236) 100%);
2815 }
2816 :root .editor-styles-wrapper .has-subdued-olive-gradient-background {
2817 background: linear-gradient(-135deg, rgb(250, 250, 225) 0%, rgb(103, 166, 113) 100%);
2818 }
2819 :root .editor-styles-wrapper .has-atomic-cream-gradient-background {
2820 background: linear-gradient(-135deg, rgb(253, 215, 154) 0%, rgb(0, 74, 89) 100%);
2821 }
2822 :root .editor-styles-wrapper .has-nightshade-gradient-background {
2823 background: linear-gradient(-135deg, rgb(51, 9, 104) 0%, rgb(49, 205, 207) 100%);
2824 }
2825 :root .editor-styles-wrapper .has-midnight-gradient-background {
2826 background: linear-gradient(-135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
2827 }
2828 :root .editor-styles-wrapper {
2829 /* stylelint-enable @stylistic/function-comma-space-after */
2830 }
2831
2832 :where(.editor-styles-wrapper) .has-regular-font-size {
2833 font-size: 16px;
2834 }
2835
2836 :where(.editor-styles-wrapper) .has-larger-font-size {
2837 font-size: 42px;
2838 }
2839
2840 /**
2841 * Editor Normalization Styles
2842 *
2843 * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
2844 * This allows us to create normalization styles that are easily overridden by editor styles.
2845 */
2846 :where(.editor-styles-wrapper) iframe:not([frameborder]) {
2847 border: 0;
2848 }