- { this.renderArtwork() }
+ { this.renderArtwork(image) }
{this.props.current_track ? this.props.current_track.name : -}
@@ -152,7 +153,7 @@ const mapStateToProps = (state, ownProps) => {
radio: state.ui.radio,
radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false),
current_tracklist: state.ui.current_tracklist,
- current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null),
+ current_track: (state.ui.current_track !== undefined && state.ui.tracks !== undefined && state.ui.tracks[state.ui.current_track.uri] !== undefined ? state.ui.tracks[state.ui.current_track.uri] : null)
}
}
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index ce783d1f..f403ad99 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -12,17 +12,17 @@
z-index: 99;
.liner {
- width: 160px;
+ width: 190px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
border-radius: 3px;
- background: $darkest_grey;
- font-size: 13px;
- font-weight: 600;
+ background: $grey;
+ font-size: 14px;
+ font-weight: 500;
font-family: "Overpass";
.title {
display: block;
- padding: 8px 12px;
+ padding: 10px 14px;
font-weight: bold;
box-sizing: border-box;
position: relative;
@@ -121,7 +121,7 @@
width: 0;
height: 100%;
overflow-y: scroll;
- background: $darkest_grey;
+ background: lighten($grey, 10%);
z-index: 3;
border-radius: 3px;
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 98e3e61d..15e29c75 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -12,7 +12,7 @@
display: block;
position: relative;
- padding: 14px 10px;
+ padding: 14px 10px 13px;
margin: 0 -10px -1px -10px;
cursor: pointer;
border-radius: 3px;
diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss
index afe1924b..0a6b6899 100755
--- a/src/scss/components/_loader.scss
+++ b/src/scss/components/_loader.scss
@@ -42,7 +42,7 @@
}
&.lazy-loader {
- padding: 20px 0 40px;
+ padding: 0;
.loader {
height: 40px;
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index f7850305..deafaeaf 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -246,6 +246,12 @@
}
}
+ &.send_authorization {
+ .list {
+ padding-top: 40px;
+ }
+ }
+
&.receive_authorization {
.user-details {
@include clearfix();
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index b7d3d3ed..8b052d75 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -12,7 +12,6 @@
.current-track {
@include animate();
- cursor: pointer;
position: absolute;
bottom: 50px;
width: 220px;
@@ -23,6 +22,7 @@
.thumbnail {
float: left;
margin: 12px;
+ cursor: pointer;
&:before {
@include animate();
@@ -127,7 +127,7 @@
}
&.progress {
- bottom: 12px;
+ bottom: 10px;
left: 140px;
right: 280px;
padding-left: 20px;
@@ -136,7 +136,7 @@
.slider {
position: absolute;
- bottom: 0;
+ bottom: 2px;
left: 60px;
right: 60px;
}
@@ -208,6 +208,7 @@
left: 60px;
right: 60px;
text-align: center;
+ font-size: 12px;
.title {
padding-top: 0;
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 53fc357f..7c36a8eb 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -5,11 +5,12 @@ aside{
left: 0;
bottom: 0;
z-index: 96;
- width: 219px;
+ width: 220px;
overflow: hidden;
background: $darkest_grey;
border-right: 1px solid lighten($dark_grey, 2%);
color: $white;
+ box-sizing: border-box;
.liner {
overflow-y: auto;
diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss
index 0c5c4097..9abb8e49 100755
--- a/src/scss/components/_slider.scss
+++ b/src/scss/components/_slider.scss
@@ -5,7 +5,7 @@
.track {
position: absolute;
- background: $dark_grey;
+ background: $grey;
border-radius: 2px;
.progress {
@@ -27,7 +27,7 @@
height: 20px;
.track {
- height: 5px;
+ height: 4px;
top: 42%;
right: 0;
left: 0;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 058ee34d..c4fd01a1 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -4,8 +4,9 @@ body,
html {
background: $dark_grey;
color: $light_grey;
- font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
+ font-family: "Overpass", Helvetica, Arial, sans-serif;
font-size: 14px;
+ letter-spacing: -0.01rem;
touch-action: manipulation;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
@@ -77,7 +78,9 @@ main {
pre {
padding: 20px;
- background: $faint_grey;
+ background: $darkest_grey;
+ border-radius: 3px;
+ color: $white;
white-space: pre-wrap;
word-wrap: break-word;
}
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index 82a14516..4a47af81 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -7,7 +7,6 @@
border: 0;
}
-button,
textarea,
input[type="text"],
input[type="email"],
@@ -18,8 +17,10 @@ select {
padding: 10px 14px;
background: rgba(255,255,255,0.1);
color: $white;
- font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
+ font-family: "Overpass", Helvetica, Arial, sans-serif;
font-size: 14px;
+ border-radius: 3px;
+ letter-spacing: -0.01rem;
&:focus,
&:active {
@@ -27,6 +28,12 @@ select {
}
}
+select {
+ option {
+ color: $darkest_grey;
+ }
+}
+
.button-wrapper {
padding: 10px 0;
margin-top: -1px;
@@ -50,25 +57,29 @@ input[type="button"],
input[type="submit"] {
@include animate();
@include feature_font();
- @include gradient_overlay();
+ font-size: 14px;
+ color: $black;
display: inline-block;
padding: 9px 30px 7px;
margin: 0 20px 10px 0;
- color: $black;
background: $white;
- font-size: 14px;
box-sizing: border-box;
border-radius: 3px;
vertical-align: middle;
position: relative;
border: 0 !important;
cursor: pointer;
+ letter-spacing: -0.01rem;
+
+ &:not(.no-hover){
+ @include gradient_overlay(3px, 0.05);
+ }
.notouch &:not(.no-hover):hover {
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
&:before {
- opacity: 0.15;
+ opacity: 0.2;
}
}
@@ -150,13 +161,12 @@ input[type="submit"] {
&[disabled="disabled"]{
opacity: 0.5;
cursor: not-allowed !important;
+ color: $mid_grey;
+ border-color: $mid_grey;
+ background: transparent;
- &,
- .notouch &:hover,
- &:active {
- color: $mid_grey;
- border-color: $mid_grey;
- background: transparent;
+ &:before {
+ opacity: 0.15;
}
}
@@ -178,7 +188,7 @@ input[type="submit"] {
.field {
display: block;
- padding-bottom: 8px;
+ padding-bottom: 12px;
@include clearfix;
.name {
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 04fd8e54..1275fb85 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -208,9 +208,9 @@ $bp_shallow: 650px;
opacity: $opacity;
z-index: 9;
pointer-events: none;
- background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
- background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
- background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
- background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+ background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
+ background: -moz-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
+ background: -o-linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
+ background: linear-gradient(to bottom right, rgba(255,255,255,.75), rgba(0,0,0,1));
}
}
diff --git a/src/scss/views/_queue.scss b/src/scss/views/_queue.scss
index 0e6fe5c5..7ff41da1 100755
--- a/src/scss/views/_queue.scss
+++ b/src/scss/views/_queue.scss
@@ -1,15 +1,20 @@
.queue-view {
+ .parallax {
+ opacity: 0.5;
+ margin-bottom: -45vh;
+ }
+
.current-track {
text-align: center;
- padding-bottom: 40px;
+ padding: 60px 0;
.artwork {
position: relative;
margin: 0 auto;
width: 60%;
- max-width: 400px;
+ max-width: 600px;
display: block;
border: 0 !important;