a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
feat: improve media queries
only show action buttons and adjust font size *specifically* on mobile devices and not just narrow viewports
+13
-11
+2
-2
src/css/base.css
+2
-2
src/css/base.css
+11
-9
src/css/components.css
+11
-9
src/css/components.css
···
449
449
image-rendering: pixelated;
450
450
}
451
451
452
-
/* MOBILE */
452
+
/* MEDIA QUERIES */
453
453
@media (max-width: 768px) {
454
454
/* layout */
455
455
body {
···
468
468
#queue-table td:nth-child(4),
469
469
#queue-table td:nth-child(5) {
470
470
display: none;
471
-
}
472
-
473
-
/* queue - show action buttons */
474
-
#queue #queue-table .queue-play,
475
-
#queue #queue-table .queue-play-next,
476
-
#queue #queue-table .queue-move-up,
477
-
#queue #queue-table .queue-move-down {
478
-
display: inline-block;
479
471
}
480
472
481
473
#sidebar {
···
494
486
display: none;
495
487
}
496
488
}
489
+
490
+
@media (pointer: coarse) {
491
+
/* queue - show action buttons */
492
+
#queue #queue-table .queue-play,
493
+
#queue #queue-table .queue-play-next,
494
+
#queue #queue-table .queue-move-up,
495
+
#queue #queue-table .queue-move-down {
496
+
display: inline-block;
497
+
}
498
+
}