webclient - Adjust some colors

bebac · Aug 8, 2017 · b7e52d5 · b7e52d5
1 parent 0231db3
commit b7e52d5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/webclient/src/App.vue b/webclient/src/App.vue
@@ -48,9 +48,9 @@
     #header
     {
       flex: 0 0 auto;
-      background: linear-gradient(to bottom, saturate(rgba(241, 239, 236, 1), 2%), rgba(241, 239, 236, 0.2));
-      border-top: 1px solid desaturate(darken(rgba(241, 239, 236, 1), 2%), 10%);
-      border-bottom: 1px solid desaturate(darken(rgba(241, 239, 236, 1), 2%), 5%);
+      background: linear-gradient(to bottom, saturate($color-base, 2%), transparentize($color-base, 0.4));
+      //border-top: 1px solid desaturate(darken($color-base, 5%), 10%);
+      border-bottom: 1px solid desaturate(darken($color-base, 10%), 5%);
     }
 
     #main
@@ -63,7 +63,7 @@
     #footer
     {
       flex: 0 0 4em;
-      background-color: rgba(241, 239, 236, 1);
+      background-color: $color-base;
     }
   }
 </style>
diff --git a/webclient/src/components/Header.vue b/webclient/src/components/Header.vue
@@ -85,7 +85,7 @@
       align-items: center;
       flex: 1;
       padding: 1em;
-      color: #b5a871;
+      color: darken($color-base, 25%);
 
       >div:nth-child(2)
       {
@@ -123,9 +123,9 @@
         a
         {
           padding: 0 1em;
-          font-weight: 600;
+          font-weight: bold;
           text-transform: uppercase;
-          color: #aaa;
+          color: desaturate(darken($color-complement, 15%), 10%);
         }
 
         a:link
@@ -144,7 +144,7 @@
 
         a.router-link-active
         {
-          color: #666;
+          color: desaturate(darken($color-complement, 40%), 10%);
         }
       }
 

diff --git a/webclient/src/components/Tracks.vue b/webclient/src/components/Tracks.vue
@@ -193,17 +193,18 @@
       thead
       {
         flex: 0;
-        color: #333;
-        //background-color: desaturate(darken(rgba(241, 239, 236, 1), 2%), 10%);
-        //background-color: lighten(#D4D7DB, 13%);
+        color: #555;
+        //background-color: saturate(darken($color-complement, 0%), 0%);
         box-shadow: 0px -2px 12px rgba(140, 139, 127, 0.4);
+        border-bottom: 1px solid #eee;
         text-transform: uppercase;
         font-weight: bold;
         z-index: 1;
 
         th
         {
-          transform: scaleY(0.68);
+          //transform: scaleY(0.68);
+          font-size: 0.72em;
         }
 
         tr.item