Commit | Line | Data |
---|---|---|
a9d84d4c JW |
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; | |
97e40b52 | 13 | transition: width .1s ease-out; |
a9d84d4c JW |
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; | |
97e40b52 JW |
27 | letter-spacing: -17px; |
28 | margin-left: -7px; | |
a9d84d4c JW |
29 | } |
30 | .audio-control-play-pause.paused { | |
97e40b52 | 31 | /* Warning: this means the the play button shows! */ |
a9d84d4c JW |
32 | color: rgb(134, 212, 177); |
33 | } | |
97e40b52 JW |
34 | |
35 | .buffered-indicators { | |
a9d84d4c JW |
36 | position: absolute; |
37 | bottom: 0; | |
38 | left: 0; | |
39 | height: 2px; | |
a9d84d4c | 40 | } |
97e40b52 JW |
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 | ||
a9d84d4c JW |
58 | .seekbar { |
59 | position: absolute; | |
60 | top: 0; | |
61 | left: 0; | |
62 | width: 100%; | |
63 | height: 100%; | |
64 | } | |
97e40b52 | 65 | |
a9d84d4c JW |
66 | .audio-currentTime { |
67 | position: absolute; | |
68 | bottom: 0; | |
69 | right: 0; | |
70 | background: rgba(0, 0, 0, 0.7); | |
71 | } | |
97e40b52 JW |
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 { | |
196a5181 | 83 | opacity: 0.7; |
97e40b52 | 84 | } |