PluginProbe
Gutenberg / 23.2.1
Gutenberg v23.2.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.2.1, at build/styles/block-editor/style.css

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