diff --git a/src/assets/css/BottomBar/BottomBar.scss b/src/assets/css/BottomBar/BottomBar.scss index 775e7c96..58820b87 100644 --- a/src/assets/css/BottomBar/BottomBar.scss +++ b/src/assets/css/BottomBar/BottomBar.scss @@ -4,7 +4,6 @@ .grid { background-color: $primary; - display: grid; height: 100%; padding-right: $small; diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss index 4b126bc2..93d13c2c 100644 --- a/src/assets/css/global.scss +++ b/src/assets/css/global.scss @@ -1,6 +1,6 @@ @import "../css/ProgressBar.scss"; @import "mixins.scss"; -@import "./moz.scss"; +// @import "./moz.scss"; :root { --separator: #ffffff46; @@ -71,32 +71,37 @@ a { display: none; } +input[type="search"] { + height: 2.25rem; +} + .l-container { display: grid; grid-template-columns: min-content 1fr min-content; - grid-template-rows: 3.5rem 1fr 1fr; - grid-auto-flow: row; + grid-template-rows: 2.5rem 1fr 4rem; grid-template-areas: "l-sidebar nav search-input" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content tabs"; - width: 100%; align-content: center; max-width: 2720px; - height: 100vh; + height: calc(100vh - 1rem); margin: 0 auto; - gap: $small; + gap: 1rem; + margin: $small; +} + +#tabs { + grid-area: tabs; + height: 3.5rem; } #acontent { grid-area: content; - width: calc(100% + $small); max-width: 1955px; overflow: hidden auto; - margin: 0 auto; - padding-right: $medium; - margin-bottom: $small; + margin-top: -$small; .nav { margin: $small; @@ -124,7 +129,6 @@ a { width: 17rem; grid-area: l-sidebar; background-color: $black; - margin: $small; padding: 1rem; } @@ -155,7 +159,8 @@ a { .r-sidebar { grid-area: r-sidebar; - // border-left: solid 1px $gray3; + margin-top: -$small; + width: 29rem; } .image { @@ -194,7 +199,7 @@ a { /* Track */ ::-webkit-scrollbar-track { - background: rgba(51, 51, 51, 0.459); + background: transparent; border-radius: 1rem; } @@ -244,6 +249,7 @@ a { background-position: 0 38%; } } + @keyframes similarAlbums { 0% { background-position: 0 38%; diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue index f438e7c8..ed036153 100644 --- a/src/components/FolderView/FolderList.vue +++ b/src/components/FolderView/FolderList.vue @@ -26,7 +26,7 @@ defineProps<{ gap: $medium; border-bottom: 1px solid $gray3; padding: 1rem 0; - padding-top: $small; + padding-top: 0; margin-bottom: 1rem; } diff --git a/src/components/RightSideBar/Home/Main.vue b/src/components/RightSideBar/Home/Main.vue index 2533d3ff..c8592ad0 100644 --- a/src/components/RightSideBar/Home/Main.vue +++ b/src/components/RightSideBar/Home/Main.vue @@ -8,8 +8,6 @@ diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue index da6326ac..f1b8895d 100644 --- a/src/components/RightSideBar/Main.vue +++ b/src/components/RightSideBar/Main.vue @@ -27,9 +27,7 @@ const tabs = useTabStore(); diff --git a/src/components/RightSideBar/Search/AlbumGrid.vue b/src/components/RightSideBar/Search/AlbumGrid.vue index 7c590cad..89fc819f 100644 --- a/src/components/RightSideBar/Search/AlbumGrid.vue +++ b/src/components/RightSideBar/Search/AlbumGrid.vue @@ -36,7 +36,6 @@ function loadMore() { } .grid { - display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); flex-wrap: wrap; gap: 0.75rem; diff --git a/src/components/RightSideBar/Search/ArtistGrid.vue b/src/components/RightSideBar/Search/ArtistGrid.vue index 76ecb489..82c21a54 100644 --- a/src/components/RightSideBar/Search/ArtistGrid.vue +++ b/src/components/RightSideBar/Search/ArtistGrid.vue @@ -35,7 +35,6 @@ function loadMore() { } .grid { - display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } diff --git a/src/components/RightSideBar/Search/PlaylistsGrid.vue b/src/components/RightSideBar/Search/PlaylistsGrid.vue index 5a611d22..e30984ca 100644 --- a/src/components/RightSideBar/Search/PlaylistsGrid.vue +++ b/src/components/RightSideBar/Search/PlaylistsGrid.vue @@ -36,7 +36,6 @@ function loadMore() { } .grid { - display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); flex-wrap: wrap; gap: 0.75rem; diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue index 002d3511..2fe5e7a1 100644 --- a/src/components/RightSideBar/SearchInput.vue +++ b/src/components/RightSideBar/SearchInput.vue @@ -32,9 +32,9 @@ function unfocusThis() { diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue index 1b9cbd13..9beedacb 100644 --- a/src/views/FolderView.vue +++ b/src/views/FolderView.vue @@ -51,7 +51,6 @@ onBeforeRouteUpdate((to, from) => { #scrollable { overflow-y: auto; - height: calc(100% - $small); scrollbar-color: grey transparent; @include phone-only { diff --git a/src/views/Playlists.vue b/src/views/Playlists.vue index 9e999ddd..5f8cb324 100644 --- a/src/views/Playlists.vue +++ b/src/views/Playlists.vue @@ -25,7 +25,6 @@ const pStore = usePStore(); scrollbar-color: $gray2 transparent; .grid { - display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }