refactor(web): finished JavaScript consolidation, tested JavaScript items, refined themes and color palettes, tested all themes and palettes, ensured all interactive lements use theme-aware css

This commit is contained in:
matt 2025-10-29 15:45:40 -07:00
parent 9379732eec
commit 3c45a31aa3
19 changed files with 498 additions and 632 deletions

View file

@ -3,7 +3,7 @@
{ 'name': display_name, 'name_lower': lower, 'owned': bool, 'tags': list[str] }
]
#}
<div class="alts" style="margin-top:.35rem; padding:.5rem; border:1px solid var(--border); border-radius:8px; background:#0f1115;" data-skeleton data-skeleton-label="Pulling alternatives…" data-skeleton-delay="450">
<div class="alts" style="margin-top:.35rem; padding:.5rem; border:1px solid var(--border); border-radius:8px; background:var(--panel);" data-skeleton data-skeleton-label="Pulling alternatives…" data-skeleton-delay="450">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem; gap:.5rem; flex-wrap:wrap;">
<div style="display:flex;align-items:center;gap:.5rem;">
<strong>Alternatives</strong>

View file

@ -35,7 +35,8 @@
style="display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;">
<label style="flex:1; min-width:220px;">
<span class="sr-only">Theme name</span>
<input type="text" name="theme" data-theme-input placeholder="e.g., Lifegain" maxlength="60" autocomplete="off" autocapitalize="off" spellcheck="false" style="width:100%; padding:.5rem; border-radius:6px; border:1px solid var(--border); background:var(--input-bg, #161921); color:var(--text-color, #f9fafb);" {% if disable_add %}disabled aria-disabled="true"{% endif %} />
<input type="text" name="theme" data-theme-input placeholder="e.g., Lifegain"
style="width:100%; padding:.5rem; border-radius:6px; border:1px solid var(--border); background:var(--panel); color:var(--text);" />
</label>
<button type="button" data-theme-add-btn class="btn" style="padding:.45rem 1rem;" {% if disable_add %}disabled aria-disabled="true"{% endif %}>Add theme</button>
</div>