New styles (#83)

* Cleaning up _header, _vars,  app for PR

* Cleaning up _griditem for PR

* Cleaning up _listitem for PR

* Cleaned up _mediaplayer for PR

Should all be good now for PR

Author: mirshko

app/scss/_griditem.scss

@@ -32,7 +32,7 @@
   width: 100%;
   height: 100%;
 
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba($black, .3);
 
   transition: all 150ms;
   opacity: 0;
@@ -46,7 +46,7 @@
   width: 100%;
   height: 100%;
 
-  color: #fff;
+  color: $white;
   font-size: 60px;
 
   line-height: 200px;
@@ -88,9 +88,9 @@
   padding: 2px 5px 0px 5px;
 
   position: absolute;
-  color: #fff;
+  color: $white;
 
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: rgba($black, 0.87);
 
   left: 10px;
   pointer-events: none;
@@ -102,13 +102,13 @@
 
 .grid-item .item__artist {
   bottom: 33px;
-  color: #C1C1C1;
+  color: $grey-400;
 }
 
 .item__footer {
   height: 16px;
   font-size: 12px;
-  color: #666;
+  color: $grey-700;
 
   margin-top: 15px;
 }

app/scss/_header.scss

@@ -2,8 +2,8 @@
  * Header styles
  */
 header {
-  $height: 42px;
-  background-color: #333;
+  $height: 48px;
+  background-color: $grey-900;
 
   height: $height;
   line-height: $height;
@@ -18,26 +18,26 @@ header {
   li { flex: 1; }
 
   a {
+    -webkit-user-drag: none;
     display: block;
     height: $height;
 
-    color: rgba(255, 255, 255, .6);
+    color: $secondary-text;
     font-size: 13px;
     font-weight: 500;
 
     text-transform: uppercase;
     text-decoration: none;
     text-align: center;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 1);
 
     letter-spacing: 0.5px;
 
     transition: background-color 150ms;
 
-    &.active, &:hover { color: rgba(255, 255, 255, .85); }
+    &.active, &:hover { color: $primary-text; }
 
     &.active {
-      border-bottom: solid 2px #f50;
+      border-bottom: solid 4px $soundcloud;
     }
   }
 

app/scss/_listitem.scss

@@ -1,25 +1,23 @@
 @import 'mixins';
 
 .list-item {
-  &:nth-child(odd) { background-color: #FCFCFC; }
-  &:nth-child(even) { background-color: #FFF; }
+  background-color: $white;
 
   // tracks within a playlist
   .list-item {
-    &:nth-child(odd) { background-color: #FFF; }
-    &:nth-child(even) { background-color: #FCFCFC; }
+    background-color: $white;
   }
 
 }
 
 // playlist headers should always be white in the playlists views
 .content__view__playlists {
-  .list-item.playlist { background-color: #FFF; }
+  .list-item.playlist { background-color: $white; }
 }
 
 .list-item {
   $height: 64px;
-  background-color: #fff;
+  background-color: $white;
 
   overflow: hidden;
   width: 100%;
@@ -29,28 +27,28 @@
   &:not(.playlist) {
 
     &:hover, &.active {
-      background-color: rgba(#f50, 0.05);
+      background-color: rgba($black, 0.05);
     }
 
     &:hover .cover__overlay { opacity: 1; }
 
     &.active {
-      .item__title { color: #f50; }
+      .item__title { color: $soundcloud; }
       .cover__overlay { opacity: 1; }
     }
 
   }
 
   &.playlist .playlist__header {
     &:hover, &.active {
-      background-color: rgba(#f50, 0.05);
+      background-color: rgba($black, 0.05);
     }
     &:hover .cover__overlay { opacity: 1; }
   }
 
   &.playlist.active {
     .playlist__header {
-      .item__title { color: #f50; }
+      .item__title { color: $soundcloud; }
       .cover__overlay { opacity: 1; }
     }
   }
@@ -75,9 +73,9 @@
     width: 100%;
     height: 100%;
 
-    background-color: rgba(#f50, .85);
+    background-color: rgba($soundcloud, .70);
 
-    transition: all 100ms;
+    transition: all .2s;
     opacity: 0;
   }
 
@@ -87,7 +85,7 @@
     width: 100%;
     height: 100%;
 
-    color: #fff;
+    color: $white;
     font-size: 35px;
 
     line-height: 100%;
@@ -124,7 +122,7 @@
   }
 
   .item__artist {
-    color: #888;
+    color: $grey-700;
   }
 
   .item__title {}

app/scss/_mediaplayer.scss

@@ -5,15 +5,13 @@
   width: 100%;
   height: auto;
 
-  background-color: #f2f2f2;
+  background-color: $white;
 
   transition: transform 300ms, height 300ms;
 
   .media-player__controls {
     position: relative;
-    background-image: linear-gradient(180deg, #FFF, #E3E3E3);
-
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
+    background-color: $white;
 
     .controls__play-pause-skip {
       display: flex;
@@ -36,13 +34,13 @@
       font-size: 28px;
       padding: 0;
 
-      color: #555;
+      color: $grey-700;
 
       width: 35px;
       vertical-align: middle;
 
       i.fi {
-        background-image: linear-gradient(0deg, #999, #333);
+        background-color: $grey-700;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
@@ -53,7 +51,7 @@
     button[disabled] i,
     button[disabled] i {
       background-image: none;
-      background-color: #CCC;
+      background-color: $grey-300;
     }
 
     .controls__actions {
@@ -67,8 +65,9 @@
       font-size: 16px;
     }
 
-    .meta__favorite {
-      i.active { background-image: linear-gradient(0deg, #F70, #F30); }
+    .meta__favorite i {
+      &.fi { background-color: $grey-300; }
+      &.active { background-color: $soundcloud; }
     }
 
     .controls__next,
@@ -157,15 +156,14 @@
     width: 100%;
     height: 2px;
     cursor: pointer;
-    background: #F50;
+    background: $soundcloud;
     border-radius: 1.3px;
   }
   input[type=range]::-webkit-slider-thumb {
     height: 12px;
     width: 12px;
     border-radius: 12px;
-    background: linear-gradient(180deg, #FFF, #E3E3E3);
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+    background: $soundcloud;
     cursor: pointer;
     -webkit-appearance: none;
     margin-top: -5.2px;
@@ -181,8 +179,7 @@
   text-align: center;
   cursor: default;
 
-  color: #666;
-  text-shadow: 0 1px 0 rgba(#fff, .85);
+  color: $grey-700;
 
   -webkit-user-select: none;
 }
@@ -220,11 +217,11 @@
 }
 
 .seeker__progress-bar::-webkit-progress-bar {
-  background-color: rgba(#C1C1C1, .85);
+  background-color: rgba($grey-300, .85);
 }
 
 .seeker__progress-bar::-webkit-progress-value {
-  background-color: #f50;
+  background-color: $soundcloud;
   transition: all 200ms;
 }
 
@@ -240,7 +237,7 @@
 
   float: right;
 
-  background-color: #f50;
+  background-color: $soundcloud;
 
   cursor: pointer;
 }
@@ -252,22 +249,25 @@
 
 .media-player__meta {
   font-size: 13px;
-  color: #fff;
+  color: $white;
   padding: 10px;
 
   .meta__artist,
   .meta__title {
     cursor: pointer;
   }
 
+  .meta__title {
+    margin-top: -1px; // Adjust the height of author and title so they seem as part of the same box
+  }
   > div {
     max-width: 100%;
     @include truncate();
 
     display: block;
 
     > span {
-      background-color: rgba(0, 0, 0, .9);
+      background-color: rgba($black, .9);
       padding: 4px 6px;
       line-height: 25px;
 

app/scss/_vars.scss

@@ -0,0 +1,21 @@
+/**
+ * Variables
+ */
+$soundcloud: #f50 !default;
+
+$primary-text: rgba(255, 255, 255, 1.00) !default;
+$secondary-text: rgba(255, 255, 255, 0.70) !default;
+$disabled-text: rgba(255, 255, 255, 0.50) !default;
+
+$white: #fff !default;
+$black: #000 !default;
+
+$grey-50: #FAFAFA !default;
+$grey-100: #F5F5F5 !default;
+$grey-200: #EEEEEE !default;
+$grey-300: #E0E0E0 !default;
+$grey-400: #BDBDBD !default;
+
+$grey-700: #616161 !default;
+$grey-800: #424242 !default;
+$grey-900: #212121 !default;

app/scss/app.scss

@@ -1,4 +1,5 @@
 @import 'mixins';
+@import 'vars';
 
 * {
   box-sizing: border-box;
@@ -85,7 +86,7 @@ i.fi {
 
     position: fixed;
 
-    background-color: #f50;
+    background-color: $soundcloud;
     -webkit-mask: url('../assets/loader.svg') no-repeat 50% 50%;
     -webkit-mask-size: cover;