diff --git a/src/assets/radio-overlay.png b/src/assets/radio-overlay.png index 2213b532..be8b6b49 100755 Binary files a/src/assets/radio-overlay.png and b/src/assets/radio-overlay.png differ diff --git a/src/js/components/ContextMenuTrigger.js b/src/js/components/ContextMenuTrigger.js index 546754d2..85ae4788 100755 --- a/src/js/components/ContextMenuTrigger.js +++ b/src/js/components/ContextMenuTrigger.js @@ -15,7 +15,9 @@ export default class ContextMenuTrigger extends React.Component{ } return ( this.props.onTrigger(e)}> - + + + ); } diff --git a/src/js/views/Album.js b/src/js/views/Album.js index fc2a5121..24f71931 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -123,7 +123,9 @@ class Album extends React.Component{ - +
+ +
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index f9a12bc2..af431cac 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -163,7 +163,9 @@ class Playlist extends React.Component{ - +
+ +
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index a877619a..9efb96af 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -262,15 +262,30 @@ } .context-menu-trigger { + @include animate(); display: inline-block; - padding: 9px 10px 7px; - font-size: 18px; + padding: 14px 12px; cursor: pointer; vertical-align: top; - margin-left: 10px; + margin-top: -1px; position: relative; border-radius: 3px; + .dot { + width: 6px; + height: 6px; + border-radius: 5px; + background: $black; + display: inline-block; + margin: 1px; + } + + &.white { + .dot { + background: $white; + } + } + &:before { @include animate(); content: ''; diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 3149d523..a397db40 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -43,7 +43,7 @@ } :root .notouch:not(.dragging) &:not(.header):not(.no-click):hover { - background: rgba(150,150,150,0.1); + background: lighten($yellow, 10%); cursor: pointer; } diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 79730b6a..9fad7dd0 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -74,7 +74,7 @@ aside{ @include animate(); @include feature_font(); font-weight: 800; - font-size: 16px; + font-size: 15px; color: $black; text-decoration: none; display: block; @@ -107,7 +107,7 @@ aside{ } section { - padding: 15px 0; + padding-bottom: 20px; title { display: block; diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 231c07d8..a7070b32 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -76,7 +76,7 @@ input[type="submit"] { &:hover{ cursor: pointer; - box-shadow: 2px 3px 6px rgba(0,0,0,0.2); + box-shadow: 1px 2px 6px rgba(0,0,0,0.2); &:before { opacity: 0.15; @@ -158,45 +158,6 @@ input[type="submit"] { } } - &.context-menu-trigger { - border-color: transparent; - padding: 6px; - margin-bottom: 8px; - font-size: 20px; - min-width: 0; - line-height: 20px; - color: #000000; - vertical-align: bottom; - - .fa { - pointer-events: none; - } - - &:hover { - border-color: transparent; - background: rgba(0,0,0,0.1); - } - - &:active { - color: #FFFFFF; - background: #000000; - } - - &.white { - color: #FFFFFF; - - &:hover { - border-color: transparent; - background: rgba(255,255,255,0.1); - } - - &:active { - color: #000000; - background: #FFFFFF; - } - } - } - &[disabled], &[disabled="disabled"]{ opacity: 0.5; @@ -230,14 +191,6 @@ input[type="submit"] { } } -.actions { - - .button:last-of-type, - button:last-of-type { - margin-right: 0; - } -} - .field { display: block; padding-bottom: 8px; diff --git a/src/scss/views/_album.scss b/src/scss/views/_album.scss index b18d1dd3..1fae642c 100755 --- a/src/scss/views/_album.scss +++ b/src/scss/views/_album.scss @@ -1,6 +1,7 @@ main .album-view { - padding-left: 400px; + padding-left: 30%; + position: relative; .title { padding-bottom: 30px; @@ -26,11 +27,17 @@ main .album-view { padding-bottom: 5px; } - .thumbnail { + .thumbnail-wrapper { position: absolute; - max-width: 320px; - top: 40px; - left: 40px; + padding: 40px; + width: 30%; + top: 0; + left: 0; + box-sizing: border-box; + + .thumbnail { + max-width: 100%; + } } @include responsive( $bp_medium ){ diff --git a/src/scss/views/_playlist.scss b/src/scss/views/_playlist.scss index a8035da0..da21a624 100755 --- a/src/scss/views/_playlist.scss +++ b/src/scss/views/_playlist.scss @@ -1,6 +1,7 @@ main .playlist-view { - padding-left: 400px; + padding-left: 30%; + position: relative; .title { padding-bottom: 30px; @@ -26,11 +27,17 @@ main .playlist-view { padding-bottom: 5px; } - .thumbnail { + .thumbnail-wrapper { position: absolute; - max-width: 320px; - top: 40px; - left: 40px; + padding: 40px; + width: 30%; + top: 0; + left: 0; + box-sizing: border-box; + + .thumbnail { + max-width: 100%; + } } @include responsive( $bp_medium ){