itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): compact spacing pass + row hover affordance (#223)

Browse Source 
Tightens the Settings panels globally: section margin-bottom 32→20px,
card padding 20→12px, divider margin 12→8px, section header h2
16→15px. Adds a subtle accent-tinted hover background on every
.settings-toggle-row (extended to card edges via negative
horizontal margin). Vertical row padding kept at 2px so the diet
isn't undone by the hover affordance.

Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frank Stellmacher
2026-04-20 22:58:19 +02:00
committed by GitHub
parent 2d3be10c8f
commit f510223d2d
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+12 -5
View File
@@ -2430,7 +2430,7 @@
} }
.settings-section { .settings-section {
margin-bottom: var(--space-8); margin-bottom: var(--space-5);
} }
.settings-section-header { .settings-section-header {
@@ -2438,11 +2438,11 @@
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--space-2);
color: var(--accent); color: var(--accent);
margin-bottom: var(--space-3); margin-bottom: var(--space-2);
} }
.settings-section-header h2 { .settings-section-header h2 {
font-size: 16px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -2451,7 +2451,7 @@
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-5); padding: var(--space-3);
} }
.settings-card.user-row { .settings-card.user-row {
@@ -2837,12 +2837,19 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-4); gap: var(--space-4);
padding: 2px var(--space-3);
margin: 0 calc(var(--space-3) * -1);
border-radius: var(--radius-sm);
transition: background 120ms ease;
}
.settings-toggle-row:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
} }
.settings-section-divider { .settings-section-divider {
border: none; border: none;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
margin: var(--space-3) 0; margin: var(--space-2) 0;
} }
/* ─ Sidebar Customizer ─ */ /* ─ Sidebar Customizer ─ */