Bigger slider thumbs, more distinctive radios, better spacing

simongymer · Jan 30, 2025 · 54d8173 · 54d8173
1 parent 5cd24b8
commit 54d8173
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git 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
@@ -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,13 +119,22 @@ 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;
 	justify-content: space-between;
 	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
@@ -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,12 +36,14 @@
 .radio-field label:before {
 	display: flex;
 	flex-shrink: 0;
-	content: "";
 	background-color: #212529;
 	width: 1.5em;
 	height: 1.5em;
 	border-radius: 50%;
 	margin-right: .75em;
 	transition: 0.25s ease;
 	box-shadow: inset 0 0 0 0.05em #495057;
+	content: "";
+    align-items: center;
+    justify-content: center;
 }
diff --git 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)    
 }