PluginProbe
Gutenberg / 23.6.2
Gutenberg v23.6.2
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.6.2, at build/styles/block-editor/content-rtl.css

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