ad3laid3/Themepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: purple palette + outline/filter hover (unclipped by scroll container)

Browse source
This commit is contained in:
MiTHRAL 2026-05-01 03:22:58 -04:00
parent 914e2133e1
commit 5aa6533cd3
1 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
themepo-elegantfin.css
View file

@ -17,7 +17,8 @@
--mithral-dim: #94A3B8;
--mithral-dark: #334155;
--arcane-blue: #38BDF8;
--arcane-glow: rgba(56, 189, 248, 0.4);
--arcane-purple: #A78BFA;
--arcane-glow: rgba(167, 139, 250, 0.4);
--mithral-glow: rgba(226, 232, 240, 0.2);
/* Status Colors */
@ -74,7 +75,7 @@
body {
font-family: var(--font-body);
background-color: var(--obsidian) !important;
background-image: radial-gradient(ellipse at 50% 120%, rgba(56, 189, 248, 0.06) 0%, transparent 50%) !important;
background-image: radial-gradient(ellipse at 50% 120%, rgba(167, 139, 250, 0.06) 0%, transparent 50%) !important;
}
/* Make background transparent ONLY on item pages to reveal the backdrop */
@ -125,7 +126,7 @@ html::after {
height: 120vw;
max-width: 1400px;
max-height: 1400px;
border: 1px solid rgba(56, 189, 248, 0.03);
border: 1px solid rgba(167, 139, 250, 0.03);
border-radius: 50%;
z-index: -1;
pointer-events: none;
@ -159,11 +160,11 @@ body:has(#itemDetailPage) html::after,
.skinHeader {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
linear-gradient(180deg, rgba(56, 189, 248, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
linear-gradient(180deg, rgba(167, 139, 250, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
-webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
border: none !important;
border-bottom: 1px solid rgba(56, 189, 248, 0.22) !important;
border-bottom: 1px solid rgba(167, 139, 250, 0.22) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 12px 40px rgba(0, 0, 0, 0.5) !important;
@ -176,7 +177,7 @@ body:has(#itemDetailPage) html::after,
background: rgba(8, 9, 12, 0.12) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(56, 189, 248, 0.1) !important;
border: 1px solid rgba(167, 139, 250, 0.1) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.03) inset,
0 8px 32px rgba(0, 0, 0, 0.25) !important;
@ -236,7 +237,7 @@ body:has(#itemDetailPage) html::after,
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
rgba(8, 9, 12, 0.2) !important;
border: 1px solid rgba(56, 189, 248, 0.18) !important;
border: 1px solid rgba(167, 139, 250, 0.18) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 2px 4px rgba(0, 0, 0, 0.4),
@ -262,15 +263,14 @@ body:has(#itemDetailPage) html::after,
z-index: 1;
}
/* Hover: scale the whole card + subtle glow border */
/* Hover: outline + filter (neither clipped by overflow:hidden) */
.card-hoverable:hover .cardScalable {
transform: scale(1.06) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 16px rgba(56, 189, 248, 0.12),
0 12px 24px rgba(0, 0, 0, 0.55),
0 32px 64px rgba(0, 0, 0, 0.5) !important;
outline: 2px solid rgba(167, 139, 250, 0.55) !important;
outline-offset: 3px !important;
filter:
brightness(1.12)
drop-shadow(0 0 8px rgba(167, 139, 250, 0.35))
drop-shadow(0 16px 32px rgba(0, 0, 0, 0.6)) !important;
}
/* Library cards (visualCardBox) */
@ -278,10 +278,10 @@ body:has(#itemDetailPage) html::after,
.paperList {
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
linear-gradient(180deg, rgba(56, 189, 248, 0.07) 0%, rgba(8, 9, 12, 0.35) 100%) !important;
linear-gradient(180deg, rgba(167, 139, 250, 0.07) 0%, rgba(8, 9, 12, 0.35) 100%) !important;
backdrop-filter: blur(20px) saturate(1.8) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
border: 1px solid rgba(56, 189, 248, 0.18) !important;
border: 1px solid rgba(167, 139, 250, 0.18) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 2px 4px rgba(0, 0, 0, 0.4),
@ -291,23 +291,22 @@ body:has(#itemDetailPage) html::after,
}
.card-hoverable:hover .visualCardBox {
transform: scale(1.06) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 16px rgba(56, 189, 248, 0.12),
0 12px 24px rgba(0, 0, 0, 0.55),
0 32px 64px rgba(0, 0, 0, 0.5) !important;
outline: 2px solid rgba(167, 139, 250, 0.55) !important;
outline-offset: 3px !important;
filter:
brightness(1.12)
drop-shadow(0 0 8px rgba(167, 139, 250, 0.35))
drop-shadow(0 16px 32px rgba(0, 0, 0, 0.6)) !important;
}
/* Frutiger Aero glassmorphism drawer */
.mainDrawer {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 30%),
linear-gradient(180deg, rgba(56, 189, 248, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
linear-gradient(180deg, rgba(167, 139, 250, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
-webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
border-right: 1px solid rgba(56, 189, 248, 0.22) !important;
border-right: 1px solid rgba(167, 139, 250, 0.22) !important;
box-shadow:
-1px 0 0 rgba(255, 255, 255, 0.08) inset,
12px 0 40px rgba(0, 0, 0, 0.5) !important;