video.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. * { padding: 0; margin: 0; }
  2. .fl { float: left; }
  3. .fr { float: right; }
  4. /*video::-webkit-media-controls-enclosure {
  5. display: none !important;
  6. }
  7. video::media-controls-enclosure {
  8. display: none !important;
  9. }*/
  10. .videobox { position: relative; overflow-y: hidden; background: #000; }
  11. .videobox video { position: absolute; top: 0; left: 0; }
  12. .videobox:hover .videobar { transition: all .2s ease-out; bottom: 0; }
  13. .videobar { background: rgba(255,255,255,.1); width: 100%; height: 40px; position: absolute; right: 0; transition: all .2s ease-out; bottom: -40px; left: 0; z-index: 9999999999; }
  14. .videoprog { background: rgba(51, 51, 51, 0.9); width: 50%; margin: 0 20px; height: 20px; float: left; }
  15. .videoprogem { background: rgba(255,255,255,0.7); width: 0%; position: relative; height: 100%; }
  16. .videosound { width: 7%; }
  17. .videosoundem { background: rgba(255,255,255,0.7); width: 50%; position: relative; height: 100%; }
  18. .videoTime { color: #fff; margin-right: 3px; float: left; }
  19. .vbox { position: relative; background: #000; }
  20. .vbox .vicon { background: url(images/video-icon.png); }
  21. .vbox .vbar { background: -moz-linear-gradient(top, #393939 0%, #010000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#393939), color-stop(100%,#010000)); background: -webkit-linear-gradient(top, #393939 0%,#010000 100%); background: -o-linear-gradient(top, #393939 0%,#010000 100%); background: -ms-linear-gradient(top, #393939 0%,#010000 100%); background: linear-gradient(to bottom, #393939 0%,#010000 100%); height: 51px; position: absolute; bottom: 0; width: 100%; }
  22. .vbox .vplay { background-position:-11px -9px; width:25px; height:27px; margin-top:14px; margin-left:2%; float:left; }
  23. .vbox .vpause { background-position:-223px -9px; width:25px; height:21px; margin-top:16px; margin-left:2%; float:left; }
  24. .vbox .vreplay { background-position:-50px -9px; width:19px; height:21px; margin-top:17px; margin-left:2%; float:left; }
  25. .vbox .vprog { width:55%; background:#000; height:20px; float:left; margin-top:16px; margin-left:3%; border-radius:20px ; }
  26. .vbox .vprogem {width:0%; height:100%; background:#565656; border-radius:20px ; }
  27. .vbox .vprogfp { background-position:-80px -6px; width:34px; height:32px; margin-top:-6px; margin-right:-20px; float:right; }
  28. .vbox .vtime { float:left; margin-left:3%; }
  29. .vbox .vstime { color:#e9ebec; font-size:16px; font-family:Calibri; letter-spacing:2px; line-height:51px; }
  30. .vbox .vshu { color:#949595; font-size:16px; font-family:Calibri; line-height:51px; }
  31. .vbox .vetime { color:#949595; font-size:16px; font-family:Calibri; letter-spacing:2px; line-height:51px; }
  32. .vbox .vsound { background-position:-123px -9px; width:21px; height:17px; float:left; margin-top:19px; margin-left:2%; }
  33. .vbox .vsoundpb { width:8%; background:#000; height:13px; float:left; margin-top:22px; margin-left:20px; border-radius:13px ; }
  34. .vbox .vsoundem { width:50%; height:100%; background:#565656; border-radius:13px ; }
  35. .vbox .vsoundfp { background-position:-160px -9px; width:14px; height:14px; margin-top:-1px; margin-right:-6px; float:right; }
  36. .vbox .vfull { background-position:-194px -9px; width:18px; height:18px; float:right; margin-top:19px; margin-right:2%; }
  37. .vbox .loudspeakerMute{background:url(images/noVioce.png);}