gutenberg / build / styles / block-library / image / style-rtl.css

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

479 lines 11.9 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	* 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	.wp-block-image > a,
97	.wp-block-image > figure > a {
98	display: inline-block;
99	color: inherit;
100	}
101	.wp-block-image img {
102	height: auto;
103	max-width: 100%;
104	vertical-align: bottom;
105	box-sizing: border-box;
106	}
107	@media not (prefers-reduced-motion) {
108	.wp-block-image img.hide {
109	visibility: hidden;
110	}
111	.wp-block-image img.show {
112	animation: show-content-image 0.4s;
113	}
114	}
115	.wp-block-image[style*=border-radius] > a,
116	.wp-block-image[style*=border-radius] img {
117	border-radius: inherit;
118	}
119	.wp-block-image.has-custom-border img {
120	box-sizing: border-box;
121	}
122	.wp-block-image.aligncenter {
123	text-align: center;
124	}
125	.wp-block-image.alignfull > a, .wp-block-image.alignwide > a {
126	width: 100%;
127	}
128	.wp-block-image.alignfull img, .wp-block-image.alignwide img {
129	height: auto;
130	width: 100%;
131	}
132	.wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter,
133	.wp-block-image .alignleft,
134	.wp-block-image .alignright,
135	.wp-block-image .aligncenter {
136	display: table;
137	}
138	.wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption, .wp-block-image.aligncenter > figcaption,
139	.wp-block-image .alignleft > figcaption,
140	.wp-block-image .alignright > figcaption,
141	.wp-block-image .aligncenter > figcaption {
142	display: table-caption;
143	caption-side: bottom;
144	}
145	.wp-block-image .alignleft {
146	float: left;
147	margin-left: 0;
148	margin-right: 1em;
149	margin-top: 0.5em;
150	margin-bottom: 0.5em;
151	}
152	.wp-block-image .alignright {
153	float: right;
154	margin-right: 0;
155	margin-left: 1em;
156	margin-top: 0.5em;
157	margin-bottom: 0.5em;
158	}
159	.wp-block-image .aligncenter {
160	margin-right: auto;
161	margin-left: auto;
162	}
163	.wp-block-image :where(figcaption) {
164	margin-top: 0.5em;
165	margin-bottom: 1em;
166	}
167	.wp-block-image.is-style-circle-mask img {
168	border-radius: 9999px;
169	}
170	@supports (mask-image: none) or (-webkit-mask-image: none) {
171	.wp-block-image.is-style-circle-mask img {
172	mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
173	mask-mode: alpha;
174	mask-repeat: no-repeat;
175	mask-size: contain;
176	mask-position: center;
177	border-radius: 0;
178	}
179	}
180
181	:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
182	border-radius: 9999px;
183	}
184
185	.wp-block-image figure {
186	margin: 0;
187	}
188
189	.wp-lightbox-container {
190	position: relative;
191	display: flex;
192	flex-direction: column;
193	}
194	.wp-lightbox-container img {
195	cursor: zoom-in;
196	}
197	.wp-lightbox-container img:hover + button {
198	opacity: 1;
199	}
200	.wp-lightbox-container button {
201	opacity: 0;
202	border: none;
203	background-color: rgba(90, 90, 90, 0.25);
204	backdrop-filter: blur(16px) saturate(180%);
205	cursor: zoom-in;
206	display: flex;
207	justify-content: center;
208	align-items: center;
209	width: 20px;
210	height: 20px;
211	position: absolute;
212	z-index: 100;
213	top: 16px;
214	left: 16px;
215	text-align: center;
216	padding: 0;
217	border-radius: 4px;
218	}
219	@media not (prefers-reduced-motion) {
220	.wp-lightbox-container button {
221	transition: opacity 0.2s ease;
222	}
223	}
224	.wp-lightbox-container button:focus-visible {
225	outline: 3px auto rgba(90, 90, 90, 0.25);
226	outline: 3px auto -webkit-focus-ring-color;
227	outline-offset: 3px;
228	}
229	.wp-lightbox-container button:hover {
230	cursor: pointer;
231	opacity: 1;
232	}
233	.wp-lightbox-container button:focus {
234	opacity: 1;
235	}
236	.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
237	background-color: rgba(90, 90, 90, 0.25);
238	border: none;
239	}
240
241	.wp-lightbox-overlay {
242	position: fixed;
243	top: 0;
244	right: 0;
245	z-index: 100000;
246	overflow: hidden;
247	width: 100%;
248	height: 100vh;
249	box-sizing: border-box;
250	visibility: hidden;
251	cursor: zoom-out;
252	}
253	.wp-lightbox-overlay .wp-lightbox-close-button {
254	font-family: inherit;
255	position: absolute;
256	top: calc(env(safe-area-inset-top) + 16px);
257	left: calc(env(safe-area-inset-left) + 16px);
258	padding: 0 4px;
259	cursor: pointer;
260	z-index: 5000000;
261	min-width: 40px;
262	min-height: 40px;
263	display: flex;
264	gap: 8px;
265	align-items: center;
266	justify-content: center;
267	line-height: 1;
268	}
269	.wp-lightbox-overlay .wp-lightbox-close-button:hover, .wp-lightbox-overlay .wp-lightbox-close-button:focus, .wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background) {
270	background: none;
271	border: none;
272	}
273	.wp-lightbox-overlay .wp-lightbox-close-button:has(.wp-lightbox-close-text:not([hidden])) .wp-lightbox-close-icon svg {
274	height: 1em;
275	width: 1em;
276	}
277	.wp-lightbox-overlay .wp-lightbox-close-icon svg {
278	display: block;
279	}
280	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
281	.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
282	position: absolute;
283	padding: 0 8px;
284	z-index: 2000002;
285	font-family: inherit;
286	min-width: 40px;
287	min-height: 40px;
288	gap: 4px;
289	display: flex;
290	cursor: pointer;
291	align-items: center;
292	justify-content: center;
293	bottom: 16px;
294	line-height: 1;
295	}
296	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev[hidden],
297	.wp-lightbox-overlay .wp-lightbox-navigation-button-next[hidden] {
298	display: none;
299	}
300	@media (min-width: 960px) {
301	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
302	.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
303	bottom: 50%;
304	transform: translateY(-50%);
305	}
306	}
307	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:not(:hover):not(:active):not(.has-background),
308	.wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover,
309	.wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus,
310	.wp-lightbox-overlay .wp-lightbox-navigation-button-next:not(:hover):not(:active):not(.has-background) {
311	background: none;
312	border: none;
313	padding: 0 8px;
314	}
315	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg,
316	.wp-lightbox-overlay .wp-lightbox-navigation-button-next:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg {
317	width: 1.5em;
318	height: 1.5em;
319	display: block;
320	}
321	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
322	right: calc(env(safe-area-inset-right) + 16px);
323	}
324	.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
325	left: calc(env(safe-area-inset-left) + 16px);
326	}
327	.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
328	vertical-align: middle;
329	}
330	.wp-lightbox-overlay .lightbox-image-container {
331	position: absolute;
332	overflow: hidden;
333	top: 50%;
334	right: 50%;
335	transform-origin: top right;
336	transform: translate(50%, -50%);
337	width: var(--wp--lightbox-container-width);
338	height: var(--wp--lightbox-container-height);
339	z-index: 2000001;
340	}
341	.wp-lightbox-overlay .wp-block-image {
342	position: relative;
343	transform-origin: 100% 0;
344	display: flex;
345	width: 100%;
346	height: 100%;
347	justify-content: center;
348	align-items: center;
349	box-sizing: border-box;
350	z-index: 3000000;
351	margin: 0;
352	}
353	.wp-lightbox-overlay .wp-block-image img {
354	min-width: var(--wp--lightbox-image-width);
355	min-height: var(--wp--lightbox-image-height);
356	width: var(--wp--lightbox-image-width);
357	height: var(--wp--lightbox-image-height);
358	}
359	.wp-lightbox-overlay .wp-block-image figcaption {
360	display: none;
361	}
362	.wp-lightbox-overlay button {
363	border: none;
364	background: none;
365	}
366	.wp-lightbox-overlay .scrim {
367	width: 100%;
368	height: 100%;
369	position: absolute;
370	z-index: 2000000;
371	background-color: rgb(255, 255, 255);
372	opacity: 0.9;
373	}
374	.wp-lightbox-overlay.active {
375	visibility: visible;
376	}
377	@media not (prefers-reduced-motion) {
378	.wp-lightbox-overlay.active {
379	animation: both turn-on-visibility 0.25s;
380	}
381	}
382	@media not (prefers-reduced-motion) {
383	.wp-lightbox-overlay.active img {
384	animation: both turn-on-visibility 0.35s;
385	}
386	}
387	@media not (prefers-reduced-motion) {
388	.wp-lightbox-overlay.show-closing-animation:not(.active) {
389	animation: both turn-off-visibility 0.35s;
390	}
391	}
392	@media not (prefers-reduced-motion) {
393	.wp-lightbox-overlay.show-closing-animation:not(.active) img {
394	animation: both turn-off-visibility 0.25s;
395	}
396	}
397	@media not (prefers-reduced-motion) {
398	.wp-lightbox-overlay.zoom.active {
399	opacity: 1;
400	visibility: visible;
401	animation: none;
402	}
403	.wp-lightbox-overlay.zoom.active .lightbox-image-container {
404	animation: lightbox-zoom-in 0.4s;
405	}
406	.wp-lightbox-overlay.zoom.active .lightbox-image-container img {
407	animation: none;
408	}
409	.wp-lightbox-overlay.zoom.active .scrim {
410	animation: turn-on-visibility 0.4s forwards;
411	}
412	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) {
413	animation: none;
414	}
415	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
416	animation: lightbox-zoom-out 0.4s;
417	}
418	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img {
419	animation: none;
420	}
421	.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim {
422	animation: turn-off-visibility 0.4s forwards;
423	}
424	}
425
426	@keyframes show-content-image {
427	0% {
428	visibility: hidden;
429	}
430	99% {
431	visibility: hidden;
432	}
433	100% {
434	visibility: visible;
435	}
436	}
437	@keyframes turn-on-visibility {
438	0% {
439	opacity: 0;
440	}
441	100% {
442	opacity: 1;
443	}
444	}
445	@keyframes turn-off-visibility {
446	0% {
447	opacity: 1;
448	visibility: visible;
449	}
450	99% {
451	opacity: 0;
452	visibility: visible;
453	}
454	100% {
455	opacity: 0;
456	visibility: hidden;
457	}
458	}
459	@keyframes lightbox-zoom-in {
460	0% {
461	transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
462	}
463	100% {
464	transform: translate(50%, -50%) scale(1, 1);
465	}
466	}
467	@keyframes lightbox-zoom-out {
468	0% {
469	visibility: visible;
470	transform: translate(50%, -50%) scale(1, 1);
471	}
472	99% {
473	visibility: visible;
474	}
475	100% {
476	visibility: hidden;
477	transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
478	}
479	}