Tweaked Color-Impaired styling for Series Index.

frontend/postcss.config.js

@@ -14,6 +14,7 @@ module.exports = (ctx, configPath, options) => {
             return Object.assign(acc, reload(vars));
           }, {})
       },
+      'postcss-color-function': {},
       'postcss-nested': {},
       autoprefixer: {
         browsers: [

frontend/src/Components/ProgressBar.css

@@ -43,17 +43,13 @@
 
 .primary {
   background-color: $primaryColor;
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
-  }
 }
 
 .danger {
   background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
   }
 }
 
@@ -69,7 +65,7 @@
   background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }
 

frontend/src/Series/Index/SeriesIndexFooter.css

@@ -22,10 +22,6 @@
   composes: legendItemColor;
 
   background-color: $primaryColor;
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $primaryColor, $primaryColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
-  }
 }
 
 .ended {
@@ -40,7 +36,7 @@
   background-color: $dangerColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $dangerColor, $dangerColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
   }
 }
 
@@ -50,7 +46,7 @@
   background-color: $warningColor;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $warningColor, $warningColor 10px, $colorImpairedAlternateGradient 10px, $colorImpairedAlternateGradient 20px);
+    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
   }
 }
 

frontend/src/Styles/Variables/colors.js

@@ -62,7 +62,6 @@ module.exports = {
   inputWarningBorderColor: '#ffa500',
   inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
   colorImpairedGradient: '#fcfcfc',
-  colorImpairedAlternateGradient: '#b0b0b0',
 
   //
   // Buttons

package.json

@@ -65,6 +65,7 @@
     "moment": "2.22.2",
     "mousetrap": "1.6.2",
     "normalize.css": "8.0.0",
+    "postcss-color-function": "4.0.1",
     "postcss-loader": "3.0.0",
     "postcss-mixins": "6.2.0",
     "postcss-nested": "4.1.0",