_/empede
1
0
Fork 0
Code Issues Releases 18 Activity

Respect prefers-contrast: more query

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

32
static/style.css
View file

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

1
templates/browser.html
View file

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