-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathstyles.css
528 lines (428 loc) · 18.8 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
/* Set the body defaults */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color: #2b3a42;
}
html, body {
}
body {
margin:0 auto
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display:block
}
a {
background:0 0
}
a:active, a:hover {
outline:0
}
b, strong {
font-weight:700
}
img {
border:0
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box
}
body {
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: helvetica neue, Helvetica, sans-serif;
font-size: 15px;
line-height: 24px;
color: #555;
background-color: #2b3a42;
z-index:1
}
a {
color: #5b437a;
text-decoration: none;
-webkit-tap-highlight-color:transparent
}
a:active {
color:#5b437a
}
/* Player Styles */
div#amplitude-player{
position: relative;
max-width: 400px;
margin: auto;
padding: 0px 10px 0px 10px;
}
div#amplitude-left div#player-left-bottom div#control-container{
height: 120px;
}
div#head{
height: 50px;
cursor: pointer;
background: #2b3a42;
background-repeat: no-repeat;
margin: 0px auto 40px auto;
}
div#logo{
height: 57px;
width: 135px;
cursor: pointer;
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 90 38' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg id='surface1'%3E%3Cg transform='matrix(1 0 0 1 11.538 28.3271)'%3E%3Cg id='glyph0-1'%3E%3Cpath d='M15.766 0L12.766 -10.531L9.766 0L5 0L-0.344 -18.766L4.406 -18.766L7.625 -5.891L7.734 -5.891L11.141 -18.766L14.375 -18.766L17.797 -5.891L17.906 -5.891L21.109 -18.766L25.844 -18.766L20.5 0L15.766 0Z' style='fill:%23bdd4de%3Bfill-rule:nonzero%3B'/%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1 0 0 1 37.025 28.3271)'%3E%3Cg id='glyph0-2'%3E%3Cpath d='M0.516 -9.391C0.516 -12.109 1.441 -14.406 3.297 -16.281C5.148 -18.164 7.379 -19.109 9.984 -19.109C12.609 -19.109 14.836 -18.172 16.672 -16.297C18.504 -14.422 19.422 -12.117 19.422 -9.391C19.422 -6.648 18.52 -4.344 16.719 -2.469C14.914 -0.594 12.672 0.344 9.984 0.344C7.242 0.344 4.977 -0.582 3.188 -2.438C1.406 -4.301 0.516 -6.617 0.516 -9.391ZM5.141 -9.391C5.141 -8.41 5.289 -7.516 5.594 -6.703C5.895 -5.891 6.426 -5.203 7.188 -4.641C7.945 -4.078 8.879 -3.797 9.984 -3.797C11.578 -3.797 12.781 -4.344 13.594 -5.438C14.406 -6.531 14.813 -7.848 14.813 -9.391C14.813 -10.922 14.395 -12.234 13.563 -13.328C12.738 -14.43 11.547 -14.984 9.984 -14.984C8.441 -14.984 7.25 -14.43 6.406 -13.328C5.563 -12.234 5.141 -10.922 5.141 -9.391Z' style='fill:%23bdd4de%3Bfill-rule:nonzero%3B'/%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1 0 0 1 56.9644 28.3271)'%3E%3Cg id='glyph0-3'%3E%3Cpath d='M16.875 0L16 -11.125L15.875 -11.125L12.031 -0.109L9.484 -0.109L5.641 -11.125L5.531 -11.125L4.641 0L0.359 0L2.047 -18.766L6.594 -18.766L10.766 -7.938L14.922 -18.766L19.469 -18.766L21.156 0L16.875 0Z' style='fill:%23bdd4de%3Bfill-rule:nonzero%3B'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M46.887 9.063C46.242 9.063 45.602 9.125 44.969 9.254C44.332 9.379 43.719 9.566 43.121 9.813C42.523 10.059 41.957 10.363 41.418 10.723C40.883 11.082 40.383 11.488 39.926 11.945C39.469 12.402 39.063 12.902 38.703 13.438C38.344 13.977 38.039 14.543 37.793 15.141C37.547 15.738 37.359 16.352 37.234 16.988C37.105 17.621 37.043 18.262 37.043 18.906C37.043 19.555 37.105 20.195 37.234 20.828C37.359 21.461 37.547 22.078 37.793 22.676C38.039 23.273 38.344 23.84 38.703 24.375C39.063 24.914 39.469 25.41 39.926 25.867C40.383 26.324 40.883 26.734 41.418 27.094C41.957 27.453 42.523 27.754 43.121 28.004C43.719 28.25 44.332 28.438 44.969 28.563C45.602 28.688 46.242 28.75 46.887 28.75C47.535 28.75 48.172 28.688 48.809 28.563C49.441 28.438 50.059 28.25 50.656 28.004C51.25 27.754 51.82 27.453 52.355 27.094C52.895 26.734 53.391 26.324 53.848 25.867C54.305 25.41 54.715 24.914 55.07 24.375C55.43 23.84 55.734 23.273 55.98 22.676C56.23 22.078 56.414 21.461 56.543 20.828C56.668 20.195 56.73 19.555 56.73 18.906C56.73 18.262 56.668 17.621 56.543 16.988C56.414 16.352 56.23 15.738 55.98 15.141C55.734 14.543 55.43 13.977 55.07 13.438C54.715 12.902 54.305 12.402 53.848 11.945C53.391 11.488 52.895 11.082 52.355 10.723C51.82 10.363 51.25 10.059 50.656 9.813C50.059 9.566 49.441 9.379 48.809 9.254C48.172 9.125 47.535 9.063 46.887 9.063Z' style='fill:%23bdd4de%3Bfill-rule:nonzero%3B'/%3E%3Cpath d='M36.211 28.098L38.414 21.457L43.063 26.684L36.211 28.098Z' style='fill:%23bdd4de%3Bfill-rule:nonzero%3B'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
margin: 20px auto;
}
div#share{
width: 48px;
height: 48px;
cursor: pointer;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px' fill='%23bdd4de'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
margin: auto;
}
div#qrcode{
width: 60px;
height: 60px;
cursor: pointer;
background: url('../img/qrcode.svg');
background-repeat: no-repeat;
float: left;
margin-left: 20px;
}
div#prevtop{
display: inline-block;
width: 40px;
height: 40px;
cursor: pointer;
background: url('../img/prevtop.svg');
background-repeat: no-repeat;
float: right;
}
progress.amplitude-song-played-progress {
background-color: #2b3a42;
-webkit-appearance: none;
appearance: none;
width: 70%;
margin: auto;
height: 12px;
cursor: pointer;
border: 0px;
}
progress.amplitude-song-played-progress:not([value]) {
background-color: #2b3a42; }
progress[value]::-webkit-progress-bar {
background-color: #3f5765; }
progress[value]::-moz-progress-bar {
background-color: #3f5765;
height: 12px;}
progress[value]::-webkit-progress-value {
background-color: #bdd4de;
height: 12px; }
.time-container {
font-weight: 400;
font-size: 12px;
color: #808080;
background-color: #2b3a42;
height: 40px;
width: 85%;
margin: auto;
}
.time-container span.current-time {
width: 15%;
float:left;
}
.time-container span.duration {
float: right;
}
div#volume-container {
width: 45%;
margin: auto;
height: 50px;
padding-top: 10px; }
div#volume-container div.amplitude-mute {
cursor: pointer;
width: 25px;
height: 19px;
float: left; }
div#volume-container div.amplitude-mute.amplitude-not-muted {
background: url("../img/volume.svg");
background-repeat: no-repeat; }
div#volume-container div.amplitude-mute.amplitude-muted {
background: url("../img/mute.svg");
background-repeat: no-repeat; }
input[type=range].amplitude-volume-slider {
-webkit-appearance: none;
width: calc( 100% - 33px);
float: left;
margin-top: 10px;
margin-left: 5px; }
@-moz-document url-prefix() {
input[type=range].amplitude-volume-slider {
margin-top: 0px; } }
@supports (-ms-ime-align: auto) {
input[type=range].amplitude-volume-slider {
margin-top: 3px;
height: 12px;
background-color: rgba(255, 255, 255, 0) !important;
z-index: 999;
position: relative; }
div.ms-range-fix {
height: 1px;
background-color: #A9A9A9;
width: 67%;
float: right;
margin-top: -6px;
z-index: 9;
position: relative; } }
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop, input[type=range].amplitude-volume-slider {
margin-top: -24px;
background-color: rgba(255, 255, 255, 0) !important; } }
input[type=range].amplitude-volume-slider:focus {
outline: none; }
input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
width: 75%;
height: 1px;
cursor: pointer;
animate: 0.2s;
background: #CFD8DC; }
input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
height: 10px;
width: 10px;
border-radius: 10px;
background: #2b3a42;
cursor: pointer;
margin-top: -4px;
-webkit-appearance: none; }
input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
background: #2b3a42; }
input[type=range].amplitude-volume-slider::-moz-range-track {
width: 100%;
height: 1px;
cursor: pointer;
animate: 0.2s;
background: #2b3a42; }
input[type=range].amplitude-volume-slider::-moz-range-thumb {
height: 10px;
width: 10px;
border-radius: 10px;
background: #2b3a42;
cursor: pointer;
margin-top: -4px; }
input[type=range].amplitude-volume-slider::-ms-track {
width: 100%;
height: 1px;
cursor: pointer;
animate: 0.2s;
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 15px 0;
/*remove default tick marks*/
color: transparent; }
input[type=range].amplitude-volume-slider::-ms-fill-lower {
background: #2b3a42;
border-radius: 10px; }
input[type=range].amplitude-volume-slider::-ms-fill-upper {
background: #CFD8DC;
border-radius: 10px; }
input[type=range].amplitude-volume-slider::-ms-thumb {
height: 10px;
width: 10px;
border-radius: 10px;
background: #2b3a42;
cursor: pointer;
margin-top: 2px; }
input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
background: #CFD8DC; }
input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
background: #CFD8DC; }
input[type=range].amplitude-volume-slider::-ms-tooltip {
display: none; }
/* Player Left Styles */
div#amplitude-left{
padding: 0px;
background: #2b3a42;
-webkit-backface-visibility: hidden;
backface-visibility:hidden;
}
div#menu-container{
height: 50px;
}
div#amplitude-left div#player-left-bottom{
padding: 40px 0px 10px 0px;
}
div#amplitude-left div#player-left-bottom div#time-container:after{
content: "";
display: table;
clear: both;
}
div#amplitude-left div#player-left-bottom div#control-container{
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container{
}
div#amplitude-left div#player-left-bottom div#control-container div#prev-container{
float: left;
width: 15%;
height: 60px;
padding-top: 52px;
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls{
margin: auto;
width: 300px;
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#previous{
display: inline-block;
width: 34px;
height: 34px;
cursor: pointer;
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(2.66785 0 0 2.90924 -29.3464 -32.0016)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cpath id='Shape' d='M16.131 18.254L16.131 12.3C16.131 11.581 15.554 11 14.841 11L12.289 11C11.577 11 11 11.581 11 12.3L11 26.2C11 26.921 11.577 27.499 12.289 27.499L14.841 27.499C15.555 27.499 16.131 26.921 16.131 26.2L16.131 20.246L27.433 27.248C28.291 27.809 28.992 27.399 28.992 26.327L28.992 12.172C28.993 11.104 28.291 10.689 27.433 11.252L16.131 18.254Z' style='fill:rgb(96 125 139)%3B'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
float: right;
}
div#amplitude-left div#player-left-bottom div#control-container div#play-pause-container{
width: 70%;
float: left;
height: 60px;
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#play-pause{
width: 140px;
height: 140px;
cursor: pointer;
margin: auto;
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-paused{
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 0 0)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:rgb(255 83 13)%3B'/%3E%3Cpath id='Play' d='M43.625 29.803L23.646 17.426C22.189 16.474 21 17.173 21 18.988L21 43.011C21 44.823 22.188 45.529 23.646 44.573L43.625 32.198C43.625 32.198 44.336 31.698 44.336 31.001C44.336 30.302 43.625 29.803 43.625 29.803Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#play-pause.amplitude-playing{
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude' transform='matrix(1 0 0 1 10 10)'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 -10 -10)'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:rgb(255 83 13)%3B'/%3E%3C/g%3E%3Cpath id='Shape' d='M40.587 16.61L36.257 16.61C35.048 16.61 34.069 17.59 34.069 18.811L34.069 42.403C34.069 43.624 35.048 44.61 36.257 44.61L40.587 44.61C41.8 44.61 42.775 43.624 42.775 42.403L42.775 18.811C42.783 17.595 41.8 16.61 40.587 16.61Z' style='fill:white%3B'/%3E%3Cpath id='Shape1' serif:id='Shape' d='M24.2 16.61L19.872 16.61C18.661 16.61 17.679 17.59 17.679 18.811L17.679 42.403C17.679 43.624 18.661 44.61 19.872 44.61L24.2 44.61C25.411 44.61 26.388 43.624 26.388 42.403L26.388 18.811C26.388 17.595 25.411 16.61 24.2 16.61Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
div#amplitude-left div#player-left-bottom div#control-container div#next-container{
float: right;
width: 15%;
height: 60px;
padding-top: 52px;
}
div#amplitude-left div#player-left-bottom div#control-container div#central-control-container div#central-controls div#next{
display: inline-block;
width: 34px;
height: 34px;
cursor: pointer;
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(2.67201 0 0 2.91432 -29.3921 -32.0575)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cpath id='Shape' d='M27.677 11L25.131 11C24.416 11 23.844 11.58 23.844 12.298L23.844 18.242L12.557 11.251C11.699 10.691 11 11.101 11 12.169L11 26.3C11 27.366 11.699 27.782 12.557 27.219L23.844 20.229L23.844 26.173C23.844 26.893 24.42 27.47 25.131 27.47L27.677 27.47C28.39 27.47 28.964 26.893 28.964 26.173L28.964 12.298C28.965 11.582 28.389 11 27.677 11Z' style='fill:rgb(96 125 139)%3B'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
}
div#amplitude-left div#player-left-bottom div#control-container:after{
content: "";
display: table;
clear: both;
}
div#amplitude-left div#player-left-bottom div#meta-container{
text-align: center;
margin: 70px auto 30px auto;
width: 60%;
color: #bdd4de;
}
div#meta-container span.song-name{
display: block;
color: #bdd4de;
font-size: 20px;
text-align: center;
font-family: 'Open Sans', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div#amplitude-left div#player-left-bottom div#meta-container div.song-artist-album{
color: #bdd4de;
font-size: 14px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div#amplitude-left div#player-left-bottom div#meta-container div.song-artist-album span{
display: block;
}
/* Player right styles */
div#amplitude-right{
padding: 0px;
overflow-y: scroll;
}
div#amplitude-right div.song{
cursor: pointer;
padding: 10px;
}
div#amplitude-right div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing{
display: block;
}
div#amplitude-right div.song.amplitude-active-song-container div.song-now-playing-icon-container:hover img.now-playing div.play-button-container{
display: none;
}
div#amplitude-right div.song div.song-meta-data{
float: left;
width: calc( 100% - 40px );
}
div#amplitude-right div.song div.song-meta-data span.song-title{
color: #2b3a42;
font-size: 16px;
display: block;
font-weight: 300;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div#amplitude-right div.song div.song-meta-data span.song-artist{
color: #2b3a42;
font-size: 14px;
font-weight: bold;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div#amplitude-right div.song span.song-duration{
float: left;
width: 55px;
text-align: center;
line-height: 45px;
color: #bdd4de;
font-size: 16px;
font-weight: 500;
}
div#amplitude-right div.song:after{
content: "";
display: table;
clear: both;
}
@media only screen and (max-width: 260px) {
div#shuffle-container{display: none;}
div#bar-mp3{width:80%;}
div#repeat-container{width:20%;}
div#central-controls {float: right;}
}
/* Small only */
@media screen and (max-width: 39.9375em) {
div#amplitude-player div#amplitude-left img[amplitude-song-info="cover_art_url"]{
width: auto;
height: auto;
}
}
/* Medium and up */
@media screen and (min-width: 40em) {
}
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
}
/* Large and up */
@media screen and (min-width: 64em) {
}
/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
}