video.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /* video container */
  2. .videoContainer{
  3. width:750px;
  4. height:430px;
  5. position:relative;
  6. overflow:hidden;
  7. background:#000;
  8. color:#ccc;
  9. }
  10. .control{
  11. color:#ccc;
  12. position:absolute;
  13. bottom:0;
  14. left:0;
  15. width:100%;
  16. z-index:5;
  17. display:none;
  18. margin: 0px 8px;
  19. }
  20. /* control top part */
  21. .topControl{
  22. height:7px;
  23. background:rgba(255,255,255,0); /* fallback */
  24. }
  25. /* control bottom part */
  26. .btmControl{
  27. clear:both;
  28. background: #1F1F1F; /* fallback */
  29. background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  30. background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  31. background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  32. }
  33. .control div.btn {
  34. float:left;
  35. width:34px;
  36. height:30px;
  37. padding:0 5px;
  38. border-right:1px solid #404040;
  39. cursor:pointer;
  40. }
  41. .control div.text{
  42. font-size:12px;
  43. font-weight:bold;
  44. line-height:30px;
  45. text-align:center;
  46. font-family:verdana;
  47. width:20px;
  48. border:none;
  49. color:#777;
  50. }
  51. /* Progress bar */
  52. .progress {
  53. width:85%;
  54. height:7px;
  55. position:relative;
  56. float:left;
  57. cursor:pointer;
  58. background: #444; /* fallback */
  59. background:-moz-linear-gradient(top,#666,#333);
  60. background:-webkit-linear-gradient(top,#666,#333);
  61. background:-o-linear-gradient(top,#666,#333);
  62. box-shadow:0 2px 3px #333 inset;
  63. -moz-box-shadow:0 2px 3px #333 inset;
  64. -webkit-box-shadow:0 2px 3px #333 inset;
  65. border-radius:10px;
  66. -moz-border-radius:10px;
  67. -webkit-border-radius:10px;
  68. }
  69. .progress span {
  70. height:100%;
  71. position:absolute;
  72. top:0;
  73. left:0;
  74. display:block;
  75. border-radius:5px;
  76. -moz-border-radius:5px;
  77. -webkit-border-radius:5px;
  78. }
  79. .timeBar{
  80. z-index:10;
  81. width:0;
  82. background: #2d2d2d;
  83. }
  84. .bufferBar{
  85. z-index:5;
  86. width:0;
  87. background: #360606;
  88. box-shadow:2px 0 5px #333;
  89. -moz-box-shadow:2px 0 5px #333;
  90. -webkit-box-shadow:2px 0 5px #333;
  91. }
  92. /* time and duration */
  93. /*.time{
  94. width:30%;
  95. float:right;
  96. text-align:center;
  97. font-size:11px;
  98. line-height:10px;
  99. }*/
  100. /* VOLUME BAR CSS */
  101. .loading, .init{
  102. position:absolute;
  103. top:0;
  104. left:0;
  105. width:100%;
  106. height:100%;
  107. background:url(../images/loading.gif) no-repeat 50% 50%;
  108. z-index:2;
  109. display:none;
  110. }
  111. .init{
  112. background:url(../images/bigplay.png) no-repeat 50% 50% !important;
  113. cursor:pointer;
  114. }