PluginProbe
Gutenberg / 23.6.2
Gutenberg v23.6.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.6.2, at build/styles/block-library/editor.css

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