Fill chip media propotationally to confidence value (#156)

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: #156

src/css/detect.css

@@ -39,7 +39,8 @@
 }
 
 .chip-media {
-  background-color: var(--chip-media-background) !important;
+  /*background-color: var(--chip-media-background) !important;*/
+  background: var(--chip-media-gradient) !important;
 }
 
 .chip-results {

src/pages/detect.vue

@@ -258,7 +258,8 @@
     },
     methods: {
       chipGradient (confVal) {
-        return `--chip-media-background: hsl(${confVal / 100 * 120}deg 100% 50%)`
+        let confFactor = confVal / 100
+        return `--chip-media-gradient: conic-gradient(from ${270 - (confFactor * 360 / 2)}deg, hsl(${confFactor * 120}deg, 100%, 50%) ${confFactor}turn, hsl(${confFactor * 120}deg, 50%, 66%) ${confFactor}turn)`
       },
       async setData () {
         if (this.reloadModel) {

src/pages/help.vue

@@ -74,7 +74,7 @@
   }
 
   .demo-chip .chip-media {
-    background: conic-gradient(from 180deg, #00cc00 .75turn, #00000000 .75turn);
+    background: conic-gradient(from 135deg, #00cc00 .75turn, #00cc0088 .75turn) !important;
   }
 </style>