From 52041abdeaaeeff90b91bb9c2ed57f4296d03f74 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Wed, 25 Dec 2019 23:37:16 -0600
Subject: [PATCH] Meter styling

---
 src/assets/styles.css | 49 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index c3b25f2..fe513ec 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -1,6 +1,5 @@
 body {
   background: #282a36;
-  /*background: linear-gradient(180deg, rgba(40,42,54,1) 0%, rgba(67,33,58,1) 43%, rgba(27,12,31,1) 86%), #282a36;*/
   background-position-y: 15rem;
   background-repeat: no-repeat;
 }
@@ -103,3 +102,51 @@ meter {
   from { opacity: 0; }
   to   { opacity: 1; }
 }
+
+meter {
+  --background: #282a36;
+  --optimum: #ff79c6;
+  --sub-optimum: gold;
+  --sub-sub-optimum: crimson;
+
+  /* The gray background in Firefox */
+  background: var(--background);
+  display: block;
+  margin-bottom: 1em;
+  width: 100%;
+}
+
+/* The gray background in Chrome, etc. */
+meter::-webkit-meter-bar {
+  background: var(--background);
+}
+
+/* The green (optimum) bar in Firefox */
+meter:-moz-meter-optimum::-moz-meter-bar {
+  background: var(--optimum);
+}
+
+/* The green (optimum) bar in Chrome etc. */
+meter::-webkit-meter-optimum-value {
+  background: var(--optimum);
+}
+
+/* The yellow (sub-optimum) bar in Firefox */
+meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: var(--sub-optimum);
+}
+
+/* The yellow (sub-optimum) bar in Chrome etc. */
+meter::-webkit-meter-suboptimum-value {
+  background: var(--sub-optimum);
+}
+
+/* The red (even less good) bar in Firefox */
+meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--sub-sub-optimum);
+}
+
+/* The red (even less good) bar in Chrome etc. */
+meter::-webkit-meter-even-less-good-value {
+  background: var(--sub-sub-optimum);
+}