pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
videogular.less
(9555B)
1 videogular {
2 position: relative;
3 background-color: #000000;
4 overflow: hidden;
5 display: block;
6
7 -webkit-touch-callout: none;
8 -webkit-user-select: none;
9 -khtml-user-select: none;
10 -moz-user-select: moz-none;
11 -ms-user-select: none;
12 user-select: none;
13 }
14
15 videogular.fullscreen {
16 position: absolute;
17 left: 0;
18 top: 0;
19 }
20
21 videogular video {
22 position: absolute;
23 width: 100%;
24 height: auto;
25 z-index: 1;
26 }
27
28 .iconButton {
29 color: #FFFFFF;
30 font-family: 'FontAwesome';
31 speak: none;
32 font-style: normal;
33 font-weight: normal;
34 font-variant: normal;
35 text-transform: none;
36 line-height: 1;
37 -webkit-font-smoothing: antialiased;
38 }
39
40 /**********************/
41 /* OverlayPlay plugin */
42 /**********************/
43 vg-overlay-play {
44 width: 100%;
45 height: 100%;
46 position: absolute;
47 z-index: 3;
48 }
49
50 vg-overlay-play div.play:before {
51 content: "\e000";
52 }
53
54 .overlayPlayContainer {
55 font-size: 100px;
56 width: 100%;
57 height: 100%;
58 position: absolute;
59 display: table;
60 cursor: pointer;
61
62 zoom: 1;
63 filter: alpha(opacity=60);
64 opacity: 0.6;
65 }
66
67 .overlayPlayContainer div {
68 vertical-align: middle;
69 text-align: center;
70 display: table-cell;
71 }
72
73 /********************/
74 /* Buffering plugin */
75 /********************/
76 vg-buffering {
77 width: 100%;
78 height: 100%;
79 position: absolute;
80 z-index: 4;
81 }
82
83 .bufferingContainer {
84 width: 100%;
85 position: absolute;
86 cursor: pointer;
87 top: 50%;
88 margin-top: -50px;
89
90 zoom: 1;
91 filter: alpha(opacity=60);
92 opacity: 0.6;
93 }
94
95 /* Loading Spinner
96 * http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
97 */
98 .loadingSpinner {
99 background-color: rgba(0,0,0,0);
100 border:5px solid rgba(255,255,255,1);
101 opacity:.9;
102 border-top:5px solid rgba(0,0,0,0);
103 border-left:5px solid rgba(0,0,0,0);
104 border-radius:50px;
105 box-shadow: 0 0 35px #FFFFFF;
106 width:50px;
107 height:50px;
108 margin: 0 auto;
109 -moz-animation:spin .5s infinite linear;
110 -webkit-animation:spin .5s infinite linear;
111 }
112
113 .stop {
114 -webkit-animation-play-state:paused;
115 -moz-animation-play-state:paused;
116 }
117
118 @-moz-keyframes spin {
119 0% { -moz-transform:rotate(0deg); }
120 100% { -moz-transform:rotate(360deg); }
121 }
122 @-moz-keyframes spinoff {
123 0% { -moz-transform:rotate(0deg); }
124 100% { -moz-transform:rotate(-360deg); }
125 }
126 @-webkit-keyframes spin {
127 0% { -webkit-transform:rotate(0deg); }
128 100% { -webkit-transform:rotate(360deg); }
129 }
130 @-webkit-keyframes spinoff {
131 0% { -webkit-transform:rotate(0deg); }
132 100% { -webkit-transform:rotate(-360deg); }
133 }
134
135 /*********************/
136 /* Controlbar plugin */
137 /*********************/
138 vg-controls {
139 width: 100%;
140 height: 50px;
141 position: absolute;
142 z-index: 5;
143 }
144 vg-controls #controls-container {
145 width: 100%;
146 height: 50px;
147 background-color: #000000;
148 position: absolute;
149 display: table;
150
151 zoom: 1;
152 filter: alpha(opacity=50);
153 opacity: 0.5;
154 }
155
156 vg-play-pause-button {
157 display: table-cell;
158 width: 50px;
159 vertical-align: middle;
160 text-align: center;
161 cursor: pointer;
162 }
163
164 vg-timedisplay {
165 color: #FFFFFF;
166 display: table-cell;
167 font-family: Arial;
168 font-size: 18px;
169 width: 75px;
170 vertical-align: middle;
171 text-align: center;
172 cursor: default;
173 }
174
175 .vgTimeDisplay {
176 display: table-cell;
177 font-family: Arial;
178 font-size: 18px;
179 width: auto;
180 }
181
182 vg-scrubbar {
183 width: auto;
184 display: table-cell;
185 cursor: pointer;
186 }
187
188 vg-scrubBarCurrentTime {
189 background-color: #FFFFFF;
190 width: 100%;
191 height: 50px;
192 display: block;
193 cursor: pointer;
194 }
195
196 vg-volume {
197 display: table-cell;
198 width: 50px;
199 vertical-align: middle;
200 text-align: center;
201 cursor: pointer;
202 }
203
204 vg-volumebar {
205 width: 50px;
206 height: 100px;
207 top: -100px;
208 margin-left: -25px;
209 vertical-align: middle;
210 text-align: center;
211 position: absolute;
212 cursor: pointer;
213 }
214
215 /* IE10 hack */
216 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
217 vg-volumebar {
218 zoom: 1;
219 filter: alpha(opacity=50);
220 opacity: 0.5;
221 }
222 }
223
224 vg-fullscreenButton {
225 display: table-cell;
226 width: 50px;
227 vertical-align: middle;
228 text-align: center;
229 cursor: pointer;
230 }
231
232 vg-volumebar .verticalVolumeBar {
233 width: 50px;
234 height: 100px;
235 background-color: #000000;
236 position: absolute;
237 }
238
239 vg-volumebar .volumeBackground {
240 width: 20px;
241 height: 70px;
242 left: 15px;
243 top: 15px;
244 background-color: #222222;
245 position: absolute;
246 }
247
248 vg-volumebar .volumeValue {
249 width: 20px;
250 height: 100%;
251 background-color: #FFFFFF;
252 position: absolute;
253 }
254
255 vg-volumebar .volumeClickArea {
256 width: 20px;
257 height: 100%;
258 position: absolute;
259 }
260
261 vg-controls .hide-animation {
262 animation: hideControlsAnimationFrames ease-out 0.5s;
263 animation-iteration-count: 1;
264 animation-fill-mode:forwards; /*when the spec is finished*/
265 -webkit-animation: hideControlsAnimationFrames ease-out 0.5s;
266 -webkit-animation-iteration-count: 1;
267 -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
268 -moz-animation: hideControlsAnimationFrames ease-out 0.5s;
269 -moz-animation-iteration-count: 1;
270 -moz-animation-fill-mode:forwards; /*FF 5+*/
271 -o-animation: hideControlsAnimationFrames ease-out 0.5s;
272 -o-animation-iteration-count: 1;
273 -o-animation-fill-mode:forwards; /*Not implemented yet*/
274 -ms-animation: hideControlsAnimationFrames ease-out 0.5s;
275 -ms-animation-iteration-count: 1;
276 -ms-animation-fill-mode:forwards; /*IE 10+*/
277 }
278
279 @keyframes hideControlsAnimationFrames{
280 0% {
281 left:0px;
282 top:0px;
283 opacity: 0.5;
284 transform: rotate(0deg) scaleX(1) scaleY(1) ;
285 }
286 100% {
287 left:0px;
288 top:50px;
289 opacity: 0.5;
290 transform: rotate(0deg) scaleX(1) scaleY(1) ;
291 }
292 }
293
294 @-moz-keyframes hideControlsAnimationFrames{
295 0% {
296 left:0px;
297 top:0px;
298 opacity: 0.5;
299 -moz-transform: rotate(0deg) scaleX(1) scaleY(1) ;
300 }
301 100% {
302 left:0px;
303 top:50px;
304 opacity: 0.5;
305 -moz-transform: rotate(0deg) scaleX(1) scaleY(1) ;
306 }
307 }
308
309 @-webkit-keyframes hideControlsAnimationFrames {
310 0% {
311 left:0px;
312 top:0px;
313 opacity: 0.5;
314 -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
315 }
316 100% {
317 left:0px;
318 top:50px;
319 opacity: 0.5;
320 -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
321 }
322 }
323
324 @-o-keyframes hideControlsAnimationFrames {
325 0% {
326 left:0px;
327 top:0px;
328 opacity: 0.5;
329 -o-transform: rotate(0deg) scaleX(1) scaleY(1) ;
330 }
331 100% {
332 left:0px;
333 top:50px;
334 opacity: 0.5;
335 -o-transform: rotate(0deg) scaleX(1) scaleY(1) ;
336 }
337 }
338
339 @-ms-keyframes hideControlsAnimationFrames {
340 0% {
341 left:0px;
342 top:0px;
343 opacity: 0.5;
344 -ms-transform: rotate(0deg) scaleX(1) scaleY(1) ;
345 }
346 100% {
347 left:0px;
348 top:50px;
349 opacity: 0.5;
350 -ms-transform: rotate(0deg) scaleX(1) scaleY(1) ;
351 }
352 }
353
354 vg-controls .show-animation {
355 animation: showControlsAnimationFrames ease-out 0.5s;
356 animation-iteration-count: 1;
357 animation-fill-mode:forwards; /*when the spec is finished*/
358 -webkit-animation: showControlsAnimationFrames ease-out 0.5s;
359 -webkit-animation-iteration-count: 1;
360 -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
361 -moz-animation: showControlsAnimationFrames ease-out 0.5s;
362 -moz-animation-iteration-count: 1;
363 -moz-animation-fill-mode:forwards; /*FF 5+*/
364 -o-animation: showControlsAnimationFrames ease-out 0.5s;
365 -o-animation-iteration-count: 1;
366 -o-animation-fill-mode:forwards; /*Not implemented yet*/
367 -ms-animation: showControlsAnimationFrames ease-out 0.5s;
368 -ms-animation-iteration-count: 1;
369 -ms-animation-fill-mode:forwards; /*IE 10+*/
370 }
371
372 @keyframes showControlsAnimationFrames{
373 0% {
374 left:0px;
375 top:50px;
376 opacity: 0.5;
377 transform: rotate(0deg) scaleX(1) scaleY(1) ;
378 }
379 100% {
380 left:0px;
381 top:0px;
382 opacity: 0.5;
383 transform: rotate(0deg) scaleX(1) scaleY(1) ;
384 }
385 }
386
387 @-moz-keyframes showControlsAnimationFrames{
388 0% {
389 left:0px;
390 top:50px;
391 opacity: 0.5;
392 -moz-transform: rotate(0deg) scaleX(1) scaleY(1) ;
393 }
394 100% {
395 left:0px;
396 top:0px;
397 opacity: 0.5;
398 -moz-transform: rotate(0deg) scaleX(1) scaleY(1) ;
399 }
400 }
401
402 @-webkit-keyframes showControlsAnimationFrames {
403 0% {
404 left:0px;
405 top:50px;
406 opacity: 0.5;
407 -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
408 }
409 100% {
410 left:0px;
411 top:0px;
412 opacity: 0.5;
413 -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
414 }
415 }
416
417 @-o-keyframes showControlsAnimationFrames {
418 0% {
419 left:0px;
420 top:50px;
421 opacity: 0.5;
422 -o-transform: rotate(0deg) scaleX(1) scaleY(1) ;
423 }
424 100% {
425 left:0px;
426 top:0px;
427 opacity: 0.5;
428 -o-transform: rotate(0deg) scaleX(1) scaleY(1) ;
429 }
430 }
431
432 @-ms-keyframes showControlsAnimationFrames {
433 0% {
434 left:0px;
435 top:50px;
436 opacity: 0.5;
437 -ms-transform: rotate(0deg) scaleX(1) scaleY(1) ;
438 }
439 100% {
440 left:0px;
441 top:0px;
442 opacity: 0.5;
443 -ms-transform: rotate(0deg) scaleX(1) scaleY(1) ;
444 }
445 }
446
447 /* Controlbar icons */
448 vg-play-pause-button div.play:before {
449 content: "\e000";
450 }
451
452 vg-play-pause-button div.pause:before {
453 content: "\e001";
454 }
455
456 vg-mutebutton div.level3:before {
457 content: "\e002";
458 }
459
460 vg-mutebutton div.level2:before {
461 content: "\e003";
462 }
463
464 vg-mutebutton div.level1:before {
465 content: "\e004";
466 }
467
468 vg-mutebutton div.level0:before {
469 content: "\e005";
470 }
471
472 vg-mutebutton div.mute:before {
473 content: "\e006";
474 }
475
476 vg-fullscreenButton div.enter:before {
477 content: "\e007";
478 }
479
480 vg-fullscreenButton div.exit:before {
481 content: "\e008";
482 }
483
484 /*****************/
485 /* Poster plugin */
486 /*****************/
487 vg-poster-image {
488 width: 100%;
489 height: 100%;
490 position: absolute;
491 z-index: 2;
492 }
493
494 vg-poster-image img, vg-poster-image img.none {
495 top: 0;
496 bottom: 0;
497 right: 0;
498 left: 0;
499 margin: auto;
500 position: absolute;
501 }
502
503 vg-poster-image img.fit {
504 width: 100%;
505 }
506
507 vg-poster-image img.fill {
508 max-width: none;
509 height: 100%;
510 }
511
512 /**********************/
513 /* IMA ads plugin */
514 /**********************/
515 vg-ima-ads {
516 width: 100%;
517 height: 100%;
518 position: absolute;
519 z-index: 6;
520 display: none;
521 }