diff --git a/src/assets/icons/sdcard.svg b/src/assets/icons/sdcard.svg new file mode 100644 index 00000000..0a863280 --- /dev/null +++ b/src/assets/icons/sdcard.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/shuffle.svg b/src/assets/icons/shuffle.svg index 09914732..47d2851a 100644 --- a/src/assets/icons/shuffle.svg +++ b/src/assets/icons/shuffle.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss index fa60c9c6..a7b45d22 100644 --- a/src/assets/scss/Global/basic.scss +++ b/src/assets/scss/Global/basic.scss @@ -50,6 +50,17 @@ a { color: #fff; } +button { + border: none; + font-size: 0.9rem !important; + color: inherit; + border-radius: $small; + display: flex; + align-items: center; + justify-content: center; + height: 2rem; +} + .separator { border-top: 0.1px $separator solid; color: transparent; diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue index 0f1fe56b..4b5308fb 100644 --- a/src/components/LeftSidebar/Navigation.vue +++ b/src/components/LeftSidebar/Navigation.vue @@ -70,8 +70,6 @@ const menus = [ } svg { - width: 2rem; - height: 2rem; margin: 0 $small 0 $small; border-radius: $small; } diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue index 9cf0cfbc..930c9530 100644 --- a/src/components/RightSideBar/Queue.vue +++ b/src/components/RightSideBar/Queue.vue @@ -2,18 +2,24 @@ - - - Clear - Shuffle - Shuffle - Go to Mix - - - Save as Playlist - - + + + + + Clear + + + + Save As Playlist + + + + + + + + { position: relative; height: 100%; display: grid; - grid-template-rows: max-content max-content 1fr max-content; + grid-template-rows: max-content 1fr max-content; gap: $small; + .left { + display: flex; + gap: $small; + } + .queue-actions { display: flex; justify-content: space-between; gap: $small; - padding: $small; + margin-bottom: -1.25rem; + margin-top: $small; .action { - background-color: $accent; padding: $smaller; - border-radius: $smaller; - font-size: 0.8rem; - padding: inherit 1rem; + padding-right: $small; + background-image: linear-gradient(70deg, $gray3, $gray2); + + svg { + transform: scale(0.8); + } + } + + .more-action { + padding-right: $smaller; + svg { + transform: scale(1.25); + } } } .scrollable-r { height: 100%; - padding: $small 0 $small $small; + padding: $small; overflow: hidden; + display: grid; + grid-template-rows: max-content 1fr; + gap: $medium; .inner { height: 100%; + margin-right: -$small; overflow: scroll; margin-top: 1rem; padding-right: $small;