running-tools

commit b6275617a730321f07e188982d2d2886828bc12a
parent e4fc78a1aa40d710bb01979e611992af15d5e422
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Sun, 22 Aug 2021 20:12:39 -0700

Improve styles and add dark theme

Diffstat:
M
src/App.vue
 | 
6
+++++-
M
src/assets/global.css
 | 
71
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
M
src/components/TimeInput.vue
 | 
2
+-
M
src/components/TimeTable.vue
 | 
10
++++++----
M
src/views/Home.vue
 | 
1
+
M
src/views/PaceCalculator.vue
 | 
1
+
M
src/views/RaceCalculator.vue
 | 
1
+

7 files changed, 83 insertions(+), 9 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -24,7 +24,7 @@
 
 <style scoped>
 header {
-  background-color: hsl(30, 100%, 50%);
+  background-color: var(--theme);
   padding: 0.5em;
   display: grid;
   grid-template-columns: 2em 1fr auto 1fr 2em;
@@ -36,6 +36,10 @@ header a {
   height: 2em;
   width: 2em;
 }
+header a img {
+  padding: 0em;
+  filter: invert(0%) !important;
+}
 h1 {
   grid-column: 3;
   font-size: 2em;
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -7,13 +7,18 @@
 body {
   font-family: Segoe UI, sans-serif;
 }
-input, select {
-  padding: 0.2em;
+input, select, button {
+  padding: 0.3em 0.5em;
+  border-radius: 0.4em;
+}
+button {
+  cursor: pointer;
 }
 
 /* styles for icons */
 .icon {
   border: none;
+  padding: 0em;
   background-color: #00000000;
   cursor: pointer;
   vertical-align: middle;
@@ -21,11 +26,71 @@ input, select {
 .icon img {
   width: 100%;
   height: 100%;
+  padding: 0.3em;
 }
 
-/* default styles for mobile devices */
+/* styles for mobile devices */
 @media only screen and (max-width: 800px) {
   input, select, button {
     font-size: 1em;
   }
 }
+
+/* element colors */
+body, input, select, button, option {
+  color: var(--foreground);
+}
+body {
+  background-color: var(--background1);
+}
+button, input, select, option, tr:nth-child(2n) {
+  background-color: var(--background2);
+}
+button:hover, button:focus, select:hover, select:focus, input:hover, input:focus {
+  background-color: var(--background3);
+}
+button:active {
+  background-color: var(--background4);
+}
+button, input, select, tr {
+  border: 1px solid var(--background5);
+}
+
+/* light/default theme */
+:root {
+  /* The theme color of the app */
+  --theme: hsl(30, 100%, 50%);
+
+  /* The background color of the app */
+  --background1: #ffffff;
+
+  /* The default background color of app elements */
+  --background2: #f8f8f8;
+
+  /* The background color of focused app elements */
+  --background3: #f0f0f0;
+
+  /* The background color of active app elements */
+  --background4: #e8e8e8;
+
+  /* The border color of app elements */
+  --background5: #e0e0e0;
+
+  /* The foreground color of app elements */
+  --foreground: #000000;
+}
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background1: hsl(210, 20%, 10%);
+    --background2: hsl(210, 20%, 15%);
+    --background3: hsl(210, 20%, 20%);
+    --background4: hsl(210, 20%, 25%);
+    --background5: hsl(210, 20%, 30%);
+    --foreground: #e8e8e8;
+  }
+  .icon img {
+    filter: invert(90%);
+  }
+}
diff --git a/src/components/TimeInput.vue b/src/components/TimeInput.vue
@@ -93,7 +93,7 @@ div {
   display: inline-block;
 }
 .hours, .minutes {
-  width: 2em;
+  width: 2.5em;
 }
 .seconds {
   width: 4em;
diff --git a/src/components/TimeTable.vue b/src/components/TimeTable.vue
@@ -191,18 +191,15 @@ export default {
 .targets .add-target td {
   text-align: center;
   padding: 0.5em 0.2em;
+  background-color: var(--background1) !important;
 }
 
 /* general table styles */
 table {
   border-collapse: collapse;
-  min-width: 300px;
   width: 100%;
   text-align: left;
 }
-table tr {
-  border: 0.1em solid #000000;
-}
 table th, table td {
   padding: 0.2em;
 }
@@ -219,4 +216,9 @@ table button.icon {
   height: 1em;
   width: 1em;
 }
+@media (prefers-color-scheme: dark) {
+  .empty-message img {
+    filter: invert(90%);
+  }
+}
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -55,6 +55,7 @@ export default {
   }
   .calculators button {
     margin: 0.3em 0em;
+    padding: 0.75em 0.5em;
   }
 }
 </style>
diff --git a/src/views/PaceCalculator.vue b/src/views/PaceCalculator.vue
@@ -154,6 +154,7 @@ export default {
 /* calculator output */
 .output {
   margin-top: 10px;
+  min-width: 300px;
 }
 @media only screen and (max-width: 500px) {
   .output {
diff --git a/src/views/RaceCalculator.vue b/src/views/RaceCalculator.vue
@@ -137,6 +137,7 @@ export default {
 /* calculator output */
 .output {
   margin-top: 10px;
+  min-width: 300px;
 }
 @media only screen and (max-width: 500px) {
   .output {