PluginProbe
Gutenberg / 23.3.2
Gutenberg v23.3.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.3.2, at build/styles/block-editor/style-rtl.css

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