boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-09-18 12:40:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Reduced backdrop opacity rather than brightness on mobile

Browse Source
This commit is contained in:
lscambo13
2025-07-19 11:56:32 -07:00
parent 50f6ce3864
commit c8db04413e
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Theme/ElegantFin-theme-nightly.css
View File

@@ -914,6 +914,18 @@ html {
} }
} }
@keyframes animMoveDownSecondaryPage {
from {
transform: translateY(-2em);
opacity: 0;
}
to {
transform: translateY(0);
opacity: .3;
}
}
@keyframes animMoveUp { @keyframes animMoveUp {
from { from {
transform: translateY(-90%); transform: translateY(-90%);
@@ -1103,16 +1115,14 @@ html {
height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important; height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important;
} }
.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard, .detailImageContainer .card.squareCard) .itemBackdrop { #itemDetailPage:has(.detailImageContainer .card.backdropCard),
filter: brightness(.5); #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) {
}
#itemDetailPage:has(.detailImageContainer .card.squareCard:has(.cardImageIcon:not(.person))) {
background: linear-gradient(180deg, var(--lighterGradientPointAlpha), var(--darkerGradientPointAlpha)) background: linear-gradient(180deg, var(--lighterGradientPointAlpha), var(--darkerGradientPointAlpha))
} }
#itemDetailPage:has(.detailImageContainer .card.backdropCard) { .layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
background: linear-gradient(180deg, var(--lighterGradientPointAlpha), var(--darkerGradientPointAlpha)) .layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
animation: animMoveDownSecondaryPage 1s ease-out forwards;
} }
.layout-mobile .cardImageIcon { .layout-mobile .cardImageIcon {