From 743283a9ec88810b1a66e8d86911e295ac0ddaef Mon Sep 17 00:00:00 2001
From: Sijmen <me@sijman.nl>
Date: Thu, 27 Apr 2023 19:36:21 +0200
Subject: [PATCH] Respect `prefers-contrast: more` query

---
 static/style.css       | 32 ++++++++++++++++++++++++++++++++
 templates/browser.html |  1 +
 2 files changed, 33 insertions(+)

diff --git a/static/style.css b/static/style.css
index d5da5aa..d50e7c5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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;
diff --git a/templates/browser.html b/templates/browser.html
index ad0e1bf..2d01a12 100644
--- a/templates/browser.html
+++ b/templates/browser.html
@@ -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>