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

New: Refreshed the hover effect on media cards on desktop

Browse Source 
Fix: Reworkd how borders on cards are styled to aliasing around the edges
Fix: Adjusted the width of thumb cards on phones
This commit is contained in:
lscambo13
2025-01-01 10:12:03 -08:00
parent 11a19d4689
commit 5245f3a8e5
1 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,8 @@
--tableBodyColor: rgb(31 41 55 / 1); --tableBodyColor: rgb(31 41 55 / 1);
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint)); --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
--cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%); --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
--hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 30%) 20%, rgb(255 255 255 / 10%) 40%); --hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
--hoverGradientB: radial-gradient(100% 250% at 90% 190%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.33) 100%);
--largerRadius: 1.25em; --largerRadius: 1.25em;
--largeRadius: 1em; --largeRadius: 1em;
--smallRadius: .5em; --smallRadius: .5em;
@@ -102,25 +103,44 @@ html {
.cardScalable { .cardScalable {
border-radius: var(--largeRadius); border-radius: var(--largeRadius);
border: var(--borderColor) solid var(--borderWidth) !important; border: var(--borderColor) solid calc(2 * var(--borderWidth)) !important;
overflow: hidden !important; overflow: hidden !important;
transition: 125ms transform; transition: 125ms transform;
} }
.layout-mobile .cardScalable {
border: var(--borderColor) solid var(--borderWidth) !important;
}
.cardImageContainer { .cardImageContainer {
border-radius: var(--largeRadius) !important transition: transform .375s;
}
.card.card-hoverable:hover .cardScalable {
border-color: var(--textColor) !important;
}
.card.card-hoverable:hover .cardImageContainer {
transform: scale(1.025);
}
.card.card-hoverable:hover .itemSelectionPanel {
transform: scale(1.025);
} }
.cardOverlayContainer { .cardOverlayContainer {
transition: .25s; transition: .25s;
border-radius: var(--largeRadius) !important; background: var(--hoverGradientA);
border: solid rgb(255 255 255 / 65%) var(--borderWidth); background-size: 200%;
background: var(--hoverGradient); background-position-x: 100%;
}
.layout-desktop .card.card-hoverable:hover .cardOverlayContainer {
background-position-x: 0%;
} }
.cardBox:not(.visualCardBox) .cardPadder { .cardBox:not(.visualCardBox) .cardPadder {
background-color: var(--lighterGradientPoint); background-color: var(--lighterGradientPoint);
border-radius: var(--largeRadius);
} }
.cardOverlayContainer>.cardOverlayFab-primary { .cardOverlayContainer>.cardOverlayFab-primary {
@@ -158,6 +178,14 @@ html {
backdrop-filter: blur(.25em); backdrop-filter: blur(.25em);
} }
.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer {
transform: scale(1);
}
.card.card-hoverable:hover .cardScalable {
transform: scale(1.02);
}
.listViewUserDataButtons { .listViewUserDataButtons {
flex-direction: column; flex-direction: column;
padding-inline-end: .75em; padding-inline-end: .75em;
@@ -199,7 +227,7 @@ html {
@media (min-width: 25em) { @media (min-width: 25em) {
.backdropCard { .backdropCard {
width: 49%; width: 46%;
} }
} }
@@ -781,9 +809,19 @@ progress+span {
.cardIndicators { .cardIndicators {
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
top: .2em; top: .5em;
} }
[dir=ltr] .cardIndicators {
right: .5em;
}
.layout-mobile .cardIndicators {
top: .2em;
right: .2em;
}
.indicator { .indicator {
border: solid rgb(124 124 124 / 50%) var(--borderWidth); border: solid rgb(124 124 124 / 50%) var(--borderWidth);
border-radius: 100em; border-radius: 100em;