PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
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-rtl.css

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

4,892 lines 142.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Typography
3 */
4 /**
5 * SCSS Variables.
6 *
7 * Please use variables from this sheet to ensure consistency across the UI.
8 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10 */
11 /**
12 * Colors
13 */
14 /**
15 * Fonts & basic variables.
16 */
17 /**
18 * Typography
19 */
20 /**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24 /**
25 * Radius scale.
26 */
27 /**
28 * Elevation scale.
29 */
30 /**
31 * Dimensions.
32 */
33 /**
34 * Mobile specific styles
35 */
36 /**
37 * Editor styles.
38 */
39 /**
40 * Block & Editor UI.
41 */
42 /**
43 * Block paddings.
44 */
45 /**
46 * React Native specific.
47 * These variables do not appear to be used anywhere else.
48 */
49 /**
50 * Breakpoints & Media Queries
51 */
52 /**
53 * Converts a hex value into the rgb equivalent.
54 *
55 * @param {string} hex - the hexadecimal value to convert
56 * @return {string} comma separated rgb values
57 */
58 /**
59 * Long content fade mixin
60 *
61 * Creates a fading overlay to signify that the content is longer
62 * than the space allows.
63 */
64 /**
65 * Breakpoint mixins
66 */
67 /**
68 * Focus styles.
69 */
70 /**
71 * 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-left: 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-right: 12px;
185 padding-left: 32px;
186 }
187
188 .block-editor-global-styles-background-panel__reset {
189 position: absolute;
190 left: 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-right: 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 right: 0;
375 left: 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 right: 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 right: 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 left: 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-right: 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-right: 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-right: 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-right: 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-left-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 right: 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 right: 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-left: 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 right: 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-left: 6px;
580 padding-right: 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-left: 12px;
585 padding-right: 12px;
586 }
587 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
588 position: relative;
589 right: auto;
590 margin-right: -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-right: 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 right: 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 32px 12px 0;
648 }
649 .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
650 flex-shrink: 0;
651 margin-left: 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-right: -6px !important;
675 }
676
677 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
678 border-right: 1px solid #1e1e1e;
679 margin-right: 6px !important;
680 margin-left: -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 right: 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-right: -4px;
720 margin-left: -4px;
721 transform: 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-right: 0;
778 margin-left: 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 0 0 16px;
804 min-width: 200px;
805 max-width: 600px;
806 }
807 .block-editor-block-compare__wrapper > div button {
808 float: left;
809 }
810 .block-editor-block-compare__wrapper .block-editor-block-compare__converted {
811 border-right: 1px solid #ddd;
812 padding-right: 15px;
813 padding-left: 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 right: 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-left: 6px;
880 }
881 .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item:last-child {
882 margin-left: 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 left: 0;
898 right: 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 16px 8px 0;
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-left: 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-right: 0;
1017 padding-left: 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 right: 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 left: 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-right: 0;
1038 padding-left: 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 right: 8px;
1052 left: 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: right;
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 right: 0;
1202 transform-origin: top right;
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 right: 0;
1218 left: 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 right: 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: right;
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-left: 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-right: 1px solid #ddd;
1600 border-left: 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-right-radius: 2px;
1605 border-top-left-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-right-radius: 2px;
1610 border-bottom-left-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: right;
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 left: 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 left: 28px;
1687 }
1688
1689 .block-editor-panel-color-gradient-settings__contrast-warning {
1690 position: absolute;
1691 left: 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: left;
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 left: 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 direction: ltr;
1862 }
1863
1864 .block-editor-panel-duotone-settings__reset {
1865 position: absolute;
1866 left: 0;
1867 top: 8px;
1868 margin: auto 8px auto;
1869 opacity: 0;
1870 }
1871 @media not (prefers-reduced-motion) {
1872 .block-editor-panel-duotone-settings__reset {
1873 transition: opacity 0.1s ease-in-out;
1874 }
1875 }
1876 .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 {
1877 opacity: 1;
1878 }
1879 @media (hover: none) {
1880 .block-editor-panel-duotone-settings__reset {
1881 opacity: 1;
1882 }
1883 }
1884
1885 .block-editor-global-styles__text-shadow {
1886 width: 260px;
1887 padding: 8px;
1888 }
1889
1890 .block-editor-global-styles__text-shadow-preview {
1891 display: flex;
1892 align-items: center;
1893 justify-content: center;
1894 height: 80px;
1895 border: #ddd 1px solid;
1896 border-radius: 2px;
1897 font-size: 24px;
1898 margin-bottom: 16px;
1899 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);
1900 background-position: 0 0, 8px 8px;
1901 background-size: 16px 16px;
1902 }
1903
1904 .block-editor-global-styles__text-shadow-list-item {
1905 justify-content: space-between;
1906 gap: 8px;
1907 width: 100%;
1908 }
1909 .block-editor-global-styles__text-shadow-list-item:not(.is-active) svg {
1910 opacity: 0;
1911 }
1912
1913 .block-editor-global-styles__text-shadow-dropdown {
1914 display: block;
1915 padding: 0;
1916 position: relative;
1917 border: 1px solid #ddd;
1918 border-radius: 2px;
1919 }
1920
1921 .block-editor-global-styles__text-shadow-dropdown-toggle {
1922 width: 100%;
1923 padding: 8px;
1924 }
1925 .block-editor-global-styles__text-shadow-dropdown-toggle.is-open {
1926 background-color: #f0f0f0;
1927 }
1928
1929 .block-editor-global-styles__text-shadow-remove-button {
1930 position: absolute;
1931 left: 8px;
1932 top: 8px;
1933 opacity: 0;
1934 }
1935 @media not (prefers-reduced-motion) {
1936 .block-editor-global-styles__text-shadow-remove-button {
1937 transition: opacity 0.1s ease-in-out;
1938 }
1939 }
1940 .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 {
1941 opacity: 1;
1942 }
1943 @media (hover: none) {
1944 .block-editor-global-styles__text-shadow-remove-button {
1945 opacity: 1;
1946 }
1947 }
1948
1949 .is-inherited-from-global-styles .components-base-control__label,
1950 .is-inherited-from-global-styles .components-input-control__label {
1951 text-decoration-line: underline;
1952 text-decoration-style: dotted;
1953 text-decoration-thickness: 1px;
1954 text-underline-offset: 0.2em;
1955 }
1956 .is-inherited-from-global-styles .block-editor-panel-color-gradient-settings__color-name,
1957 .is-inherited-from-global-styles .block-editor-global-styles-background-panel__inspector-media-replace-title,
1958 .is-inherited-from-global-styles .block-editor-panel-duotone-settings__label {
1959 border-bottom: 1px dotted currentColor;
1960 }
1961
1962 .has-local-override-from-global-styles {
1963 position: relative;
1964 }
1965
1966 .global-styles-inheritance-affordance {
1967 position: absolute;
1968 inset-block-start: 0;
1969 inset-inline-end: 0;
1970 z-index: 1;
1971 display: flex;
1972 align-items: center;
1973 justify-content: center;
1974 pointer-events: none;
1975 height: 16px;
1976 }
1977 .global-styles-inheritance-affordance--offset-toggle {
1978 inset-inline-end: 32px;
1979 }
1980 .global-styles-inheritance-affordance .has-local-override-from-global-styles__reset {
1981 pointer-events: auto;
1982 margin-inline-start: 0 !important;
1983 }
1984
1985 .has-local-override-from-global-styles__reset {
1986 display: inline-flex !important;
1987 align-items: center;
1988 justify-content: center;
1989 vertical-align: middle;
1990 position: relative;
1991 margin-inline-start: 6px;
1992 min-width: 14px !important;
1993 width: 14px !important;
1994 height: 14px !important;
1995 padding: 0 !important;
1996 border-radius: 50% !important;
1997 background: transparent !important;
1998 box-shadow: none !important;
1999 overflow: hidden;
2000 text-transform: none;
2001 letter-spacing: normal;
2002 cursor: var(--wpds-cursor-control, pointer);
2003 }
2004 .has-local-override-from-global-styles__reset:hover, .has-local-override-from-global-styles__reset:focus {
2005 background: transparent !important;
2006 }
2007 .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 {
2008 display: none;
2009 }
2010 .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 {
2011 display: block;
2012 }
2013 .has-local-override-from-global-styles__reset:focus-visible {
2014 outline: 1.5px solid var(--wp-admin-theme-color, #007cba);
2015 outline-offset: 1px;
2016 }
2017 .has-local-override-from-global-styles__reset.block-editor-panel-color-gradient-settings__reset {
2018 position: absolute;
2019 justify-content: center;
2020 top: 50%;
2021 transform: translateY(-50%);
2022 margin-block: 0;
2023 margin-inline-start: 0;
2024 opacity: 1;
2025 }
2026 .has-local-override-from-global-styles__reset.block-editor-global-styles__shadow-editor__remove-button {
2027 position: absolute;
2028 justify-content: center;
2029 inset-inline-end: 8px;
2030 top: 50%;
2031 transform: translateY(-50%);
2032 margin-block: 0;
2033 margin-inline-start: 0;
2034 opacity: 1;
2035 }
2036 .has-local-override-from-global-styles__reset.block-editor-panel-duotone-settings__reset {
2037 position: absolute;
2038 justify-content: center;
2039 inset-inline-end: 8px;
2040 top: 50%;
2041 transform: translateY(-50%);
2042 margin-block: 0;
2043 margin-inline-start: 0;
2044 opacity: 1;
2045 }
2046
2047 .has-local-override-from-global-styles__dot {
2048 display: block;
2049 width: 8px;
2050 height: 8px;
2051 background-color: var(--wp-admin-theme-color, #007cba);
2052 border-radius: 50%;
2053 }
2054
2055 .has-local-override-from-global-styles__reset-icon {
2056 display: none;
2057 position: absolute;
2058 top: 50%;
2059 right: 50%;
2060 transform: translate(50%, -50%);
2061 color: var(--wp-admin-theme-color, #007cba);
2062 }
2063
2064 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
2065 z-index: 30;
2066 }
2067 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
2068 pointer-events: none;
2069 }
2070 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
2071 pointer-events: all;
2072 }
2073 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
2074 pointer-events: auto;
2075 }
2076
2077 .block-editor-grid-visualizer__grid {
2078 display: grid;
2079 position: absolute;
2080 }
2081
2082 .block-editor-grid-visualizer__cell {
2083 display: grid;
2084 position: relative;
2085 }
2086 .block-editor-grid-visualizer__cell .block-editor-inserter {
2087 color: inherit;
2088 z-index: 32;
2089 position: absolute;
2090 top: 0;
2091 bottom: 0;
2092 right: 0;
2093 left: 0;
2094 overflow: hidden;
2095 }
2096 .block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
2097 box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
2098 color: inherit;
2099 overflow: hidden;
2100 height: 100%;
2101 width: 100%;
2102 padding: 0 !important;
2103 opacity: 0;
2104 }
2105 .block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
2106 .block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
2107 background: var(--wp-admin-theme-color);
2108 }
2109 .block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
2110 .block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
2111 opacity: 1;
2112 background-color: color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
2113 }
2114
2115 .block-editor-grid-visualizer__drop-zone {
2116 background: rgba(204, 204, 204, 0.1);
2117 width: 100%;
2118 height: 100%;
2119 grid-column: 1;
2120 grid-row: 1;
2121 min-width: 8px;
2122 min-height: 8px;
2123 }
2124
2125 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
2126 z-index: 30;
2127 }
2128 .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
2129 pointer-events: none;
2130 }
2131
2132 .block-editor-grid-item-resizer__box {
2133 border: 1px solid var(--wp-admin-theme-color);
2134 }
2135 .block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
2136 pointer-events: all;
2137 }
2138
2139 .block-editor-grid-item-mover__move-button-container {
2140 display: flex;
2141 padding: 0;
2142 border: none;
2143 justify-content: center;
2144 }
2145 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
2146 width: 24px;
2147 min-width: 0 !important;
2148 padding-right: 0;
2149 padding-left: 0;
2150 }
2151 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg {
2152 min-width: 24px;
2153 }
2154 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
2155 content: "";
2156 position: absolute;
2157 display: block;
2158 border-radius: 2px;
2159 height: 32px;
2160 right: 8px;
2161 left: 8px;
2162 z-index: -1;
2163 }
2164 @media not (prefers-reduced-motion) {
2165 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
2166 animation: components-button__appear-animation 0.1s ease;
2167 animation-fill-mode: forwards;
2168 }
2169 }
2170
2171 .block-editor-grid-item-mover__move-vertical-button-container {
2172 display: flex;
2173 position: relative;
2174 }
2175 @media (min-width: 600px) {
2176 .block-editor-grid-item-mover__move-vertical-button-container {
2177 flex-direction: column;
2178 justify-content: space-around;
2179 }
2180 .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
2181 height: 20px !important;
2182 width: 100%;
2183 min-width: 0 !important;
2184 }
2185 .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button::before {
2186 height: calc(100% - 4px);
2187 }
2188 .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg,
2189 .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
2190 flex-shrink: 0;
2191 height: 20px;
2192 }
2193 }
2194
2195 @media (min-width: 600px) {
2196 .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
2197 height: 40px;
2198 position: relative;
2199 top: -4px;
2200 }
2201 }
2202
2203 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
2204 position: relative;
2205 }
2206 @media (min-width: 600px) {
2207 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
2208 content: "";
2209 height: 100%;
2210 width: 1px;
2211 background: #e0e0e0;
2212 position: absolute;
2213 top: 0;
2214 }
2215 }
2216 @media (min-width: 782px) {
2217 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
2218 background: #1e1e1e;
2219 }
2220 }
2221 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
2222 padding-left: 6px;
2223 }
2224 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
2225 left: 0;
2226 }
2227 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
2228 padding-right: 6px;
2229 }
2230 .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
2231 right: 0;
2232 }
2233 @media (min-width: 600px) {
2234 .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
2235 content: "";
2236 height: 1px;
2237 width: 100%;
2238 background: #e0e0e0;
2239 position: absolute;
2240 top: 50%;
2241 right: 50%;
2242 transform: translate(50%, 0);
2243 margin-top: -0.5px;
2244 }
2245 }
2246 @media (min-width: 782px) {
2247 .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
2248 background: #1e1e1e;
2249 }
2250 }
2251 .show-icon-labels .block-editor-grid-item-mover-button {
2252 white-space: nowrap;
2253 }
2254 .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
2255 height: 24px;
2256 background: #ddd;
2257 top: 4px;
2258 }
2259 .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
2260 background: #ddd;
2261 width: calc(100% - 24px);
2262 }
2263
2264 .block-editor-height-control {
2265 border: 0;
2266 margin: 0;
2267 padding: 0;
2268 }
2269
2270 .block-editor-iframe__container {
2271 width: 100%;
2272 height: 100%;
2273 }
2274
2275 .block-editor-iframe__scale-container {
2276 height: 100%;
2277 }
2278
2279 .block-editor-iframe__scale-container.is-zoomed-out {
2280 width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
2281 position: absolute;
2282 left: 0;
2283 }
2284
2285 .wp-block-image__crop-area {
2286 position: relative;
2287 max-width: 100%;
2288 width: 100%;
2289 overflow: hidden;
2290 }
2291 .wp-block-image__crop-area .reactEasyCrop_Container {
2292 pointer-events: auto;
2293 }
2294 .wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
2295 border: none;
2296 border-radius: 0;
2297 }
2298
2299 .wp-block-image__zoom .components-popover__content {
2300 min-width: 260px;
2301 overflow: visible !important;
2302 }
2303
2304 .block-editor-block-types-list__list-item {
2305 display: block;
2306 width: 33.33%;
2307 padding: 0;
2308 margin: 0;
2309 }
2310 .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 {
2311 color: var(--wp-block-synced-color);
2312 }
2313 .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 {
2314 color: var(--wp-block-synced-color) !important;
2315 filter: brightness(0.95);
2316 }
2317 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
2318 color: var(--wp-block-synced-color) !important;
2319 }
2320 .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled)::after {
2321 background: var(--wp-block-synced-color);
2322 }
2323
2324 .components-button.block-editor-block-types-list__item {
2325 display: flex;
2326 flex-direction: column;
2327 width: 100%;
2328 font-size: 13px;
2329 color: #1e1e1e;
2330 padding: 8px;
2331 align-items: stretch;
2332 justify-content: center;
2333 cursor: var(--wpds-cursor-control, pointer);
2334 background: transparent;
2335 word-break: normal;
2336 overflow-wrap: break-word;
2337 }
2338 @media not (prefers-reduced-motion) {
2339 .components-button.block-editor-block-types-list__item {
2340 transition: all 0.05s ease-in-out;
2341 }
2342 }
2343 .components-button.block-editor-block-types-list__item {
2344 position: relative;
2345 height: auto;
2346 }
2347 .components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
2348 opacity: 0.6;
2349 cursor: default;
2350 }
2351 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover .block-editor-block-types-list__item-title {
2352 color: var(--wp-admin-theme-color) !important;
2353 filter: brightness(0.95);
2354 }
2355 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover svg {
2356 color: var(--wp-admin-theme-color) !important;
2357 }
2358 .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover::after {
2359 content: "";
2360 position: absolute;
2361 top: 0;
2362 bottom: 0;
2363 right: 0;
2364 left: 0;
2365 border-radius: 2px;
2366 opacity: 0.04;
2367 background: var(--wp-admin-theme-color);
2368 pointer-events: none;
2369 }
2370
2371 .block-editor-block-types-list__item-icon {
2372 padding: 12px 20px;
2373 color: #1e1e1e;
2374 }
2375 @media not (prefers-reduced-motion) {
2376 .block-editor-block-types-list__item-icon {
2377 transition: all 0.05s ease-in-out;
2378 }
2379 }
2380 .block-editor-block-types-list__item-icon .block-editor-block-icon {
2381 margin-right: auto;
2382 margin-left: auto;
2383 }
2384 @media not (prefers-reduced-motion) {
2385 .block-editor-block-types-list__item-icon svg {
2386 transition: all 0.15s ease-out;
2387 }
2388 }
2389 .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2390 cursor: grab;
2391 }
2392
2393 .block-editor-block-types-list__item-title {
2394 padding: 4px 2px 8px;
2395 font-size: 12px;
2396 hyphens: auto;
2397 }
2398
2399 .modal-open .block-editor-inspector-list-view-content-popover {
2400 z-index: 99999;
2401 }
2402
2403 .block-editor-block-inspector__tabs [role=tablist] {
2404 width: 100%;
2405 }
2406
2407 .block-editor-inspector-popover-header {
2408 margin-bottom: 16px;
2409 }
2410
2411 .items-justified-left {
2412 justify-content: flex-start;
2413 }
2414
2415 .items-justified-center {
2416 justify-content: center;
2417 }
2418
2419 .items-justified-right {
2420 justify-content: flex-end;
2421 }
2422
2423 .items-justified-space-between {
2424 justify-content: space-between;
2425 }
2426
2427 @keyframes loadingpulse {
2428 0% {
2429 opacity: 1;
2430 }
2431 50% {
2432 opacity: 0;
2433 }
2434 100% {
2435 opacity: 1;
2436 }
2437 }
2438 .block-editor-link-control {
2439 position: relative;
2440 min-width: 350px;
2441 }
2442 .components-popover__content .block-editor-link-control {
2443 min-width: auto;
2444 width: 90vw;
2445 max-width: 350px;
2446 }
2447 .show-icon-labels .block-editor-link-control .components-button.has-icon svg {
2448 display: none;
2449 }
2450 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
2451 content: attr(aria-label);
2452 }
2453 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview {
2454 gap: 4px;
2455 flex-wrap: wrap;
2456 }
2457 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .components-button.has-icon {
2458 width: auto;
2459 padding: 4px;
2460 }
2461 .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .block-editor-link-control_link-information {
2462 min-width: 100%;
2463 margin-left: 0;
2464 }
2465
2466 .block-editor-link-control__search-input-wrapper {
2467 margin-bottom: 8px;
2468 position: relative;
2469 }
2470
2471 .block-editor-link-control__help {
2472 padding: 0 16px;
2473 margin-top: -8px;
2474 margin-bottom: 0;
2475 font-size: 12px;
2476 font-style: normal;
2477 color: #757575;
2478 }
2479
2480 .block-editor-link-control__search-input-container,
2481 .block-editor-link-control__search-input-wrapper {
2482 position: relative;
2483 }
2484
2485 .block-editor-link-control__field {
2486 margin: 16px;
2487 }
2488 .block-editor-link-control__field .components-base-control__label {
2489 color: #1e1e1e;
2490 }
2491
2492 .block-editor-link-control__search-error {
2493 margin: -8px 16px 16px;
2494 }
2495
2496 .block-editor-link-control__search-actions {
2497 padding: 8px 16px 16px;
2498 }
2499
2500 .block-editor-link-control__search-results-wrapper {
2501 position: relative;
2502 }
2503 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
2504 content: "";
2505 position: absolute;
2506 right: -1px;
2507 left: 16px;
2508 display: block;
2509 pointer-events: none;
2510 z-index: 100;
2511 }
2512 .block-editor-link-control__search-results-wrapper::before {
2513 height: 8px;
2514 top: 0;
2515 bottom: auto;
2516 }
2517 .block-editor-link-control__search-results-wrapper::after {
2518 height: 16px;
2519 bottom: 0;
2520 top: auto;
2521 }
2522
2523 .block-editor-link-control__search-results {
2524 margin-top: -16px;
2525 padding: 8px;
2526 max-height: 200px;
2527 overflow-y: auto;
2528 }
2529 .block-editor-link-control__search-results.is-loading {
2530 opacity: 0.2;
2531 }
2532
2533 .block-editor-link-control__search-item.components-button.components-menu-item__button {
2534 height: auto;
2535 text-align: right;
2536 }
2537 .block-editor-link-control__search-item .components-menu-item__item {
2538 overflow: hidden;
2539 text-overflow: ellipsis;
2540 display: inline-block;
2541 width: 100%;
2542 }
2543 .block-editor-link-control__search-item .components-menu-item__item mark {
2544 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2545 color: inherit;
2546 background-color: transparent;
2547 }
2548 .block-editor-link-control__search-item .components-menu-item__shortcut {
2549 color: #757575;
2550 white-space: nowrap;
2551 }
2552 .block-editor-link-control__search-item[aria-selected] {
2553 background: #f0f0f0;
2554 }
2555
2556 .block-editor-link-control__preview {
2557 background: transparent;
2558 border: 0;
2559 padding: 16px;
2560 }
2561 .block-editor-link-control__preview .block-editor-link-control__link-information {
2562 margin-left: 8px;
2563 white-space: pre-wrap;
2564 overflow-wrap: break-word;
2565 }
2566 .block-editor-link-control__preview .block-editor-link-control__link-information .block-editor-link-control__preview-info {
2567 color: #757575;
2568 line-height: 1.1;
2569 font-size: 12px;
2570 word-break: break-all;
2571 }
2572 .block-editor-link-control__preview.is-url-title .block-editor-link-control__preview-title {
2573 word-break: break-all;
2574 }
2575 .block-editor-link-control__preview .block-editor-link-control__preview-image,
2576 .block-editor-link-control__preview .block-editor-link-control__preview-icon {
2577 position: relative;
2578 flex-shrink: 0;
2579 background-color: #f0f0f0;
2580 width: 32px;
2581 height: 32px;
2582 border-radius: 2px;
2583 }
2584 .block-editor-link-control__preview .block-editor-link-control__preview-icon img {
2585 width: 16px;
2586 }
2587 .block-editor-link-control__preview.is-error .block-editor-link-control__preview-icon {
2588 top: 0;
2589 width: 32px;
2590 max-height: 32px;
2591 }
2592 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2593 line-height: var(--wpds-typography-line-height-sm, 20px);
2594 }
2595 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2596 box-shadow: none;
2597 }
2598 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus-visible {
2599 box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2600 outline: 2px solid transparent;
2601 text-decoration: none;
2602 }
2603 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2604 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2605 color: inherit;
2606 background-color: transparent;
2607 }
2608 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2609 font-weight: 400;
2610 }
2611 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2612 position: absolute;
2613 width: 1px;
2614 height: 1px;
2615 padding: 0;
2616 margin: -1px;
2617 overflow: hidden;
2618 clip-path: inset(50%);
2619 border: 0;
2620 }
2621
2622 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
2623 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon img {
2624 opacity: 0;
2625 }
2626 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2627 content: "";
2628 display: block;
2629 background-color: #f0f0f0;
2630 position: absolute;
2631 top: 0;
2632 right: 0;
2633 left: 0;
2634 bottom: 0;
2635 border-radius: 100%;
2636 }
2637 @media not (prefers-reduced-motion) {
2638 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2639 animation: loadingpulse 1s linear infinite;
2640 animation-delay: 0.5s;
2641 }
2642 }
2643
2644 .block-editor-link-control__loading {
2645 margin: 16px;
2646 display: flex;
2647 align-items: center;
2648 }
2649 .block-editor-link-control__loading .components-spinner {
2650 margin-top: 0;
2651 }
2652
2653 .components-button + .block-editor-link-control__search-create {
2654 overflow: visible;
2655 padding: 12px 16px;
2656 }
2657 .components-button + .block-editor-link-control__search-create::before {
2658 content: "";
2659 position: absolute;
2660 top: -10px;
2661 right: 0;
2662 display: block;
2663 width: 100%;
2664 }
2665
2666 .block-editor-link-control__search-create {
2667 align-items: center;
2668 }
2669 .block-editor-link-control__search-create .block-editor-link-control__preview-title {
2670 margin-bottom: 0;
2671 }
2672 .block-editor-link-control__search-create .block-editor-link-control__search-item-icon {
2673 top: 0;
2674 }
2675
2676 .block-editor-link-control__drawer-inner {
2677 display: flex;
2678 flex-direction: column;
2679 flex-basis: 100%;
2680 position: relative;
2681 }
2682
2683 .block-editor-link-control__settings {
2684 border: 0;
2685 padding: 0;
2686 margin: 0;
2687 }
2688
2689 .block-editor-link-control__setting {
2690 margin-bottom: 0;
2691 flex: 1;
2692 padding: 8px 24px;
2693 }
2694 .block-editor-link-control__setting .components-base-control:not(.components-input-control) .components-base-control__field {
2695 display: flex;
2696 }
2697 .block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
2698 color: #1e1e1e;
2699 }
2700 .block-editor-link-control__setting input {
2701 margin-right: 0;
2702 }
2703 .is-preview .block-editor-link-control__setting {
2704 padding: 20px 0 8px 8px;
2705 }
2706
2707 .block-editor-link-control__tools {
2708 padding: 8px 8px 0 8px;
2709 margin-top: -16px;
2710 }
2711 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
2712 padding-right: 0;
2713 gap: 0;
2714 }
2715 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] {
2716 color: #1e1e1e;
2717 }
2718 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2719 visibility: visible;
2720 }
2721 @media not (prefers-reduced-motion) {
2722 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2723 transition: transform 0.1s ease;
2724 }
2725 }
2726 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2727 transform: rotate(-90deg);
2728 }
2729 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2730 visibility: visible;
2731 transform: rotate(0deg);
2732 }
2733 @media not (prefers-reduced-motion) {
2734 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2735 transition: transform 0.1s ease;
2736 }
2737 }
2738
2739 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
2740 display: block;
2741 }
2742 .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner {
2743 position: absolute;
2744 right: auto;
2745 bottom: auto;
2746 top: calc(50% - 16px / 2);
2747 left: 40px;
2748 }
2749
2750 .block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
2751 top: calc(50% + 16px / 4);
2752 left: 12px;
2753 }
2754
2755 /**
2756 * Link Picker Styles
2757 */
2758 .link-preview-button.components-button {
2759 width: 100%;
2760 height: auto;
2761 padding: 12px;
2762 border-color: #949494;
2763 }
2764
2765 .link-preview-button__image-container {
2766 width: 24px;
2767 height: 24px;
2768 flex-shrink: 0;
2769 }
2770
2771 .link-preview-button__image {
2772 width: 100%;
2773 height: 100%;
2774 object-fit: cover;
2775 border-radius: 2px;
2776 }
2777
2778 .link-preview-button__content {
2779 min-width: 0;
2780 flex: 1;
2781 }
2782
2783 .link-preview-button__details {
2784 min-width: 0;
2785 flex: 1;
2786 }
2787
2788 .link-preview-button__title,
2789 .link-preview-button__hint {
2790 min-width: 0;
2791 display: block;
2792 width: 100%;
2793 text-align: right;
2794 overflow: hidden;
2795 text-overflow: ellipsis;
2796 white-space: nowrap;
2797 }
2798
2799 .link-preview-button__title {
2800 margin-top: 4px;
2801 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2802 color: #1e1e1e;
2803 display: block;
2804 }
2805
2806 .link-preview-button__hint {
2807 font-size: 12px;
2808 color: #757575;
2809 font-weight: 400;
2810 }
2811
2812 .link-preview-button__icon {
2813 color: #1e1e1e;
2814 }
2815
2816 .link-preview-button__badges {
2817 margin-top: 8px;
2818 }
2819
2820 .block-editor-list-view-tree {
2821 width: 100%;
2822 border-collapse: collapse;
2823 padding: 0;
2824 margin: 0;
2825 }
2826 .components-modal__content .block-editor-list-view-tree {
2827 margin: -12px -6px 0;
2828 width: calc(100% + 12px);
2829 }
2830 .block-editor-list-view-tree.is-dragging tbody {
2831 pointer-events: none;
2832 }
2833
2834 .block-editor-list-view-leaf {
2835 position: relative;
2836 transform: translateY(0);
2837 }
2838 .block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2839 z-index: 1;
2840 }
2841 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2842 cursor: grab;
2843 }
2844 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
2845 color: inherit;
2846 }
2847 .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
2848 color: var(--wp-admin-theme-color);
2849 }
2850 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2851 fill: currentColor;
2852 }
2853 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2854 color: inherit;
2855 }
2856 .block-editor-list-view-leaf.is-selected td {
2857 background: var(--wp-admin-theme-color);
2858 }
2859 .block-editor-list-view-leaf.is-selected.is-synced td {
2860 background: var(--wp-block-synced-color);
2861 }
2862 .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,
2863 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2864 color: var(--wp-block-synced-color);
2865 }
2866 .block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
2867 --focus-color: var(--wp-block-synced-color);
2868 }
2869 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
2870 --focus-color: var(--wp-block-synced-color);
2871 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)));
2872 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2873 }
2874 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2875 color: #fff;
2876 }
2877 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2878 --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
2879 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)));
2880 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2881 outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2882 }
2883 @media (forced-colors: active) {
2884 .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
2885 background: SelectedItem;
2886 }
2887 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2888 color: SelectedItemText;
2889 }
2890 .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
2891 fill: SelectedItemText;
2892 }
2893 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
2894 forced-color-adjust: none;
2895 }
2896 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2897 --focus-color: CanvasText;
2898 }
2899 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2900 --focus-color: SelectedItemText;
2901 }
2902 }
2903 .block-editor-list-view-leaf.is-first-selected td:first-child {
2904 border-top-right-radius: 2px;
2905 }
2906 .block-editor-list-view-leaf.is-first-selected td:last-child {
2907 border-top-left-radius: 2px;
2908 }
2909 .block-editor-list-view-leaf.is-last-selected td:first-child {
2910 border-bottom-right-radius: 2px;
2911 }
2912 .block-editor-list-view-leaf.is-last-selected td:last-child {
2913 border-bottom-left-radius: 2px;
2914 }
2915 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
2916 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2917 }
2918 .block-editor-list-view-leaf.is-synced-branch.is-branch-selected {
2919 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
2920 }
2921 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
2922 border-top-right-radius: 2px;
2923 }
2924 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
2925 border-top-left-radius: 2px;
2926 }
2927 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:first-child {
2928 border-top-right-radius: 2px;
2929 }
2930 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:last-child {
2931 border-top-left-radius: 2px;
2932 }
2933 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:first-child {
2934 border-bottom-right-radius: 2px;
2935 }
2936 .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:last-child {
2937 border-bottom-left-radius: 2px;
2938 }
2939 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
2940 border-radius: 0;
2941 }
2942 @media not (prefers-reduced-motion) {
2943 .block-editor-list-view-leaf.is-displacement-normal {
2944 transition: transform 0.2s;
2945 }
2946 }
2947 .block-editor-list-view-leaf.is-displacement-normal {
2948 transform: translateY(0);
2949 }
2950 @media not (prefers-reduced-motion) {
2951 .block-editor-list-view-leaf.is-displacement-up {
2952 transition: transform 0.2s;
2953 }
2954 }
2955 .block-editor-list-view-leaf.is-displacement-up {
2956 transform: translateY(-32px);
2957 }
2958 @media not (prefers-reduced-motion) {
2959 .block-editor-list-view-leaf.is-displacement-down {
2960 transition: transform 0.2s;
2961 }
2962 }
2963 .block-editor-list-view-leaf.is-displacement-down {
2964 transform: translateY(32px);
2965 }
2966 @media not (prefers-reduced-motion) {
2967 .block-editor-list-view-leaf.is-after-dragged-blocks {
2968 transition: transform 0.2s;
2969 }
2970 }
2971 .block-editor-list-view-leaf.is-after-dragged-blocks {
2972 transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2973 }
2974 @media not (prefers-reduced-motion) {
2975 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2976 transition: transform 0.2s;
2977 }
2978 }
2979 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2980 transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2981 }
2982 @media not (prefers-reduced-motion) {
2983 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2984 transition: transform 0.2s;
2985 }
2986 }
2987 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2988 transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2989 }
2990 .block-editor-list-view-leaf.is-dragging {
2991 opacity: 0;
2992 right: 0;
2993 pointer-events: none;
2994 z-index: -9999;
2995 }
2996 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2997 display: flex;
2998 align-items: center;
2999 width: 100%;
3000 height: 32px;
3001 padding: 6px 0 6px 4px;
3002 text-align: right;
3003 position: relative;
3004 white-space: nowrap;
3005 border-radius: 2px;
3006 box-sizing: border-box;
3007 color: inherit;
3008 font-family: inherit;
3009 font-size: 13px;
3010 font-weight: 400;
3011 margin: 0;
3012 text-decoration: none;
3013 }
3014 @media not (prefers-reduced-motion) {
3015 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
3016 transition: box-shadow 0.1s linear;
3017 }
3018 }
3019 .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
3020 padding-right: 0;
3021 padding-left: 0;
3022 }
3023 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
3024 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
3025 box-shadow: none;
3026 outline: none;
3027 }
3028 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
3030 content: "";
3031 position: absolute;
3032 top: 0;
3033 left: -28px;
3034 bottom: 0;
3035 right: 0;
3036 border-radius: inherit;
3037 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)));
3038 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3039 outline-offset: 1px;
3040 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);
3041 z-index: 2;
3042 pointer-events: none;
3043 }
3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
3045 left: 0;
3046 }
3047 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
3048 opacity: 1;
3049 }
3050 @keyframes __wp-base-styles-fade-in {
3051 from {
3052 opacity: 0;
3053 }
3054 to {
3055 opacity: 1;
3056 }
3057 }
3058 @media not (prefers-reduced-motion) {
3059 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
3060 animation: __wp-base-styles-fade-in 0.08s linear 0s;
3061 animation-fill-mode: forwards;
3062 }
3063 }
3064 .block-editor-list-view-leaf .block-editor-block-icon {
3065 margin-left: 4px;
3066 flex: 0 0 24px;
3067 }
3068 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
3069 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
3070 .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
3071 padding: 0;
3072 }
3073 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
3074 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
3075 line-height: 0;
3076 width: 28px;
3077 vertical-align: middle;
3078 }
3079 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
3080 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
3081 opacity: 0;
3082 }
3083 .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 > *,
3084 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
3085 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:focus-within > *,
3086 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
3087 opacity: 1;
3088 }
3089 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper {
3090 display: flex;
3091 height: 100%;
3092 flex-direction: column;
3093 align-items: center;
3094 }
3095 .block-editor-list-view-leaf .block-editor-block-mover-button {
3096 position: relative;
3097 width: 36px;
3098 height: 24px;
3099 }
3100 .block-editor-list-view-leaf .block-editor-block-mover-button svg {
3101 position: relative;
3102 height: 24px;
3103 }
3104 .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button {
3105 margin-top: -6px;
3106 align-items: flex-end;
3107 }
3108 .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button svg {
3109 bottom: -4px;
3110 }
3111 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button {
3112 margin-bottom: -6px;
3113 align-items: flex-start;
3114 }
3115 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
3116 top: -4px;
3117 }
3118 .block-editor-list-view-leaf .block-editor-inserter__toggle {
3119 background: #1e1e1e;
3120 color: #fff;
3121 height: 24px;
3122 margin: 6px 1px 6px 6px;
3123 min-width: 24px;
3124 }
3125 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
3126 color: #fff;
3127 }
3128 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
3129 width: 100%;
3130 }
3131 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper > * {
3132 min-width: 0;
3133 }
3134 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
3135 right: 2px;
3136 position: relative;
3137 }
3138 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
3139 flex: 1;
3140 position: relative;
3141 }
3142 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
3143 position: absolute;
3144 width: 100%;
3145 transform: translateY(-50%);
3146 }
3147 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
3148 position: relative;
3149 max-width: min(110px, 40%);
3150 width: 100%;
3151 }
3152 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
3153 position: absolute;
3154 left: 0;
3155 transform: translateY(-50%);
3156 box-sizing: border-box;
3157 max-width: 100%;
3158 padding: 2px 8px;
3159 border-radius: 2px;
3160 background: #f0f0f0;
3161 color: #2f2f2f;
3162 font-size: 12px;
3163 line-height: 20px;
3164 overflow: hidden;
3165 text-overflow: ellipsis;
3166 white-space: nowrap;
3167 }
3168 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
3169 background: rgba(0, 0, 0, 0.3);
3170 color: #fff;
3171 }
3172 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
3173 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
3174 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
3175 line-height: 0;
3176 }
3177 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
3178 display: flex;
3179 }
3180 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image {
3181 background-size: cover;
3182 width: 18px;
3183 height: 18px;
3184 border-radius: 1px;
3185 }
3186 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
3187 box-shadow: 0 0 0 2px #fff;
3188 }
3189 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:first-child) {
3190 margin-right: -6px;
3191 }
3192 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
3193 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
3194 }
3195 .block-editor-list-view-leaf.is-disabled {
3196 opacity: 0.2;
3197 }
3198 @media not (prefers-reduced-motion) {
3199 .block-editor-list-view-leaf.is-disabled {
3200 transition: opacity 0.1s linear;
3201 }
3202 }
3203 .block-editor-list-view-leaf.is-disabled:hover {
3204 opacity: 0.2;
3205 }
3206 .block-editor-list-view-leaf.is-disabled .block-editor-list-view__expander {
3207 cursor: default;
3208 }
3209 .block-editor-list-view-leaf.is-disabled .block-editor-list-view-block-select-button:hover {
3210 color: inherit;
3211 }
3212
3213 .block-editor-list-view-draggable-chip {
3214 opacity: 0.8;
3215 }
3216
3217 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
3218 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
3219 .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
3220 .block-editor-list-view-appender__cell .block-editor-list-view-appender__container {
3221 display: flex;
3222 }
3223
3224 .block-editor-list-view__expander {
3225 height: 24px;
3226 width: 24px;
3227 cursor: var(--wpds-cursor-control, pointer);
3228 }
3229
3230 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
3231 margin-right: 192px;
3232 }
3233
3234 .block-editor-list-view-leaf[aria-level="1"] .block-editor-list-view__expander {
3235 margin-right: 0;
3236 }
3237
3238 .block-editor-list-view-leaf[aria-level="2"] .block-editor-list-view__expander {
3239 margin-right: 24px;
3240 }
3241
3242 .block-editor-list-view-leaf[aria-level="3"] .block-editor-list-view__expander {
3243 margin-right: 48px;
3244 }
3245
3246 .block-editor-list-view-leaf[aria-level="4"] .block-editor-list-view__expander {
3247 margin-right: 72px;
3248 }
3249
3250 .block-editor-list-view-leaf[aria-level="5"] .block-editor-list-view__expander {
3251 margin-right: 96px;
3252 }
3253
3254 .block-editor-list-view-leaf[aria-level="6"] .block-editor-list-view__expander {
3255 margin-right: 120px;
3256 }
3257
3258 .block-editor-list-view-leaf[aria-level="7"] .block-editor-list-view__expander {
3259 margin-right: 144px;
3260 }
3261
3262 .block-editor-list-view-leaf[aria-level="8"] .block-editor-list-view__expander {
3263 margin-right: 168px;
3264 }
3265
3266 .block-editor-list-view-leaf .block-editor-list-view__expander {
3267 visibility: hidden;
3268 }
3269
3270 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3271 visibility: visible;
3272 }
3273 @media not (prefers-reduced-motion) {
3274 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3275 transition: transform 0.2s ease;
3276 }
3277 }
3278 .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3279 transform: rotate(-90deg);
3280 }
3281
3282 .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
3283 visibility: visible;
3284 transform: rotate(0deg);
3285 }
3286 @media not (prefers-reduced-motion) {
3287 .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
3288 transition: transform 0.2s ease;
3289 }
3290 }
3291
3292 .block-editor-list-view-drop-indicator {
3293 pointer-events: none;
3294 }
3295 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
3296 background: var(--wp-admin-theme-color);
3297 height: 4px;
3298 border-radius: 4px;
3299 }
3300
3301 .block-editor-list-view-drop-indicator--preview {
3302 pointer-events: none;
3303 }
3304 .block-editor-list-view-drop-indicator--preview .components-popover__content {
3305 overflow: hidden !important;
3306 }
3307 .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line {
3308 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3309 height: 32px;
3310 border-radius: 4px;
3311 overflow: hidden;
3312 }
3313 .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker {
3314 background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
3315 }
3316
3317 .block-editor-list-view-placeholder {
3318 padding: 0;
3319 margin: 0;
3320 height: 32px;
3321 }
3322
3323 .list-view-appender .block-editor-inserter__toggle {
3324 background-color: #1e1e1e;
3325 color: #fff;
3326 margin: 8px 24px 0 0;
3327 height: 24px;
3328 padding: 0;
3329 }
3330 .list-view-appender .block-editor-inserter__toggle.has-icon.is-next-40px-default-size {
3331 min-width: 24px;
3332 }
3333 .list-view-appender .block-editor-inserter__toggle:hover, .list-view-appender .block-editor-inserter__toggle:focus {
3334 background: var(--wp-admin-theme-color);
3335 color: #fff;
3336 }
3337
3338 .list-view-appender__description {
3339 display: none;
3340 }
3341
3342 .block-editor-media-placeholder__url-input-form {
3343 min-width: 260px;
3344 }
3345 @media (min-width: 600px) {
3346 .block-editor-media-placeholder__url-input-form {
3347 width: 300px;
3348 }
3349 }
3350 .block-editor-media-placeholder__url-input-form input {
3351 direction: ltr;
3352 }
3353
3354 .modal-open .block-editor-media-replace-flow__options {
3355 z-index: 99999;
3356 }
3357
3358 .block-editor-media-replace-flow__indicator {
3359 margin-right: 4px;
3360 }
3361
3362 .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
3363 border-top: 1px solid #ddd;
3364 margin-top: 8px;
3365 padding-bottom: 8px;
3366 }
3367
3368 .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 {
3369 border-top-color: #1e1e1e;
3370 }
3371
3372 .block-editor-media-flow__url-input {
3373 margin-left: -8px;
3374 margin-right: -8px;
3375 padding: 16px;
3376 }
3377 .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
3378 display: block;
3379 top: 16px;
3380 margin-bottom: 8px;
3381 }
3382 .block-editor-media-flow__url-input .block-editor-link-control {
3383 width: 300px;
3384 }
3385 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
3386 padding: 0;
3387 margin: 0;
3388 }
3389 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__tools {
3390 justify-content: flex-end;
3391 padding: 16px var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
3392 }
3393 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__preview.is-current {
3394 width: auto;
3395 padding: 0;
3396 }
3397 .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] {
3398 margin: 0;
3399 width: 100%;
3400 }
3401 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3402 padding: 8px 0 0;
3403 }
3404
3405 .block-editor-multi-selection-inspector__card {
3406 padding: 16px;
3407 }
3408
3409 .block-editor-multi-selection-inspector__card-title {
3410 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3411 }
3412
3413 .block-editor-multi-selection-inspector__card-description {
3414 color: #757575;
3415 }
3416
3417 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3418 margin-right: -2px;
3419 padding: 0 3px;
3420 width: 36px;
3421 height: 24px;
3422 }
3423
3424 .block-editor-plain-text {
3425 width: 100%;
3426 field-sizing: content;
3427 }
3428
3429 .block-editor-responsive-block-control {
3430 margin-bottom: 28px;
3431 border-bottom: 1px solid #ccc;
3432 padding-bottom: 14px;
3433 }
3434 .block-editor-responsive-block-control:last-child {
3435 padding-bottom: 0;
3436 border-bottom: 0;
3437 }
3438
3439 .block-editor-responsive-block-control__title {
3440 margin: 0;
3441 margin-bottom: 0.6em;
3442 margin-right: -3px;
3443 }
3444
3445 .block-editor-responsive-block-control__label {
3446 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3447 margin-bottom: 0.6em;
3448 margin-right: -3px;
3449 }
3450
3451 .block-editor-responsive-block-control__inner {
3452 margin-right: -1px;
3453 }
3454
3455 .block-editor-responsive-block-control__toggle {
3456 margin-right: 1px;
3457 }
3458
3459 .block-editor-responsive-block-control .components-base-control__help {
3460 border: 0;
3461 clip-path: inset(50%);
3462 height: 1px;
3463 margin: -1px;
3464 overflow: hidden;
3465 padding: 0;
3466 position: absolute;
3467 width: 1px;
3468 overflow-wrap: normal !important;
3469 word-break: normal !important;
3470 }
3471
3472 .preset-input-control__wrapper > * {
3473 flex: 1;
3474 }
3475 .preset-input-control__wrapper > .preset-input-control__icon,
3476 .preset-input-control__wrapper > .preset-input-control__custom-toggle {
3477 flex: none;
3478 }
3479
3480 .components-popover.block-editor-rich-text__inline-format-toolbar {
3481 z-index: 99998;
3482 }
3483 .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content {
3484 width: auto;
3485 min-width: auto;
3486 margin-bottom: 8px;
3487 box-shadow: none;
3488 outline: none;
3489 border-radius: 2px;
3490 }
3491 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
3492 border-radius: 2px;
3493 }
3494 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
3495 background: none;
3496 }
3497 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
3498 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
3499 min-width: 48px;
3500 min-height: 48px;
3501 padding-right: 12px;
3502 padding-left: 12px;
3503 }
3504
3505 .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle {
3506 justify-content: center;
3507 }
3508
3509 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon {
3510 width: auto;
3511 }
3512 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg {
3513 display: none;
3514 }
3515 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after {
3516 content: attr(aria-label);
3517 }
3518
3519 .block-editor-skip-to-selected-block {
3520 position: absolute;
3521 top: -9999em;
3522 }
3523 .block-editor-skip-to-selected-block:focus {
3524 font-size: 14px;
3525 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3526 background: #f1f1f1;
3527 z-index: 100000;
3528 }
3529
3530 .block-editor-tabbed-sidebar {
3531 background-color: #fff;
3532 height: 100%;
3533 display: flex;
3534 flex-direction: column;
3535 flex-grow: 1;
3536 overflow: hidden;
3537 }
3538
3539 .block-editor-tabbed-sidebar__tablist-and-close-button {
3540 border-bottom: 1px solid #ddd;
3541 display: flex;
3542 justify-content: space-between;
3543 padding-left: 8px;
3544 }
3545
3546 .block-editor-tabbed-sidebar__close-button {
3547 background: #fff;
3548 /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
3549 order: 1;
3550 align-self: center;
3551 }
3552
3553 .block-editor-tabbed-sidebar__tablist {
3554 margin-bottom: -1px;
3555 }
3556
3557 .block-editor-tabbed-sidebar__tabpanel {
3558 display: flex;
3559 flex-grow: 1;
3560 flex-direction: column;
3561 overflow-y: auto;
3562 scrollbar-gutter: auto;
3563 }
3564
3565 .block-editor-block-list__block .block-editor-url-input,
3566 .components-popover .block-editor-url-input,
3567 .block-editor-url-input {
3568 flex-grow: 1;
3569 position: relative;
3570 padding: 1px;
3571 }
3572 @media (min-width: 600px) {
3573 .block-editor-block-list__block .block-editor-url-input,
3574 .components-popover .block-editor-url-input,
3575 .block-editor-url-input {
3576 min-width: 300px;
3577 width: auto;
3578 }
3579 }
3580 .block-editor-block-list__block .block-editor-url-input.is-full-width,
3581 .components-popover .block-editor-url-input.is-full-width,
3582 .block-editor-url-input.is-full-width {
3583 width: 100%;
3584 }
3585 .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
3586 .components-popover .block-editor-url-input.is-full-width__suggestions,
3587 .block-editor-url-input.is-full-width__suggestions {
3588 width: 100%;
3589 }
3590 .block-editor-block-list__block .block-editor-url-input .components-spinner,
3591 .components-popover .block-editor-url-input .components-spinner,
3592 .block-editor-url-input .components-spinner {
3593 position: absolute;
3594 margin: 0;
3595 top: calc(50% - 16px / 2);
3596 left: 8px;
3597 }
3598
3599 .block-editor-url-input__suggestions {
3600 max-height: 200px;
3601 }
3602 @media not (prefers-reduced-motion) {
3603 .block-editor-url-input__suggestions {
3604 transition: all 0.15s ease-in-out;
3605 }
3606 }
3607 .block-editor-url-input__suggestions {
3608 padding: 4px 0;
3609 width: 302px;
3610 overflow-y: auto;
3611 }
3612
3613 .block-editor-url-input__suggestions,
3614 .block-editor-url-input .components-spinner {
3615 display: none;
3616 }
3617 @media (min-width: 600px) {
3618 .block-editor-url-input__suggestions,
3619 .block-editor-url-input .components-spinner {
3620 display: grid;
3621 }
3622 }
3623
3624 .block-editor-url-input__suggestion {
3625 min-height: 36px;
3626 height: auto;
3627 color: #757575;
3628 display: block;
3629 font-size: 13px;
3630 cursor: var(--wpds-cursor-control, pointer);
3631 background: #fff;
3632 width: 100%;
3633 border: none;
3634 text-align: right;
3635 box-shadow: none;
3636 }
3637 .block-editor-url-input__suggestion:hover {
3638 background: #ddd;
3639 }
3640 .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected {
3641 background: var(--wp-admin-theme-color-darker-20);
3642 color: #fff;
3643 outline: none;
3644 }
3645
3646 .components-toolbar-group > .block-editor-url-input__button,
3647 .components-toolbar > .block-editor-url-input__button {
3648 position: inherit;
3649 }
3650
3651 .block-editor-url-input__button .block-editor-url-input__back {
3652 margin-left: 4px;
3653 overflow: visible;
3654 }
3655 .block-editor-url-input__button .block-editor-url-input__back::after {
3656 content: "";
3657 position: absolute;
3658 display: block;
3659 width: 1px;
3660 height: 24px;
3661 left: -1px;
3662 background: #ddd;
3663 }
3664
3665 .block-editor-url-input__button-modal {
3666 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);
3667 border: 1px solid #ddd;
3668 background: #fff;
3669 }
3670
3671 .block-editor-url-input__button-modal-line {
3672 display: flex;
3673 flex-direction: row;
3674 flex-grow: 1;
3675 flex-shrink: 1;
3676 min-width: 0;
3677 align-items: flex-start;
3678 }
3679
3680 .block-editor-url-popover__additional-controls {
3681 border-top: 1px solid #1e1e1e;
3682 padding: 8px 8px;
3683 }
3684
3685 .block-editor-url-popover__input-container {
3686 padding: 8px;
3687 }
3688
3689 .block-editor-url-popover__row {
3690 display: flex;
3691 gap: 4px;
3692 align-items: center;
3693 }
3694
3695 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
3696 flex-grow: 1;
3697 gap: 8px;
3698 }
3699
3700 .block-editor-url-popover__additional-controls .components-button.has-icon {
3701 padding-right: 8px;
3702 padding-left: 8px;
3703 height: auto;
3704 text-align: right;
3705 }
3706 .block-editor-url-popover__additional-controls .components-button.has-icon > svg {
3707 margin-left: 8px;
3708 }
3709
3710 .block-editor-url-popover__settings-toggle {
3711 flex-shrink: 0;
3712 }
3713 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
3714 transform: rotate(-180deg);
3715 }
3716
3717 .block-editor-url-popover__settings {
3718 display: block;
3719 padding: 16px;
3720 border-top: 1px solid #1e1e1e;
3721 }
3722
3723 .block-editor-url-popover__link-container-content {
3724 display: flex;
3725 align-items: center;
3726 }
3727
3728 .block-editor-url-popover__link-editor,
3729 .block-editor-url-popover__link-viewer {
3730 display: flex;
3731 }
3732
3733 .block-editor-url-popover__link-viewer-url {
3734 display: flex;
3735 align-items: center;
3736 flex-grow: 1;
3737 flex-shrink: 1;
3738 overflow: hidden;
3739 text-overflow: ellipsis;
3740 white-space: nowrap;
3741 margin-left: 8px;
3742 min-width: 150px;
3743 max-width: 350px;
3744 }
3745 .block-editor-url-popover__link-viewer-url.has-invalid-link {
3746 color: #cc1818;
3747 }
3748
3749 .block-editor-url-popover__expand-on-click {
3750 display: flex;
3751 align-items: center;
3752 min-width: 350px;
3753 white-space: nowrap;
3754 }
3755 .block-editor-url-popover__expand-on-click .text {
3756 flex-grow: 1;
3757 }
3758 .block-editor-url-popover__expand-on-click .text p {
3759 margin: 0;
3760 line-height: 16px;
3761 }
3762 .block-editor-url-popover__expand-on-click .text p.description {
3763 color: #757575;
3764 font-size: 12px;
3765 }
3766
3767 .background-block-support-panel {
3768 /* Increased specificity required to remove the slot wrapper's row gap */
3769 }
3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3771 row-gap: 0;
3772 }
3773
3774 .block-editor-hooks__block-hooks {
3775 /**
3776 * Un-reverse the flex direction for the toggle's label.
3777 */
3778 }
3779 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
3780 flex-direction: row;
3781 }
3782 .block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
3783 color: #757575;
3784 font-size: 12px;
3785 margin-bottom: 16px;
3786 }
3787
3788 div.block-editor-bindings__panel {
3789 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3790 }
3791 div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
3792 color: inherit;
3793 }
3794
3795 .border-block-support-panel .single-column {
3796 grid-column: span 1;
3797 }
3798
3799 .color-block-support-panel .block-editor-contrast-checker {
3800 grid-column: span 2;
3801 margin-top: 16px;
3802 }
3803 .color-block-support-panel {
3804 /* Increased specificity required to remove the slot wrapper's row gap */
3805 }
3806 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3807 row-gap: 0;
3808 }
3809
3810 .elements-block-support-panel {
3811 /* Increased specificity required to remove the slot wrapper's row gap */
3812 }
3813 .elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3814 row-gap: 0;
3815 }
3816
3817 .dimensions-block-support-panel .single-column {
3818 grid-column: span 1;
3819 }
3820
3821 .block-editor-hooks__layout-constrained .components-base-control {
3822 margin-bottom: 0;
3823 }
3824
3825 .block-editor-hooks__layout-constrained-helptext {
3826 color: #757575;
3827 font-size: 12px;
3828 margin-bottom: 0;
3829 }
3830
3831 .layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3832 grid-column: 1/-1;
3833 }
3834
3835 .block-editor-hooks__flex-layout-justification-controls,
3836 .block-editor-hooks__flex-layout-orientation-controls {
3837 margin-bottom: 12px;
3838 }
3839 .block-editor-hooks__flex-layout-justification-controls legend,
3840 .block-editor-hooks__flex-layout-orientation-controls legend {
3841 margin-bottom: 8px;
3842 }
3843
3844 .block-editor-hooks__grid-layout-columns-and-rows-controls,
3845 .block-editor-hooks__grid-layout-minimum-width-control {
3846 border: 0;
3847 padding: 0;
3848 margin: 0;
3849 }
3850
3851 .block-editor__spacing-visualizer {
3852 position: absolute;
3853 top: 0;
3854 bottom: 0;
3855 right: 0;
3856 left: 0;
3857 opacity: 0.5;
3858 border-color: var(--wp-admin-theme-color);
3859 border-style: solid;
3860 pointer-events: none;
3861 box-sizing: border-box;
3862 }
3863
3864 .typography-block-support-panel .single-column {
3865 grid-column: span 1;
3866 }
3867
3868 /**
3869 * Block Toolbar
3870 */
3871 .block-editor-block-toolbar {
3872 display: flex;
3873 flex-grow: 1;
3874 width: 100%;
3875 position: relative;
3876 overflow-y: hidden;
3877 overflow-x: auto;
3878 }
3879 @media not (prefers-reduced-motion) {
3880 .block-editor-block-toolbar {
3881 transition: border-color 0.1s linear, box-shadow 0.1s linear;
3882 }
3883 }
3884 @media (min-width: 600px) {
3885 .block-editor-block-toolbar {
3886 overflow: inherit;
3887 }
3888 }
3889 .block-editor-block-toolbar .components-toolbar-group,
3890 .block-editor-block-toolbar .components-toolbar {
3891 background: none;
3892 margin-top: -1px;
3893 margin-bottom: -1px;
3894 border: 0;
3895 border-left: 1px solid #ddd;
3896 }
3897 .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button::before {
3898 background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
3899 border-radius: 2px;
3900 }
3901 .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true] {
3902 color: #1e1e1e;
3903 }
3904 .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
3905 color: #1e1e1e;
3906 }
3907 .block-editor-block-toolbar.is-synced .block-editor-block-toolbar__block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-toolbar__block-icon {
3908 color: var(--wp-block-synced-color);
3909 }
3910 .block-editor-block-toolbar > :last-child,
3911 .block-editor-block-toolbar > :last-child .components-toolbar-group,
3912 .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 {
3913 border-left: none;
3914 }
3915 .block-editor-block-toolbar .components-toolbar-group:empty {
3916 display: none;
3917 }
3918
3919 .block-editor-block-contextual-toolbar {
3920 position: sticky;
3921 top: 0;
3922 z-index: 31;
3923 display: block;
3924 width: 100%;
3925 background-color: #fff;
3926 flex-shrink: 3;
3927 }
3928 .block-editor-block-contextual-toolbar.components-accessible-toolbar {
3929 border: none;
3930 border-radius: 0;
3931 }
3932 .block-editor-block-contextual-toolbar.is-unstyled {
3933 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
3934 }
3935 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3936 overflow: auto;
3937 overflow-y: hidden;
3938 }
3939 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
3940 width: 12px;
3941 height: 12px;
3942 }
3943 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
3944 background-color: transparent;
3945 }
3946 .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
3947 background-color: #e0e0e0;
3948 border-radius: 8px;
3949 border: 3px solid transparent;
3950 background-clip: padding-box;
3951 }
3952 .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 {
3953 background-color: #949494;
3954 }
3955 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3956 scrollbar-width: thin;
3957 scrollbar-gutter: stable both-edges;
3958 scrollbar-color: #e0e0e0 transparent;
3959 }
3960 .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 {
3961 scrollbar-color: #949494 transparent;
3962 }
3963 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3964 will-change: transform;
3965 }
3966 @media (hover: none) {
3967 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3968 scrollbar-color: #949494 transparent;
3969 }
3970 }
3971 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3972 scrollbar-gutter: auto;
3973 }
3974 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
3975 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
3976 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar::after {
3977 display: none;
3978 }
3979 .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
3980 flex-grow: initial;
3981 width: initial;
3982 }
3983 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
3984 position: relative;
3985 margin-top: -1px;
3986 margin-bottom: -1px;
3987 }
3988 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
3989 align-items: center;
3990 background-color: #1e1e1e;
3991 border-radius: 100%;
3992 content: "";
3993 display: inline-flex;
3994 height: 2px;
3995 position: absolute;
3996 top: 15px;
3997 width: 2px;
3998 }
3999
4000 .block-editor-block-toolbar__block-controls .components-toolbar-group {
4001 padding: 0;
4002 }
4003
4004 .block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
4005 min-width: 260px;
4006 padding: 16px;
4007 }
4008
4009 .block-editor-block-toolbar .components-toolbar-group,
4010 .block-editor-block-toolbar .components-toolbar,
4011 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
4012 .block-editor-rich-text__inline-format-toolbar-group .components-toolbar {
4013 display: flex;
4014 flex-wrap: nowrap;
4015 }
4016
4017 .block-editor-block-toolbar__slot {
4018 display: inline-flex;
4019 }
4020
4021 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) {
4022 width: auto;
4023 }
4024 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) svg {
4025 display: none;
4026 }
4027 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text))::after {
4028 content: attr(aria-label);
4029 font-size: 12px;
4030 }
4031 .show-icon-labels .block-editor-block-toolbar .block-editor-block-icon {
4032 width: 0 !important;
4033 height: 0 !important;
4034 min-width: 0 !important;
4035 }
4036 .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
4037 padding-right: 6px;
4038 padding-left: 6px;
4039 }
4040 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
4041 border-top-left-radius: 0;
4042 border-bottom-left-radius: 0;
4043 padding-right: 12px;
4044 padding-left: 12px;
4045 text-wrap: nowrap;
4046 }
4047 .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button .block-editor-block-icon {
4048 width: 0;
4049 }
4050 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
4051 width: auto;
4052 position: relative;
4053 }
4054 @media (min-width: 600px) {
4055 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
4056 content: "";
4057 height: 1px;
4058 width: 100%;
4059 background: #e0e0e0;
4060 position: absolute;
4061 top: 50%;
4062 right: 50%;
4063 transform: translate(50%, 0);
4064 margin-top: -0.5px;
4065 }
4066 }
4067 @media (min-width: 782px) {
4068 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
4069 background: #1e1e1e;
4070 }
4071 }
4072 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
4073 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
4074 padding-right: 6px;
4075 padding-left: 6px;
4076 }
4077 .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
4078 padding-right: 8px;
4079 padding-left: 8px;
4080 }
4081 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
4082 border-right: 1px solid #ddd;
4083 margin-right: 6px;
4084 margin-left: -6px;
4085 white-space: nowrap;
4086 }
4087 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
4088 padding-right: 12px;
4089 padding-left: 12px;
4090 }
4091 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
4092 width: auto;
4093 }
4094 .show-icon-labels .components-toolbar,
4095 .show-icon-labels .components-toolbar-group {
4096 flex-shrink: 1;
4097 }
4098 .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
4099 margin-right: 6px;
4100 }
4101
4102 .block-editor-block-toolbar-change-design-content-wrapper {
4103 padding: 12px;
4104 width: 320px;
4105 }
4106 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
4107 display: grid;
4108 grid-template-columns: 1fr 1fr;
4109 gap: 12px;
4110 }
4111 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4112 margin-bottom: 0;
4113 }
4114 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4115 min-height: 100px;
4116 }
4117
4118 .block-editor-inserter {
4119 display: inline-block;
4120 background: none;
4121 border: none;
4122 padding: 0;
4123 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4124 font-size: 13px;
4125 line-height: 0;
4126 }
4127 @media (min-width: 782px) {
4128 .block-editor-inserter {
4129 position: relative;
4130 }
4131 }
4132
4133 .block-editor-inserter__main-area {
4134 height: 100%;
4135 gap: 16px;
4136 position: relative;
4137 }
4138 .block-editor-inserter__main-area.show-as-tabs {
4139 gap: 0;
4140 }
4141 @media (min-width: 782px) {
4142 .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
4143 width: 350px;
4144 }
4145 }
4146
4147 .block-editor-inserter__popover.is-quick .components-popover__content {
4148 border: none;
4149 outline: none;
4150 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);
4151 }
4152 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
4153 border-right: 1px solid #ccc;
4154 border-left: 1px solid #ccc;
4155 }
4156 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
4157 border-top: 1px solid #ccc;
4158 border-radius: 4px 4px 0 0;
4159 }
4160 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
4161 border-bottom: 1px solid #ccc;
4162 border-radius: 0 0 4px 4px;
4163 }
4164 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
4165 border: 1px solid #1e1e1e;
4166 }
4167
4168 .block-editor-inserter__popover .block-editor-inserter__menu {
4169 margin: -12px;
4170 }
4171 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tablist {
4172 top: 60px;
4173 }
4174 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area {
4175 overflow: visible;
4176 height: auto;
4177 }
4178 .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container {
4179 display: none;
4180 }
4181
4182 .block-editor-inserter__toggle.components-button {
4183 display: inline-flex;
4184 align-items: center;
4185 cursor: var(--wpds-cursor-control, pointer);
4186 border: none;
4187 outline: none;
4188 padding: 0;
4189 }
4190 @media not (prefers-reduced-motion) {
4191 .block-editor-inserter__toggle.components-button {
4192 transition: color 0.2s ease;
4193 }
4194 }
4195
4196 .block-editor-inserter__menu {
4197 height: 100%;
4198 position: relative;
4199 overflow: visible;
4200 }
4201 @media (min-width: 782px) {
4202 .block-editor-inserter__menu.show-panel {
4203 width: 630px;
4204 }
4205 }
4206
4207 .block-editor-inserter__inline-elements {
4208 margin-top: -1px;
4209 }
4210
4211 .block-editor-inserter__menu.is-bottom::after {
4212 border-bottom-color: #fff;
4213 }
4214
4215 .components-popover.block-editor-inserter__popover {
4216 z-index: 99999;
4217 }
4218
4219 .block-editor-inserter__search {
4220 padding: 16px;
4221 position: sticky;
4222 top: 0;
4223 z-index: 2;
4224 background-color: #fff;
4225 border-bottom: 1px solid transparent;
4226 }
4227 @media not (prefers-reduced-motion) {
4228 .block-editor-inserter__search {
4229 transition: border-bottom-color 0.1s linear;
4230 }
4231 }
4232 .block-editor-inserter__search.is-scrolled {
4233 border-bottom-color: #e0e0e0;
4234 }
4235
4236 .block-editor-inserter__no-tab-container {
4237 overflow-y: auto;
4238 flex-grow: 1;
4239 position: relative;
4240 }
4241
4242 .block-editor-inserter__panel-header {
4243 position: relative;
4244 display: inline-flex;
4245 align-items: center;
4246 padding: 0 16px;
4247 }
4248
4249 .block-editor-inserter__panel-content {
4250 padding: 16px;
4251 }
4252
4253 .block-editor-inserter__panel-title,
4254 .block-editor-inserter__panel-title button {
4255 margin: 0 0 0 12px;
4256 color: #757575;
4257 text-transform: uppercase;
4258 font-size: 11px;
4259 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4260 }
4261
4262 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4263 height: 36px;
4264 line-height: 36px;
4265 }
4266
4267 .block-editor-inserter__panel-dropdown select {
4268 border: none;
4269 }
4270
4271 .block-editor-inserter__reusable-blocks-panel {
4272 position: relative;
4273 text-align: left;
4274 }
4275
4276 .block-editor-inserter__no-results,
4277 .block-editor-inserter__patterns-loading {
4278 padding: 32px;
4279 text-align: center;
4280 }
4281
4282 .block-editor-inserter__child-blocks {
4283 padding: 0 16px;
4284 }
4285
4286 .block-editor-inserter__parent-block-header {
4287 display: flex;
4288 align-items: center;
4289 }
4290 .block-editor-inserter__parent-block-header h2 {
4291 font-size: 13px;
4292 }
4293 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4294 margin-left: 8px;
4295 }
4296
4297 .block-editor-inserter__preview-container {
4298 display: none;
4299 width: 280px;
4300 padding: 16px;
4301 max-height: calc(100% - 32px);
4302 overflow-y: hidden;
4303 }
4304 @media (min-width: 782px) {
4305 .block-editor-inserter__preview-container {
4306 display: block;
4307 }
4308 }
4309 .block-editor-inserter__preview-container .block-editor-inserter__media-list__list-item {
4310 height: 100%;
4311 }
4312 .block-editor-inserter__preview-container .block-editor-block-card {
4313 padding-right: 0;
4314 padding-left: 0;
4315 padding-bottom: 4px;
4316 }
4317
4318 .block-editor-inserter__insertable-blocks-at-selection {
4319 border-bottom: 1px solid #e0e0e0;
4320 }
4321
4322 .block-editor-inserter__media-tabs-container,
4323 .block-editor-inserter__block-patterns-tabs-container {
4324 flex-grow: 1;
4325 padding: 0 16px 16px;
4326 display: flex;
4327 flex-direction: column;
4328 justify-content: space-between;
4329 }
4330
4331 .block-editor-inserter__media-tabs-container {
4332 padding-top: 16px;
4333 }
4334
4335 .block-editor-inserter__category-tablist {
4336 margin-bottom: 8px;
4337 }
4338
4339 .block-editor-inserter__category-panel {
4340 outline: 1px solid transparent;
4341 display: flex;
4342 flex-direction: column;
4343 padding: 0 16px;
4344 }
4345 @media (min-width: 782px) {
4346 .block-editor-inserter__category-panel {
4347 border-right: 1px solid #e0e0e0;
4348 padding: 0;
4349 right: 350px;
4350 width: 280px;
4351 position: absolute;
4352 top: -1px;
4353 height: calc(100% + 1px);
4354 background: #f0f0f0;
4355 border-top: 1px solid #e0e0e0;
4356 }
4357 .block-editor-inserter__category-panel .block-editor-inserter__media-list,
4358 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
4359 padding: 0 24px 16px;
4360 }
4361 }
4362
4363 .block-editor-inserter__patterns-category-panel-header {
4364 padding: 8px 0;
4365 }
4366 @media (min-width: 782px) {
4367 .block-editor-inserter__patterns-category-panel-header {
4368 padding: 8px 24px;
4369 }
4370 }
4371
4372 .block-editor-inserter__patterns-category-no-results {
4373 margin-top: 24px;
4374 }
4375
4376 .block-editor-inserter__patterns-filter-help {
4377 padding: 16px;
4378 border-top: 1px solid #ddd;
4379 color: #757575;
4380 min-width: 280px;
4381 }
4382
4383 .block-editor-inserter__media-list,
4384 .block-editor-block-patterns-list {
4385 overflow-y: auto;
4386 flex-grow: 1;
4387 height: 100%;
4388 }
4389
4390 .block-editor-inserter__preview-content {
4391 background: #f0f0f0;
4392 display: grid;
4393 flex-grow: 1;
4394 align-items: center;
4395 }
4396
4397 .block-editor-inserter__preview-content-missing {
4398 flex: 1;
4399 display: flex;
4400 justify-content: center;
4401 align-items: center;
4402 min-height: 144px;
4403 color: #757575;
4404 background: #f0f0f0;
4405 border-radius: 2px;
4406 }
4407
4408 .block-editor-inserter__tips {
4409 border-top: 1px solid #ddd;
4410 padding: 16px;
4411 flex-shrink: 0;
4412 position: relative;
4413 }
4414
4415 .block-editor-inserter__quick-inserter {
4416 width: 100%;
4417 max-width: 100%;
4418 }
4419 @media (min-width: 782px) {
4420 .block-editor-inserter__quick-inserter {
4421 width: 350px;
4422 }
4423 }
4424
4425 .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
4426 height: 0;
4427 padding: 0;
4428 float: right;
4429 }
4430
4431 .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
4432 .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
4433 padding: 16px;
4434 }
4435
4436 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4437 display: grid;
4438 grid-template-columns: 1fr 1fr;
4439 gap: 8px;
4440 }
4441 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4442 margin-bottom: 0;
4443 }
4444 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4445 min-height: 100px;
4446 }
4447
4448 .block-editor-inserter__quick-inserter-separator {
4449 border-top: 1px solid #ddd;
4450 }
4451
4452 .block-editor-inserter__popover.is-quick > .components-popover__content {
4453 padding: 0;
4454 }
4455
4456 .block-editor-inserter__quick-inserter-expand {
4457 padding: 0 16px 16px;
4458 }
4459
4460 .block-editor-inserter__quick-inserter-expand-toggle {
4461 width: 100%;
4462 justify-content: center;
4463 }
4464
4465 .block-editor-block-patterns-explorer__sidebar {
4466 padding-bottom: 24px;
4467 }
4468 @media (min-width: 782px) {
4469 .block-editor-block-patterns-explorer__sidebar {
4470 position: absolute;
4471 top: 72px;
4472 right: 0;
4473 bottom: 0;
4474 width: 280px;
4475 padding: 24px;
4476 overflow-x: visible;
4477 overflow-y: auto;
4478 }
4479 }
4480
4481 @media (min-width: 782px) {
4482 .block-editor-block-patterns-explorer__panel {
4483 margin-inline-start: 280px;
4484 }
4485 }
4486
4487 .block-editor-block-patterns-explorer__no-results {
4488 padding: 32px;
4489 text-align: center;
4490 }
4491
4492 .block-editor-block-patterns-explorer__list {
4493 padding: 24px 0 32px;
4494 }
4495 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4496 width: 380px;
4497 }
4498
4499 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4500 display: grid;
4501 gap: 32px;
4502 grid-template-columns: repeat(1, 1fr);
4503 margin-bottom: 16px;
4504 }
4505 @media (min-width: 1080px) {
4506 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4507 grid-template-columns: repeat(2, 1fr);
4508 }
4509 }
4510 @media (min-width: 1440px) {
4511 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4512 grid-template-columns: repeat(3, 1fr);
4513 }
4514 }
4515 .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4516 min-height: 240px;
4517 }
4518 .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4519 height: inherit;
4520 min-height: 100px;
4521 max-height: 800px;
4522 }
4523
4524 .components-heading.block-editor-inserter__patterns-category-panel-title {
4525 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4526 }
4527
4528 .block-editor-inserter__patterns-explore-button.components-button,
4529 .block-editor-inserter__media-library-button.components-button {
4530 padding: 16px;
4531 justify-content: center;
4532 margin-top: 16px;
4533 width: 100%;
4534 }
4535
4536 .block-editor-inserter__media-mobile-screen {
4537 display: flex;
4538 flex-direction: column;
4539 align-self: stretch;
4540 }
4541
4542 .block-editor-inserter__media-panel {
4543 padding: 0 16px;
4544 display: flex;
4545 flex-direction: column;
4546 flex: 1;
4547 min-height: 0;
4548 }
4549 @media (min-width: 782px) {
4550 .block-editor-inserter__media-panel {
4551 padding: 0;
4552 flex: 0 1 auto;
4553 min-height: 100%;
4554 }
4555 }
4556 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4557 height: 100%;
4558 display: flex;
4559 align-items: center;
4560 justify-content: center;
4561 flex: 1;
4562 }
4563 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4564 margin-bottom: 24px;
4565 }
4566 @media (min-width: 782px) {
4567 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4568 margin-bottom: 0;
4569 padding: 16px 24px 16px;
4570 }
4571 }
4572 .block-editor-inserter__media-panel .block-editor-inserter__no-results {
4573 flex-grow: 1;
4574 }
4575 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4576 flex-shrink: 0;
4577 padding-top: 16px;
4578 padding-bottom: 16px;
4579 }
4580 @media (min-width: 782px) {
4581 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4582 padding-right: 24px;
4583 padding-left: 24px;
4584 }
4585 }
4586 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-attach.components-button {
4587 justify-content: center;
4588 padding: 16px;
4589 }
4590 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results {
4591 display: flex;
4592 flex-direction: column;
4593 flex-grow: 1;
4594 min-height: 0;
4595 }
4596 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4597 opacity: 0.5;
4598 pointer-events: none;
4599 }
4600 @media not (prefers-reduced-motion) {
4601 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4602 opacity: 1;
4603 animation: inserter-media-panel-pulse 1s ease-in-out infinite;
4604 }
4605 }
4606 .block-editor-inserter__media-panel.has-footer .block-editor-inserter__media-list {
4607 padding-bottom: 0;
4608 }
4609
4610 @keyframes inserter-media-panel-pulse {
4611 0%, 100% {
4612 opacity: 1;
4613 }
4614 50% {
4615 opacity: 0.5;
4616 }
4617 }
4618 .block-editor-inserter__media-panel-detach-modal {
4619 z-index: 1000001;
4620 }
4621 .block-editor-inserter__media-panel-detach-modal p {
4622 margin-top: 0;
4623 }
4624
4625 .block-editor-inserter__media-panel-detach-actions {
4626 display: flex;
4627 justify-content: flex-end;
4628 gap: 8px;
4629 margin-top: 16px;
4630 }
4631
4632 .block-editor-inserter__media-list__list-item {
4633 position: relative;
4634 cursor: var(--wpds-cursor-control, pointer);
4635 margin-bottom: 24px;
4636 }
4637 .block-editor-inserter__media-list__list-item.is-placeholder {
4638 min-height: 100px;
4639 }
4640 .block-editor-inserter__media-list__list-item[draggable=true] .block-editor-inserter__media-list__list-item {
4641 cursor: grab;
4642 }
4643 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4644 outline-color: rgba(0, 0, 0, 0.3);
4645 }
4646 .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 {
4647 display: block;
4648 }
4649 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4650 position: absolute;
4651 left: 8px;
4652 top: 8px;
4653 }
4654 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button {
4655 background: #fff;
4656 display: none;
4657 }
4658 .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 {
4659 display: block;
4660 }
4661 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:hover {
4662 box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4663 outline: 2px solid transparent;
4664 }
4665
4666 .block-editor-inserter__media-list__item {
4667 height: 100%;
4668 }
4669 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview {
4670 display: flex;
4671 align-items: center;
4672 overflow: hidden;
4673 border-radius: 2px;
4674 }
4675 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview > * {
4676 margin: 0 auto;
4677 max-width: 100%;
4678 outline: 1px solid rgba(0, 0, 0, 0.1);
4679 outline-offset: -1px;
4680 }
4681 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
4682 display: flex;
4683 height: 100%;
4684 width: 100%;
4685 position: absolute;
4686 justify-content: center;
4687 background: rgba(255, 255, 255, 0.7);
4688 align-items: center;
4689 pointer-events: none;
4690 }
4691 .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4692 outline-color: var(--wp-admin-theme-color);
4693 outline-width: var(--wp-admin-border-width-focus);
4694 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4695 }
4696 @media not (prefers-reduced-motion) {
4697 .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4698 transition: outline 0.1s linear;
4699 }
4700 }
4701
4702 .block-editor-inserter__media-list__item-preview-options__popover .components-menu-item__button .components-menu-item__item {
4703 min-width: auto;
4704 }
4705
4706 .block-editor-inserter__mobile-tab-navigation {
4707 padding: 16px;
4708 height: 100%;
4709 }
4710 .block-editor-inserter__mobile-tab-navigation > * {
4711 height: 100%;
4712 }
4713
4714 @media (min-width: 600px) {
4715 .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
4716 max-width: 480px;
4717 }
4718 }
4719 .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal p {
4720 margin: 0;
4721 }
4722
4723 .block-editor-inserter__hint {
4724 margin: 16px 16px 0;
4725 }
4726
4727 .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
4728 height: 40px;
4729 }
4730
4731 .block-editor-inserter__pattern-panel-placeholder {
4732 display: none;
4733 }
4734
4735 .block-editor-inserter__menu.is-zoom-out {
4736 display: flex;
4737 }
4738 @media (min-width: 782px) {
4739 .block-editor-inserter__menu.is-zoom-out.show-panel::after {
4740 content: "";
4741 display: block;
4742 width: 300px;
4743 height: 100%;
4744 }
4745 }
4746
4747 @media (max-width: 959px) {
4748 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
4749 flex-direction: column;
4750 }
4751 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4752 .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4753 flex-direction: column;
4754 }
4755 }
4756 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
4757 flex-direction: column;
4758 }
4759 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4760 .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4761 flex-direction: column;
4762 }
4763
4764 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4765 display: none;
4766 padding: 0 24px 16px;
4767 }
4768 @media (min-width: 480px) {
4769 .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4770 display: block;
4771 }
4772 }
4773
4774 .spacing-sizes-control {
4775 border: 0;
4776 padding: 0;
4777 margin: 0;
4778 }
4779 .spacing-sizes-control .spacing-sizes-control__unit-control,
4780 .spacing-sizes-control .spacing-sizes-control__label {
4781 margin-bottom: 0;
4782 }
4783 .spacing-sizes-control .spacing-sizes-control__preset-range,
4784 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
4785 flex: 1;
4786 margin-bottom: 0;
4787 }
4788
4789 .spacing-sizes-control__header {
4790 height: 16px;
4791 margin-bottom: 12px;
4792 }
4793
4794 .spacing-sizes-control__wrapper {
4795 align-items: center;
4796 }
4797
4798 .spacing-sizes-control__dropdown {
4799 height: 24px;
4800 }
4801
4802 .spacing-sizes-control__wrapper .preset-input-control__icon {
4803 margin-right: -4px;
4804 }
4805
4806 .block-editor-block-visibility-modal {
4807 z-index: 1000001;
4808 }
4809 .block-editor-block-visibility-modal__options {
4810 border: 0;
4811 padding: 0;
4812 list-style: none;
4813 margin: 24px 0;
4814 }
4815 .block-editor-block-visibility-modal__options-item {
4816 display: flex;
4817 align-items: center;
4818 justify-content: space-between;
4819 margin: 0 0 16px 0;
4820 gap: 24px;
4821 }
4822 .block-editor-block-visibility-modal__options-item:last-child {
4823 margin: 0;
4824 }
4825 .block-editor-block-visibility-modal__options-item--everywhere {
4826 flex-direction: column;
4827 align-items: start;
4828 }
4829 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4830 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4831 }
4832 .block-editor-block-visibility-modal__options-icon--checked {
4833 color: #ddd;
4834 }
4835 .block-editor-block-visibility-modal__sub-options {
4836 width: 100%;
4837 padding-inline-start: 12px;
4838 }
4839 .block-editor-block-visibility-modal__description {
4840 font-size: 12px;
4841 color: #757575;
4842 }
4843
4844 .block-editor-block-visibility-info {
4845 margin: 0 16px 16px;
4846 }
4847
4848 /* The stop element is invisible, so its focus indication is drawn around the
4849 canvas it stands for. For the iframed canvas it is an overlay instead of
4850 an outline, because Safari paints an outline on an iframe element
4851 underneath the iframe's content. */
4852 .block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
4853 content: "";
4854 position: absolute;
4855 inset: 0;
4856 z-index: 1;
4857 pointer-events: none;
4858 border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4859 }
4860
4861 .block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
4862 outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4863 outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4864 }
4865
4866 /* Looks like a tooltip. Shown at the top of the canvas while the stop is
4867 focused. Sticky, because on the widgets screen the stop spans scrolling
4868 content and the hint must stay in view; anywhere else there is nothing
4869 to scroll and it stays at the top of the canvas. */
4870 .block-editor-writing-flow__canvas-stop-hint {
4871 display: none;
4872 position: sticky;
4873 top: 16px;
4874 margin-inline: auto;
4875 width: fit-content;
4876 z-index: 2;
4877 background: #000;
4878 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4879 border-radius: 4px;
4880 color: #f0f0f0;
4881 text-align: center;
4882 line-height: 1.4;
4883 font-size: 12px;
4884 padding: 4px 8px;
4885 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);
4886 white-space: nowrap;
4887 pointer-events: none;
4888 }
4889
4890 .block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
4891 display: block;
4892 }