From 31549b5b49ea4117c3bda2d5158b65964e650f65 Mon Sep 17 00:00:00 2001
From: Sijmen <me@vijf.life>
Date: Sat, 23 Dec 2023 09:58:28 +0100
Subject: [PATCH] Make settings buttons slightly smaller

---
 static/style.css      |  8 ++++++--
 templates/player.html | 20 +++++++++++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/static/style.css b/static/style.css
index 98a4c18..59449be 100644
--- a/static/style.css
+++ b/static/style.css
@@ -265,15 +265,19 @@ ul.dir li .material-symbols-outlined {
   bottom: 0;
 }
 
-.player .controls {
+.player .controls,
+.player .settings {
   display: flex;
   justify-content: space-around;
   padding: 0 0.5rem 1.0rem;
 }
 
-.player .control {
+.player .controls button {
   font-size: 40px;
 }
+.player .settings button {
+  font-size: 25px;
+}
 
 .player .current {
   display: flex;
diff --git a/templates/player.html b/templates/player.html
index 9835e6d..bd108d3 100644
--- a/templates/player.html
+++ b/templates/player.html
@@ -52,21 +52,31 @@
   >skip_next</button>
 </div>
 
-<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
+<div class="settings" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
   <button
     hx-post="/consume"
-    class="control material-symbols-outlined {% if consume %}active{% endif %}" role="button" title="Consume"
+    class="control material-symbols-outlined {% if consume %}active{% endif %}"
+    role="button" title="Consume"
+    style="font-size: 32px"
   >delete_sweep</button>
 
   <button 
-    hx-post="/shuffle"
-    class="control material-symbols-outlined {% if shuffle %}active{% endif %}" role="button" title="Shuffle"
+    hx-post="/random"
+    class="control material-symbols-outlined {% if random %}active{% endif %}"
+    role="button" title="Shuffle"
   >shuffle</button>
 
   <button 
     hx-post="/repeat"
-    class="control material-symbols-outlined {% if repeat %}active{% endif %}" role="button" title="Repeat"
+    class="control material-symbols-outlined {% if repeat %}active{% endif %}"
+    role="button" title="Repeat"
   >repeat</button>
+
+  <button 
+    hx-post="/single"
+    class="control material-symbols-outlined {% if single %}active{% endif %}"
+    role="button" title="Single"
+  >filter_1</button>
 </div>
 
 <div class="progress" style="width: {{ elapsed / duration * 100.0 }}%"></div>