PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.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 All 404 releases
gutenberg / build / styles / block-editor / style.css

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

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