1 | /*
|
---|
2 |
|
---|
3 | SoundManager 2: "page as playlist" example
|
---|
4 | ------------------------------------------
|
---|
5 | http://schillmania.com/projects/soundmanager2/
|
---|
6 |
|
---|
7 | */
|
---|
8 |
|
---|
9 | li.rounded {
|
---|
10 | border-radius: 15px;
|
---|
11 | }
|
---|
12 |
|
---|
13 |
|
---|
14 | div.divbuttonon {
|
---|
15 | background-color: #008000;
|
---|
16 | color: white;
|
---|
17 | }
|
---|
18 |
|
---|
19 | div.divbuttonoff {
|
---|
20 | background-color: white;
|
---|
21 | color: black;
|
---|
22 | }
|
---|
23 |
|
---|
24 | span.spanbuttonon {
|
---|
25 | background-color: #008000;
|
---|
26 | color: white;
|
---|
27 | }
|
---|
28 |
|
---|
29 | span.spanbuttonoff {
|
---|
30 | background-color: white;
|
---|
31 | color: black;
|
---|
32 | }
|
---|
33 |
|
---|
34 |
|
---|
35 | .spectrum-container {
|
---|
36 | display:none;
|
---|
37 | }
|
---|
38 |
|
---|
39 | ul.use-spectrum li.sm2_playing .spectrum-container {
|
---|
40 | position:absolute;
|
---|
41 | left:0px;
|
---|
42 | top:0px;
|
---|
43 | margin-left:-266px;
|
---|
44 | margin-top:-1px;
|
---|
45 | display:block;
|
---|
46 | background-color:#88bb55;
|
---|
47 | border:1px solid #ccff99;
|
---|
48 | -moz-border-radius:4px;
|
---|
49 | -webkit-border-radius:4px;
|
---|
50 | border-radius:4px;
|
---|
51 | }
|
---|
52 |
|
---|
53 | ul.use-spectrum .spectrum-box {
|
---|
54 | position:relative;
|
---|
55 | width:255px;
|
---|
56 | font-size:1em;
|
---|
57 | padding:2px 0px;
|
---|
58 | height:1.2em;
|
---|
59 | overflow:hidden;
|
---|
60 | }
|
---|
61 |
|
---|
62 | ul.use-spectrum .spectrum-box .spectrum {
|
---|
63 | position:absolute;
|
---|
64 | left:0px;
|
---|
65 | top:-2px;
|
---|
66 | margin-top:20px;
|
---|
67 | display:block;
|
---|
68 | font-size:1px;
|
---|
69 | width:1px;
|
---|
70 | height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
|
---|
71 | overflow:hidden;
|
---|
72 | background-color:#fff;
|
---|
73 | }
|
---|
74 |
|
---|
75 | ul.playlist {
|
---|
76 | list-style-type:none;
|
---|
77 | margin:0px;
|
---|
78 | padding:0px;
|
---|
79 |
|
---|
80 | }
|
---|
81 |
|
---|
82 | ul.playlist li {
|
---|
83 | /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
|
---|
84 | position:relative;
|
---|
85 | display:block;
|
---|
86 | width:auto;
|
---|
87 | font-size:1.2em;
|
---|
88 | color:#666;
|
---|
89 | padding:0.25em 0.5em 0.25em 0.5em;
|
---|
90 | border:none;
|
---|
91 | letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
|
---|
92 | background-color:#007900;
|
---|
93 | -webkit-transition-property: hover;
|
---|
94 | -webkit-transition: background-color 0.15s ease-in-out;
|
---|
95 | -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
|
---|
96 | -o-transition-property: background-color; /* opera 10.5 */
|
---|
97 | -o-transition-duration: 0.15s;
|
---|
98 |
|
---|
99 | }
|
---|
100 |
|
---|
101 | ul.playlist li a {
|
---|
102 | display:block;
|
---|
103 | text-decoration:none;
|
---|
104 | font-weight:normal;
|
---|
105 | color:#fff;
|
---|
106 | font-size:100%;
|
---|
107 | outline:none;
|
---|
108 | position:relative;
|
---|
109 | z-index:2;
|
---|
110 | }
|
---|
111 |
|
---|
112 | ul.playlist li.sm2_playing,
|
---|
113 | ul.playlist li.sm2_paused,
|
---|
114 | ul.playlist li.sm2_playing a {
|
---|
115 | color:#fff;
|
---|
116 | border-radius:3px;
|
---|
117 | -webkit-border-radius:3px;
|
---|
118 | -moz-border-radius:3px;
|
---|
119 | }
|
---|
120 |
|
---|
121 | ul.playlist li:hover {
|
---|
122 | background-color:#00aa00;
|
---|
123 | }
|
---|
124 |
|
---|
125 | ul.playlist li:hover a {
|
---|
126 | color:#fff;
|
---|
127 | }
|
---|
128 |
|
---|
129 | ul.playlist li.sm2_playing,
|
---|
130 | ul.playlist li.sm2_playing:hover {
|
---|
131 | background-color:#99cc66;
|
---|
132 | }
|
---|
133 |
|
---|
134 | ul.playlist li.sm2_paused {
|
---|
135 | background-color:#a55;
|
---|
136 | }
|
---|
137 |
|
---|
138 | ul.playlist li.sm2_playing:hover a,
|
---|
139 | ul.playlist li.sm2_paused a {
|
---|
140 | color:#fff;
|
---|
141 | }
|
---|
142 |
|
---|
143 | ul.playlist li .controls {
|
---|
144 | display:none;
|
---|
145 | }
|
---|
146 |
|
---|
147 | ul.playlist li .peak,
|
---|
148 | ul.playlist.use-peak li .peak {
|
---|
149 | display:none;
|
---|
150 | position:absolute;
|
---|
151 | top:0.55em;
|
---|
152 | right:0.5em;
|
---|
153 | }
|
---|
154 |
|
---|
155 | ul.playlist li.sm2_playing .controls,
|
---|
156 | ul.playlist li.sm2_paused .controls {
|
---|
157 | position:relative;
|
---|
158 | display:block;
|
---|
159 | }
|
---|
160 |
|
---|
161 | ul.playlist.use-peak li.sm2_playing .peak,
|
---|
162 | ul.playlist.use-peak li.sm2_paused .peak {
|
---|
163 | display:inline;
|
---|
164 | display:inline-block;
|
---|
165 | }
|
---|
166 |
|
---|
167 | ul.playlist.use-peak li .peak {
|
---|
168 | display:none; /* IE 7 */
|
---|
169 | }
|
---|
170 |
|
---|
171 | ul.playlist li.sm2_paused .controls {
|
---|
172 | background-color:#a88;
|
---|
173 | }
|
---|
174 |
|
---|
175 | ul.playlist li:hover .controls .statusbar {
|
---|
176 | position:relative;
|
---|
177 | cursor:ew-resize;
|
---|
178 | cursor:-moz-grab;
|
---|
179 | cursor:grab;
|
---|
180 | }
|
---|
181 |
|
---|
182 | ul.playlist li.sm2_paused .controls .statusbar {
|
---|
183 | background-color:#fcc;
|
---|
184 | }
|
---|
185 |
|
---|
186 | ul.playlist li .controls {
|
---|
187 | position:relative;
|
---|
188 | margin-top:0.25em;
|
---|
189 | margin-bottom:0.25em;
|
---|
190 | background-color:#ccff99;
|
---|
191 | }
|
---|
192 |
|
---|
193 | ul.playlist li .controls .statusbar {
|
---|
194 | position:relative;
|
---|
195 | height:0.5em;
|
---|
196 | background-color:#ddffcc;
|
---|
197 | border:2px solid #fff;
|
---|
198 | border-radius:2px;
|
---|
199 | -moz-border-radius:2px;
|
---|
200 | -webkit-border-radius:2px;
|
---|
201 | overflow:hidden;
|
---|
202 | cursor:-moz-grab;
|
---|
203 | cursor:grab;
|
---|
204 | }
|
---|
205 |
|
---|
206 | ul.playlist li .controls.dragging .statusbar {
|
---|
207 | cursor:-moz-grabbing;
|
---|
208 | cursor:grabbing;
|
---|
209 | }
|
---|
210 |
|
---|
211 | ul.playlist li .controls .statusbar .position,
|
---|
212 | ul.playlist li .controls .statusbar .loading,
|
---|
213 | ul.playlist li .controls .statusbar .annotation {
|
---|
214 | position:absolute;
|
---|
215 | left:0px;
|
---|
216 | top:0px;
|
---|
217 | height:0.5em;
|
---|
218 | }
|
---|
219 |
|
---|
220 | ul.playlist li .controls .statusbar .position {
|
---|
221 | background-color:#669933;
|
---|
222 | border-right:3px solid #669933;
|
---|
223 | border-radius:3px;
|
---|
224 | -moz-border-radius:3px;
|
---|
225 | -webkit-border-radius:3px;
|
---|
226 | }
|
---|
227 |
|
---|
228 | ul.playlist li.sm2_paused .controls .statusbar .position {
|
---|
229 | background-color:#a88;
|
---|
230 | border-color:#a88;
|
---|
231 | }
|
---|
232 |
|
---|
233 | ul.playlist li .controls .statusbar .loading {
|
---|
234 | background-color:#eee;
|
---|
235 | }
|
---|
236 |
|
---|
237 | ul.playlist li .controls .statusbar .position,
|
---|
238 | ul.playlist li .controls .statusbar .loading {
|
---|
239 | width:0px;
|
---|
240 | }
|
---|
241 |
|
---|
242 | ul.playlist li.sm2_playing a.sm2_link,
|
---|
243 | ul.playlist li.sm2_paused a.sm2_link {
|
---|
244 | margin-right:4.5em; /* room for timing stuff */
|
---|
245 | }
|
---|
246 |
|
---|
247 | ul.playlist li .timing {
|
---|
248 | position:absolute;
|
---|
249 | display:none;
|
---|
250 | text-align:right;
|
---|
251 | right:1em;
|
---|
252 | top:1em;
|
---|
253 | width:auto;
|
---|
254 | height:1em;
|
---|
255 | padding:3px 5px;
|
---|
256 | background-color:#88bb55;
|
---|
257 | border:1px solid #ccff99;
|
---|
258 | -moz-border-radius:4px;
|
---|
259 | -khtml-border-radius:4px;
|
---|
260 | border-radius:4px;
|
---|
261 | letter-spacing:0px;
|
---|
262 | font:44% monaco,"VT-100","lucida console",courier,system;
|
---|
263 | line-height:1em;
|
---|
264 | vertical-align:middle;
|
---|
265 | }
|
---|
266 |
|
---|
267 | ul.playlist.use-peak li .timing {
|
---|
268 | right:4.25em;
|
---|
269 | }
|
---|
270 |
|
---|
271 | ul.playlist li:hover .timing {
|
---|
272 | z-index:2;
|
---|
273 | }
|
---|
274 |
|
---|
275 | ul.playlist li .timing div.sm2_timing {
|
---|
276 | margin:0px;
|
---|
277 | padding:0px;
|
---|
278 | margin-top:-1em;
|
---|
279 | }
|
---|
280 |
|
---|
281 | ul.playlist li.sm2_playing .timing,
|
---|
282 | ul.playlist li.sm2_paused .timing {
|
---|
283 | display:block;
|
---|
284 | }
|
---|
285 |
|
---|
286 | ul.playlist li.sm2_paused .timing .sm2_position {
|
---|
287 | text-decoration:blink; /* hee hee. first actual appropriate use? :D */
|
---|
288 | }
|
---|
289 |
|
---|
290 | ul.playlist li.sm2_paused .timing,
|
---|
291 | ul.playlist.use-peak li.sm2_paused .peak {
|
---|
292 | background-color:#caa;
|
---|
293 | border-color:#fcc;
|
---|
294 | }
|
---|
295 |
|
---|
296 | /* peak data */
|
---|
297 |
|
---|
298 | /* ul.playlist ... */
|
---|
299 |
|
---|
300 | ul.playlist.use-peak li .peak {
|
---|
301 | display:none;
|
---|
302 | zoom:1;
|
---|
303 | border:1px solid #ccff99;
|
---|
304 | padding:2px;
|
---|
305 | height:0.55em;
|
---|
306 | -moz-border-radius:4px;
|
---|
307 | -khtml-border-radius:4px;
|
---|
308 | border-radius:4px;
|
---|
309 | background-color:#88bb55;
|
---|
310 | width:0.8em;
|
---|
311 | height:0.55em;
|
---|
312 | margin-top:-3px;
|
---|
313 | }
|
---|
314 |
|
---|
315 | ul.playlist.use-peak li .peak-box {
|
---|
316 | position:relative;
|
---|
317 | width:100%;
|
---|
318 | height:0.55em;
|
---|
319 | overflow:hidden;
|
---|
320 | }
|
---|
321 |
|
---|
322 | ul.playlist li .peak .l,
|
---|
323 | ul.playlist li .peak .r {
|
---|
324 | position:absolute;
|
---|
325 | left:0px;
|
---|
326 | top:0px;
|
---|
327 | width:7px;
|
---|
328 | height:50px;
|
---|
329 | background:#fff;
|
---|
330 | border:1px solid #fff;
|
---|
331 | -moz-border-radius:1px;
|
---|
332 | -khtml-border-radius:1px;
|
---|
333 | margin-top:1em;
|
---|
334 | }
|
---|
335 |
|
---|
336 | ul.playlist li .peak .l {
|
---|
337 | margin-right:1px;
|
---|
338 | }
|
---|
339 |
|
---|
340 | ul.playlist li .peak .r {
|
---|
341 | left:10px;
|
---|
342 | }
|
---|
343 |
|
---|
344 | #control-template {
|
---|
345 | display:none;
|
---|
346 | } |
---|