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

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