mediagoblin/static/css/audio.css

   1 .audio-spectrogram {
   2     position: relative;
   3 }
   4 .playhead {
   5     position: absolute;
   6     top: 0;
   7     left: 0;
   8     background: rgba(134, 212, 177, 0.3);
   9     border-right: thin solid #ffaa00;
  10     height: 100%;
  11     -webkit-transition: width .1s ease-out;
  12     -moz-transition: width .1s ease-out;
  13     transition: width .1s ease-out;
  14 }
  15 .audio-control-play-pause {
  16     position: absolute;
  17     bottom: 0;
  18     left: 5px;
  19     cursor: pointer;
  20     /* background: rgba(0, 0, 0, 0.7); */
  21     font-size: 40px;
  22     width: 50px;
  23     text-shadow: 0 0 10px black;
  24 }
  25     .audio-control-play-pause.playing {
  26         color: #b71500;
  27         letter-spacing: -17px;
  28         margin-left: -7px;
  29     }
  30     .audio-control-play-pause.paused {
  31         /* Warning: this means the the play button shows! */
  32         color: rgb(134, 212, 177);
  33     }
  34
  35 .buffered-indicators {
  36     position: absolute;
  37     bottom: 0;
  38     left: 0;
  39     height: 2px;
  40 }
  41     .buffered-indicators div {
  42         position: absolute;
  43         height: 2px;
  44         left: 0;
  45         background: rgba(134, 177, 212, 1);
  46
  47         -webkit-transition: left 1s ease-out;
  48         -moz-transition: left 1s ease-out;
  49         transition: left 1s ease-out;
  50
  51         -webkit-transition: width 1s ease-out;
  52         -moz-transition: width 1s ease-out;
  53         transition: width 1s ease-out;
  54
  55         cursor: pointer;
  56     }
  57
  58 .seekbar {
  59     position: absolute;
  60     top: 0;
  61     left: 0;
  62     width: 100%;
  63     height: 100%;
  64 }
  65
  66 .audio-currentTime {
  67     position: absolute;
  68     bottom: 0;
  69     right: 0;
  70     background: rgba(0, 0, 0, 0.7);
  71 }
  72
  73 .audio-volume {
  74     position: absolute;
  75     left: 50px;
  76     bottom: 10px;
  77     opacity: 0.3;
  78     -moz-transition: opacity .1s ease-in-out;
  79     -webkit-transition: opacity .1s ease-in-out;
  80     transition: opacity .1s ease-in-out;
  81 }
  82     .audio-spectrogram:hover .audio-volume {
  83         opacity: 0.7;
  84     }