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

refactor(dashboard): use ls.css design tokens

Browse Source 
Replaced 42 hardcoded brand colors with var() tokens:

CSS rules:
- linear-gradient(135deg,#9B5DE5,#06D6E0) → var(--grad-1) in dh-avatar, lb-avatar, gam-level
- #0F172A → var(--text) in 28 CSS rules (text colors for all major widget labels,
  titles, buttons: dh-greeting, ac-title, qa-btn, grade-subj, act-tab.active,
  hm-footer strong, hm-tip bg, hdp-date/subj, assign-search, sc-month,
  qs-subj-btn, qs-select/input, adm-act, adm-sess-name, cs-name, assign-chip.active,
  ae-btn, ar-title, ar-btn, hist-subj, subj-chart-name, weak-name,
  ms-title, empty-cta-title, btn-join, stats-bar tooltip bg, stats-chip-val,
  tc-title, lb-title, lb-name, lb-class-sel, ch-title, gam-rank, gam-chip-val)
- #3D4F6B → var(--text-2) in hist-score, ae-submit-note
- #9B5DE5 → var(--violet) in lb-xp, ar-sub-chip.s-none, lb-tab.active,
  ch-pct, ch-xp, dash-cfg-title, dash-cfg-fab, dash-cfg-checkbox accent-color
- #06D6E0 / #F15BB5 → var(--cyan) / var(--pink) in stat rings and progress fills

JS-generated HTML/SVG:
- var(--violet)/var(--cyan) in SVG statRingSvg calls, goal ring SVG, barColor
- weak-fill gradient partial replacement (--pink)

