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

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