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);
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
--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;
--largeRadius: 1em;
--smallRadius: .5em;
@@ -102,25 +103,44 @@ html {
.cardScalable {
border-radius: var(--largeRadius);
border: var(--borderColor) solid var(--borderWidth) !important;
border: var(--borderColor) solid calc(2 * var(--borderWidth)) !important;
overflow: hidden !important;
transition: 125ms transform;
}
.layout-mobile .cardScalable {
border: var(--borderColor) solid var(--borderWidth) !important;
}
.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 {
transition: .25s;
border-radius: var(--largeRadius) !important;
border: solid rgb(255 255 255 / 65%) var(--borderWidth);
background: var(--hoverGradient);
background: var(--hoverGradientA);
background-size: 200%;
background-position-x: 100%;
}
.layout-desktop .card.card-hoverable:hover .cardOverlayContainer {
background-position-x: 0%;
}
.cardBox:not(.visualCardBox) .cardPadder {
background-color: var(--lighterGradientPoint);
border-radius: var(--largeRadius);
}
.cardOverlayContainer>.cardOverlayFab-primary {
@@ -158,6 +178,14 @@ html {
backdrop-filter: blur(.25em);
}
.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer {
transform: scale(1);
}
.card.card-hoverable:hover .cardScalable {
transform: scale(1.02);
}
.listViewUserDataButtons {
flex-direction: column;
padding-inline-end: .75em;
@@ -199,7 +227,7 @@ html {
@media (min-width: 25em) {
.backdropCard {
width: 49%;
width: 46%;
}
}
@@ -781,9 +809,19 @@ progress+span {
.cardIndicators {
-webkit-align-items: center;
align-items: center;
top: .2em;
top: .5em;
}
[dir=ltr] .cardIndicators {
right: .5em;
}
.layout-mobile .cardIndicators {
top: .2em;
right: .2em;
}
.indicator {
border: solid rgb(124 124 124 / 50%) var(--borderWidth);
border-radius: 100em;