JS music player that resembles a sony walkman from 2008
doqmeat.com/notebook/F2U/preview/walkman
html-template
circle controllers
+93
-113
+93
-113
style.css
+93
-113
style.css
···
2
2
box-sizing: border-box;
3
3
}
4
4
5
+
/* mp3 player wrapper */
5
6
#music {
6
7
font-family: arial, nerdfont;
7
8
grid-area: music;
···
35
36
padding: 0px;
36
37
}
37
38
39
+
/* controls CSS */
38
40
.circle {
39
41
pointer-events: none;
40
42
position: absolute;
41
43
border-radius: 50%;
42
44
}
43
45
44
-
.small {
46
+
.circle.small {
45
47
border: 1px solid rgb(132, 49, 49);
46
48
z-index: 2;
47
49
width: 50px;
···
50
52
left: 134px;
51
53
}
52
54
53
-
.big {
55
+
.circle.big {
54
56
background: rgb(186, 63, 63);
55
57
z-index: 1;
56
58
border: 1px solid rgb(221, 217, 217);
···
60
62
height: 121px;
61
63
}
62
64
63
-
#screen {
64
-
position: relative;
65
-
background: rgb(39, 36, 36);
66
-
text-align: left;
67
-
margin: auto;
68
-
margin-top: 10px;
69
-
width: 180px;
70
-
height: 250px;
71
-
border: 20px solid black;
72
-
border-top-width: 30px;
73
-
border-bottom-width: 30px;
74
-
border-radius: 20px;
75
-
font-size: 11px;
76
-
letter-spacing: 1px;
77
-
line-height: 13px;
78
-
overflow: hidden;
79
-
color: white;
80
-
scrollbar-color: rgb(218, 155, 155) rgb(224, 199, 199);
81
-
}
82
-
83
-
#screen .icon {
84
-
color: rgb(173, 174, 176);
85
-
font-size: 12px;
86
-
}
87
-
88
-
#now-playing {
89
-
display: inline-block;
90
-
position: absolute;
91
-
float: right;
92
-
margin-top: 43px;
93
-
margin-left: 50px;
94
-
}
95
-
96
-
p.info {
97
-
margin: 4px 0px;
98
-
padding: 0;
99
-
}
100
-
101
-
#details-screen {
102
-
position: relative;
103
-
overflow: scroll;
104
-
height: 88%;
105
-
}
106
-
107
-
#bar {
108
-
background: #3b3b3b;
109
-
background: linear-gradient(
110
-
360deg,
111
-
rgba(59, 59, 59, 1) 0%,
112
-
rgba(227, 227, 227, 1) 100%
113
-
);
114
-
width: 100%;
115
-
font-size: 9px;
116
-
line-height: 0px;
117
-
padding: 0px;
118
-
margin: 0;
119
-
}
120
-
121
-
#playing-status {
122
-
font-family: nerdfont;
123
-
font-size: 13px;
124
-
vertical-align: middle;
125
-
padding-left: 5px;
126
-
color: rgb(217, 217, 217);
127
-
}
128
-
129
-
#battery {
130
-
font-family: nerdfont;
131
-
padding-top: 10px;
132
-
padding-right: 4px;
133
-
font-size: 13px;
134
-
float: right;
135
-
}
136
-
137
65
.up,
138
66
.down,
139
67
.play-pause {
···
196
124
font-size: 18px;
197
125
} */
198
126
127
+
/* screen wrapper */
128
+
#screen {
129
+
position: relative;
130
+
background: rgb(39, 36, 36);
131
+
text-align: left;
132
+
margin: auto;
133
+
margin-top: 10px;
134
+
width: 180px;
135
+
height: 250px;
136
+
border: 20px solid black;
137
+
border-top-width: 30px;
138
+
border-bottom-width: 30px;
139
+
border-radius: 20px;
140
+
font-size: 11px;
141
+
letter-spacing: 1px;
142
+
line-height: 13px;
143
+
overflow: hidden;
144
+
color: white;
145
+
scrollbar-color: rgb(218, 155, 155) rgb(224, 199, 199);
146
+
}
147
+
148
+
/* details box */
149
+
#details-screen {
150
+
position: relative;
151
+
overflow: scroll;
152
+
height: 88%;
153
+
}
154
+
155
+
/* music info */
156
+
p.info {
157
+
margin: 4px 0px;
158
+
padding: 0;
159
+
}
160
+
161
+
/* music info icons */
162
+
.icon {
163
+
color: rgb(173, 174, 176);
164
+
font-size: 12px;
165
+
}
166
+
167
+
/* 1/? tracks playing */
168
+
#now-playing {
169
+
display: inline-block;
170
+
position: absolute;
171
+
float: right;
172
+
margin-top: 43px;
173
+
margin-left: 50px;
174
+
}
175
+
176
+
/* bottom bar */
177
+
#bar {
178
+
background: #3b3b3b;
179
+
background: linear-gradient(
180
+
360deg,
181
+
rgba(59, 59, 59, 1) 0%,
182
+
rgba(227, 227, 227, 1) 100%
183
+
);
184
+
width: 100%;
185
+
font-size: 9px;
186
+
line-height: 0px;
187
+
padding: 0px;
188
+
margin: 0;
189
+
}
190
+
191
+
/* playing status icon in the bar */
192
+
#playing-status {
193
+
font-size: 13px;
194
+
padding-left: 5px;
195
+
color: rgb(217, 217, 217);
196
+
}
197
+
198
+
/* battery icon in the bar */
199
+
#battery {
200
+
font-family: nerdfont;
201
+
padding-top: 10px;
202
+
padding-right: 4px;
203
+
font-size: 13px;
204
+
float: right;
205
+
}
206
+
199
207
#music a {
200
208
color: inherit;
201
209
text-decoration: none;
202
210
}
203
211
204
-
/* ---------- from fork ------------- */
205
-
206
-
.now-playing {
207
-
font-size: 1rem;
208
-
}
209
212
/* Modify the appearance of the slider */
210
-
.seek_slider,
211
-
.volume_slider {
212
-
-webkit-appearance: none;
213
-
-moz-appearance: none;
214
-
appearance: none;
213
+
.seek_slider {
214
+
width: 100%;
215
215
height: 4px;
216
216
padding: 0px;
217
217
margin: 0px;
218
218
background: rgb(81, 81, 81);
219
-
-webkit-transition: 0.2s;
220
-
transition: opacity 0.2s;
221
219
}
222
220
223
221
/* Modify the appearance of the slider thumb */
224
222
.seek_slider::-webkit-slider-thumb,
225
223
.seek_slider::-moz-range-thumb {
226
-
height: 2px;
227
-
width: 5px;
224
+
height: 3px;
225
+
width: 3px;
228
226
background: rgb(96, 155, 226);
229
227
cursor: help;
228
+
border: none;
229
+
border-radius: 0px;
230
230
}
231
231
232
-
.seek_slider:hover,
233
-
.volume_slider:hover {
234
-
opacity: 1;
235
-
}
236
-
237
-
.seek_slider {
238
-
width: 100%;
239
-
}
240
-
241
-
.volume_slider {
242
-
width: 70%;
232
+
.seek_slider::-moz-range-progress,
233
+
.seek_slider::-webkit-slider-runnable-track {
234
+
background: rgb(96, 155, 226);
243
235
}
244
236
245
237
#current-time,
246
238
.total-duration {
247
239
display: inline-block;
248
240
padding: 10px;
249
-
}
250
-
251
-
i.fa-volume-down,
252
-
i.fa-volume-up {
253
-
padding: 10px;
254
-
}
255
-
256
-
i.fa-play-circle,
257
-
i.fa-pause-circle,
258
-
i.fa-step-forward,
259
-
i.fa-step-backward {
260
-
cursor: pointer;
261
241
}
262
242
263
243
@font-face {