add malibu glow on edge of lobby card on hover

This commit is contained in:
evanpelle
2026-04-29 13:58:00 -06:00
parent 4b66e40327
commit 67a42c2fac
2 changed files with 2 additions and 1 deletions
+1 -1
View File
@@ -299,7 +299,7 @@ export class GameModeSelector extends LitElement {
return html`
<button
@click=${() => this.validateAndJoin(lobby)}
class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface"
class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface hover:shadow-[var(--shadow-lobby-card-hover)]"
>
<!-- Image clipped separately so overflow-hidden doesn't block absolute children -->
<div
+1
View File
@@ -31,6 +31,7 @@
--shadow-malibu-blue-pill: 0 0 6px rgba(0, 132, 209, 0.35);
--shadow-malibu-blue-ring-sm: 0 0 0 4px rgba(0, 132, 209, 0.2);
--shadow-malibu-blue-ring-lg: 0 0 0 6px rgba(0, 132, 209, 0.3);
--shadow-lobby-card-hover: 0 0 0 2px #0084d1, 0 0 20px rgba(0, 132, 209, 0.5);
}
@layer base {