make css more generic

This commit is contained in:
Lukas Cremer
2026-05-13 23:30:53 +02:00
parent f3fa43d452
commit f4a1b4dca9
6 changed files with 129 additions and 195 deletions

View File

@@ -84,6 +84,7 @@ function applyTheme(theme) {
});
}
// ─── Screen management ───────────────────────────────────────────────────────
function showScreen(screen) {
@@ -124,12 +125,17 @@ async function showClassPicker() {
classes.forEach(cls => {
const card = document.createElement('div');
card.className = 'class-card';
card.style.setProperty('--card-accent', cls.theme['--theme-accent'] || 'var(--theme-accent)');
const bg = cls.theme['--theme-bg-mid'] || '';
const border = cls.theme['--theme-accent'] || '';
const text = cls.theme['--theme-text'] || '';
const muted = cls.theme['--theme-muted'] || '';
if (bg) card.style.background = bg;
if (border) card.style.borderColor = border;
card.innerHTML = `
<div class="class-card-icon">${cls.icon || '📚'}</div>
<div class="class-card-info">
<div class="class-card-name">${cls.name}</div>
<div class="class-card-desc">${cls.description || ''}</div>
<div class="class-card-name" style="color:${text}">${cls.name}</div>
<div class="class-card-desc" style="color:${muted}">${cls.description || ''}</div>
</div>
`;
card.onclick = () => selectClass(cls.id);