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

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

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