diff --git a/src/App.vue b/src/App.vue index 34f63140..c38cf0c8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -94,11 +94,4 @@ onStartTyping(() => { display: none; } } - -.content { - padding: 0 $small; - margin-top: $small; - overflow: auto; - padding-right: $small !important; -} diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss index 5cd5d38f..4b126bc2 100644 --- a/src/assets/css/global.scss +++ b/src/assets/css/global.scss @@ -1,5 +1,6 @@ @import "../css/ProgressBar.scss"; @import "mixins.scss"; +@import "./moz.scss"; :root { --separator: #ffffff46; @@ -85,11 +86,26 @@ a { max-width: 2720px; height: 100vh; margin: 0 auto; + gap: $small; +} + +#acontent { + grid-area: content; + width: calc(100% + $small); + max-width: 1955px; + overflow: hidden auto; + margin: 0 auto; + padding-right: $medium; + margin-bottom: $small; + + .nav { + margin: $small; + width: calc(100% - 1rem); + } } .tabs { grid-area: tabs; - border-left: solid 1px $gray3; @include tablet-landscape { display: none; @@ -137,24 +153,9 @@ a { display: flex; } -#acontent { - grid-area: content; - width: 100%; - max-width: 1955px; - padding: $small; - padding-left: 0; - overflow: auto; - margin: 0 auto; - - .nav { - margin: $small; - width: calc(100% - 1rem); - } -} - .r-sidebar { grid-area: r-sidebar; - border-left: solid 1px $gray3; + // border-left: solid 1px $gray3; } .image { @@ -187,7 +188,7 @@ a { /* width */ ::-webkit-scrollbar { - width: 0.5rem; + width: 3px; } /* Track */ diff --git a/src/assets/css/moz.scss b/src/assets/css/moz.scss new file mode 100644 index 00000000..72b6c623 --- /dev/null +++ b/src/assets/css/moz.scss @@ -0,0 +1,16 @@ +// Styles that only apply on our dear Firefox + +@-moz-document url-prefix() { + #acontent { + padding-right: 1rem !important; + } + + #ap-page { + width: 100% !important; + padding-right: 1rem !important; + } + + .ap-page-bottom-container { + width: calc(100% - 1rem) !important; + } +} diff --git a/src/assets/images/noise-texture.svg b/src/assets/images/noise-texture.svg new file mode 100644 index 00000000..8acc4de0 --- /dev/null +++ b/src/assets/images/noise-texture.svg @@ -0,0 +1,78 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue index 6bf05e8e..45abe96d 100644 --- a/src/components/AlbumView/Header.vue +++ b/src/components/AlbumView/Header.vue @@ -15,6 +15,7 @@ v-motion-slide-from-left class="rounded shadow-lg" /> +
@@ -187,6 +188,7 @@ function theyContrast(color1: string, color2: string) { .art { display: flex; align-items: flex-end; + position: relative; img { height: 16rem; @@ -194,6 +196,11 @@ function theyContrast(color1: string, color2: string) { object-fit: cover; transition: all 0.2s ease-in-out; } + + .filter { + position: absolute; + // display: none; + } } .nocontrast { diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue index fd9cc654..f438e7c8 100644 --- a/src/components/FolderView/FolderList.vue +++ b/src/components/FolderView/FolderList.vue @@ -1,37 +1,32 @@ - diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue index 34b10c85..c8a56221 100644 --- a/src/components/FolderView/SongList.vue +++ b/src/components/FolderView/SongList.vue @@ -130,9 +130,10 @@ function getTracks() { } .table { - width: 100%; height: 100%; overflow-y: hidden; + background-color: $gray5; + padding: $small 0; .current { a { diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue index ac1e8bc9..56405594 100644 --- a/src/components/shared/SongItem.vue +++ b/src/components/shared/SongItem.vue @@ -1,6 +1,6 @@