Kept: 90deg progress bar gradients, domain palette colors (#E0335E/#059652/#7c3aed
/#05aab3/etc.), Chart.js hex configs (CSS vars unsupported there), canvas fillStyle,
action banner dark gradients, heatmap cell alphas, adm-act-icon domain navcolors.

Before: ~65 hardcodes | After: ~20 hardcodes (Chart.js, canvas, domain/dark theme)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-22 22:19:02 +03:00
parent 916e2ddc31
commit 58cff2285e
1 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dashboard.html
+58 -58
View File
@@ -23,7 +23,7 @@
} }
.dh-avatar { .dh-avatar {
width: 44px; height: 44px; border-radius: 50%; width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff; font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff;
flex-shrink: 0; flex-shrink: 0;
@@ -31,7 +31,7 @@
.dh-text { flex: 1; min-width: 0; } .dh-text { flex: 1; min-width: 0; }
.dh-greeting { .dh-greeting {
font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800; font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 800;
color: #0F172A; letter-spacing: -0.02em; color: var(--text); letter-spacing: -0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.dh-sub { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-top: 2px; } .dh-sub { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-top: 2px; }
@@ -78,7 +78,7 @@
.ac-card:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); } .ac-card:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); }
.ac-emoji { font-size: 1.4rem; flex-shrink: 0; } .ac-emoji { font-size: 1.4rem; flex-shrink: 0; }
.ac-body { flex: 1; min-width: 0; } .ac-body { flex: 1; min-width: 0; }
.ac-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-title { font-size: 0.84rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-badge { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); flex-shrink: 0; } .ac-badge { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); flex-shrink: 0; }
@@ -95,7 +95,7 @@
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 12px 20px; border-radius: 14px; padding: 12px 20px; border-radius: 14px;
border: 1.5px solid rgba(15,23,42,0.08); border: 1.5px solid rgba(15,23,42,0.08);
background: #fff; color: #0F172A; background: #fff; color: var(--text);
font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 700; font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 700;
cursor: pointer; transition: all 0.18s; text-decoration: none; cursor: pointer; transition: all 0.18s; text-decoration: none;
box-shadow: 0 2px 8px rgba(15,23,42,0.04); box-shadow: 0 2px 8px rgba(15,23,42,0.04);
@@ -141,7 +141,7 @@
.grade-row:last-child { border-bottom: none; } .grade-row:last-child { border-bottom: none; }
.grade-pct { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 900; min-width: 42px; text-align: center; } .grade-pct { font-family: 'Unbounded', sans-serif; font-size: 0.88rem; font-weight: 900; min-width: 42px; text-align: center; }
.grade-body { flex: 1; min-width: 0; } .grade-body { flex: 1; min-width: 0; }
.grade-subj { font-size: 0.82rem; font-weight: 700; color: #0F172A; } .grade-subj { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.grade-date { font-size: 0.7rem; color: var(--text-3); } .grade-date { font-size: 0.7rem; color: var(--text-3); }
/* ── activity widget tabs ── */ /* ── activity widget tabs ── */
@@ -152,7 +152,7 @@
color: var(--text-3); background: transparent; cursor: pointer; transition: all 0.15s; color: var(--text-3); background: transparent; cursor: pointer; transition: all 0.15s;
} }
.act-tab:hover { color: var(--violet); } .act-tab:hover { color: var(--violet); }
.act-tab.active { background: #0F172A; color: #fff; } .act-tab.active { background: var(--text); color: #fff; }
.act-scale-btns { display: flex; gap: 3px; } .act-scale-btns { display: flex; gap: 3px; }
.act-scale-btn { .act-scale-btn {
padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.08); padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.08);
@@ -193,7 +193,7 @@
border-top: 1px solid rgba(15,23,42,0.05); border-top: 1px solid rgba(15,23,42,0.05);
font-size: 0.68rem; color: var(--text-3); font-weight: 600; flex-wrap: wrap; font-size: 0.68rem; color: var(--text-3); font-weight: 600; flex-wrap: wrap;
} }
.hm-footer strong { color: #0F172A; font-weight: 800; } .hm-footer strong { color: var(--text); font-weight: 800; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; } .hm-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hm-legend-dot { width: 10px; height: 10px; border-radius: 50%; } .hm-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.hm-legend-label { font-size: 0.58rem; } .hm-legend-label { font-size: 0.58rem; }
@@ -207,7 +207,7 @@
font-family: 'Manrope', sans-serif; font-family: 'Manrope', sans-serif;
animation: fadeIn 0.2s ease; animation: fadeIn 0.2s ease;
} }
.hm-day-popup .hdp-date { font-size: 0.72rem; font-weight: 800; color: #0F172A; margin-bottom: 8px; } .hm-day-popup .hdp-date { font-size: 0.72rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.hm-day-popup .hdp-row { .hm-day-popup .hdp-row {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 5px 0; border-bottom: 1px solid rgba(15,23,42,0.04); padding: 5px 0; border-bottom: 1px solid rgba(15,23,42,0.04);
@@ -215,13 +215,13 @@
} }
.hm-day-popup .hdp-row:last-child { border-bottom: none; } .hm-day-popup .hdp-row:last-child { border-bottom: none; }
.hm-day-popup .hdp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .hm-day-popup .hdp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hm-day-popup .hdp-subj { flex: 1; font-weight: 600; color: #0F172A; } .hm-day-popup .hdp-subj { flex: 1; font-weight: 600; color: var(--text); }
.hm-day-popup .hdp-score { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 900; } .hm-day-popup .hdp-score { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 900; }
.hm-day-popup .hdp-mode { font-size: 0.66rem; color: var(--text-3); } .hm-day-popup .hdp-mode { font-size: 0.66rem; color: var(--text-3); }
.hm-day-popup .hdp-empty { font-size: 0.75rem; color: var(--text-3); padding: 4px 0; } .hm-day-popup .hdp-empty { font-size: 0.75rem; color: var(--text-3); padding: 4px 0; }
/* Dark mode */ /* Dark mode */
.app-layout.dark .act-tab.active { background: #E8ECF2; color: #0F172A; } .app-layout.dark .act-tab.active { background: #E8ECF2; color: var(--text); }
.app-layout.dark .act-scale-btn { border-color: rgba(255,255,255,0.08); color: #6B7A8E; } .app-layout.dark .act-scale-btn { border-color: rgba(255,255,255,0.08); color: #6B7A8E; }
.app-layout.dark .act-scale-btn.active { background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.3); color: var(--violet); } .app-layout.dark .act-scale-btn.active { background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.3); color: var(--violet); }
.app-layout.dark .mhm-cell { background: rgba(255,255,255,0.04); } .app-layout.dark .mhm-cell { background: rgba(255,255,255,0.04); }
@@ -241,7 +241,7 @@
.continue-card:hover { border-color: rgba(155,93,229,0.3); transform: translateX(3px); } .continue-card:hover { border-color: rgba(155,93,229,0.3); transform: translateX(3px); }
.cont-emoji { font-size: 1.5rem; flex-shrink: 0; } .cont-emoji { font-size: 1.5rem; flex-shrink: 0; }
.cont-info { flex: 1; min-width: 0; } .cont-info { flex: 1; min-width: 0; }
.cont-title { font-size: 0.85rem; font-weight: 700; color: #0F172A; } .cont-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.cont-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; } .cont-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.cont-pct { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); } .cont-pct { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--violet); }
@@ -251,7 +251,7 @@
padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,0.05); padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,0.05);
} }
.subj-prog-row:last-child { border-bottom: none; } .subj-prog-row:last-child { border-bottom: none; }
.sp-name { font-size: 0.82rem; font-weight: 700; min-width: 90px; color: #0F172A; } .sp-name { font-size: 0.82rem; font-weight: 700; min-width: 90px; color: var(--text); }
.sp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(15,23,42,0.06); overflow: hidden; } .sp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(15,23,42,0.06); overflow: hidden; }
.sp-fill { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(.34,1.2,.64,1); } .sp-fill { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(.34,1.2,.64,1); }
.sp-pct { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; min-width: 40px; text-align: right; } .sp-pct { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; min-width: 40px; text-align: right; }
@@ -273,7 +273,7 @@
} }
.smc-icon svg, .smc-icon i { width: 20px; height: 20px; stroke: #fff; stroke-width: 1.8; } .smc-icon svg, .smc-icon i { width: 20px; height: 20px; stroke: #fff; stroke-width: 1.8; }
.smc-body { flex: 1; min-width: 0; } .smc-body { flex: 1; min-width: 0; }
.smc-name { font-size: 0.86rem; font-weight: 700; color: #0F172A; } .smc-name { font-size: 0.86rem; font-weight: 700; color: var(--text); }
.smc-meta { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; } .smc-meta { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.smc-arrow { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; } .smc-arrow { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
@@ -311,7 +311,7 @@
/* B3: Heatmap tooltip */ /* B3: Heatmap tooltip */
.hm-tip { .hm-tip {
position: fixed; z-index: 200; pointer-events: none; position: fixed; z-index: 200; pointer-events: none;
background: #0F172A; color: #fff; padding: 6px 12px; border-radius: 8px; background: var(--text); color: #fff; padding: 6px 12px; border-radius: 8px;
font-size: 0.72rem; font-weight: 600; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 600; font-family: 'Manrope', sans-serif;
box-shadow: 0 8px 24px rgba(0,0,0,0.25); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.25); white-space: nowrap;
opacity: 0; transition: opacity 0.15s; opacity: 0; transition: opacity 0.15s;
@@ -322,7 +322,7 @@
.assign-search { .assign-search {
width: 100%; padding: 8px 14px 8px 34px; border: 1.5px solid rgba(15,23,42,0.08); width: 100%; padding: 8px 14px 8px 34px; border: 1.5px solid rgba(15,23,42,0.08);
border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.82rem; border-radius: 10px; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
color: #0F172A; background: #f8f9fc; transition: border-color 0.2s; color: var(--text); background: #f8f9fc; transition: border-color 0.2s;
box-sizing: border-box; margin-bottom: 10px; box-sizing: border-box; margin-bottom: 10px;
} }
.assign-search:focus { outline: none; border-color: var(--violet); background: #fff; } .assign-search:focus { outline: none; border-color: var(--violet); background: #fff; }
@@ -369,7 +369,7 @@
50% { box-shadow: 0 0 0 5px rgba(155,93,229,0); } 50% { box-shadow: 0 0 0 5px rgba(155,93,229,0); }
} }
.sc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-month { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #0F172A; } .sc-month { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: var(--text); }
.sc-streak-badge { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #F59E0B; display: flex; align-items: center; gap: 4px; } .sc-streak-badge { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #F59E0B; display: flex; align-items: center; gap: 4px; }
.sc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; } .sc-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.sc-wd { font-size: 0.56rem; color: var(--text-3); font-weight: 700; text-align: center; text-transform: uppercase; } .sc-wd { font-size: 0.56rem; color: var(--text-3); font-weight: 700; text-align: center; text-transform: uppercase; }
@@ -392,7 +392,7 @@
padding: 10px 16px; border-radius: 12px; padding: 10px 16px; border-radius: 12px;
border: 1.5px solid rgba(15,23,42,0.1); background: #fff; border: 1.5px solid rgba(15,23,42,0.1); background: #fff;
cursor: pointer; transition: all 0.15s; flex: 1; min-width: 100px; cursor: pointer; transition: all 0.15s; flex: 1; min-width: 100px;
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; color: #0F172A; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--text);
} }
.qs-subj-btn:hover { border-color: rgba(155,93,229,0.3); } .qs-subj-btn:hover { border-color: rgba(155,93,229,0.3); }
.qs-subj-btn.active { border-color: var(--violet); background: rgba(155,93,229,0.06); color: var(--violet); } .qs-subj-btn.active { border-color: var(--violet); background: rgba(155,93,229,0.06); color: var(--violet); }
@@ -404,7 +404,7 @@
.qs-select, .qs-input { .qs-select, .qs-input {
flex: 1; padding: 8px 12px; border: 1.5px solid rgba(15,23,42,0.1); flex: 1; padding: 8px 12px; border: 1.5px solid rgba(15,23,42,0.1);
border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 0.82rem; border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
color: #0F172A; background: #f8f9fc; color: var(--text); background: #f8f9fc;
} }
.qs-select:focus, .qs-input:focus { outline: none; border-color: var(--violet); } .qs-select:focus, .qs-input:focus { outline: none; border-color: var(--violet); }
@@ -428,7 +428,7 @@
padding: 12px 14px; border-radius: 12px; padding: 12px 14px; border-radius: 12px;
border: 1.5px solid rgba(15,23,42,0.07); background: #fff; border: 1.5px solid rgba(15,23,42,0.07); background: #fff;
font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
color: #0F172A; cursor: pointer; transition: all 0.18s; color: var(--text); cursor: pointer; transition: all 0.18s;
text-decoration: none; position: relative; text-decoration: none; position: relative;
} }
.adm-act:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px) scale(1.01); box-shadow: 0 6px 20px rgba(15,23,42,0.10); } .adm-act:hover { border-color: rgba(155,93,229,0.25); transform: translateY(-2px) scale(1.01); box-shadow: 0 6px 20px rgba(15,23,42,0.10); }
@@ -474,7 +474,7 @@
font-size: 0.76rem; font-size: 0.76rem;
} }
.adm-sess-row:last-child { border-bottom: none; } .adm-sess-row:last-child { border-bottom: none; }
.adm-sess-name { flex: 1; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-sess-name { flex: 1; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-sess-subj { color: var(--text-3); font-weight: 600; min-width: 60px; } .adm-sess-subj { color: var(--text-3); font-weight: 600; min-width: 60px; }
.adm-sess-pct { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 0.74rem; min-width: 36px; text-align: right; } .adm-sess-pct { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 0.74rem; min-width: 36px; text-align: right; }
/* Colored chip for session % */ /* Colored chip for session % */
@@ -548,7 +548,7 @@
} }
.cs-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .cs-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.cs-body { flex: 1; min-width: 0; } .cs-body { flex: 1; min-width: 0; }
.cs-name { font-size: 0.84rem; font-weight: 700; color: #0F172A; } .cs-name { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.cs-stats { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; display: flex; gap: 10px; } .cs-stats { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; display: flex; gap: 10px; }
.cs-stats span { display: flex; align-items: center; gap: 3px; } .cs-stats span { display: flex; align-items: center; gap: 3px; }
.cs-bar { width: 60px; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; flex-shrink: 0; } .cs-bar { width: 60px; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; flex-shrink: 0; }
@@ -582,7 +582,7 @@
cursor: pointer; transition: all 0.16s; cursor: pointer; transition: all 0.16s;
} }
.assign-chip:hover { border-color: rgba(155,93,229,0.3); color: var(--violet); } .assign-chip:hover { border-color: rgba(155,93,229,0.3); color: var(--violet); }
.assign-chip.active { background: #0F172A; color: #fff; border-color: #0F172A; } .assign-chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.assign-stats { font-size: 0.75rem; color: var(--text-3); font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; } .assign-stats { font-size: 0.75rem; color: var(--text-3); font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; }
.assign-stats .s-active { color: var(--violet); } .assign-stats .s-active { color: var(--violet); }
.assign-stats .s-overdue { color: var(--pink); } .assign-stats .s-overdue { color: var(--pink); }
@@ -639,7 +639,7 @@
.ae-dl-fill { height: 100%; border-radius: 99px; transition: width 0.4s; } .ae-dl-fill { height: 100%; border-radius: 99px; transition: width 0.4s; }
.ae-btn { .ae-btn {
padding: 8px 24px; border: none; border-radius: 99px; padding: 8px 24px; border: none; border-radius: 99px;
background: #0F172A; color: #fff; background: var(--text); color: #fff;
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 0;
} }
@@ -680,7 +680,7 @@
.ar-body { flex: 1; min-width: 0; } .ar-body { flex: 1; min-width: 0; }
.ar-title { .ar-title {
font-size: 0.88rem; font-weight: 700; color: #0F172A; font-size: 0.88rem; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
} }
.ar-meta { .ar-meta {
@@ -704,7 +704,7 @@
.ar-btn { .ar-btn {
padding: 6px 16px; border: none; border-radius: 99px; padding: 6px 16px; border: none; border-radius: 99px;
background: #0F172A; color: #fff; background: var(--text); color: #fff;
font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700; font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 700;
cursor: pointer; transition: background 0.15s; white-space: nowrap; cursor: pointer; transition: background 0.15s; white-space: nowrap;
} }
@@ -748,9 +748,9 @@
.hist-pct.mid { color: var(--amber); } .hist-pct.mid { color: var(--amber); }
.hist-pct.lo { color: var(--pink); } .hist-pct.lo { color: var(--pink); }
.hist-info { flex: 1; } .hist-info { flex: 1; }
.hist-subj { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: #0F172A; } .hist-subj { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.hist-meta { font-size: 0.75rem; color: var(--text-3); } .hist-meta { font-size: 0.75rem; color: var(--text-3); }
.hist-score { font-size: 0.8rem; color: #3D4F6B; font-weight: 600; white-space: nowrap; } .hist-score { font-size: 0.8rem; color: var(--text-2); font-weight: 600; white-space: nowrap; }
/* ── progress tab ── */ /* ── progress tab ── */
.chart-section-title { .chart-section-title {
@@ -780,7 +780,7 @@
transition: all 0.2s; transition: all 0.2s;
} }
.subj-chart-card:hover { border-color: rgba(15,23,42,0.14); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(15,23,42,0.1); } .subj-chart-card:hover { border-color: rgba(15,23,42,0.14); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(15,23,42,0.1); }
.subj-chart-name { font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800; color: #0F172A; } .subj-chart-name { font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800; color: var(--text); }
.subj-chart-sessions { font-size: 0.72rem; color: var(--text-3); } .subj-chart-sessions { font-size: 0.72rem; color: var(--text-3); }
.canvas-wrap { position: relative; width: 130px; height: 130px; margin: 4px 0; } .canvas-wrap { position: relative; width: 130px; height: 130px; margin: 4px 0; }
@@ -795,10 +795,10 @@
} }
.weak-item:hover { border-color: rgba(15,23,42,0.12); transform: translateX(4px); box-shadow: 0 6px 24px rgba(15,23,42,0.08); } .weak-item:hover { border-color: rgba(15,23,42,0.12); transform: translateX(4px); box-shadow: 0 6px 24px rgba(15,23,42,0.08); }
.weak-bar-wrap { flex: 1; } .weak-bar-wrap { flex: 1; }
.weak-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: #0F172A; } .weak-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.weak-meta { font-size: 0.75rem; color: var(--text-3); } .weak-meta { font-size: 0.75rem; color: var(--text-3); }
.weak-bar { height: 7px; background: rgba(15,23,42,0.07); border-radius: 99px; overflow: hidden; margin-top: 8px; } .weak-bar { height: 7px; background: rgba(15,23,42,0.07); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.weak-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF9F1C, #F15BB5); transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1); } .weak-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FF9F1C, var(--pink)); transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1); }
.weak-pct { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900; color: #E0335E; min-width: 48px; text-align: right; } .weak-pct { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900; color: #E0335E; min-width: 48px; text-align: right; }
/* ── submission strip in expand ── */ /* ── submission strip in expand ── */
@@ -827,7 +827,7 @@
.ar-sub-chip.s-reviewed { background: rgba(5,150,82,0.1); color: #059652; } .ar-sub-chip.s-reviewed { background: rgba(5,150,82,0.1); color: #059652; }
.ar-sub-chip.s-accepted { background: rgba(5,150,82,0.12); color: #059652; } .ar-sub-chip.s-accepted { background: rgba(5,150,82,0.12); color: #059652; }
.ar-sub-chip.s-revision { background: rgba(241,91,181,0.1); color: #c0306a; } .ar-sub-chip.s-revision { background: rgba(241,91,181,0.1); color: #c0306a; }
.ar-sub-chip.s-none { background: rgba(155,93,229,0.08); color: #9B5DE5; } .ar-sub-chip.s-none { background: rgba(155,93,229,0.08); color: var(--violet); }
/* ── My submissions widget ── */ /* ── My submissions widget ── */
.my-subs-list { display: flex; flex-direction: column; gap: 6px; } .my-subs-list { display: flex; flex-direction: column; gap: 6px; }
@@ -838,14 +838,14 @@
transition: transform 0.15s, box-shadow 0.15s; transition: transform 0.15s, box-shadow 0.15s;
} }
.ms-row:hover { transform: translateX(3px); box-shadow: 0 4px 16px rgba(15,23,42,0.07); } .ms-row:hover { transform: translateX(3px); box-shadow: 0 4px 16px rgba(15,23,42,0.07); }
.ms-title { flex: 1; font-size: 0.82rem; font-weight: 600; color: #0F172A; .ms-title { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-file { font-size: 0.7rem; color: var(--text-3); flex-shrink: 0; max-width: 120px; .ms-file { font-size: 0.7rem; color: var(--text-3); flex-shrink: 0; max-width: 120px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-grade { font-weight: 800; font-size: 0.78rem; flex-shrink: 0; } .ms-grade { font-weight: 800; font-size: 0.78rem; flex-shrink: 0; }
.ms-more { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--violet); text-decoration: none; } .ms-more { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; color: var(--violet); text-decoration: none; }
.ms-more:hover { text-decoration: underline; } .ms-more:hover { text-decoration: underline; }
.ae-submit-note { font-size: 0.75rem; color: #3D4F6B; flex: 1; font-style: italic; } .ae-submit-note { font-size: 0.75rem; color: var(--text-2); flex: 1; font-style: italic; }
.ae-grade-badge { .ae-grade-badge {
display: inline-flex; align-items: center; gap: 3px; display: inline-flex; align-items: center; gap: 3px;
padding: 3px 9px; border-radius: 99px; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; font-size: 0.72rem; font-weight: 800;
@@ -884,7 +884,7 @@
box-shadow: 0 2px 8px rgba(15,23,42,0.04); box-shadow: 0 2px 8px rgba(15,23,42,0.04);
} }
.empty-cta-icon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12)); } .empty-cta-icon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12)); }
.empty-cta-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; color: #0F172A; } .empty-cta-title { font-family: 'Unbounded', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.empty-cta-desc { font-size: 0.88rem; color: #6B7A8E; max-width: 300px; line-height: 1.7; } .empty-cta-desc { font-size: 0.88rem; color: #6B7A8E; max-width: 300px; line-height: 1.7; }
/* ── nav active ── */ /* ── nav active ── */
@@ -917,7 +917,7 @@
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.btn-cancel { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; } .btn-cancel { padding: 10px 22px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 999px; background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; }
.btn-cancel:hover { border-color: rgba(15,23,42,0.3); color: var(--text); } .btn-cancel:hover { border-color: rgba(15,23,42,0.3); color: var(--text); }
.btn-join { padding: 10px 28px; border: none; border-radius: 999px; background: #0F172A; color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,0.2); transition: all 0.18s; } .btn-join { padding: 10px 28px; border: none; border-radius: 999px; background: var(--text); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(15,23,42,0.2); transition: all 0.18s; }
.btn-join:hover { background: #1E2D4A; box-shadow: 0 6px 20px rgba(15,23,42,0.25); } .btn-join:hover { background: #1E2D4A; box-shadow: 0 6px 20px rgba(15,23,42,0.25); }
.btn-join:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn-join:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
@@ -952,7 +952,7 @@
.stats-bar:hover::after { .stats-bar:hover::after {
content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; content: attr(data-tip); position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px;
background: #0F172A; color: #fff; font-size: 0.65rem; font-weight: 600; background: var(--text); color: #fff; font-size: 0.65rem; font-weight: 600;
white-space: nowrap; pointer-events: none; white-space: nowrap; pointer-events: none;
} }
.stats-bar-labels { display: flex; gap: 4px; margin-top: 4px; } .stats-bar-labels { display: flex; gap: 4px; margin-top: 4px; }
@@ -972,7 +972,7 @@
} }
.stats-chip-val { .stats-chip-val {
font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800; font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
color: #0F172A; line-height: 1; color: var(--text); line-height: 1;
} }
.stats-chip-lbl { font-size: 0.65rem; color: var(--text-3); margin-top: 3px; font-weight: 600; } .stats-chip-lbl { font-size: 0.65rem; color: var(--text-3); margin-top: 3px; font-weight: 600; }
@@ -1009,7 +1009,7 @@
.tc-header { display: flex; align-items: center; gap: 10px; } .tc-header { display: flex; align-items: center; gap: 10px; }
.tc-emoji { font-size: 1.6rem; line-height: 1; } .tc-emoji { font-size: 1.6rem; line-height: 1; }
.tc-info { flex: 1; } .tc-info { flex: 1; }
.tc-title { font-size: 0.88rem; font-weight: 700; color: #0F172A; line-height: 1.35; } .tc-title { font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.tc-subj { font-size: 0.7rem; font-weight: 700; color: var(--text-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; } .tc-subj { font-size: 0.7rem; font-weight: 700; color: var(--text-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.tc-progress { display: flex; align-items: center; gap: 8px; } .tc-progress { display: flex; align-items: center; gap: 8px; }
.tc-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); } .tc-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); }
@@ -1024,14 +1024,14 @@
box-shadow: 0 2px 8px rgba(15,23,42,0.04); box-shadow: 0 2px 8px rgba(15,23,42,0.04);
} }
.lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lb-title { font-family: 'Unbounded', sans-serif; font-size: 0.84rem; font-weight: 800; color: #0F172A; } .lb-title { font-family: 'Unbounded', sans-serif; font-size: 0.84rem; font-weight: 800; color: var(--text); }
.lb-tabs { display: flex; gap: 4px; } .lb-tabs { display: flex; gap: 4px; }
.lb-tab { .lb-tab {
padding: 5px 12px; border-radius: 99px; border: none; padding: 5px 12px; border-radius: 99px; border: none;
font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
background: transparent; color: var(--text-3); cursor: pointer; transition: all 0.15s; background: transparent; color: var(--text-3); cursor: pointer; transition: all 0.15s;
} }
.lb-tab.active { background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.08)); color: #9B5DE5; } .lb-tab.active { background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.08)); color: var(--violet); }
.lb-list { display: flex; flex-direction: column; gap: 4px; } .lb-list { display: flex; flex-direction: column; gap: 4px; }
.lb-row { .lb-row {
display: flex; align-items: center; gap: 10px; display: flex; align-items: center; gap: 10px;
@@ -1050,19 +1050,19 @@
.lb-pos.bronze { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; } .lb-pos.bronze { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; }
.lb-avatar { .lb-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 800; color: #fff; font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 800; color: #fff;
} }
.lb-info { flex: 1; min-width: 0; } .lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: 0.82rem; font-weight: 700; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-name { font-size: 0.82rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-rank { font-size: 0.64rem; color: var(--text-3); font-weight: 600; } .lb-rank { font-size: 0.64rem; color: var(--text-3); font-weight: 600; }
.lb-xp { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: #9B5DE5; flex-shrink: 0; } .lb-xp { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--violet); flex-shrink: 0; }
.lb-empty { text-align: center; padding: 20px; color: var(--text-3); font-size: 0.82rem; } .lb-empty { text-align: center; padding: 20px; color: var(--text-3); font-size: 0.82rem; }
.lb-class-sel { .lb-class-sel {
padding: 5px 10px; border-radius: 10px; border: 1.5px solid rgba(15,23,42,0.1); padding: 5px 10px; border-radius: 10px; border: 1.5px solid rgba(15,23,42,0.1);
background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 600; background: #fff; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 600;
color: #0F172A; cursor: pointer; outline: none; color: var(--text); cursor: pointer; outline: none;
} }
/* ── Challenges widget ── */ /* ── Challenges widget ── */
@@ -1078,14 +1078,14 @@
.ch-item.claimed { opacity: 0.55; } .ch-item.claimed { opacity: 0.55; }
.ch-icon { font-size: 1.3rem; flex-shrink: 0; } .ch-icon { font-size: 1.3rem; flex-shrink: 0; }
.ch-body { flex: 1; min-width: 0; } .ch-body { flex: 1; min-width: 0; }
.ch-title { font-size: 0.84rem; font-weight: 700; color: #0F172A; } .ch-title { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.ch-desc { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; } .ch-desc { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.ch-prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .ch-prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ch-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; } .ch-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; }
.ch-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.4s; } .ch-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.4s; }
.ch-pct { font-size: 0.68rem; font-weight: 700; color: #9B5DE5; flex-shrink: 0; } .ch-pct { font-size: 0.68rem; font-weight: 700; color: var(--violet); flex-shrink: 0; }
.ch-reward { flex-shrink: 0; text-align: right; } .ch-reward { flex-shrink: 0; text-align: right; }
.ch-xp { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #9B5DE5; } .ch-xp { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: var(--violet); }
.ch-claim { .ch-claim {
margin-top: 4px; padding: 4px 12px; border: none; border-radius: 99px; margin-top: 4px; padding: 4px 12px; border: none; border-radius: 99px;
background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif;
@@ -1103,7 +1103,7 @@
} }
.gam-level { .gam-level {
width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
display: flex; flex-direction: column; align-items: center; justify-content: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #fff; line-height: 1; color: #fff; line-height: 1;
} }
@@ -1111,7 +1111,7 @@
.gam-level-lbl { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; } .gam-level-lbl { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.gam-main { flex: 1; min-width: 0; } .gam-main { flex: 1; min-width: 0; }
.gam-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .gam-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.gam-rank { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: #0F172A; } .gam-rank { font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--text); }
.gam-xp-text { font-size: 0.72rem; color: var(--text-3); font-weight: 600; } .gam-xp-text { font-size: 0.72rem; color: var(--text-3); font-weight: 600; }
.gam-progress { height: 8px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; } .gam-progress { height: 8px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; }
.gam-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.6s ease; } .gam-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.6s ease; }
@@ -1123,7 +1123,7 @@
min-width: 62px; min-width: 62px;
} }
.gam-chip-icon { font-size: 1.1rem; line-height: 1; } .gam-chip-icon { font-size: 1.1rem; line-height: 1; }
.gam-chip-val { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: #0F172A; } .gam-chip-val { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--text); }
.gam-chip-lbl { font-size: 0.58rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; } .gam-chip-lbl { font-size: 0.58rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; }
.gam-goal-ring { position: relative; width: 40px; height: 40px; } .gam-goal-ring { position: relative; width: 40px; height: 40px; }
.gam-goal-ring svg { width: 40px; height: 40px; } .gam-goal-ring svg { width: 40px; height: 40px; }
@@ -1246,7 +1246,7 @@
display: none; /* shown for students via JS */ display: none; /* shown for students via JS */
position: fixed; bottom: 88px; right: 20px; z-index: 80; position: fixed; bottom: 88px; right: 20px; z-index: 80;
width: 44px; height: 44px; border-radius: 50%; width: 44px; height: 44px; border-radius: 50%;
background: #9B5DE5; border: none; cursor: pointer; background: var(--violet); border: none; cursor: pointer;
box-shadow: 0 4px 16px rgba(155,93,229,0.45); box-shadow: 0 4px 16px rgba(155,93,229,0.45);
align-items: center; justify-content: center; align-items: center; justify-content: center;
transition: transform .15s, box-shadow .15s; transition: transform .15s, box-shadow .15s;
@@ -1261,7 +1261,7 @@
} }
.dash-cfg-panel.open { display: block; } .dash-cfg-panel.open { display: block; }
.dash-cfg-title { .dash-cfg-title {
font-size: 0.72rem; font-weight: 700; color: #9B5DE5; font-size: 0.72rem; font-weight: 700; color: var(--violet);
text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
} }
.dash-cfg-row { .dash-cfg-row {
@@ -1270,7 +1270,7 @@
} }
.dash-cfg-row:hover { background: rgba(255,255,255,.05); } .dash-cfg-row:hover { background: rgba(255,255,255,.05); }
.dash-cfg-row label { font-size: 0.83rem; color: #e2e8f0; cursor: pointer; flex: 1; } .dash-cfg-row label { font-size: 0.83rem; color: #e2e8f0; cursor: pointer; flex: 1; }
.dash-cfg-row input[type=checkbox] { accent-color: #9B5DE5; width: 15px; height: 15px; cursor: pointer; } .dash-cfg-row input[type=checkbox] { accent-color: var(--violet); width: 15px; height: 15px; cursor: pointer; }
.dash-cfg-wrap { display: contents; } .dash-cfg-wrap { display: contents; }
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
@@ -1716,7 +1716,7 @@
const xpPct = dg.xp_target > 0 ? Math.min(100, Math.round(dg.xp_earned / dg.xp_target * 100)) : 0; const xpPct = dg.xp_target > 0 ? Math.min(100, Math.round(dg.xp_earned / dg.xp_target * 100)) : 0;
const avgPct = Math.round((testsPct + xpPct) / 2); const avgPct = Math.round((testsPct + xpPct) / 2);
const r = 15, circ = 2 * Math.PI * r, dash = (avgPct / 100 * circ).toFixed(1); const r = 15, circ = 2 * Math.PI * r, dash = (avgPct / 100 * circ).toFixed(1);
const color = avgPct >= 100 ? '#059652' : '#9B5DE5'; const color = avgPct >= 100 ? '#059652' : 'var(--violet)';
document.getElementById('gam-goal-ring').innerHTML = ` document.getElementById('gam-goal-ring').innerHTML = `
<svg width="40" height="40" viewBox="0 0 40 40"> <svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="${r}" fill="none" stroke="rgba(15,23,42,0.07)" stroke-width="4"/> <circle cx="20" cy="20" r="${r}" fill="none" stroke="rgba(15,23,42,0.07)" stroke-width="4"/>
@@ -1919,10 +1919,10 @@
else if (i > 1) break; else if (i > 1) break;
} }
document.getElementById('sr-sessions').innerHTML = statRingSvg(totalSessions, Math.max(totalSessions, 1), '#9B5DE5', 'сессий'); document.getElementById('sr-sessions').innerHTML = statRingSvg(totalSessions, Math.max(totalSessions, 1), 'var(--violet)', 'сессий');
document.getElementById('sr-avg').innerHTML = statRingSvg(avg, 100, avgColor, 'средний %'); document.getElementById('sr-avg').innerHTML = statRingSvg(avg, 100, avgColor, 'средний %');
document.getElementById('sr-streak').innerHTML = statRingSvg(streak, Math.max(streak, 7), '#F59E0B', 'подряд'); document.getElementById('sr-streak').innerHTML = statRingSvg(streak, Math.max(streak, 7), '#F59E0B', 'подряд');
document.getElementById('sr-pending').innerHTML = statRingSvg(0, 1, '#06D6E0', 'ожидают'); document.getElementById('sr-pending').innerHTML = statRingSvg(0, 1, 'var(--cyan)', 'ожидают');
} catch { /* тихо */ } } catch { /* тихо */ }
} }
@@ -1932,7 +1932,7 @@
!a.session_status && (!a.deadline || new Date(a.deadline) > new Date()) !a.session_status && (!a.deadline || new Date(a.deadline) > new Date())
).length; ).length;
const el = document.getElementById('sr-pending'); const el = document.getElementById('sr-pending');
if (el) el.innerHTML = statRingSvg(pending, Math.max(pending, 1), '#06D6E0', 'ожидают'); if (el) el.innerHTML = statRingSvg(pending, Math.max(pending, 1), 'var(--cyan)', 'ожидают');
} }
/* ══ ПРЕДМЕТЫ ════════════════════════════════════════════════════════ */ /* ══ ПРЕДМЕТЫ ════════════════════════════════════════════════════════ */
@@ -2110,7 +2110,7 @@
const done = a.completed_count || 0; const done = a.completed_count || 0;
const total = a.total_members || 0; const total = a.total_members || 0;
const pct = total > 0 ? Math.round((done / total) * 100) : 0; const pct = total > 0 ? Math.round((done / total) * 100) : 0;
const barColor = pct >= 75 ? '#059652' : pct >= 50 ? '#F59E0B' : '#F15BB5'; const barColor = pct >= 75 ? '#059652' : pct >= 50 ? '#F59E0B' : 'var(--pink)';
const urgent = isTeacherUrgent(a); const urgent = isTeacherUrgent(a);
const titleHtml = esc(a.title) const titleHtml = esc(a.title)
+ (a.class_name && a.class_name !== 'Личное задание' ? `<span class="asgn-class-badge">${esc(a.class_name)}</span>` : '') + (a.class_name && a.class_name !== 'Личное задание' ? `<span class="asgn-class-badge">${esc(a.class_name)}</span>` : '')