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

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

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