New: Added dithering to make gradients smoother

This commit is contained in:
lscambo13
2025-05-10 09:01:10 -07:00
parent 149879c10f
commit 34fc3aceb8

View File

@@ -1,6 +1,7 @@
/* ElegantFin Theme for Jellyfin by lscambo13 */
/* Add-ons: Uncomment to enable */
/* @import url(./assets/add-ons/extras-media-bar-nightly.css); */
/* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */
/* Inter Font Family */
@@ -409,7 +410,8 @@ html {
}
.layout-desktop .detailPageWrapperContainer {
background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent);
/* background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent); */
background: transparent;
min-height: calc(100vh - 13em);
}
@@ -651,32 +653,41 @@ html {
}
.backgroundContainer:not(.withBackdrop) {
background: var(--backgroundGradient)
background: var(--lighterGradientPoint);
}
.backgroundContainer:not(.withBackdrop):after {
content: '';
background: linear-gradient(0deg, var(--darkerGradientPoint) 35%, transparent 100%);
position: absolute;
inset: 0%;
filter: contrast(1.25);
-webkit-mask: url(https://grainy-gradients.vercel.app/noise.svg);
}
.backgroundContainer.withBackdrop {
opacity: .9375;
background: var(--backgroundGradient)
opacity: .98;
background: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPointAlpha) 100%);
}
.backdropContainer {
scale: 1.125;
overflow: hidden;
}
.backdropContainer::after {
content: '';
position: absolute;
inset: 0%;
background: var(--darkerGradientPointAlpha);
-webkit-mask: url(https://grainy-gradients.vercel.app/noise.svg);
}
.skinHeader-blurred:not(.osdHeader),
.appfooter {
background-color: var(--headerColor) !important;
backdrop-filter: var(--blurDefault) !important;
}
.headroom--unpinned {
-webkit-transform: translateY(-3.5em);
transform: translateY(-3.5em);
}
.skinHeader:not(.osdHeader) {
border-style: solid;
border-width: 0 0 var(--borderWidth) 0;
border-color: var(--borderColor);
transition: all .375s ease-in-out;
}
.lyricPage {
padding-inline: .5em;
}
@@ -847,7 +858,7 @@ progress+span {
border: var(--defaultLighterBorder);
padding: .5em .5em !important;
margin: 0.125em !important;
backdrop-filter: var(--blurSmallest);
backdrop-filter: var(--blurLarge);
}
.btnPlay.detailButton {