From 5aa6533cd3084fdd5e5df9964df21381c58fb5d7 Mon Sep 17 00:00:00 2001 From: MiTHRAL Date: Fri, 1 May 2026 03:22:58 -0400 Subject: [PATCH] feat: purple palette + outline/filter hover (unclipped by scroll container) --- themepo-elegantfin.css | 51 +++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/themepo-elegantfin.css b/themepo-elegantfin.css index bbfb18d..f7d68df 100644 --- a/themepo-elegantfin.css +++ b/themepo-elegantfin.css @@ -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;