diff options
| author | Paul Buetow <paul@buetow.org> | 2025-06-22 23:02:12 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2025-06-22 23:02:12 +0300 |
| commit | 9e985948f171eb58b3c38b4059efb1c436c9a842 (patch) | |
| tree | 45233db768ea3e87e85bbd02e17e7393e8282211 /extras/html/themes/neutron_gateway/style.css | |
| parent | 2b78e5fcdf303f7055a67e13c5968e9ed92f56df (diff) | |
Fix retro theme visual effects and improve readability
- Fixed CSS validation issues (hex colors with alpha to rgba)
- Enhanced visual effects (scanlines, CRT, grid, dots, terminal) for better visibility
- Effects now properly display in Firefox and other browsers
- Made classic_matrix theme lighter with sharper text for better readability
- Enhanced retro glow effects to 125% for stronger vignette effect
- Added test_effects.html for testing visual effects
- All themes now W3C CSS compliant
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Diffstat (limited to 'extras/html/themes/neutron_gateway/style.css')
| -rw-r--r-- | extras/html/themes/neutron_gateway/style.css | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/extras/html/themes/neutron_gateway/style.css b/extras/html/themes/neutron_gateway/style.css index b5ea74d..e652c16 100644 --- a/extras/html/themes/neutron_gateway/style.css +++ b/extras/html/themes/neutron_gateway/style.css @@ -25,7 +25,7 @@ --color-primary: #ff3300; --color-secondary: #ff9900; --color-accent: #ffcc00; - --color-glow: #ff660033; + --color-glow: rgba(255, 102, 0, 0.2); } * { @@ -59,7 +59,7 @@ body::before { left: 0; right: 0; bottom: 0; - background: radial-gradient(ellipse at center, transparent 0%, var(--color-bg) 100%); + background: radial-gradient(ellipse at center, transparent 0%, var(--color-bg) 125%); pointer-events: none; z-index: 2; } @@ -255,10 +255,14 @@ p { /* Special retro effects */ @keyframes glitch { - 0%, 100% { text-shadow: 0 0 5px var(--color-glow); } - 25% { text-shadow: -2px 0 var(--color-accent), 2px 0 var(--color-secondary); } - 50% { text-shadow: 2px 0 var(--color-accent), -2px 0 var(--color-secondary); } - 75% { text-shadow: 0 0 10px var(--color-glow); } + 0%, 100% { text-shadow: 0 0 5px var(--color-glow); +} + 25% { text-shadow: -2px 0 var(--color-accent), 2px 0 var(--color-secondary); +} + 50% { text-shadow: 2px 0 var(--color-accent), -2px 0 var(--color-secondary); +} + 75% { text-shadow: 0 0 10px var(--color-glow); +}; } h1:hover { |