From 54d81739f1bd5232886f0b9b6a7d1e7cbeacb21a Mon Sep 17 00:00:00 2001
From: Simon Gymer <simon.gymer@speakerbus.com>
Date: Thu, 30 Jan 2025 12:09:25 +0000
Subject: [PATCH] Bigger slider thumbs, more distinctive radios, better spacing

---
 scripts/serviceworker.js |  2 +-
 styles/fuelshark.css     | 11 ++++++++++-
 styles/radio-field.css   | 11 ++++++++---
 styles/range-field.css   | 16 ++++++++--------
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/scripts/serviceworker.js b/scripts/serviceworker.js
index 9af5192..7599daf 100644
--- a/scripts/serviceworker.js
+++ b/scripts/serviceworker.js
@@ -1,4 +1,4 @@
-var fuelSharkCacheName = 'fuelSharkCache-v2';
+var fuelSharkCacheName = 'fuelSharkCache-v3';
 
 self.addEventListener('install', (event) => {
     event.waitUntil(
diff --git a/styles/fuelshark.css b/styles/fuelshark.css
index de59dd5..ce7f75f 100644
--- a/styles/fuelshark.css
+++ b/styles/fuelshark.css
@@ -102,10 +102,10 @@ hr {
 .slider-info-bar {
 	display: flex;
 	justify-content: space-between;
+    padding-bottom: .25em;
 }
 
 .slider-info-bar.extra-padding {
-	padding-bottom: .25em;
     padding-top: .25em;
 }
 
@@ -119,6 +119,13 @@ hr {
 	border: 1px solid rgb(73 80 87 / 65%);
 }
 
+#data-output {
+	margin-top: .5em;
+    background-color: #1d2023;
+    overflow: hidden;
+	height: 100%;
+}
+
 .total-fuel {
 	padding: 1.5rem 1rem;
 	display: flex;
@@ -126,6 +133,8 @@ hr {
 	align-items: center;
 	font-size: 1.25rem;
 	font-weight: 500;
+	border-radius: 0.375rem;
+    height: calc(100% - 3rem);
 }
 .total-fuel .field-output {
 	color: rgb(220, 53, 69);
diff --git a/styles/radio-field.css b/styles/radio-field.css
index 9884583..7c43e58 100644
--- a/styles/radio-field.css
+++ b/styles/radio-field.css
@@ -18,8 +18,11 @@
 }
 
 .radio-field input:checked+label:before {
-	background-color: #f4f4f4;
-	box-shadow: inset 0 0 0 0.4375em #dc3545;
+	/* background-color: #f4f4f4;
+	box-shadow: inset 0 0 0 0.4375em #dc3545; */
+    content: '\2713';
+    color: #dc3545;
+    font-weight: bold;
 }
 
 .radio-field label {
@@ -33,7 +36,6 @@
 .radio-field label:before {
 	display: flex;
 	flex-shrink: 0;
-	content: "";
 	background-color: #212529;
 	width: 1.5em;
 	height: 1.5em;
@@ -41,4 +43,7 @@
 	margin-right: .75em;
 	transition: 0.25s ease;
 	box-shadow: inset 0 0 0 0.05em #495057;
+	content: "";
+    align-items: center;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/styles/range-field.css b/styles/range-field.css
index 981d9e7..47035f6 100644
--- a/styles/range-field.css
+++ b/styles/range-field.css
@@ -21,8 +21,8 @@
 .range-field input::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none; 
-	height: 15px;
-	width: 15px;
+	height: 22px;
+	width: 22px;
 	background-color: rgb(220, 53, 69);
 	border-radius: 50%;
 	border: none;
@@ -45,21 +45,21 @@
 }
   
 .range-field input:not([disabled])::-webkit-slider-thumb:hover {
-	box-shadow: 0 0 0 10px rgba(255,85,0, .1)
+	box-shadow: 0 0 0 5px rgba(255,85,0, .1)
 }
 .range-field input:not([disabled]):active::-webkit-slider-thumb {
-	box-shadow: 0 0 0 13px rgba(255,85,0, .2)
+	box-shadow: 0 0 0 5px rgba(255,85,0, .2)
 }
 .range-field input:not([disabled]):focus::-webkit-slider-thumb {
-	box-shadow: 0 0 0 13px rgba(255,85,0, .2)
+	box-shadow: 0 0 0 5px rgba(255,85,0, .2)
 }
 
 .range-field input:not([disabled])::-moz-range-thumb:hover {
-	box-shadow: 0 0 0 10px rgba(255,85,0, .1)
+	box-shadow: 0 0 0 5px rgba(255,85,0, .1)
 }
 .range-field input:not([disabled]):active::-moz-range-thumb {
-	box-shadow: 0 0 0 13px rgba(255,85,0, .2)
+	box-shadow: 0 0 0 5px rgba(255,85,0, .2)
 }
 .range-field input:not([disabled]):focus::-moz-range-thumb {
-	box-shadow: 0 0 0 13px rgba(255,85,0, .2)    
+	box-shadow: 0 0 0 5px rgba(255,85,0, .2)    
 }