Add dark mode, simplify nav, and UI polish

- Dark mode via prefers-color-scheme: pure CSS, no JS, follows OS setting
- CSS custom properties for all colors; dark palette redefines variables
- Nav: brand is now a home link, Dashboard link removed, nowrap keeps
  it single-line on mobile; compact padding at 640px breakpoint
- Battery health % uses CSS classes (health-good/warn/bad) instead of
  inline Jinja colors — readable in both light and dark modes
- Stat card counts use CSS color variables for dark mode support
- Fix duplicate display:none on bulk toolbar
- input[type=date] added to themed input selector
This commit is contained in:
2026-04-12 22:55:23 -05:00
parent 3bc897c1e5
commit 768f83f63a
4 changed files with 180 additions and 43 deletions
+1 -1
View File
@@ -13,7 +13,7 @@
{% for device in devices %}
{% set full = device.installed_count() >= device.battery_slots %}
{% set mix = device.installed_brands() and battery.brand not in device.installed_brands() %}
<div style="margin-bottom:0.75rem;padding:0.75rem;border:1px solid #e2e8f0;border-radius:4px;
<div class="device-option" style="margin-bottom:0.75rem;padding:0.75rem;border:1px solid #e2e8f0;border-radius:4px;
{% if full %}opacity:0.5;{% endif %}background:#fff;">
<label style="display:flex;align-items:center;gap:0.6rem;font-weight:normal;min-height:44px;cursor:{% if full %}not-allowed{% else %}pointer{% endif %};">
<input type="radio" name="device_id" value="{{ device.id }}"