styles.css (7.1 KB)

  1 @font-face {
  2 	font-family: 'Basteleur Moonlight';
  3 	src: url('fonts/Basteleur/Basteleur-Moonlight.woff2') format('woff2');
  4 	font-weight: normal;
  5 	font-style: normal;
  6 	font-display: swap;
  7 }
  8 
  9 :root {
 10 	--primary: #ff1900;
 11 	--accent: #5d0cf4;
 12 	--background: #000000;
 13 	--text: #ffffff;
 14 	--dimmed-text: #a6a6b4;
 15 }
 16 
 17 * {
 18 	scrollbar-color: var(--dimmed-text) var(--background);
 19 	user-select: none;
 20 	-webkit-user-select: none;
 21 	-webkit-touch-callout: none;
 22 	-webkit-tap-highlight-color: transparent;
 23 }
 24 
 25 html {
 26 	scroll-behavior: smooth;
 27 	overscroll-behavior: none;
 28 	-ms-overflow-style: none;
 29 	scrollbar-width: none;
 30 }
 31 
 32 html::-webkit-scrollbar {
 33 	display: none;
 34 }
 35 
 36 .playlist-wrapper::-webkit-scrollbar {
 37 	display: none;
 38 }
 39 
 40 body {
 41 	margin: 0;
 42 	padding: 0;
 43 	font-family: 'Basteleur Moonlight', sans-serif;
 44 	height: 100dvh;
 45 	display: flex;
 46 	flex-direction: column;
 47 	font-size: 24px;
 48 	background-color: var(--background);
 49 	position: fixed;
 50 	width: 100%;
 51 }
 52 
 53 .window-container {
 54 	background: transparent;
 55 	height: 100%;
 56 	display: flex;
 57 	flex-direction: column;
 58 }
 59 
 60 .player-container {
 61 	flex-grow: 1;
 62 	display: flex;
 63 	flex-direction: column;
 64 	overflow: hidden;
 65 	position: relative;
 66 	padding-top: 10px;
 67 }
 68 
 69 .controls {
 70 	display: flex;
 71 	justify-content: center;
 72 	background: transparent;
 73 	position: absolute;
 74 	bottom: 0;
 75 	left: 0;
 76 	right: 0;
 77 	box-sizing: border-box;
 78 	z-index: 3;
 79 	pointer-events: none;
 80 }
 81 
 82 .control-button {
 83 	width: clamp(60px, calc((100vw - 58px) / 3), 120px);
 84 	aspect-ratio: 8 / 3;
 85 	border: none;
 86 	cursor: pointer;
 87 	margin: 0;
 88 	border-radius: 50%;
 89 	background-color: var(--text);
 90 	position: relative;
 91 	box-shadow:
 92 		inset -2px -2px 4px rgba(0, 0, 0, 0.3),
 93 		inset 2px 2px 4px rgba(255, 255, 255, 0.4),
 94 		0 2px 4px rgba(0, 0, 0, 0.5),
 95 		0 4px 8px rgba(0, 0, 0, 0.3);
 96 	filter:
 97 		drop-shadow(0 0 1px rgba(0, 0, 0, 0.8))
 98 		drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6))
 99 		drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.2));
