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

2
frontends/web/templates/base.html
View File

@@ -14,7 +14,7 @@
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/">
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="36" class="me-2">
<span class="fw-bold">Stegasoo</span>
<span class="fw-bold title-gold">Stegasoo</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>

2
frontends/web/templates/index.html
View File

@@ -9,7 +9,7 @@
<div class="d-flex align-items-end justify-content-center gap-4">
<img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="155">
<div style="margin-bottom: 40px;">
<h1 class="display-4 fw-bold mb-2">
<h1 class="display-4 fw-bold mb-2 title-gold">
Stegasoo
<span class="badge bg-success fs-6 ms-2">v4.0</span>
</h1>

35
frontends/web/templates/tools.html
View File

@@ -148,43 +148,46 @@
.tool-section { display: none; }
.tool-section.active { display: block; }
/* Green→lime→yellow gradient across tabs */
/* Green→amber gradient (12.5% lighter) */
.tool-tabs .btn-outline-primary {
background-color: rgba(0, 0, 0, 0.25);
}
.tool-tabs .btn-outline-primary:nth-of-type(1) {
color: #55df85;
border-color: #55df85;
color: #40d770;
border-color: #40d770;
}
.tool-tabs .btn-outline-primary:nth-of-type(2) {
color: #c4f26a;
border-color: #c4f26a;
color: #96da2c;
border-color: #96da2c;
}
.tool-tabs .btn-outline-primary:nth-of-type(3) {
color: #fdde4a;
border-color: #fdde4a;
color: #fdda64;
border-color: #fdda64;
}
.tool-tabs .btn-outline-primary:nth-of-type(1):hover {
background-color: rgba(85, 223, 133, 0.15);
background-color: rgba(64, 215, 112, 0.15);
}
.tool-tabs .btn-outline-primary:nth-of-type(2):hover {
background-color: rgba(196, 242, 106, 0.15);
background-color: rgba(150, 218, 44, 0.15);
}
.tool-tabs .btn-outline-primary:nth-of-type(3):hover {
background-color: rgba(253, 222, 74, 0.15);
background-color: rgba(253, 218, 100, 0.15);
}
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(1) {
background-color: #55df85;
border-color: #55df85;
background-color: #40d770;
border-color: #40d770;
color: #1a1a2e;
}
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(2) {
background-color: #c4f26a;
border-color: #c4f26a;
background-color: #96da2c;
border-color: #96da2c;
color: #1a1a2e;
}
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(3) {
background-color: #fdde4a;
border-color: #fdde4a;
background-color: #fdda64;
border-color: #fdda64;
color: #1a1a2e;
}
</style>