-
diff --git a/src/scss/components/_dragger.scss b/src/scss/components/_dragger.scss
index a3f80c03..1f2bc5f8 100755
--- a/src/scss/components/_dragger.scss
+++ b/src/scss/components/_dragger.scss
@@ -28,7 +28,7 @@
width: 100%;
height: 100%;
z-index: 98;
- background: $off_white;
+ background: darken($dark_grey, 1%);
.dropzone {
@include animate();
diff --git a/src/scss/components/_dropdown-field.scss b/src/scss/components/_dropdown-field.scss
index 3b95ad88..0705f29a 100755
--- a/src/scss/components/_dropdown-field.scss
+++ b/src/scss/components/_dropdown-field.scss
@@ -46,9 +46,9 @@
background: $white;
width: 0;
height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-bottom: 6px solid $mid_grey;
+ border-left: 5px solid $darkest_grey;
+ border-right: 5px solid $darkest_grey;
+ border-bottom: 6px solid $white;
}
.option {
diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss
index 7cc69e51..ce7f861c 100755
--- a/src/scss/components/_grid.scss
+++ b/src/scss/components/_grid.scss
@@ -94,7 +94,7 @@
}
&:not(.mini){
.grid-item {
- @include grid_item( 5 )
+ @include grid_item( 4 )
}
}
}
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index b8402f27..3d6f8909 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -39,7 +39,7 @@ main {
padding: 13px 10px;
margin: 0;
min-width: 0;
- color: $black;
+ color: $white;
&:hover {
color: $blue;
@@ -57,20 +57,7 @@ main {
top: 0;
left: 0;
width: 100%;
- color: $white;
z-index: 95;
-
- .icon {
- -webkit-filter: invert(1);
- -moz-filter: invert(1);
- filter: invert(1);
- }
-
- .context-menu-trigger {
- .dot {
- background: $white;
- }
- }
}
@include responsive( $bp_medium ){
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss
index 0ea00604..59184fa6 100755
--- a/src/scss/components/_images.scss
+++ b/src/scss/components/_images.scss
@@ -76,9 +76,9 @@
z-index: 9;
pointer-events: none;
background: -webkit-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
- background: -moz-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
- background: -o-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
- background: linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
+ background: -moz-linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1));
+ background: -o-linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1));
+ background: linear-gradient(rgba(38,39,40,0),rgba(38,39,40,1));
}
canvas {
@@ -90,7 +90,7 @@
left: -5%;
&.loaded {
- opacity: 0.4;
+ opacity: 0.8;
}
}
@@ -105,7 +105,7 @@
padding-bottom: 60px;
.tile {
- color: $dark_grey;
+ color: $white;
text-align: center;
position: relative;
z-index: 1;
@@ -133,7 +133,7 @@
margin-top: -27px;
font-size: 60px;
z-index: -1;
- color: $faint_grey;
+ opacity: 0.1;
}
}
@@ -142,7 +142,7 @@
display: block;
width: 100%;
padding-bottom: 100%;
- background: $light_grey;
+ background: lighten($dark_grey,2%);
z-index: -2;
}
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index c9129da8..1d712a0e 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -12,7 +12,7 @@
display: block;
position: relative;
- padding: 12px 10px;
+ padding: 14px 10px;
margin: 0 -10px -1px -10px;
cursor: pointer;
border-radius: 3px;
@@ -334,10 +334,10 @@
&.track-list {
.list-item.can-sort {
- padding: 8px 30px 8px 78px !important;
+ padding-left: 78px !important;
}
.list-item:not(.can-sort){
- padding: 8px 30px 8px 38px !important;
+ padding-left: 42px !important;
}
}
}
diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss
index 598ab459..afe1924b 100755
--- a/src/scss/components/_loader.scss
+++ b/src/scss/components/_loader.scss
@@ -28,7 +28,7 @@
top: 0;
left: 0;
border: {
- color: $darkest_grey;
+ color: lighten($dark_grey, 5%);
}
}
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index 719b874b..d1850f17 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -5,8 +5,9 @@
bottom: 0;
right: 0;
left: 0;
- height: 50px;
- background: darken($darkest_grey, 5%);
+ height: 49px;
+ background: lighten($dark_grey, 3%);
+ border-top: 1px solid lighten($dark_grey, 8%);
color: $white;
.current-track {
diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss
index 2569e8bb..7e08e7e8 100755
--- a/src/scss/components/_sidebar-toggle-button.scss
+++ b/src/scss/components/_sidebar-toggle-button.scss
@@ -6,7 +6,7 @@
left: 0;
padding: 18px;
z-index: 98;
- color: #FFFFFF;
+ color: $white;
font-size: 18px;
cursor: pointer;
display: none;
@@ -15,14 +15,6 @@
display: block;
}
- header & {
- color: $dark_grey;
- }
-
- header.overlay & {
- color: $white;
- }
-
&.open {
position: fixed;
top: 0;
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 07b81c9f..c822b1b6 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -30,10 +30,10 @@ aside{
line-height: 1em;
a {
- @include feature_font();
@include gradient_overlay(3px);
- font-weight: 800;
- font-size: 15px;
+ font-family: "Overpass";
+ font-weight: 500;
+ font-size: 14px;
color: $white;
text-decoration: none;
display: block;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 3de7d23a..274be777 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -3,7 +3,7 @@
body,
html {
background: $dark_grey;
- color: $white;
+ color: $light_grey;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px;
touch-action: manipulation;
@@ -51,9 +51,10 @@ main {
color: inherit;
text-decoration: none;
cursor: pointer;
+ border-bottom: 1px solid transparent;
&:hover {
- opacity: 0.7;
+ border-color: $mid_grey;
}
}
@@ -84,6 +85,7 @@ main {
h1 {
@include feature_font();
+ color: $white;
font-weight: 800;
font-size: 3rem;
line-height: 3.2rem;
@@ -114,7 +116,7 @@ h4 {
&.underline {
padding-bottom: 4px;
- border-bottom: 1px solid #000000;
+ border-bottom: 1px solid $grey;
}
&:not(:first-child){
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index 955847a9..82a14516 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -16,10 +16,15 @@ input[type="email"],
input[type="date"],
select {
padding: 10px 14px;
- background: $faint_grey;
- color: $darkest_grey;
+ background: rgba(255,255,255,0.1);
+ color: $white;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px;
+
+ &:focus,
+ &:active {
+ background: rgba(255,255,255,0.2);
+ }
}
.button-wrapper {
@@ -49,8 +54,8 @@ input[type="submit"] {
display: inline-block;
padding: 9px 30px 7px;
margin: 0 20px 10px 0;
- color: $white;
- background: $black;
+ color: $black;
+ background: $white;
font-size: 14px;
box-sizing: border-box;
border-radius: 3px;
@@ -69,8 +74,7 @@ input[type="submit"] {
&:active {
@include noanimate();
- background: $black;
- color: $white;
+ background: darken($white,5%);
margin-top: 1px;
margin-bottom: 9px;
}
@@ -170,9 +174,6 @@ input[type="submit"] {
padding-left: 20px;
padding-right: 20px;
}
-
- @include responsive( $bp_narrow ){
- }
}
.field {
@@ -239,26 +240,15 @@ input[type="submit"] {
width: 14px;
height: 14px;
border-radius: 50%;
- border: 2px solid #000000;
+ border: 2px solid $mid_grey;
position: absolute;
top: 4px;
left: 0;
}
input:checked + .label:before {
- background: #000000;
- box-shadow: inset 0px 0px 0px 4px #f5f5f5;
- }
-
- &.white {
- input + .label:before {
- border-color: #FFFFFF;
- }
-
- input:checked + .label:before {
- background: #FFFFFF;
- box-shadow: inset 0px 0px 0px 4px #222222;
- }
+ background: $mid_grey;
+ box-shadow: inset 0px 0px 0px 4px #222222;
}
}
@@ -267,12 +257,12 @@ input[type="submit"] {
font-family: FontAwesome;
font-size: 8px;
content: ' ';
- color: #000000;
+ color: $mid_grey;
display: inline-block;
width: 11px;
height: 11px;
padding: 3px 0 0 3px;
- border: 2px solid #000000;
+ border: 2px solid $mid_grey;
position: absolute;
top: 5px;
left: 0;
@@ -281,16 +271,6 @@ input[type="submit"] {
input:checked + .label:before {
content: '\f00c';
}
-
- &.white {
- input + .label:before {
- border-color: #FFFFFF;
- }
-
- input:checked + .label:before {
- color: #FFFFFF;
- }
- }
}
.error {
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 2f675fa6..b6fd003a 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -2,11 +2,11 @@
$turquoise: #08d58f;
$off_white: #F5F5F5;
$faint_grey: #f4f2f0;
-$light_grey: #edeae7;
+$light_grey: #cecac4;
$mid_grey: #a3a19f;
$grey: #383734;
$dark_grey: #262728;
-$darkest_grey: #1d1e1f;
+$darkest_grey: #171819;
$secondary_grey: #888888;
$white: #FFFFFF;
$black: #000000;
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index 9a92da30..a10ec10a 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -22,27 +22,16 @@
.liner {
position: relative;
z-index: 1;
- padding: 30vh 40px 0 350px;
-
- .thumbnail {
- position: absolute;
- z-index: 2;
- left: 40px;
- bottom: 40px;
- max-width: 264px;
-
- .image {
- background-color: $darkest_grey;
- }
- }
+ padding: 35vh 40px 0;
h1 {
color: $white;
padding-bottom: 25px;
+ font-size: 4rem;
}
.actions {
- padding-bottom: 60px;
+ padding-bottom: 20px;
.context-menu-trigger {
color: $white;
@@ -50,19 +39,19 @@
}
.sub-views {
- color: #FFFFFF;
-
.option {
+ @include feature_font();
+ color: $white;
display: inline-block;
padding: 8px 0;
margin-right: 25px;
- font-size: 18px;
- font-weight: 400;
- border-bottom: 4px solid transparent;
+ font-size: 15px;
+ font-weight: 500;
+ border-bottom: 1px solid transparent;
cursor: pointer;
&.active {
- border-color: $off_white;
+ border-color: $white;
}
&:not(.active):hover {