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

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>