Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add configurable surface/sidebar colour + clearer sync-icon state

Browse Source 
- new user_settings.surface_color (nullable, device-local default, not synced):
  drives the web sidebar / top bar / surfaces; NULL derives from bg_color as
  before. Added to schema, migration, GET/PUT, NULLABLE_OVERRIDES, DEFAULT_SYNC.
- web: surface colour row in the settings table; applyTheme derives the whole
  surface family from it
- web: per-row sync icon now has real styling — ON shows the primary-tinted
  glyph on a pill, OFF shows a slashed, muted glyph (was previously unstyled,
  so synced/not-synced looked identical)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-14 22:01:16 +02:00
parent 4ab07ddcc3
commit 131f6b496d
9 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/css/app.css
View File

@@ -1410,6 +1410,23 @@ a { color: var(--primary); text-decoration: none; }
.sync-toggle-lg.on::after { transform: translateX(18px); }
.settings-row .sync-toggle { justify-self: center; }
/* Per-row sync toggle icon: ON = primary + pill, OFF = muted + slashed icon */
.sync-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 28px; padding: 0;
border: none; border-radius: 8px; cursor: pointer;
background: transparent; color: var(--text-3);
transition: color var(--transition), background var(--transition);
justify-self: center;
}
.sync-icon:hover { background: var(--bg-hover); color: var(--text-2); }
.sync-icon.on { color: var(--primary); background: var(--primary-dim); }
.sync-icon .si-on, .sync-icon .si-off { align-items: center; }
.sync-icon .si-on { display: none; }
.sync-icon .si-off { display: inline-flex; }
.sync-icon.on .si-off { display: none; }
.sync-icon.on .si-on { display: inline-flex; }
/* Per-row colour control: swatch + hex + reset, right-aligned */
.settings-color-ctl { display: flex; align-items: center; gap: 12px; }
.settings-color-ctl .ev-color-hex { width: 92px; }