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

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