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

content-rtl.css in Gutenberg 23.3.1, at build/styles/block-editor/content-rtl.css

944 lines 32.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Typography
3 */
4 /**
5 * SCSS Variables.
6 *
7 * Please use variables from this sheet to ensure consistency across the UI.
8 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10 */
11 /**
12 * Colors
13 */
14 /**
15 * Fonts & basic variables.
16 */
17 /**
18 * Typography
19 */
20 /**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24 /**
25 * Radius scale.
26 */
27 /**
28 * Elevation scale.
29 */
30 /**
31 * Dimensions.
32 */
33 /**
34 * Mobile specific styles
35 */
36 /**
37 * Editor styles.
38 */
39 /**
40 * Block & Editor UI.
41 */
42 /**
43 * Block paddings.
44 */
45 /**
46 * React Native specific.
47 * These variables do not appear to be used anywhere else.
48 */
49 /**
50 * Breakpoints & Media Queries
51 */
52 /**
53 * Converts a hex value into the rgb equivalent.
54 *
55 * @param {string} hex - the hexadecimal value to convert
56 * @return {string} comma separated rgb values
57 */
58 /**
59 * Long content fade mixin
60 *
61 * Creates a fading overlay to signify that the content is longer
62 * than the space allows.
63 */
64 /**
65 * Breakpoint mixins
66 */
67 /**
68 * Focus styles.
69 */
70 /**
71 * Applies editor left position to the selector passed as argument
72 */
73 /**
74 * Styles that are reused verbatim in a few places
75 */
76 /**
77 * Allows users to opt-out of animations via OS-level preferences.
78 */
79 /**
80 * Reset default styles for JavaScript UI based pages.
81 * This is a WP-admin agnostic reset
82 */
83 /**
84 * Reset the WP Admin page styles for Gutenberg-like pages.
85 */
86 /**
87 * Creates a checkerboard pattern background to indicate transparency.
88 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89 */
90 :root {
91 --wp-block-synced-color: #7a00df;
92 --wp-block-synced-color--rgb: 122, 0, 223;
93 --wp-bound-block-color: var(--wp-block-synced-color);
94 --wp-editor-canvas-background: #ddd;
95 --wp-admin-theme-color: #007cba;
96 --wp-admin-theme-color--rgb: 0, 124, 186;
97 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
98 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
99 --wp-admin-theme-color-darker-20: #005a87;
100 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
101 --wp-admin-border-width-focus: 2px;
102 }
103 @media (min-resolution: 192dpi) {
104 :root {
105 --wp-admin-border-width-focus: 1.5px;
106 }
107 }
108
109 .block-editor-block-icon {
110 display: flex;
111 align-items: center;
112 justify-content: center;
113 width: 24px;
114 height: 24px;
115 }
116 .block-editor-block-icon.has-colors svg {
117 fill: currentColor;
118 }
119 @media (forced-colors: active) {
120 .block-editor-block-icon.has-colors svg {
121 fill: CanvasText;
122 }
123 }
124 .block-editor-block-icon svg {
125 min-width: 20px;
126 min-height: 20px;
127 max-width: 24px;
128 max-height: 24px;
129 }
130
131 .block-editor-block-styles .block-editor-block-list__block {
132 margin: 0;
133 }
134
135 /**
136 * Cross-Block Selection
137 */
138 @keyframes selection-overlay__fade-in-animation {
139 from {
140 opacity: 0;
141 }
142 to {
143 opacity: 0.4;
144 }
145 }
146 /* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
147 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
148 _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .block-editor-block-list__layout::selection {
149 background-color: transparent;
150 }
151
152 /* stylelint-enable */
153 .block-editor-block-list__layout {
154 position: relative;
155 }
156 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
157 background: transparent;
158 }
159 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
160 content: "";
161 position: absolute;
162 z-index: 1;
163 pointer-events: none;
164 top: 0;
165 left: 0;
166 bottom: 0;
167 right: 0;
168 background: var(--wp-admin-theme-color);
169 opacity: 0.4;
170 }
171 @media not (prefers-reduced-motion) {
172 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
173 animation: selection-overlay__fade-in-animation 0.1s ease-out;
174 animation-fill-mode: forwards;
175 }
176 }
177 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
178 outline: 2px solid transparent;
179 }
180 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted::after {
181 outline-color: transparent;
182 }
183 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
184 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
185 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus {
186 outline: none;
187 }
188 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
189 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after,
190 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
191 content: "";
192 position: absolute;
193 pointer-events: none;
194 top: 0;
195 left: 0;
196 bottom: 0;
197 right: 0;
198 outline-color: var(--wp-admin-theme-color);
199 outline-style: solid;
200 outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
201 outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
202 box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
203 z-index: 1;
204 }
205 .block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
206 visibility: hidden;
207 overflow: hidden;
208 height: 0;
209 border: none !important;
210 padding: 0 !important;
211 opacity: 0;
212 margin-top: 0 !important;
213 margin-bottom: 0 !important;
214 }
215 .block-editor-block-list__layout.is-layout-flex:not(.is-vertical) > .is-block-hidden {
216 width: 0;
217 height: auto;
218 align-self: stretch;
219 white-space: nowrap !important;
220 margin-right: 0 !important;
221 margin-left: 0 !important;
222 }
223 .block-editor-block-list__layout [class^=components-] {
224 -webkit-user-select: text;
225 user-select: text;
226 }
227
228 .block-editor-block-list__layout .block-editor-block-list__block {
229 position: relative;
230 overflow-wrap: break-word;
231 pointer-events: auto;
232 }
233 .block-editor-block-list__layout .block-editor-block-list__block.is-editing-disabled {
234 pointer-events: none;
235 }
236 .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.is-selected, .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.has-child-selected {
237 z-index: 20;
238 }
239 .block-editor-block-list__layout .block-editor-block-list__block {
240 /**
241 * Notices
242 */
243 }
244 .block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
245 margin: -10px 0 12px 0;
246 }
247 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
248 margin: 0 0 12px 0;
249 width: 100%;
250 }
251 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
252 min-height: 48px;
253 }
254 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
255 pointer-events: none;
256 -webkit-user-select: none;
257 user-select: none;
258 }
259 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
260 pointer-events: all;
261 }
262 .block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] {
263 float: none;
264 }
265 .block-editor-block-list__layout .block-editor-block-list__block:not([draggable=true]), .block-editor-block-list__layout .block-editor-block-list__block:not([data-draggable=true]) {
266 cursor: default;
267 }
268 .block-editor-block-list__layout .block-editor-block-list__block[draggable=true], .block-editor-block-list__layout .block-editor-block-list__block[data-draggable=true] {
269 cursor: grab;
270 }
271 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected {
272 cursor: default;
273 }
274 .block-editor-block-list__layout .block-editor-block-list__block[contenteditable],
275 .block-editor-block-list__layout .block-editor-block-list__block [contenteditable] {
276 cursor: text;
277 }
278
279 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected::after {
280 content: "";
281 position: absolute;
282 pointer-events: none;
283 top: 0;
284 left: 0;
285 bottom: 0;
286 right: 0;
287 outline-color: var(--wp-admin-theme-color);
288 outline-style: solid;
289 outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
290 outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
291 box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
292 }
293
294 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,
295 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after,
296 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after,
297 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after {
298 outline-color: var(--wp-block-synced-color);
299 }
300 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
301 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
302 outline-color: var(--wp-block-synced-color);
303 }
304
305 @keyframes block-editor-is-editable__animation {
306 from {
307 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
308 }
309 to {
310 background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
311 }
312 }
313 @keyframes block-editor-is-editable__animation_reduce-motion {
314 0% {
315 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
316 }
317 99% {
318 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
319 }
320 100% {
321 background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
322 }
323 }
324 .is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
325 animation-name: block-editor-is-editable__animation;
326 animation-duration: 0.8s;
327 animation-timing-function: ease-out;
328 animation-delay: 0.1s;
329 animation-fill-mode: backwards;
330 bottom: 0;
331 content: "";
332 right: 0;
333 pointer-events: none;
334 position: absolute;
335 left: 0;
336 top: 0;
337 }
338 @media (prefers-reduced-motion: reduce) {
339 .is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
340 animation-name: block-editor-is-editable__animation_reduce-motion;
341 animation-delay: 0s;
342 }
343 }
344
345 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
346 opacity: 0.2;
347 }
348 @media not (prefers-reduced-motion) {
349 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
350 transition: opacity 0.1s linear;
351 }
352 }
353 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) .block-editor-block-list__block, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-selected, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-multi-selected {
354 opacity: 1;
355 }
356
357 .is-focus-mode .block-editor-block-list__block.is-editing-content-only-section.has-child-selected, .is-focus-mode .block-editor-block-list__block.is-editing-content-only-section.has-child-selected .block-editor-block-list__block {
358 opacity: 1;
359 }
360
361 .wp-block[data-align=left] > *,
362 .wp-block[data-align=right] > *,
363 .wp-block.alignleft,
364 .wp-block.alignright {
365 z-index: 21;
366 }
367
368 .wp-site-blocks > [data-align=left] {
369 float: right;
370 margin-left: 2em;
371 }
372
373 .wp-site-blocks > [data-align=right] {
374 float: left;
375 margin-right: 2em;
376 }
377
378 .wp-site-blocks > [data-align=center] {
379 justify-content: center;
380 margin-right: auto;
381 margin-left: auto;
382 }
383
384 /**
385 * In-Canvas Inserter
386 */
387 .block-editor-block-list .block-editor-inserter {
388 margin: 8px;
389 cursor: move;
390 cursor: grab;
391 }
392
393 @keyframes block-editor-inserter__toggle__fade-in-animation {
394 from {
395 opacity: 0;
396 }
397 to {
398 opacity: 1;
399 }
400 }
401 @media not (prefers-reduced-motion) {
402 .wp-block .block-list-appender .block-editor-inserter__toggle {
403 animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
404 animation-fill-mode: forwards;
405 }
406 }
407
408 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
409 display: none;
410 }
411 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle {
412 opacity: 0;
413 transform: scale(0);
414 }
415
416 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
417 display: block;
418 margin: 0;
419 padding: 12px;
420 width: 100%;
421 border: none;
422 outline: none;
423 border-radius: 2px;
424 box-sizing: border-box;
425 box-shadow: inset 0 0 0 1px #1e1e1e;
426 resize: none;
427 overflow: hidden;
428 font-family: Menlo, Consolas, monaco, monospace;
429 font-size: 15px;
430 line-height: 1.5;
431 direction: ltr;
432 }
433 @media not (prefers-reduced-motion) {
434 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
435 transition: padding 0.2s linear;
436 }
437 }
438 .block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus {
439 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
440 }
441
442 .block-editor-block-list__zoom-out-separator {
443 /* same color as the iframe's background */
444 background: #ddd;
445 margin-right: -1px;
446 margin-left: -1px;
447 }
448 @media not (prefers-reduced-motion) {
449 .block-editor-block-list__zoom-out-separator {
450 transition: background-color 0.3s ease;
451 }
452 }
453 .block-editor-block-list__zoom-out-separator {
454 display: flex;
455 align-items: center;
456 justify-content: center;
457 overflow: hidden;
458 font-size: 13px;
459 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
460 color: #000;
461 font-weight: normal;
462 }
463 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
464 font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
465 }
466 .block-editor-block-list__zoom-out-separator.is-dragged-over {
467 background: #ccc;
468 }
469
470 .has-global-padding > .block-editor-block-list__zoom-out-separator,
471 .block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
472 max-width: none;
473 margin: 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) !important;
474 }
475
476 .is-dragging {
477 cursor: grabbing;
478 }
479
480 .is-preview-mode {
481 pointer-events: none;
482 }
483 .is-preview-mode .block-editor-block-list__block {
484 pointer-events: auto;
485 }
486 .is-preview-mode .block-editor-block-list__block > *:not(.block-editor-block-list__block) {
487 pointer-events: none;
488 }
489
490 .is-vertical .block-list-appender {
491 width: 24px;
492 margin-left: auto;
493 margin-top: 12px;
494 margin-right: 12px;
495 }
496
497 .block-list-appender > .block-editor-inserter {
498 display: block;
499 }
500
501 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle {
502 opacity: 0;
503 transform: scale(0);
504 }
505
506 .block-editor-block-list__block.has-block-overlay {
507 cursor: default;
508 }
509 .block-editor-block-list__block.has-block-overlay .block-editor-block-list__block {
510 pointer-events: none;
511 }
512 .block-editor-block-list__block.has-block-overlay .block-editor-block-list__block.has-block-overlay::before {
513 right: 0;
514 left: 0;
515 width: auto;
516 }
517
518 .block-editor-block-list__layout .is-dragging {
519 opacity: 0.1;
520 }
521 .block-editor-block-list__layout .is-dragging iframe {
522 pointer-events: none;
523 }
524 .block-editor-block-list__layout .is-dragging::selection {
525 background: transparent !important;
526 }
527 .block-editor-block-list__layout .is-dragging::after {
528 content: none !important;
529 }
530
531 .wp-block img:not([draggable]),
532 .wp-block svg:not([draggable]) {
533 pointer-events: none;
534 }
535
536 .block-editor-block-preview__content-iframe .block-list-appender {
537 display: none;
538 }
539
540 .block-editor-block-preview__live-content * {
541 pointer-events: none;
542 }
543 .block-editor-block-preview__live-content .block-list-appender {
544 display: none;
545 }
546 .block-editor-block-preview__live-content .components-button:disabled {
547 opacity: initial;
548 }
549 .block-editor-block-preview__live-content .components-placeholder,
550 .block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] {
551 display: none;
552 }
553
554 .block-editor-block-variation-picker__variations,
555 .block-editor-block-variation-picker__skip,
556 .wp-block-group-placeholder__variations {
557 list-style: none;
558 display: flex;
559 justify-content: flex-start;
560 flex-direction: row;
561 flex-wrap: wrap;
562 width: 100%;
563 padding: 0;
564 margin: 0;
565 gap: 8px;
566 font-size: 12px;
567 }
568 .block-editor-block-variation-picker__variations svg,
569 .block-editor-block-variation-picker__skip svg,
570 .wp-block-group-placeholder__variations svg {
571 fill: #949494 !important;
572 }
573 .block-editor-block-variation-picker__variations .components-button,
574 .block-editor-block-variation-picker__skip .components-button,
575 .wp-block-group-placeholder__variations .components-button {
576 padding: 4px;
577 }
578 .block-editor-block-variation-picker__variations .components-button:hover,
579 .block-editor-block-variation-picker__skip .components-button:hover,
580 .wp-block-group-placeholder__variations .components-button:hover {
581 background: none !important;
582 }
583 .block-editor-block-variation-picker__variations .components-button:hover svg,
584 .block-editor-block-variation-picker__skip .components-button:hover svg,
585 .wp-block-group-placeholder__variations .components-button:hover svg {
586 fill: var(--wp-admin-theme-color) !important;
587 }
588 .block-editor-block-variation-picker__variations > li,
589 .block-editor-block-variation-picker__skip > li,
590 .wp-block-group-placeholder__variations > li {
591 width: auto;
592 display: flex;
593 flex-direction: column;
594 align-items: center;
595 gap: 4px;
596 }
597
598 .block-editor-button-block-appender {
599 display: flex;
600 flex-direction: column;
601 align-items: center;
602 justify-content: center;
603 width: 100%;
604 height: auto;
605 color: #1e1e1e;
606 box-shadow: inset 0 0 0 1px #1e1e1e;
607 }
608 .is-dark-theme .block-editor-button-block-appender {
609 color: rgba(255, 255, 255, 0.65);
610 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
611 }
612 .block-editor-button-block-appender:hover {
613 color: var(--wp-admin-theme-color);
614 box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
615 }
616 .block-editor-button-block-appender:focus {
617 box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
618 }
619 .block-editor-button-block-appender:active {
620 color: #000;
621 }
622
623 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child {
624 pointer-events: none;
625 }
626 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after {
627 content: "";
628 position: absolute;
629 top: 0;
630 left: 0;
631 bottom: 0;
632 right: 0;
633 pointer-events: none;
634 border: 1px dashed currentColor;
635 }
636 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
637 opacity: 0;
638 }
639 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter:focus-within, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter:focus-within, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter:focus-within, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter:focus-within {
640 opacity: 1;
641 }
642 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
643 border: none;
644 }
645 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
646 visibility: visible;
647 }
648 .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
649 border: none;
650 }
651 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
652 background-color: var(--wp-admin-theme-color);
653 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
654 color: rgba(255, 255, 255, 0.65);
655 }
656 @media not (prefers-reduced-motion) {
657 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
658 transition: background-color 0.2s ease-in-out;
659 }
660 }
661
662 /**
663 * Default block appender.
664 *
665 * This component shows up in 3 places:
666 * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
667 * - on the right, inside empty paragraphs
668 * - absolute positioned and blue inside nesting containers
669 */
670 .block-editor-default-block-appender {
671 clear: both;
672 margin-right: auto;
673 margin-left: auto;
674 position: relative;
675 }
676 .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
677 outline: 1px solid transparent;
678 }
679 .block-editor-default-block-appender .block-editor-default-block-appender__content {
680 opacity: 0.62;
681 margin-block-start: 0;
682 margin-block-end: 0;
683 }
684 .block-editor-default-block-appender .components-drop-zone__content-icon {
685 display: none;
686 }
687 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon {
688 background: #1e1e1e;
689 color: #fff;
690 padding: 0;
691 min-width: 24px;
692 height: 24px;
693 }
694 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover {
695 color: #fff;
696 background: var(--wp-admin-theme-color);
697 }
698 @media not (prefers-reduced-motion) {
699 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon svg {
700 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
701 }
702 }
703 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
704 transform: rotate(-45deg);
705 }
706
707 .block-editor-default-block-appender .block-editor-inserter {
708 position: absolute;
709 top: 0;
710 left: 0;
711 line-height: 0;
712 }
713 .block-editor-default-block-appender .block-editor-inserter:disabled {
714 display: none;
715 }
716
717 /**
718 * Fixed position appender (right bottom corner).
719 *
720 * These styles apply to all in-canvas inserters. All in-canvas inserters always
721 * exist within a block.
722 */
723 .block-editor-block-list__block .block-list-appender {
724 position: absolute;
725 list-style: none;
726 padding: 0;
727 z-index: 2;
728 bottom: 0;
729 left: 0;
730 }
731 .block-editor-block-list__block .block-list-appender.block-list-appender {
732 margin: 0;
733 line-height: 0;
734 }
735 .block-editor-block-list__block .block-list-appender .block-editor-inserter:disabled {
736 display: none;
737 }
738 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
739 height: 24px;
740 }
741 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
742 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
743 background: #1e1e1e;
744 color: #fff;
745 padding: 0;
746 min-width: 24px;
747 height: 24px;
748 }
749 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
750 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
751 color: #fff;
752 background: var(--wp-admin-theme-color);
753 }
754 @media not (prefers-reduced-motion) {
755 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon svg,
756 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle svg {
757 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
758 }
759 }
760 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
761 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle.is-pressed svg {
762 transform: rotate(-45deg);
763 }
764 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
765 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
766 flex-direction: row;
767 box-shadow: none;
768 width: 24px;
769 display: none;
770 padding: 0 !important;
771 }
772 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
773 display: none;
774 }
775 .block-editor-block-list__block .block-list-appender:only-child {
776 position: relative;
777 left: auto;
778 align-self: center;
779 list-style: none;
780 line-height: inherit;
781 }
782 .block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
783 display: block;
784 }
785
786 .block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
787 .block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle,
788 .block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
789 .block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle {
790 display: flex;
791 }
792
793 .block-editor-default-block-appender__content {
794 cursor: text;
795 }
796
797 .block-editor-iframe__body {
798 position: relative;
799 }
800
801 .block-editor-iframe__html {
802 transform-origin: top center;
803 }
804 @media not (prefers-reduced-motion) {
805 .block-editor-iframe__html {
806 transition: background-color 400ms;
807 }
808 }
809 .block-editor-iframe__html.zoom-out-animation {
810 position: fixed;
811 right: 0;
812 left: 0;
813 top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
814 bottom: 0;
815 overflow-y: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
816 }
817 .block-editor-iframe__html.is-zoomed-out {
818 transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1))));
819 scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
820 background-color: var(--wp-editor-canvas-background);
821 margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
822 padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
823 padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
824 }
825 .block-editor-iframe__html.is-zoomed-out body {
826 min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
827 }
828 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
829 flex: 1;
830 display: flex;
831 flex-direction: column;
832 height: 100%;
833 }
834 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) > main {
835 flex: 1;
836 }
837 .block-editor-iframe__html.is-zoomed-out .wp-block[draggable] {
838 cursor: grab;
839 }
840
841 .block-editor-media-placeholder__cancel-button.is-link {
842 margin: 1em;
843 display: block;
844 }
845
846 .block-editor-media-placeholder.is-appender {
847 min-height: 0;
848 }
849 .block-editor-media-placeholder.is-appender:hover {
850 cursor: var(--wpds-cursor-control, pointer);
851 box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
852 }
853
854 .block-editor-plain-text {
855 box-shadow: none;
856 font-family: inherit;
857 font-size: inherit;
858 color: inherit;
859 line-height: inherit;
860 border: none;
861 padding: 0;
862 margin: 0;
863 width: 100%;
864 }
865
866 .rich-text [data-rich-text-placeholder] {
867 pointer-events: none;
868 }
869 .rich-text [data-rich-text-placeholder]::after {
870 content: attr(data-rich-text-placeholder);
871 opacity: 0.62;
872 }
873 .rich-text:focus {
874 outline: none;
875 }
876
877 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
878 opacity: 0.8;
879 }
880
881 [data-rich-text-script] {
882 display: inline;
883 }
884 [data-rich-text-script]::before {
885 content: "</>";
886 background: rgb(255, 255, 0);
887 }
888
889 [data-rich-text-comment],
890 [data-rich-text-format-boundary] {
891 border-radius: 2px;
892 }
893
894 [data-rich-text-comment] {
895 background-color: currentColor;
896 }
897 [data-rich-text-comment] span {
898 filter: invert(100%);
899 color: currentColor;
900 padding: 0 2px;
901 }
902
903 .rich-text [contenteditable=false]::selection {
904 background-color: transparent;
905 }
906
907 .block-editor-warning {
908 align-items: center;
909 display: flex;
910 flex-wrap: wrap;
911 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
912 padding: 1em;
913 border: 1px solid #1e1e1e;
914 border-radius: 2px;
915 background-color: #fff;
916 }
917 .block-editor-warning .block-editor-warning__message {
918 line-height: 1.4;
919 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
920 font-size: 13px;
921 color: #1e1e1e;
922 margin: 0;
923 }
924 .block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
925 min-height: auto;
926 }
927 .block-editor-warning .block-editor-warning__contents {
928 display: flex;
929 flex-direction: row;
930 justify-content: space-between;
931 flex-wrap: wrap;
932 align-items: baseline;
933 width: 100%;
934 gap: 12px;
935 }
936 .block-editor-warning .block-editor-warning__actions {
937 align-items: center;
938 display: flex;
939 gap: 8px;
940 }
941
942 .components-popover.block-editor-warning__dropdown {
943 z-index: 99998;
944 }