PluginProbe
Gutenberg / 23.2.2
Gutenberg v23.2.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.2.2, at build/styles/block-editor/style-rtl.css

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