JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
made CSS to be more specific after some feedback
+258
-260
+258
-260
style.css
+258
-260
style.css
···
1
-
* {
2
-
box-sizing: border-box;
3
-
}
4
-
5
-
body {
6
-
font-family: arial;
7
-
}
8
-
9
1
/* mp3 player wrapper */
10
2
#music {
3
+
box-sizing: border-box;
11
4
position: relative;
12
5
font-family: arial, nerdfont;
13
6
padding-top: 1px;
···
24
17
transition-duration: 0.5s;
25
18
border-radius: 10px;
26
19
overflow: hidden;
27
-
}
28
20
29
-
/* album cover */
30
-
#album {
31
-
background: white;
32
-
color: black;
33
-
border: 1px solid white;
34
-
width: 40%;
35
-
margin: 0 0 0 5px;
36
-
}
21
+
/* so every element has the same box-sizing */
22
+
* {
23
+
box-sizing: border-box;
24
+
}
37
25
38
-
/* 1/? tracks playing */
39
-
#now-playing {
40
-
display: inline-block;
41
-
position: absolute;
42
-
float: right;
43
-
margin-top: 30%;
44
-
margin-left: 40%;
45
-
}
26
+
/* album cover */
27
+
#album {
28
+
background: white;
29
+
color: black;
30
+
border: 1px solid white;
31
+
width: 40%;
32
+
margin: 0 0 0 5px;
33
+
}
46
34
47
-
/* line below album cover */
48
-
hr {
49
-
margin: 1px 0px;
50
-
padding: 0px;
51
-
}
35
+
/* 1/? tracks playing */
36
+
#now-playing {
37
+
display: inline-block;
38
+
position: absolute;
39
+
float: right;
40
+
margin-top: 30%;
41
+
margin-left: 40%;
42
+
}
52
43
53
-
/* controls grid */
54
-
#controls {
55
-
background: #ba3f3f;
56
-
position: relative;
57
-
display: grid;
58
-
border: 2px solid rgb(213, 213, 213);
59
-
width: 63%;
60
-
height: 30%;
61
-
margin: auto;
62
-
margin-top: 10px;
63
-
grid-template-columns: 33% 33% 33%;
64
-
grid-template-rows: 33% 33% 33%;
65
-
padding: 0px;
66
-
border-radius: 50%;
67
-
}
44
+
/* line below album cover */
45
+
hr {
46
+
margin: 1px 0px;
47
+
padding: 0px;
48
+
}
68
49
69
-
/* buttons in controls CSS */
70
-
#controls button {
71
-
cursor: pointer;
72
-
font-family: nerdfont, arial;
73
-
font-size: 13px;
74
-
background: inherit;
75
-
border: none;
76
-
border-radius: 50%;
77
-
color: #692222;
78
-
margin: 0px;
79
-
text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815);
80
-
}
50
+
/* controls grid */
51
+
#controls {
52
+
background: #ba3f3f;
53
+
position: relative;
54
+
display: grid;
55
+
border: 2px solid rgb(213, 213, 213);
56
+
width: 63%;
57
+
height: 30%;
58
+
margin: auto;
59
+
margin-top: 10px;
60
+
grid-template-columns: 33% 33% 33%;
61
+
grid-template-rows: 33% 33% 33%;
62
+
padding: 0px;
63
+
border-radius: 50%;
64
+
}
81
65
82
-
/* since these buttons don't do anything, they have a 'blocked' cursor */
83
-
#controls button.down {
84
-
cursor: not-allowed;
85
-
}
66
+
/* buttons in controls CSS */
67
+
#controls button {
68
+
cursor: pointer;
69
+
font-family: nerdfont, arial;
70
+
font-size: 13px;
71
+
background: inherit;
72
+
border: none;
73
+
border-radius: 50%;
74
+
color: #692222;
75
+
margin: 0px;
76
+
text-shadow: 2px -1px 2px rgba(225, 212, 212, 0.815);
77
+
}
86
78
87
-
/* the two mini curcle buttons */
88
-
button#playlist-btn,
89
-
button#current-song-btn {
90
-
position: relative;
91
-
border: 1px solid rgb(213, 213, 213);
92
-
background: #ba3f3f;
93
-
color: white;
94
-
font-size: 10px;
95
-
text-align: center;
96
-
border-radius: 50%;
97
-
z-index: 20;
98
-
}
79
+
/* since these buttons don't do anything, they have a 'blocked' cursor */
80
+
#controls button.down {
81
+
cursor: not-allowed;
82
+
}
99
83
100
-
/* play pause button */
101
-
button#play-pause {
102
-
color: white;
103
-
border: 1px solid rgb(39, 11, 11);
104
-
border-radius: 50%;
105
-
font-size: 14px;
106
-
}
84
+
/* the two mini curcle buttons */
85
+
button#playlist-btn,
86
+
button#current-song-btn {
87
+
position: relative;
88
+
border: 1px solid rgb(213, 213, 213);
89
+
background: #ba3f3f;
90
+
color: white;
91
+
font-size: 10px;
92
+
text-align: center;
93
+
border-radius: 50%;
94
+
z-index: 20;
95
+
}
107
96
108
-
/* screen wrapper */
109
-
#screen {
110
-
position: relative;
111
-
background: rgb(39, 36, 36);
112
-
text-align: left;
113
-
margin: auto;
114
-
width: 100%;
115
-
height: 63%;
116
-
border: 20px solid black;
117
-
border-top-width: 30px;
118
-
border-bottom-width: 30px;
119
-
font-size: 10px;
120
-
letter-spacing: 1px;
121
-
line-height: 13px;
122
-
overflow: hidden;
123
-
color: white;
124
-
scrollbar-color: rgb(173, 173, 173) transparent;
125
-
}
97
+
/* play pause button */
98
+
button#play-pause {
99
+
color: white;
100
+
border: 1px solid rgb(39, 11, 11);
101
+
border-radius: 50%;
102
+
font-size: 14px;
103
+
}
126
104
127
-
/* screen class (for playlist and currently playing song)*/
128
-
.screen {
129
-
position: relative;
130
-
overflow: auto;
131
-
height: 83.4%;
132
-
}
105
+
/* screen wrapper */
106
+
#screen {
107
+
position: relative;
108
+
background: rgb(39, 36, 36);
109
+
text-align: left;
110
+
margin: auto;
111
+
width: 100%;
112
+
height: 63%;
113
+
border: 20px solid black;
114
+
border-top-width: 30px;
115
+
border-bottom-width: 30px;
116
+
font-size: 10px;
117
+
letter-spacing: 1px;
118
+
line-height: 13px;
119
+
overflow: hidden;
120
+
color: white;
121
+
scrollbar-color: rgb(173, 173, 173) transparent;
122
+
}
133
123
134
-
/* playlist songs listing */
135
-
#playlist button {
136
-
color: white;
137
-
text-align: left;
138
-
display: block;
139
-
width: 100%;
140
-
padding: 0px;
141
-
margin: 0px;
142
-
background: transparent;
143
-
font-family: inherit;
144
-
font-size: inherit;
145
-
border: 1px solid transparent; /* this is here so it doesn't move when hovered */
146
-
}
124
+
/* screen class (for playlist and currently playing song)*/
125
+
.screen {
126
+
position: relative;
127
+
overflow: auto;
128
+
height: 83.4%;
129
+
}
147
130
148
-
#playlist button:hover {
149
-
cursor: pointer;
150
-
background: #fdaa03;
151
-
background: linear-gradient(
152
-
360deg,
153
-
rgba(253, 170, 3, 1) 0%,
154
-
rgba(255, 217, 140, 1) 91%
155
-
);
156
-
color: black;
157
-
border: 1px solid #f79501;
158
-
}
131
+
/* playlist songs listing */
132
+
#playlist button {
133
+
color: white;
134
+
text-align: left;
135
+
display: block;
136
+
width: 100%;
137
+
padding: 0px;
138
+
margin: 0px;
139
+
background: transparent;
140
+
font-family: inherit;
141
+
font-size: inherit;
142
+
border: 1px solid transparent; /* this is here so it doesn't move when hovered */
143
+
}
159
144
160
-
/* button text */
161
-
#playlist button span {
162
-
margin: 4px 4px;
163
-
display: inline-block;
164
-
vertical-align: middle;
165
-
width: 70%;
166
-
font-size: 10px;
167
-
line-height: 13px;
168
-
}
145
+
#playlist button:hover {
146
+
cursor: pointer;
147
+
background: #fdaa03;
148
+
background: linear-gradient(
149
+
360deg,
150
+
rgba(253, 170, 3, 1) 0%,
151
+
rgba(255, 217, 140, 1) 91%
152
+
);
153
+
color: black;
154
+
border: 1px solid #f79501;
155
+
}
169
156
170
-
/* button album cover */
171
-
#playlist button img {
172
-
display: inline-block;
173
-
vertical-align: middle;
174
-
line-height: 0px;
175
-
width: 30px;
176
-
border: 1px solid grey;
177
-
margin: 4px 4px;
178
-
}
157
+
/* button text */
158
+
#playlist button span {
159
+
margin: 4px 4px;
160
+
display: inline-block;
161
+
vertical-align: middle;
162
+
width: 70%;
163
+
font-size: 10px;
164
+
line-height: 13px;
165
+
}
179
166
180
-
/* currently playing screen music info */
181
-
p.info {
182
-
margin: 4px 4px;
183
-
padding: 0;
184
-
}
167
+
/* button album cover */
168
+
#playlist button img {
169
+
display: inline-block;
170
+
vertical-align: middle;
171
+
line-height: 0px;
172
+
width: 30px;
173
+
border: 1px solid grey;
174
+
margin: 4px 4px;
175
+
}
185
176
186
-
/* icons */
187
-
.icon {
188
-
color: rgb(173, 174, 176);
189
-
font-size: 12px;
190
-
}
177
+
/* currently playing screen music info */
178
+
p.info {
179
+
margin: 4px 4px;
180
+
padding: 0;
181
+
}
191
182
192
-
#top-bar {
193
-
background: #454343;
194
-
background: linear-gradient(
195
-
360deg,
196
-
rgb(108, 108, 108) 0%,
197
-
rgb(71, 71, 71) 100%
198
-
);
199
-
width: 100%;
200
-
text-align: center;
201
-
font-size: 9px;
202
-
padding: 1px;
203
-
margin: 0px;
204
-
}
183
+
/* icons */
184
+
.icon {
185
+
color: rgb(173, 174, 176);
186
+
font-size: 12px;
187
+
}
205
188
206
-
#bottom-bar {
207
-
background: #454343;
208
-
background: linear-gradient(
209
-
360deg,
210
-
rgb(29, 28, 28) 0%,
211
-
rgb(149, 149, 149) 100%
212
-
);
213
-
width: 100%;
214
-
font-size: 9px;
215
-
line-height: 0px;
216
-
padding: 0px;
217
-
margin: 0px;
218
-
}
189
+
#top-bar {
190
+
background: #454343;
191
+
background: linear-gradient(
192
+
360deg,
193
+
rgb(108, 108, 108) 0%,
194
+
rgb(71, 71, 71) 100%
195
+
);
196
+
width: 100%;
197
+
text-align: center;
198
+
font-size: 9px;
199
+
padding: 1px;
200
+
margin: 0px;
201
+
}
202
+
203
+
#bottom-bar {
204
+
background: #454343;
205
+
background: linear-gradient(
206
+
360deg,
207
+
rgb(29, 28, 28) 0%,
208
+
rgb(149, 149, 149) 100%
209
+
);
210
+
width: 100%;
211
+
font-size: 9px;
212
+
line-height: 0px;
213
+
padding: 0px;
214
+
margin: 0px;
215
+
}
219
216
220
-
/* current song playing in playlist screen */
221
-
#bottom-bar #current {
222
-
display: inline;
223
-
}
217
+
/* current song playing in playlist screen */
218
+
#bottom-bar #current {
219
+
display: inline;
220
+
}
224
221
225
-
/* current time of song */
226
-
#bottom-bar span {
227
-
display: inline-block;
228
-
padding: 7px;
229
-
}
222
+
/* current time of song */
223
+
#bottom-bar span {
224
+
display: inline-block;
225
+
padding: 7px;
226
+
}
230
227
231
-
/* emoji that a song is playing */
232
-
span#current-song-emoji {
233
-
font-size: 10px;
234
-
padding-left: 0px;
235
-
padding-right: 0px;
236
-
}
228
+
/* emoji that a song is playing */
229
+
span#current-song-emoji {
230
+
font-size: 10px;
231
+
padding-left: 0px;
232
+
padding-right: 0px;
233
+
}
237
234
238
-
/* scrolling name of current song playing */
239
-
span#current-song-playing {
240
-
display: inline-block;
241
-
padding: 0px;
242
-
width: 80px;
243
-
line-height: 10px;
244
-
}
235
+
/* scrolling name of current song playing */
236
+
span#current-song-playing {
237
+
display: inline-block;
238
+
padding: 0px;
239
+
width: 80px;
240
+
line-height: 10px;
241
+
}
245
242
246
-
/* playing status icon in the bar */
247
-
#playing-status {
248
-
font-size: 13px;
249
-
padding-left: 5px;
250
-
color: rgb(217, 217, 217);
251
-
}
243
+
/* playing status icon in the bar */
244
+
#playing-status {
245
+
font-size: 13px;
246
+
padding-left: 5px;
247
+
color: rgb(217, 217, 217);
248
+
}
252
249
253
-
/* battery icon in the bar */
254
-
#battery {
255
-
font-family: nerdfont;
256
-
padding-top: 10px;
257
-
padding-right: 4px;
258
-
font-size: 13px;
259
-
float: right;
260
-
}
250
+
/* battery icon in the bar */
251
+
#battery {
252
+
font-family: nerdfont;
253
+
padding-top: 10px;
254
+
padding-right: 4px;
255
+
font-size: 13px;
256
+
float: right;
257
+
}
261
258
262
-
/* song progress bar */
263
-
.track-progress {
264
-
accent-color: rgb(96, 155, 226);
265
-
-webkit-appearance: none;
266
-
cursor: help;
267
-
width: 100%;
268
-
height: 4px;
269
-
padding: 0px;
270
-
margin: 0px;
271
-
background: #454343;
272
-
background: linear-gradient(
273
-
360deg,
274
-
rgb(68, 68, 68) 0%,
275
-
rgb(129, 129, 129) 100%
276
-
);
277
-
border-bottom: 1px solid black;
278
-
}
259
+
/* song progress bar */
260
+
.track-progress {
261
+
accent-color: rgb(96, 155, 226);
262
+
-webkit-appearance: none;
263
+
cursor: help;
264
+
width: 100%;
265
+
height: 4px;
266
+
padding: 0px;
267
+
margin: 0px;
268
+
background: #454343;
269
+
background: linear-gradient(
270
+
360deg,
271
+
rgb(68, 68, 68) 0%,
272
+
rgb(129, 129, 129) 100%
273
+
);
274
+
border-bottom: 1px solid black;
275
+
}
279
276
280
-
/* song progress bar - thumb */
281
-
/* chrome */
282
-
.track-progress::-webkit-slider-thumb {
283
-
-webkit-appearance: none;
284
-
appearance: none;
285
-
height: 4px;
286
-
width: 2px;
287
-
background: rgb(96, 155, 226);
288
-
cursor: pointer;
289
-
border: none;
290
-
border-radius: 0px;
291
-
}
277
+
/* song progress bar - thumb */
278
+
/* chrome */
279
+
.track-progress::-webkit-slider-thumb {
280
+
-webkit-appearance: none;
281
+
appearance: none;
282
+
height: 4px;
283
+
width: 2px;
284
+
background: rgb(96, 155, 226);
285
+
cursor: pointer;
286
+
border: none;
287
+
border-radius: 0px;
288
+
}
292
289
293
-
/* firefox */
294
-
.track-progress::-moz-range-thumb {
295
-
height: 2.6px;
296
-
width: 2px;
297
-
background: rgb(96, 155, 226);
298
-
cursor: pointer;
299
-
border: none;
300
-
border-radius: 0px;
301
-
}
290
+
/* firefox */
291
+
.track-progress::-moz-range-thumb {
292
+
height: 2.6px;
293
+
width: 2px;
294
+
background: rgb(96, 155, 226);
295
+
cursor: pointer;
296
+
border: none;
297
+
border-radius: 0px;
298
+
}
302
299
303
-
/* song progress - bar progress */
304
-
/* only on firefox */
305
-
.track-progress::-moz-range-progress {
306
-
background: rgb(96, 155, 226);
300
+
/* song progress - bar progress */
301
+
/* only on firefox */
302
+
.track-progress::-moz-range-progress {
303
+
background: rgb(96, 155, 226);
304
+
}
307
305
}
308
306
309
307
/* tooltip custom css */