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

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