1 /** |
1 .wp-block-image img{ |
2 * Colors |
2 box-sizing:border-box; |
3 */ |
3 height:auto; |
4 /** |
4 max-width:100%; |
5 * Breakpoints & Media Queries |
5 vertical-align:bottom; |
6 */ |
6 } |
7 /** |
7 .wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{ |
8 * SCSS Variables. |
8 border-radius:inherit; |
9 * |
9 } |
10 * Please use variables from this sheet to ensure consistency across the UI. |
10 .wp-block-image.has-custom-border img{ |
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
11 box-sizing:border-box; |
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. |
12 } |
13 */ |
13 .wp-block-image.aligncenter{ |
14 /** |
14 text-align:center; |
15 * Colors |
15 } |
16 */ |
16 .wp-block-image.alignfull img,.wp-block-image.alignwide img{ |
17 /** |
17 height:auto; |
18 * Fonts & basic variables. |
18 width:100%; |
19 */ |
19 } |
20 /** |
20 .wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{ |
21 * Grid System. |
21 display:table; |
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ |
22 } |
23 */ |
23 .wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{ |
24 /** |
24 caption-side:bottom; |
25 * Dimensions. |
25 display:table-caption; |
26 */ |
26 } |
27 /** |
27 .wp-block-image .alignleft{ |
28 * Shadows. |
28 float:left; |
29 */ |
29 margin:.5em 1em .5em 0; |
30 /** |
30 } |
31 * Editor widths. |
31 .wp-block-image .alignright{ |
32 */ |
32 float:right; |
33 /** |
33 margin:.5em 0 .5em 1em; |
34 * Block & Editor UI. |
34 } |
35 */ |
35 .wp-block-image .aligncenter{ |
36 /** |
36 margin-left:auto; |
37 * Block paddings. |
37 margin-right:auto; |
38 */ |
38 } |
39 /** |
39 .wp-block-image :where(figcaption){ |
40 * React Native specific. |
40 margin-bottom:1em; |
41 * These variables do not appear to be used anywhere else. |
41 margin-top:.5em; |
42 */ |
42 } |
43 /** |
43 .wp-block-image.is-style-circle-mask img{ |
44 * Converts a hex value into the rgb equivalent. |
44 border-radius:9999px; |
45 * |
45 } |
46 * @param {string} hex - the hexadecimal value to convert |
46 @supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){ |
47 * @return {string} comma separated rgb values |
47 .wp-block-image.is-style-circle-mask img{ |
48 */ |
48 border-radius:0; |
49 /** |
49 -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>'); |
50 * Breakpoint mixins |
50 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>'); |
51 */ |
51 mask-mode:alpha; |
52 /** |
52 -webkit-mask-position:center; |
53 * Long content fade mixin |
53 mask-position:center; |
54 * |
54 -webkit-mask-repeat:no-repeat; |
55 * Creates a fading overlay to signify that the content is longer |
55 mask-repeat:no-repeat; |
56 * than the space allows. |
56 -webkit-mask-size:contain; |
57 */ |
57 mask-size:contain; |
58 /** |
58 } |
59 * Focus styles. |
59 } |
60 */ |
60 |
61 /** |
61 :root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img){ |
62 * Applies editor left position to the selector passed as argument |
62 border-radius:9999px; |
63 */ |
63 } |
64 /** |
64 |
65 * Styles that are reused verbatim in a few places |
65 .wp-block-image figure{ |
66 */ |
66 margin:0; |
67 /** |
67 } |
68 * Allows users to opt-out of animations via OS-level preferences. |
68 |
69 */ |
69 .wp-lightbox-container{ |
70 /** |
70 display:flex; |
71 * Reset default styles for JavaScript UI based pages. |
71 flex-direction:column; |
72 * This is a WP-admin agnostic reset |
72 position:relative; |
73 */ |
73 } |
74 /** |
74 .wp-lightbox-container img{ |
75 * Reset the WP Admin page styles for Gutenberg-like pages. |
75 cursor:zoom-in; |
76 */ |
76 } |
77 .wp-block-image { |
77 .wp-lightbox-container img:hover+button{ |
78 margin: 0 0 1em 0; |
78 opacity:1; |
79 } |
79 } |
80 .wp-block-image img { |
80 .wp-lightbox-container button{ |
81 height: auto; |
81 align-items:center; |
82 max-width: 100%; |
82 -webkit-backdrop-filter:blur(16px) saturate(180%); |
83 vertical-align: bottom; |
83 backdrop-filter:blur(16px) saturate(180%); |
84 } |
84 background-color:#5a5a5a40; |
85 .wp-block-image:not(.is-style-rounded) > a, |
85 border:none; |
86 .wp-block-image:not(.is-style-rounded) img { |
86 border-radius:4px; |
87 border-radius: inherit; |
87 cursor:zoom-in; |
88 } |
88 display:flex; |
89 .wp-block-image.aligncenter { |
89 height:20px; |
90 text-align: center; |
90 justify-content:center; |
91 } |
91 left:16px; |
92 .wp-block-image.alignfull img, .wp-block-image.alignwide img { |
92 opacity:0; |
93 height: auto; |
93 padding:0; |
94 width: 100%; |
94 position:absolute; |
95 } |
95 text-align:center; |
96 .wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter, |
96 top:16px; |
97 .wp-block-image .alignleft, |
97 transition:opacity .2s ease; |
98 .wp-block-image .alignright, |
98 width:20px; |
99 .wp-block-image .aligncenter { |
99 z-index:100; |
100 display: table; |
100 } |
101 } |
101 .wp-lightbox-container button:focus-visible{ |
102 .wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption, .wp-block-image.aligncenter > figcaption, |
102 outline:3px auto #5a5a5a40; |
103 .wp-block-image .alignleft > figcaption, |
103 outline:3px auto -webkit-focus-ring-color; |
104 .wp-block-image .alignright > figcaption, |
104 outline-offset:3px; |
105 .wp-block-image .aligncenter > figcaption { |
105 } |
106 display: table-caption; |
106 .wp-lightbox-container button:hover{ |
107 caption-side: bottom; |
107 cursor:pointer; |
108 } |
108 opacity:1; |
109 .wp-block-image .alignleft { |
109 } |
110 float: left; |
110 .wp-lightbox-container button:focus{ |
111 margin-left: 0; |
111 opacity:1; |
112 margin-left: 1em; |
112 } |
113 margin-top: 0.5em; |
113 .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){ |
114 margin-bottom: 0.5em; |
114 background-color:#5a5a5a40; |
115 } |
115 border:none; |
116 .wp-block-image .alignright { |
116 } |
117 float: right; |
117 |
118 margin-right: 0; |
118 .wp-lightbox-overlay{ |
119 margin-right: 1em; |
119 box-sizing:border-box; |
120 margin-top: 0.5em; |
120 cursor:zoom-out; |
121 margin-bottom: 0.5em; |
121 height:100vh; |
122 } |
122 overflow:hidden; |
123 .wp-block-image .aligncenter { |
123 position:fixed; |
124 margin-right: auto; |
124 right:0; |
125 margin-left: auto; |
125 top:0; |
126 } |
126 visibility:hidden; |
127 .wp-block-image figcaption { |
127 width:100%; |
128 margin-top: 0.5em; |
128 z-index:100000; |
129 margin-bottom: 1em; |
129 } |
130 } |
130 .wp-lightbox-overlay .close-button{ |
131 .wp-block-image.is-style-rounded img, |
131 align-items:center; |
132 .wp-block-image .is-style-rounded img { |
132 cursor:pointer; |
133 border-radius: 9999px; |
133 display:flex; |
134 } |
134 justify-content:center; |
135 .wp-block-image.is-style-circle-mask img { |
135 left:calc(env(safe-area-inset-left) + 16px); |
136 border-radius: 9999px; |
136 min-height:40px; |
137 } |
137 min-width:40px; |
138 @supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) { |
138 padding:0; |
139 .wp-block-image.is-style-circle-mask img { |
139 position:absolute; |
140 /* stylelint-disable */ |
140 top:calc(env(safe-area-inset-top) + 16px); |
141 -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>'); |
141 z-index:5000000; |
142 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>'); |
142 } |
143 /* stylelint-enable */ |
143 .wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){ |
144 mask-mode: alpha; |
144 background:none; |
145 -webkit-mask-repeat: no-repeat; |
145 border:none; |
146 mask-repeat: no-repeat; |
146 } |
147 -webkit-mask-size: contain; |
147 .wp-lightbox-overlay .lightbox-image-container{ |
148 mask-size: contain; |
148 height:var(--wp--lightbox-container-height); |
149 -webkit-mask-position: center; |
149 overflow:hidden; |
150 mask-position: center; |
150 position:absolute; |
151 border-radius: 0; |
151 right:50%; |
152 } |
152 top:50%; |
153 } |
153 transform:translate(50%, -50%); |
154 |
154 transform-origin:top right; |
155 .wp-block-image figure { |
155 width:var(--wp--lightbox-container-width); |
156 margin: 0; |
156 z-index:9999999999; |
157 } |
157 } |
|
158 .wp-lightbox-overlay .wp-block-image{ |
|
159 align-items:center; |
|
160 box-sizing:border-box; |
|
161 display:flex; |
|
162 height:100%; |
|
163 justify-content:center; |
|
164 margin:0; |
|
165 position:relative; |
|
166 transform-origin:100% 0; |
|
167 width:100%; |
|
168 z-index:3000000; |
|
169 } |
|
170 .wp-lightbox-overlay .wp-block-image img{ |
|
171 height:var(--wp--lightbox-image-height); |
|
172 min-height:var(--wp--lightbox-image-height); |
|
173 min-width:var(--wp--lightbox-image-width); |
|
174 width:var(--wp--lightbox-image-width); |
|
175 } |
|
176 .wp-lightbox-overlay .wp-block-image figcaption{ |
|
177 display:none; |
|
178 } |
|
179 .wp-lightbox-overlay button{ |
|
180 background:none; |
|
181 border:none; |
|
182 } |
|
183 .wp-lightbox-overlay .scrim{ |
|
184 background-color:#fff; |
|
185 height:100%; |
|
186 opacity:.9; |
|
187 position:absolute; |
|
188 width:100%; |
|
189 z-index:2000000; |
|
190 } |
|
191 .wp-lightbox-overlay.active{ |
|
192 animation:turn-on-visibility .25s both; |
|
193 visibility:visible; |
|
194 } |
|
195 .wp-lightbox-overlay.active img{ |
|
196 animation:turn-on-visibility .35s both; |
|
197 } |
|
198 .wp-lightbox-overlay.show-closing-animation:not(.active){ |
|
199 animation:turn-off-visibility .35s both; |
|
200 } |
|
201 .wp-lightbox-overlay.show-closing-animation:not(.active) img{ |
|
202 animation:turn-off-visibility .25s both; |
|
203 } |
|
204 @media (prefers-reduced-motion:no-preference){ |
|
205 .wp-lightbox-overlay.zoom.active{ |
|
206 animation:none; |
|
207 opacity:1; |
|
208 visibility:visible; |
|
209 } |
|
210 .wp-lightbox-overlay.zoom.active .lightbox-image-container{ |
|
211 animation:lightbox-zoom-in .4s; |
|
212 } |
|
213 .wp-lightbox-overlay.zoom.active .lightbox-image-container img{ |
|
214 animation:none; |
|
215 } |
|
216 .wp-lightbox-overlay.zoom.active .scrim{ |
|
217 animation:turn-on-visibility .4s forwards; |
|
218 } |
|
219 .wp-lightbox-overlay.zoom.show-closing-animation:not(.active){ |
|
220 animation:none; |
|
221 } |
|
222 .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{ |
|
223 animation:lightbox-zoom-out .4s; |
|
224 } |
|
225 .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{ |
|
226 animation:none; |
|
227 } |
|
228 .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{ |
|
229 animation:turn-off-visibility .4s forwards; |
|
230 } |
|
231 } |
|
232 |
|
233 @keyframes turn-on-visibility{ |
|
234 0%{ |
|
235 opacity:0; |
|
236 } |
|
237 to{ |
|
238 opacity:1; |
|
239 } |
|
240 } |
|
241 @keyframes turn-off-visibility{ |
|
242 0%{ |
|
243 opacity:1; |
|
244 visibility:visible; |
|
245 } |
|
246 99%{ |
|
247 opacity:0; |
|
248 visibility:visible; |
|
249 } |
|
250 to{ |
|
251 opacity:0; |
|
252 visibility:hidden; |
|
253 } |
|
254 } |
|
255 @keyframes lightbox-zoom-in{ |
|
256 0%{ |
|
257 transform:translate(calc(((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); |
|
258 } |
|
259 to{ |
|
260 transform:translate(50%, -50%) scale(1); |
|
261 } |
|
262 } |
|
263 @keyframes lightbox-zoom-out{ |
|
264 0%{ |
|
265 transform:translate(50%, -50%) scale(1); |
|
266 visibility:visible; |
|
267 } |
|
268 99%{ |
|
269 visibility:visible; |
|
270 } |
|
271 to{ |
|
272 transform:translate(calc(((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); |
|
273 visibility:hidden; |
|
274 } |
|
275 } |