1 #audio-player{ |
1 .player-component{ |
|
2 text-align: center; |
|
3 } |
|
4 |
|
5 #audio_player { |
|
6 display: inline-block; |
|
7 width: 80px; |
|
8 height: 80px; |
|
9 position: relative; |
|
10 padding: 8px; |
|
11 margin: 10px auto; |
|
12 background: #fff; |
|
13 border-radius: 88px; |
|
14 } |
|
15 #audio_player .background { |
|
16 width: 60px; |
|
17 height: 60px; |
|
18 border: solid 10px #e5e5e5; |
|
19 background: #fff; |
|
20 border-radius: 80px; |
|
21 } |
|
22 #audio_player .btn { |
|
23 cursor: pointer; |
|
24 } |
|
25 #audio_player .btn_play { |
2 display: block; |
26 display: block; |
3 margin: 10px auto; |
27 width: 32px; |
|
28 height: 32px; |
|
29 position: absolute; |
|
30 top: 50%; |
|
31 left: 50%; |
|
32 margin-top: -16px; |
|
33 margin-left: -16px; |
|
34 text-indent: -900em; |
|
35 z-index: 10; |
|
36 background: url(images/button_play.png) 10px no-repeat; |
|
37 background-size: 21px 31px; |
4 } |
38 } |
|
39 /* pause */ |
|
40 #audio_player .btn_play.playing { |
|
41 background: url(images/button_pause.png) center no-repeat; |
|
42 background-size: 28px 28px; |
|
43 } |
|
44 #audio_player .progress { |
|
45 position: absolute; |
|
46 width: 80px; |
|
47 height: 80px; |
|
48 top: 8px; |
|
49 left: 8px; |
|
50 } |
|
51 #audio_player .progress .slice { |
|
52 position: absolute; |
|
53 width: 80px; |
|
54 height: 80px; |
|
55 clip: rect(0px,80px,80px,40px); |
|
56 } |
|
57 #audio_player .progress .slice.gt50 { |
|
58 clip: rect(auto, auto, auto, auto); |
|
59 } |
|
60 #audio_player .progress .slice .pie { |
|
61 border: 10px solid #276f84; |
|
62 position: absolute; |
|
63 width: 60px; |
|
64 height: 60px; |
|
65 clip: rect(0,40px,80px,0); |
|
66 -moz-border-radius: 80px; |
|
67 -webkit-border-radius: 80px; |
|
68 border-radius: 80px; |
|
69 } |
|
70 #audio_player .progress .slice .pie.fill { |
|
71 -moz-transform: rotate(180deg) !important; |
|
72 -webkit-transform: rotate(180deg) !important; |
|
73 -o-transform: rotate(180deg) !important; |
|
74 transform: rotate(180deg) !important; |
|
75 } |
|
76 |
|
77 .audio-controls { |
|
78 color: #2a768c; |
|
79 cursor: pointer; |
|
80 display: inline-block; |
|
81 font-size: 30px; |
|
82 margin: 43px 10px; |
|
83 vertical-align: top; |
|
84 } |
|
85 |
|
86 .duration{ |
|
87 margin: -5px auto; |
|
88 text-align: center; |
|
89 } |
|
90 |
|
91 .audio-wrapper{ |
|
92 display: inline-block; |
|
93 } |