Flatten control accents: no gradient or glow on buttons, tabs, or the FAB
Some checks are pending
DevPlace CI / test (pull_request) Blocked by required conditions
Details

Browse Source 
The reference design uses flat primary buttons, so every interactive
control drops the brand gradient and the accent glow: .btn-primary
(flat accent, accent-hover on hover), the feed nav tabs, the projects
tabs, the sidebar active link, and the create-post FAB (which keeps a
neutral elevation shadow). Gradients remain only on decorative meters
and stripes (XP fills, progress bars, the project card top stripe).
The now-unused --glow-accent token is removed, and deepsearch.css
loses its var() fallback on the progress gradient.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
blindxfish 2026-08-09 21:36:51 +02:00
parent c09e6b328c
commit 3fca4be72e
6 changed files with 8 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
devplacepy/static/css/base.css
View File

@ -444,15 +444,13 @@ img {
} }
.btn-primary { .btn-primary {
background: var(--accent-gradient); background: var(--accent);
color: var(--on-accent); color: var(--on-accent);
box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.3);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--accent-hover);
color: var(--white); color: var(--white);
box-shadow: var(--glow-accent);
transform: translateY(-1px);
} }
.btn-secondary { .btn-secondary {

2
devplacepy/static/css/deepsearch.css
View File

@ -160,7 +160,7 @@
.ds-progress-bar { .ds-progress-bar {
height: 100%; height: 100%;
width: 0; width: 0;
background: var(--accent-gradient, var(--accent)); background: var(--accent-gradient);
transition: width 0.3s ease; transition: width 0.3s ease;
} }

7
devplacepy/static/css/feed.css
View File

@ -38,9 +38,8 @@
} }
.feed-nav-btn.active { .feed-nav-btn.active {
background: var(--accent-gradient); background: var(--accent);
color: var(--on-accent); color: var(--on-accent);
box-shadow: var(--glow-accent);
} }
.feed-nav-actions { .feed-nav-actions {
@ -368,14 +367,14 @@
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: 50%; border-radius: 50%;
background: var(--accent-gradient); background: var(--accent);
color: var(--on-accent); color: var(--on-accent);
font-size: 2rem; font-size: 2rem;
line-height: 1; line-height: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: var(--glow-accent); box-shadow: var(--shadow);
z-index: var(--z-fab); z-index: var(--z-fab);
border: none; border: none;
cursor: pointer; cursor: pointer;

3
devplacepy/static/css/projects.css
View File

@ -27,9 +27,8 @@
} }
.projects-tab.active { .projects-tab.active {
background: var(--accent-gradient); background: var(--accent);
color: var(--on-accent); color: var(--on-accent);
box-shadow: var(--glow-accent);
} }
.projects-header { .projects-header {

3
devplacepy/static/css/sidebar.css
View File

@ -76,10 +76,9 @@
.sidebar-link.active, .sidebar-link.active,
.sidebar-link.active:hover { .sidebar-link.active:hover {
background: var(--accent-gradient); background: var(--accent);
color: var(--on-accent); color: var(--on-accent);
font-weight: 600; font-weight: 600;
box-shadow: var(--glow-accent);
} }
.sidebar-dot { .sidebar-dot {

1
devplacepy/static/css/variables.css
View File

@ -36,7 +36,6 @@
--shadow-sm: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
--shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05);
--glow-accent: 0 6px 24px rgba(183, 63, 30, 0.45);
--white: #fff; --white: #fff;
--overlay-dark: rgba(0, 0, 0, 0.7); --overlay-dark: rgba(0, 0, 0, 0.7);