PluginProbe
Gutenberg / 23.7.2
Gutenberg v23.7.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.css

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

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