maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(classes): use ls.css design tokens

Browse Source 
Replaced 13 hardcoded brand colors with var() tokens:
- #0F172A → var(--text) in 5 CSS rules and JS-generated strings
- #3D4F6B → var(--text-2) in 3 CSS rules and 2 inline attrs
- #06D6E0 → var(--cyan) in --wc custom property
- Chart bucket/bar colors → var(--pink/amber/cyan/green)

Kept tinted-alpha colors, 90deg gradient bars, #f4f5f8 split layout bg,
#059652 (dark domain green for grade/review status), #06aab3 (status badge),
#c0306a/#c07c00 (grade letter palette), #EF476F (delete icon),
and JS-toggled display:none (incompatible with .hidden class pattern).

Before: ~22 hardcodes | After: ~9 hardcodes (decorative/domain)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-22 22:06:43 +03:00
parent 1fdbb9a445
commit 0b06e8facd
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/classes.html
+20 -20
View File
@@ -26,7 +26,7 @@
.cl-item.active { background: rgba(155,93,229,0.09); border-color: rgba(155,93,229,0.22); box-shadow: 0 2px 10px rgba(155,93,229,0.10); }
.cl-avatar { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #fff; }
.cl-info { flex: 1; min-width: 0; }
.cl-name { font-size: 0.88rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cl-name { font-size: 0.88rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cl-meta { font-size: 0.73rem; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-chevron { color: #cbd5e1; flex-shrink: 0; transition: color 0.15s; }
.cl-item.active .cl-chevron { color: var(--violet); }
@@ -46,7 +46,7 @@
.cl-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 14px; padding: 80px 40px; text-align: center; }
.cl-placeholder-icon { width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, rgba(155,93,229,0.12), rgba(6,214,224,0.08)); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.cl-placeholder-icon svg { width: 32px; height: 32px; stroke: var(--violet); stroke-width: 1.6; }
.cl-placeholder-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; color: #0F172A; }
.cl-placeholder-title { font-family: 'Unbounded', sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--text); }
.cl-placeholder-sub { font-size: 0.82rem; color: var(--text-3); max-width: 220px; line-height: 1.6; }
.cl-detail-wrap { padding: 28px 32px 60px; flex: 1; }
@@ -169,7 +169,7 @@
.notif-empty { padding: 24px 14px; text-align: center; color: var(--text-3); font-size: 0.82rem; }
.empty { text-align: center; padding: 30px; color: var(--text-3); font-size: 0.88rem; }
.error { color: var(--pink); font-size: 0.85rem; padding: 8px 0; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #0F172A; color: #fff; padding: 10px 24px; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; z-index: 999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 24px; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; z-index: 999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.toast.show { opacity: 1; }
/* ── Teacher dashboard ── */
@@ -396,7 +396,7 @@
font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 700;
cursor: pointer; transition: all 0.15s;
}
.works-chip.active { background: #0F172A; color: #fff; border-color: #0F172A; }
.works-chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.works-chip:hover:not(.active) { border-color: rgba(155,93,229,0.35); color: var(--violet); }
.work-card {
@@ -410,7 +410,7 @@
}
.work-card:hover { box-shadow: 0 6px 24px rgba(15,23,42,0.1); border-color: rgba(15,23,42,0.14); }
.work-card.reviewed { --wc: #059652; }
.work-card.new { --wc: #06D6E0; }
.work-card.new { --wc: var(--cyan); }
.work-icon {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
background: rgba(155,93,229,0.08); color: var(--violet);
@@ -418,10 +418,10 @@
}
.work-icon svg { width: 18px; height: 18px; }
.work-body { flex: 1; min-width: 0; }
.work-student { font-size: 0.88rem; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
.work-student { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.work-assign { font-size: 0.76rem; color: var(--violet); font-weight: 600; margin-bottom: 3px; }
.work-file { font-size: 0.74rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-msg { font-size: 0.76rem; color: #3D4F6B; margin-top: 5px; line-height: 1.4; font-style: italic; }
.work-msg { font-size: 0.76rem; color: var(--text-2); margin-top: 5px; line-height: 1.4; font-style: italic; }
.work-note { font-size: 0.74rem; color: #059652; margin-top: 4px; font-style: italic; }
.work-meta { font-size: 0.70rem; color: var(--text-3); white-space: nowrap; flex-shrink: 0; text-align: right; }
.work-status {
@@ -452,10 +452,10 @@
.grade-input-row {
display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.grade-input-row label { font-size: 0.8rem; font-weight: 600; color: #3D4F6B; white-space: nowrap; }
.grade-input-row label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.grade-input {
width: 80px; padding: 6px 10px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 8px;
font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; color: #0F172A;
font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--text);
background: #fff; text-align: center;
}
.grade-input:focus { outline: none; border-color: var(--violet); }
@@ -489,7 +489,7 @@
width: 42px; height: 42px; border: 2px solid transparent; border-radius: 10px;
background: #fff; cursor: pointer; display: flex;
align-items: center; justify-content: center; transition: all 0.12s;
color: #3D4F6B;
color: var(--text-2);
}
.ip-btn svg { width: 20px; height: 20px; }
.ip-btn:hover { border-color: rgba(155,93,229,0.3); transform: scale(1.1); color: var(--violet); }
@@ -508,7 +508,7 @@
cursor: pointer; transition: all 0.12s; flex-shrink: 0;
}
.cp-btn:hover { transform: scale(1.2); }
.cp-btn.selected { border-color: #0F172A; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.cp-btn.selected { border-color: var(--text); box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
/* ── Personal assignments ── */
.cl-personal-sep { height: 1px; background: var(--border); margin: 6px 10px 8px; }
@@ -952,13 +952,13 @@
<div class="modal-overlay" id="review-modal" onclick="if(event.target===this)closeReviewModal()">
<div class="modal">
<div class="modal-title">Работа ученика</div>
<div id="rv-student" style="font-size:0.88rem;color:#3D4F6B;font-weight:600;margin-bottom:4px"></div>
<div id="rv-student" style="font-size:0.88rem;color:var(--text-2);font-weight:600;margin-bottom:4px"></div>
<div id="rv-assign" style="font-size:0.78rem;color:var(--violet);margin-bottom:14px"></div>
<a id="rv-file-link" class="review-file-link" href="#" target="_blank" style="margin-bottom:14px;display:inline-flex">
<i data-lucide="download" style="width:14px;height:14px"></i>
<span id="rv-file-name"></span>
</a>
<div id="rv-message" style="background:#f8f9fc;border-radius:12px;padding:12px 14px;font-size:0.82rem;color:#3D4F6B;line-height:1.5;margin-bottom:14px;display:none"></div>
<div id="rv-message" style="background:#f8f9fc;border-radius:12px;padding:12px 14px;font-size:0.82rem;color:var(--text-2);line-height:1.5;margin-bottom:14px;display:none"></div>
<div class="grade-input-row">
<label>Оценка (0–100):</label>
<input class="grade-input" id="rv-grade" type="number" min="0" max="100" placeholder="—" oninput="updateGradeLetter()">
@@ -1802,10 +1802,10 @@
document.getElementById('res-prog-wrap').style.display = '';
// Score distribution
const buckets = [
{ label: '0–25%', min: 0, max: 25, color: '#F15BB5' },
{ label: '26–50%', min: 26, max: 50, color: '#FFB347' },
{ label: '51–75%', min: 51, max: 75, color: '#06B6D4' },
{ label: '76–100%',min: 76, max: 100, color: '#06D664' },
{ label: '0–25%', min: 0, max: 25, color: 'var(--pink)' },
{ label: '26–50%', min: 26, max: 50, color: 'var(--amber)' },
{ label: '51–75%', min: 51, max: 75, color: 'var(--cyan)' },
{ label: '76–100%',min: 76, max: 100, color: 'var(--green)' },
];
const maxCnt = Math.max(...buckets.map(b => done.filter(r => r.percent >= b.min && r.percent <= b.max).length), 1);
document.getElementById('res-distrib-bars').innerHTML = buckets.map(b => {
@@ -1865,7 +1865,7 @@
el.innerHTML = `<div style="font-size:0.72rem;color:var(--text-3);margin-bottom:12px">На основе ${session_count} сданных работ. Сортировка: от самых сложных вопросов.</div>` +
stats.map((q, idx) => {
const pct = q.error_pct || 0;
const color = pct >= 70 ? '#F15BB5' : pct >= 40 ? '#FFB347' : '#06D664';
const color = pct >= 70 ? 'var(--pink)' : pct >= 40 ? 'var(--amber)' : 'var(--green)';
return `<div class="qs-item">
<div class="qs-num">${idx+1}</div>
<div class="qs-text">${esc(q.question_text)}</div>
@@ -2354,7 +2354,7 @@
const available = (allCourses || []).filter(c => !assignedIds.has(c.id));
let html = `<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px">
<div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:#0F172A">
<div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:var(--text)">
Курсы класса <span style="color:var(--text-3);font-weight:600">(${(courses||[]).length})</span>
</div>
${available.length ? `<button class="btn-ghost" onclick="openAssignCourseModal()" style="font-size:0.8rem">
@@ -2375,7 +2375,7 @@
<a href="/course?id=${c.id}" style="flex:1;display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0">
<span style="font-size:1.6rem">${c.coverEmoji || LS.icon('book-open',20)}</span>
<div style="flex:1;min-width:0">
<div style="font-size:0.9rem;font-weight:700;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(c.title)}</div>
<div style="font-size:0.9rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(c.title)}</div>
<div style="font-size:0.74rem;color:var(--text-3);margin-top:2px">${esc(SUBJ_LABEL[c.subjectSlug] || c.subjectSlug || '')} · ${c.lessonCount} уроков</div>
</div>
<div style="display:flex;align-items:center;gap:8px;flex-shrink:0">