Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mamayaya1
GitHub Repository: mamayaya1/game
Path: blob/main/projects/chill-radio/css/main.css
4626 views
1
@import url(https://fonts.googleapis.com/css?family=Lato:400, 700&display=swap);
2
* {
3
box-sizing: border-box;
4
font-family: "Lato", Arial;
5
}
6
body {
7
background-color: #1b1b32;
8
background-position: 50%;
9
background-size: cover;
10
color: #fff;
11
font-family: "Open Sans", sans-serif;
12
margin: 0;
13
overflow: hidden;
14
padding: 0;
15
}
16
#root,
17
body,
18
html,
19
main {
20
height: 100%;
21
}
22
a {
23
text-decoration: none;
24
}
25
h1,
26
h2,
27
p {
28
margin: 0;
29
}
30
.App {
31
height: 100%;
32
}
33
.animation {
34
display: none;
35
}
36
@media only screen and (min-width: 768px) {
37
.animation {
38
background-image: url("/projects/chill-radio/img/vapor.gif");
39
background-position: left bottom;
40
background-repeat: no-repeat;
41
display: block;
42
height: 100%;
43
margin-top: 88px;
44
position: relative;
45
width: 100%;
46
}
47
}
48
.site-title {
49
font-size: 30px;
50
}
51
@media only screen and (min-width: 768px) {
52
.site-title {
53
font-size: 18px;
54
}
55
}
56
.site-description {
57
font-size: 18px;
58
margin-top: 18px;
59
}
60
@media only screen and (min-width: 768px) {
61
.site-description {
62
margin-left: 10px;
63
margin-top: 0;
64
}
65
}
66
.under-header-content {
67
background-color: #0a0a23;
68
display: -webkit-flex;
69
display: flex;
70
-webkit-flex-direction: column;
71
flex-direction: column;
72
height: 200px;
73
-webkit-justify-content: center;
74
justify-content: center;
75
padding: 0 20px;
76
position: absolute;
77
text-align: center;
78
top: 38px;
79
width: 100%;
80
}
81
@media only screen and (min-width: 768px) {
82
.under-header-content {
83
-webkit-align-items: center;
84
align-items: center;
85
-webkit-flex-direction: row;
86
flex-direction: row;
87
height: 50px;
88
z-index: 1;
89
}
90
}
91
.slider-container {
92
height: 100%;
93
padding: 22px 20px 22px 15px;
94
width: 140px;
95
}
96
.slider {
97
-webkit-appearance: none;
98
background: #dfdfe2;
99
height: 6px;
100
width: 100%;
101
}
102
.slider::-webkit-slider-thumb {
103
-webkit-appearance: none;
104
appearance: none;
105
background: #fff;
106
cursor: pointer;
107
height: 15px;
108
width: 15px;
109
}
110
.slider::-moz-range-thumb {
111
background: #fff;
112
cursor: pointer;
113
height: 15px;
114
width: 15px;
115
}
116
[data-meta="title"] {
117
font-size: 18px;
118
}
119
[data-meta="artist"] {
120
font-size: 14px;
121
}
122
[data-meta="album"] {
123
font-size: 12px;
124
}
125
[data-meta="listeners"] {
126
bottom: 20px;
127
font-size: 20px;
128
font-weight: 900;
129
left: 10px;
130
position: absolute;
131
}
132
@media only screen and (min-width: 768px) {
133
[data-meta="listeners"] {
134
bottom: auto;
135
left: auto;
136
top: 2px;
137
right: 10px;
138
}
139
}
140
[data-meta="picture"] {
141
bottom: 212px;
142
height: 200px;
143
left: 50%;
144
margin-left: -100px;
145
position: absolute;
146
width: 200px;
147
}
148
@media only screen and (min-width: 768px) {
149
[data-meta="picture"] {
150
bottom: auto;
151
height: 70px;
152
left: auto;
153
margin-left: 0;
154
width: 70px;
155
}
156
}
157
@media (max-height: 600px) {
158
[data-meta="picture"] {
159
display: none;
160
}
161
}
162
.now-playing {
163
-webkit-align-content: center;
164
align-content: center;
165
background-color: #1b1b32;
166
bottom: 70px;
167
display: -webkit-flex;
168
display: flex;
169
-webkit-flex-direction: column;
170
flex-direction: column;
171
height: 120px;
172
left: 0;
173
padding: 10px;
174
position: absolute;
175
width: 100vw;
176
}
177
@media only screen and (min-width: 768px) {
178
.now-playing {
179
background-color: #0a0a23;
180
bottom: auto;
181
height: 100%;
182
left: 70px;
183
padding-bottom: 2px;
184
padding-top: 2px;
185
position: relative;
186
width: calc(100% - 70px);
187
}
188
}
189
.progress-container {
190
border-radius: 4px;
191
bottom: 10px;
192
height: 4px;
193
left: 10px;
194
overflow: hidden;
195
position: absolute;
196
right: 10px;
197
}
198
@media only screen and (min-width: 768px) {
199
.progress-container {
200
bottom: 5px;
201
}
202
}
203
.now-playing progress {
204
-webkit-appearance: none;
205
appearance: none;
206
background-color: #3b3b4f;
207
height: 4px;
208
left: 0;
209
position: absolute;
210
top: 0;
211
width: 100%;
212
border: none;
213
}
214
.now-playing progress::-webkit-progress-bar {
215
background-color: #3b3b4f;
216
}
217
.now-playing progress::-webkit-progress-value {
218
background-color: #fff;
219
}
220
.meta-display {
221
opacity: 0;
222
transition: opacity 0.5s ease-out;
223
width: calc(100% - 210px);
224
}
225
.meta-display-visible {
226
opacity: 1;
227
}
228
.visualizer {
229
background-color: #002ead;
230
height: 100%;
231
pointer-events: none;
232
position: absolute;
233
top: 238px;
234
width: 100%;
235
z-index: 5;
236
}
237
@media only screen and (min-width: 768px) {
238
.visualizer {
239
background-color: transparent;
240
top: 88px;
241
}
242
}
243
.visualizer canvas {
244
height: 100%;
245
width: 100%;
246
}
247
.recent-song-history {
248
background-color: transparent;
249
border: 0;
250
cursor: pointer;
251
height: 100%;
252
padding: 0;
253
text-align: center;
254
width: 70px;
255
z-index: 10;
256
}
257
.recent-song-history:active,
258
.recent-song-history:hover {
259
background-color: #1b1b32;
260
}
261
.recent-song-history .recently-played-icon {
262
color: #fff;
263
height: 60%;
264
width: 60%;
265
}
266
.recent-song-list {
267
background-color: #1b1b32;
268
bottom: 70px;
269
color: #fff;
270
cursor: default;
271
left: 0;
272
position: absolute;
273
width: 100%;
274
}
275
@media only screen and (min-width: 768px) {
276
.recent-song-list {
277
bottom: 73px;
278
width: 350px;
279
}
280
}
281
.recently-played-icon {
282
font-weight: 700;
283
-webkit-justify-content: center;
284
justify-content: center;
285
}
286
.recent-song-info {
287
border-bottom: 1px solid #3b3b4f;
288
display: -webkit-flex;
289
display: flex;
290
-webkit-justify-content: flex-start;
291
justify-content: flex-start;
292
padding: 10px;
293
}
294
.recent-song-meta {
295
font-size: 16px;
296
margin-left: 10px;
297
overflow: hidden;
298
text-align: left;
299
}
300
.recent-song-meta p {
301
overflow: hidden;
302
text-overflow: ellipsis;
303
white-space: nowrap;
304
}
305
.recent-song-meta p:first-child {
306
font-weight: 700;
307
}
308
.recent-song-info:nth-child(5) {
309
border-bottom: none;
310
}
311
.recent-song-info img {
312
float: left;
313
height: 50px;
314
width: 50px;
315
}
316
details {
317
display: none;
318
}
319
@media only screen and (min-width: 768px) {
320
details {
321
background-color: rgba(10, 10, 35, 0.6);
322
bottom: 100px;
323
color: #fff;
324
display: block;
325
opacity: 0.1;
326
padding: 15px;
327
position: absolute;
328
right: 50px;
329
transition: opacity 0.25s ease-out;
330
}
331
}
332
details:hover,
333
details[open] {
334
opacity: 1;
335
}
336
dl {
337
margin-bottom: 0;
338
}
339
dt {
340
margin-top: 10px;
341
}
342
dd {
343
font-style: italic;
344
margin-left: 10px;
345
}
346
[data-meta="stream-select"] {
347
-webkit-appearance: none;
348
appearance: none;
349
background-color: #fff;
350
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
351
background-position: right 0.7em top 50%, 0 0;
352
background-repeat: no-repeat;
353
background-size: 0.65em auto, 100%;
354
border-radius: 0;
355
border: none;
356
bottom: 25px;
357
font-size: 12px;
358
padding: 2px 20px 2px 2px;
359
position: absolute;
360
right: 10px;
361
}
362
@media only screen and (min-width: 768px) {
363
[data-meta="stream-select"] {
364
bottom: 16px;
365
}
366
}
367
footer {
368
background-color: #0a0a23;
369
bottom: 0;
370
display: -webkit-flex;
371
display: flex;
372
height: 70px;
373
position: absolute;
374
width: 100%;
375
z-index: 10;
376
}
377
@media only screen and (min-width: 768px) {
378
footer {
379
border-top: 3px solid #fff;
380
box-sizing: content-box;
381
}
382
}
383
.play-container {
384
background-color: transparent;
385
border: 0;
386
color: #fff;
387
cursor: pointer;
388
height: 100%;
389
left: 50%;
390
margin-left: -35px;
391
padding: 15px;
392
position: absolute;
393
width: 70px;
394
}
395
.play-container:active,
396
.play-container:hover {
397
background-color: #1b1b32;
398
}
399
@media only screen and (min-width: 768px) {
400
.play-container {
401
left: auto;
402
margin-left: 0;
403
position: relative;
404
}
405
}
406
.play-container:before {
407
background-color: #1b1b32;
408
background-image: url(https://cdn-media-1.freecodecamp.org/code-radio/cta.png);
409
background-position: 150px;
410
background-repeat: no-repeat;
411
border-radius: 5px;
412
box-sizing: border-box;
413
content: "Push Play or Space Bar to Start Music!";
414
display: none;
415
font-size: 21px;
416
font-weight: 700;
417
height: 100px;
418
left: -170px;
419
opacity: 0;
420
padding: 10px 100px 10px 20px;
421
pointer-events: none;
422
position: absolute;
423
top: -110px;
424
transition: opacity 0.5s ease-out;
425
width: 250px;
426
}
427
@media only screen and (min-width: 768px) {
428
.play-container:before {
429
display: block;
430
}
431
}
432
.play-container-cta:before {
433
opacity: 1;
434
}
435
.play-container-cta:hover {
436
background: #2a2a40;
437
}
438
.site-nav {
439
-webkit-align-items: flex-start;
440
align-items: flex-start;
441
background: #0a0a23;
442
font-family: "Lato", sans-serif;
443
font-size: 18px;
444
height: 38px;
445
-webkit-justify-content: space-between;
446
justify-content: space-between;
447
padding: 0 15px;
448
position: fixed;
449
top: 0;
450
width: 100%;
451
z-index: 1000;
452
}
453
.site-nav,
454
.site-nav-middle {
455
display: -webkit-flex;
456
display: flex;
457
overflow-y: hidden;
458
}
459
.site-nav-middle {
460
-ms-overflow-scrolling: touch;
461
-webkit-overflow-scrolling: touch;
462
-webkit-align-items: center;
463
align-items: center;
464
letter-spacing: 0.4px;
465
margin-right: 0;
466
overflow-x: auto;
467
white-space: nowrap;
468
}
469
@media only screen and (min-width: 768px) {
470
.site-nav-middle {
471
-webkit-flex: 1 0 30%;
472
flex: 1 0 30%;
473
margin-right: 0;
474
}
475
}
476
.site-nav-left {
477
display: none;
478
}
479
@media only screen and (min-width: 768px) {
480
.site-nav-left {
481
display: -webkit-flex;
482
display: flex;
483
-webkit-flex: 1 0 30%;
484
flex: 1 0 30%;
485
margin-left: 0;
486
}
487
}
488
.site-nav-logo {
489
color: #fff;
490
display: block;
491
-webkit-flex-shrink: 0;
492
flex-shrink: 0;
493
font-size: 1.7rem;
494
font-weight: 700;
495
letter-spacing: -0.5px;
496
line-height: 1em;
497
margin: 0 5px;
498
}
499
@media only screen and (min-width: 768px) {
500
.site-nav-logo {
501
margin-left: auto;
502
margin-right: auto;
503
}
504
}
505
.site-nav-logo:hover {
506
text-decoration: none;
507
}
508
.site-nav-logo img {
509
display: block;
510
height: 25px;
511
margin-top: 7px;
512
width: auto;
513
}
514
.site-nav-right {
515
-webkit-align-items: center;
516
align-items: center;
517
display: -webkit-flex;
518
display: flex;
519
-webkit-flex-shrink: 0;
520
flex-shrink: 0;
521
height: 38px;
522
}
523
@media only screen and (min-width: 768px) {
524
.site-nav-right {
525
-webkit-flex: 1 0 30%;
526
flex: 1 0 30%;
527
}
528
}
529
@media only screen and (min-width: 768px) {
530
.main-nav-group,
531
.site-nav-right {
532
margin-left: auto;
533
}
534
}
535
.nav {
536
background-color: #0a0a23;
537
display: none;
538
left: 15px;
539
list-style: none;
540
margin: 0 0 0 -12px;
541
padding: 0;
542
position: absolute;
543
top: 38px;
544
}
545
@media only screen and (min-width: 768px) {
546
.nav {
547
display: -webkit-flex;
548
display: flex;
549
left: auto;
550
position: relative;
551
top: 0;
552
}
553
}
554
.nav {
555
height: 38px;
556
}
557
.nav li {
558
padding: 0;
559
}
560
.nav li,
561
.nav li a {
562
display: block;
563
margin: 0;
564
}
565
.nav li a {
566
color: #fff;
567
opacity: 1;
568
padding: 8px 15px;
569
white-space: nowrap;
570
}
571
.nav li:hover {
572
background: #fff;
573
}
574
.nav li a:hover {
575
color: #0a0a23;
576
text-decoration: none;
577
}
578
.toggle-button-nav {
579
background-color: #0a0a23;
580
border: 1px solid #fff;
581
color: #fff;
582
cursor: pointer;
583
display: -webkit-flex;
584
display: flex;
585
font-family: "lato", sans-serif;
586
font-size: 18px;
587
height: auto;
588
margin-right: 5px;
589
margin-top: 4px;
590
outline: 0;
591
padding: 2px 14px 3px;
592
}
593
@media only screen and (min-width: 768px) {
594
.toggle-button-nav {
595
display: none;
596
}
597
}
598
.show-main-nav-items {
599
display: -webkit-flex;
600
display: flex;
601
}
602
@media only screen and (min-width: 768px) {
603
.show-main-nav-items {
604
display: none;
605
}
606
}
607
.expand-nav {
608
min-height: 78px;
609
}
610
.reverse-toggle-color {
611
background-color: #fff;
612
color: #0a0a23;
613
}
614
/*# sourceMappingURL=main.75b93fcc.chunk.css.map */
615