From 8cebfb54ab9351fc1570419c61fa77cde044ecc3 Mon Sep 17 00:00:00 2001 From: tsb95 Date: Fri, 14 Nov 2025 18:44:24 -1000 Subject: [PATCH] add fading in/out background glow and lighter gridlines. --- static/css/style.css | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 44bc1ba..7116808 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -5,6 +5,12 @@ --background-radial-percent: 70%; } +@keyframes pulseGlow { + 0% { box-shadow: 0 0 10px rgba(0,255,255,0.4); } + 50% { box-shadow: 0 0 18px rgba(0,255,255,0.7); } + 100% { box-shadow: 0 0 10px rgba(0,255,255,0.4); } +} + body { background: #141E30; /* fallback for old browsers */ background: hsla(0, 0%, 0%, 1); @@ -32,7 +38,13 @@ body { background: -webkit-linear-gradient(to right, #3c1053, #ad5389); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ - /* border: .5px solid #bebcbc76; subtle outer border */ + border: 1px solid rgba(255, 255, 255, 0.25); + box-shadow: + 0 0 12px rgba(0, 255, 255, 0.4), + 0 0 24px rgba(150, 0, 255, 0.25), + inset 0 0 12px rgba(255, 255, 255, 0.1); + border-radius: 8px; /* optional, looks more "techno" */ + animation: pulseGlow 3.5s ease-in-out infinite; } .audiowide-regular { @@ -85,8 +97,7 @@ h1 { .cell { width: var(--cell-size); height: var(--cell-size); - - border: .25px solid rgba(222, 219, 219, 0.281); /* light subtle grid lines */ + border: 1px solid rgba(255, 255, 255, 0.07); box-sizing: border-box; /* ensures borders don't expand cells */ }