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