1 /** |
1 .blocks-gallery-grid:not(.has-nested-images),.wp-block-gallery:not(.has-nested-images){ |
2 * Colors |
2 display:flex; |
3 */ |
3 flex-wrap:wrap; |
4 /** |
4 list-style-type:none; |
5 * Breakpoints & Media Queries |
5 margin:0; |
6 */ |
6 padding:0; |
7 /** |
7 } |
8 * SCSS Variables. |
8 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item{ |
9 * |
9 display:flex; |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 flex-direction:column; |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 flex-grow:1; |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
12 justify-content:center; |
13 */ |
13 margin:0 0 1em 1em; |
14 /** |
14 position:relative; |
15 * Colors |
15 width:calc(50% - 1em); |
16 */ |
16 } |
17 /** |
17 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(2n),.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(2n){ |
18 * Fonts & basic variables. |
18 margin-left:0; |
19 */ |
19 } |
20 /** |
20 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure{ |
21 * Grid System. |
21 align-items:flex-end; |
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
22 display:flex; |
23 */ |
23 height:100%; |
24 /** |
24 justify-content:flex-start; |
25 * Dimensions. |
25 margin:0; |
26 */ |
26 } |
27 /** |
27 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img{ |
28 * Shadows. |
28 display:block; |
29 */ |
29 height:auto; |
30 /** |
30 max-width:100%; |
31 * Editor widths. |
31 width:auto; |
32 */ |
32 } |
33 /** |
33 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption{ |
34 * Block & Editor UI. |
34 background:linear-gradient(0deg, #000000b3, #0000004d 70%, #0000); |
35 */ |
35 bottom:0; |
36 /** |
36 box-sizing:border-box; |
37 * Block paddings. |
37 color:#fff; |
38 */ |
38 font-size:.8em; |
39 /** |
39 margin:0; |
40 * React Native specific. |
40 max-height:100%; |
41 * These variables do not appear to be used anywhere else. |
41 overflow:auto; |
42 */ |
42 padding:3em .77em .7em; |
43 /** |
43 position:absolute; |
44 * Converts a hex value into the rgb equivalent. |
44 text-align:center; |
45 * |
45 width:100%; |
46 * @param {string} hex - the hexadecimal value to convert |
46 z-index:2; |
47 * @return {string} comma separated rgb values |
47 } |
48 */ |
48 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img{ |
49 /** |
49 display:inline; |
50 * Breakpoint mixins |
50 } |
51 */ |
51 .blocks-gallery-grid:not(.has-nested-images) figcaption,.wp-block-gallery:not(.has-nested-images) figcaption{ |
52 /** |
52 flex-grow:1; |
53 * Long content fade mixin |
53 } |
54 * |
54 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a,.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a,.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,.wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img{ |
55 * Creates a fading overlay to signify that the content is longer |
55 flex:1; |
56 * than the space allows. |
56 height:100%; |
57 */ |
57 object-fit:cover; |
58 /** |
58 width:100%; |
59 * Focus styles. |
59 } |
60 */ |
60 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item{ |
61 /** |
61 margin-left:0; |
62 * Applies editor left position to the selector passed as argument |
62 width:100%; |
63 */ |
63 } |
64 /** |
64 @media (min-width:600px){ |
65 * Styles that are reused verbatim in a few places |
65 .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item{ |
66 */ |
66 margin-left:1em; |
67 /** |
67 width:calc(33.33333% - .66667em); |
68 * Allows users to opt-out of animations via OS-level preferences. |
68 } |
69 */ |
69 .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item{ |
70 /** |
70 margin-left:1em; |
71 * Reset default styles for JavaScript UI based pages. |
71 width:calc(25% - .75em); |
72 * This is a WP-admin agnostic reset |
72 } |
73 */ |
73 .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item{ |
74 /** |
74 margin-left:1em; |
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
75 width:calc(20% - .8em); |
76 */ |
76 } |
77 .wp-block-gallery:not(.has-nested-images), |
77 .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item{ |
78 .blocks-gallery-grid:not(.has-nested-images) { |
78 margin-left:1em; |
79 display: flex; |
79 width:calc(16.66667% - .83333em); |
80 flex-wrap: wrap; |
80 } |
81 list-style-type: none; |
81 .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item{ |
82 padding: 0; |
82 margin-left:1em; |
83 margin: 0; |
83 width:calc(14.28571% - .85714em); |
84 } |
84 } |
85 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image, |
85 .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image,.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item,.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image,.wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item{ |
86 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item, |
86 margin-left:1em; |
87 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image, |
87 width:calc(12.5% - .875em); |
88 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item { |
88 } |
89 margin: 0 0 1em 1em; |
89 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n),.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n),.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n),.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n),.blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n),.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n),.blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n),.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n),.blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n),.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n),.blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n),.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n),.blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n),.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n),.blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n),.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),.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),.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),.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),.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),.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),.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),.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){ |
90 display: flex; |
90 margin-left:0; |
91 flex-grow: 1; |
91 } |
92 flex-direction: column; |
92 } |
93 justify-content: center; |
93 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child,.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child,.wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child{ |
94 position: relative; |
94 margin-left:0; |
95 width: calc(50% - 1em); |
95 } |
96 } |
96 .blocks-gallery-grid:not(.has-nested-images).alignleft,.blocks-gallery-grid:not(.has-nested-images).alignright,.wp-block-gallery:not(.has-nested-images).alignleft,.wp-block-gallery:not(.has-nested-images).alignright{ |
97 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even), |
97 max-width:420px; |
98 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even), |
98 width:100%; |
99 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:nth-of-type(even), |
99 } |
100 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:nth-of-type(even) { |
100 .blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure,.wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure{ |
101 margin-left: 0; |
101 justify-content:center; |
102 } |
|
103 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figure, |
|
104 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure, |
|
105 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figure, |
|
106 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figure { |
|
107 margin: 0; |
|
108 height: 100%; |
|
109 display: flex; |
|
110 align-items: flex-end; |
|
111 justify-content: flex-start; |
|
112 } |
|
113 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image img, |
|
114 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img, |
|
115 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image img, |
|
116 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item img { |
|
117 display: block; |
|
118 max-width: 100%; |
|
119 height: auto; |
|
120 width: auto; |
|
121 } |
|
122 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption, |
|
123 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption, |
|
124 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption, |
|
125 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption { |
|
126 position: absolute; |
|
127 bottom: 0; |
|
128 width: 100%; |
|
129 max-height: 100%; |
|
130 overflow: auto; |
|
131 padding: 3em 0.77em 0.7em; |
|
132 color: #fff; |
|
133 text-align: center; |
|
134 font-size: 0.8em; |
|
135 background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); |
|
136 box-sizing: border-box; |
|
137 margin: 0; |
|
138 z-index: 2; |
|
139 } |
|
140 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption img, |
|
141 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption img, |
|
142 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image figcaption img, |
|
143 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item figcaption img { |
|
144 display: inline; |
|
145 } |
|
146 .wp-block-gallery:not(.has-nested-images) figcaption, |
|
147 .blocks-gallery-grid:not(.has-nested-images) figcaption { |
|
148 flex-grow: 1; |
|
149 } |
|
150 .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-image a, |
|
151 .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, |
|
152 .wp-block-gallery:not(.has-nested-images).is-cropped .blocks-gallery-item img, |
|
153 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image a, |
|
154 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-image img, |
|
155 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item a, |
|
156 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img { |
|
157 width: 100%; |
|
158 height: 100%; |
|
159 flex: 1; |
|
160 -o-object-fit: cover; |
|
161 object-fit: cover; |
|
162 } |
|
163 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item, |
|
164 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image, |
|
165 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item { |
|
166 width: 100%; |
|
167 margin-left: 0; |
|
168 } |
|
169 @media (min-width: 600px) { |
|
170 .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item, |
|
171 .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image, |
|
172 .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item { |
|
173 width: calc(33.3333333333% - 0.6666666667em); |
|
174 margin-left: 1em; |
|
175 } |
|
176 .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item, |
|
177 .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image, |
|
178 .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item { |
|
179 width: calc(25% - 0.75em); |
|
180 margin-left: 1em; |
|
181 } |
|
182 .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item, |
|
183 .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image, |
|
184 .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item { |
|
185 width: calc(20% - 0.8em); |
|
186 margin-left: 1em; |
|
187 } |
|
188 .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item, |
|
189 .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image, |
|
190 .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item { |
|
191 width: calc(16.6666666667% - 0.8333333333em); |
|
192 margin-left: 1em; |
|
193 } |
|
194 .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item, |
|
195 .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image, |
|
196 .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item { |
|
197 width: calc(14.2857142857% - 0.8571428571em); |
|
198 margin-left: 1em; |
|
199 } |
|
200 .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item, |
|
201 .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image, |
|
202 .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item { |
|
203 width: calc(12.5% - 0.875em); |
|
204 margin-left: 1em; |
|
205 } |
|
206 .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), |
|
207 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image:nth-of-type(1n), |
|
208 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item:nth-of-type(1n) { |
|
209 margin-left: 0; |
|
210 } |
|
211 .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), |
|
212 .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-image:nth-of-type(2n), |
|
213 .blocks-gallery-grid:not(.has-nested-images).columns-2 .blocks-gallery-item:nth-of-type(2n) { |
|
214 margin-left: 0; |
|
215 } |
|
216 .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), |
|
217 .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-image:nth-of-type(3n), |
|
218 .blocks-gallery-grid:not(.has-nested-images).columns-3 .blocks-gallery-item:nth-of-type(3n) { |
|
219 margin-left: 0; |
|
220 } |
|
221 .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), |
|
222 .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-image:nth-of-type(4n), |
|
223 .blocks-gallery-grid:not(.has-nested-images).columns-4 .blocks-gallery-item:nth-of-type(4n) { |
|
224 margin-left: 0; |
|
225 } |
|
226 .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), |
|
227 .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-image:nth-of-type(5n), |
|
228 .blocks-gallery-grid:not(.has-nested-images).columns-5 .blocks-gallery-item:nth-of-type(5n) { |
|
229 margin-left: 0; |
|
230 } |
|
231 .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), |
|
232 .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-image:nth-of-type(6n), |
|
233 .blocks-gallery-grid:not(.has-nested-images).columns-6 .blocks-gallery-item:nth-of-type(6n) { |
|
234 margin-left: 0; |
|
235 } |
|
236 .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), |
|
237 .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-image:nth-of-type(7n), |
|
238 .blocks-gallery-grid:not(.has-nested-images).columns-7 .blocks-gallery-item:nth-of-type(7n) { |
|
239 margin-left: 0; |
|
240 } |
|
241 .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), |
|
242 .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-image:nth-of-type(8n), |
|
243 .blocks-gallery-grid:not(.has-nested-images).columns-8 .blocks-gallery-item:nth-of-type(8n) { |
|
244 margin-left: 0; |
|
245 } |
|
246 } |
|
247 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image:last-child, |
|
248 .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item:last-child, |
|
249 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image:last-child, |
|
250 .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item:last-child { |
|
251 margin-left: 0; |
|
252 } |
|
253 .wp-block-gallery:not(.has-nested-images).alignleft, .wp-block-gallery:not(.has-nested-images).alignright, |
|
254 .blocks-gallery-grid:not(.has-nested-images).alignleft, |
|
255 .blocks-gallery-grid:not(.has-nested-images).alignright { |
|
256 max-width: 420px; |
|
257 width: 100%; |
|
258 } |
|
259 .wp-block-gallery:not(.has-nested-images).aligncenter .blocks-gallery-item figure, |
|
260 .blocks-gallery-grid:not(.has-nested-images).aligncenter .blocks-gallery-item figure { |
|
261 justify-content: center; |
|
262 } |
102 } |
263 |
103 |
264 .wp-block-gallery:not(.is-cropped) .blocks-gallery-item { |
104 .wp-block-gallery:not(.is-cropped) .blocks-gallery-item{ |
265 align-self: flex-start; |
105 align-self:flex-start; |
266 } |
106 } |
267 |
107 |
268 figure.wp-block-gallery.has-nested-images { |
108 figure.wp-block-gallery.has-nested-images{ |
269 align-items: normal; |
109 align-items:normal; |
270 } |
110 } |
271 |
111 |
272 .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { |
112 .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){ |
273 width: calc(50% - (var(--wp--style--unstable-gallery-gap, 16px) / 2)); |
113 margin:0; |
274 margin: 0; |
114 width:calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2); |
275 } |
115 } |
276 .wp-block-gallery.has-nested-images figure.wp-block-image { |
116 .wp-block-gallery.has-nested-images figure.wp-block-image{ |
277 display: flex; |
117 box-sizing:border-box; |
278 flex-grow: 1; |
118 display:flex; |
279 justify-content: center; |
119 flex-direction:column; |
280 position: relative; |
120 flex-grow:1; |
281 flex-direction: column; |
121 justify-content:center; |
282 max-width: 100%; |
122 max-width:100%; |
283 } |
123 position:relative; |
284 .wp-block-gallery.has-nested-images figure.wp-block-image > div, |
124 } |
285 .wp-block-gallery.has-nested-images figure.wp-block-image > a { |
125 .wp-block-gallery.has-nested-images figure.wp-block-image>a,.wp-block-gallery.has-nested-images figure.wp-block-image>div{ |
286 margin: 0; |
126 flex-direction:column; |
287 flex-direction: column; |
127 flex-grow:1; |
288 flex-grow: 1; |
128 margin:0; |
289 } |
129 } |
290 .wp-block-gallery.has-nested-images figure.wp-block-image img { |
130 .wp-block-gallery.has-nested-images figure.wp-block-image img{ |
291 display: block; |
131 display:block; |
292 height: auto; |
132 height:auto; |
293 max-width: 100% !important; |
133 max-width:100% !important; |
294 width: auto; |
134 width:auto; |
295 } |
135 } |
296 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { |
136 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{ |
297 background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent); |
137 background:linear-gradient(0deg, #000000b3, #0000004d 70%, #0000); |
298 bottom: 0; |
138 bottom:0; |
299 color: #fff; |
139 box-sizing:border-box; |
300 font-size: 13px; |
140 color:#fff; |
301 right: 0; |
141 font-size:13px; |
302 margin-bottom: 0; |
142 margin-bottom:0; |
303 max-height: 60%; |
143 max-height:60%; |
304 overflow: auto; |
144 overflow:auto; |
305 padding: 0 8px 8px; |
145 padding:0 8px 8px; |
306 position: absolute; |
146 position:absolute; |
307 text-align: center; |
147 right:0; |
308 width: 100%; |
148 scrollbar-color:#0000 #0000; |
309 box-sizing: border-box; |
149 scrollbar-gutter:stable both-edges; |
310 } |
150 scrollbar-width:thin; |
311 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img { |
151 text-align:center; |
312 display: inline; |
152 width:100%; |
313 } |
153 will-change:transform; |
314 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a { |
154 } |
315 color: inherit; |
155 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar{ |
316 } |
156 height:12px; |
317 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div, |
157 width:12px; |
318 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a { |
158 } |
319 flex: 1 1 auto; |
159 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-track{ |
320 } |
160 background-color:initial; |
321 .wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption { |
161 } |
322 flex: initial; |
162 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::-webkit-scrollbar-thumb{ |
323 background: none; |
163 background-clip:padding-box; |
324 color: inherit; |
164 background-color:initial; |
325 margin: 0; |
165 border:3px solid #0000; |
326 padding: 10px 10px 9px; |
166 border-radius:8px; |
327 position: relative; |
167 } |
328 } |
168 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption:focus-within::-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:hover::-webkit-scrollbar-thumb{ |
329 .wp-block-gallery.has-nested-images figcaption { |
169 background-color:#fffc; |
330 flex-grow: 1; |
170 } |
331 flex-basis: 100%; |
171 .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,.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover{ |
332 text-align: center; |
172 scrollbar-color:#fffc #0000; |
333 } |
173 } |
334 .wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) { |
174 @media (hover:none){ |
335 margin-top: 0; |
175 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{ |
336 margin-bottom: auto; |
176 scrollbar-color:#fffc #0000; |
337 } |
177 } |
338 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) { |
178 } |
339 align-self: inherit; |
179 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption img{ |
340 } |
180 display:inline; |
341 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone), |
181 } |
342 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a { |
182 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a{ |
343 display: flex; |
183 color:inherit; |
344 } |
184 } |
345 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, |
185 .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border img{ |
346 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { |
186 box-sizing:border-box; |
347 width: 100%; |
187 } |
348 flex: 1 0 0%; |
188 .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>a,.wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border>div,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded>a,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded>div{ |
349 height: 100%; |
189 flex:1 1 auto; |
350 -o-object-fit: cover; |
190 } |
351 object-fit: cover; |
191 .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border figcaption,.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption{ |
352 } |
192 background:none; |
353 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) { |
193 color:inherit; |
354 width: 100%; |
194 flex:initial; |
355 } |
195 margin:0; |
356 @media (min-width: 600px) { |
196 padding:10px 10px 9px; |
357 .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) { |
197 position:relative; |
358 width: calc(33.3333333333% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667)); |
198 } |
359 } |
199 .wp-block-gallery.has-nested-images figcaption{ |
360 .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) { |
200 flex-basis:100%; |
361 width: calc(25% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.75)); |
201 flex-grow:1; |
362 } |
202 text-align:center; |
363 .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) { |
203 } |
364 width: calc(20% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.8)); |
204 .wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image){ |
365 } |
205 margin-bottom:auto; |
366 .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) { |
206 margin-top:0; |
367 width: calc(16.6666666667% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333)); |
207 } |
368 } |
208 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image){ |
369 .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) { |
209 align-self:inherit; |
370 width: calc(14.2857142857% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571)); |
210 } |
371 } |
211 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>a,.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>div:not(.components-drop-zone){ |
372 .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) { |
212 display:flex; |
373 width: calc(12.5% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.875)); |
213 } |
374 } |
214 .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img{ |
375 .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) { |
215 flex:1 0 0%; |
376 width: calc(33.33% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667)); |
216 height:100%; |
377 } |
217 object-fit:cover; |
378 .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), |
218 width:100%; |
379 .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) { |
219 } |
380 width: calc(50% - (var(--wp--style--unstable-gallery-gap, 16px) * 0.5)); |
220 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image){ |
381 } |
221 width:100%; |
382 .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) { |
222 } |
383 width: 100%; |
223 @media (min-width:600px){ |
384 } |
224 .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image){ |
385 } |
225 width:calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667); |
386 .wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright { |
226 } |
387 max-width: 420px; |
227 .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image){ |
388 width: 100%; |
228 width:calc(25% - var(--wp--style--unstable-gallery-gap, 16px)*.75); |
389 } |
229 } |
390 .wp-block-gallery.has-nested-images.aligncenter { |
230 .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image){ |
391 justify-content: center; |
231 width:calc(20% - var(--wp--style--unstable-gallery-gap, 16px)*.8); |
392 } |
232 } |
|
233 .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image){ |
|
234 width:calc(16.66667% - var(--wp--style--unstable-gallery-gap, 16px)*.83333); |
|
235 } |
|
236 .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image){ |
|
237 width:calc(14.28571% - var(--wp--style--unstable-gallery-gap, 16px)*.85714); |
|
238 } |
|
239 .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image){ |
|
240 width:calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px)*.875); |
|
241 } |
|
242 .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image){ |
|
243 width:calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px)*.66667); |
|
244 } |
|
245 .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),.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){ |
|
246 width:calc(50% - var(--wp--style--unstable-gallery-gap, 16px)*.5); |
|
247 } |
|
248 .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child{ |
|
249 width:100%; |
|
250 } |
|
251 } |
|
252 .wp-block-gallery.has-nested-images.alignleft,.wp-block-gallery.has-nested-images.alignright{ |
|
253 max-width:420px; |
|
254 width:100%; |
|
255 } |
|
256 .wp-block-gallery.has-nested-images.aligncenter{ |
|
257 justify-content:center; |
|
258 } |