From 58cff2285ec216635617bf8341e66dc8793d1a0c Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Fri, 22 May 2026 22:19:02 +0300 Subject: [PATCH] refactor(dashboard): use ls.css design tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- frontend/dashboard.html | 116 ++++++++++++++++++++-------------------- 1 file changed, 58 insertions(+), 58 deletions(-) diff --git a/frontend/dashboard.html b/frontend/dashboard.html index c90ac63..a3079ec 100644 --- a/frontend/dashboard.html +++ b/frontend/dashboard.html @@ -23,7 +23,7 @@ } .dh-avatar { 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; font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 800; color: #fff; flex-shrink: 0; @@ -31,7 +31,7 @@ .dh-text { flex: 1; min-width: 0; } .dh-greeting { 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; } .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-emoji { font-size: 1.4rem; flex-shrink: 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-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; padding: 12px 20px; border-radius: 14px; 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; cursor: pointer; transition: all 0.18s; text-decoration: none; box-shadow: 0 2px 8px rgba(15,23,42,0.04); @@ -141,7 +141,7 @@ .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-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); } /* ── activity widget tabs ── */ @@ -152,7 +152,7 @@ color: var(--text-3); background: transparent; cursor: pointer; transition: all 0.15s; } .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-btn { 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); 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-dot { width: 10px; height: 10px; border-radius: 50%; } .hm-legend-label { font-size: 0.58rem; } @@ -207,7 +207,7 @@ font-family: 'Manrope', sans-serif; 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 { display: flex; align-items: center; gap: 8px; 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-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-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; } /* 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.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); } @@ -241,7 +241,7 @@ .continue-card:hover { border-color: rgba(155,93,229,0.3); transform: translateX(3px); } .cont-emoji { font-size: 1.5rem; flex-shrink: 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-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); } .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-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; } @@ -273,7 +273,7 @@ } .smc-icon svg, .smc-icon i { width: 20px; height: 20px; stroke: #fff; stroke-width: 1.8; } .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-arrow { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; } @@ -311,7 +311,7 @@ /* B3: Heatmap tooltip */ .hm-tip { 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; box-shadow: 0 8px 24px rgba(0,0,0,0.25); white-space: nowrap; opacity: 0; transition: opacity 0.15s; @@ -322,7 +322,7 @@ .assign-search { 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; - 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; } .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); } } .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-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; } @@ -392,7 +392,7 @@ padding: 10px 16px; border-radius: 12px; border: 1.5px solid rgba(15,23,42,0.1); background: #fff; 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.active { border-color: var(--violet); background: rgba(155,93,229,0.06); color: var(--violet); } @@ -404,7 +404,7 @@ .qs-select, .qs-input { 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; - color: #0F172A; background: #f8f9fc; + color: var(--text); background: #f8f9fc; } .qs-select:focus, .qs-input:focus { outline: none; border-color: var(--violet); } @@ -428,7 +428,7 @@ padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(15,23,42,0.07); background: #fff; 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; } .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; } .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-pct { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 0.74rem; min-width: 36px; text-align: right; } /* 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-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 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; } @@ -582,7 +582,7 @@ cursor: pointer; transition: all 0.16s; } .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 .s-active { color: var(--violet); } .assign-stats .s-overdue { color: var(--pink); } @@ -639,7 +639,7 @@ .ae-dl-fill { height: 100%; border-radius: 99px; transition: width 0.4s; } .ae-btn { 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; cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 0; } @@ -680,7 +680,7 @@ .ar-body { flex: 1; min-width: 0; } .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; } .ar-meta { @@ -704,7 +704,7 @@ .ar-btn { 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; cursor: pointer; transition: background 0.15s; white-space: nowrap; } @@ -748,9 +748,9 @@ .hist-pct.mid { color: var(--amber); } .hist-pct.lo { color: var(--pink); } .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-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 ── */ .chart-section-title { @@ -780,7 +780,7 @@ 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-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); } .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-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-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; } /* ── 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-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-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-subs-list { display: flex; flex-direction: column; gap: 6px; } @@ -838,14 +838,14 @@ 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-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; } .ms-file { font-size: 0.7rem; color: var(--text-3); flex-shrink: 0; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .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: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 { display: inline-flex; align-items: center; gap: 3px; 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); } .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; } /* ── nav active ── */ @@ -917,7 +917,7 @@ .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: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:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } @@ -952,7 +952,7 @@ .stats-bar:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; 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; } .stats-bar-labels { display: flex; gap: 4px; margin-top: 4px; } @@ -972,7 +972,7 @@ } .stats-chip-val { 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; } @@ -1009,7 +1009,7 @@ .tc-header { display: flex; align-items: center; gap: 10px; } .tc-emoji { font-size: 1.6rem; line-height: 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-progress { display: flex; align-items: center; gap: 8px; } .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); } .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-tab { padding: 5px 12px; border-radius: 99px; border: none; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700; 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-row { display: flex; align-items: center; gap: 10px; @@ -1050,19 +1050,19 @@ .lb-pos.bronze { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; } .lb-avatar { 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; font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 800; color: #fff; } .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-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-class-sel { 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; - color: #0F172A; cursor: pointer; outline: none; + color: var(--text); cursor: pointer; outline: none; } /* ── Challenges widget ── */ @@ -1078,14 +1078,14 @@ .ch-item.claimed { opacity: 0.55; } .ch-icon { font-size: 1.3rem; flex-shrink: 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-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-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-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 { margin-top: 4px; padding: 4px 12px; border: none; border-radius: 99px; background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; @@ -1103,7 +1103,7 @@ } .gam-level { 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; 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-main { flex: 1; min-width: 0; } .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-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; } @@ -1123,7 +1123,7 @@ min-width: 62px; } .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-goal-ring { position: relative; width: 40px; height: 40px; } .gam-goal-ring svg { width: 40px; height: 40px; } @@ -1246,7 +1246,7 @@ display: none; /* shown for students via JS */ position: fixed; bottom: 88px; right: 20px; z-index: 80; 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); align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; @@ -1261,7 +1261,7 @@ } .dash-cfg-panel.open { display: block; } .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; } .dash-cfg-row { @@ -1270,7 +1270,7 @@ } .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 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; } @@ -1716,7 +1716,7 @@ 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 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 = ` @@ -1919,10 +1919,10 @@ 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-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 { /* тихо */ } } @@ -1932,7 +1932,7 @@ !a.session_status && (!a.deadline || new Date(a.deadline) > new Date()) ).length; 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 total = a.total_members || 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 titleHtml = esc(a.title) + (a.class_name && a.class_name !== 'Личное задание' ? `${esc(a.class_name)}` : '')