PluginProbe
Gutenberg / 23.1.1
Gutenberg v23.1.1
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-editor / style.css

style.css in Gutenberg 23.1.1, at build/styles/block-editor/style.css

4,601 lines 132.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Typography
3 */
4 /**
5 * SCSS Variables.
6 *
7 * Please use variables from this sheet to ensure consistency across the UI.
8 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10 */
11 /**
12 * Colors
13 */
14 /**
15 * Fonts & basic variables.
16 */
17 /**
18 * Typography
19 */
20 /**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24 /**
25 * Radius scale.
26 */
27 /**
28 * Elevation scale.
29 */
30 /**
31 * Dimensions.
32 */
33 /**
34 * Mobile specific styles
35 */
36 /**
37 * Editor styles.
38 */
39 /**
40 * Block & Editor UI.
41 */
42 /**
43 * Block paddings.
44 */
45 /**
46 * React Native specific.
47 * These variables do not appear to be used anywhere else.
48 */
49 /**
50 * Breakpoints & Media Queries
51 */
52 /**
53 * Converts a hex value into the rgb equivalent.
54 *
55 * @param {string} hex - the hexadecimal value to convert
56 * @return {string} comma separated rgb values
57 */
58 /**
59 * Long content fade mixin
60 *
61 * Creates a fading overlay to signify that the content is longer
62 * than the space allows.
63 */
64 /**
65 * Breakpoint mixins
66 */
67 /**
68 * Focus styles.
69 */
70 /**
71 * Applies editor left position to the selector passed as argument
72 */
73 /**
74 * Styles that are reused verbatim in a few places
75 */
76 /**
77 * Allows users to opt-out of animations via OS-level preferences.
78 */
79 /**
80 * Reset default styles for JavaScript UI based pages.
81 * This is a WP-admin agnostic reset
82 */
83 /**
84 * Reset the WP Admin page styles for Gutenberg-like pages.
85 */
86 /**
87 * Creates a checkerboard pattern background to indicate transparency.
88 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89 */
90 :root {
91 --wp-block-synced-color: #7a00df;
92 --wp-block-synced-color--rgb: 122, 0, 223;
93 --wp-bound-block-color: var(--wp-block-synced-color);
94 --wp-editor-canvas-background: #ddd;
95 --wp-admin-theme-color: #007cba;
96 --wp-admin-theme-color--rgb: 0, 124, 186;
97 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
98 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
99 --wp-admin-theme-color-darker-20: #005a87;
100 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
101 --wp-admin-border-width-focus: 2px;
102 }
103 @media (min-resolution: 192dpi) {
104 :root {
105 --wp-admin-border-width-focus: 1.5px;
106 }
107 }
108
109 .block-editor-autocompleters__block {
110 white-space: nowrap;
111 }
112 .block-editor-autocompleters__block .block-editor-block-icon {
113 margin-right: 8px;
114 }
115 .block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon {
116 color: inherit !important;
117 }
118
119 .block-editor-global-styles-background-panel__inspector-media-replace-container {
120 position: relative;
121 }
122 .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
123 background-color: #f0f0f0;
124 }
125 .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item {
126 flex-grow: 1;
127 border: 0;
128 }
129 .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
130 display: block;
131 }
132 .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner {
133 height: 100%;
134 }
135 .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
136 display: block;
137 }
138 .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown .block-editor-global-styles-background-panel__dropdown-toggle {
139 height: 40px;
140 }
141
142 .block-editor-global-styles-background-panel__image-tools-panel-item {
143 border: 1px solid #ddd;
144 grid-column: 1/-1;
145 position: relative;
146 }
147 .block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
148 display: none;
149 }
150 .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
151 display: block;
152 }
153 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button {
154 color: #1e1e1e;
155 width: 100%;
156 display: block;
157 }
158 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
159 color: var(--wp-admin-theme-color);
160 }
161 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
162 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
163 }
164 .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
165 height: 100%;
166 position: absolute;
167 z-index: 1;
168 width: 100%;
169 padding: 10px 0 0 0;
170 }
171 .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg {
172 margin: 0;
173 }
174
175 .block-editor-global-styles-background-panel__dropdown-toggle {
176 cursor: var(--wpds-cursor-control, pointer);
177 background: transparent;
178 border: none;
179 height: 100%;
180 width: 100%;
181 padding-left: 12px;
182 padding-right: 32px;
183 }
184
185 .block-editor-global-styles-background-panel__reset {
186 position: absolute;
187 right: 0;
188 top: 8px;
189 margin: auto 8px auto;
190 opacity: 0;
191 }
192 @media not (prefers-reduced-motion) {
193 .block-editor-global-styles-background-panel__reset {
194 transition: opacity 0.1s ease-in-out;
195 }
196 }
197 .block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
198 border-radius: 2px;
199 }
200 .block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:hover {
201 opacity: 1;
202 }
203 @media (hover: none) {
204 .block-editor-global-styles-background-panel__reset {
205 opacity: 1;
206 }
207 }
208
209 .block-editor-global-styles-background-panel__inspector-media-replace-title {
210 word-break: break-all;
211 white-space: normal;
212 text-align: start;
213 }
214
215 .block-editor-global-styles-background-panel__inspector-image-indicator {
216 width: 20px;
217 height: 20px;
218 border-radius: 2px;
219 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
220 background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
221 background-size: cover;
222 outline: 1px solid transparent;
223 }
224
225 .block-editor-global-styles-background-panel__dropdown-content-wrapper {
226 min-width: 260px;
227 overflow-x: hidden;
228 }
229 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
230 background-color: #f0f0f0;
231 width: 100%;
232 border-radius: 2px;
233 border: 1px solid #ddd;
234 }
235 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image {
236 max-height: 180px;
237 }
238 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker::after {
239 content: none;
240 }
241
242 .modal-open .block-editor-global-styles-background-panel__popover {
243 z-index: 159890;
244 }
245
246 .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
247 width: 226px;
248 }
249 .block-editor-global-styles-background-panel__media-replace-popover .components-button {
250 padding: 0 8px;
251 }
252 .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
253 margin-left: 16px;
254 }
255
256 .block-editor-block-alignment-control__menu-group .components-menu-item__info {
257 margin-top: 0;
258 }
259
260 iframe[name=editor-canvas] {
261 box-sizing: border-box;
262 width: 100%;
263 height: 100%;
264 display: block;
265 }
266 @media not (prefers-reduced-motion) {
267 iframe[name=editor-canvas] {
268 transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
269 }
270 }
271 iframe[name=editor-canvas] {
272 background-color: var(--wp-editor-canvas-background);
273 }
274
275 .block-editor-block-icon {
276 display: flex;
277 align-items: center;
278 justify-content: center;
279 width: 24px;
280 height: 24px;
281 }
282 .block-editor-block-icon.has-colors svg {
283 fill: currentColor;
284 }
285 @media (forced-colors: active) {
286 .block-editor-block-icon.has-colors svg {
287 fill: CanvasText;
288 }
289 }
290 .block-editor-block-icon svg {
291 min-width: 20px;
292 min-height: 20px;
293 max-width: 24px;
294 max-height: 24px;
295 }
296
297 .block-editor-block-inspector p:not(.components-base-control__help) {
298 margin-top: 0;
299 }
300 .block-editor-block-inspector h2,
301 .block-editor-block-inspector h3 {
302 font-size: 13px;
303 color: #1e1e1e;
304 margin-bottom: 1.5em;
305 }
306 .block-editor-block-inspector .components-base-control:where(:not(:last-child)),
307 .block-editor-block-inspector .components-radio-control:where(:not(:last-child)),
308 .block-editor-block-inspector .block-editor-html-element-control:where(:not(:last-child)),
309 .block-editor-block-inspector .block-editor-image-size-control:where(:not(:last-child)) {
310 margin-bottom: 16px;
311 }
312 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
313 .block-editor-block-inspector .components-query-controls .components-base-control,
314 .block-editor-block-inspector .components-range-control .components-base-control,
315 .block-editor-block-inspector .block-editor-html-element-control .components-base-control,
316 .block-editor-block-inspector .block-editor-image-size-control .components-base-control {
317 margin-bottom: 0;
318 }
319 .block-editor-block-inspector .components-panel__body {
320 border: none;
321 border-top: 1px solid #e0e0e0;
322 margin-top: -1px;
323 }
324
325 .block-editor-block-inspector__no-blocks,
326 .block-editor-block-inspector__no-block-tools {
327 display: block;
328 font-size: 13px;
329 background: #fff;
330 padding: 32px 16px;
331 text-align: center;
332 }
333
334 .block-editor-block-inspector__no-block-tools {
335 border-top: 1px solid #ddd;
336 }
337
338 .block-editor-block-inspector-edit-contents {
339 margin: 0 16px 16px 16px;
340 }
341 .block-editor-block-inspector-edit-contents .block-editor-block-inspector-edit-contents__button {
342 justify-content: center;
343 }
344
345 /**
346 * Insertion Point.
347 */
348 .block-editor-block-list__insertion-point {
349 position: absolute;
350 top: 0;
351 bottom: 0;
352 left: 0;
353 right: 0;
354 }
355
356 .block-editor-block-list__insertion-point-indicator {
357 position: absolute;
358 background: var(--wp-admin-theme-color);
359 border-radius: 2px;
360 transform-origin: center;
361 opacity: 0;
362 will-change: transform, opacity;
363 }
364 .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
365 top: calc(50% - 2px);
366 height: 4px;
367 width: 100%;
368 }
369 .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
370 top: 0;
371 bottom: 0;
372 left: calc(50% - 2px);
373 width: 4px;
374 }
375
376 .block-editor-block-list__insertion-point-inserter {
377 display: none;
378 position: absolute;
379 will-change: transform;
380 }
381 @media (min-width: 480px) {
382 .block-editor-block-list__insertion-point-inserter {
383 display: flex;
384 }
385 }
386 .block-editor-block-list__insertion-point-inserter {
387 justify-content: center;
388 top: calc(50% - 12px);
389 left: calc(50% - 12px);
390 }
391
392 .block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
393 pointer-events: none;
394 }
395 .block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
396 pointer-events: all;
397 }
398
399 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
400 position: absolute;
401 top: 0;
402 right: 0;
403 line-height: 0;
404 }
405 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
406 display: none;
407 }
408
409 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
410 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
411 background: #1e1e1e;
412 color: #fff;
413 padding: 0;
414 min-width: 24px;
415 height: 24px;
416 }
417 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
418 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
419 color: #fff;
420 background: var(--wp-admin-theme-color);
421 }
422
423 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
424 background: var(--wp-admin-theme-color);
425 }
426 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
427 background: #1e1e1e;
428 }
429
430 @keyframes hide-during-dragging {
431 to {
432 position: fixed;
433 transform: translate(9999px, 9999px);
434 }
435 }
436 .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
437 pointer-events: all;
438 margin-top: 8px;
439 margin-bottom: 8px;
440 border: 1px solid #1e1e1e;
441 border-radius: 2px;
442 overflow: visible;
443 position: static;
444 width: auto;
445 }
446 .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
447 margin-left: calc(48px + 8px);
448 }
449 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
450 margin-left: 0;
451 }
452 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar {
453 overflow: visible;
454 }
455 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group,
456 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
457 border-right-color: #1e1e1e;
458 }
459 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
460 visibility: hidden;
461 }
462 .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover {
463 opacity: 0;
464 }
465 @media not (prefers-reduced-motion) {
466 .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover {
467 animation: hide-during-dragging 1ms linear forwards;
468 }
469 }
470 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
471 position: absolute;
472 left: calc(-48px - 8px - 1px);
473 }
474 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
475 content: "";
476 }
477 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
478 display: none;
479 }
480 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
481 border: 1px solid #1e1e1e;
482 padding-right: 6px;
483 padding-left: 6px;
484 background-color: #fff;
485 }
486 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
487 padding-right: 12px;
488 padding-left: 12px;
489 }
490 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
491 position: relative;
492 left: auto;
493 margin-left: -1px;
494 }
495 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-mover__move-button-container,
496 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar__block-controls .block-editor-block-mover {
497 border-left: 1px solid #1e1e1e;
498 }
499
500 .is-dragging-components-draggable .components-tooltip {
501 display: none;
502 }
503
504 .components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
505 pointer-events: all;
506 position: absolute;
507 transform: translateX(-50%) translateY(-50%);
508 top: 50%;
509 left: 50%;
510 }
511
512 .block-editor-block-tools--is-dragging > .popover-slot {
513 display: none;
514 }
515
516 .block-editor-block-lock-modal {
517 z-index: 1000001;
518 }
519
520 .block-editor-block-lock-modal__options {
521 border: 0;
522 padding: 0;
523 margin: 0;
524 }
525
526 .block-editor-block-lock-modal__options legend {
527 margin-bottom: 16px;
528 padding: 0;
529 }
530
531 .block-editor-block-lock-modal__checklist {
532 list-style: none;
533 padding: 0;
534 margin: 0;
535 }
536
537 .block-editor-block-lock-modal__options-all {
538 padding: 12px 0;
539 }
540 .block-editor-block-lock-modal__options-all .components-checkbox-control__label {
541 font-weight: 600;
542 }
543
544 .block-editor-block-lock-modal__checklist-item {
545 display: flex;
546 justify-content: space-between;
547 align-items: center;
548 gap: 12px;
549 margin-bottom: 0;
550 padding: 12px 0 12px 32px;
551 }
552 .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
553 flex-shrink: 0;
554 margin-right: 12px;
555 fill: #1e1e1e;
556 }
557 .block-editor-block-lock-modal__checklist-item:hover {
558 background-color: #f0f0f0;
559 border-radius: 2px;
560 }
561
562 .block-editor-block-lock-modal__template-lock {
563 border-top: 1px solid #ddd;
564 margin-top: 16px;
565 padding-top: 16px;
566 }
567
568 .block-editor-block-lock-modal__actions {
569 margin-top: 24px;
570 }
571
572 .block-editor-block-lock-toolbar .components-button.has-icon {
573 min-width: 36px !important;
574 }
575
576 .block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
577 margin-left: -6px !important;
578 }
579
580 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
581 border-left: 1px solid #1e1e1e;
582 margin-left: 6px !important;
583 margin-right: -6px;
584 }
585
586 .block-editor-block-allowed-blocks-control:not(:only-child) {
587 margin-top: 16px;
588 }
589
590 .block-editor-block-allowed-blocks-control__button {
591 width: 100%;
592 justify-content: center;
593 }
594
595 .block-editor-block-allowed-blocks-modal {
596 z-index: 1000001;
597 }
598
599 .block-editor-block-allowed-blocks-modal__actions {
600 background-color: #fff;
601 border-top: 1px solid #ddd;
602 bottom: -24px;
603 left: 0;
604 margin: 0 -24px -24px;
605 padding: 16px 24px;
606 position: sticky;
607 z-index: 1;
608 }
609
610 .block-editor-block-breadcrumb {
611 list-style: none;
612 padding: 0;
613 margin: 0;
614 }
615 .block-editor-block-breadcrumb li {
616 display: inline-flex;
617 margin: 0;
618 white-space: nowrap;
619 }
620 .block-editor-block-breadcrumb li .block-editor-block-breadcrumb__separator {
621 fill: currentColor;
622 margin-left: -4px;
623 margin-right: -4px;
624 transform: scaleX(1) /*rtl:scaleX(-1);*/;
625 }
626 .block-editor-block-breadcrumb li:last-child .block-editor-block-breadcrumb__separator {
627 display: none;
628 }
629
630 .block-editor-block-breadcrumb__current {
631 cursor: default;
632 }
633
634 .block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,
635 .block-editor-block-breadcrumb__current {
636 color: #1e1e1e;
637 padding: 0 8px;
638 font-size: inherit;
639 }
640
641 .block-editor-block-card {
642 color: #1e1e1e;
643 padding: 16px;
644 }
645 .block-editor-block-card.is-parent {
646 padding-bottom: 4px;
647 }
648 .block-editor-block-card.is-child {
649 padding-top: 4px;
650 }
651
652 .block-editor-block-card__parent-select-button {
653 padding: 0;
654 align-items: start;
655 text-align: start;
656 height: auto !important;
657 }
658
659 .block-editor-block-card__title {
660 font-weight: 499;
661 display: flex;
662 align-items: center;
663 flex-wrap: wrap;
664 gap: 4px 8px;
665 }
666 .block-editor-block-card__title.block-editor-block-card__title {
667 font-size: 13px;
668 line-height: 1.4;
669 margin: 0;
670 }
671
672 .block-editor-block-card__name {
673 padding: 3px 0;
674 }
675
676 .block-editor-block-card .block-editor-block-icon,
677 .block-editor-block-card__child-indicator-icon {
678 flex: 0 0 24px;
679 margin-left: 0;
680 margin-right: 12px;
681 width: 24px;
682 height: 24px;
683 }
684
685 .block-editor-block-card.is-synced .block-editor-block-icon {
686 color: var(--wp-block-synced-color);
687 }
688
689 /**
690 * Invalid block comparison
691 */
692 .block-editor-block-compare {
693 height: auto;
694 }
695
696 .block-editor-block-compare__wrapper {
697 display: flex;
698 padding-bottom: 16px;
699 }
700 .block-editor-block-compare__wrapper > div {
701 display: flex;
702 justify-content: space-between;
703 flex-direction: column;
704 width: 50%;
705 padding: 0 16px 0 0;
706 min-width: 200px;
707 max-width: 600px;
708 }
709 .block-editor-block-compare__wrapper > div button {
710 float: right;
711 }
712 .block-editor-block-compare__wrapper .block-editor-block-compare__converted {
713 border-left: 1px solid #ddd;
714 padding-left: 15px;
715 padding-right: 0;
716 }
717 .block-editor-block-compare__wrapper .block-editor-block-compare__html {
718 font-family: Menlo, Consolas, monaco, monospace;
719 font-size: 12px;
720 color: #1e1e1e;
721 border-bottom: 1px solid #ddd;
722 padding-bottom: 15px;
723 line-height: 1.7;
724 }
725 .block-editor-block-compare__wrapper .block-editor-block-compare__html span {
726 background-color: #e6ffed;
727 padding-top: 3px;
728 padding-bottom: 3px;
729 }
730 .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__added {
731 background-color: #acf2bd;
732 }
733 .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__removed {
734 background-color: #cc1818;
735 }
736 .block-editor-block-compare__wrapper .block-editor-block-compare__preview {
737 padding: 0;
738 padding-top: 16px;
739 }
740 .block-editor-block-compare__wrapper .block-editor-block-compare__preview p {
741 font-size: 12px;
742 margin-top: 0;
743 }
744 .block-editor-block-compare__wrapper .block-editor-block-compare__action {
745 margin-top: 16px;
746 }
747 .block-editor-block-compare__wrapper .block-editor-block-compare__heading {
748 font-size: 1em;
749 font-weight: 400;
750 margin: 0.67em 0;
751 }
752
753 .block-editor-block-draggable-chip-wrapper {
754 position: absolute;
755 top: -24px;
756 left: 0;
757 }
758
759 .block-editor-block-draggable-chip {
760 background-color: #1e1e1e;
761 border-radius: 2px;
762 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
763 color: #fff;
764 cursor: grabbing;
765 display: inline-flex;
766 height: 48px;
767 padding: 0 13px;
768 position: relative;
769 -webkit-user-select: none;
770 user-select: none;
771 width: max-content;
772 }
773 .block-editor-block-draggable-chip svg {
774 fill: currentColor;
775 }
776 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content {
777 margin: auto;
778 justify-content: flex-start;
779 }
780 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item {
781 margin-right: 6px;
782 }
783 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item:last-child {
784 margin-right: 0;
785 }
786 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content .block-editor-block-icon svg {
787 min-width: 18px;
788 min-height: 18px;
789 }
790 .block-editor-block-draggable-chip .components-flex__item {
791 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
792 font-size: 13px;
793 }
794
795 .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
796 opacity: 0;
797 position: absolute;
798 top: 0;
799 right: 0;
800 left: 0;
801 bottom: 0;
802 display: flex;
803 justify-content: center;
804 align-items: center;
805 background-color: transparent;
806 }
807 @media not (prefers-reduced-motion) {
808 .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
809 transition: all 0.1s linear 0.1s;
810 }
811 }
812 .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled .block-editor-block-draggable-chip__disabled-icon {
813 width: 20px;
814 height: 20px;
815 box-shadow: inset 0 0 0 1.5px #fff;
816 border-radius: 50%;
817 display: inline-block;
818 padding: 0;
819 background: transparent linear-gradient(-45deg, transparent 47.5%, #fff 47.5%, #fff 52.5%, transparent 52.5%);
820 }
821
822 .block-draggable-invalid-drag-token .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
823 background-color: #757575;
824 opacity: 1;
825 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
826 }
827
828 .block-editor-block-manager__no-results {
829 font-style: italic;
830 padding: 24px 0;
831 text-align: center;
832 }
833
834 .block-editor-block-manager__category {
835 margin: 0 0 24px 0;
836 }
837
838 .block-editor-block-manager__category-title {
839 position: sticky;
840 top: -4px;
841 padding: 16px 0;
842 background-color: #fff;
843 z-index: 1;
844 }
845 .block-editor-block-manager__category-title .components-checkbox-control__label {
846 font-weight: 600;
847 }
848
849 .block-editor-block-manager__checklist {
850 margin-top: 0;
851 }
852
853 .block-editor-block-manager__category-title,
854 .block-editor-block-manager__checklist-item {
855 border-bottom: 1px solid #ddd;
856 }
857
858 .block-editor-block-manager__checklist-item {
859 display: flex;
860 justify-content: space-between;
861 align-items: center;
862 margin-bottom: 0;
863 padding: 8px 0 8px 16px;
864 }
865 .components-modal__content .block-editor-block-manager__checklist-item.components-checkbox-control__input-container {
866 margin: 0 8px;
867 }
868 .block-editor-block-manager__checklist-item .block-editor-block-icon {
869 margin-right: 10px;
870 fill: #1e1e1e;
871 }
872
873 .block-editor-block-manager__results {
874 border-top: 1px solid #ddd;
875 }
876
877 .block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
878 border-top-width: 0;
879 }
880
881 .block-editor-block-mover__move-button-container {
882 display: flex;
883 padding: 0;
884 border: none;
885 justify-content: center;
886 }
887 @media (min-width: 600px) {
888 .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
889 flex-direction: column;
890 }
891 .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
892 height: 20px;
893 width: 100%;
894 min-width: 0 !important;
895 }
896 .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
897 height: calc(100% - 4px);
898 }
899 .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
900 top: 3px;
901 flex-shrink: 0;
902 }
903 .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
904 bottom: 3px;
905 flex-shrink: 0;
906 }
907 .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container {
908 width: 48px;
909 }
910 .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container > * {
911 width: 24px;
912 min-width: 0 !important;
913 overflow: hidden;
914 }
915 .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button {
916 padding-left: 0;
917 padding-right: 0;
918 }
919 .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
920 left: 5px;
921 }
922 .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
923 right: 5px;
924 }
925 }
926
927 .block-editor-block-mover__drag-handle {
928 cursor: grab;
929 }
930 @media (min-width: 600px) {
931 .block-editor-block-mover__drag-handle {
932 width: 24px;
933 min-width: 0 !important;
934 overflow: hidden;
935 }
936 .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon.has-icon {
937 padding-left: 0;
938 padding-right: 0;
939 }
940 }
941
942 .components-button.block-editor-block-mover-button {
943 overflow: hidden;
944 }
945 .components-button.block-editor-block-mover-button::before {
946 content: "";
947 position: absolute;
948 display: block;
949 border-radius: 2px;
950 height: 32px;
951 left: 8px;
952 right: 8px;
953 z-index: -1;
954 }
955 @media not (prefers-reduced-motion) {
956 .components-button.block-editor-block-mover-button::before {
957 animation: components-button__appear-animation 0.1s ease;
958 animation-fill-mode: forwards;
959 }
960 }
961 .components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before {
962 box-shadow: none;
963 outline: none;
964 }
965 .components-button.block-editor-block-mover-button:focus-visible::before {
966 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
967 outline: 2px solid transparent;
968 }
969
970 .block-editor-block-navigation__container {
971 min-width: 280px;
972 }
973
974 .block-editor-block-navigation__label {
975 margin: 0 0 12px;
976 color: #757575;
977 text-transform: uppercase;
978 font-size: 11px;
979 font-weight: 499;
980 }
981
982 .block-editor-block-patterns-list__list-item {
983 cursor: var(--wpds-cursor-control, pointer);
984 margin-bottom: 16px;
985 position: relative;
986 }
987 .block-editor-block-patterns-list__list-item.is-placeholder {
988 min-height: 100px;
989 }
990 .block-editor-block-patterns-list__list-item[draggable=true] {
991 cursor: grab;
992 }
993
994 .block-editor-block-patterns-list__item {
995 height: 100%;
996 scroll-margin-top: 24px;
997 scroll-margin-bottom: 56px;
998 outline: 0;
999 }
1000 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
1001 flex-grow: 1;
1002 font-size: 12px;
1003 text-align: left;
1004 }
1005 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
1006 display: flex;
1007 align-items: center;
1008 overflow: hidden;
1009 border-radius: 4px;
1010 }
1011 .block-editor-block-patterns-list__item .block-editor-block-preview__container::after {
1012 outline: 1px solid rgba(0, 0, 0, 0.1);
1013 outline-offset: -1px;
1014 border-radius: 4px;
1015 }
1016 @media not (prefers-reduced-motion) {
1017 .block-editor-block-patterns-list__item .block-editor-block-preview__container::after {
1018 transition: outline 0.1s linear;
1019 }
1020 }
1021 .block-editor-block-patterns-list__item.is-selected .block-editor-block-preview__container::after {
1022 outline-color: #1e1e1e;
1023 outline-width: var(--wp-admin-border-width-focus);
1024 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
1025 }
1026 .block-editor-block-patterns-list__item:hover .block-editor-block-preview__container::after {
1027 outline-color: rgba(0, 0, 0, 0.3);
1028 }
1029 .block-editor-block-patterns-list__item[data-focus-visible] .block-editor-block-preview__container::after {
1030 outline-color: var(--wp-admin-theme-color);
1031 outline-width: var(--wp-admin-border-width-focus);
1032 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
1033 }
1034 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-details:not(:empty) {
1035 align-items: center;
1036 margin-top: 8px;
1037 padding-bottom: 4px;
1038 }
1039 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper {
1040 min-width: 24px;
1041 height: 24px;
1042 }
1043 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1044 fill: var(--wp-block-synced-color);
1045 }
1046
1047 .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1048 border-top: 1px solid #2f2f2f;
1049 padding: 4px;
1050 justify-content: center;
1051 }
1052
1053 .show-icon-labels .block-editor-patterns__grid-pagination-button {
1054 width: auto;
1055 }
1056 .show-icon-labels .block-editor-patterns__grid-pagination-button span {
1057 display: none;
1058 }
1059 .show-icon-labels .block-editor-patterns__grid-pagination-button::before {
1060 content: attr(aria-label);
1061 }
1062
1063 .components-popover.block-editor-block-popover {
1064 z-index: 31;
1065 position: absolute;
1066 margin: 0 !important;
1067 pointer-events: none;
1068 }
1069 .components-popover.block-editor-block-popover .components-popover__content {
1070 margin: 0 !important;
1071 min-width: auto;
1072 width: max-content;
1073 overflow-y: visible;
1074 }
1075 .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
1076 pointer-events: all;
1077 }
1078
1079 .components-popover.block-editor-block-popover__inbetween {
1080 pointer-events: none;
1081 }
1082 .components-popover.block-editor-block-popover__inbetween * {
1083 pointer-events: none;
1084 }
1085 .components-popover.block-editor-block-popover__inbetween .is-with-inserter {
1086 pointer-events: all;
1087 }
1088 .components-popover.block-editor-block-popover__inbetween .is-with-inserter * {
1089 pointer-events: all;
1090 }
1091
1092 .components-popover.block-editor-block-popover__drop-zone * {
1093 pointer-events: none;
1094 }
1095 .components-popover.block-editor-block-popover__drop-zone .block-editor-block-popover__drop-zone-foreground {
1096 position: absolute;
1097 inset: 0;
1098 background-color: var(--wp-admin-theme-color);
1099 border-radius: 2px;
1100 }
1101
1102 .block-editor-block-preview__container {
1103 position: relative;
1104 width: 100%;
1105 overflow: hidden;
1106 }
1107 .block-editor-block-preview__container .block-editor-block-preview__content {
1108 width: 100%;
1109 top: 0;
1110 left: 0;
1111 transform-origin: top left;
1112 text-align: initial;
1113 margin: 0;
1114 overflow: visible;
1115 min-height: auto;
1116 }
1117 .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__insertion-point,
1118 .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender {
1119 display: none;
1120 }
1121
1122 .block-editor-block-preview__container::after {
1123 content: "";
1124 position: absolute;
1125 top: 0;
1126 left: 0;
1127 right: 0;
1128 bottom: 0;
1129 z-index: 1;
1130 }
1131
1132 .block-editor-block-quick-navigation__item {
1133 font-weight: 400;
1134 }
1135
1136 .block-editor-block-rename-modal {
1137 z-index: 1000001;
1138 }
1139
1140 .block-editor-block-styles__preview-panel {
1141 display: none;
1142 z-index: 90;
1143 }
1144 @media (min-width: 782px) {
1145 .block-editor-block-styles__preview-panel {
1146 display: block;
1147 }
1148 }
1149 .block-editor-block-styles__preview-panel .block-editor-block-icon {
1150 display: none;
1151 }
1152
1153 .block-editor-block-styles {
1154 grid-column: 1/-1;
1155 }
1156
1157 .block-editor-block-styles__variants {
1158 display: flex;
1159 flex-wrap: wrap;
1160 justify-content: space-between;
1161 gap: 8px;
1162 }
1163 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
1164 color: #1e1e1e;
1165 box-shadow: inset 0 0 0 1px #ddd;
1166 display: inline-block;
1167 width: calc(50% - 4px);
1168 }
1169 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
1170 color: var(--wp-admin-theme-color);
1171 box-shadow: inset 0 0 0 1px #ddd;
1172 }
1173 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover {
1174 background-color: #1e1e1e;
1175 box-shadow: none;
1176 }
1177 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
1178 color: #fff;
1179 }
1180 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
1181 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1182 outline: 2px solid transparent;
1183 }
1184 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
1185 word-break: break-all;
1186 white-space: normal;
1187 text-align: start;
1188 text-align-last: center;
1189 }
1190
1191 .components-popover.block-editor-block-switcher__popover .components-popover__content {
1192 min-width: 300px;
1193 }
1194
1195 .block-editor-block-switcher__popover-preview-container {
1196 left: 0;
1197 position: absolute;
1198 top: -1px;
1199 width: 100%;
1200 bottom: 0;
1201 pointer-events: none;
1202 }
1203
1204 .block-editor-block-switcher__popover-preview {
1205 overflow: hidden;
1206 }
1207 .block-editor-block-switcher__popover-preview .components-popover__content {
1208 width: 300px;
1209 border: 1px solid #1e1e1e;
1210 background: #fff;
1211 border-radius: 4px;
1212 outline: none;
1213 box-shadow: none;
1214 overflow: auto;
1215 }
1216 .block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview {
1217 max-height: calc(500px - 32px);
1218 margin: 16px 0;
1219 padding: 0 16px;
1220 overflow: hidden;
1221 }
1222 .block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview.is-pattern-list-preview {
1223 overflow: unset;
1224 }
1225
1226 .block-editor-block-switcher__preview-patterns-container {
1227 padding-bottom: 16px;
1228 }
1229 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item {
1230 margin-top: 16px;
1231 }
1232 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container {
1233 cursor: var(--wpds-cursor-control, pointer);
1234 }
1235 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
1236 height: 100%;
1237 border-radius: 2px;
1238 }
1239 @media not (prefers-reduced-motion) {
1240 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
1241 transition: all 0.05s ease-in-out;
1242 }
1243 }
1244 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
1245 position: relative;
1246 border: 1px solid transparent;
1247 }
1248 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover, .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:focus {
1249 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1250 outline: 2px solid transparent;
1251 }
1252 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover {
1253 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
1254 }
1255 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item .block-editor-block-switcher__preview-patterns-container-list__item-title {
1256 padding: 4px;
1257 font-size: 12px;
1258 text-align: center;
1259 cursor: var(--wpds-cursor-control, pointer);
1260 }
1261
1262 .block-editor-block-switcher__no-transforms {
1263 color: #757575;
1264 padding: 6px 8px;
1265 margin: 0;
1266 }
1267
1268 .block-editor-block-switcher__binding-indicator {
1269 display: block;
1270 padding: 8px;
1271 }
1272
1273 .block-editor-block-types-list > [role=presentation] {
1274 overflow: hidden;
1275 display: flex;
1276 flex-wrap: wrap;
1277 }
1278
1279 .block-editor-block-pattern-setup {
1280 display: flex;
1281 flex-direction: column;
1282 justify-content: center;
1283 align-items: flex-start;
1284 width: 100%;
1285 border-radius: 2px;
1286 }
1287 .block-editor-block-pattern-setup.view-mode-grid {
1288 padding-top: 4px;
1289 }
1290 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
1291 justify-content: center;
1292 }
1293 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1294 column-gap: 24px;
1295 display: block;
1296 width: 100%;
1297 padding: 32px;
1298 padding-bottom: 0;
1299 padding-top: 0;
1300 column-count: 2;
1301 }
1302 @media (min-width: 1440px) {
1303 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1304 column-count: 3;
1305 }
1306 }
1307 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
1308 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
1309 cursor: var(--wpds-cursor-control, pointer);
1310 }
1311 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item {
1312 scroll-margin: 5px 0;
1313 }
1314 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
1315 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
1316 }
1317 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-preview__container {
1318 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
1319 outline: 2px solid transparent;
1320 outline-offset: 2px;
1321 }
1322 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
1323 color: var(--wp-admin-theme-color);
1324 }
1325 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
1326 break-inside: avoid-column;
1327 margin-bottom: 24px;
1328 }
1329 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
1330 padding-top: 8px;
1331 font-size: 12px;
1332 text-align: center;
1333 cursor: var(--wpds-cursor-control, pointer);
1334 }
1335 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
1336 min-height: 100px;
1337 border-radius: 4px;
1338 border: 1px solid #ddd;
1339 }
1340 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__content {
1341 width: 100%;
1342 }
1343 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar {
1344 height: 64px;
1345 box-sizing: border-box;
1346 padding: 16px;
1347 width: 100%;
1348 text-align: left;
1349 margin: 0;
1350 color: #1e1e1e;
1351 position: absolute;
1352 bottom: 0;
1353 background-color: #fff;
1354 display: flex;
1355 flex-direction: row;
1356 align-items: center;
1357 justify-content: space-between;
1358 border-top: 1px solid #ddd;
1359 align-self: stretch;
1360 }
1361 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
1362 display: flex;
1363 }
1364 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__navigation,
1365 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
1366 width: calc(50% - 36px);
1367 display: flex;
1368 }
1369 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
1370 justify-content: flex-end;
1371 }
1372 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container {
1373 display: flex;
1374 flex-direction: column;
1375 width: 100%;
1376 height: 100%;
1377 box-sizing: border-box;
1378 }
1379 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
1380 overflow: hidden;
1381 position: relative;
1382 padding: 0;
1383 margin: 0;
1384 height: 100%;
1385 list-style: none;
1386 transform-style: preserve-3d;
1387 }
1388 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container * {
1389 box-sizing: border-box;
1390 }
1391 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
1392 position: absolute;
1393 top: 0;
1394 width: 100%;
1395 height: 100%;
1396 background-color: #fff;
1397 margin: auto;
1398 padding: 0;
1399 }
1400 @media not (prefers-reduced-motion) {
1401 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
1402 transition: transform 0.5s, z-index 0.5s;
1403 }
1404 }
1405 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
1406 z-index: 100;
1407 }
1408 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide {
1409 opacity: 1;
1410 position: relative;
1411 z-index: 102;
1412 }
1413 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.previous-slide {
1414 transform: translateX(-100%);
1415 z-index: 101;
1416 }
1417 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.next-slide {
1418 transform: translateX(100%);
1419 z-index: 101;
1420 }
1421 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .block-list-appender {
1422 display: none;
1423 }
1424
1425 .block-editor-block-pattern-setup__carousel,
1426 .block-editor-block-pattern-setup__grid {
1427 width: 100%;
1428 }
1429
1430 .block-editor-block-variation-transforms {
1431 box-sizing: border-box;
1432 padding: 0 16px 16px;
1433 }
1434 .block-editor-block-variation-transforms:where(fieldset) {
1435 border: 0;
1436 margin: 0;
1437 min-inline-size: 0;
1438 }
1439
1440 .block-editor-block-variation-transforms__button {
1441 width: 100%;
1442 justify-content: center;
1443 }
1444
1445 .components-border-radius-control__header {
1446 height: 16px;
1447 margin-bottom: 12px;
1448 }
1449
1450 .components-border-radius-control {
1451 border: 0;
1452 padding: 0;
1453 margin: 0;
1454 margin-bottom: 12px;
1455 }
1456 .components-border-radius-control legend {
1457 margin-bottom: 0;
1458 }
1459 .components-border-radius-control .components-border-radius-control__linked-button {
1460 display: flex;
1461 justify-content: center;
1462 }
1463 .components-border-radius-control .components-border-radius-control__linked-button svg {
1464 margin-right: 0;
1465 }
1466
1467 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
1468 margin-bottom: 12px;
1469 }
1470
1471 .block-editor-color-gradient-control__fieldset {
1472 border: 0;
1473 padding: 0;
1474 margin: 0;
1475 min-width: 0;
1476 }
1477
1478 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
1479 display: block;
1480 }
1481
1482 @media screen and (min-width: 782px) {
1483 .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
1484 display: grid;
1485 grid-template-columns: repeat(6, 28px);
1486 }
1487 }
1488 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
1489 margin-bottom: inherit;
1490 }
1491
1492 .block-editor-panel-color-gradient-settings__dropdown-content {
1493 min-height: 160px;
1494 }
1495 .block-editor-panel-color-gradient-settings__dropdown-content .block-editor-color-gradient-control__panel {
1496 width: 260px;
1497 padding: 16px;
1498 }
1499
1500 .block-editor-panel-color-gradient-settings__color-indicator {
1501 background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1502 }
1503
1504 /**
1505 * The following styles replicate the separated border of the
1506 * `ItemGroup` component but allows for hidden items. This is because
1507 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
1508 * must at least render a placeholder which would otherwise interfere
1509 * with the `:last-child` styles.
1510 */
1511 .block-editor-tools-panel-color-gradient-settings__item {
1512 padding: 0;
1513 max-width: 100%;
1514 position: relative;
1515 border-left: 1px solid #ddd;
1516 border-right: 1px solid #ddd;
1517 border-bottom: 1px solid #ddd;
1518 }
1519 .block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
1520 margin-top: 24px;
1521 border-top-left-radius: 2px;
1522 border-top-right-radius: 2px;
1523 border-top: 1px solid #ddd;
1524 }
1525 .block-editor-tools-panel-color-gradient-settings__item:nth-last-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
1526 border-bottom-left-radius: 2px;
1527 border-bottom-right-radius: 2px;
1528 }
1529 .block-editor-tools-panel-color-gradient-settings__item > div,
1530 .block-editor-tools-panel-color-gradient-settings__item > div > button {
1531 border-radius: inherit;
1532 }
1533
1534 .block-editor-tools-panel-color-gradient-settings__dropdown {
1535 display: block;
1536 padding: 0;
1537 }
1538 .block-editor-tools-panel-color-gradient-settings__dropdown > button {
1539 height: auto;
1540 padding-top: 10px;
1541 padding-bottom: 10px;
1542 text-align: left;
1543 }
1544 .block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
1545 background: #f0f0f0;
1546 color: var(--wp-admin-theme-color);
1547 }
1548 .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1549 white-space: nowrap;
1550 overflow: hidden;
1551 text-overflow: ellipsis;
1552 max-width: calc(100% - 44px);
1553 }
1554
1555 .block-editor-panel-color-gradient-settings__dropdown {
1556 width: 100%;
1557 }
1558 .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1559 flex-shrink: 0;
1560 }
1561
1562 .block-editor-panel-color-gradient-settings__reset {
1563 position: absolute;
1564 right: 0;
1565 top: 8px;
1566 margin: auto 8px auto;
1567 opacity: 0;
1568 }
1569 @media not (prefers-reduced-motion) {
1570 .block-editor-panel-color-gradient-settings__reset {
1571 transition: opacity 0.1s ease-in-out;
1572 }
1573 }
1574 .block-editor-panel-color-gradient-settings__reset.block-editor-panel-color-gradient-settings__reset {
1575 border-radius: 2px;
1576 }
1577 .block-editor-panel-color-gradient-settings__dropdown:hover + .block-editor-panel-color-gradient-settings__reset, .block-editor-panel-color-gradient-settings__reset:focus, .block-editor-panel-color-gradient-settings__reset:hover {
1578 opacity: 1;
1579 }
1580 @media (hover: none) {
1581 .block-editor-panel-color-gradient-settings__reset {
1582 opacity: 1;
1583 }
1584 }
1585
1586 .block-editor-date-format-picker {
1587 margin: 0 0 16px;
1588 padding: 0;
1589 border: none;
1590 }
1591
1592 .block-editor-date-format-picker__custom-format-select-control__custom-option {
1593 border-top: 1px solid #ddd;
1594 }
1595
1596 .block-editor-duotone-control__popover.components-popover > .components-popover__content {
1597 padding: 8px;
1598 width: 260px;
1599 }
1600 .block-editor-duotone-control__popover.components-popover .components-menu-group__label {
1601 padding: 0;
1602 }
1603 .block-editor-duotone-control__popover.components-popover .components-circular-option-picker__swatches {
1604 display: grid;
1605 grid-template-columns: repeat(6, 28px);
1606 gap: 12px;
1607 justify-content: space-between;
1608 }
1609
1610 .block-editor-duotone-control__unset-indicator {
1611 background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1612 }
1613
1614 .block-editor-fit-text-size-warning {
1615 grid-column: span 2;
1616 }
1617
1618 .components-font-appearance-control [role=option] {
1619 color: #1e1e1e;
1620 text-transform: capitalize;
1621 }
1622
1623 .block-editor-global-styles__toggle-icon {
1624 fill: currentColor;
1625 }
1626
1627 .block-editor-global-styles__shadow-popover-container {
1628 width: 230px;
1629 }
1630
1631 .block-editor-global-styles__shadow__list {
1632 display: flex;
1633 gap: 12px;
1634 flex-wrap: wrap;
1635 padding-bottom: 8px;
1636 }
1637
1638 .block-editor-global-styles__clear-shadow {
1639 text-align: right;
1640 }
1641
1642 .block-editor-global-styles-filters-panel__dropdown,
1643 .block-editor-global-styles__shadow-dropdown {
1644 display: block;
1645 padding: 0;
1646 position: relative;
1647 border: 1px solid #ddd;
1648 border-radius: 2px;
1649 }
1650
1651 .block-editor-global-styles-filters-panel__dropdown-toggle,
1652 .block-editor-global-styles__shadow-dropdown-toggle {
1653 width: 100%;
1654 padding: 8px;
1655 }
1656 .block-editor-global-styles-filters-panel__dropdown-toggle.is-open,
1657 .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1658 background-color: #f0f0f0;
1659 }
1660
1661 .block-editor-global-styles__shadow-editor__remove-button {
1662 position: absolute;
1663 right: 0;
1664 top: 8px;
1665 margin: auto 8px auto;
1666 opacity: 0;
1667 }
1668 @media not (prefers-reduced-motion) {
1669 .block-editor-global-styles__shadow-editor__remove-button {
1670 transition: opacity 0.1s ease-in-out;
1671 }
1672 }
1673 .block-editor-global-styles__shadow-dropdown:hover .block-editor-global-styles__shadow-editor__remove-button, .block-editor-global-styles__shadow-editor__remove-button:focus, .block-editor-global-styles__shadow-editor__remove-button:hover {
1674 opacity: 1;
1675 }
1676 @media (hover: none) {
1677 .block-editor-global-styles__shadow-editor__remove-button {
1678 opacity: 1;
1679 }
1680 }
1681
1682 .block-editor-global-styles__shadow-indicator {
1683 appearance: none;
1684 background: none;
1685 color: #2f2f2f;
1686 border: #e0e0e0 1px solid;
1687 border-radius: 2px;
1688 cursor: var(--wpds-cursor-control, pointer);
1689 display: inline-flex;
1690 align-items: center;
1691 padding: 0;
1692 height: 26px;
1693 width: 26px;
1694 box-sizing: border-box;
1695 transform: scale(1);
1696 }
1697 @media not (prefers-reduced-motion) {
1698 .block-editor-global-styles__shadow-indicator {
1699 transition: transform 0.1s ease;
1700 }
1701 }
1702 .block-editor-global-styles__shadow-indicator {
1703 will-change: transform;
1704 }
1705 .block-editor-global-styles__shadow-indicator:focus {
1706 border: 2px solid #757575;
1707 }
1708 .block-editor-global-styles__shadow-indicator:hover {
1709 transform: scale(1.2);
1710 }
1711 .block-editor-global-styles__shadow-indicator.unset {
1712 background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1713 }
1714
1715 .block-editor-global-styles-advanced-panel__custom-css-input {
1716 margin-bottom: 16px;
1717 }
1718 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
1719 font-family: Menlo, Consolas, monaco, monospace;
1720 /*rtl:ignore*/
1721 direction: ltr;
1722 }
1723
1724 .block-editor-panel-duotone-settings__reset {
1725 position: absolute;
1726 right: 0;
1727 top: 8px;
1728 margin: auto 8px auto;
1729 opacity: 0;
1730 }
1731 @media not (prefers-reduced-motion) {
1732 .block-editor-panel-duotone-settings__reset {
1733 transition: opacity 0.1s ease-in-out;
1734 }
1735 }
1736 .block-editor-global-styles-filters-panel__dropdown:hover .block-editor-panel-duotone-settings__reset, .block-editor-panel-duotone-settings__reset:focus, .block-editor-panel-duotone-settings__reset:hover {
1737 opacity: 1;
1738 }
1739 @media (hover: none) {
1740 .block-editor-panel-duotone-settings__reset {
1741 opacity: 1;
1742 }
1743 }
1744
1745 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1746 z-index: 30;
1747 }
1748 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
1749 pointer-events: none;
1750 }
1751 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
1752 pointer-events: all;
1753 }
1754 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
1755 pointer-events: auto;
1756 }
1757
1758 .block-editor-grid-visualizer__grid {
1759 display: grid;
1760 position: absolute;
1761 }
1762
1763 .block-editor-grid-visualizer__cell {
1764 display: grid;
1765 position: relative;
1766 }
1767 .block-editor-grid-visualizer__cell .block-editor-inserter {
1768 color: inherit;
1769 z-index: 32;
1770 position: absolute;
1771 top: 0;
1772 bottom: 0;
1773 left: 0;
1774 right: 0;
1775 overflow: hidden;
1776 }
1777 .block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
1778 box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
1779 color: inherit;
1780 overflow: hidden;
1781 height: 100%;
1782 width: 100%;
1783 padding: 0 !important;
1784 opacity: 0;
1785 }
1786 .block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
1787 .block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
1788 background: var(--wp-admin-theme-color);
1789 }
1790 .block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
1791 .block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
1792 opacity: 1;
1793 background-color: color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
1794 }
1795
1796 .block-editor-grid-visualizer__drop-zone {
1797 background: rgba(204, 204, 204, 0.1);
1798 width: 100%;
1799 height: 100%;
1800 grid-column: 1;
1801 grid-row: 1;
1802 min-width: 8px;
1803 min-height: 8px;
1804 }
1805
1806 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
1807 z-index: 30;
1808 }
1809 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
1810 pointer-events: none;
1811 }
1812
1813 .block-editor-grid-item-resizer__box {
1814 border: 1px solid var(--wp-admin-theme-color);
1815 }
1816 .block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
1817 pointer-events: all;
1818 }
1819
1820 .block-editor-grid-item-mover__move-button-container {
1821 display: flex;
1822 padding: 0;
1823 border: none;
1824 justify-content: center;
1825 }
1826 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
1827 width: 24px;
1828 min-width: 0 !important;
1829 padding-left: 0;
1830 padding-right: 0;
1831 }
1832 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg {
1833 min-width: 24px;
1834 }
1835 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
1836 content: "";
1837 position: absolute;
1838 display: block;
1839 border-radius: 2px;
1840 height: 32px;
1841 left: 8px;
1842 right: 8px;
1843 z-index: -1;
1844 }
1845 @media not (prefers-reduced-motion) {
1846 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
1847 animation: components-button__appear-animation 0.1s ease;
1848 animation-fill-mode: forwards;
1849 }
1850 }
1851 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus::before {
1852 box-shadow: none;
1853 outline: none;
1854 }
1855 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1856 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1857 outline: 2px solid transparent;
1858 }
1859
1860 .block-editor-grid-item-mover__move-vertical-button-container {
1861 display: flex;
1862 position: relative;
1863 }
1864 @media (min-width: 600px) {
1865 .block-editor-grid-item-mover__move-vertical-button-container {
1866 flex-direction: column;
1867 justify-content: space-around;
1868 }
1869 .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
1870 height: 20px !important;
1871 width: 100%;
1872 min-width: 0 !important;
1873 }
1874 .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button::before {
1875 height: calc(100% - 4px);
1876 }
1877 .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg,
1878 .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
1879 flex-shrink: 0;
1880 height: 20px;
1881 }
1882 }
1883
1884 @media (min-width: 600px) {
1885 .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
1886 height: 40px;
1887 position: relative;
1888 top: -4px;
1889 }
1890 }
1891
1892 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
1893 position: relative;
1894 }
1895 @media (min-width: 600px) {
1896 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
1897 content: "";
1898 height: 100%;
1899 width: 1px;
1900 background: #e0e0e0;
1901 position: absolute;
1902 top: 0;
1903 }
1904 }
1905 @media (min-width: 782px) {
1906 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
1907 background: #1e1e1e;
1908 }
1909 }
1910 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
1911 padding-right: 6px;
1912 }
1913 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
1914 right: 0;
1915 }
1916 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
1917 padding-left: 6px;
1918 }
1919 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
1920 left: 0;
1921 }
1922 @media (min-width: 600px) {
1923 .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
1924 content: "";
1925 height: 1px;
1926 width: 100%;
1927 background: #e0e0e0;
1928 position: absolute;
1929 top: 50%;
1930 left: 50%;
1931 transform: translate(-50%, 0);
1932 margin-top: -0.5px;
1933 }
1934 }
1935 @media (min-width: 782px) {
1936 .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
1937 background: #1e1e1e;
1938 }
1939 }
1940 .show-icon-labels .block-editor-grid-item-mover-button {
1941 white-space: nowrap;
1942 }
1943 .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
1944 height: 24px;
1945 background: #ddd;
1946 top: 4px;
1947 }
1948 .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
1949 background: #ddd;
1950 width: calc(100% - 24px);
1951 }
1952
1953 .block-editor-height-control {
1954 border: 0;
1955 margin: 0;
1956 padding: 0;
1957 }
1958
1959 .block-editor-iframe__container {
1960 width: 100%;
1961 height: 100%;
1962 }
1963
1964 .block-editor-iframe__scale-container {
1965 height: 100%;
1966 }
1967
1968 .block-editor-iframe__scale-container.is-zoomed-out {
1969 width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
1970 position: absolute;
1971 right: 0;
1972 }
1973
1974 .block-editor-block-types-list__list-item {
1975 display: block;
1976 width: 33.33%;
1977 padding: 0;
1978 margin: 0;
1979 }
1980 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled) .block-editor-block-icon.has-colors {
1981 color: var(--wp-block-synced-color);
1982 }
1983 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
1984 color: var(--wp-block-synced-color) !important;
1985 filter: brightness(0.95);
1986 }
1987 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
1988 color: var(--wp-block-synced-color) !important;
1989 }
1990 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled)::after {
1991 background: var(--wp-block-synced-color);
1992 }
1993
1994 .components-button.block-editor-block-types-list__item {
1995 display: flex;
1996 flex-direction: column;
1997 width: 100%;
1998 font-size: 13px;
1999 color: #1e1e1e;
2000 padding: 8px;
2001 align-items: stretch;
2002 justify-content: center;
2003 cursor: var(--wpds-cursor-control, pointer);
2004 background: transparent;
2005 word-break: break-word;
2006 }
2007 @media not (prefers-reduced-motion) {
2008 .components-button.block-editor-block-types-list__item {
2009 transition: all 0.05s ease-in-out;
2010 }
2011 }
2012 .components-button.block-editor-block-types-list__item {
2013 position: relative;
2014 height: auto;
2015 }
2016 .components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
2017 opacity: 0.6;
2018 cursor: default;
2019 }
2020 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover .block-editor-block-types-list__item-title {
2021 color: var(--wp-admin-theme-color) !important;
2022 filter: brightness(0.95);
2023 }
2024 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover svg {
2025 color: var(--wp-admin-theme-color) !important;
2026 }
2027 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover::after {
2028 content: "";
2029 position: absolute;
2030 top: 0;
2031 bottom: 0;
2032 left: 0;
2033 right: 0;
2034 border-radius: 2px;
2035 opacity: 0.04;
2036 background: var(--wp-admin-theme-color);
2037 pointer-events: none;
2038 }
2039 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2040 color: #fff;
2041 background: #1e1e1e;
2042 outline: 2px solid transparent;
2043 outline-offset: -2px;
2044 }
2045 .components-button.block-editor-block-types-list__item:not(:disabled):focus {
2046 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2047 }
2048
2049 .block-editor-block-types-list__item-icon {
2050 padding: 12px 20px;
2051 color: #1e1e1e;
2052 }
2053 @media not (prefers-reduced-motion) {
2054 .block-editor-block-types-list__item-icon {
2055 transition: all 0.05s ease-in-out;
2056 }
2057 }
2058 .block-editor-block-types-list__item-icon .block-editor-block-icon {
2059 margin-left: auto;
2060 margin-right: auto;
2061 }
2062 @media not (prefers-reduced-motion) {
2063 .block-editor-block-types-list__item-icon svg {
2064 transition: all 0.15s ease-out;
2065 }
2066 }
2067 .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2068 cursor: grab;
2069 }
2070
2071 .block-editor-block-types-list__item-title {
2072 padding: 4px 2px 8px;
2073 font-size: 12px;
2074 hyphens: auto;
2075 }
2076
2077 .modal-open .block-editor-inspector-list-view-content-popover {
2078 z-index: 99999;
2079 }
2080
2081 .block-editor-block-inspector__tabs [role=tablist] {
2082 width: 100%;
2083 }
2084
2085 .block-editor-inspector-popover-header {
2086 margin-bottom: 16px;
2087 }
2088
2089 .items-justified-left {
2090 justify-content: flex-start;
2091 }
2092
2093 .items-justified-center {
2094 justify-content: center;
2095 }
2096
2097 .items-justified-right {
2098 justify-content: flex-end;
2099 }
2100
2101 .items-justified-space-between {
2102 justify-content: space-between;
2103 }
2104
2105 @keyframes loadingpulse {
2106 0% {
2107 opacity: 1;
2108 }
2109 50% {
2110 opacity: 0;
2111 }
2112 100% {
2113 opacity: 1;
2114 }
2115 }
2116 .block-editor-link-control {
2117 position: relative;
2118 min-width: 350px;
2119 }
2120 .components-popover__content .block-editor-link-control {
2121 min-width: auto;
2122 width: 90vw;
2123 max-width: 350px;
2124 }
2125 .show-icon-labels .block-editor-link-control .components-button.has-icon svg {
2126 display: none;
2127 }
2128 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
2129 content: attr(aria-label);
2130 }
2131 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview {
2132 gap: 4px;
2133 flex-wrap: wrap;
2134 }
2135 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .components-button.has-icon {
2136 width: auto;
2137 padding: 4px;
2138 }
2139 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .block-editor-link-control_link-information {
2140 min-width: 100%;
2141 margin-right: 0;
2142 }
2143
2144 .block-editor-link-control__search-input-wrapper {
2145 margin-bottom: 8px;
2146 position: relative;
2147 }
2148
2149 .block-editor-link-control__help {
2150 padding: 0 16px;
2151 margin-top: -8px;
2152 margin-bottom: 0;
2153 font-size: 12px;
2154 font-style: normal;
2155 color: #757575;
2156 }
2157
2158 .block-editor-link-control__search-input-container,
2159 .block-editor-link-control__search-input-wrapper {
2160 position: relative;
2161 }
2162
2163 .block-editor-link-control__field {
2164 margin: 16px;
2165 }
2166 .block-editor-link-control__field .components-base-control__label {
2167 color: #1e1e1e;
2168 }
2169
2170 .block-editor-link-control__search-error {
2171 margin: -8px 16px 16px;
2172 }
2173
2174 .block-editor-link-control__search-actions {
2175 padding: 8px 16px 16px;
2176 }
2177
2178 .block-editor-link-control__search-results-wrapper {
2179 position: relative;
2180 }
2181 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
2182 content: "";
2183 position: absolute;
2184 left: -1px;
2185 right: 16px;
2186 display: block;
2187 pointer-events: none;
2188 z-index: 100;
2189 }
2190 .block-editor-link-control__search-results-wrapper::before {
2191 height: 8px;
2192 top: 0;
2193 bottom: auto;
2194 }
2195 .block-editor-link-control__search-results-wrapper::after {
2196 height: 16px;
2197 bottom: 0;
2198 top: auto;
2199 }
2200
2201 .block-editor-link-control__search-results {
2202 margin-top: -16px;
2203 padding: 8px;
2204 max-height: 200px;
2205 overflow-y: auto;
2206 }
2207 .block-editor-link-control__search-results.is-loading {
2208 opacity: 0.2;
2209 }
2210
2211 .block-editor-link-control__search-item.components-button.components-menu-item__button {
2212 height: auto;
2213 text-align: left;
2214 }
2215 .block-editor-link-control__search-item .components-menu-item__item {
2216 overflow: hidden;
2217 text-overflow: ellipsis;
2218 display: inline-block;
2219 width: 100%;
2220 }
2221 .block-editor-link-control__search-item .components-menu-item__item mark {
2222 font-weight: 600;
2223 color: inherit;
2224 background-color: transparent;
2225 }
2226 .block-editor-link-control__search-item .components-menu-item__shortcut {
2227 color: #757575;
2228 white-space: nowrap;
2229 }
2230 .block-editor-link-control__search-item[aria-selected] {
2231 background: #f0f0f0;
2232 }
2233
2234 .block-editor-link-control__preview {
2235 background: transparent;
2236 border: 0;
2237 padding: 16px;
2238 }
2239 .block-editor-link-control__preview .block-editor-link-control__link-information {
2240 margin-right: 8px;
2241 white-space: pre-wrap;
2242 overflow-wrap: break-word;
2243 }
2244 .block-editor-link-control__preview .block-editor-link-control__link-information .block-editor-link-control__preview-info {
2245 color: #757575;
2246 line-height: 1.1;
2247 font-size: 12px;
2248 word-break: break-all;
2249 }
2250 .block-editor-link-control__preview.is-url-title .block-editor-link-control__preview-title {
2251 word-break: break-all;
2252 }
2253 .block-editor-link-control__preview .block-editor-link-control__preview-image,
2254 .block-editor-link-control__preview .block-editor-link-control__preview-icon {
2255 position: relative;
2256 flex-shrink: 0;
2257 background-color: #f0f0f0;
2258 width: 32px;
2259 height: 32px;
2260 border-radius: 2px;
2261 }
2262 .block-editor-link-control__preview .block-editor-link-control__preview-icon img {
2263 width: 16px;
2264 }
2265 .block-editor-link-control__preview.is-error .block-editor-link-control__preview-icon {
2266 top: 0;
2267 width: 32px;
2268 max-height: 32px;
2269 }
2270 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2271 line-height: 1.1;
2272 }
2273 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2274 box-shadow: none;
2275 }
2276 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus-visible {
2277 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2278 outline: 2px solid transparent;
2279 text-decoration: none;
2280 }
2281 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2282 font-weight: 600;
2283 color: inherit;
2284 background-color: transparent;
2285 }
2286 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2287 font-weight: normal;
2288 }
2289 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2290 position: absolute;
2291 width: 1px;
2292 height: 1px;
2293 padding: 0;
2294 margin: -1px;
2295 overflow: hidden;
2296 clip: rect(0, 0, 0, 0);
2297 border: 0;
2298 }
2299
2300 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
2301 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon img {
2302 opacity: 0;
2303 }
2304 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2305 content: "";
2306 display: block;
2307 background-color: #f0f0f0;
2308 position: absolute;
2309 top: 0;
2310 left: 0;
2311 right: 0;
2312 bottom: 0;
2313 border-radius: 100%;
2314 }
2315 @media not (prefers-reduced-motion) {
2316 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2317 animation: loadingpulse 1s linear infinite;
2318 animation-delay: 0.5s;
2319 }
2320 }
2321
2322 .block-editor-link-control__loading {
2323 margin: 16px;
2324 display: flex;
2325 align-items: center;
2326 }
2327 .block-editor-link-control__loading .components-spinner {
2328 margin-top: 0;
2329 }
2330
2331 .components-button + .block-editor-link-control__search-create {
2332 overflow: visible;
2333 padding: 12px 16px;
2334 }
2335 .components-button + .block-editor-link-control__search-create::before {
2336 content: "";
2337 position: absolute;
2338 top: -10px;
2339 left: 0;
2340 display: block;
2341 width: 100%;
2342 }
2343
2344 .block-editor-link-control__search-create {
2345 align-items: center;
2346 }
2347 .block-editor-link-control__search-create .block-editor-link-control__preview-title {
2348 margin-bottom: 0;
2349 }
2350 .block-editor-link-control__search-create .block-editor-link-control__search-item-icon {
2351 top: 0;
2352 }
2353
2354 .block-editor-link-control__drawer-inner {
2355 display: flex;
2356 flex-direction: column;
2357 flex-basis: 100%;
2358 position: relative;
2359 }
2360
2361 .block-editor-link-control__settings {
2362 border: 0;
2363 padding: 0;
2364 margin: 0;
2365 }
2366
2367 .block-editor-link-control__setting {
2368 margin-bottom: 0;
2369 flex: 1;
2370 padding: 8px 24px;
2371 }
2372 .block-editor-link-control__setting .components-base-control:not(.components-input-control) .components-base-control__field {
2373 display: flex;
2374 }
2375 .block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
2376 color: #1e1e1e;
2377 }
2378 .block-editor-link-control__setting input {
2379 margin-left: 0;
2380 }
2381 .is-preview .block-editor-link-control__setting {
2382 padding: 20px 8px 8px 0;
2383 }
2384
2385 .block-editor-link-control__tools {
2386 padding: 8px 8px 0 8px;
2387 margin-top: -16px;
2388 }
2389 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
2390 padding-left: 0;
2391 gap: 0;
2392 }
2393 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] {
2394 color: #1e1e1e;
2395 }
2396 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2397 visibility: visible;
2398 }
2399 @media not (prefers-reduced-motion) {
2400 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2401 transition: transform 0.1s ease;
2402 }
2403 }
2404 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2405 transform: rotate(90deg);
2406 }
2407 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2408 visibility: visible;
2409 transform: rotate(0deg);
2410 }
2411 @media not (prefers-reduced-motion) {
2412 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2413 transition: transform 0.1s ease;
2414 }
2415 }
2416
2417 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
2418 display: block;
2419 }
2420 .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner {
2421 position: absolute;
2422 left: auto;
2423 bottom: auto;
2424 top: calc(50% - 16px / 2);
2425 right: 40px;
2426 }
2427
2428 .block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
2429 top: calc(50% + 16px / 4);
2430 right: 12px;
2431 }
2432
2433 /**
2434 * Link Picker Styles
2435 */
2436 .link-preview-button.components-button {
2437 width: 100%;
2438 height: auto;
2439 padding: 12px;
2440 box-shadow: inset 0 0 0 1px #949494;
2441 border-color: #949494;
2442 }
2443
2444 .link-preview-button__image-container {
2445 width: 24px;
2446 height: 24px;
2447 flex-shrink: 0;
2448 }
2449
2450 .link-preview-button__image {
2451 width: 100%;
2452 height: 100%;
2453 object-fit: cover;
2454 border-radius: 2px;
2455 }
2456
2457 .link-preview-button__content {
2458 min-width: 0;
2459 flex: 1;
2460 }
2461
2462 .link-preview-button__details {
2463 min-width: 0;
2464 flex: 1;
2465 }
2466
2467 .link-preview-button__title,
2468 .link-preview-button__hint {
2469 min-width: 0;
2470 display: block;
2471 width: 100%;
2472 text-align: left;
2473 overflow: hidden;
2474 text-overflow: ellipsis;
2475 white-space: nowrap;
2476 }
2477
2478 .link-preview-button__title {
2479 margin-top: 4px;
2480 font-weight: 500;
2481 color: #1e1e1e;
2482 display: block;
2483 }
2484
2485 .link-preview-button__hint {
2486 font-size: 12px;
2487 color: #757575;
2488 font-weight: 400;
2489 }
2490
2491 .link-preview-button__icon {
2492 color: #1e1e1e;
2493 }
2494
2495 .link-preview-button__badges {
2496 margin-top: 8px;
2497 }
2498
2499 .block-editor-list-view-tree {
2500 width: 100%;
2501 border-collapse: collapse;
2502 padding: 0;
2503 margin: 0;
2504 }
2505 .components-modal__content .block-editor-list-view-tree {
2506 margin: -12px -6px 0;
2507 width: calc(100% + 12px);
2508 }
2509 .block-editor-list-view-tree.is-dragging tbody {
2510 pointer-events: none;
2511 }
2512
2513 .block-editor-list-view-leaf {
2514 position: relative;
2515 transform: translateY(0);
2516 }
2517 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2518 cursor: grab;
2519 }
2520 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
2521 color: inherit;
2522 }
2523 .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
2524 color: var(--wp-admin-theme-color);
2525 }
2526 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2527 fill: currentColor;
2528 }
2529 @media (forced-colors: active) {
2530 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2531 fill: CanvasText;
2532 }
2533 }
2534 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2535 color: inherit;
2536 }
2537 .block-editor-list-view-leaf.is-selected td {
2538 background: var(--wp-admin-theme-color);
2539 }
2540 .block-editor-list-view-leaf.is-selected.is-synced td {
2541 background: var(--wp-block-synced-color);
2542 }
2543 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus,
2544 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2545 color: var(--wp-block-synced-color);
2546 }
2547 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2548 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2549 }
2550 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2551 color: #fff;
2552 }
2553 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2554 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2555 }
2556 .block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2557 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2558 }
2559 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2560 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2561 }
2562 .block-editor-list-view-leaf.is-first-selected td:first-child {
2563 border-top-left-radius: 2px;
2564 }
2565 .block-editor-list-view-leaf.is-first-selected td:last-child {
2566 border-top-right-radius: 2px;
2567 }
2568 .block-editor-list-view-leaf.is-last-selected td:first-child {
2569 border-bottom-left-radius: 2px;
2570 }
2571 .block-editor-list-view-leaf.is-last-selected td:last-child {
2572 border-bottom-right-radius: 2px;
2573 }
2574 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
2575 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2576 }
2577 .block-editor-list-view-leaf.is-synced-branch.is-branch-selected {
2578 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
2579 }
2580 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
2581 border-top-left-radius: 2px;
2582 }
2583 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
2584 border-top-right-radius: 2px;
2585 }
2586 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:first-child {
2587 border-top-left-radius: 2px;
2588 }
2589 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:last-child {
2590 border-top-right-radius: 2px;
2591 }
2592 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:first-child {
2593 border-bottom-left-radius: 2px;
2594 }
2595 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:last-child {
2596 border-bottom-right-radius: 2px;
2597 }
2598 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
2599 border-radius: 0;
2600 }
2601 @media not (prefers-reduced-motion) {
2602 .block-editor-list-view-leaf.is-displacement-normal {
2603 transition: transform 0.2s;
2604 }
2605 }
2606 .block-editor-list-view-leaf.is-displacement-normal {
2607 transform: translateY(0);
2608 }
2609 @media not (prefers-reduced-motion) {
2610 .block-editor-list-view-leaf.is-displacement-up {
2611 transition: transform 0.2s;
2612 }
2613 }
2614 .block-editor-list-view-leaf.is-displacement-up {
2615 transform: translateY(-32px);
2616 }
2617 @media not (prefers-reduced-motion) {
2618 .block-editor-list-view-leaf.is-displacement-down {
2619 transition: transform 0.2s;
2620 }
2621 }
2622 .block-editor-list-view-leaf.is-displacement-down {
2623 transform: translateY(32px);
2624 }
2625 @media not (prefers-reduced-motion) {
2626 .block-editor-list-view-leaf.is-after-dragged-blocks {
2627 transition: transform 0.2s;
2628 }
2629 }
2630 .block-editor-list-view-leaf.is-after-dragged-blocks {
2631 transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2632 }
2633 @media not (prefers-reduced-motion) {
2634 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2635 transition: transform 0.2s;
2636 }
2637 }
2638 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2639 transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2640 }
2641 @media not (prefers-reduced-motion) {
2642 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2643 transition: transform 0.2s;
2644 }
2645 }
2646 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2647 transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2648 }
2649 .block-editor-list-view-leaf.is-dragging {
2650 opacity: 0;
2651 left: 0;
2652 pointer-events: none;
2653 z-index: -9999;
2654 }
2655 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2656 display: flex;
2657 align-items: center;
2658 width: 100%;
2659 height: 32px;
2660 padding: 6px 4px 6px 0;
2661 text-align: left;
2662 position: relative;
2663 white-space: nowrap;
2664 border-radius: 2px;
2665 box-sizing: border-box;
2666 color: inherit;
2667 font-family: inherit;
2668 font-size: 13px;
2669 font-weight: 400;
2670 margin: 0;
2671 text-decoration: none;
2672 }
2673 @media not (prefers-reduced-motion) {
2674 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2675 transition: box-shadow 0.1s linear;
2676 }
2677 }
2678 .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2679 padding-left: 0;
2680 padding-right: 0;
2681 }
2682 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2683 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2684 box-shadow: none;
2685 }
2686 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2687 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2688 content: "";
2689 position: absolute;
2690 top: 0;
2691 right: -29px;
2692 bottom: 0;
2693 left: 0;
2694 border-radius: inherit;
2695 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2696 z-index: 2;
2697 pointer-events: none;
2698 }
2699 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2700 right: 0;
2701 }
2702 .block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2703 .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2704 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2705 z-index: 1;
2706 }
2707 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2708 opacity: 1;
2709 }
2710 @keyframes __wp-base-styles-fade-in {
2711 from {
2712 opacity: 0;
2713 }
2714 to {
2715 opacity: 1;
2716 }
2717 }
2718 @media not (prefers-reduced-motion) {
2719 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2720 animation: __wp-base-styles-fade-in 0.08s linear 0s;
2721 animation-fill-mode: forwards;
2722 }
2723 }
2724 .block-editor-list-view-leaf .block-editor-block-icon {
2725 margin-right: 4px;
2726 flex: 0 0 24px;
2727 }
2728 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
2729 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
2730 .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
2731 padding: 0;
2732 }
2733 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
2734 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
2735 line-height: 0;
2736 width: 28px;
2737 vertical-align: middle;
2738 }
2739 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
2740 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
2741 opacity: 0;
2742 }
2743 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:focus-within > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
2744 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
2745 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:focus-within > *,
2746 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
2747 opacity: 1;
2748 }
2749 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper {
2750 display: flex;
2751 height: 100%;
2752 flex-direction: column;
2753 align-items: center;
2754 }
2755 .block-editor-list-view-leaf .block-editor-block-mover-button {
2756 position: relative;
2757 width: 36px;
2758 height: 24px;
2759 }
2760 .block-editor-list-view-leaf .block-editor-block-mover-button svg {
2761 position: relative;
2762 height: 24px;
2763 }
2764 .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button {
2765 margin-top: -6px;
2766 align-items: flex-end;
2767 }
2768 .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button svg {
2769 bottom: -4px;
2770 }
2771 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button {
2772 margin-bottom: -6px;
2773 align-items: flex-start;
2774 }
2775 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2776 top: -4px;
2777 }
2778 .block-editor-list-view-leaf .block-editor-block-mover-button::before {
2779 height: 16px;
2780 min-width: 100%;
2781 left: 0;
2782 right: 0;
2783 }
2784 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2785 background: #1e1e1e;
2786 color: #fff;
2787 height: 24px;
2788 margin: 6px 6px 6px 1px;
2789 min-width: 24px;
2790 }
2791 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2792 color: #fff;
2793 }
2794 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2795 left: 2px;
2796 position: relative;
2797 }
2798 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
2799 flex: 1;
2800 position: relative;
2801 }
2802 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
2803 position: absolute;
2804 width: 100%;
2805 transform: translateY(-50%);
2806 }
2807 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
2808 position: relative;
2809 max-width: min(110px, 40%);
2810 width: 100%;
2811 }
2812 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2813 position: absolute;
2814 right: 0;
2815 transform: translateY(-50%);
2816 }
2817 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2818 background: rgba(0, 0, 0, 0.3);
2819 color: #fff;
2820 }
2821 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
2822 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
2823 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
2824 line-height: 0;
2825 }
2826 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
2827 display: flex;
2828 }
2829 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image {
2830 background-size: cover;
2831 width: 18px;
2832 height: 18px;
2833 border-radius: 1px;
2834 }
2835 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
2836 box-shadow: 0 0 0 2px #fff;
2837 }
2838 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:first-child) {
2839 margin-left: -6px;
2840 }
2841 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2842 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2843 }
2844
2845 .block-editor-list-view-draggable-chip {
2846 opacity: 0.8;
2847 }
2848
2849 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
2850 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
2851 .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
2852 .block-editor-list-view-appender__cell .block-editor-list-view-appender__container {
2853 display: flex;
2854 }
2855
2856 .block-editor-list-view__expander {
2857 height: 24px;
2858 width: 24px;
2859 cursor: var(--wpds-cursor-control, pointer);
2860 }
2861
2862 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
2863 margin-left: 192px;
2864 }
2865
2866 .block-editor-list-view-leaf[aria-level="1"] .block-editor-list-view__expander {
2867 margin-left: 0;
2868 }
2869
2870 .block-editor-list-view-leaf[aria-level="2"] .block-editor-list-view__expander {
2871 margin-left: 24px;
2872 }
2873
2874 .block-editor-list-view-leaf[aria-level="3"] .block-editor-list-view__expander {
2875 margin-left: 48px;
2876 }
2877
2878 .block-editor-list-view-leaf[aria-level="4"] .block-editor-list-view__expander {
2879 margin-left: 72px;
2880 }
2881
2882 .block-editor-list-view-leaf[aria-level="5"] .block-editor-list-view__expander {
2883 margin-left: 96px;
2884 }
2885
2886 .block-editor-list-view-leaf[aria-level="6"] .block-editor-list-view__expander {
2887 margin-left: 120px;
2888 }
2889
2890 .block-editor-list-view-leaf[aria-level="7"] .block-editor-list-view__expander {
2891 margin-left: 144px;
2892 }
2893
2894 .block-editor-list-view-leaf[aria-level="8"] .block-editor-list-view__expander {
2895 margin-left: 168px;
2896 }
2897
2898 .block-editor-list-view-leaf .block-editor-list-view__expander {
2899 visibility: hidden;
2900 }
2901
2902 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
2903 visibility: visible;
2904 }
2905 @media not (prefers-reduced-motion) {
2906 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
2907 transition: transform 0.2s ease;
2908 }
2909 }
2910 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
2911 transform: rotate(90deg);
2912 }
2913
2914 .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
2915 visibility: visible;
2916 transform: rotate(0deg);
2917 }
2918 @media not (prefers-reduced-motion) {
2919 .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
2920 transition: transform 0.2s ease;
2921 }
2922 }
2923
2924 .block-editor-list-view-drop-indicator {
2925 pointer-events: none;
2926 }
2927 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
2928 background: var(--wp-admin-theme-color);
2929 height: 4px;
2930 border-radius: 4px;
2931 }
2932
2933 .block-editor-list-view-drop-indicator--preview {
2934 pointer-events: none;
2935 }
2936 .block-editor-list-view-drop-indicator--preview .components-popover__content {
2937 overflow: hidden !important;
2938 }
2939 .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line {
2940 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2941 height: 32px;
2942 border-radius: 4px;
2943 overflow: hidden;
2944 }
2945 .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker {
2946 background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
2947 }
2948
2949 .block-editor-list-view-placeholder {
2950 padding: 0;
2951 margin: 0;
2952 height: 32px;
2953 }
2954
2955 .list-view-appender .block-editor-inserter__toggle {
2956 background-color: #1e1e1e;
2957 color: #fff;
2958 margin: 8px 0 0 24px;
2959 height: 24px;
2960 padding: 0;
2961 }
2962 .list-view-appender .block-editor-inserter__toggle.has-icon.is-next-40px-default-size {
2963 min-width: 24px;
2964 }
2965 .list-view-appender .block-editor-inserter__toggle:hover, .list-view-appender .block-editor-inserter__toggle:focus {
2966 background: var(--wp-admin-theme-color);
2967 color: #fff;
2968 }
2969
2970 .list-view-appender__description {
2971 display: none;
2972 }
2973
2974 .block-editor-media-placeholder__url-input-form {
2975 min-width: 260px;
2976 }
2977 @media (min-width: 600px) {
2978 .block-editor-media-placeholder__url-input-form {
2979 width: 300px;
2980 }
2981 }
2982 .block-editor-media-placeholder__url-input-form input {
2983 /* rtl:ignore */
2984 direction: ltr;
2985 }
2986
2987 .modal-open .block-editor-media-replace-flow__options {
2988 z-index: 99999;
2989 }
2990
2991 .block-editor-media-replace-flow__indicator {
2992 margin-left: 4px;
2993 }
2994
2995 .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
2996 border-top: 1px solid #ddd;
2997 margin-top: 8px;
2998 padding-bottom: 8px;
2999 }
3000
3001 .block-editor-media-replace-flow__options.is-variant-toolbar .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
3002 border-top-color: #1e1e1e;
3003 }
3004
3005 .block-editor-media-flow__url-input {
3006 margin-right: -8px;
3007 margin-left: -8px;
3008 padding: 16px;
3009 }
3010 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
3011 display: block;
3012 top: 16px;
3013 margin-bottom: 8px;
3014 }
3015 .block-editor-media-flow__url-input .block-editor-link-control {
3016 width: 300px;
3017 }
3018 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
3019 padding: 0;
3020 margin: 0;
3021 }
3022 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__tools {
3023 justify-content: flex-end;
3024 padding: 16px var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
3025 }
3026 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__preview.is-current {
3027 width: auto;
3028 padding: 0;
3029 }
3030 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
3031 margin: 0;
3032 width: 100%;
3033 }
3034 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3035 padding: 8px 0 0;
3036 }
3037
3038 .block-editor-media-flow__error {
3039 padding: 0 20px 20px 20px;
3040 max-width: 255px;
3041 }
3042 .block-editor-media-flow__error .components-with-notices-ui {
3043 max-width: 255px;
3044 }
3045 .block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
3046 overflow: hidden;
3047 word-wrap: break-word;
3048 }
3049 .block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
3050 position: absolute;
3051 right: 10px;
3052 }
3053
3054 .block-editor-multi-selection-inspector__card {
3055 padding: 16px;
3056 }
3057
3058 .block-editor-multi-selection-inspector__card-title {
3059 font-weight: 499;
3060 }
3061
3062 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3063 margin-left: -2px;
3064 padding: 0 3px;
3065 width: 36px;
3066 height: 24px;
3067 }
3068
3069 .block-editor-responsive-block-control {
3070 margin-bottom: 28px;
3071 border-bottom: 1px solid #ccc;
3072 padding-bottom: 14px;
3073 }
3074 .block-editor-responsive-block-control:last-child {
3075 padding-bottom: 0;
3076 border-bottom: 0;
3077 }
3078
3079 .block-editor-responsive-block-control__title {
3080 margin: 0;
3081 margin-bottom: 0.6em;
3082 margin-left: -3px;
3083 }
3084
3085 .block-editor-responsive-block-control__label {
3086 font-weight: 600;
3087 margin-bottom: 0.6em;
3088 margin-left: -3px;
3089 }
3090
3091 .block-editor-responsive-block-control__inner {
3092 margin-left: -1px;
3093 }
3094
3095 .block-editor-responsive-block-control__toggle {
3096 margin-left: 1px;
3097 }
3098
3099 .block-editor-responsive-block-control .components-base-control__help {
3100 border: 0;
3101 clip-path: inset(50%);
3102 height: 1px;
3103 margin: -1px;
3104 overflow: hidden;
3105 padding: 0;
3106 position: absolute;
3107 width: 1px;
3108 word-wrap: normal !important;
3109 word-break: normal !important;
3110 }
3111
3112 .preset-input-control__wrapper > * {
3113 flex: 1;
3114 }
3115 .preset-input-control__wrapper > .preset-input-control__icon,
3116 .preset-input-control__wrapper > .preset-input-control__custom-toggle {
3117 flex: none;
3118 }
3119
3120 .components-popover.block-editor-rich-text__inline-format-toolbar {
3121 z-index: 99998;
3122 }
3123 .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content {
3124 width: auto;
3125 min-width: auto;
3126 margin-bottom: 8px;
3127 box-shadow: none;
3128 outline: none;
3129 border-radius: 2px;
3130 }
3131 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
3132 border-radius: 2px;
3133 }
3134 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
3135 background: none;
3136 }
3137 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
3138 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
3139 min-width: 48px;
3140 min-height: 48px;
3141 padding-left: 12px;
3142 padding-right: 12px;
3143 }
3144
3145 .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle {
3146 justify-content: center;
3147 }
3148
3149 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon {
3150 width: auto;
3151 }
3152 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg {
3153 display: none;
3154 }
3155 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after {
3156 content: attr(aria-label);
3157 }
3158
3159 .block-editor-skip-to-selected-block {
3160 position: absolute;
3161 top: -9999em;
3162 }
3163 .block-editor-skip-to-selected-block:focus {
3164 font-size: 14px;
3165 font-weight: 600;
3166 background: #f1f1f1;
3167 z-index: 100000;
3168 }
3169
3170 .block-editor-tabbed-sidebar {
3171 background-color: #fff;
3172 height: 100%;
3173 display: flex;
3174 flex-direction: column;
3175 flex-grow: 1;
3176 overflow: hidden;
3177 }
3178
3179 .block-editor-tabbed-sidebar__tablist-and-close-button {
3180 border-bottom: 1px solid #ddd;
3181 display: flex;
3182 justify-content: space-between;
3183 padding-right: 8px;
3184 }
3185
3186 .block-editor-tabbed-sidebar__close-button {
3187 background: #fff;
3188 /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
3189 order: 1;
3190 align-self: center;
3191 }
3192
3193 .block-editor-tabbed-sidebar__tablist {
3194 margin-bottom: -1px;
3195 }
3196
3197 .block-editor-tabbed-sidebar__tabpanel {
3198 display: flex;
3199 flex-grow: 1;
3200 flex-direction: column;
3201 overflow-y: auto;
3202 scrollbar-gutter: auto;
3203 }
3204
3205 .block-editor-block-list__block .block-editor-url-input,
3206 .components-popover .block-editor-url-input,
3207 .block-editor-url-input {
3208 flex-grow: 1;
3209 position: relative;
3210 padding: 1px;
3211 }
3212 @media (min-width: 600px) {
3213 .block-editor-block-list__block .block-editor-url-input,
3214 .components-popover .block-editor-url-input,
3215 .block-editor-url-input {
3216 min-width: 300px;
3217 width: auto;
3218 }
3219 }
3220 .block-editor-block-list__block .block-editor-url-input.is-full-width,
3221 .components-popover .block-editor-url-input.is-full-width,
3222 .block-editor-url-input.is-full-width {
3223 width: 100%;
3224 }
3225 .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
3226 .components-popover .block-editor-url-input.is-full-width__suggestions,
3227 .block-editor-url-input.is-full-width__suggestions {
3228 width: 100%;
3229 }
3230 .block-editor-block-list__block .block-editor-url-input .components-spinner,
3231 .components-popover .block-editor-url-input .components-spinner,
3232 .block-editor-url-input .components-spinner {
3233 position: absolute;
3234 margin: 0;
3235 top: calc(50% - 16px / 2);
3236 right: 8px;
3237 }
3238
3239 .block-editor-url-input__suggestions {
3240 max-height: 200px;
3241 }
3242 @media not (prefers-reduced-motion) {
3243 .block-editor-url-input__suggestions {
3244 transition: all 0.15s ease-in-out;
3245 }
3246 }
3247 .block-editor-url-input__suggestions {
3248 padding: 4px 0;
3249 width: 302px;
3250 overflow-y: auto;
3251 }
3252
3253 .block-editor-url-input__suggestions,
3254 .block-editor-url-input .components-spinner {
3255 display: none;
3256 }
3257 @media (min-width: 600px) {
3258 .block-editor-url-input__suggestions,
3259 .block-editor-url-input .components-spinner {
3260 display: grid;
3261 }
3262 }
3263
3264 .block-editor-url-input__suggestion {
3265 min-height: 36px;
3266 height: auto;
3267 color: #757575;
3268 display: block;
3269 font-size: 13px;
3270 cursor: var(--wpds-cursor-control, pointer);
3271 background: #fff;
3272 width: 100%;
3273 border: none;
3274 text-align: left;
3275 box-shadow: none;
3276 }
3277 .block-editor-url-input__suggestion:hover {
3278 background: #ddd;
3279 }
3280 .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected {
3281 background: var(--wp-admin-theme-color-darker-20);
3282 color: #fff;
3283 outline: none;
3284 }
3285
3286 .components-toolbar-group > .block-editor-url-input__button,
3287 .components-toolbar > .block-editor-url-input__button {
3288 position: inherit;
3289 }
3290
3291 .block-editor-url-input__button .block-editor-url-input__back {
3292 margin-right: 4px;
3293 overflow: visible;
3294 }
3295 .block-editor-url-input__button .block-editor-url-input__back::after {
3296 content: "";
3297 position: absolute;
3298 display: block;
3299 width: 1px;
3300 height: 24px;
3301 right: -1px;
3302 background: #ddd;
3303 }
3304
3305 .block-editor-url-input__button-modal {
3306 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
3307 border: 1px solid #ddd;
3308 background: #fff;
3309 }
3310
3311 .block-editor-url-input__button-modal-line {
3312 display: flex;
3313 flex-direction: row;
3314 flex-grow: 1;
3315 flex-shrink: 1;
3316 min-width: 0;
3317 align-items: flex-start;
3318 }
3319
3320 .block-editor-url-popover__additional-controls {
3321 border-top: 1px solid #1e1e1e;
3322 padding: 8px 8px;
3323 }
3324
3325 .block-editor-url-popover__input-container {
3326 padding: 8px;
3327 }
3328
3329 .block-editor-url-popover__row {
3330 display: flex;
3331 gap: 4px;
3332 align-items: center;
3333 }
3334
3335 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
3336 flex-grow: 1;
3337 gap: 8px;
3338 }
3339
3340 .block-editor-url-popover__additional-controls .components-button.has-icon {
3341 padding-left: 8px;
3342 padding-right: 8px;
3343 height: auto;
3344 text-align: left;
3345 }
3346 .block-editor-url-popover__additional-controls .components-button.has-icon > svg {
3347 margin-right: 8px;
3348 }
3349
3350 .block-editor-url-popover__settings-toggle {
3351 flex-shrink: 0;
3352 }
3353 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
3354 transform: rotate(180deg);
3355 }
3356
3357 .block-editor-url-popover__settings {
3358 display: block;
3359 padding: 16px;
3360 border-top: 1px solid #1e1e1e;
3361 }
3362
3363 .block-editor-url-popover__link-editor,
3364 .block-editor-url-popover__link-viewer {
3365 display: flex;
3366 }
3367
3368 .block-editor-url-popover__link-viewer-url {
3369 display: flex;
3370 align-items: center;
3371 flex-grow: 1;
3372 flex-shrink: 1;
3373 overflow: hidden;
3374 text-overflow: ellipsis;
3375 white-space: nowrap;
3376 margin-right: 8px;
3377 min-width: 150px;
3378 max-width: 350px;
3379 }
3380 .block-editor-url-popover__link-viewer-url.has-invalid-link {
3381 color: #cc1818;
3382 }
3383
3384 .block-editor-url-popover__expand-on-click {
3385 display: flex;
3386 align-items: center;
3387 min-width: 350px;
3388 white-space: nowrap;
3389 }
3390 .block-editor-url-popover__expand-on-click .text {
3391 flex-grow: 1;
3392 }
3393 .block-editor-url-popover__expand-on-click .text p {
3394 margin: 0;
3395 line-height: 16px;
3396 }
3397 .block-editor-url-popover__expand-on-click .text p.description {
3398 color: #757575;
3399 font-size: 12px;
3400 }
3401
3402 /**
3403 * ItemGroup-like border styles for the background panel's ToolsPanelItems.
3404 * Replicates the separated border of the `ItemGroup` component while
3405 * allowing for hidden placeholder items (same approach as the color panel).
3406 */
3407 .block-editor-background-panel__item {
3408 padding: 0;
3409 max-width: 100%;
3410 position: relative;
3411 border-left: 1px solid #ddd;
3412 border-right: 1px solid #ddd;
3413 border-bottom: 1px solid #ddd;
3414 }
3415 .block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
3416 border-top-left-radius: 2px;
3417 border-top-right-radius: 2px;
3418 border-top: 1px solid #ddd;
3419 }
3420 .block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
3421 border-bottom-left-radius: 2px;
3422 border-bottom-right-radius: 2px;
3423 }
3424 .block-editor-background-panel__item > div,
3425 .block-editor-background-panel__item > div > button {
3426 border-radius: inherit;
3427 }
3428
3429 .background-block-support-panel {
3430 /* Increased specificity required to remove the slot wrapper's row gap */
3431 }
3432 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3433 row-gap: 0;
3434 }
3435
3436 .block-editor-content-only-controls__link {
3437 width: 100%;
3438 box-shadow: inset 0 0 0 1px #ccc;
3439 }
3440 .block-editor-content-only-controls__link:focus:not(:disabled) {
3441 box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3442 }
3443
3444 .block-editor-content-only-controls__link-row {
3445 align-items: center;
3446 }
3447
3448 .block-editor-content-only-controls__link-title {
3449 width: 100%;
3450 white-space: nowrap;
3451 text-overflow: ellipsis;
3452 overflow: hidden;
3453 }
3454
3455 .block-editor-content-only-controls__media {
3456 width: 100%;
3457 box-shadow: inset 0 0 0 1px #ccc;
3458 padding-right: 32px;
3459 }
3460 .block-editor-content-only-controls__media:focus:not(:disabled) {
3461 box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3462 }
3463
3464 .block-editor-content-only-controls__media-replace-flow {
3465 display: block;
3466 }
3467
3468 .block-editor-content-only-controls__media-row {
3469 align-items: center;
3470 }
3471
3472 .block-editor-content-only-controls__media-placeholder {
3473 width: 24px;
3474 height: 24px;
3475 border-radius: 2px;
3476 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3477 display: inline-block;
3478 padding: 0;
3479 background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3480 }
3481
3482 .block-editor-content-only-controls__media-title {
3483 width: 100%;
3484 white-space: nowrap;
3485 text-overflow: ellipsis;
3486 overflow: hidden;
3487 }
3488
3489 .block-editor-content-only-controls__media-thumbnail {
3490 width: 20px;
3491 height: 20px;
3492 border-radius: 2px;
3493 align-self: center;
3494 overflow: hidden;
3495 }
3496 .block-editor-content-only-controls__media-thumbnail img {
3497 width: 100% !important;
3498 height: 100% !important;
3499 object-fit: cover;
3500 }
3501
3502 .block-editor-content-only-controls {
3503 position: relative;
3504 }
3505
3506 .block-editor-content-only-controls__media-reset {
3507 position: absolute;
3508 right: 0;
3509 top: 8px;
3510 margin: auto 8px auto;
3511 opacity: 0;
3512 border-radius: 2px;
3513 }
3514 @media not (prefers-reduced-motion) {
3515 .block-editor-content-only-controls__media-reset {
3516 transition: opacity 0.1s ease-in-out;
3517 }
3518 }
3519 .block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover {
3520 opacity: 1;
3521 }
3522 @media (hover: none) {
3523 .block-editor-content-only-controls__media-reset {
3524 opacity: 1;
3525 }
3526 }
3527
3528 .block-editor-content-only-controls__rich-text {
3529 width: 100%;
3530 margin: 0;
3531 background: #fff;
3532 color: #1e1e1e;
3533 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3534 padding: 6px 8px;
3535 /* Fonts smaller than 16px causes mobile safari to zoom. */
3536 font-size: 16px;
3537 /* Override core line-height. To be reviewed. */
3538 line-height: normal;
3539 box-shadow: 0 0 0 transparent;
3540 border-radius: 2px;
3541 border: 1px solid #949494;
3542 }
3543 @media not (prefers-reduced-motion) {
3544 .block-editor-content-only-controls__rich-text {
3545 transition: box-shadow 0.1s linear;
3546 }
3547 }
3548 @media (min-width: 600px) {
3549 .block-editor-content-only-controls__rich-text {
3550 font-size: 13px;
3551 /* Override core line-height. To be reviewed. */
3552 line-height: normal;
3553 }
3554 }
3555 .block-editor-content-only-controls__rich-text:focus {
3556 border-color: var(--wp-admin-theme-color, #3858e9);
3557 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3558 outline: 2px solid transparent;
3559 }
3560 .block-editor-content-only-controls__rich-text::placeholder {
3561 color: rgba(30, 30, 30, 0.62);
3562 }
3563 .block-editor-content-only-controls__rich-text {
3564 border-color: #949494;
3565 }
3566 .block-editor-content-only-controls__rich-text::placeholder {
3567 color: color-mix(in srgb, #1e1e1e, transparent 38%);
3568 }
3569 .block-editor-content-only-controls__rich-text {
3570 min-height: 40px;
3571 padding: 12px;
3572 }
3573
3574 .block-editor-block-fields__container {
3575 padding: 0 16px 16px;
3576 }
3577 .block-editor-block-fields__container:first-of-type {
3578 padding-block-start: 8px;
3579 /*
3580 * Add border for the entire content controls and remove the similar border
3581 * for tools panel.
3582 */
3583 border-block-start: 1px solid #e0e0e0;
3584 }
3585
3586 .block-editor-block-fields__header {
3587 padding: 8px 0;
3588 margin-bottom: 4px;
3589 }
3590
3591 .block-editor-block-fields__header-icon {
3592 flex: 0 0 24px;
3593 }
3594
3595 .block-editor-block-fields__header-title {
3596 flex: 1;
3597 /* Override the default margin on a h2 element. */
3598 margin: 0 !important;
3599 }
3600
3601 .block-editor-hooks__block-hooks {
3602 /**
3603 * Un-reverse the flex direction for the toggle's label.
3604 */
3605 }
3606 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
3607 flex-direction: row;
3608 }
3609 .block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
3610 color: #757575;
3611 font-size: 12px;
3612 margin-bottom: 16px;
3613 }
3614
3615 div.block-editor-bindings__panel {
3616 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3617 }
3618 div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
3619 color: inherit;
3620 }
3621
3622 .border-block-support-panel .single-column {
3623 grid-column: span 1;
3624 }
3625
3626 .color-block-support-panel .block-editor-contrast-checker {
3627 grid-column: span 2;
3628 margin-top: 16px;
3629 }
3630 .color-block-support-panel {
3631 /* Increased specificity required to remove the slot wrapper's row gap */
3632 }
3633 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3634 row-gap: 0;
3635 }
3636 .color-block-support-panel {
3637 /**
3638 * After converting PanelColorGradientSettings to render as a ToolsPanel
3639 * we need to remove the top margin when wrapping inner content due to
3640 * rendering via SlotFills.
3641 */
3642 }
3643 .color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
3644 margin-top: 0;
3645 }
3646
3647 .dimensions-block-support-panel .single-column {
3648 grid-column: span 1;
3649 }
3650
3651 .block-editor-hooks__layout-constrained .components-base-control {
3652 margin-bottom: 0;
3653 }
3654
3655 .block-editor-hooks__layout-constrained-helptext {
3656 color: #757575;
3657 font-size: 12px;
3658 margin-bottom: 0;
3659 }
3660
3661 .block-editor-hooks__flex-layout-justification-controls,
3662 .block-editor-hooks__flex-layout-orientation-controls {
3663 margin-bottom: 12px;
3664 }
3665 .block-editor-hooks__flex-layout-justification-controls legend,
3666 .block-editor-hooks__flex-layout-orientation-controls legend {
3667 margin-bottom: 8px;
3668 }
3669
3670 .block-editor-hooks__grid-layout-columns-and-rows-controls,
3671 .block-editor-hooks__grid-layout-minimum-width-control {
3672 border: 0;
3673 padding: 0;
3674 margin: 0;
3675 }
3676
3677 .block-editor__spacing-visualizer {
3678 position: absolute;
3679 top: 0;
3680 bottom: 0;
3681 left: 0;
3682 right: 0;
3683 opacity: 0.5;
3684 border-color: var(--wp-admin-theme-color);
3685 border-style: solid;
3686 pointer-events: none;
3687 box-sizing: border-box;
3688 }
3689
3690 .typography-block-support-panel .single-column {
3691 grid-column: span 1;
3692 }
3693
3694 /**
3695 * Block Toolbar
3696 */
3697 .block-editor-block-toolbar {
3698 display: flex;
3699 flex-grow: 1;
3700 width: 100%;
3701 position: relative;
3702 overflow-y: hidden;
3703 overflow-x: auto;
3704 }
3705 @media not (prefers-reduced-motion) {
3706 .block-editor-block-toolbar {
3707 transition: border-color 0.1s linear, box-shadow 0.1s linear;
3708 }
3709 }
3710 @media (min-width: 600px) {
3711 .block-editor-block-toolbar {
3712 overflow: inherit;
3713 }
3714 }
3715 .block-editor-block-toolbar .components-toolbar-group,
3716 .block-editor-block-toolbar .components-toolbar {
3717 background: none;
3718 margin-top: -1px;
3719 margin-bottom: -1px;
3720 border: 0;
3721 border-right: 1px solid #ddd;
3722 }
3723 .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button::before {
3724 background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
3725 border-radius: 2px;
3726 }
3727 .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true] {
3728 color: #1e1e1e;
3729 }
3730 .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
3731 color: #1e1e1e;
3732 }
3733 .block-editor-block-toolbar.is-synced .block-editor-block-toolbar__block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-toolbar__block-icon {
3734 color: var(--wp-block-synced-color);
3735 }
3736 .block-editor-block-toolbar > :last-child,
3737 .block-editor-block-toolbar > :last-child .components-toolbar-group,
3738 .block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
3739 border-right: none;
3740 }
3741 .block-editor-block-toolbar .components-toolbar-group:empty {
3742 display: none;
3743 }
3744
3745 .block-editor-block-contextual-toolbar {
3746 position: sticky;
3747 top: 0;
3748 z-index: 31;
3749 display: block;
3750 width: 100%;
3751 background-color: #fff;
3752 flex-shrink: 3;
3753 }
3754 .block-editor-block-contextual-toolbar.components-accessible-toolbar {
3755 border: none;
3756 border-radius: 0;
3757 }
3758 .block-editor-block-contextual-toolbar.is-unstyled {
3759 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
3760 }
3761 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3762 overflow: auto;
3763 overflow-y: hidden;
3764 }
3765 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
3766 width: 12px;
3767 height: 12px;
3768 }
3769 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
3770 background-color: transparent;
3771 }
3772 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
3773 background-color: #e0e0e0;
3774 border-radius: 8px;
3775 border: 3px solid transparent;
3776 background-clip: padding-box;
3777 }
3778 .block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within::-webkit-scrollbar-thumb {
3779 background-color: #949494;
3780 }
3781 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3782 scrollbar-width: thin;
3783 scrollbar-gutter: stable both-edges;
3784 scrollbar-color: #e0e0e0 transparent;
3785 }
3786 .block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within {
3787 scrollbar-color: #949494 transparent;
3788 }
3789 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3790 will-change: transform;
3791 }
3792 @media (hover: none) {
3793 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3794 scrollbar-color: #949494 transparent;
3795 }
3796 }
3797 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3798 scrollbar-gutter: auto;
3799 }
3800 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
3801 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
3802 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar::after {
3803 display: none;
3804 }
3805 .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
3806 flex-grow: initial;
3807 width: initial;
3808 }
3809 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
3810 position: relative;
3811 margin-top: -1px;
3812 margin-bottom: -1px;
3813 }
3814 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
3815 align-items: center;
3816 background-color: #1e1e1e;
3817 border-radius: 100%;
3818 content: "";
3819 display: inline-flex;
3820 height: 2px;
3821 position: absolute;
3822 top: 15px;
3823 width: 2px;
3824 }
3825
3826 .block-editor-block-toolbar__block-controls .components-toolbar-group {
3827 padding: 0;
3828 }
3829
3830 .block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
3831 min-width: 260px;
3832 padding: 16px;
3833 }
3834
3835 .block-editor-block-toolbar .components-toolbar-group,
3836 .block-editor-block-toolbar .components-toolbar,
3837 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
3838 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar {
3839 display: flex;
3840 flex-wrap: nowrap;
3841 }
3842
3843 .block-editor-block-toolbar__slot {
3844 display: inline-flex;
3845 }
3846
3847 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) {
3848 width: auto;
3849 }
3850 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) svg {
3851 display: none;
3852 }
3853 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text))::after {
3854 content: attr(aria-label);
3855 font-size: 12px;
3856 }
3857 .show-icon-labels .block-editor-block-toolbar .block-editor-block-icon {
3858 width: 0 !important;
3859 height: 0 !important;
3860 min-width: 0 !important;
3861 }
3862 .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
3863 padding-left: 6px;
3864 padding-right: 6px;
3865 }
3866 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
3867 border-top-right-radius: 0;
3868 border-bottom-right-radius: 0;
3869 padding-left: 12px;
3870 padding-right: 12px;
3871 text-wrap: nowrap;
3872 }
3873 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button .block-editor-block-icon {
3874 width: 0;
3875 }
3876 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
3877 width: auto;
3878 position: relative;
3879 }
3880 @media (min-width: 600px) {
3881 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
3882 content: "";
3883 height: 1px;
3884 width: 100%;
3885 background: #e0e0e0;
3886 position: absolute;
3887 top: 50%;
3888 left: 50%;
3889 transform: translate(-50%, 0);
3890 margin-top: -0.5px;
3891 }
3892 }
3893 @media (min-width: 782px) {
3894 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
3895 background: #1e1e1e;
3896 }
3897 }
3898 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
3899 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
3900 padding-left: 6px;
3901 padding-right: 6px;
3902 }
3903 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
3904 padding-left: 8px;
3905 padding-right: 8px;
3906 }
3907 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
3908 border-left: 1px solid #ddd;
3909 margin-left: 6px;
3910 margin-right: -6px;
3911 white-space: nowrap;
3912 }
3913 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
3914 padding-left: 12px;
3915 padding-right: 12px;
3916 }
3917 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
3918 width: auto;
3919 }
3920 .show-icon-labels .components-toolbar,
3921 .show-icon-labels .components-toolbar-group {
3922 flex-shrink: 1;
3923 }
3924 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
3925 margin-left: 6px;
3926 }
3927
3928 .block-editor-block-toolbar-change-design-content-wrapper {
3929 padding: 12px;
3930 width: 320px;
3931 }
3932 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3933 display: grid;
3934 grid-template-columns: 1fr 1fr;
3935 grid-gap: 12px;
3936 }
3937 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3938 margin-bottom: 0;
3939 }
3940 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
3941 min-height: 100px;
3942 }
3943
3944 .block-editor-inserter {
3945 display: inline-block;
3946 background: none;
3947 border: none;
3948 padding: 0;
3949 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3950 font-size: 13px;
3951 line-height: 0;
3952 }
3953 @media (min-width: 782px) {
3954 .block-editor-inserter {
3955 position: relative;
3956 }
3957 }
3958
3959 .block-editor-inserter__main-area {
3960 height: 100%;
3961 gap: 16px;
3962 position: relative;
3963 }
3964 .block-editor-inserter__main-area.show-as-tabs {
3965 gap: 0;
3966 }
3967 @media (min-width: 782px) {
3968 .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
3969 width: 350px;
3970 }
3971 }
3972
3973 .block-editor-inserter__popover.is-quick .components-popover__content {
3974 border: none;
3975 outline: none;
3976 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
3977 }
3978 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
3979 border-left: 1px solid #ccc;
3980 border-right: 1px solid #ccc;
3981 }
3982 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
3983 border-top: 1px solid #ccc;
3984 border-radius: 4px 4px 0 0;
3985 }
3986 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
3987 border-bottom: 1px solid #ccc;
3988 border-radius: 0 0 4px 4px;
3989 }
3990 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
3991 border: 1px solid #1e1e1e;
3992 }
3993
3994 .block-editor-inserter__popover .block-editor-inserter__menu {
3995 margin: -12px;
3996 }
3997 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tablist {
3998 top: 60px;
3999 }
4000 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area {
4001 overflow: visible;
4002 height: auto;
4003 }
4004 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container {
4005 display: none;
4006 }
4007
4008 .block-editor-inserter__toggle.components-button {
4009 display: inline-flex;
4010 align-items: center;
4011 cursor: var(--wpds-cursor-control, pointer);
4012 border: none;
4013 outline: none;
4014 padding: 0;
4015 }
4016 @media not (prefers-reduced-motion) {
4017 .block-editor-inserter__toggle.components-button {
4018 transition: color 0.2s ease;
4019 }
4020 }
4021
4022 .block-editor-inserter__menu {
4023 height: 100%;
4024 position: relative;
4025 overflow: visible;
4026 }
4027 @media (min-width: 782px) {
4028 .block-editor-inserter__menu.show-panel {
4029 width: 630px;
4030 }
4031 }
4032
4033 .block-editor-inserter__inline-elements {
4034 margin-top: -1px;
4035 }
4036
4037 .block-editor-inserter__menu.is-bottom::after {
4038 border-bottom-color: #fff;
4039 }
4040
4041 .components-popover.block-editor-inserter__popover {
4042 z-index: 99999;
4043 }
4044
4045 .block-editor-inserter__search {
4046 padding: 16px 16px 0 16px;
4047 }
4048
4049 .block-editor-inserter__no-tab-container {
4050 overflow-y: auto;
4051 flex-grow: 1;
4052 position: relative;
4053 }
4054
4055 .block-editor-inserter__panel-header {
4056 position: relative;
4057 display: inline-flex;
4058 align-items: center;
4059 padding: 16px 16px 0;
4060 }
4061
4062 .block-editor-inserter__panel-content {
4063 padding: 16px;
4064 }
4065
4066 .block-editor-inserter__panel-title,
4067 .block-editor-inserter__panel-title button {
4068 margin: 0 12px 0 0;
4069 color: #757575;
4070 text-transform: uppercase;
4071 font-size: 11px;
4072 font-weight: 499;
4073 }
4074
4075 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4076 height: 36px;
4077 line-height: 36px;
4078 }
4079
4080 .block-editor-inserter__panel-dropdown select {
4081 border: none;
4082 }
4083
4084 .block-editor-inserter__reusable-blocks-panel {
4085 position: relative;
4086 text-align: right;
4087 }
4088
4089 .block-editor-inserter__no-results,
4090 .block-editor-inserter__patterns-loading {
4091 padding: 32px;
4092 text-align: center;
4093 }
4094
4095 .block-editor-inserter__child-blocks {
4096 padding: 0 16px;
4097 }
4098
4099 .block-editor-inserter__parent-block-header {
4100 display: flex;
4101 align-items: center;
4102 }
4103 .block-editor-inserter__parent-block-header h2 {
4104 font-size: 13px;
4105 }
4106 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4107 margin-right: 8px;
4108 }
4109
4110 .block-editor-inserter__preview-container__popover {
4111 top: 16px !important;
4112 }
4113
4114 .block-editor-inserter__preview-container {
4115 display: none;
4116 width: 280px;
4117 padding: 16px;
4118 max-height: calc(100% - 32px);
4119 overflow-y: hidden;
4120 }
4121 @media (min-width: 782px) {
4122 .block-editor-inserter__preview-container {
4123 display: block;
4124 }
4125 }
4126 .block-editor-inserter__preview-container .block-editor-inserter__media-list__list-item {
4127 height: 100%;
4128 }
4129 .block-editor-inserter__preview-container .block-editor-block-card {
4130 padding-left: 0;
4131 padding-right: 0;
4132 padding-bottom: 4px;
4133 }
4134
4135 .block-editor-inserter__insertable-blocks-at-selection {
4136 border-bottom: 1px solid #e0e0e0;
4137 }
4138
4139 .block-editor-inserter__media-tabs-container,
4140 .block-editor-inserter__block-patterns-tabs-container {
4141 flex-grow: 1;
4142 padding: 16px;
4143 display: flex;
4144 flex-direction: column;
4145 justify-content: space-between;
4146 }
4147
4148 .block-editor-inserter__category-tablist {
4149 margin-bottom: 8px;
4150 }
4151
4152 .block-editor-inserter__category-panel {
4153 outline: 1px solid transparent;
4154 display: flex;
4155 flex-direction: column;
4156 padding: 0 16px;
4157 }
4158 @media (min-width: 782px) {
4159 .block-editor-inserter__category-panel {
4160 border-left: 1px solid #e0e0e0;
4161 padding: 0;
4162 left: 350px;
4163 width: 280px;
4164 position: absolute;
4165 top: -1px;
4166 height: calc(100% + 1px);
4167 background: #f0f0f0;
4168 border-top: 1px solid #e0e0e0;
4169 }
4170 .block-editor-inserter__category-panel .block-editor-inserter__media-list,
4171 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
4172 padding: 0 24px 16px;
4173 }
4174 }
4175
4176 .block-editor-inserter__patterns-category-panel-header {
4177 padding: 8px 0;
4178 }
4179 @media (min-width: 782px) {
4180 .block-editor-inserter__patterns-category-panel-header {
4181 padding: 8px 24px;
4182 }
4183 }
4184
4185 .block-editor-inserter__patterns-category-no-results {
4186 margin-top: 24px;
4187 }
4188
4189 .block-editor-inserter__patterns-filter-help {
4190 padding: 16px;
4191 border-top: 1px solid #ddd;
4192 color: #757575;
4193 min-width: 280px;
4194 }
4195
4196 .block-editor-inserter__media-list,
4197 .block-editor-block-patterns-list {
4198 overflow-y: auto;
4199 flex-grow: 1;
4200 height: 100%;
4201 }
4202
4203 .block-editor-inserter__preview-content {
4204 background: #f0f0f0;
4205 display: grid;
4206 flex-grow: 1;
4207 align-items: center;
4208 }
4209
4210 .block-editor-inserter__preview-content-missing {
4211 flex: 1;
4212 display: flex;
4213 justify-content: center;
4214 align-items: center;
4215 min-height: 144px;
4216 color: #757575;
4217 background: #f0f0f0;
4218 border-radius: 2px;
4219 }
4220
4221 .block-editor-inserter__tips {
4222 border-top: 1px solid #ddd;
4223 padding: 16px;
4224 flex-shrink: 0;
4225 position: relative;
4226 }
4227
4228 .block-editor-inserter__quick-inserter {
4229 width: 100%;
4230 max-width: 100%;
4231 }
4232 @media (min-width: 782px) {
4233 .block-editor-inserter__quick-inserter {
4234 width: 350px;
4235 }
4236 }
4237
4238 .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
4239 height: 0;
4240 padding: 0;
4241 float: left;
4242 }
4243
4244 .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
4245 .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
4246 padding: 16px;
4247 }
4248
4249 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4250 display: grid;
4251 grid-template-columns: 1fr 1fr;
4252 grid-gap: 8px;
4253 }
4254 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4255 margin-bottom: 0;
4256 }
4257 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4258 min-height: 100px;
4259 }
4260
4261 .block-editor-inserter__quick-inserter-separator {
4262 border-top: 1px solid #ddd;
4263 }
4264
4265 .block-editor-inserter__popover.is-quick > .components-popover__content {
4266 padding: 0;
4267 }
4268
4269 .block-editor-inserter__quick-inserter-expand.components-button {
4270 display: block;
4271 background: #1e1e1e;
4272 color: #fff;
4273 width: 100%;
4274 border-radius: 0;
4275 }
4276 .block-editor-inserter__quick-inserter-expand.components-button:hover {
4277 color: #fff;
4278 }
4279 .block-editor-inserter__quick-inserter-expand.components-button:active {
4280 color: #ccc;
4281 }
4282 .block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4283 box-shadow: none;
4284 background: var(--wp-admin-theme-color);
4285 border-color: var(--wp-admin-theme-color);
4286 }
4287
4288 .block-editor-block-patterns-explorer__sidebar {
4289 position: absolute;
4290 top: 72px;
4291 left: 0;
4292 bottom: 0;
4293 width: 280px;
4294 padding: 24px 24px 24px;
4295 overflow-x: visible;
4296 overflow-y: auto;
4297 }
4298 .block-editor-block-patterns-explorer__sidebar__categories-list__item {
4299 display: block;
4300 width: 100%;
4301 height: 48px;
4302 text-align: left;
4303 }
4304 .block-editor-block-patterns-explorer__search {
4305 margin-bottom: 32px;
4306 }
4307 .block-editor-block-patterns-explorer__search-results-count {
4308 padding-bottom: 32px;
4309 }
4310 .block-editor-block-patterns-explorer__list {
4311 margin-left: 280px;
4312 padding: 24px 0 32px;
4313 }
4314 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4315 width: 380px;
4316 }
4317 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4318 display: grid;
4319 grid-gap: 32px;
4320 grid-template-columns: repeat(1, 1fr);
4321 margin-bottom: 16px;
4322 }
4323 @media (min-width: 1080px) {
4324 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4325 grid-template-columns: repeat(2, 1fr);
4326 }
4327 }
4328 @media (min-width: 1440px) {
4329 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4330 grid-template-columns: repeat(3, 1fr);
4331 }
4332 }
4333 .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4334 min-height: 240px;
4335 }
4336 .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4337 height: inherit;
4338 min-height: 100px;
4339 max-height: 800px;
4340 }
4341
4342 .components-heading.block-editor-inserter__patterns-category-panel-title {
4343 font-weight: 499;
4344 }
4345
4346 .block-editor-inserter__patterns-explore-button.components-button,
4347 .block-editor-inserter__media-library-button.components-button {
4348 padding: 16px;
4349 justify-content: center;
4350 margin-top: 16px;
4351 width: 100%;
4352 }
4353
4354 .block-editor-inserter__media-panel {
4355 min-height: 100%;
4356 padding: 0 16px;
4357 display: flex;
4358 flex-direction: column;
4359 }
4360 @media (min-width: 782px) {
4361 .block-editor-inserter__media-panel {
4362 padding: 0;
4363 }
4364 }
4365 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4366 height: 100%;
4367 display: flex;
4368 align-items: center;
4369 justify-content: center;
4370 flex: 1;
4371 }
4372 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4373 margin-bottom: 24px;
4374 }
4375 @media (min-width: 782px) {
4376 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4377 margin-bottom: 0;
4378 padding: 16px 24px 16px;
4379 }
4380 }
4381
4382 .block-editor-inserter__media-list__list-item {
4383 position: relative;
4384 cursor: var(--wpds-cursor-control, pointer);
4385 margin-bottom: 24px;
4386 }
4387 .block-editor-inserter__media-list__list-item.is-placeholder {
4388 min-height: 100px;
4389 }
4390 .block-editor-inserter__media-list__list-item[draggable=true] .block-editor-inserter__media-list__list-item {
4391 cursor: grab;
4392 }
4393 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4394 outline-color: rgba(0, 0, 0, 0.3);
4395 }
4396 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button {
4397 display: block;
4398 }
4399 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4400 position: absolute;
4401 right: 8px;
4402 top: 8px;
4403 }
4404 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button {
4405 background: #fff;
4406 display: none;
4407 }
4408 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button.is-opened, .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:focus {
4409 display: block;
4410 }
4411 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:hover {
4412 box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4413 outline: 2px solid transparent;
4414 }
4415
4416 .block-editor-inserter__media-list__item {
4417 height: 100%;
4418 }
4419 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview {
4420 display: flex;
4421 align-items: center;
4422 overflow: hidden;
4423 border-radius: 2px;
4424 }
4425 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview > * {
4426 margin: 0 auto;
4427 max-width: 100%;
4428 outline: 1px solid rgba(0, 0, 0, 0.1);
4429 outline-offset: -1px;
4430 }
4431 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
4432 display: flex;
4433 height: 100%;
4434 width: 100%;
4435 position: absolute;
4436 justify-content: center;
4437 background: rgba(255, 255, 255, 0.7);
4438 align-items: center;
4439 pointer-events: none;
4440 }
4441 .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4442 outline-color: var(--wp-admin-theme-color);
4443 outline-width: var(--wp-admin-border-width-focus);
4444 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4445 }
4446 @media not (prefers-reduced-motion) {
4447 .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4448 transition: outline 0.1s linear;
4449 }
4450 }
4451
4452 .block-editor-inserter__media-list__item-preview-options__popover .components-menu-item__button .components-menu-item__item {
4453 min-width: auto;
4454 }
4455
4456 .block-editor-inserter__mobile-tab-navigation {
4457 padding: 16px;
4458 height: 100%;
4459 }
4460 .block-editor-inserter__mobile-tab-navigation > * {
4461 height: 100%;
4462 }
4463
4464 @media (min-width: 600px) {
4465 .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
4466 max-width: 480px;
4467 }
4468 }
4469 .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal p {
4470 margin: 0;
4471 }
4472
4473 .block-editor-inserter__hint {
4474 margin: 16px 16px 0;
4475 }
4476
4477 .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
4478 height: 40px;
4479 }
4480
4481 .block-editor-inserter__pattern-panel-placeholder {
4482 display: none;
4483 }
4484
4485 .block-editor-inserter__menu.is-zoom-out {
4486 display: flex;
4487 }
4488 @media (min-width: 782px) {
4489 .block-editor-inserter__menu.is-zoom-out.show-panel::after {
4490 content: "";
4491 display: block;
4492 width: 300px;
4493 height: 100%;
4494 }
4495 }
4496
4497 @media (max-width: 959px) {
4498 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
4499 flex-direction: column;
4500 }
4501 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4502 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4503 flex-direction: column;
4504 }
4505 }
4506 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
4507 flex-direction: column;
4508 }
4509 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4510 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4511 flex-direction: column;
4512 }
4513
4514 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4515 display: none;
4516 padding: 0 24px 16px;
4517 }
4518 @media (min-width: 480px) {
4519 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4520 display: block;
4521 }
4522 }
4523
4524 .spacing-sizes-control {
4525 border: 0;
4526 padding: 0;
4527 margin: 0;
4528 }
4529 .spacing-sizes-control .spacing-sizes-control__unit-control,
4530 .spacing-sizes-control .spacing-sizes-control__label {
4531 margin-bottom: 0;
4532 }
4533 .spacing-sizes-control .spacing-sizes-control__preset-range,
4534 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
4535 flex: 1;
4536 margin-bottom: 0;
4537 }
4538
4539 .spacing-sizes-control__header {
4540 height: 16px;
4541 margin-bottom: 12px;
4542 }
4543
4544 .spacing-sizes-control__wrapper {
4545 align-items: center;
4546 }
4547
4548 .spacing-sizes-control__dropdown {
4549 height: 24px;
4550 }
4551
4552 .spacing-sizes-control__wrapper .preset-input-control__icon {
4553 margin-left: -4px;
4554 }
4555
4556 .block-editor-block-visibility-modal {
4557 z-index: 1000001;
4558 }
4559 .block-editor-block-visibility-modal__options {
4560 border: 0;
4561 padding: 0;
4562 list-style: none;
4563 margin: 24px 0;
4564 }
4565 .block-editor-block-visibility-modal__options-item {
4566 display: flex;
4567 align-items: center;
4568 justify-content: space-between;
4569 margin: 0 0 16px 0;
4570 gap: 24px;
4571 }
4572 .block-editor-block-visibility-modal__options-item:last-child {
4573 margin: 0;
4574 }
4575 .block-editor-block-visibility-modal__options-item--everywhere {
4576 flex-direction: column;
4577 align-items: start;
4578 }
4579 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4580 font-weight: 600;
4581 }
4582 .block-editor-block-visibility-modal__options-icon--checked {
4583 fill: #ddd;
4584 }
4585 .block-editor-block-visibility-modal__sub-options {
4586 width: 100%;
4587 padding-inline-start: 12px;
4588 }
4589 .block-editor-block-visibility-modal__description {
4590 font-size: 12px;
4591 color: #757575;
4592 }
4593
4594 .block-editor-block-visibility-info {
4595 padding-top: 4px;
4596 padding-bottom: 4px;
4597 margin: 0 16px 16px;
4598 display: flex;
4599 align-items: center;
4600 justify-content: start;
4601 }