mediagoblin/static/css/audio.css

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