Respect `prefers-contrast: more` query

This commit is contained in:
Sijmen 2023-04-27 19:36:21 +02:00
parent 158a45c9ae
commit 743283a9ec
Signed by: vijfhoek
GPG Key ID: DAF7821E067D9C48
2 changed files with 33 additions and 0 deletions

View File

@ -18,6 +18,11 @@ body {
margin: 0;
height: 100%;
}
@media (prefers-contrast: more) {
body {
background-color: black;
}
}
body > div {
padding: 1rem;
@ -35,6 +40,14 @@ a {
font-weight: bold;
text-decoration: none;
}
@media (prefers-contrast: more) {
a,
[role=button],
[role=link] {
color: #99f;
text-decoration: underline;
}
}
ul {
list-style: none;
@ -70,9 +83,16 @@ ul {
display: flex;
align-items: center;
}
.queue li.playing {
background-color: #334;
}
@media (prefers-contrast: more) {
.queue li.playing {
background-color: black;
border: 2px solid white;
}
}
.queue .metadata {
flex: 1;
@ -94,6 +114,12 @@ ul.breadcrumb {
border-radius: .25rem;
padding: .75rem 1rem;
}
@media (prefers-contrast: more) {
ul.breadcrumb {
background-color: black;
border: 2px solid white;
}
}
ul.breadcrumb li:not(:first-child)::before {
display: inline-block;
@ -164,6 +190,12 @@ ul.dir li .material-symbols-outlined {
border-radius: 0.25rem;
height: 9.5rem;
}
@media (prefers-contrast: more) {
.player .nowplaying {
background-color: black;
border: 2px solid white;
}
}
.player .controls {
display: flex;

View File

@ -46,6 +46,7 @@
hx-vals='{"path": "{{ path }}"}'
hx-replace-url="/?path={{ path }}"
hx-target=".browser"
role="link"
>
<span class="material-symbols-outlined">folder</span>
<div class="song__name">{{ name }}</div>