PluginProbe
Gutenberg / 23.5.1
Gutenberg v23.5.1
23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 7.4.0 All 402 releases
gutenberg / build / styles / block-editor / style.css

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

4,635 lines 133.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Typography
3 */
4 /**
5 * SCSS Variables.
6 *
7 * Please use variables from this sheet to ensure consistency across the UI.
8 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10 */
11 /**
12 * Colors
13 */
14 /**
15 * Fonts & basic variables.
16 */
17 /**
18 * Typography
19 */
20 /**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24 /**
25 * Radius scale.
26 */
27 /**
28 * Elevation scale.
29 */
30 /**
31 * Dimensions.
32 */
33 /**
34 * Mobile specific styles
35 */
36 /**
37 * Editor styles.
38 */
39 /**
40 * Block & Editor UI.
41 */
42 /**
43 * Block paddings.
44 */
45 /**
46 * React Native specific.
47 * These variables do not appear to be used anywhere else.
48 */
49 /**
50 * Breakpoints & Media Queries
51 */
52 /**
53 * Converts a hex value into the rgb equivalent.
54 *
55 * @param {string} hex - the hexadecimal value to convert
56 * @return {string} comma separated rgb values
57 */
58 /**
59 * Long content fade mixin
60 *
61 * Creates a fading overlay to signify that the content is longer
62 * than the space allows.
63 */
64 /**
65 * Breakpoint mixins
66 */
67 /**
68 * Focus styles.
69 */
70 /**
71 * Applies editor left position to the selector passed as argument
72 */
73 /**
74 * Styles that are reused verbatim in a few places
75 */
76 /**
77 * Allows users to opt-out of animations via OS-level preferences.
78 */
79 /**
80 * Reset default styles for JavaScript UI based pages.
81 * This is a WP-admin agnostic reset
82 */
83 /**
84 * Reset the WP Admin page styles for Gutenberg-like pages.
85 */
86 /**
87 * Creates a checkerboard pattern background to indicate transparency.
88 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89 */
90 :root {
91 --wp-block-synced-color: #7a00df;
92 --wp-block-synced-color--rgb: 122, 0, 223;
93 --wp-bound-block-color: var(--wp-block-synced-color);
94 --wp-editor-canvas-background: #ddd;
95 --wp-admin-theme-color: #007cba;
96 --wp-admin-theme-color--rgb: 0, 124, 186;
97 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
98 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
99 --wp-admin-theme-color-darker-20: #005a87;
100 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
101 --wp-admin-border-width-focus: 2px;
102 }
103 @media (min-resolution: 192dpi) {
104 :root {
105 --wp-admin-border-width-focus: 1.5px;
106 }
107 }
108
109 .block-editor-autocompleters__block {
110 white-space: nowrap;
111 }
112 .block-editor-autocompleters__block .block-editor-block-icon {
113 margin-right: 8px;
114 }
115 .block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon {
116 color: inherit !important;
117 }
118
119 .block-editor-global-styles-background-panel__inspector-media-replace-container {
120 position: relative;
121 }
122 .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
123 background-color: #f0f0f0;
124 }
125 .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item {
126 flex-grow: 1;
127 border: 0;
128 }
129 .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
130 display: block;
131 }
132 .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner {
133 height: 100%;
134 }
135 .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
136 display: block;
137 }
138 .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown .block-editor-global-styles-background-panel__dropdown-toggle {
139 height: 40px;
140 }
141
142 .block-editor-global-styles-background-panel__image-tools-panel-item {
143 border: 1px solid #ddd;
144 grid-column: 1/-1;
145 position: relative;
146 }
147 .block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
148 display: none;
149 }
150 .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
151 display: block;
152 }
153 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button {
154 color: #1e1e1e;
155 width: 100%;
156 display: block;
157 }
158 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
159 color: var(--wp-admin-theme-color);
160 }
161 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
162 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
163 }
164 .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
165 height: 100%;
166 position: absolute;
167 z-index: 1;
168 width: 100%;
169 padding: 10px 0 0 0;
170 }
171 .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg {
172 margin: 0;
173 }
174
175 .block-editor-global-styles-background-panel__dropdown-toggle {
176 cursor: var(--wpds-cursor-control, pointer);
177 background: transparent;
178 border: none;
179 height: 100%;
180 width: 100%;
181 padding-left: 12px;
182 padding-right: 32px;
183 }
184
185 .block-editor-global-styles-background-panel__reset {
186 position: absolute;
187 right: 0;
188 top: 8px;
189 margin: auto 8px auto;
190 opacity: 0;
191 }
192 @media not (prefers-reduced-motion) {
193 .block-editor-global-styles-background-panel__reset {
194 transition: opacity 0.1s ease-in-out;
195 }
196 }
197 .block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
198 border-radius: 2px;
199 }
200 .block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:hover {
201 opacity: 1;
202 }
203 @media (hover: none) {
204 .block-editor-global-styles-background-panel__reset {
205 opacity: 1;
206 }
207 }
208
209 .block-editor-global-styles-background-panel__inspector-media-replace-title {
210 word-break: break-all;
211 white-space: normal;
212 text-align: start;
213 }
214
215 .block-editor-global-styles-background-panel__inspector-image-indicator {
216 width: 20px;
217 height: 20px;
218 border-radius: 2px;
219 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
220 background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
221 background-size: cover;
222 outline: 1px solid transparent;
223 }
224
225 .block-editor-global-styles-background-panel__dropdown-content-wrapper {
226 min-width: 260px;
227 overflow-x: hidden;
228 }
229 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
230 background-color: #f0f0f0;
231 width: 100%;
232 border-radius: 2px;
233 border: 1px solid #ddd;
234 }
235 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image {
236 max-height: 180px;
237 }
238 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker::after {
239 content: none;
240 }
241
242 .modal-open .block-editor-global-styles-background-panel__popover {
243 z-index: 159890;
244 }
245
246 .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
247 width: 226px;
248 }
249 .block-editor-global-styles-background-panel__media-replace-popover .components-button {
250 padding: 0 8px;
251 }
252 .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
253 margin-left: 16px;
254 }
255
256 .block-editor-block-alignment-control__menu-group .components-menu-item__info {
257 margin-top: 0;
258 }
259
260 iframe[name=editor-canvas] {
261 box-sizing: border-box;
262 width: 100%;
263 height: 100%;
264 display: block;
265 }
266 @media not (prefers-reduced-motion) {
267 iframe[name=editor-canvas] {
268 transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
269 }
270 }
271 iframe[name=editor-canvas] {
272 background-color: var(--wp-editor-canvas-background);
273 }
274
275 .block-editor-block-icon {
276 display: flex;
277 align-items: center;
278 justify-content: center;
279 width: 24px;
280 height: 24px;
281 }
282 .block-editor-block-icon.has-colors svg {
283 fill: currentColor;
284 }
285 @media (forced-colors: active) {
286 .block-editor-block-icon.has-colors svg {
287 fill: CanvasText;
288 }
289 }
290 .block-editor-block-icon svg {
291 min-width: 20px;
292 min-height: 20px;
293 max-width: 24px;
294 max-height: 24px;
295 }
296
297 .block-editor-block-inspector p:not(.components-base-control__help) {
298 margin-top: 0;
299 }
300 .block-editor-block-inspector h2,
301 .block-editor-block-inspector h3 {
302 font-size: 13px;
303 color: #1e1e1e;
304 margin-bottom: 1.5em;
305 }
306 .block-editor-block-inspector .components-base-control:where(:not(:last-child)),
307 .block-editor-block-inspector .components-radio-control:where(:not(:last-child)),
308 .block-editor-block-inspector .block-editor-html-element-control:where(:not(:last-child)),
309 .block-editor-block-inspector .block-editor-image-size-control:where(:not(:last-child)) {
310 margin-bottom: 16px;
311 }
312 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
313 .block-editor-block-inspector .components-query-controls .components-base-control,
314 .block-editor-block-inspector .components-range-control .components-base-control,
315 .block-editor-block-inspector .block-editor-html-element-control .components-base-control,
316 .block-editor-block-inspector .block-editor-image-size-control .components-base-control {
317 margin-bottom: 0;
318 }
319 .block-editor-block-inspector .components-panel__body {
320 border: none;
321 border-top: 1px solid #e0e0e0;
322 margin-top: -1px;
323 }
324
325 .block-editor-block-inspector__no-blocks,
326 .block-editor-block-inspector__no-block-tools {
327 display: block;
328 font-size: 13px;
329 background: #fff;
330 padding: 32px 16px;
331 text-align: center;
332 }
333
334 .block-editor-block-inspector__no-block-tools {
335 border-top: 1px solid #ddd;
336 }
337
338 .block-editor-block-inspector-edit-contents {
339 margin: 0 16px 16px 16px;
340 }
341 .block-editor-block-inspector-edit-contents .block-editor-block-inspector-edit-contents__button {
342 justify-content: center;
343 }
344
345 /**
346 * Insertion Point.
347 */
348 .block-editor-block-list__insertion-point {
349 position: absolute;
350 top: 0;
351 bottom: 0;
352 left: 0;
353 right: 0;
354 }
355
356 .block-editor-block-list__insertion-point-indicator {
357 position: absolute;
358 background: var(--wp-admin-theme-color);
359 border-radius: 2px;
360 transform-origin: center;
361 opacity: 0;
362 will-change: transform, opacity;
363 }
364 .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
365 top: calc(50% - 2px);
366 height: 4px;
367 width: 100%;
368 }
369 .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
370 top: 0;
371 bottom: 0;
372 left: calc(50% - 2px);
373 width: 4px;
374 }
375
376 .block-editor-block-list__insertion-point-inserter {
377 display: none;
378 position: absolute;
379 will-change: transform;
380 }
381 @media (min-width: 480px) {
382 .block-editor-block-list__insertion-point-inserter {
383 display: flex;
384 }
385 }
386 .block-editor-block-list__insertion-point-inserter {
387 justify-content: center;
388 top: calc(50% - 12px);
389 left: calc(50% - 12px);
390 }
391
392 .block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
393 pointer-events: none;
394 }
395 .block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
396 pointer-events: all;
397 }
398
399 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
400 position: absolute;
401 top: 0;
402 right: 0;
403 line-height: 0;
404 }
405 .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
406 display: none;
407 }
408
409 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
410 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
411 background: #1e1e1e;
412 color: #fff;
413 padding: 0;
414 min-width: 24px;
415 height: 24px;
416 }
417 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
418 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
419 color: #fff;
420 background: var(--wp-admin-theme-color);
421 }
422 @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 .block-editor-panel-color-gradient-settings__contrast-notice {
1523 margin-bottom: 16px;
1524 }
1525
1526 /**
1527 * The following styles replicate the separated border of the
1528 * `ItemGroup` component but allows for hidden items. This is because
1529 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
1530 * must at least render a placeholder which would otherwise interfere
1531 * with the `:last-child` styles.
1532 *
1533 * Applied via the shared `block-editor-color-gradient-item` class on
1534 * color/gradient dropdown items across the Color, Background, and
1535 * Typography panels.
1536 */
1537 .block-editor-color-gradient-item {
1538 padding: 0;
1539 max-width: 100%;
1540 position: relative;
1541 border-left: 1px solid #ddd;
1542 border-right: 1px solid #ddd;
1543 border-bottom: 1px solid #ddd;
1544 }
1545 .block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
1546 border-top-left-radius: 2px;
1547 border-top-right-radius: 2px;
1548 border-top: 1px solid #ddd;
1549 }
1550 .block-editor-color-gradient-item:nth-last-child(1 of .block-editor-color-gradient-item) {
1551 border-bottom-left-radius: 2px;
1552 border-bottom-right-radius: 2px;
1553 }
1554 .block-editor-color-gradient-item > div,
1555 .block-editor-color-gradient-item > div > button {
1556 border-radius: inherit;
1557 }
1558
1559 .block-editor-tools-panel-color-gradient-settings__dropdown {
1560 display: block;
1561 padding: 0;
1562 }
1563 .block-editor-tools-panel-color-gradient-settings__dropdown > button {
1564 height: auto;
1565 padding-top: 10px;
1566 padding-bottom: 10px;
1567 text-align: left;
1568 }
1569 .block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
1570 background: #f0f0f0;
1571 color: var(--wp-admin-theme-color);
1572 }
1573 .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1574 white-space: nowrap;
1575 overflow: hidden;
1576 text-overflow: ellipsis;
1577 max-width: calc(100% - 44px);
1578 }
1579 .block-editor-tools-panel-color-gradient-settings__dropdown > button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
1580 max-width: calc(100% - 72px);
1581 }
1582
1583 .block-editor-panel-color-gradient-settings__dropdown {
1584 width: 100%;
1585 }
1586 .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1587 flex-shrink: 0;
1588 }
1589
1590 .block-editor-panel-color-gradient-settings__reset {
1591 position: absolute;
1592 right: 0;
1593 top: 8px;
1594 margin: auto 8px auto;
1595 opacity: 0;
1596 }
1597 @media not (prefers-reduced-motion) {
1598 .block-editor-panel-color-gradient-settings__reset {
1599 transition: opacity 0.1s ease-in-out;
1600 }
1601 }
1602 .block-editor-panel-color-gradient-settings__reset.block-editor-panel-color-gradient-settings__reset {
1603 border-radius: 2px;
1604 }
1605 .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 {
1606 opacity: 1;
1607 }
1608 @media (hover: none) {
1609 .block-editor-panel-color-gradient-settings__reset {
1610 opacity: 1;
1611 }
1612 }
1613 .block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
1614 right: 28px;
1615 }
1616
1617 .block-editor-panel-color-gradient-settings__contrast-warning {
1618 position: absolute;
1619 right: 0;
1620 top: 8px;
1621 margin: auto 8px auto;
1622 }
1623 .block-editor-panel-color-gradient-settings__contrast-warning.block-editor-panel-color-gradient-settings__contrast-warning {
1624 border-radius: 2px;
1625 }
1626
1627 .block-editor-date-format-picker {
1628 margin: 0 0 16px;
1629 padding: 0;
1630 border: none;
1631 }
1632
1633 .block-editor-date-format-picker__custom-format-select-control__custom-option {
1634 border-top: 1px solid #ddd;
1635 }
1636
1637 .block-editor-duotone-control__popover.components-popover > .components-popover__content {
1638 padding: 8px;
1639 width: 260px;
1640 }
1641 .block-editor-duotone-control__popover.components-popover .components-menu-group__label {
1642 padding: 0;
1643 }
1644 .block-editor-duotone-control__popover.components-popover .components-circular-option-picker__swatches {
1645 display: grid;
1646 grid-template-columns: repeat(6, 28px);
1647 gap: 12px;
1648 justify-content: space-between;
1649 }
1650
1651 .block-editor-duotone-control__unset-indicator {
1652 background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1653 }
1654
1655 .block-editor-fit-text-size-warning {
1656 grid-column: span 2;
1657 }
1658
1659 .components-font-appearance-control [role=option] {
1660 color: #1e1e1e;
1661 text-transform: capitalize;
1662 }
1663
1664 .block-editor-global-styles__toggle-icon {
1665 fill: currentColor;
1666 }
1667
1668 .block-editor-global-styles__shadow-popover-container {
1669 width: 230px;
1670 }
1671
1672 .block-editor-global-styles__shadow__list {
1673 display: flex;
1674 gap: 12px;
1675 flex-wrap: wrap;
1676 padding-bottom: 8px;
1677 }
1678
1679 .block-editor-global-styles__clear-shadow {
1680 text-align: right;
1681 }
1682
1683 .block-editor-global-styles-state-control {
1684 margin-top: -4px;
1685 }
1686
1687 .block-editor-global-styles-state-control__badges {
1688 min-height: 24px;
1689 }
1690
1691 .block-editor-global-styles-filters-panel__dropdown,
1692 .block-editor-global-styles__shadow-dropdown {
1693 display: block;
1694 padding: 0;
1695 position: relative;
1696 border: 1px solid #ddd;
1697 border-radius: 2px;
1698 }
1699
1700 .block-editor-global-styles-filters-panel__dropdown-toggle,
1701 .block-editor-global-styles__shadow-dropdown-toggle {
1702 width: 100%;
1703 padding: 8px;
1704 }
1705 .block-editor-global-styles-filters-panel__dropdown-toggle.is-open,
1706 .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1707 background-color: #f0f0f0;
1708 }
1709
1710 .block-editor-global-styles__shadow-editor__remove-button {
1711 position: absolute;
1712 right: 0;
1713 top: 8px;
1714 margin: auto 8px auto;
1715 opacity: 0;
1716 }
1717 @media not (prefers-reduced-motion) {
1718 .block-editor-global-styles__shadow-editor__remove-button {
1719 transition: opacity 0.1s ease-in-out;
1720 }
1721 }
1722 .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 {
1723 opacity: 1;
1724 }
1725 @media (hover: none) {
1726 .block-editor-global-styles__shadow-editor__remove-button {
1727 opacity: 1;
1728 }
1729 }
1730
1731 .block-editor-global-styles__shadow-indicator {
1732 -webkit-appearance: none;
1733 -moz-appearance: none;
1734 appearance: none;
1735 background: none;
1736 color: #2f2f2f;
1737 border: #e0e0e0 1px solid;
1738 border-radius: 2px;
1739 cursor: var(--wpds-cursor-control, pointer);
1740 display: inline-flex;
1741 align-items: center;
1742 padding: 0;
1743 height: 26px;
1744 width: 26px;
1745 box-sizing: border-box;
1746 transform: scale(1);
1747 }
1748 @media not (prefers-reduced-motion) {
1749 .block-editor-global-styles__shadow-indicator {
1750 transition: transform 0.1s ease;
1751 }
1752 }
1753 .block-editor-global-styles__shadow-indicator {
1754 will-change: transform;
1755 }
1756 .block-editor-global-styles__shadow-indicator:focus {
1757 border: 2px solid #757575;
1758 }
1759 .block-editor-global-styles__shadow-indicator:hover {
1760 transform: scale(1.2);
1761 }
1762 .block-editor-global-styles__shadow-indicator.unset {
1763 background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1764 }
1765
1766 .block-editor-global-styles-advanced-panel__custom-css-input {
1767 margin-bottom: 16px;
1768 }
1769 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
1770 font-family: Menlo, Consolas, monaco, monospace;
1771 /*rtl:ignore*/
1772 direction: ltr;
1773 }
1774
1775 .block-editor-panel-duotone-settings__reset {
1776 position: absolute;
1777 right: 0;
1778 top: 8px;
1779 margin: auto 8px auto;
1780 opacity: 0;
1781 }
1782 @media not (prefers-reduced-motion) {
1783 .block-editor-panel-duotone-settings__reset {
1784 transition: opacity 0.1s ease-in-out;
1785 }
1786 }
1787 .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 {
1788 opacity: 1;
1789 }
1790 @media (hover: none) {
1791 .block-editor-panel-duotone-settings__reset {
1792 opacity: 1;
1793 }
1794 }
1795
1796 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1797 z-index: 30;
1798 }
1799 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
1800 pointer-events: none;
1801 }
1802 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
1803 pointer-events: all;
1804 }
1805 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
1806 pointer-events: auto;
1807 }
1808
1809 .block-editor-grid-visualizer__grid {
1810 display: grid;
1811 position: absolute;
1812 }
1813
1814 .block-editor-grid-visualizer__cell {
1815 display: grid;
1816 position: relative;
1817 }
1818 .block-editor-grid-visualizer__cell .block-editor-inserter {
1819 color: inherit;
1820 z-index: 32;
1821 position: absolute;
1822 top: 0;
1823 bottom: 0;
1824 left: 0;
1825 right: 0;
1826 overflow: hidden;
1827 }
1828 .block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
1829 box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
1830 color: inherit;
1831 overflow: hidden;
1832 height: 100%;
1833 width: 100%;
1834 padding: 0 !important;
1835 opacity: 0;
1836 }
1837 .block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
1838 .block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
1839 background: var(--wp-admin-theme-color);
1840 }
1841 .block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
1842 .block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
1843 opacity: 1;
1844 background-color: color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
1845 }
1846
1847 .block-editor-grid-visualizer__drop-zone {
1848 background: rgba(204, 204, 204, 0.1);
1849 width: 100%;
1850 height: 100%;
1851 grid-column: 1;
1852 grid-row: 1;
1853 min-width: 8px;
1854 min-height: 8px;
1855 }
1856
1857 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
1858 z-index: 30;
1859 }
1860 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
1861 pointer-events: none;
1862 }
1863
1864 .block-editor-grid-item-resizer__box {
1865 border: 1px solid var(--wp-admin-theme-color);
1866 }
1867 .block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
1868 pointer-events: all;
1869 }
1870
1871 .block-editor-grid-item-mover__move-button-container {
1872 display: flex;
1873 padding: 0;
1874 border: none;
1875 justify-content: center;
1876 }
1877 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
1878 width: 24px;
1879 min-width: 0 !important;
1880 padding-left: 0;
1881 padding-right: 0;
1882 }
1883 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg {
1884 min-width: 24px;
1885 }
1886 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
1887 content: "";
1888 position: absolute;
1889 display: block;
1890 border-radius: 2px;
1891 height: 32px;
1892 left: 8px;
1893 right: 8px;
1894 z-index: -1;
1895 }
1896 @media not (prefers-reduced-motion) {
1897 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
1898 animation: components-button__appear-animation 0.1s ease;
1899 animation-fill-mode: forwards;
1900 }
1901 }
1902 .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 {
1903 box-shadow: none;
1904 outline: none;
1905 }
1906 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1907 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1908 outline: 2px solid transparent;
1909 }
1910
1911 .block-editor-grid-item-mover__move-vertical-button-container {
1912 display: flex;
1913 position: relative;
1914 }
1915 @media (min-width: 600px) {
1916 .block-editor-grid-item-mover__move-vertical-button-container {
1917 flex-direction: column;
1918 justify-content: space-around;
1919 }
1920 .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
1921 height: 20px !important;
1922 width: 100%;
1923 min-width: 0 !important;
1924 }
1925 .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button::before {
1926 height: calc(100% - 4px);
1927 }
1928 .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg,
1929 .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
1930 flex-shrink: 0;
1931 height: 20px;
1932 }
1933 }
1934
1935 @media (min-width: 600px) {
1936 .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
1937 height: 40px;
1938 position: relative;
1939 top: -4px;
1940 }
1941 }
1942
1943 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
1944 position: relative;
1945 }
1946 @media (min-width: 600px) {
1947 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
1948 content: "";
1949 height: 100%;
1950 width: 1px;
1951 background: #e0e0e0;
1952 position: absolute;
1953 top: 0;
1954 }
1955 }
1956 @media (min-width: 782px) {
1957 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
1958 background: #1e1e1e;
1959 }
1960 }
1961 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
1962 padding-right: 6px;
1963 }
1964 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
1965 right: 0;
1966 }
1967 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
1968 padding-left: 6px;
1969 }
1970 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
1971 left: 0;
1972 }
1973 @media (min-width: 600px) {
1974 .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
1975 content: "";
1976 height: 1px;
1977 width: 100%;
1978 background: #e0e0e0;
1979 position: absolute;
1980 top: 50%;
1981 left: 50%;
1982 transform: translate(-50%, 0);
1983 margin-top: -0.5px;
1984 }
1985 }
1986 @media (min-width: 782px) {
1987 .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
1988 background: #1e1e1e;
1989 }
1990 }
1991 .show-icon-labels .block-editor-grid-item-mover-button {
1992 white-space: nowrap;
1993 }
1994 .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
1995 height: 24px;
1996 background: #ddd;
1997 top: 4px;
1998 }
1999 .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
2000 background: #ddd;
2001 width: calc(100% - 24px);
2002 }
2003
2004 .block-editor-height-control {
2005 border: 0;
2006 margin: 0;
2007 padding: 0;
2008 }
2009
2010 .block-editor-iframe__container {
2011 width: 100%;
2012 height: 100%;
2013 }
2014
2015 .block-editor-iframe__scale-container {
2016 height: 100%;
2017 }
2018
2019 .block-editor-iframe__scale-container.is-zoomed-out {
2020 width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
2021 position: absolute;
2022 right: 0;
2023 }
2024
2025 .block-editor-block-types-list__list-item {
2026 display: block;
2027 width: 33.33%;
2028 padding: 0;
2029 margin: 0;
2030 }
2031 .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 {
2032 color: var(--wp-block-synced-color);
2033 }
2034 .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 {
2035 color: var(--wp-block-synced-color) !important;
2036 filter: brightness(0.95);
2037 }
2038 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
2039 color: var(--wp-block-synced-color) !important;
2040 }
2041 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled)::after {
2042 background: var(--wp-block-synced-color);
2043 }
2044
2045 .components-button.block-editor-block-types-list__item {
2046 display: flex;
2047 flex-direction: column;
2048 width: 100%;
2049 font-size: 13px;
2050 color: #1e1e1e;
2051 padding: 8px;
2052 align-items: stretch;
2053 justify-content: center;
2054 cursor: var(--wpds-cursor-control, pointer);
2055 background: transparent;
2056 word-break: break-word;
2057 }
2058 @media not (prefers-reduced-motion) {
2059 .components-button.block-editor-block-types-list__item {
2060 transition: all 0.05s ease-in-out;
2061 }
2062 }
2063 .components-button.block-editor-block-types-list__item {
2064 position: relative;
2065 height: auto;
2066 }
2067 .components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
2068 opacity: 0.6;
2069 cursor: default;
2070 }
2071 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover .block-editor-block-types-list__item-title {
2072 color: var(--wp-admin-theme-color) !important;
2073 filter: brightness(0.95);
2074 }
2075 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover svg {
2076 color: var(--wp-admin-theme-color) !important;
2077 }
2078 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover::after {
2079 content: "";
2080 position: absolute;
2081 top: 0;
2082 bottom: 0;
2083 left: 0;
2084 right: 0;
2085 border-radius: 2px;
2086 opacity: 0.04;
2087 background: var(--wp-admin-theme-color);
2088 pointer-events: none;
2089 }
2090 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2091 color: #fff;
2092 background: #1e1e1e;
2093 outline: 2px solid transparent;
2094 outline-offset: -2px;
2095 }
2096 .components-button.block-editor-block-types-list__item:not(:disabled):focus {
2097 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2098 }
2099
2100 .block-editor-block-types-list__item-icon {
2101 padding: 12px 20px;
2102 color: #1e1e1e;
2103 }
2104 @media not (prefers-reduced-motion) {
2105 .block-editor-block-types-list__item-icon {
2106 transition: all 0.05s ease-in-out;
2107 }
2108 }
2109 .block-editor-block-types-list__item-icon .block-editor-block-icon {
2110 margin-left: auto;
2111 margin-right: auto;
2112 }
2113 @media not (prefers-reduced-motion) {
2114 .block-editor-block-types-list__item-icon svg {
2115 transition: all 0.15s ease-out;
2116 }
2117 }
2118 .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2119 cursor: grab;
2120 }
2121
2122 .block-editor-block-types-list__item-title {
2123 padding: 4px 2px 8px;
2124 font-size: 12px;
2125 hyphens: auto;
2126 }
2127
2128 .modal-open .block-editor-inspector-list-view-content-popover {
2129 z-index: 99999;
2130 }
2131
2132 .block-editor-block-inspector__tabs [role=tablist] {
2133 width: 100%;
2134 }
2135
2136 .block-editor-inspector-popover-header {
2137 margin-bottom: 16px;
2138 }
2139
2140 .items-justified-left {
2141 justify-content: flex-start;
2142 }
2143
2144 .items-justified-center {
2145 justify-content: center;
2146 }
2147
2148 .items-justified-right {
2149 justify-content: flex-end;
2150 }
2151
2152 .items-justified-space-between {
2153 justify-content: space-between;
2154 }
2155
2156 @keyframes loadingpulse {
2157 0% {
2158 opacity: 1;
2159 }
2160 50% {
2161 opacity: 0;
2162 }
2163 100% {
2164 opacity: 1;
2165 }
2166 }
2167 .block-editor-link-control {
2168 position: relative;
2169 min-width: 350px;
2170 }
2171 .components-popover__content .block-editor-link-control {
2172 min-width: auto;
2173 width: 90vw;
2174 max-width: 350px;
2175 }
2176 .show-icon-labels .block-editor-link-control .components-button.has-icon svg {
2177 display: none;
2178 }
2179 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
2180 content: attr(aria-label);
2181 }
2182 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview {
2183 gap: 4px;
2184 flex-wrap: wrap;
2185 }
2186 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .components-button.has-icon {
2187 width: auto;
2188 padding: 4px;
2189 }
2190 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .block-editor-link-control_link-information {
2191 min-width: 100%;
2192 margin-right: 0;
2193 }
2194
2195 .block-editor-link-control__search-input-wrapper {
2196 margin-bottom: 8px;
2197 position: relative;
2198 }
2199
2200 .block-editor-link-control__help {
2201 padding: 0 16px;
2202 margin-top: -8px;
2203 margin-bottom: 0;
2204 font-size: 12px;
2205 font-style: normal;
2206 color: #757575;
2207 }
2208
2209 .block-editor-link-control__search-input-container,
2210 .block-editor-link-control__search-input-wrapper {
2211 position: relative;
2212 }
2213
2214 .block-editor-link-control__field {
2215 margin: 16px;
2216 }
2217 .block-editor-link-control__field .components-base-control__label {
2218 color: #1e1e1e;
2219 }
2220
2221 .block-editor-link-control__search-error {
2222 margin: -8px 16px 16px;
2223 }
2224
2225 .block-editor-link-control__search-actions {
2226 padding: 8px 16px 16px;
2227 }
2228
2229 .block-editor-link-control__search-results-wrapper {
2230 position: relative;
2231 }
2232 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
2233 content: "";
2234 position: absolute;
2235 left: -1px;
2236 right: 16px;
2237 display: block;
2238 pointer-events: none;
2239 z-index: 100;
2240 }
2241 .block-editor-link-control__search-results-wrapper::before {
2242 height: 8px;
2243 top: 0;
2244 bottom: auto;
2245 }
2246 .block-editor-link-control__search-results-wrapper::after {
2247 height: 16px;
2248 bottom: 0;
2249 top: auto;
2250 }
2251
2252 .block-editor-link-control__search-results {
2253 margin-top: -16px;
2254 padding: 8px;
2255 max-height: 200px;
2256 overflow-y: auto;
2257 }
2258 .block-editor-link-control__search-results.is-loading {
2259 opacity: 0.2;
2260 }
2261
2262 .block-editor-link-control__search-item.components-button.components-menu-item__button {
2263 height: auto;
2264 text-align: left;
2265 }
2266 .block-editor-link-control__search-item .components-menu-item__item {
2267 overflow: hidden;
2268 text-overflow: ellipsis;
2269 display: inline-block;
2270 width: 100%;
2271 }
2272 .block-editor-link-control__search-item .components-menu-item__item mark {
2273 font-weight: 600;
2274 color: inherit;
2275 background-color: transparent;
2276 }
2277 .block-editor-link-control__search-item .components-menu-item__shortcut {
2278 color: #757575;
2279 white-space: nowrap;
2280 }
2281 .block-editor-link-control__search-item[aria-selected] {
2282 background: #f0f0f0;
2283 }
2284
2285 .block-editor-link-control__preview {
2286 background: transparent;
2287 border: 0;
2288 padding: 16px;
2289 }
2290 .block-editor-link-control__preview .block-editor-link-control__link-information {
2291 margin-right: 8px;
2292 white-space: pre-wrap;
2293 overflow-wrap: break-word;
2294 }
2295 .block-editor-link-control__preview .block-editor-link-control__link-information .block-editor-link-control__preview-info {
2296 color: #757575;
2297 line-height: 1.1;
2298 font-size: 12px;
2299 word-break: break-all;
2300 }
2301 .block-editor-link-control__preview.is-url-title .block-editor-link-control__preview-title {
2302 word-break: break-all;
2303 }
2304 .block-editor-link-control__preview .block-editor-link-control__preview-image,
2305 .block-editor-link-control__preview .block-editor-link-control__preview-icon {
2306 position: relative;
2307 flex-shrink: 0;
2308 background-color: #f0f0f0;
2309 width: 32px;
2310 height: 32px;
2311 border-radius: 2px;
2312 }
2313 .block-editor-link-control__preview .block-editor-link-control__preview-icon img {
2314 width: 16px;
2315 }
2316 .block-editor-link-control__preview.is-error .block-editor-link-control__preview-icon {
2317 top: 0;
2318 width: 32px;
2319 max-height: 32px;
2320 }
2321 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2322 line-height: 1.1;
2323 }
2324 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2325 box-shadow: none;
2326 }
2327 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus-visible {
2328 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2329 outline: 2px solid transparent;
2330 text-decoration: none;
2331 }
2332 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2333 font-weight: 600;
2334 color: inherit;
2335 background-color: transparent;
2336 }
2337 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2338 font-weight: normal;
2339 }
2340 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2341 position: absolute;
2342 width: 1px;
2343 height: 1px;
2344 padding: 0;
2345 margin: -1px;
2346 overflow: hidden;
2347 clip: rect(0, 0, 0, 0);
2348 border: 0;
2349 }
2350
2351 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
2352 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon img {
2353 opacity: 0;
2354 }
2355 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2356 content: "";
2357 display: block;
2358 background-color: #f0f0f0;
2359 position: absolute;
2360 top: 0;
2361 left: 0;
2362 right: 0;
2363 bottom: 0;
2364 border-radius: 100%;
2365 }
2366 @media not (prefers-reduced-motion) {
2367 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2368 animation: loadingpulse 1s linear infinite;
2369 animation-delay: 0.5s;
2370 }
2371 }
2372
2373 .block-editor-link-control__loading {
2374 margin: 16px;
2375 display: flex;
2376 align-items: center;
2377 }
2378 .block-editor-link-control__loading .components-spinner {
2379 margin-top: 0;
2380 }
2381
2382 .components-button + .block-editor-link-control__search-create {
2383 overflow: visible;
2384 padding: 12px 16px;
2385 }
2386 .components-button + .block-editor-link-control__search-create::before {
2387 content: "";
2388 position: absolute;
2389 top: -10px;
2390 left: 0;
2391 display: block;
2392 width: 100%;
2393 }
2394
2395 .block-editor-link-control__search-create {
2396 align-items: center;
2397 }
2398 .block-editor-link-control__search-create .block-editor-link-control__preview-title {
2399 margin-bottom: 0;
2400 }
2401 .block-editor-link-control__search-create .block-editor-link-control__search-item-icon {
2402 top: 0;
2403 }
2404
2405 .block-editor-link-control__drawer-inner {
2406 display: flex;
2407 flex-direction: column;
2408 flex-basis: 100%;
2409 position: relative;
2410 }
2411
2412 .block-editor-link-control__settings {
2413 border: 0;
2414 padding: 0;
2415 margin: 0;
2416 }
2417
2418 .block-editor-link-control__setting {
2419 margin-bottom: 0;
2420 flex: 1;
2421 padding: 8px 24px;
2422 }
2423 .block-editor-link-control__setting .components-base-control:not(.components-input-control) .components-base-control__field {
2424 display: flex;
2425 }
2426 .block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
2427 color: #1e1e1e;
2428 }
2429 .block-editor-link-control__setting input {
2430 margin-left: 0;
2431 }
2432 .is-preview .block-editor-link-control__setting {
2433 padding: 20px 8px 8px 0;
2434 }
2435
2436 .block-editor-link-control__tools {
2437 padding: 8px 8px 0 8px;
2438 margin-top: -16px;
2439 }
2440 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
2441 padding-left: 0;
2442 gap: 0;
2443 }
2444 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] {
2445 color: #1e1e1e;
2446 }
2447 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2448 visibility: visible;
2449 }
2450 @media not (prefers-reduced-motion) {
2451 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2452 transition: transform 0.1s ease;
2453 }
2454 }
2455 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2456 transform: rotate(90deg);
2457 }
2458 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2459 visibility: visible;
2460 transform: rotate(0deg);
2461 }
2462 @media not (prefers-reduced-motion) {
2463 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2464 transition: transform 0.1s ease;
2465 }
2466 }
2467
2468 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
2469 display: block;
2470 }
2471 .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner {
2472 position: absolute;
2473 left: auto;
2474 bottom: auto;
2475 top: calc(50% - 16px / 2);
2476 right: 40px;
2477 }
2478
2479 .block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
2480 top: calc(50% + 16px / 4);
2481 right: 12px;
2482 }
2483
2484 /**
2485 * Link Picker Styles
2486 */
2487 .link-preview-button.components-button {
2488 width: 100%;
2489 height: auto;
2490 padding: 12px;
2491 box-shadow: inset 0 0 0 1px #949494;
2492 border-color: #949494;
2493 }
2494
2495 .link-preview-button__image-container {
2496 width: 24px;
2497 height: 24px;
2498 flex-shrink: 0;
2499 }
2500
2501 .link-preview-button__image {
2502 width: 100%;
2503 height: 100%;
2504 -o-object-fit: cover;
2505 object-fit: cover;
2506 border-radius: 2px;
2507 }
2508
2509 .link-preview-button__content {
2510 min-width: 0;
2511 flex: 1;
2512 }
2513
2514 .link-preview-button__details {
2515 min-width: 0;
2516 flex: 1;
2517 }
2518
2519 .link-preview-button__title,
2520 .link-preview-button__hint {
2521 min-width: 0;
2522 display: block;
2523 width: 100%;
2524 text-align: left;
2525 overflow: hidden;
2526 text-overflow: ellipsis;
2527 white-space: nowrap;
2528 }
2529
2530 .link-preview-button__title {
2531 margin-top: 4px;
2532 font-weight: 500;
2533 color: #1e1e1e;
2534 display: block;
2535 }
2536
2537 .link-preview-button__hint {
2538 font-size: 12px;
2539 color: #757575;
2540 font-weight: 400;
2541 }
2542
2543 .link-preview-button__icon {
2544 color: #1e1e1e;
2545 }
2546
2547 .link-preview-button__badges {
2548 margin-top: 8px;
2549 }
2550
2551 .block-editor-list-view-tree {
2552 width: 100%;
2553 border-collapse: collapse;
2554 padding: 0;
2555 margin: 0;
2556 }
2557 .components-modal__content .block-editor-list-view-tree {
2558 margin: -12px -6px 0;
2559 width: calc(100% + 12px);
2560 }
2561 .block-editor-list-view-tree.is-dragging tbody {
2562 pointer-events: none;
2563 }
2564
2565 .block-editor-list-view-leaf {
2566 position: relative;
2567 transform: translateY(0);
2568 }
2569 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2570 cursor: grab;
2571 }
2572 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
2573 color: inherit;
2574 }
2575 .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
2576 color: var(--wp-admin-theme-color);
2577 }
2578 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2579 fill: currentColor;
2580 }
2581 @media (forced-colors: active) {
2582 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2583 fill: CanvasText;
2584 }
2585 }
2586 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2587 color: inherit;
2588 }
2589 .block-editor-list-view-leaf.is-selected td {
2590 background: var(--wp-admin-theme-color);
2591 }
2592 .block-editor-list-view-leaf.is-selected.is-synced td {
2593 background: var(--wp-block-synced-color);
2594 }
2595 .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,
2596 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2597 color: var(--wp-block-synced-color);
2598 }
2599 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2600 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2601 }
2602 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2603 color: #fff;
2604 }
2605 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2606 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2607 }
2608 .block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2609 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2610 }
2611 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2612 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2613 }
2614 .block-editor-list-view-leaf.is-first-selected td:first-child {
2615 border-top-left-radius: 2px;
2616 }
2617 .block-editor-list-view-leaf.is-first-selected td:last-child {
2618 border-top-right-radius: 2px;
2619 }
2620 .block-editor-list-view-leaf.is-last-selected td:first-child {
2621 border-bottom-left-radius: 2px;
2622 }
2623 .block-editor-list-view-leaf.is-last-selected td:last-child {
2624 border-bottom-right-radius: 2px;
2625 }
2626 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
2627 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2628 }
2629 .block-editor-list-view-leaf.is-synced-branch.is-branch-selected {
2630 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
2631 }
2632 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
2633 border-top-left-radius: 2px;
2634 }
2635 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
2636 border-top-right-radius: 2px;
2637 }
2638 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:first-child {
2639 border-top-left-radius: 2px;
2640 }
2641 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:last-child {
2642 border-top-right-radius: 2px;
2643 }
2644 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:first-child {
2645 border-bottom-left-radius: 2px;
2646 }
2647 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:last-child {
2648 border-bottom-right-radius: 2px;
2649 }
2650 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
2651 border-radius: 0;
2652 }
2653 @media not (prefers-reduced-motion) {
2654 .block-editor-list-view-leaf.is-displacement-normal {
2655 transition: transform 0.2s;
2656 }
2657 }
2658 .block-editor-list-view-leaf.is-displacement-normal {
2659 transform: translateY(0);
2660 }
2661 @media not (prefers-reduced-motion) {
2662 .block-editor-list-view-leaf.is-displacement-up {
2663 transition: transform 0.2s;
2664 }
2665 }
2666 .block-editor-list-view-leaf.is-displacement-up {
2667 transform: translateY(-32px);
2668 }
2669 @media not (prefers-reduced-motion) {
2670 .block-editor-list-view-leaf.is-displacement-down {
2671 transition: transform 0.2s;
2672 }
2673 }
2674 .block-editor-list-view-leaf.is-displacement-down {
2675 transform: translateY(32px);
2676 }
2677 @media not (prefers-reduced-motion) {
2678 .block-editor-list-view-leaf.is-after-dragged-blocks {
2679 transition: transform 0.2s;
2680 }
2681 }
2682 .block-editor-list-view-leaf.is-after-dragged-blocks {
2683 transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2684 }
2685 @media not (prefers-reduced-motion) {
2686 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2687 transition: transform 0.2s;
2688 }
2689 }
2690 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2691 transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2692 }
2693 @media not (prefers-reduced-motion) {
2694 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2695 transition: transform 0.2s;
2696 }
2697 }
2698 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2699 transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2700 }
2701 .block-editor-list-view-leaf.is-dragging {
2702 opacity: 0;
2703 left: 0;
2704 pointer-events: none;
2705 z-index: -9999;
2706 }
2707 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2708 display: flex;
2709 align-items: center;
2710 width: 100%;
2711 height: 32px;
2712 padding: 6px 4px 6px 0;
2713 text-align: left;
2714 position: relative;
2715 white-space: nowrap;
2716 border-radius: 2px;
2717 box-sizing: border-box;
2718 color: inherit;
2719 font-family: inherit;
2720 font-size: 13px;
2721 font-weight: 400;
2722 margin: 0;
2723 text-decoration: none;
2724 }
2725 @media not (prefers-reduced-motion) {
2726 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2727 transition: box-shadow 0.1s linear;
2728 }
2729 }
2730 .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2731 padding-left: 0;
2732 padding-right: 0;
2733 }
2734 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2735 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2736 box-shadow: none;
2737 }
2738 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2739 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2740 content: "";
2741 position: absolute;
2742 top: 0;
2743 right: -29px;
2744 bottom: 0;
2745 left: 0;
2746 border-radius: inherit;
2747 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2748 z-index: 2;
2749 pointer-events: none;
2750 }
2751 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2752 right: 0;
2753 }
2754 .block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2755 .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2756 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2757 z-index: 1;
2758 }
2759 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2760 opacity: 1;
2761 }
2762 @keyframes __wp-base-styles-fade-in {
2763 from {
2764 opacity: 0;
2765 }
2766 to {
2767 opacity: 1;
2768 }
2769 }
2770 @media not (prefers-reduced-motion) {
2771 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2772 animation: __wp-base-styles-fade-in 0.08s linear 0s;
2773 animation-fill-mode: forwards;
2774 }
2775 }
2776 .block-editor-list-view-leaf .block-editor-block-icon {
2777 margin-right: 4px;
2778 flex: 0 0 24px;
2779 }
2780 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
2781 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
2782 .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
2783 padding: 0;
2784 }
2785 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
2786 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
2787 line-height: 0;
2788 width: 28px;
2789 vertical-align: middle;
2790 }
2791 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
2792 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
2793 opacity: 0;
2794 }
2795 .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 > *,
2796 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
2797 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:focus-within > *,
2798 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
2799 opacity: 1;
2800 }
2801 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper {
2802 display: flex;
2803 height: 100%;
2804 flex-direction: column;
2805 align-items: center;
2806 }
2807 .block-editor-list-view-leaf .block-editor-block-mover-button {
2808 position: relative;
2809 width: 36px;
2810 height: 24px;
2811 }
2812 .block-editor-list-view-leaf .block-editor-block-mover-button svg {
2813 position: relative;
2814 height: 24px;
2815 }
2816 .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button {
2817 margin-top: -6px;
2818 align-items: flex-end;
2819 }
2820 .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button svg {
2821 bottom: -4px;
2822 }
2823 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button {
2824 margin-bottom: -6px;
2825 align-items: flex-start;
2826 }
2827 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2828 top: -4px;
2829 }
2830 .block-editor-list-view-leaf .block-editor-block-mover-button::before {
2831 height: 16px;
2832 min-width: 100%;
2833 left: 0;
2834 right: 0;
2835 }
2836 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2837 background: #1e1e1e;
2838 color: #fff;
2839 height: 24px;
2840 margin: 6px 6px 6px 1px;
2841 min-width: 24px;
2842 }
2843 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2844 color: #fff;
2845 }
2846 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2847 left: 2px;
2848 position: relative;
2849 }
2850 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
2851 flex: 1;
2852 position: relative;
2853 }
2854 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
2855 position: absolute;
2856 width: 100%;
2857 transform: translateY(-50%);
2858 }
2859 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
2860 position: relative;
2861 max-width: min(110px, 40%);
2862 width: 100%;
2863 }
2864 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2865 position: absolute;
2866 right: 0;
2867 transform: translateY(-50%);
2868 }
2869 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2870 background: rgba(0, 0, 0, 0.3);
2871 color: #fff;
2872 }
2873 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
2874 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
2875 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
2876 line-height: 0;
2877 }
2878 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
2879 display: flex;
2880 }
2881 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image {
2882 background-size: cover;
2883 width: 18px;
2884 height: 18px;
2885 border-radius: 1px;
2886 }
2887 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
2888 box-shadow: 0 0 0 2px #fff;
2889 }
2890 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:first-child) {
2891 margin-left: -6px;
2892 }
2893 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2894 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2895 }
2896
2897 .block-editor-list-view-draggable-chip {
2898 opacity: 0.8;
2899 }
2900
2901 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
2902 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
2903 .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
2904 .block-editor-list-view-appender__cell .block-editor-list-view-appender__container {
2905 display: flex;
2906 }
2907
2908 .block-editor-list-view__expander {
2909 height: 24px;
2910 width: 24px;
2911 cursor: var(--wpds-cursor-control, pointer);
2912 }
2913
2914 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
2915 margin-left: 192px;
2916 }
2917
2918 .block-editor-list-view-leaf[aria-level="1"] .block-editor-list-view__expander {
2919 margin-left: 0;
2920 }
2921
2922 .block-editor-list-view-leaf[aria-level="2"] .block-editor-list-view__expander {
2923 margin-left: 24px;
2924 }
2925
2926 .block-editor-list-view-leaf[aria-level="3"] .block-editor-list-view__expander {
2927 margin-left: 48px;
2928 }
2929
2930 .block-editor-list-view-leaf[aria-level="4"] .block-editor-list-view__expander {
2931 margin-left: 72px;
2932 }
2933
2934 .block-editor-list-view-leaf[aria-level="5"] .block-editor-list-view__expander {
2935 margin-left: 96px;
2936 }
2937
2938 .block-editor-list-view-leaf[aria-level="6"] .block-editor-list-view__expander {
2939 margin-left: 120px;
2940 }
2941
2942 .block-editor-list-view-leaf[aria-level="7"] .block-editor-list-view__expander {
2943 margin-left: 144px;
2944 }
2945
2946 .block-editor-list-view-leaf[aria-level="8"] .block-editor-list-view__expander {
2947 margin-left: 168px;
2948 }
2949
2950 .block-editor-list-view-leaf .block-editor-list-view__expander {
2951 visibility: hidden;
2952 }
2953
2954 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
2955 visibility: visible;
2956 }
2957 @media not (prefers-reduced-motion) {
2958 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
2959 transition: transform 0.2s ease;
2960 }
2961 }
2962 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
2963 transform: rotate(90deg);
2964 }
2965
2966 .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
2967 visibility: visible;
2968 transform: rotate(0deg);
2969 }
2970 @media not (prefers-reduced-motion) {
2971 .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
2972 transition: transform 0.2s ease;
2973 }
2974 }
2975
2976 .block-editor-list-view-drop-indicator {
2977 pointer-events: none;
2978 }
2979 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
2980 background: var(--wp-admin-theme-color);
2981 height: 4px;
2982 border-radius: 4px;
2983 }
2984
2985 .block-editor-list-view-drop-indicator--preview {
2986 pointer-events: none;
2987 }
2988 .block-editor-list-view-drop-indicator--preview .components-popover__content {
2989 overflow: hidden !important;
2990 }
2991 .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line {
2992 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2993 height: 32px;
2994 border-radius: 4px;
2995 overflow: hidden;
2996 }
2997 .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker {
2998 background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
2999 }
3000
3001 .block-editor-list-view-placeholder {
3002 padding: 0;
3003 margin: 0;
3004 height: 32px;
3005 }
3006
3007 .list-view-appender .block-editor-inserter__toggle {
3008 background-color: #1e1e1e;
3009 color: #fff;
3010 margin: 8px 0 0 24px;
3011 height: 24px;
3012 padding: 0;
3013 }
3014 .list-view-appender .block-editor-inserter__toggle.has-icon.is-next-40px-default-size {
3015 min-width: 24px;
3016 }
3017 .list-view-appender .block-editor-inserter__toggle:hover, .list-view-appender .block-editor-inserter__toggle:focus {
3018 background: var(--wp-admin-theme-color);
3019 color: #fff;
3020 }
3021
3022 .list-view-appender__description {
3023 display: none;
3024 }
3025
3026 .block-editor-media-placeholder__url-input-form {
3027 min-width: 260px;
3028 }
3029 @media (min-width: 600px) {
3030 .block-editor-media-placeholder__url-input-form {
3031 width: 300px;
3032 }
3033 }
3034 .block-editor-media-placeholder__url-input-form input {
3035 /* rtl:ignore */
3036 direction: ltr;
3037 }
3038
3039 .modal-open .block-editor-media-replace-flow__options {
3040 z-index: 99999;
3041 }
3042
3043 .block-editor-media-replace-flow__indicator {
3044 margin-left: 4px;
3045 }
3046
3047 .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
3048 border-top: 1px solid #ddd;
3049 margin-top: 8px;
3050 padding-bottom: 8px;
3051 }
3052
3053 .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 {
3054 border-top-color: #1e1e1e;
3055 }
3056
3057 .block-editor-media-flow__url-input {
3058 margin-right: -8px;
3059 margin-left: -8px;
3060 padding: 16px;
3061 }
3062 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
3063 display: block;
3064 top: 16px;
3065 margin-bottom: 8px;
3066 }
3067 .block-editor-media-flow__url-input .block-editor-link-control {
3068 width: 300px;
3069 }
3070 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
3071 padding: 0;
3072 margin: 0;
3073 }
3074 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__tools {
3075 justify-content: flex-end;
3076 padding: 16px var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
3077 }
3078 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__preview.is-current {
3079 width: auto;
3080 padding: 0;
3081 }
3082 .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] {
3083 margin: 0;
3084 width: 100%;
3085 }
3086 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3087 padding: 8px 0 0;
3088 }
3089
3090 .block-editor-multi-selection-inspector__card {
3091 padding: 16px;
3092 }
3093
3094 .block-editor-multi-selection-inspector__card-title {
3095 font-weight: 499;
3096 }
3097
3098 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3099 margin-left: -2px;
3100 padding: 0 3px;
3101 width: 36px;
3102 height: 24px;
3103 }
3104
3105 .block-editor-responsive-block-control {
3106 margin-bottom: 28px;
3107 border-bottom: 1px solid #ccc;
3108 padding-bottom: 14px;
3109 }
3110 .block-editor-responsive-block-control:last-child {
3111 padding-bottom: 0;
3112 border-bottom: 0;
3113 }
3114
3115 .block-editor-responsive-block-control__title {
3116 margin: 0;
3117 margin-bottom: 0.6em;
3118 margin-left: -3px;
3119 }
3120
3121 .block-editor-responsive-block-control__label {
3122 font-weight: 600;
3123 margin-bottom: 0.6em;
3124 margin-left: -3px;
3125 }
3126
3127 .block-editor-responsive-block-control__inner {
3128 margin-left: -1px;
3129 }
3130
3131 .block-editor-responsive-block-control__toggle {
3132 margin-left: 1px;
3133 }
3134
3135 .block-editor-responsive-block-control .components-base-control__help {
3136 border: 0;
3137 clip-path: inset(50%);
3138 height: 1px;
3139 margin: -1px;
3140 overflow: hidden;
3141 padding: 0;
3142 position: absolute;
3143 width: 1px;
3144 word-wrap: normal !important;
3145 word-break: normal !important;
3146 }
3147
3148 .preset-input-control__wrapper > * {
3149 flex: 1;
3150 }
3151 .preset-input-control__wrapper > .preset-input-control__icon,
3152 .preset-input-control__wrapper > .preset-input-control__custom-toggle {
3153 flex: none;
3154 }
3155
3156 .components-popover.block-editor-rich-text__inline-format-toolbar {
3157 z-index: 99998;
3158 }
3159 .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content {
3160 width: auto;
3161 min-width: auto;
3162 margin-bottom: 8px;
3163 box-shadow: none;
3164 outline: none;
3165 border-radius: 2px;
3166 }
3167 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
3168 border-radius: 2px;
3169 }
3170 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
3171 background: none;
3172 }
3173 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
3174 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
3175 min-width: 48px;
3176 min-height: 48px;
3177 padding-left: 12px;
3178 padding-right: 12px;
3179 }
3180
3181 .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle {
3182 justify-content: center;
3183 }
3184
3185 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon {
3186 width: auto;
3187 }
3188 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg {
3189 display: none;
3190 }
3191 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after {
3192 content: attr(aria-label);
3193 }
3194
3195 .block-editor-skip-to-selected-block {
3196 position: absolute;
3197 top: -9999em;
3198 }
3199 .block-editor-skip-to-selected-block:focus {
3200 font-size: 14px;
3201 font-weight: 600;
3202 background: #f1f1f1;
3203 z-index: 100000;
3204 }
3205
3206 .block-editor-tabbed-sidebar {
3207 background-color: #fff;
3208 height: 100%;
3209 display: flex;
3210 flex-direction: column;
3211 flex-grow: 1;
3212 overflow: hidden;
3213 }
3214
3215 .block-editor-tabbed-sidebar__tablist-and-close-button {
3216 border-bottom: 1px solid #ddd;
3217 display: flex;
3218 justify-content: space-between;
3219 padding-right: 8px;
3220 }
3221
3222 .block-editor-tabbed-sidebar__close-button {
3223 background: #fff;
3224 /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
3225 order: 1;
3226 align-self: center;
3227 }
3228
3229 .block-editor-tabbed-sidebar__tablist {
3230 margin-bottom: -1px;
3231 }
3232
3233 .block-editor-tabbed-sidebar__tabpanel {
3234 display: flex;
3235 flex-grow: 1;
3236 flex-direction: column;
3237 overflow-y: auto;
3238 scrollbar-gutter: auto;
3239 }
3240
3241 .block-editor-block-list__block .block-editor-url-input,
3242 .components-popover .block-editor-url-input,
3243 .block-editor-url-input {
3244 flex-grow: 1;
3245 position: relative;
3246 padding: 1px;
3247 }
3248 @media (min-width: 600px) {
3249 .block-editor-block-list__block .block-editor-url-input,
3250 .components-popover .block-editor-url-input,
3251 .block-editor-url-input {
3252 min-width: 300px;
3253 width: auto;
3254 }
3255 }
3256 .block-editor-block-list__block .block-editor-url-input.is-full-width,
3257 .components-popover .block-editor-url-input.is-full-width,
3258 .block-editor-url-input.is-full-width {
3259 width: 100%;
3260 }
3261 .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
3262 .components-popover .block-editor-url-input.is-full-width__suggestions,
3263 .block-editor-url-input.is-full-width__suggestions {
3264 width: 100%;
3265 }
3266 .block-editor-block-list__block .block-editor-url-input .components-spinner,
3267 .components-popover .block-editor-url-input .components-spinner,
3268 .block-editor-url-input .components-spinner {
3269 position: absolute;
3270 margin: 0;
3271 top: calc(50% - 16px / 2);
3272 right: 8px;
3273 }
3274
3275 .block-editor-url-input__suggestions {
3276 max-height: 200px;
3277 }
3278 @media not (prefers-reduced-motion) {
3279 .block-editor-url-input__suggestions {
3280 transition: all 0.15s ease-in-out;
3281 }
3282 }
3283 .block-editor-url-input__suggestions {
3284 padding: 4px 0;
3285 width: 302px;
3286 overflow-y: auto;
3287 }
3288
3289 .block-editor-url-input__suggestions,
3290 .block-editor-url-input .components-spinner {
3291 display: none;
3292 }
3293 @media (min-width: 600px) {
3294 .block-editor-url-input__suggestions,
3295 .block-editor-url-input .components-spinner {
3296 display: grid;
3297 }
3298 }
3299
3300 .block-editor-url-input__suggestion {
3301 min-height: 36px;
3302 height: auto;
3303 color: #757575;
3304 display: block;
3305 font-size: 13px;
3306 cursor: var(--wpds-cursor-control, pointer);
3307 background: #fff;
3308 width: 100%;
3309 border: none;
3310 text-align: left;
3311 box-shadow: none;
3312 }
3313 .block-editor-url-input__suggestion:hover {
3314 background: #ddd;
3315 }
3316 .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected {
3317 background: var(--wp-admin-theme-color-darker-20);
3318 color: #fff;
3319 outline: none;
3320 }
3321
3322 .components-toolbar-group > .block-editor-url-input__button,
3323 .components-toolbar > .block-editor-url-input__button {
3324 position: inherit;
3325 }
3326
3327 .block-editor-url-input__button .block-editor-url-input__back {
3328 margin-right: 4px;
3329 overflow: visible;
3330 }
3331 .block-editor-url-input__button .block-editor-url-input__back::after {
3332 content: "";
3333 position: absolute;
3334 display: block;
3335 width: 1px;
3336 height: 24px;
3337 right: -1px;
3338 background: #ddd;
3339 }
3340
3341 .block-editor-url-input__button-modal {
3342 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);
3343 border: 1px solid #ddd;
3344 background: #fff;
3345 }
3346
3347 .block-editor-url-input__button-modal-line {
3348 display: flex;
3349 flex-direction: row;
3350 flex-grow: 1;
3351 flex-shrink: 1;
3352 min-width: 0;
3353 align-items: flex-start;
3354 }
3355
3356 .block-editor-url-popover__additional-controls {
3357 border-top: 1px solid #1e1e1e;
3358 padding: 8px 8px;
3359 }
3360
3361 .block-editor-url-popover__input-container {
3362 padding: 8px;
3363 }
3364
3365 .block-editor-url-popover__row {
3366 display: flex;
3367 gap: 4px;
3368 align-items: center;
3369 }
3370
3371 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
3372 flex-grow: 1;
3373 gap: 8px;
3374 }
3375
3376 .block-editor-url-popover__additional-controls .components-button.has-icon {
3377 padding-left: 8px;
3378 padding-right: 8px;
3379 height: auto;
3380 text-align: left;
3381 }
3382 .block-editor-url-popover__additional-controls .components-button.has-icon > svg {
3383 margin-right: 8px;
3384 }
3385
3386 .block-editor-url-popover__settings-toggle {
3387 flex-shrink: 0;
3388 }
3389 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
3390 transform: rotate(180deg);
3391 }
3392
3393 .block-editor-url-popover__settings {
3394 display: block;
3395 padding: 16px;
3396 border-top: 1px solid #1e1e1e;
3397 }
3398
3399 .block-editor-url-popover__link-editor,
3400 .block-editor-url-popover__link-viewer {
3401 display: flex;
3402 }
3403
3404 .block-editor-url-popover__link-viewer-url {
3405 display: flex;
3406 align-items: center;
3407 flex-grow: 1;
3408 flex-shrink: 1;
3409 overflow: hidden;
3410 text-overflow: ellipsis;
3411 white-space: nowrap;
3412 margin-right: 8px;
3413 min-width: 150px;
3414 max-width: 350px;
3415 }
3416 .block-editor-url-popover__link-viewer-url.has-invalid-link {
3417 color: #cc1818;
3418 }
3419
3420 .block-editor-url-popover__expand-on-click {
3421 display: flex;
3422 align-items: center;
3423 min-width: 350px;
3424 white-space: nowrap;
3425 }
3426 .block-editor-url-popover__expand-on-click .text {
3427 flex-grow: 1;
3428 }
3429 .block-editor-url-popover__expand-on-click .text p {
3430 margin: 0;
3431 line-height: 16px;
3432 }
3433 .block-editor-url-popover__expand-on-click .text p.description {
3434 color: #757575;
3435 font-size: 12px;
3436 }
3437
3438 .background-block-support-panel {
3439 /* Increased specificity required to remove the slot wrapper's row gap */
3440 }
3441 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3442 row-gap: 0;
3443 }
3444
3445 .block-editor-content-only-controls__link {
3446 width: 100%;
3447 box-shadow: inset 0 0 0 1px #ccc;
3448 }
3449 .block-editor-content-only-controls__link:focus:not(:disabled) {
3450 box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3451 }
3452
3453 .block-editor-content-only-controls__link-row {
3454 align-items: center;
3455 }
3456
3457 .block-editor-content-only-controls__link-title {
3458 width: 100%;
3459 white-space: nowrap;
3460 text-overflow: ellipsis;
3461 overflow: hidden;
3462 }
3463
3464 .block-editor-content-only-controls__media {
3465 width: 100%;
3466 box-shadow: inset 0 0 0 1px #ccc;
3467 padding-right: 32px;
3468 }
3469 .block-editor-content-only-controls__media:focus:not(:disabled) {
3470 box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3471 }
3472
3473 .block-editor-content-only-controls__media-replace-flow {
3474 display: block;
3475 }
3476
3477 .block-editor-content-only-controls__media-row {
3478 align-items: center;
3479 }
3480
3481 .block-editor-content-only-controls__media-placeholder {
3482 width: 24px;
3483 height: 24px;
3484 border-radius: 2px;
3485 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3486 display: inline-block;
3487 padding: 0;
3488 background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3489 }
3490
3491 .block-editor-content-only-controls__media-title {
3492 width: 100%;
3493 white-space: nowrap;
3494 text-overflow: ellipsis;
3495 overflow: hidden;
3496 }
3497
3498 .block-editor-content-only-controls__media-thumbnail {
3499 width: 20px;
3500 height: 20px;
3501 border-radius: 2px;
3502 align-self: center;
3503 overflow: hidden;
3504 }
3505 .block-editor-content-only-controls__media-thumbnail img {
3506 width: 100% !important;
3507 height: 100% !important;
3508 -o-object-fit: cover;
3509 object-fit: cover;
3510 }
3511
3512 .block-editor-content-only-controls {
3513 position: relative;
3514 }
3515
3516 .block-editor-content-only-controls__media-reset {
3517 position: absolute;
3518 right: 0;
3519 top: 8px;
3520 margin: auto 8px auto;
3521 opacity: 0;
3522 border-radius: 2px;
3523 }
3524 @media not (prefers-reduced-motion) {
3525 .block-editor-content-only-controls__media-reset {
3526 transition: opacity 0.1s ease-in-out;
3527 }
3528 }
3529 .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 {
3530 opacity: 1;
3531 }
3532 @media (hover: none) {
3533 .block-editor-content-only-controls__media-reset {
3534 opacity: 1;
3535 }
3536 }
3537
3538 .block-editor-content-only-controls__rich-text {
3539 width: 100%;
3540 margin: 0;
3541 background: #fff;
3542 color: #1e1e1e;
3543 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3544 padding: 6px 8px;
3545 /* Fonts smaller than 16px causes mobile safari to zoom. */
3546 font-size: 16px;
3547 /* Override core line-height. To be reviewed. */
3548 line-height: normal;
3549 box-shadow: 0 0 0 transparent;
3550 border-radius: 2px;
3551 border: 1px solid #949494;
3552 }
3553 @media not (prefers-reduced-motion) {
3554 .block-editor-content-only-controls__rich-text {
3555 transition: box-shadow 0.1s linear;
3556 }
3557 }
3558 @media (min-width: 600px) {
3559 .block-editor-content-only-controls__rich-text {
3560 font-size: 13px;
3561 /* Override core line-height. To be reviewed. */
3562 line-height: normal;
3563 }
3564 }
3565 .block-editor-content-only-controls__rich-text:focus {
3566 border-color: var(--wp-admin-theme-color, #3858e9);
3567 box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3568 outline: 2px solid transparent;
3569 }
3570 .block-editor-content-only-controls__rich-text::-moz-placeholder {
3571 color: rgba(30, 30, 30, 0.62);
3572 }
3573 .block-editor-content-only-controls__rich-text::placeholder {
3574 color: rgba(30, 30, 30, 0.62);
3575 }
3576 .block-editor-content-only-controls__rich-text {
3577 border-color: #949494;
3578 }
3579 .block-editor-content-only-controls__rich-text::-moz-placeholder {
3580 color: color-mix(in srgb, #1e1e1e, transparent 38%);
3581 }
3582 .block-editor-content-only-controls__rich-text::placeholder {
3583 color: color-mix(in srgb, #1e1e1e, transparent 38%);
3584 }
3585 .block-editor-content-only-controls__rich-text {
3586 min-height: 40px;
3587 padding: 12px;
3588 }
3589
3590 .block-editor-block-fields__container {
3591 padding: 0 16px 16px;
3592 }
3593 .block-editor-block-fields__container:first-of-type {
3594 padding-block-start: 8px;
3595 /*
3596 * Add border for the entire content controls and remove the similar border
3597 * for tools panel.
3598 */
3599 border-block-start: 1px solid #e0e0e0;
3600 }
3601
3602 .block-editor-block-fields__header {
3603 padding: 8px 0;
3604 margin-bottom: 4px;
3605 }
3606
3607 .block-editor-block-fields__header-icon {
3608 flex: 0 0 24px;
3609 }
3610
3611 .block-editor-block-fields__header-title {
3612 flex: 1;
3613 /* Override the default margin on a h2 element. */
3614 margin: 0 !important;
3615 }
3616
3617 .block-editor-hooks__block-hooks {
3618 /**
3619 * Un-reverse the flex direction for the toggle's label.
3620 */
3621 }
3622 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
3623 flex-direction: row;
3624 }
3625 .block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
3626 color: #757575;
3627 font-size: 12px;
3628 margin-bottom: 16px;
3629 }
3630
3631 div.block-editor-bindings__panel {
3632 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3633 }
3634 div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
3635 color: inherit;
3636 }
3637
3638 .border-block-support-panel .single-column {
3639 grid-column: span 1;
3640 }
3641
3642 .color-block-support-panel .block-editor-contrast-checker {
3643 grid-column: span 2;
3644 margin-top: 16px;
3645 }
3646 .color-block-support-panel {
3647 /* Increased specificity required to remove the slot wrapper's row gap */
3648 }
3649 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3650 row-gap: 0;
3651 }
3652
3653 .elements-block-support-panel {
3654 /* Increased specificity required to remove the slot wrapper's row gap */
3655 }
3656 .elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3657 row-gap: 0;
3658 }
3659
3660 .dimensions-block-support-panel .single-column {
3661 grid-column: span 1;
3662 }
3663
3664 .block-editor-hooks__layout-constrained .components-base-control {
3665 margin-bottom: 0;
3666 }
3667
3668 .block-editor-hooks__layout-constrained-helptext {
3669 color: #757575;
3670 font-size: 12px;
3671 margin-bottom: 0;
3672 }
3673
3674 .layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3675 grid-column: 1/-1;
3676 }
3677
3678 .block-editor-hooks__flex-layout-justification-controls,
3679 .block-editor-hooks__flex-layout-orientation-controls {
3680 margin-bottom: 12px;
3681 }
3682 .block-editor-hooks__flex-layout-justification-controls legend,
3683 .block-editor-hooks__flex-layout-orientation-controls legend {
3684 margin-bottom: 8px;
3685 }
3686
3687 .block-editor-hooks__grid-layout-columns-and-rows-controls,
3688 .block-editor-hooks__grid-layout-minimum-width-control {
3689 border: 0;
3690 padding: 0;
3691 margin: 0;
3692 }
3693
3694 .block-editor__spacing-visualizer {
3695 position: absolute;
3696 top: 0;
3697 bottom: 0;
3698 left: 0;
3699 right: 0;
3700 opacity: 0.5;
3701 border-color: var(--wp-admin-theme-color);
3702 border-style: solid;
3703 pointer-events: none;
3704 box-sizing: border-box;
3705 }
3706
3707 .typography-block-support-panel .single-column {
3708 grid-column: span 1;
3709 }
3710
3711 /**
3712 * Block Toolbar
3713 */
3714 .block-editor-block-toolbar {
3715 display: flex;
3716 flex-grow: 1;
3717 width: 100%;
3718 position: relative;
3719 overflow-y: hidden;
3720 overflow-x: auto;
3721 }
3722 @media not (prefers-reduced-motion) {
3723 .block-editor-block-toolbar {
3724 transition: border-color 0.1s linear, box-shadow 0.1s linear;
3725 }
3726 }
3727 @media (min-width: 600px) {
3728 .block-editor-block-toolbar {
3729 overflow: inherit;
3730 }
3731 }
3732 .block-editor-block-toolbar .components-toolbar-group,
3733 .block-editor-block-toolbar .components-toolbar {
3734 background: none;
3735 margin-top: -1px;
3736 margin-bottom: -1px;
3737 border: 0;
3738 border-right: 1px solid #ddd;
3739 }
3740 .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button::before {
3741 background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
3742 border-radius: 2px;
3743 }
3744 .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true] {
3745 color: #1e1e1e;
3746 }
3747 .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
3748 color: #1e1e1e;
3749 }
3750 .block-editor-block-toolbar.is-synced .block-editor-block-toolbar__block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-toolbar__block-icon {
3751 color: var(--wp-block-synced-color);
3752 }
3753 .block-editor-block-toolbar > :last-child,
3754 .block-editor-block-toolbar > :last-child .components-toolbar-group,
3755 .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 {
3756 border-right: none;
3757 }
3758 .block-editor-block-toolbar .components-toolbar-group:empty {
3759 display: none;
3760 }
3761
3762 .block-editor-block-contextual-toolbar {
3763 position: sticky;
3764 top: 0;
3765 z-index: 31;
3766 display: block;
3767 width: 100%;
3768 background-color: #fff;
3769 flex-shrink: 3;
3770 }
3771 .block-editor-block-contextual-toolbar.components-accessible-toolbar {
3772 border: none;
3773 border-radius: 0;
3774 }
3775 .block-editor-block-contextual-toolbar.is-unstyled {
3776 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
3777 }
3778 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3779 overflow: auto;
3780 overflow-y: hidden;
3781 }
3782 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
3783 width: 12px;
3784 height: 12px;
3785 }
3786 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
3787 background-color: transparent;
3788 }
3789 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
3790 background-color: #e0e0e0;
3791 border-radius: 8px;
3792 border: 3px solid transparent;
3793 background-clip: padding-box;
3794 }
3795 .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 {
3796 background-color: #949494;
3797 }
3798 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3799 scrollbar-width: thin;
3800 scrollbar-gutter: stable both-edges;
3801 scrollbar-color: #e0e0e0 transparent;
3802 }
3803 .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 {
3804 scrollbar-color: #949494 transparent;
3805 }
3806 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3807 will-change: transform;
3808 }
3809 @media (hover: none) {
3810 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3811 scrollbar-color: #949494 transparent;
3812 }
3813 }
3814 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3815 scrollbar-gutter: auto;
3816 }
3817 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
3818 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
3819 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar::after {
3820 display: none;
3821 }
3822 .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
3823 flex-grow: initial;
3824 width: initial;
3825 }
3826 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
3827 position: relative;
3828 margin-top: -1px;
3829 margin-bottom: -1px;
3830 }
3831 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
3832 align-items: center;
3833 background-color: #1e1e1e;
3834 border-radius: 100%;
3835 content: "";
3836 display: inline-flex;
3837 height: 2px;
3838 position: absolute;
3839 top: 15px;
3840 width: 2px;
3841 }
3842
3843 .block-editor-block-toolbar__block-controls .components-toolbar-group {
3844 padding: 0;
3845 }
3846
3847 .block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
3848 min-width: 260px;
3849 padding: 16px;
3850 }
3851
3852 .block-editor-block-toolbar .components-toolbar-group,
3853 .block-editor-block-toolbar .components-toolbar,
3854 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
3855 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar {
3856 display: flex;
3857 flex-wrap: nowrap;
3858 }
3859
3860 .block-editor-block-toolbar__slot {
3861 display: inline-flex;
3862 }
3863
3864 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) {
3865 width: auto;
3866 }
3867 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) svg {
3868 display: none;
3869 }
3870 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text))::after {
3871 content: attr(aria-label);
3872 font-size: 12px;
3873 }
3874 .show-icon-labels .block-editor-block-toolbar .block-editor-block-icon {
3875 width: 0 !important;
3876 height: 0 !important;
3877 min-width: 0 !important;
3878 }
3879 .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
3880 padding-left: 6px;
3881 padding-right: 6px;
3882 }
3883 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
3884 border-top-right-radius: 0;
3885 border-bottom-right-radius: 0;
3886 padding-left: 12px;
3887 padding-right: 12px;
3888 text-wrap: nowrap;
3889 }
3890 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button .block-editor-block-icon {
3891 width: 0;
3892 }
3893 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
3894 width: auto;
3895 position: relative;
3896 }
3897 @media (min-width: 600px) {
3898 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
3899 content: "";
3900 height: 1px;
3901 width: 100%;
3902 background: #e0e0e0;
3903 position: absolute;
3904 top: 50%;
3905 left: 50%;
3906 transform: translate(-50%, 0);
3907 margin-top: -0.5px;
3908 }
3909 }
3910 @media (min-width: 782px) {
3911 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
3912 background: #1e1e1e;
3913 }
3914 }
3915 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
3916 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
3917 padding-left: 6px;
3918 padding-right: 6px;
3919 }
3920 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
3921 padding-left: 8px;
3922 padding-right: 8px;
3923 }
3924 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
3925 border-left: 1px solid #ddd;
3926 margin-left: 6px;
3927 margin-right: -6px;
3928 white-space: nowrap;
3929 }
3930 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
3931 padding-left: 12px;
3932 padding-right: 12px;
3933 }
3934 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
3935 width: auto;
3936 }
3937 .show-icon-labels .components-toolbar,
3938 .show-icon-labels .components-toolbar-group {
3939 flex-shrink: 1;
3940 }
3941 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
3942 margin-left: 6px;
3943 }
3944
3945 .block-editor-block-toolbar-change-design-content-wrapper {
3946 padding: 12px;
3947 width: 320px;
3948 }
3949 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3950 display: grid;
3951 grid-template-columns: 1fr 1fr;
3952 grid-gap: 12px;
3953 }
3954 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3955 margin-bottom: 0;
3956 }
3957 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
3958 min-height: 100px;
3959 }
3960
3961 .block-editor-inserter {
3962 display: inline-block;
3963 background: none;
3964 border: none;
3965 padding: 0;
3966 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3967 font-size: 13px;
3968 line-height: 0;
3969 }
3970 @media (min-width: 782px) {
3971 .block-editor-inserter {
3972 position: relative;
3973 }
3974 }
3975
3976 .block-editor-inserter__main-area {
3977 height: 100%;
3978 gap: 16px;
3979 position: relative;
3980 }
3981 .block-editor-inserter__main-area.show-as-tabs {
3982 gap: 0;
3983 }
3984 @media (min-width: 782px) {
3985 .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
3986 width: 350px;
3987 }
3988 }
3989
3990 .block-editor-inserter__popover.is-quick .components-popover__content {
3991 border: none;
3992 outline: none;
3993 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);
3994 }
3995 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
3996 border-left: 1px solid #ccc;
3997 border-right: 1px solid #ccc;
3998 }
3999 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
4000 border-top: 1px solid #ccc;
4001 border-radius: 4px 4px 0 0;
4002 }
4003 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
4004 border-bottom: 1px solid #ccc;
4005 border-radius: 0 0 4px 4px;
4006 }
4007 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
4008 border: 1px solid #1e1e1e;
4009 }
4010
4011 .block-editor-inserter__popover .block-editor-inserter__menu {
4012 margin: -12px;
4013 }
4014 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tablist {
4015 top: 60px;
4016 }
4017 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area {
4018 overflow: visible;
4019 height: auto;
4020 }
4021 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container {
4022 display: none;
4023 }
4024
4025 .block-editor-inserter__toggle.components-button {
4026 display: inline-flex;
4027 align-items: center;
4028 cursor: var(--wpds-cursor-control, pointer);
4029 border: none;
4030 outline: none;
4031 padding: 0;
4032 }
4033 @media not (prefers-reduced-motion) {
4034 .block-editor-inserter__toggle.components-button {
4035 transition: color 0.2s ease;
4036 }
4037 }
4038
4039 .block-editor-inserter__menu {
4040 height: 100%;
4041 position: relative;
4042 overflow: visible;
4043 }
4044 @media (min-width: 782px) {
4045 .block-editor-inserter__menu.show-panel {
4046 width: 630px;
4047 }
4048 }
4049
4050 .block-editor-inserter__inline-elements {
4051 margin-top: -1px;
4052 }
4053
4054 .block-editor-inserter__menu.is-bottom::after {
4055 border-bottom-color: #fff;
4056 }
4057
4058 .components-popover.block-editor-inserter__popover {
4059 z-index: 99999;
4060 }
4061
4062 .block-editor-inserter__search {
4063 padding: 16px;
4064 position: sticky;
4065 top: 0;
4066 z-index: 2;
4067 background-color: #fff;
4068 border-bottom: 1px solid transparent;
4069 }
4070 @media not (prefers-reduced-motion) {
4071 .block-editor-inserter__search {
4072 transition: border-bottom-color 0.1s linear;
4073 }
4074 }
4075 .block-editor-inserter__search.is-scrolled {
4076 border-bottom-color: #e0e0e0;
4077 }
4078
4079 .block-editor-inserter__no-tab-container {
4080 overflow-y: auto;
4081 flex-grow: 1;
4082 position: relative;
4083 }
4084
4085 .block-editor-inserter__panel-header {
4086 position: relative;
4087 display: inline-flex;
4088 align-items: center;
4089 padding: 0 16px;
4090 }
4091
4092 .block-editor-inserter__panel-content {
4093 padding: 16px;
4094 }
4095
4096 .block-editor-inserter__panel-title,
4097 .block-editor-inserter__panel-title button {
4098 margin: 0 12px 0 0;
4099 color: #757575;
4100 text-transform: uppercase;
4101 font-size: 11px;
4102 font-weight: 499;
4103 }
4104
4105 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4106 height: 36px;
4107 line-height: 36px;
4108 }
4109
4110 .block-editor-inserter__panel-dropdown select {
4111 border: none;
4112 }
4113
4114 .block-editor-inserter__reusable-blocks-panel {
4115 position: relative;
4116 text-align: right;
4117 }
4118
4119 .block-editor-inserter__no-results,
4120 .block-editor-inserter__patterns-loading {
4121 padding: 32px;
4122 text-align: center;
4123 }
4124
4125 .block-editor-inserter__child-blocks {
4126 padding: 0 16px;
4127 }
4128
4129 .block-editor-inserter__parent-block-header {
4130 display: flex;
4131 align-items: center;
4132 }
4133 .block-editor-inserter__parent-block-header h2 {
4134 font-size: 13px;
4135 }
4136 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4137 margin-right: 8px;
4138 }
4139
4140 .block-editor-inserter__preview-container__popover {
4141 top: 16px !important;
4142 }
4143
4144 .block-editor-inserter__preview-container {
4145 display: none;
4146 width: 280px;
4147 padding: 16px;
4148 max-height: calc(100% - 32px);
4149 overflow-y: hidden;
4150 }
4151 @media (min-width: 782px) {
4152 .block-editor-inserter__preview-container {
4153 display: block;
4154 }
4155 }
4156 .block-editor-inserter__preview-container .block-editor-inserter__media-list__list-item {
4157 height: 100%;
4158 }
4159 .block-editor-inserter__preview-container .block-editor-block-card {
4160 padding-left: 0;
4161 padding-right: 0;
4162 padding-bottom: 4px;
4163 }
4164
4165 .block-editor-inserter__insertable-blocks-at-selection {
4166 border-bottom: 1px solid #e0e0e0;
4167 }
4168
4169 .block-editor-inserter__media-tabs-container,
4170 .block-editor-inserter__block-patterns-tabs-container {
4171 flex-grow: 1;
4172 padding: 0 16px 16px;
4173 display: flex;
4174 flex-direction: column;
4175 justify-content: space-between;
4176 }
4177
4178 .block-editor-inserter__media-tabs-container {
4179 padding-top: 16px;
4180 }
4181
4182 .block-editor-inserter__category-tablist {
4183 margin-bottom: 8px;
4184 }
4185
4186 .block-editor-inserter__category-panel {
4187 outline: 1px solid transparent;
4188 display: flex;
4189 flex-direction: column;
4190 padding: 0 16px;
4191 }
4192 @media (min-width: 782px) {
4193 .block-editor-inserter__category-panel {
4194 border-left: 1px solid #e0e0e0;
4195 padding: 0;
4196 left: 350px;
4197 width: 280px;
4198 position: absolute;
4199 top: -1px;
4200 height: calc(100% + 1px);
4201 background: #f0f0f0;
4202 border-top: 1px solid #e0e0e0;
4203 }
4204 .block-editor-inserter__category-panel .block-editor-inserter__media-list,
4205 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
4206 padding: 0 24px 16px;
4207 }
4208 }
4209
4210 .block-editor-inserter__patterns-category-panel-header {
4211 padding: 8px 0;
4212 }
4213 @media (min-width: 782px) {
4214 .block-editor-inserter__patterns-category-panel-header {
4215 padding: 8px 24px;
4216 }
4217 }
4218
4219 .block-editor-inserter__patterns-category-no-results {
4220 margin-top: 24px;
4221 }
4222
4223 .block-editor-inserter__patterns-filter-help {
4224 padding: 16px;
4225 border-top: 1px solid #ddd;
4226 color: #757575;
4227 min-width: 280px;
4228 }
4229
4230 .block-editor-inserter__media-list,
4231 .block-editor-block-patterns-list {
4232 overflow-y: auto;
4233 flex-grow: 1;
4234 height: 100%;
4235 }
4236
4237 .block-editor-inserter__preview-content {
4238 background: #f0f0f0;
4239 display: grid;
4240 flex-grow: 1;
4241 align-items: center;
4242 }
4243
4244 .block-editor-inserter__preview-content-missing {
4245 flex: 1;
4246 display: flex;
4247 justify-content: center;
4248 align-items: center;
4249 min-height: 144px;
4250 color: #757575;
4251 background: #f0f0f0;
4252 border-radius: 2px;
4253 }
4254
4255 .block-editor-inserter__tips {
4256 border-top: 1px solid #ddd;
4257 padding: 16px;
4258 flex-shrink: 0;
4259 position: relative;
4260 }
4261
4262 .block-editor-inserter__quick-inserter {
4263 width: 100%;
4264 max-width: 100%;
4265 }
4266 @media (min-width: 782px) {
4267 .block-editor-inserter__quick-inserter {
4268 width: 350px;
4269 }
4270 }
4271
4272 .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
4273 height: 0;
4274 padding: 0;
4275 float: left;
4276 }
4277
4278 .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
4279 .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
4280 padding: 16px;
4281 }
4282
4283 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4284 display: grid;
4285 grid-template-columns: 1fr 1fr;
4286 grid-gap: 8px;
4287 }
4288 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4289 margin-bottom: 0;
4290 }
4291 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4292 min-height: 100px;
4293 }
4294
4295 .block-editor-inserter__quick-inserter-separator {
4296 border-top: 1px solid #ddd;
4297 }
4298
4299 .block-editor-inserter__popover.is-quick > .components-popover__content {
4300 padding: 0;
4301 }
4302
4303 .block-editor-inserter__quick-inserter-expand.components-button {
4304 display: block;
4305 background: #1e1e1e;
4306 color: #fff;
4307 width: 100%;
4308 border-radius: 0;
4309 }
4310 .block-editor-inserter__quick-inserter-expand.components-button:hover {
4311 color: #fff;
4312 }
4313 .block-editor-inserter__quick-inserter-expand.components-button:active {
4314 color: #ccc;
4315 }
4316 .block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4317 box-shadow: none;
4318 background: var(--wp-admin-theme-color);
4319 border-color: var(--wp-admin-theme-color);
4320 }
4321
4322 .block-editor-block-patterns-explorer__sidebar {
4323 position: absolute;
4324 top: 72px;
4325 left: 0;
4326 bottom: 0;
4327 width: 280px;
4328 padding: 24px 24px 24px;
4329 overflow-x: visible;
4330 overflow-y: auto;
4331 }
4332 .block-editor-block-patterns-explorer__sidebar__categories-list__item {
4333 display: block;
4334 width: 100%;
4335 height: 48px;
4336 text-align: left;
4337 }
4338 .block-editor-block-patterns-explorer__search {
4339 margin-bottom: 32px;
4340 }
4341 .block-editor-block-patterns-explorer__search-results-count {
4342 padding-bottom: 32px;
4343 }
4344 .block-editor-block-patterns-explorer__list {
4345 margin-left: 280px;
4346 padding: 24px 0 32px;
4347 }
4348 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4349 width: 380px;
4350 }
4351 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4352 display: grid;
4353 grid-gap: 32px;
4354 grid-template-columns: repeat(1, 1fr);
4355 margin-bottom: 16px;
4356 }
4357 @media (min-width: 1080px) {
4358 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4359 grid-template-columns: repeat(2, 1fr);
4360 }
4361 }
4362 @media (min-width: 1440px) {
4363 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4364 grid-template-columns: repeat(3, 1fr);
4365 }
4366 }
4367 .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4368 min-height: 240px;
4369 }
4370 .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4371 height: inherit;
4372 min-height: 100px;
4373 max-height: 800px;
4374 }
4375
4376 .components-heading.block-editor-inserter__patterns-category-panel-title {
4377 font-weight: 499;
4378 }
4379
4380 .block-editor-inserter__patterns-explore-button.components-button,
4381 .block-editor-inserter__media-library-button.components-button {
4382 padding: 16px;
4383 justify-content: center;
4384 margin-top: 16px;
4385 width: 100%;
4386 }
4387
4388 .block-editor-inserter__media-panel {
4389 min-height: 100%;
4390 padding: 0 16px;
4391 display: flex;
4392 flex-direction: column;
4393 }
4394 @media (min-width: 782px) {
4395 .block-editor-inserter__media-panel {
4396 padding: 0;
4397 }
4398 }
4399 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4400 height: 100%;
4401 display: flex;
4402 align-items: center;
4403 justify-content: center;
4404 flex: 1;
4405 }
4406 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4407 margin-bottom: 24px;
4408 }
4409 @media (min-width: 782px) {
4410 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4411 margin-bottom: 0;
4412 padding: 16px 24px 16px;
4413 }
4414 }
4415
4416 .block-editor-inserter__media-list__list-item {
4417 position: relative;
4418 cursor: var(--wpds-cursor-control, pointer);
4419 margin-bottom: 24px;
4420 }
4421 .block-editor-inserter__media-list__list-item.is-placeholder {
4422 min-height: 100px;
4423 }
4424 .block-editor-inserter__media-list__list-item[draggable=true] .block-editor-inserter__media-list__list-item {
4425 cursor: grab;
4426 }
4427 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4428 outline-color: rgba(0, 0, 0, 0.3);
4429 }
4430 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button {
4431 display: block;
4432 }
4433 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4434 position: absolute;
4435 right: 8px;
4436 top: 8px;
4437 }
4438 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button {
4439 background: #fff;
4440 display: none;
4441 }
4442 .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 {
4443 display: block;
4444 }
4445 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:hover {
4446 box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4447 outline: 2px solid transparent;
4448 }
4449
4450 .block-editor-inserter__media-list__item {
4451 height: 100%;
4452 }
4453 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview {
4454 display: flex;
4455 align-items: center;
4456 overflow: hidden;
4457 border-radius: 2px;
4458 }
4459 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview > * {
4460 margin: 0 auto;
4461 max-width: 100%;
4462 outline: 1px solid rgba(0, 0, 0, 0.1);
4463 outline-offset: -1px;
4464 }
4465 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
4466 display: flex;
4467 height: 100%;
4468 width: 100%;
4469 position: absolute;
4470 justify-content: center;
4471 background: rgba(255, 255, 255, 0.7);
4472 align-items: center;
4473 pointer-events: none;
4474 }
4475 .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4476 outline-color: var(--wp-admin-theme-color);
4477 outline-width: var(--wp-admin-border-width-focus);
4478 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4479 }
4480 @media not (prefers-reduced-motion) {
4481 .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4482 transition: outline 0.1s linear;
4483 }
4484 }
4485
4486 .block-editor-inserter__media-list__item-preview-options__popover .components-menu-item__button .components-menu-item__item {
4487 min-width: auto;
4488 }
4489
4490 .block-editor-inserter__mobile-tab-navigation {
4491 padding: 16px;
4492 height: 100%;
4493 }
4494 .block-editor-inserter__mobile-tab-navigation > * {
4495 height: 100%;
4496 }
4497
4498 @media (min-width: 600px) {
4499 .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
4500 max-width: 480px;
4501 }
4502 }
4503 .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal p {
4504 margin: 0;
4505 }
4506
4507 .block-editor-inserter__hint {
4508 margin: 16px 16px 0;
4509 }
4510
4511 .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
4512 height: 40px;
4513 }
4514
4515 .block-editor-inserter__pattern-panel-placeholder {
4516 display: none;
4517 }
4518
4519 .block-editor-inserter__menu.is-zoom-out {
4520 display: flex;
4521 }
4522 @media (min-width: 782px) {
4523 .block-editor-inserter__menu.is-zoom-out.show-panel::after {
4524 content: "";
4525 display: block;
4526 width: 300px;
4527 height: 100%;
4528 }
4529 }
4530
4531 @media (max-width: 959px) {
4532 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
4533 flex-direction: column;
4534 }
4535 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4536 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4537 flex-direction: column;
4538 }
4539 }
4540 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
4541 flex-direction: column;
4542 }
4543 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4544 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4545 flex-direction: column;
4546 }
4547
4548 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4549 display: none;
4550 padding: 0 24px 16px;
4551 }
4552 @media (min-width: 480px) {
4553 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4554 display: block;
4555 }
4556 }
4557
4558 .spacing-sizes-control {
4559 border: 0;
4560 padding: 0;
4561 margin: 0;
4562 }
4563 .spacing-sizes-control .spacing-sizes-control__unit-control,
4564 .spacing-sizes-control .spacing-sizes-control__label {
4565 margin-bottom: 0;
4566 }
4567 .spacing-sizes-control .spacing-sizes-control__preset-range,
4568 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
4569 flex: 1;
4570 margin-bottom: 0;
4571 }
4572
4573 .spacing-sizes-control__header {
4574 height: 16px;
4575 margin-bottom: 12px;
4576 }
4577
4578 .spacing-sizes-control__wrapper {
4579 align-items: center;
4580 }
4581
4582 .spacing-sizes-control__dropdown {
4583 height: 24px;
4584 }
4585
4586 .spacing-sizes-control__wrapper .preset-input-control__icon {
4587 margin-left: -4px;
4588 }
4589
4590 .block-editor-block-visibility-modal {
4591 z-index: 1000001;
4592 }
4593 .block-editor-block-visibility-modal__options {
4594 border: 0;
4595 padding: 0;
4596 list-style: none;
4597 margin: 24px 0;
4598 }
4599 .block-editor-block-visibility-modal__options-item {
4600 display: flex;
4601 align-items: center;
4602 justify-content: space-between;
4603 margin: 0 0 16px 0;
4604 gap: 24px;
4605 }
4606 .block-editor-block-visibility-modal__options-item:last-child {
4607 margin: 0;
4608 }
4609 .block-editor-block-visibility-modal__options-item--everywhere {
4610 flex-direction: column;
4611 align-items: start;
4612 }
4613 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4614 font-weight: 600;
4615 }
4616 .block-editor-block-visibility-modal__options-icon--checked {
4617 fill: #ddd;
4618 }
4619 .block-editor-block-visibility-modal__sub-options {
4620 width: 100%;
4621 padding-inline-start: 12px;
4622 }
4623 .block-editor-block-visibility-modal__description {
4624 font-size: 12px;
4625 color: #757575;
4626 }
4627
4628 .block-editor-block-visibility-info {
4629 padding-top: 4px;
4630 padding-bottom: 4px;
4631 margin: 0 16px 16px;
4632 display: flex;
4633 align-items: center;
4634 justify-content: start;
4635 }