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;
}