PluginProbe
Embed Plus for YouTube Gallery, Livestream and Lazy Loading with Facades / trunk
Embed Plus for YouTube Gallery, Livestream and Lazy Loading with Facades vtrunk
trunk 1.0 1.1 10.0 10.1 10.2 10.3 10.4 10.5 10.6 10.7 10.8 10.9 11.0 11.0.1 11.1 11.2 11.3 11.3.1 11.4 11.5 11.6 11.7 11.7.1 11.8 All 143 releases
youtube-embed-plus / styles / ytprefs.css

ytprefs.css in Embed Plus for YouTube Gallery, Livestream and Lazy Loading with Facades trunk, at styles/ytprefs.css

483 lines 10.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .epyt-debug {
2 cursor: pointer; text-align: left; background-color: #dddddd; color: #000000;
3 }
4
5 iframe.__youtube_prefs__
6 {
7 border-width: 0;
8 }
9
10 .epyt-gallery {
11 text-align: center;
12 }
13
14 .epyt-gallery .epyt-figure {
15 margin-inline: 0;
16 margin-block: 0;
17 }
18
19 /*.epyt-gallery div[tabindex]:focus {
20 outline: none;
21 }*/
22
23 .epyt-gallery iframe {
24 margin-bottom: 0;
25 }
26
27 .epyt-gallery.epyt-lb iframe {
28 display: none;
29 height: 0 !important;
30 }
31 .epyt-gallery-list {
32 margin: 0 -8px 0 -8px;
33 position: relative;
34 transition: opacity ease-out .3s;
35 display: block;
36 }
37
38 .epyt-gallery-list .epyt-gallery-thumb {
39 box-sizing: border-box;
40 }
41
42 .epyt-gallery-list p {
43 display: none;
44 }
45
46 .epyt-gallery-clear {
47 clear: both;
48 }
49
50 .epyt-gallery-list.epyt-loading {
51 opacity: .5;
52 transition: opacity ease-out .3s;
53 }
54
55 .epyt-gallery-thumb {
56 position: relative;
57 box-sizing: border-box;
58 overflow-y: hidden;
59 display: block !important;
60 cursor: pointer;
61 opacity: 1;
62 float: left;
63 padding: 0 8px 10px 8px;
64 height: auto;
65 }
66
67
68 .epyt-gallery-thumb.hover {
69 position: relative;
70 opacity: 1;
71 transition: opacity ease-out .3s;
72 height: auto;
73 }
74
75 .epyt-gallery-img-box {
76 width: 100%;
77 }
78 .epyt-gallery-img {
79 height: 0;
80 width: 100%;
81 padding-top: 56.25% !important;
82 position: relative;
83 overflow: hidden !important;
84 background-size: cover !important;
85 background-position: center !important;
86
87 }
88
89 .epyt-gallery-playhover {
90 opacity: 0;
91 position: absolute;
92 top: -10px;
93 left: 0;
94 width: 100%;
95 height: 100%;
96 vertical-align: middle;
97 text-align: center;
98 transition: opacity ease-out .3s;
99 }
100
101 .epyt-gallery-thumb.hover .epyt-gallery-playhover, .epyt-gallery-thumb.epyt-current-video .epyt-gallery-playhover {
102 opacity: 1;
103 top: 0;
104 transition: all ease-out .3s;
105
106 }
107
108 .epyt-gallery-thumb .epyt-gallery-playcrutch {
109 display: inline-block;
110 height: 100%;
111 vertical-align: middle;
112 width: 0;
113 }
114
115 .epyt-gallery-playhover .epyt-play-img {
116 height: auto !important;
117 max-width: 15% !important;
118 padding: 0 !important;
119 margin: 0 !important;
120 min-width: 30px !important;
121 vertical-align: middle !important;
122 display: inline-block !important;
123 width: auto;
124 border: none;
125 box-sizing: border-box;
126 }
127
128 .epyt-gallery-title {
129 font-size: 80%;
130 line-height: 120%;
131 padding: 10px;
132 }
133
134 .epyt-gallery-notitle {
135 padding: 4px;
136 }
137
138 .epyt-gallery-notitle span {
139 display: none;
140 }
141
142 .epyt-gallery-rowtitle {
143 text-align: center;
144 width: 100%;
145 position: absolute;
146 left: 0;
147 top: 100%;
148 opacity: 0;
149 z-index: 10;
150 overflow-x: hidden;
151 text-overflow: ellipsis;
152 white-space: nowrap;
153 }
154
155 .epyt-gallery-rowtitle.hover {
156 opacity: 1;
157 transition: opacity linear .2s;
158 }
159
160 .epyt-gallery-rowbreak {
161 clear: both;
162 }
163
164 .epyt-pagination {
165 clear: both;
166 text-align: center;
167 padding: 10px 8px 10px 8px;
168 }
169
170
171 .epyt-pagination.epyt-hide-pagination * {
172 display: none !important;
173 }
174
175
176 .epyt-pagination > div, .epyt-pagenumbers > div {
177 display: inline-block;
178 padding: 0 2px 0 2px;
179 vertical-align: middle;
180 }
181
182 .epyt-pagination .epyt-pagebutton {
183 cursor: pointer;
184 display: inline-block;
185 padding: 0 10px 0 10px;
186 }
187 .epyt-pagebutton > div {
188 display: inline;
189 }
190
191 .epyt-pagination .epyt-loader {
192 display: none;
193 }
194
195 .epyt-gallery-list.epyt-loading .epyt-pagination .epyt-loader {
196 display: inline-block;
197 }
198
199 body .lity-container{
200 width: 100%;
201 max-width: 964px;
202 }
203
204 .epyt-curtain .lity-opened iframe {
205 opacity: 0;
206 transition: opacity .3s linear .5s;
207 }
208
209 /*
210 columns
211 */
212
213 .epyt-gallery-allthumbs.epyt-cols-1 .epyt-gallery-thumb {
214 width: 100%;
215 }
216
217 .epyt-gallery-allthumbs.epyt-cols-2 .epyt-gallery-thumb {
218 width: 50%;
219 }
220
221 .epyt-gallery-allthumbs.epyt-cols-3 .epyt-gallery-thumb {
222 width: 33.333%;
223 }
224
225 .epyt-gallery-allthumbs.epyt-cols-4 .epyt-gallery-thumb {
226 width: 25%;
227 }
228
229 .epyt-gallery-allthumbs.epyt-cols-5 .epyt-gallery-thumb {
230 width: 20%;
231 }
232
233 .epyt-gallery-allthumbs.epyt-cols-6 .epyt-gallery-thumb {
234 width: 16.666%;
235 }
236
237 .epyt-gallery-allthumbs.epyt-cols-7 .epyt-gallery-thumb {
238 width: 14.285%;
239 }
240
241 .epyt-gallery-allthumbs.epyt-cols-8 .epyt-gallery-thumb {
242 width: 12.5%;
243 }
244
245 .epyt-gallery-allthumbs.epyt-cols-9 .epyt-gallery-thumb {
246 width: 11.111%;
247 }
248
249 .epyt-gallery-allthumbs.epyt-cols-10 .epyt-gallery-thumb {
250 width: 10%;
251 }
252
253 .epyt-gallery-allthumbs.epyt-cols-11 .epyt-gallery-thumb {
254 width: 9.090%;
255 }
256
257 .epyt-gallery-allthumbs.epyt-cols-12 .epyt-gallery-thumb {
258 width: 8.333%;
259 }
260
261 .epyt-gallery-allthumbs.epyt-cols-13 .epyt-gallery-thumb {
262 width: 7.692%;
263 }
264
265 .epyt-gallery-allthumbs.epyt-cols-14 .epyt-gallery-thumb {
266 width: 7.142%;
267 }
268
269 .epyt-gallery-allthumbs.epyt-cols-15 .epyt-gallery-thumb {
270 width: 6.666%;
271 }
272
273 .epyt-gallery-allthumbs.epyt-cols-16 .epyt-gallery-thumb {
274 width: 6.25%;
275 }
276
277 .epyt-gallery-allthumbs.epyt-cols-17 .epyt-gallery-thumb {
278 width: 5.882%;
279 }
280
281 .epyt-gallery-allthumbs.epyt-cols-18 .epyt-gallery-thumb {
282 width: 5.555%;
283 }
284
285 .epyt-gallery-allthumbs.epyt-cols-19 .epyt-gallery-thumb {
286 width: 5.263%;
287 }
288
289 .epyt-gallery-allthumbs.epyt-cols-20 .epyt-gallery-thumb {
290 width: 5%;
291 }
292
293
294 .epyt-pagebutton.hide, .epyt-pagenumbers.hide {
295 display: none !important;
296 opacity: 0 !important;
297 visibility: hidden !important;
298 }
299
300 .epyt-gallery-subscribe {
301 text-align: center;
302 padding: 15px 0 10px 0;
303 clear: both;
304 }
305
306 .epyt-gallery-subscribe a.epyt-gallery-subbutton, .epyt-gallery-subscribe a.epyt-gallery-subbutton:hover {
307 display: inline-block;
308 padding: 5px 10px;
309 background-color: #E62117 !important;
310 color: #ffffff !important;
311 text-decoration: none !important;
312 border-radius: 3px;
313 }
314
315 .epyt-gallery-subscribe a.epyt-gallery-subbutton img {
316 width: 20px !important;
317 height: auto !important;
318 vertical-align: middle !important;
319 padding: 0 6px 3px 0;
320 display: inline-block;
321 background: transparent;
322 -webkit-box-shadow: none;
323 box-shadow: none;
324 margin: 0;
325 }
326
327
328 /********* GDPR */
329 body div.__youtube_prefs__.__youtube_prefs_gdpr__ {
330 background-color: #000;
331 background-image: -webkit-linear-gradient(top, #000, #444);
332 background-image: linear-gradient(to bottom, #000, #444);
333 padding: 25px;
334 height: auto;
335 text-align: left;
336 }
337
338 body div.__youtube_prefs__.__youtube_prefs_gdpr__ * {
339 color: #e3e3e3 !important;
340 }
341
342 body div.__youtube_prefs__.__youtube_prefs_gdpr__ a {
343 text-decoration: underline;
344 }
345
346 body div.__youtube_prefs__.__youtube_prefs_gdpr__ button.__youtube_prefs_gdpr__, body div.__youtube_prefs__.__youtube_prefs_gdpr__ button.__youtube_prefs_gdpr__:hover {
347 display: inline-block;
348 padding: 5px 10px;
349 background: #E62117 !important;
350 color: #ffffff !important;
351 text-decoration: none !important;
352 border-radius: 3px;
353 font-weight: normal;
354 border-width: 0;
355 box-sizing: border-box;
356 }
357
358 body div.__youtube_prefs__.__youtube_prefs_gdpr__ button.__youtube_prefs_gdpr__ img {
359 width: 20px !important;
360 height: auto !important;
361 vertical-align: middle !important;
362 padding: 0 6px 3px 0;
363 display: inline-block;
364 background: transparent;
365 -webkit-box-shadow: none;
366 box-shadow: none;
367 margin-left: 8px;
368 }
369
370 body .epyt-gallery-img-gdpr {
371 background-color: #000;
372 background-image: -webkit-linear-gradient(top, #000, #444);
373 background-image: linear-gradient(to bottom, #000, #444);
374 }
375
376 /********* facade */
377
378 .epyt-facade {
379 position: relative;
380 padding-bottom: 56.25%;
381 height: 0;
382 overflow: hidden;
383 max-width: 100%;
384 -webkit-transition: 0.4s all;
385 -moz-transition: 0.4s all;
386 transition: 0.4s all;
387 }
388
389 .epyt-facade:hover {
390 -webkit-filter: brightness(90%);
391 -moz-filter: brightness(90%);
392 filter: brightness(90%);
393 }
394
395 .epyt-facade img.epyt-facade-poster {
396 display: block;
397 margin: 0;
398 max-width: 100%;
399 width: 100%;
400 position: absolute;
401 top: 50%;
402 left: 50%;
403 transform: translate(-50%, -50%);
404 border: none;
405 height: auto;
406 cursor: pointer;
407 }
408
409 .epyt-facade button.epyt-facade-play {
410 background-color: transparent !important;
411 position: absolute;
412 left: 50%;
413 top: 50%;
414 width: 68px;
415 height: 48px;
416 margin-left: -34px;
417 margin-top: -24px;
418 -webkit-transition: opacity .25s cubic-bezier(0,0,0.2,1);
419 transition: opacity .25s cubic-bezier(0,0,0.2,1);
420 cursor: pointer;
421 border-width: 0 !important;
422 }
423
424 .epyt-facade button.epyt-facade-play svg {
425 height: 100%;
426 left: 0;
427 position: absolute;
428 top: 0;
429 width: 100%;
430 pointer-events: none;
431 }
432
433 .epyt-facade button.epyt-facade-play svg .ytp-large-play-button-bg {
434 -webkit-transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
435 transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
436 fill: #212121;
437 fill-opacity: .8;
438 }
439
440 .epyt-facade:hover button.epyt-facade-play svg .ytp-large-play-button-bg {
441 -webkit-transition: fill .1s cubic-bezier(0,0,0.2,1),fill-opacity .1s cubic-bezier(0,0,0.2,1);
442 transition: fill .1s cubic-bezier(0,0,0.2,1),fill-opacity .1s cubic-bezier(0,0,0.2,1);
443 fill: #f00;
444 fill-opacity: 1;
445 }
446
447 .wp-embed-responsive .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper .epyt-is-override.epyt-facade
448 {
449 position: absolute;
450 top: 0;
451 right: 0;
452 bottom: 0;
453 left: 0;
454 }
455
456 .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper .epyt-is-override.__youtube_prefs_gdpr__
457 {
458 position: relative;
459 }
460
461 .wp-embed-responsive .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper .epyt-is-override.__youtube_prefs_gdpr__
462 {
463 position: absolute;
464 top: 0;
465 right: 0;
466 bottom: 0;
467 left: 0;
468 overflow-y: auto;
469 }
470
471 .wp-embed-responsive .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper.epyt-is-override__wrapper:before
472 {
473 padding: 0;
474 }
475
476 .wp-embed-responsive .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper.epyt-is-override__wrapper .epyt-is-override.__youtube_prefs_gdpr__
477 {
478 position: relative;
479 top: unset;
480 right: unset;
481 bottom: unset;
482 left: unset;
483 }