From 9f568251ccb1e1cd8fa23bc5e93b56049e1158e8 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Tue, 5 Dec 2023 02:40:56 +0100
Subject: [PATCH] static: improve button style of playback controls

---
 static/flexbox/sanic.css | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index b683887..f349762 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -1,3 +1,7 @@
+:root {
+  --ribbon-width: 160px;
+}
+
 html, body {
   background-color: #09101d;
   color: #bbb;
@@ -141,10 +145,21 @@ table tr:hover td {
   text-align: left;
 }
 
-#playback-controls {
+#playback-controls div:first-child {
   display: flex;
-  flex-direction: column;
-  width: 160px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+#playback-controls div button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0;
+
+  height: calc(var(--ribbon-width) / 4 - 8px);
+  width: calc(var(--ribbon-width) / 4 - 8px);
 }
 
 #progress {