100 	pointer-events: auto;
101 }
102 
103 .control-button::before {
104 	content: '';
105 	position: absolute;
106 	inset: 0;
107 	background-color: var(--background);
108 	mask-repeat: no-repeat;
109 	mask-size: contain;
110 	mask-position: center;
111 }
112 
113 .controls-inner {
114 	display: flex;
115 	justify-content: space-between;
116 	padding: 10px 15px 15px;
117 	pointer-events: auto;
118 	width: 100%;
119 	box-sizing: border-box;
120 }
121 
122 @media (min-width: 420px) {
123 	.controls-inner {
124 		justify-content: center;
125 		gap: 14px;
126 		width: auto;
127 	}
128 
129 	.control-button {
130 		width: 120px;
131 	}
132 }
133 
134 .playlist-wrapper {
135 	flex-grow: 1;
136 	position: relative;
137 	overflow-y: auto;
138 	padding-bottom: 70px;
139 	overscroll-behavior: none;
140 	margin-top: -1px;
141 	overflow-anchor: none;
142 }
143 
144 .playlist {
145 	padding-top: 0;
146 	cursor: initial;
147 }
148 
149 .playlist-item {
150 	display: flex;
151 	justify-content: space-between;
152 	align-items: center;
153 	color: var(--text);
154 	min-height: 45px;
155 	padding-left: 15px;
156 	padding-right: 10px;
157 	padding-bottom: 18px;
158 }
159 
160 .playlist-item-content {
161 	flex-grow: 1;
162 	display: flex;
163 	flex-direction: column;
164 	gap: 2px;
165 	transition: opacity 0.3s ease;
166 }
167 
168 .playlist-item-content.uncached {
169 	opacity: 0.4;
170 }
171 
172 .playlist-item-title {
173 	font-size: 20px;
174 	line-height: 1.2;
175 }
176 
177 .playlist-item-title.current {
178 	font-weight: bold;
179 	color: var(--primary);
180 }
181 
182 .playlist-item-artist {
183 	font-size: 16px;
184 	color: var(--dimmed-text);
185 	line-height: 1.2;
186 }
187 
188 .playlist-item-artist.current {
189 	font-weight: bold;
190 	color: var(--primary);
191 	opacity: 1;
192 }
193 
194 @media (hover: hover) and (pointer: fine) {
195 	.playlist-item:hover {
196 		cursor: pointer;
197 	}
198 
199 	.playlist-item:hover .playlist-item-title,
200 	.playlist-item:hover .playlist-item-artist {
201 		color: var(--text);
202 		background-color: var(--accent);
203 		align-self: flex-start;
204 		padding: 0 4px;
205 		margin-left: -4px;
206 	}
207 
208 	.playlist-item:hover .playlist-item-title.current,
209 	.playlist-item:hover .playlist-item-artist.current {
210 		background-color: var(--primary);
211 		color: var(--background);
212 	}
213 
214 	body.reorderable .playlist,
215 	body.reorderable .playlist-item:hover {
216 		cursor: grab;
217 	}
218 }
219 
220 body.reorder-pressed,
221 body.reorder-pressed * {
222 	cursor: grabbing !important;
223 }
224 
225 body.reordering .playlist-item {
226 	pointer-events: none;
227 	will-change: transform;
228 }
229 
230 .playlist-item.dragging {
231 	background-color: var(--background);
232 	box-sizing: border-box;
233 }
234 
235 .playlist-item.dragging .playlist-item-title,
236 .playlist-item.dragging .playlist-item-artist {
237 	color: var(--text);
238 	background-color: var(--accent);
239 	align-self: flex-start;
240 	padding: 0 4px;
241 	margin-left: -4px;
242 }
243 
244 .playlist-item.dragging .playlist-item-title.current,
245 .playlist-item.dragging .playlist-item-artist.current {
246 	background-color: var(--primary);
247 	color: var(--background);
248 }
249 
250 .playlist-item-placeholder {
251 	box-sizing: border-box;
252 }
253 
254 .current-track {
255 	text-align: left;
256 	padding-left: 15px;
257 	padding-bottom: 10px;
258 	font-weight: bold;
259 	color: var(--primary);
260 	min-height: 35px;
261 	display: flex;
262 	align-items: center;
263 	background-color: var(--background);
264 	z-index: 2;
265 	position: relative;
266 	flex-shrink: 0;
267 }
268 
269 .current-track span {
270 	display: inline-block;
271 	white-space: nowrap;
272 	will-change: transform;
273 }
274 
275 .current-track.no-overflow span {
276 	overflow: hidden;
277 	text-overflow: hidden;
278 	max-width: 100%;
279 }
280 
281 #audioPlayer {
282 	display: none;
283 }
284 
285 .progress-container {
286 	width: 100%;
287 	font-size: 23px;
288 	cursor: grab;
289 	margin-top: 0;
290 	height: 35px;
291 	display: flex;
292 	align-items: center;
293 	padding: 0 15px;
294 	padding-bottom: 7px;
295 	box-sizing: border-box;
296 	position: relative;
297 	background-color: var(--background);
298 	z-index: 2;
299 	flex-shrink: 0;
300 }
301 
302 .progress-container::before {
303 	content: '';
304 	position: absolute;
305 	left: 15px;
306 	right: 15px;
307 	top: 50%;
308 	transform: translateY(-50%);
309 	margin-top: -3.5px;
310 	height: 24px;
311 	pointer-events: auto;
312 }
313 
314 .shadow-overlay {
315 	position: sticky;
316 	top: -1px;
317 	left: 0;
318 	right: 0;
319 	height: 14px;
320 	background: linear-gradient(
321 		to bottom,
322 		var(--background) 0%,
323 		color-mix(in srgb, var(--background) 50%, transparent) 40%,
324 		color-mix(in srgb, var(--background) 20%, transparent) 70%,
325 		transparent 100%
326 	);
327 	pointer-events: none;
328 	z-index: 2;
329 }
330 
331 .progress-container:hover {
332 	cursor: grab;
333 }
334 
335 .progress-bar {
336 	width: 100%;
337 	height: 4px;
338 	background-color: var(--text);
339 	position: relative;
340 	border-radius: 1px;
341 	--progress: 0;
342 	--circle-size: 16px;
343 }
344 
345 .progress-bar::before {
346 	content: '';
347 	position: absolute;
348 	left: 0;
349 	top: 0;
350 	height: 100%;
351 	width: calc((100% - var(--circle-size) + 2px) * var(--progress) / 100 + var(--circle-size) / 2);
352 	background-color: var(--accent);
353 	border-radius: 1px;
354 	transition: none;
355 }
356 
357 .progress-bar::after {
358 	content: '';
359 	position: absolute;
360 	left: calc((100% - var(--circle-size) + 2px) * var(--progress) / 100 - 1px);
361 	top: 50%;
362 	transform: translateY(-50%);
363 	width: var(--circle-size);
364 	height: var(--circle-size);
365 	background-color: var(--accent);
366 	border-radius: 50%;
367 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
368 	transition: none;
369 }
370 
371 .progress-text {
372 	display: none;
373 }
374 
375 .progress-text-left {
376 	display: none;
377 }
378 
379 .progress-text-center {
380 	display: none;
381 }
382 
383 #playPause::before {
384 	mask-image: url('play.svg');
385 	mask-position: 53.5% center;
386 }
387 
388 #playPause.pause::before {
389 	mask-image: url('pause.svg');
390 	mask-position: center;
391 }
392 
393 #prev::before {
394 	mask-image: url('prev.svg');
395 	mask-position: 45% center;
396 }
397 
398 #next::before {
399 	mask-image: url('next.svg');
400 	mask-position: 55% center;
401 }