You are here

Home » API reference » AudioField 8

audiofield.audiojs.css in AudioField 8 

/*
 * Audio.js requires custom styling
 */
.audiofield-audiojs audio {
  position: absolute;
  left: -1px;
}
.audiofield-audiojs {
  width: 460px;
  height: 36px;
  background: #404040;
  overflow: hidden;
  font-family: monospace;
  font-size: 12px;
  -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}
.audiofield-audiojs .play-pauseZ {
  width: 40px;
  height: 40px;
  padding: 4px 6px;
  margin: 0px;
  float: left;
  overflow: hidden;
  border-right: 1px solid #000;
}
.audiofield-audiojs p {
  display: none;
  width: 25px;
  height: 40px;
  margin: 0px;
  cursor: pointer;
}
.audiofield-audiojs .playZ {
  display: block;
}
.audiofield-audiojs .scrubberZ {
  position: relative;
  float: left;
  width: 280px;
  background: #5a5a5a;
  height: 14px;
  margin: 10px;
  border-left: 0px;
  border-bottom: 0px;
  overflow: hidden;
}
.audiofield-audiojs .progressZ {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 14px;
  width: 0px;
  background: #ccc;
  z-index: 1;
}
.audiofield-audiojs .loadedZ {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 14px;
  width: 0px;
  background: #000;
}
.audiofield-audiojs .timeZ {
  float: left;
  height: 36px;
  line-height: 36px;
  margin: 0px 0px 0px 6px;
  padding: 0px 6px 0px 12px;
  border-left: 1px solid #000;
  color: #ddd;
  text-shadow: 1px 1px 0px rgba(125, 0, 0, 0.5);
}
.audiofield-audiojs .timeZ em {
  padding: 0px 2px 0px 0px;
  color: #f9f9f9;
  font-style: normal;
}
.audiofield-audiojs .timeZ strong {
  padding: 0px 0px 0px 2px;
  font-weight: normal;
}
.audiofield-audiojs .error-messageZ {
  float: left;
  display: none;
  margin: 0px 10px;
  height: 36px;
  width: 400px;
  overflow: hidden;
  line-height: 36px;
  white-space: nowrap;
  color: #fff;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
.audiofield-audiojs .error-messageZ a {
  color: #eee;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid #999;
  white-space: normal;
}

.audiofield-audiojs .playZ {
  background: url('/libraries/audiojs/player-graphics.gif') -2px -1px no-repeat;
}
.audiofield-audiojs .loadingZ {
  background: url('/libraries/audiojs/player-graphics.gif') -2px -31px no-repeat;
}
.audiofield-audiojs .errorZ {
  background: url('/libraries/audiojs/player-graphics.gif') -2px -61px no-repeat;
}
.audiofield-audiojs .pauseZ {
  background: url('/libraries/audiojs/player-graphics.gif') -2px -91px no-repeat;
}

.audiofield-audiojs.playingZ .playZ,
.audiofield-audiojs.playingZ .loadingZ,
.audiofield-audiojs.playingZ .errorZ {
  display: none;
}
.audiofield-audiojs.playingZ .pauseZ {
  display: block;
}

.audiofield-audiojs.loadingZ .playZ,
.audiofield-audiojs.loadingZ .pauseZ,
.audiofield-audiojs.loadingZ .errorZ {
  display: none;
}
.audiofield-audiojs.loadingZ .loadingZ {
  display: block;
}

.audiofield-audiojs.errorZ .timeZ,
.audiofield-audiojs.errorZ .playZ,
.audiofield-audiojs.errorZ .pauseZ,
.audiofield-audiojs.errorZ .scrubberZ,
.audiofield-audiojs.errorZ .loadingZ {
  display: none;
}
.audiofield-audiojs.errorZ .errorZ {
  display: block;
}
.audiofield-audiojs.errorZ .play-pauseZ p {
  cursor: auto;
}
.audiofield-audiojs.errorZ .error-messageZ {
  display: block;
}

.audiofield-audiojs-frame ol {
  padding: 0px;
  margin: 0px;
  list-style: decimal-leading-zero inside;
  color: #ccc;
  width: 460px;
  border-top: 1px solid #ccc;
  font-size: 0.9em;
}
.audiofield-audiojs-frame ol li {
  position: relative;
  margin: 0px;
  padding: 9px 2px 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.audiofield-audiojs-frame ol li a {
  display: block;
  text-indent: -3.3ex;
  padding: 0px 0px 0px 20px;
}
.audiofield-audiojs-frame li.playing {
  color: #aaa;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
.audiofield-audiojs-frame li.playing a {
  color: #000;
}
.audiofield-audiojs-frame li.playing:before {
  content: '♬';
  width: 14px;
  height: 14px;
  padding: 3px;
  line-height: 14px;
  margin: 0px;
  position: absolute;
  left: -24px;
  top: 9px;
  color: #000;
  font-size: 13px;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}

File

css/audiofield.audiojs.css
View source 
  1. /*

  2.  * Audio.js requires custom styling

  3.  */

  4. .audiofield-audiojs audio {

  5.   position: absolute;

  6.   left: -1px;

  7. }

  8. .audiofield-audiojs {

  9.   width: 460px;

  10.   height: 36px;

  11.   background: #404040;

  12.   overflow: hidden;

  13.   font-family: monospace;

  14.   font-size: 12px;

  15.   -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);

  16.   -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);

  17.   -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);

  18.   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);

  19. }

  20. .audiofield-audiojs .play-pauseZ {

  21.   width: 40px;

  22.   height: 40px;

  23.   padding: 4px 6px;

  24.   margin: 0px;

  25.   float: left;

  26.   overflow: hidden;

  27.   border-right: 1px solid #000;

  28. }

  29. .audiofield-audiojs p {

  30.   display: none;

  31.   width: 25px;

  32.   height: 40px;

  33.   margin: 0px;

  34.   cursor: pointer;

  35. }

  36. .audiofield-audiojs .playZ {

  37.   display: block;

  38. }

  39. .audiofield-audiojs .scrubberZ {

  40.   position: relative;

  41.   float: left;

  42.   width: 280px;

  43.   background: #5a5a5a;

  44.   height: 14px;

  45.   margin: 10px;

  46.   border-left: 0px;

  47.   border-bottom: 0px;

  48.   overflow: hidden;

  49. }

  50. .audiofield-audiojs .progressZ {

  51.   position: absolute;

  52.   top: 0px;

  53.   left: 0px;

  54.   height: 14px;

  55.   width: 0px;

  56.   background: #ccc;

  57.   z-index: 1;

  58. }

  59. .audiofield-audiojs .loadedZ {

  60.   position: absolute;

  61.   top: 0px;

  62.   left: 0px;

  63.   height: 14px;

  64.   width: 0px;

  65.   background: #000;

  66. }

  67. .audiofield-audiojs .timeZ {

  68.   float: left;

  69.   height: 36px;

  70.   line-height: 36px;

  71.   margin: 0px 0px 0px 6px;

  72.   padding: 0px 6px 0px 12px;

  73.   border-left: 1px solid #000;

  74.   color: #ddd;

  75.   text-shadow: 1px 1px 0px rgba(125, 0, 0, 0.5);

  76. }

  77. .audiofield-audiojs .timeZ em {

  78.   padding: 0px 2px 0px 0px;

  79.   color: #f9f9f9;

  80.   font-style: normal;

  81. }

  82. .audiofield-audiojs .timeZ strong {

  83.   padding: 0px 0px 0px 2px;

  84.   font-weight: normal;

  85. }

  86. .audiofield-audiojs .error-messageZ {

  87.   float: left;

  88.   display: none;

  89.   margin: 0px 10px;

  90.   height: 36px;

  91.   width: 400px;

  92.   overflow: hidden;

  93.   line-height: 36px;

  94.   white-space: nowrap;

  95.   color: #fff;

  96.   text-overflow: ellipsis;

  97.   -o-text-overflow: ellipsis;

  98.   -icab-text-overflow: ellipsis;

  99.   -khtml-text-overflow: ellipsis;

  100.   -moz-text-overflow: ellipsis;

  101.   -webkit-text-overflow: ellipsis;

  102. }

  103. .audiofield-audiojs .error-messageZ a {

  104.   color: #eee;

  105.   text-decoration: none;

  106.   padding-bottom: 1px;

  107.   border-bottom: 1px solid #999;

  108.   white-space: normal;

  109. }

  110. 

  111. .audiofield-audiojs .playZ {

  112.   background: url('/libraries/audiojs/player-graphics.gif') -2px -1px no-repeat;

  113. }

  114. .audiofield-audiojs .loadingZ {

  115.   background: url('/libraries/audiojs/player-graphics.gif') -2px -31px no-repeat;

  116. }

  117. .audiofield-audiojs .errorZ {

  118.   background: url('/libraries/audiojs/player-graphics.gif') -2px -61px no-repeat;

  119. }

  120. .audiofield-audiojs .pauseZ {

  121.   background: url('/libraries/audiojs/player-graphics.gif') -2px -91px no-repeat;

  122. }

  123. 

  124. .audiofield-audiojs.playingZ .playZ,

  125. .audiofield-audiojs.playingZ .loadingZ,

  126. .audiofield-audiojs.playingZ .errorZ {

  127.   display: none;

  128. }

  129. .audiofield-audiojs.playingZ .pauseZ {

  130.   display: block;

  131. }

  132. 

  133. .audiofield-audiojs.loadingZ .playZ,

  134. .audiofield-audiojs.loadingZ .pauseZ,

  135. .audiofield-audiojs.loadingZ .errorZ {

  136.   display: none;

  137. }

  138. .audiofield-audiojs.loadingZ .loadingZ {

  139.   display: block;

  140. }

  141. 

  142. .audiofield-audiojs.errorZ .timeZ,

  143. .audiofield-audiojs.errorZ .playZ,

  144. .audiofield-audiojs.errorZ .pauseZ,

  145. .audiofield-audiojs.errorZ .scrubberZ,

  146. .audiofield-audiojs.errorZ .loadingZ {

  147.   display: none;

  148. }

  149. .audiofield-audiojs.errorZ .errorZ {

  150.   display: block;

  151. }

  152. .audiofield-audiojs.errorZ .play-pauseZ p {

  153.   cursor: auto;

  154. }

  155. .audiofield-audiojs.errorZ .error-messageZ {

  156.   display: block;

  157. }

  158. 

  159. .audiofield-audiojs-frame ol {

  160.   padding: 0px;

  161.   margin: 0px;

  162.   list-style: decimal-leading-zero inside;

  163.   color: #ccc;

  164.   width: 460px;

  165.   border-top: 1px solid #ccc;

  166.   font-size: 0.9em;

  167. }

  168. .audiofield-audiojs-frame ol li {

  169.   position: relative;

  170.   margin: 0px;

  171.   padding: 9px 2px 10px;

  172.   border-bottom: 1px solid #ccc;

  173.   cursor: pointer;

  174. }

  175. .audiofield-audiojs-frame ol li a {

  176.   display: block;

  177.   text-indent: -3.3ex;

  178.   padding: 0px 0px 0px 20px;

  179. }

  180. .audiofield-audiojs-frame li.playing {

  181.   color: #aaa;

  182.   text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);

  183. }

  184. .audiofield-audiojs-frame li.playing a {

  185.   color: #000;

  186. }

  187. .audiofield-audiojs-frame li.playing:before {

  188.   content: '♬';

  189.   width: 14px;

  190.   height: 14px;

  191.   padding: 3px;

  192.   line-height: 14px;

  193.   margin: 0px;

  194.   position: absolute;

  195.   left: -24px;

  196.   top: 9px;

  197.   color: #000;

  198.   font-size: 13px;

  199.   text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);

  200. }