style.css in Gutenberg 23.2.0, at build/styles/block-library/gallery/style.css

459 lines 19.0 KB Raw Download Zip

1	/**
2	* Colors
3	*/
4	/**
5	* Typography
6	*/
7	/**
8	* SCSS Variables.
9	*
10	* Please use variables from this sheet to ensure consistency across the UI.
11	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
12	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
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-gallery:not(.has-nested-images),
91	.blocks-gallery-grid:not(.has-nested-images) {
92	display: flex;
93	flex-wrap: wrap;
94	list-style-type: none;
95	padding: 0;
96	margin: 0;
97	}
98	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image,
99	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item,
100	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image,
101	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item {
102	margin: 0 1em 1em 0;
103	display: flex;
104	flex-grow: 1;
105	flex-direction: column;
106	justify-content: center;
107	position: relative;
108	width: calc(50% - 1em);
109	}
110	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even),
111	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even),
112	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even),
113	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even) {
114	margin-right: 0;
115	}
116	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure,
117	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure,
118	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure,
119	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure {
120	margin: 0;
121	height: 100%;
122	display: flex;
123	align-items: flex-end;
124	justify-content: flex-start;
125	}
126	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img,
127	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img,
128	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img,
129	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img {
130	display: block;
131	max-width: 100%;
132	height: auto;
133	width: auto;
134	}
135	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption,
136	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption,
137	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption,
138	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption {
139	position: absolute;
140	bottom: 0;
141	width: 100%;
142	max-height: 100%;
143	overflow: auto;
144	padding: 3em 0.77em 0.7em;
145	color: #fff;
146	text-align: center;
147	font-size: 0.8em;
148	background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
149	box-sizing: border-box;
150	margin: 0;
151	z-index: 2;
152	}
153	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img,
154	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img,
155	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img,
156	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img {
157	display: inline;
158	}
159	.wp-block-gallery:not(.has-nested-images) figcaption,
160	.blocks-gallery-grid:not(.has-nested-images) figcaption {
161	flex-grow: 1;
162	}
163	.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a,
164	.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image img, .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item a,
165	.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img,
166	.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a,
167	.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img,
168	.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a,
169	.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
170	width: 100%;
171	height: 100%;
172	flex: 1;
173	object-fit: cover;
174	}
175	.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
176	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
177	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
178	width: 100%;
179	margin-right: 0;
180	}
181	@media (min-width: 600px) {
182	.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item,
183	.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image,
184	.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item {
185	width: calc(33.3333333333% - 0.6666666667em);
186	margin-right: 1em;
187	}
188	.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item,
189	.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image,
190	.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item {
191	width: calc(25% - 0.75em);
192	margin-right: 1em;
193	}
194	.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item,
195	.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image,
196	.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item {
197	width: calc(20% - 0.8em);
198	margin-right: 1em;
199	}
200	.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item,
201	.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image,
202	.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item {
203	width: calc(16.6666666667% - 0.8333333333em);
204	margin-right: 1em;
205	}
206	.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item,
207	.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image,
208	.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item {
209	width: calc(14.2857142857% - 0.8571428571em);
210	margin-right: 1em;
211	}
212	.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item,
213	.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image,
214	.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item {
215	width: calc(12.5% - 0.875em);
216	margin-right: 1em;
217	}
218	.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n), .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n),
219	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),
220	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n) {
221	margin-right: 0;
222	}
223	.wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n), .wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n),
224	.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),
225	.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n) {
226	margin-right: 0;
227	}
228	.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n), .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n),
229	.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),
230	.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n) {
231	margin-right: 0;
232	}
233	.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n), .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n),
234	.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),
235	.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n) {
236	margin-right: 0;
237	}
238	.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n), .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n),
239	.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),
240	.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n) {
241	margin-right: 0;
242	}
243	.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n), .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n),
244	.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),
245	.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n) {
246	margin-right: 0;
247	}
248	.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n), .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n),
249	.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),
250	.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n) {
251	margin-right: 0;
252	}
253	.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n), .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n),
254	.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),
255	.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n) {
256	margin-right: 0;
257	}
258	}
259	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child,
260	.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child,
261	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child,
262	.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child {
263	margin-right: 0;
264	}
265	.wp-block-gallery:not(.has-nested-images).alignleft, .wp-block-gallery:not(.has-nested-images).alignright,
266	.blocks-gallery-grid:not(.has-nested-images).alignleft,
267	.blocks-gallery-grid:not(.has-nested-images).alignright {
268	max-width: 420px;
269	width: 100%;
270	}
271	.wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure,
272	.blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure {
273	justify-content: center;
274	}
275
276	.wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
277	align-self: flex-start;
278	}
279
280	figure.wp-block-gallery.has-nested-images {
281	align-items: normal;
282	}
283
284	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
285	width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
286	margin: 0;
287	}
288	.wp-block-gallery.has-nested-images figure.wp-block-image {
289	display: flex;
290	flex-grow: 1;
291	justify-content: center;
292	position: relative;
293	flex-direction: column;
294	max-width: 100%;
295	box-sizing: border-box;
296	}
297	.wp-block-gallery.has-nested-images figure.wp-block-image > div,
298	.wp-block-gallery.has-nested-images figure.wp-block-image > a {
299	margin: 0;
300	flex-direction: column;
301	flex-grow: 1;
302	}
303	.wp-block-gallery.has-nested-images figure.wp-block-image img {
304	display: block;
305	height: auto;
306	max-width: 100% !important;
307	width: auto;
308	}
309	.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
310	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
311	position: absolute;
312	bottom: 0;
313	right: 0;
314	left: 0;
315	max-height: 100%;
316	}
317	.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
318	content: "";
319	height: 100%;
320	max-height: 3em;
321	pointer-events: none;
322	backdrop-filter: blur(3px);
323	-webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
324	mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
325	}
326	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
327	color: #fff;
328	text-shadow: 0 0 1.5px #000;
329	font-size: 13px;
330	margin: 0;
331	overflow: auto;
332	padding: 1em;
333	text-align: center;
334	box-sizing: border-box;
335	}
336	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar {
337	width: 12px;
338	height: 12px;
339	}
340	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track {
341	background-color: transparent;
342	}
343	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb {
344	background-color: transparent;
345	border-radius: 8px;
346	border: 3px solid transparent;
347	background-clip: padding-box;
348	}
349	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus::-webkit-scrollbar-thumb, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-webkit-scrollbar-thumb {
350	background-color: rgba(255, 255, 255, 0.8);
351	}
352	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
353	scrollbar-width: thin;
354	scrollbar-gutter: stable both-edges;
355	scrollbar-color: transparent transparent;
356	}
357	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus, .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within {
358	scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
359	}
360	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
361	will-change: transform;
362	}
363	@media (hover: none) {
364	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
365	scrollbar-color: rgba(255, 255, 255, 0.8) transparent;
366	}
367	}
368	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
369	background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
370	}
371	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
372	display: inline;
373	}
374	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a {
375	color: inherit;
376	}
377	.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img {
378	box-sizing: border-box;
379	}
380	.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
381	.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border > div,
382	.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border > a {
383	flex: 1 1 auto;
384	}
385	.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border figcaption {
386	flex: initial;
387	background: none;
388	color: inherit;
389	margin: 0;
390	padding: 10px 10px 9px;
391	position: relative;
392	text-shadow: none;
393	}
394	.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded::before, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border::before {
395	content: none;
396	}
397	.wp-block-gallery.has-nested-images figcaption {
398	flex-grow: 1;
399	flex-basis: 100%;
400	text-align: center;
401	}
402	.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
403	margin-top: 0;
404	margin-bottom: auto;
405	}
406	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
407	align-self: inherit;
408	}
409	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
410	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
411	display: flex;
412	}
413	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
414	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
415	width: 100%;
416	flex: 1 0 0%;
417	height: 100%;
418	object-fit: cover;
419	}
420	.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
421	width: 100%;
422	}
423	@media (min-width: 600px) {
424	.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
425	width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
426	}
427	.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
428	width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
429	}
430	.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
431	width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
432	}
433	.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
434	width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
435	}
436	.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
437	width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
438	}
439	.wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
440	width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
441	}
442	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
443	width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
444	}
445	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
446	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
447	width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
448	}
449	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
450	width: 100%;
451	}
452	}
453	.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
454	max-width: 420px;
455	width: 100%;
456	}
457	.wp-block-gallery.has-nested-images.aligncenter {
458	justify-content: center;
459	}