alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish UI styling across site

Browse Source 
- Flip gradient to purple→blue (eggplant #4a2860 → blue #5570d4)
- Add gold title styling (.title-gold) for Stegasoo branding
- Style two-choice toggles with gradient-matched purple/blue colors
- Equal-width toggle buttons with hover highlight
- Tools page: green→amber tab gradient with dark background
- Dashed separator between toggle options

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-04 14:56:08 -05:00
parent 81d3f37f09
commit fb55878727
4 changed files with 62 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontends/web/static/style.css
View File

@@ -6,8 +6,8 @@
CSS Variables
---------------------------------------------------------------------------- */
:root {
--gradient-start: #667eea;
--gradient-end: #764ba2;
--gradient-start: #4a2860;
--gradient-end: #5570d4;
--bg-dark-1: #1a1a2e;
--bg-dark-2: #16213e;
--bg-dark-3: #0f3460;
@@ -146,6 +146,45 @@ body {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
}
.title-gold {
color: var(--header-gold);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
/* Two-choice toggle buttons - gradient-matched colors + equal width */
.btn-group .btn-outline-primary,
.btn-group .btn-outline-secondary {
flex: 1 1 0;
transition: all 0.2s ease;
}
.btn-group .btn-outline-primary:hover,
.btn-group .btn-outline-secondary:hover {
background-color: rgba(255, 255, 255, 0.08);
}
.btn-group .btn-outline-primary:first-of-type,
.btn-group .btn-outline-secondary:first-of-type {
color: #6b4d8a;
border-color: #6b4d8a;
border-right: 1px dashed rgba(255, 255, 255, 0.2);
}
.btn-group .btn-outline-primary:last-of-type,
.btn-group .btn-outline-secondary:last-of-type {
color: #4a62a8;
border-color: #4a62a8;
}
.btn-group .btn-check:checked + .btn-outline-primary:first-of-type,
.btn-group .btn-check:checked + .btn-outline-secondary:first-of-type {
background-color: #6b4d8a;
border-color: #6b4d8a;
color: #fff;
}
.btn-group .btn-check:checked + .btn-outline-primary:last-of-type,
.btn-group .btn-check:checked + .btn-outline-secondary:last-of-type {
background-color: #4a62a8;
border-color: #4a62a8;
color: #fff;
}
/* Override small warning text to use header gold */
.text-warning.small {
color: var(--header-gold) !important;