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

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