You are here

audio_js_default.css in audio.js 7

.audiojs audio {
  left: -1px;
  position: absolute;
}

.audiojs-label {
  font-weight: bold;
}

.audiojs-default .audiojs {
  background: #404040;
  background-image: -moz-linear-gradient(center top,#444 0%,#555 50%,#444 51%,#444 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(0.5,#555),color-stop(0.51,#444),color-stop(1,#444));
  font-family: monospace;
  font-size: 12px;
  height: 36px;
  overflow: hidden;
  width: 460px;
}

.audiojs-default .audiojs .play-pause {
  border-right: 1px solid #000;
  float: left;
  height: 40px;
  margin: 0;
  overflow: hidden;
  padding: 4px 6px;
  width: 25px;
}

.audiojs-default .audiojs p {
  cursor: pointer;
  display: none;
  height: 40px;
  margin: 0;
  width: 25px;
}

.audiojs-default .audiojs .play {
  display: block;
}

.audiojs-default .audiojs .scrubber {
  background: #5a5a5a;
  border-bottom: 0;
  border-left: 0;
  border-top: 1px solid #3f3f3f;
  float: left;
  height: 14px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  width: 280px;
}

.audiojs-default .audiojs .progress {
  background: #ccc;
  background-image: -moz-linear-gradient(center top,#ccc 0%,#ddd 50%,#ccc 51%,#ccc 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ccc),color-stop(0.5,#ddd),color-stop(0.51,#ccc),color-stop(1,#ccc));
  height: 14px;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;
}

.audiojs-default .audiojs .loaded {
  background: #000;
  background-image: -moz-linear-gradient(center top,#222 0%,#333 50%,#222 51%,#222 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#222),color-stop(0.5,#333),color-stop(0.51,#222),color-stop(1,#222));
  height: 14px;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}

.audiojs-default .audiojs .time {
  border-left: 1px solid #000;
  color: #ddd;
  float: left;
  height: 36px;
  line-height: 36px;
  margin: 0 0 0 6px;
  padding: 0 6px 0 12px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

.audiojs-default .audiojs .time em {
  color: #f9f9f9;
  font-style: normal;
  padding: 0 2px 0 0;
}

.audiojs-default .audiojs .time strong {
  font-weight: 400;
  padding: 0 0 0 2px;
}

.audiojs-default .audiojs .error-message {
  color: #fff;
  display: none;
  float: left;
  height: 36px;
  line-height: 36px;
  margin: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 400px;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}

.audiojs-default .audiojs .error-message a {
  border-bottom: 1px solid #999;
  color: #eee;
  padding-bottom: 1px;
  text-decoration: none;
  white-space: wrap;
}

.audiojs-default .audiojs .play {
  background: url(../images/player-graphics.gif) -2px -1px no-repeat;
}

.audiojs-default .audiojs .loading {
  background: url(../images/player-graphics.gif) -2px -31px no-repeat;
}

.audiojs-default .audiojs .error {
  background: url(../images/player-graphics.gif) -2px -61px no-repeat;
}

.audiojs-default .audiojs .pause {
  background: url(../images/player-graphics.gif) -2px -91px no-repeat;
}

.audiojs-default .playing .play,
.audiojs-default .playing .loading,
.audiojs-default .playing .error {
  display: none;
}

.audiojs-default .playing .pause {
  display: block;
}

.audiojs-default .loading .play,
.audiojs-default .loading .pause,
.audiojs-default .loading .error {
  display: none;
}

.audiojs-default .loading .loading {
  display: block;
}

.audiojs-default .error .time,
.audiojs-default .error .play,
.audiojs-default .error .pause,
.audiojs-default .error .scrubber,
.audiojs-default .error .loading {
  display: none;
}

.audiojs-default .error .error {
  display: block;
}

.audiojs-default .error .play-pause p {
  cursor: auto;
}

.audiojs-default .error .error-message {
  display: block;
}

/* Playlist */
.audiojs-default ol.audiojs-playlist {
  background: #5a5a5a;
  border-top: 1px solid #e8e8e8;
  color: #e8e8e8;
  margin: 0;
  padding: 0;
  width: 460px;
}

.audiojs-default ol.audiojs-playlist li {
  border-bottom: 1px solid #e8e8e8;
  list-style-position: inside;
  padding: 6px 10px;
}

.audiojs-default ol.audiojs-playlist li.last {
  border-bottom: none;
}

.audiojs-default ol.audiojs-playlist li.playing {
  background: #4b4b4b;
}

.audiojs-default ol.audiojs-playlist li a,
.audiojs-default ol.audiojs-playlist li a:visited {
  color: #fff;
  text-decoration: none;
}

.audiojs-default ol.audiojs-playlist li a:hover {
  text-decoration: underline;
}

File

css/audio_js_default.css
View source
  1. .audiojs audio {
  2. left: -1px;
  3. position: absolute;
  4. }
  5. .audiojs-label {
  6. font-weight: bold;
  7. }
  8. .audiojs-default .audiojs {
  9. background: #404040;
  10. background-image: -moz-linear-gradient(center top,#444 0%,#555 50%,#444 51%,#444 100%);
  11. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(0.5,#555),color-stop(0.51,#444),color-stop(1,#444));
  12. font-family: monospace;
  13. font-size: 12px;
  14. height: 36px;
  15. overflow: hidden;
  16. width: 460px;
  17. }
  18. .audiojs-default .audiojs .play-pause {
  19. border-right: 1px solid #000;
  20. float: left;
  21. height: 40px;
  22. margin: 0;
  23. overflow: hidden;
  24. padding: 4px 6px;
  25. width: 25px;
  26. }
  27. .audiojs-default .audiojs p {
  28. cursor: pointer;
  29. display: none;
  30. height: 40px;
  31. margin: 0;
  32. width: 25px;
  33. }
  34. .audiojs-default .audiojs .play {
  35. display: block;
  36. }
  37. .audiojs-default .audiojs .scrubber {
  38. background: #5a5a5a;
  39. border-bottom: 0;
  40. border-left: 0;
  41. border-top: 1px solid #3f3f3f;
  42. float: left;
  43. height: 14px;
  44. margin: 10px;
  45. overflow: hidden;
  46. position: relative;
  47. width: 280px;
  48. }
  49. .audiojs-default .audiojs .progress {
  50. background: #ccc;
  51. background-image: -moz-linear-gradient(center top,#ccc 0%,#ddd 50%,#ccc 51%,#ccc 100%);
  52. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ccc),color-stop(0.5,#ddd),color-stop(0.51,#ccc),color-stop(1,#ccc));
  53. height: 14px;
  54. left: 0;
  55. position: absolute;
  56. top: 0;
  57. width: 0;
  58. z-index: 1;
  59. }
  60. .audiojs-default .audiojs .loaded {
  61. background: #000;
  62. background-image: -moz-linear-gradient(center top,#222 0%,#333 50%,#222 51%,#222 100%);
  63. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#222),color-stop(0.5,#333),color-stop(0.51,#222),color-stop(1,#222));
  64. height: 14px;
  65. left: 0;
  66. position: absolute;
  67. top: 0;
  68. width: 0;
  69. }
  70. .audiojs-default .audiojs .time {
  71. border-left: 1px solid #000;
  72. color: #ddd;
  73. float: left;
  74. height: 36px;
  75. line-height: 36px;
  76. margin: 0 0 0 6px;
  77. padding: 0 6px 0 12px;
  78. text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  79. }
  80. .audiojs-default .audiojs .time em {
  81. color: #f9f9f9;
  82. font-style: normal;
  83. padding: 0 2px 0 0;
  84. }
  85. .audiojs-default .audiojs .time strong {
  86. font-weight: 400;
  87. padding: 0 0 0 2px;
  88. }
  89. .audiojs-default .audiojs .error-message {
  90. color: #fff;
  91. display: none;
  92. float: left;
  93. height: 36px;
  94. line-height: 36px;
  95. margin: 0 10px;
  96. overflow: hidden;
  97. text-overflow: ellipsis;
  98. white-space: nowrap;
  99. width: 400px;
  100. -icab-text-overflow: ellipsis;
  101. -khtml-text-overflow: ellipsis;
  102. -moz-text-overflow: ellipsis;
  103. -o-text-overflow: ellipsis;
  104. -webkit-text-overflow: ellipsis;
  105. }
  106. .audiojs-default .audiojs .error-message a {
  107. border-bottom: 1px solid #999;
  108. color: #eee;
  109. padding-bottom: 1px;
  110. text-decoration: none;
  111. white-space: wrap;
  112. }
  113. .audiojs-default .audiojs .play {
  114. background: url(../images/player-graphics.gif) -2px -1px no-repeat;
  115. }
  116. .audiojs-default .audiojs .loading {
  117. background: url(../images/player-graphics.gif) -2px -31px no-repeat;
  118. }
  119. .audiojs-default .audiojs .error {
  120. background: url(../images/player-graphics.gif) -2px -61px no-repeat;
  121. }
  122. .audiojs-default .audiojs .pause {
  123. background: url(../images/player-graphics.gif) -2px -91px no-repeat;
  124. }
  125. .audiojs-default .playing .play,
  126. .audiojs-default .playing .loading,
  127. .audiojs-default .playing .error {
  128. display: none;
  129. }
  130. .audiojs-default .playing .pause {
  131. display: block;
  132. }
  133. .audiojs-default .loading .play,
  134. .audiojs-default .loading .pause,
  135. .audiojs-default .loading .error {
  136. display: none;
  137. }
  138. .audiojs-default .loading .loading {
  139. display: block;
  140. }
  141. .audiojs-default .error .time,
  142. .audiojs-default .error .play,
  143. .audiojs-default .error .pause,
  144. .audiojs-default .error .scrubber,
  145. .audiojs-default .error .loading {
  146. display: none;
  147. }
  148. .audiojs-default .error .error {
  149. display: block;
  150. }
  151. .audiojs-default .error .play-pause p {
  152. cursor: auto;
  153. }
  154. .audiojs-default .error .error-message {
  155. display: block;
  156. }
  157. /* Playlist */
  158. .audiojs-default ol.audiojs-playlist {
  159. background: #5a5a5a;
  160. border-top: 1px solid #e8e8e8;
  161. color: #e8e8e8;
  162. margin: 0;
  163. padding: 0;
  164. width: 460px;
  165. }
  166. .audiojs-default ol.audiojs-playlist li {
  167. border-bottom: 1px solid #e8e8e8;
  168. list-style-position: inside;
  169. padding: 6px 10px;
  170. }
  171. .audiojs-default ol.audiojs-playlist li.last {
  172. border-bottom: none;
  173. }
  174. .audiojs-default ol.audiojs-playlist li.playing {
  175. background: #4b4b4b;
  176. }
  177. .audiojs-default ol.audiojs-playlist li a,
  178. .audiojs-default ol.audiojs-playlist li a:visited {
  179. color: #fff;
  180. text-decoration: none;
  181. }
  182. .audiojs-default ol.audiojs-playlist li a:hover {
  183. text-decoration: underline;
  184. }