diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss index dc63bc4c..0d317a7a 100644 --- a/src/assets/scss/Global/app-grid.scss +++ b/src/assets/scss/Global/app-grid.scss @@ -59,9 +59,9 @@ #acontent { grid-area: content; - overflow: hidden scroll; - margin-right: -1rem; - padding-right: calc($medium - 1px); + overflow: hidden auto; + margin-right: calc(0rem - ($medium + 2px)); + padding-right: calc($medium); .nav { margin: $small; @@ -112,4 +112,4 @@ .b-bar { grid-area: bottombar; -} \ No newline at end of file +} diff --git a/src/assets/scss/Global/scrollbars.scss b/src/assets/scss/Global/scrollbars.scss index fcfc40d7..6174149d 100644 --- a/src/assets/scss/Global/scrollbars.scss +++ b/src/assets/scss/Global/scrollbars.scss @@ -1,5 +1,5 @@ ::-webkit-scrollbar { - width: $smaller; + width: 3px; } /* Track */ diff --git a/src/assets/scss/moz.scss b/src/assets/scss/moz.scss index 13e21eb4..c8dbb5d6 100644 --- a/src/assets/scss/moz.scss +++ b/src/assets/scss/moz.scss @@ -2,10 +2,18 @@ @-moz-document url-prefix() { #acontent { - margin-right: -1rem; + margin-right: calc(-1rem + 1px); padding-right: 1rem; } + .header-list-layout { + margin-right: calc(0rem - ($medium + 4px)) !important; + + .scrollable { + padding-right: calc(1rem - 3px) !important; + } + } + #app-grid.isSmall, #app-grid.disableSidebar { #acontent { diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue index 1a4d1f8f..e1a26b85 100644 --- a/src/components/shared/AlbumCard.vue +++ b/src/components/shared/AlbumCard.vue @@ -28,9 +28,12 @@ defineProps<{ .result-item { display: grid; gap: $small; - padding: $small; - transition: all 0.5s ease; - border-radius: 0.7rem; + padding: $medium; + border-radius: 1rem; + + &:hover { + background-color: $gray4; + } img { width: 100%; diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue index 68b4d0ab..7285d46a 100644 --- a/src/components/shared/ArtistCard.vue +++ b/src/components/shared/ArtistCard.vue @@ -1,12 +1,8 @@ @@ -29,14 +25,21 @@ defineProps<{ overflow: hidden; position: relative; - border-radius: 0.75rem; + border-radius: $medium; display: grid; + gap: $small; justify-content: center; + padding: 1.2rem 1rem !important; + font-size: 0.9rem; + font-weight: bolder; + + &:hover { + background-color: $gray4; + } .artist-image { width: 100%; - border-radius: 60%; - margin-bottom: $small; + // margin-bottom: $small; transition: all 0.5s ease-in-out; object-fit: cover; } diff --git a/src/layouts/HeaderAndVList.vue b/src/layouts/HeaderAndVList.vue index f5f24293..37f94c40 100644 --- a/src/layouts/HeaderAndVList.vue +++ b/src/layouts/HeaderAndVList.vue @@ -6,7 +6,7 @@ :style="{ paddingTop: headerHeight - 64 + 16 + 'px' }" @scroll="handleScroll" > -
+
.header-list-layout { + margin-right: calc(0rem - ($medium)); + + .scrollable { + padding-right: calc(1rem - $small + 2px); + scrollbar-width: thin; + } + .header { position: relative; diff --git a/src/views/Search.vue b/src/views/Search.vue index b14cf249..75bf60c4 100644 --- a/src/views/Search.vue +++ b/src/views/Search.vue @@ -22,8 +22,8 @@ import Main from "@/components/RightSideBar/Search/Main.vue"; } .artists-results { - margin-right: $small; - margin-left: -$small; + margin-right: calc($medium + 1px); + margin-left: 0; } .search-results-grid {