diff --git a/src/renderer/less/pages.css b/src/renderer/less/pages.css index 7c24781e..f26c2d3c 100644 --- a/src/renderer/less/pages.css +++ b/src/renderer/less/pages.css @@ -569,6 +569,23 @@ } } /* Album / Playlist Page */ +.album-header { + position: sticky; + left: 0; + z-index: 6; + padding: 0px 2em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + --bs-gutter-x: 4rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); + border-bottom: 1px solid rgba(200, 200, 200, 0.05); +} .playlist-page { --bgColor: transparent; padding: 0px; diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 5036c8dc..b7aa6bc2 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -695,6 +695,23 @@ } /* Album / Playlist Page */ +.album-header { + position: sticky; + left: 0; + z-index: 6; + padding: 0px 2em; + backdrop-filter: blur(32px); + background: rgba(0, 0, 0, 0.25); + top: var(--navigationBarHeight); + --bs-gutter-x: 4rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); + border-bottom: 1px solid rgba(200, 200, 200, 0.05); +} .playlist-page { --bgColor: transparent; padding: 0px; diff --git a/src/renderer/views/pages/library-albums.ejs b/src/renderer/views/pages/library-albums.ejs index 7df63963..f63cd631 100644 --- a/src/renderer/views/pages/library-albums.ejs +++ b/src/renderer/views/pages/library-albums.ejs @@ -10,7 +10,7 @@ :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %> -
+
@@ -63,15 +63,15 @@
+
-