PluginProbe
Gutenberg / 23.1.0
Gutenberg v23.1.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.1.0, at build/styles/block-editor/style-rtl.css

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