You are here

jplayer.css in jPlayer 6

Same filename and directory in other branches
  1. 8.2 theme/jplayer.css
  2. 7.2 theme/jplayer.css
/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http: //www.happyworm.com/jquery/jplayer
 *
 * Skin Name: Blue Monday
 *
 * Copyright (c) 2010 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http: //www.opensource.org/licenses/mit-license.php
 *  - http: //www.gnu.org/copyleft/gpl.html
 *
 * Author: Silvia Benvenuti
 * Skin Version: 2.0
 * Date: 29th April 2010
 */

div.jp-single-player,
div.jp-playlist-player {

}
div.jp-interface {
  position: relative;
  background-color: #eee;
  width: 418px;
  height: 80px;
  border: 1px solid #009be3;
  border-bottom: none;
}

div.jp-interface ul.jp-controls {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
div.jp-interface ul.jp-controls li {
  position: absolute;
}
div.jp-interface ul.jp-controls a {
  display: block;
  position: absolute;
  overflow: hidden;
  text-indent: -9999px;
}
a.jp-play,
a.jp-pause {
  top: 20px;
  width: 40px;
  height: 40px;
}
div.jp-single-player a.jp-play,
div.jp-single-player a.jp-pause {
  left: 40px;
}
div.jp-playlist-player a.jp-play,
div.jp-playlist-player a.jp-pause {
  left: 48px;
}
a.jp-play {
  background: url(jplayer.jpg) 0 0 no-repeat;
}
a.jp-play:hover {
  background: url(jplayer.jpg) -41px 0 no-repeat;
}
a.jp-pause {
  background: url(jplayer.jpg) 0 -42px no-repeat;
}
a.jp-pause:hover {
  background: url(jplayer.jpg) -41px -42px no-repeat;
}
a.jp-stop {
  top: 26px;
  background: url(jplayer.jpg) 0 -83px no-repeat;
  width: 28px;
  height: 28px;
}
div.jp-single-player a.jp-stop {
  left: 90px;
}
div.jp-playlist-player a.jp-stop {
  left: 126px;
}
a.jp-stop:hover {
  background: url(jplayer.jpg) -29px -83px no-repeat;
}
a.jp-previous {
  left: 20px;
  top: 26px;
  background: url(jplayer.jpg) 0 -112px no-repeat;
  width: 28px;
  height: 28px;
}
a.jp-previous:hover {
  background: url(jplayer.jpg) -29px -112px no-repeat;
}
a.jp-next {
  left: 88px;
  top: 26px;
  background: url(jplayer.jpg) 0 -141px no-repeat;
  width: 28px;
  height: 28px;
}
a.jp-next:hover {
  background: url(jplayer.jpg) -29px -141px no-repeat;
}
div.jp-progress {
  position: absolute;
  overflow: hidden;
  top: 32px;
  background-color: #ddd;
  width: 122px;
  height: 15px;
}
div.jp-single-player div.jp-progress {
  left: 130px;
}
div.jp-playlist-player div.jp-progress {
  left: 164px;
}
div.jp-load-bar {
  background: url(jplayer.jpg) 0 -202px repeat-x;
  width: 0px;
  height: 15px;
  cursor: pointer;
}
div.jp-play-bar {
  background: url(jplayer.jpg) 0 -218px repeat-x ;
  width: 0px;
  height: 15px;
}
a.jp-volume-min {
  top: 32px;
  background: url(jplayer.jpg) 0 -170px no-repeat;
  width: 18px;
  height: 15px;
}
div.jp-single-player a.jp-volume-min {
  left: 274px;
}
div.jp-playlist-player a.jp-volume-min {
  left: 296px;
}
a.jp-volume-min:hover {
  background: url(jplayer.jpg) -19px -170px no-repeat;
}
a.jp-volume-max {
  top: 32px;
  background: url(jplayer.jpg) 0 -186px no-repeat;
  width: 18px;
  height: 15px;
}
div.jp-single-player a.jp-volume-max {
  left: 346px;
}
div.jp-playlist-player a.jp-volume-max {
  left: 368px;
}
a.jp-volume-max:hover {
  background: url(jplayer.jpg) -19px -186px no-repeat;
}

div.jp-volume-bar {
  position: absolute;
  overflow: hidden;
  top: 37px;
  background: url(jplayer.jpg) 0 -250px repeat-x;
  width: 46px;
  height: 5px;
  cursor: pointer;
}
div.jp-single-player div.jp-volume-bar {
  left: 292px;
}
div.jp-playlist-player div.jp-volume-bar {
  left: 314px;
}
div.jp-volume-bar-value {
  background: url(jplayer.jpg) 0 -256px repeat-x;
  width: 0px;
  height: 5px;
}
div.jp-play-time,
div.jp-total-time {
  position: absolute;
  top: 49px;
  width: 122px;
  font-size: .64em;
  font-style: oblique;
}
div.jp-total-time {
  text-align: right;
}
div.jp-single-player div.jp-play-time,
div.jp-single-player div.jp-total-time {
  left: 130px;
}
div.jp-playlist-player div.jp-play-time,
div.jp-playlist-player div.jp-total-time {
  left: 164px;
}
div.jp-playlist {
  width: 418px;
}
div.jp-playlist ul{
  list-style-type: none;
  margin: 0;
  padding: 0 20px;
  background-color: #ccc;
  border: 1px solid #009be3;
  border-top: none;
  width: 378px;
  font-size: .72em;
}
div.jp-single-player div.jp-playlist li {
  padding: 5px 0 5px 20px;
  margin: 0;
  font-weight: bold;
  background: none;
}
div.jp-playlist-player div.jp-playlist li {
  padding: 5px 0 4px 20px;
  border-bottom: 1px solid #eee;
  margin: 0;
  background: none;
}
div.jp-playlist-player div.jp-playlist li.jplayer_playlist_item_last {
  padding: 5px 0 5px 20px;
  border-bottom: none;
}
div.jp-playlist-player div.jp-playlist li.jplayer_playlist_current {
  list-style-type: square;
  list-style-position: inside;
  padding-left: 8px;
}
div.jp-playlist-player div.jp-playlist a {
  color: #666;
  text-decoration: none;
}
div.jp-playlist-player div.jp-playlist a:hover {
  color: #0d88c1;
}
div.jp-playlist-player div.jp-playlist a.jplayer_playlist_current {
  color: #0d88c1;
}

File

theme/jplayer.css
View source
  1. /*
  2. * Skin for jPlayer Plugin (jQuery JavaScript Library)
  3. * http: //www.happyworm.com/jquery/jplayer
  4. *
  5. * Skin Name: Blue Monday
  6. *
  7. * Copyright (c) 2010 Happyworm Ltd
  8. * Dual licensed under the MIT and GPL licenses.
  9. * - http: //www.opensource.org/licenses/mit-license.php
  10. * - http: //www.gnu.org/copyleft/gpl.html
  11. *
  12. * Author: Silvia Benvenuti
  13. * Skin Version: 2.0
  14. * Date: 29th April 2010
  15. */
  16. div.jp-single-player,
  17. div.jp-playlist-player {
  18. }
  19. div.jp-interface {
  20. position: relative;
  21. background-color: #eee;
  22. width: 418px;
  23. height: 80px;
  24. border: 1px solid #009be3;
  25. border-bottom: none;
  26. }
  27. div.jp-interface ul.jp-controls {
  28. list-style-type: none;
  29. padding: 0;
  30. margin: 0;
  31. }
  32. div.jp-interface ul.jp-controls li {
  33. position: absolute;
  34. }
  35. div.jp-interface ul.jp-controls a {
  36. display: block;
  37. position: absolute;
  38. overflow: hidden;
  39. text-indent: -9999px;
  40. }
  41. a.jp-play,
  42. a.jp-pause {
  43. top: 20px;
  44. width: 40px;
  45. height: 40px;
  46. }
  47. div.jp-single-player a.jp-play,
  48. div.jp-single-player a.jp-pause {
  49. left: 40px;
  50. }
  51. div.jp-playlist-player a.jp-play,
  52. div.jp-playlist-player a.jp-pause {
  53. left: 48px;
  54. }
  55. a.jp-play {
  56. background: url(jplayer.jpg) 0 0 no-repeat;
  57. }
  58. a.jp-play:hover {
  59. background: url(jplayer.jpg) -41px 0 no-repeat;
  60. }
  61. a.jp-pause {
  62. background: url(jplayer.jpg) 0 -42px no-repeat;
  63. }
  64. a.jp-pause:hover {
  65. background: url(jplayer.jpg) -41px -42px no-repeat;
  66. }
  67. a.jp-stop {
  68. top: 26px;
  69. background: url(jplayer.jpg) 0 -83px no-repeat;
  70. width: 28px;
  71. height: 28px;
  72. }
  73. div.jp-single-player a.jp-stop {
  74. left: 90px;
  75. }
  76. div.jp-playlist-player a.jp-stop {
  77. left: 126px;
  78. }
  79. a.jp-stop:hover {
  80. background: url(jplayer.jpg) -29px -83px no-repeat;
  81. }
  82. a.jp-previous {
  83. left: 20px;
  84. top: 26px;
  85. background: url(jplayer.jpg) 0 -112px no-repeat;
  86. width: 28px;
  87. height: 28px;
  88. }
  89. a.jp-previous:hover {
  90. background: url(jplayer.jpg) -29px -112px no-repeat;
  91. }
  92. a.jp-next {
  93. left: 88px;
  94. top: 26px;
  95. background: url(jplayer.jpg) 0 -141px no-repeat;
  96. width: 28px;
  97. height: 28px;
  98. }
  99. a.jp-next:hover {
  100. background: url(jplayer.jpg) -29px -141px no-repeat;
  101. }
  102. div.jp-progress {
  103. position: absolute;
  104. overflow: hidden;
  105. top: 32px;
  106. background-color: #ddd;
  107. width: 122px;
  108. height: 15px;
  109. }
  110. div.jp-single-player div.jp-progress {
  111. left: 130px;
  112. }
  113. div.jp-playlist-player div.jp-progress {
  114. left: 164px;
  115. }
  116. div.jp-load-bar {
  117. background: url(jplayer.jpg) 0 -202px repeat-x;
  118. width: 0px;
  119. height: 15px;
  120. cursor: pointer;
  121. }
  122. div.jp-play-bar {
  123. background: url(jplayer.jpg) 0 -218px repeat-x ;
  124. width: 0px;
  125. height: 15px;
  126. }
  127. a.jp-volume-min {
  128. top: 32px;
  129. background: url(jplayer.jpg) 0 -170px no-repeat;
  130. width: 18px;
  131. height: 15px;
  132. }
  133. div.jp-single-player a.jp-volume-min {
  134. left: 274px;
  135. }
  136. div.jp-playlist-player a.jp-volume-min {
  137. left: 296px;
  138. }
  139. a.jp-volume-min:hover {
  140. background: url(jplayer.jpg) -19px -170px no-repeat;
  141. }
  142. a.jp-volume-max {
  143. top: 32px;
  144. background: url(jplayer.jpg) 0 -186px no-repeat;
  145. width: 18px;
  146. height: 15px;
  147. }
  148. div.jp-single-player a.jp-volume-max {
  149. left: 346px;
  150. }
  151. div.jp-playlist-player a.jp-volume-max {
  152. left: 368px;
  153. }
  154. a.jp-volume-max:hover {
  155. background: url(jplayer.jpg) -19px -186px no-repeat;
  156. }
  157. div.jp-volume-bar {
  158. position: absolute;
  159. overflow: hidden;
  160. top: 37px;
  161. background: url(jplayer.jpg) 0 -250px repeat-x;
  162. width: 46px;
  163. height: 5px;
  164. cursor: pointer;
  165. }
  166. div.jp-single-player div.jp-volume-bar {
  167. left: 292px;
  168. }
  169. div.jp-playlist-player div.jp-volume-bar {
  170. left: 314px;
  171. }
  172. div.jp-volume-bar-value {
  173. background: url(jplayer.jpg) 0 -256px repeat-x;
  174. width: 0px;
  175. height: 5px;
  176. }
  177. div.jp-play-time,
  178. div.jp-total-time {
  179. position: absolute;
  180. top: 49px;
  181. width: 122px;
  182. font-size: .64em;
  183. font-style: oblique;
  184. }
  185. div.jp-total-time {
  186. text-align: right;
  187. }
  188. div.jp-single-player div.jp-play-time,
  189. div.jp-single-player div.jp-total-time {
  190. left: 130px;
  191. }
  192. div.jp-playlist-player div.jp-play-time,
  193. div.jp-playlist-player div.jp-total-time {
  194. left: 164px;
  195. }
  196. div.jp-playlist {
  197. width: 418px;
  198. }
  199. div.jp-playlist ul{
  200. list-style-type: none;
  201. margin: 0;
  202. padding: 0 20px;
  203. background-color: #ccc;
  204. border: 1px solid #009be3;
  205. border-top: none;
  206. width: 378px;
  207. font-size: .72em;
  208. }
  209. div.jp-single-player div.jp-playlist li {
  210. padding: 5px 0 5px 20px;
  211. margin: 0;
  212. font-weight: bold;
  213. background: none;
  214. }
  215. div.jp-playlist-player div.jp-playlist li {
  216. padding: 5px 0 4px 20px;
  217. border-bottom: 1px solid #eee;
  218. margin: 0;
  219. background: none;
  220. }
  221. div.jp-playlist-player div.jp-playlist li.jplayer_playlist_item_last {
  222. padding: 5px 0 5px 20px;
  223. border-bottom: none;
  224. }
  225. div.jp-playlist-player div.jp-playlist li.jplayer_playlist_current {
  226. list-style-type: square;
  227. list-style-position: inside;
  228. padding-left: 8px;
  229. }
  230. div.jp-playlist-player div.jp-playlist a {
  231. color: #666;
  232. text-decoration: none;
  233. }
  234. div.jp-playlist-player div.jp-playlist a:hover {
  235. color: #0d88c1;
  236. }
  237. div.jp-playlist-player div.jp-playlist a.jplayer_playlist_current {
  238. color: #0d88c1;
  239. }