PluginProbe
Gutenberg / 23.7.2
Gutenberg v23.7.2
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-rtl.css

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

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