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