diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index fb1b64a..07862ec 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -147,6 +147,10 @@ html { transition: width 650ms; } +/* .card:hover .cardScalable { + box-shadow: 0px 4px 13px 0px black; +} */ + .card:focus .cardBox:not(.visualCardBox) .cardScalable { border-color: var(--highlightOutlineColor) !important; filter: brightness(1.125); @@ -2653,6 +2657,55 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } } +.nowPlayingPageImageContainer { + /* position: relative; */ + /* z-index: 0; */ + /* keep image above the glow */ + /* display: inline-block; */ + /* or block, depending on your layout */ +} + +.nowPlayingPageImageContainer::before { + /* content: ""; */ + /* position: absolute; */ + /* top: -10px; */ + /* expand beyond edges for glow */ + /* left: -10px; */ + /* right: -10px; */ + /* bottom: -10px; */ + /* border-radius: 12px; */ + /* round corners like image (adjust if needed) */ + /* background: linear-gradient(270deg,red, orange, yellow, green, blue, indigo, violet, red); */ + /* background-size: 1400% 1400%; */ + /* filter: blur(10px); */ + /* animation: rainbowGlow 8s linear infinite; */ + /* z-index: -1; */ + /* behind the image */ + /* opacity: 0.8; */ +} + +/* Make sure the container is positioned relative so ::before works */ +.nowPlayingPageImageContainer { + /* position: relative; */ + /* border-radius: 12px; */ + /* match the glow rounding */ +} + +/* Rainbow animation */ +@keyframes rainbowGlow { + /* 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + }*/ +} + .layout-mobile .playlistSection .playlist { padding: 4.3em 0; top: 0;