Player.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. .playerContainer{
  2. width:480px;
  3. background:#76C8C4;
  4. text-align:center;
  5. }
  6. .PlayerScreen{
  7. background:#00FFFF;
  8. width:320px;
  9. height:240px;
  10. margin-left:auto;
  11. margin-right:auto;
  12. }
  13. .Controls{
  14. height:85px;
  15. background:#333333;
  16. text-align:left;
  17. width:100%;
  18. }
  19. .ControlsRight{
  20. vertical-align:top;
  21. }
  22. .ControlsBottom{
  23. vertical-align:bottom;
  24. }
  25. .StatusContainer{
  26. width:100%;
  27. height:100%;
  28. }
  29. .PlayContainer{
  30. width:60px;
  31. height:60px;
  32. }
  33. .Progress{
  34. height:10px;
  35. }
  36. .Time, .Duration, .Status{
  37. height:16px;
  38. margin-top:0px;
  39. color:#F5FFC8;
  40. width:100%;
  41. }
  42. .Time{
  43. padding-left:2px;
  44. }
  45. .Duration{
  46. padding-right:2px;
  47. text-align:right;
  48. }
  49. .StatusContainer{
  50. padding:0;
  51. border-collapse:collapse;
  52. }
  53. .Status{
  54. height:20px;
  55. background:#ff0000;
  56. table-layout:fixed;
  57. }
  58. .Status.statusError .statusTitle, .Status.statusError .statusInfo{
  59. color:#FF0000;
  60. }
  61. .Status .statusTitle{
  62. font-weight:bold;
  63. color:#A5B3E9;
  64. }
  65. .Status .statusInfo{
  66. font-weight:normal;
  67. color:#3770D6;
  68. }
  69. .Time, .Duration, .Status{
  70. font-family:Verdana, Arial, Helvetica, sans-serif;
  71. font-size:9px;
  72. background:#000000;
  73. }
  74. .Time, .Duration{
  75. width:60px;
  76. }
  77. .Volume{
  78. width:30px;
  79. height:30px;
  80. float:right;
  81. margin-right:2px;
  82. margin-top:auto;
  83. background-image:url(images/player_sprite.png);
  84. background-repeat:no-repeat;
  85. background-position:-1px -62px;
  86. cursor:pointer;
  87. }
  88. .Volume:hover{
  89. background-position:-33px -62px;
  90. }
  91. .PlayPauseToggle{
  92. width:60px;
  93. height:60px;
  94. background-image:url(images/player_sprite.png);
  95. background-repeat:no-repeat;
  96. background-position:-1px -1px;
  97. cursor:pointer;
  98. vertical-align:middle;
  99. line-height:60px;
  100. }
  101. .PlayPauseToggle:hover{
  102. background-position:-63px -1px;
  103. cursor:pointer;
  104. }
  105. .icon{
  106. background-image:url(images/dojoPlayerIcons.png);
  107. background-repeat:no-repeat;
  108. width:22px;
  109. height:22px;
  110. }
  111. .PlayPauseToggle .icon{
  112. position:relative;
  113. top:19px;
  114. left:19px;
  115. background-position:-1px -1px;
  116. }
  117. .PlayPauseToggle.Play .icon{
  118. background-position:-1px -1px;
  119. }
  120. .PlayPauseToggle.Pause .icon{
  121. background-position:-24px -1px;
  122. }
  123. .Progress{
  124. }
  125. .Progress, .ProgressLoaded, .ProgressPosition, .ProgressHandle{
  126. height:10px;
  127. }
  128. .ProgressLoaded, .ProgressPosition, .ProgressHandle{
  129. position:absolute;
  130. }
  131. .ProgressLoaded{
  132. background:url(images/progressLoadedBk.png) repeat-x;
  133. }
  134. .ProgressHandle{
  135. background-image:url(images/sliderHandleSprite.png);
  136. background-position:0px 0px;
  137. width:15px;
  138. margin-left:0px;
  139. cursor:pointer;
  140. }
  141. .ProgressHandle.over{
  142. background-position:-15px 0px;
  143. }
  144. .ProgressPosition{
  145. background:url(images/progressPositionBk.png) repeat-x;
  146. width:0px;
  147. }
  148. .VolumeSlider{
  149. position:absolute;
  150. }
  151. .VolumeSliderBack{
  152. width:128px;
  153. height:30px;
  154. background-image:url(images/player_sprite.png);
  155. background-repeat:no-repeat;
  156. background-position:-1px -95px;
  157. }
  158. .VolumeSliderHandle{
  159. position:absolute;
  160. width:12px;
  161. height:14px;
  162. background-image:url(images/player_sprite.png);
  163. background-repeat:no-repeat;
  164. background-position:-1px -140px;
  165. cursor:pointer;
  166. }
  167. .VolumeSliderHandle.over{
  168. background-position:-15px -138px;
  169. cursor:pointer;
  170. }
  171. .Volume .icon{
  172. background-position:-60px -43px;
  173. width:18px;
  174. height:16px;
  175. position:relative;
  176. top:7px;
  177. left:7px;
  178. }
  179. .Volume.mute .icon{
  180. background-position:-1px -43px;
  181. }
  182. .Volume.low .icon{
  183. background-position:-20px -43px;
  184. }
  185. .Volume.med .icon{
  186. background-position:-40px -43px;
  187. }
  188. .Volume.high .icon{
  189. background-position:-60px -43px;
  190. }