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

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

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