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

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

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