Diff: STRATO-apps/wordpress_03/app/wp-includes/blocks/image/style.css
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
.wp-block-image>a,.wp-block-image>figure>a{
2
+
display:inline-block;
3
+
}
4
+
.wp-block-image img{
5
+
box-sizing:border-box;
6
+
height:auto;
7
+
max-width:100%;
8
+
vertical-align:bottom;
9
+
}
10
+
@media not (prefers-reduced-motion){
11
+
.wp-block-image img.hide{
12
+
visibility:hidden;
13
+
}
14
+
.wp-block-image img.show{
15
+
animation:show-content-image .4s;
16
+
}
17
+
}
18
+
.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
19
+
border-radius:inherit;
20
+
}
21
+
.wp-block-image.has-custom-border img{
22
+
box-sizing:border-box;
23
+
}
24
+
.wp-block-image.aligncenter{
25
+
text-align:center;
26
+
}
27
+
.wp-block-image.alignfull>a,.wp-block-image.alignwide>a{
28
+
width:100%;
29
+
}
30
+
.wp-block-image.alignfull img,.wp-block-image.alignwide img{
31
+
height:auto;
32
+
width:100%;
33
+
}
34
+
.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{
35
+
display:table;
36
+
}
37
+
.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{
38
+
caption-side:bottom;
39
+
display:table-caption;
40
+
}
41
+
.wp-block-image .alignleft{
42
+
float:left;
43
+
margin:.5em 1em .5em 0;
44
+
}
45
+
.wp-block-image .alignright{
46
+
float:right;
47
+
margin:.5em 0 .5em 1em;
48
+
}
49
+
.wp-block-image .aligncenter{
50
+
margin-left:auto;
51
+
margin-right:auto;
52
+
}
53
+
.wp-block-image :where(figcaption){
54
+
margin-bottom:1em;
55
+
margin-top:.5em;
56
+
}
57
+
.wp-block-image.is-style-circle-mask img{
58
+
border-radius:9999px;
59
+
}
60
+
@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){
61
+
.wp-block-image.is-style-circle-mask img{
62
+
border-radius:0;
63
+
-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>');
64
+
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>');
65
+
mask-mode:alpha;
66
+
-webkit-mask-position:center;
67
+
mask-position:center;
68
+
-webkit-mask-repeat:no-repeat;
69
+
mask-repeat:no-repeat;
70
+
-webkit-mask-size:contain;
71
+
mask-size:contain;
72
+
}
73
+
}
74
+
75
+
:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img){
76
+
border-radius:9999px;
77
+
}
78
+
79
+
.wp-block-image figure{
80
+
margin:0;
81
+
}
82
+
83
+
.wp-lightbox-container{
84
+
display:flex;
85
+
flex-direction:column;
86
+
position:relative;
87
+
}
88
+
.wp-lightbox-container img{
89
+
cursor:zoom-in;
90
+
}
91
+
.wp-lightbox-container img:hover+button{
92
+
opacity:1;
93
+
}
94
+
.wp-lightbox-container button{
95
+
align-items:center;
96
+
backdrop-filter:blur(16px) saturate(180%);
97
+
background-color:#5a5a5a40;
98
+
border:none;
99
+
border-radius:4px;
100
+
cursor:zoom-in;
101
+
display:flex;
102
+
height:20px;
103
+
justify-content:center;
104
+
opacity:0;
105
+
padding:0;
106
+
position:absolute;
107
+
right:16px;
108
+
text-align:center;
109
+
top:16px;
110
+
width:20px;
111
+
z-index:100;
112
+
}
113
+
@media not (prefers-reduced-motion){
114
+
.wp-lightbox-container button{
115
+
transition:opacity .2s ease;
116
+
}
117
+
}
118
+
.wp-lightbox-container button:focus-visible{
119
+
outline:3px auto #5a5a5a40;
120
+
outline:3px auto -webkit-focus-ring-color;
121
+
outline-offset:3px;
122
+
}
123
+
.wp-lightbox-container button:hover{
124
+
cursor:pointer;
125
+
opacity:1;
126
+
}
127
+
.wp-lightbox-container button:focus{
128
+
opacity:1;
129
+
}
130
+
.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
131
+
background-color:#5a5a5a40;
132
+
border:none;
133
+
}
134
+
135
+
.wp-lightbox-overlay{
136
+
box-sizing:border-box;
137
+
cursor:zoom-out;
138
+
height:100vh;
139
+
left:0;
140
+
overflow:hidden;
141
+
position:fixed;
142
+
top:0;
143
+
visibility:hidden;
144
+
width:100%;
145
+
z-index:100000;
146
+
}
147
+
.wp-lightbox-overlay .close-button{
148
+
align-items:center;
149
+
cursor:pointer;
150
+
display:flex;
151
+
justify-content:center;
152
+
min-height:40px;
153
+
min-width:40px;
154
+
padding:0;
155
+
position:absolute;
156
+
right:calc(env(safe-area-inset-right) + 16px);
157
+
top:calc(env(safe-area-inset-top) + 16px);
158
+
z-index:5000000;
159
+
}
160
+
.wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){
161
+
background:none;
162
+
border:none;
163
+
}
164
+
.wp-lightbox-overlay .lightbox-image-container{
165
+
height:var(--wp--lightbox-container-height);
166
+
left:50%;
167
+
overflow:hidden;
168
+
position:absolute;
169
+
top:50%;
170
+
transform:translate(-50%, -50%);
171
+
transform-origin:top left;
172
+
width:var(--wp--lightbox-container-width);
173
+
z-index:9999999999;
174
+
}
175
+
.wp-lightbox-overlay .wp-block-image{
176
+
align-items:center;
177
+
box-sizing:border-box;
178
+
display:flex;
179
+
height:100%;
180
+
justify-content:center;
181
+
margin:0;
182
+
position:relative;
183
+
transform-origin:0 0;
184
+
width:100%;
185
+
z-index:3000000;
186
+
}
187
+
.wp-lightbox-overlay .wp-block-image img{
188
+
height:var(--wp--lightbox-image-height);
189
+
min-height:var(--wp--lightbox-image-height);
190
+
min-width:var(--wp--lightbox-image-width);
191
+
width:var(--wp--lightbox-image-width);
192
+
}
193
+
.wp-lightbox-overlay .wp-block-image figcaption{
194
+
display:none;
195
+
}
196
+
.wp-lightbox-overlay button{
197
+
background:none;
198
+
border:none;
199
+
}
200
+
.wp-lightbox-overlay .scrim{
201
+
background-color:#fff;
202
+
height:100%;
203
+
opacity:.9;
204
+
position:absolute;
205
+
width:100%;
206
+
z-index:2000000;
207
+
}
208
+
.wp-lightbox-overlay.active{
209
+
visibility:visible;
210
+
}
211
+
@media not (prefers-reduced-motion){
212
+
.wp-lightbox-overlay.active{
213
+
animation:turn-on-visibility .25s both;
214
+
}
215
+
.wp-lightbox-overlay.active img{
216
+
animation:turn-on-visibility .35s both;
217
+
}
218
+
.wp-lightbox-overlay.show-closing-animation:not(.active){
219
+
animation:turn-off-visibility .35s both;
220
+
}
221
+
.wp-lightbox-overlay.show-closing-animation:not(.active) img{
222
+
animation:turn-off-visibility .25s both;
223
+
}
224
+
.wp-lightbox-overlay.zoom.active{
225
+
animation:none;
226
+
opacity:1;
227
+
visibility:visible;
228
+
}
229
+
.wp-lightbox-overlay.zoom.active .lightbox-image-container{
230
+
animation:lightbox-zoom-in .4s;
231
+
}
232
+
.wp-lightbox-overlay.zoom.active .lightbox-image-container img{
233
+
animation:none;
234
+
}
235
+
.wp-lightbox-overlay.zoom.active .scrim{
236
+
animation:turn-on-visibility .4s forwards;
237
+
}
238
+
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active){
239
+
animation:none;
240
+
}
241
+
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{
242
+
animation:lightbox-zoom-out .4s;
243
+
}
244
+
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{
245
+
animation:none;
246
+
}
247
+
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{
248
+
animation:turn-off-visibility .4s forwards;
249
+
}
250
+
}
251
+
252
+
@keyframes show-content-image{
253
+
0%{
254
+
visibility:hidden;
255
+
}
256
+
99%{
257
+
visibility:hidden;
258
+
}
259
+
to{
260
+
visibility:visible;
261
+
}
262
+
}
263
+
@keyframes turn-on-visibility{
264
+
0%{
265
+
opacity:0;
266
+
}
267
+
to{
268
+
opacity:1;
269
+
}
270
+
}
271
+
@keyframes turn-off-visibility{
272
+
0%{
273
+
opacity:1;
274
+
visibility:visible;
275
+
}
276
+
99%{
277
+
opacity:0;
278
+
visibility:visible;
279
+
}
280
+
to{
281
+
opacity:0;
282
+
visibility:hidden;
283
+
}
284
+
}
285
+
@keyframes lightbox-zoom-in{
286
+
0%{
287
+
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));
288
+
}
289
+
to{
290
+
transform:translate(-50%, -50%) scale(1);
291
+
}
292
+
}
293
+
@keyframes lightbox-zoom-out{
294
+
0%{
295
+
transform:translate(-50%, -50%) scale(1);
296
+
visibility:visible;
297
+
}
298
+
99%{
299
+
visibility:visible;
300
+
}
301
+
to{
302
+
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));
303
+
visibility:hidden;
304
+
}
305
+
}