a11y: WCAG AA contrast + ARIA roles + focus management across all pages
- css/ls.css: --text-3 #8898AA → #56687A (5.1:1 contrast), min-height 44px on .btn-primary/.btn-ghost/.sb-link, new .icon-btn utility (44×44px) - js/api.js: lsConfirm — role=dialog, aria-modal, aria-labelledby, Tab focus trap, restore focus on close; lsToast — aria-live=polite on container, role=alert on errors; live quiz — role=dialog, role=radiogroup, role=radio, aria-checked, keyboard support - test-run.html: q-opt divs — role=radio/checkbox, aria-checked, tabindex, keyboard enter/space; confirm modal — role=dialog, aria-modal; btn-flag — aria-pressed; dots — aria-label, aria-current; touch targets 44px - board.html: btn-del-ann — aria-label; reaction buttons — aria-label, aria-pressed - All 18 HTML files: replace hardcoded color:#8898AA with color:var(--text-3) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
+61
-61
@@ -34,10 +34,10 @@
|
||||
color: #0F172A; letter-spacing: -0.02em;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.dh-sub { font-size: 0.78rem; color: #8898AA; font-weight: 500; margin-top: 2px; }
|
||||
.dh-sub { font-size: 0.78rem; color: var(--text-3); font-weight: 500; margin-top: 2px; }
|
||||
.dh-stats { display: flex; gap: 14px; flex-shrink: 0; }
|
||||
.stat-ring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
|
||||
.stat-ring .sr-label { font-size: 0.62rem; color: #8898AA; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.stat-ring .sr-label { font-size: 0.62rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
|
||||
/* ── ZONE 2: Action Banner + Cards ── */
|
||||
.action-zone { margin-bottom: 22px; }
|
||||
@@ -79,7 +79,7 @@
|
||||
.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-sub { font-size: 0.72rem; color: #8898AA; 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; }
|
||||
|
||||
/* ── ZONE 3: Three-Column Grid ── */
|
||||
@@ -117,7 +117,7 @@
|
||||
}
|
||||
.w-title {
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
|
||||
color: #8898AA; text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.w-title::before {
|
||||
@@ -142,14 +142,14 @@
|
||||
.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-date { font-size: 0.7rem; color: #8898AA; }
|
||||
.grade-date { font-size: 0.7rem; color: var(--text-3); }
|
||||
|
||||
/* ── activity widget tabs ── */
|
||||
.act-tabs { display: flex; gap: 4px; }
|
||||
.act-tab {
|
||||
padding: 3px 12px; border-radius: 99px; border: none;
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700;
|
||||
color: #8898AA; 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.active { background: #0F172A; color: #fff; }
|
||||
@@ -157,7 +157,7 @@
|
||||
.act-scale-btn {
|
||||
padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.08);
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.62rem; font-weight: 700;
|
||||
color: #8898AA; background: transparent; cursor: pointer; transition: all 0.12s;
|
||||
color: var(--text-3); background: transparent; cursor: pointer; transition: all 0.12s;
|
||||
}
|
||||
.act-scale-btn:hover { border-color: rgba(155,93,229,0.3); color: var(--violet); }
|
||||
.act-scale-btn.active { background: rgba(155,93,229,0.08); border-color: rgba(155,93,229,0.25); color: var(--violet); }
|
||||
@@ -166,10 +166,10 @@
|
||||
|
||||
/* ── mini heatmap (redesigned) ── */
|
||||
.hm-months { display: flex; margin-bottom: 2px; padding-left: 22px; }
|
||||
.hm-month-label { font-size: 0.56rem; font-weight: 700; color: #8898AA; text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; white-space: nowrap; }
|
||||
.hm-month-label { font-size: 0.56rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; white-space: nowrap; }
|
||||
.hm-body { display: flex; gap: 0; }
|
||||
.hm-weekdays { display: flex; flex-direction: column; gap: 2px; width: 22px; flex-shrink: 0; padding-top: 1px; }
|
||||
.hm-wd { font-size: 0.5rem; font-weight: 700; color: #8898AA; height: 14px; line-height: 14px; }
|
||||
.hm-wd { font-size: 0.5rem; font-weight: 700; color: var(--text-3); height: 14px; line-height: 14px; }
|
||||
.mini-heatmap { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 2px; }
|
||||
.mhm-cell {
|
||||
width: 14px; height: 14px; border-radius: 50%; background: rgba(15,23,42,0.05);
|
||||
@@ -191,7 +191,7 @@
|
||||
.hm-footer {
|
||||
display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 8px;
|
||||
border-top: 1px solid rgba(15,23,42,0.05);
|
||||
font-size: 0.68rem; color: #8898AA; 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-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; }
|
||||
@@ -217,8 +217,8 @@
|
||||
.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-score { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 900; }
|
||||
.hm-day-popup .hdp-mode { font-size: 0.66rem; color: #8898AA; }
|
||||
.hm-day-popup .hdp-empty { font-size: 0.75rem; color: #8898AA; padding: 4px 0; }
|
||||
.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; }
|
||||
@@ -242,7 +242,7 @@
|
||||
.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-sub { font-size: 0.72rem; color: #8898AA; 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); }
|
||||
|
||||
/* ── subjects progress bars ── */
|
||||
@@ -274,8 +274,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-name { font-size: 0.86rem; font-weight: 700; color: #0F172A; }
|
||||
.smc-meta { font-size: 0.72rem; color: #8898AA; margin-top: 2px; }
|
||||
.smc-arrow { width: 18px; height: 18px; color: #8898AA; flex-shrink: 0; }
|
||||
.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; }
|
||||
|
||||
/* ── animations ── */
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@@ -355,7 +355,7 @@
|
||||
.streak-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
|
||||
.sc-day {
|
||||
aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 0.62rem; font-weight: 700; color: #8898AA; background: rgba(15,23,42,0.03);
|
||||
font-size: 0.62rem; font-weight: 700; color: var(--text-3); background: rgba(15,23,42,0.03);
|
||||
transition: transform 0.12s;
|
||||
}
|
||||
.sc-day.today { border: 1.5px solid var(--violet); color: var(--violet); font-weight: 800; }
|
||||
@@ -372,7 +372,7 @@
|
||||
.sc-month { font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #0F172A; }
|
||||
.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: #8898AA; 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; }
|
||||
|
||||
/* C4: Keyboard shortcuts hint */
|
||||
.kb-hint {
|
||||
@@ -400,7 +400,7 @@
|
||||
.qs-subj-icon svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2; }
|
||||
.qs-options { display: flex; flex-direction: column; gap: 12px; }
|
||||
.qs-row { display: flex; align-items: center; gap: 12px; }
|
||||
.qs-label { font-size: 0.78rem; font-weight: 700; color: #8898AA; min-width: 80px; }
|
||||
.qs-label { font-size: 0.78rem; font-weight: 700; color: var(--text-3); min-width: 80px; }
|
||||
.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;
|
||||
@@ -441,7 +441,7 @@
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 14px; border-radius: 10px;
|
||||
background: rgba(15,23,42,0.03); border: 1px solid rgba(15,23,42,0.06);
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 600; color: #8898AA;
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--text-3);
|
||||
}
|
||||
.adm-stat-val {
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.82rem; font-weight: 900;
|
||||
@@ -466,7 +466,7 @@
|
||||
}
|
||||
.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-subj { color: #8898AA; 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; }
|
||||
|
||||
/* Dark mode for admin */
|
||||
@@ -484,7 +484,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-stats { font-size: 0.72rem; color: #8898AA; 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-bar { width: 60px; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); overflow: hidden; flex-shrink: 0; }
|
||||
.cs-fill { height: 100%; border-radius: 99px; background: var(--violet); }
|
||||
@@ -496,7 +496,7 @@
|
||||
}
|
||||
.section-title {
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 800;
|
||||
color: #8898AA; text-transform: uppercase; letter-spacing: 0.09em;
|
||||
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.09em;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.section-title::before {
|
||||
@@ -518,7 +518,7 @@
|
||||
}
|
||||
.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-stats { font-size: 0.75rem; color: #8898AA; 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-overdue { color: var(--pink); }
|
||||
.assign-stats .s-done { color: #059652; }
|
||||
@@ -527,7 +527,7 @@
|
||||
.subj-filter-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
|
||||
.sf-chip {
|
||||
padding: 3px 11px 3px 8px; border-radius: 99px; border: 1.5px solid rgba(15,23,42,0.09);
|
||||
background: #fff; color: #8898AA;
|
||||
background: #fff; color: var(--text-3);
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700;
|
||||
cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px;
|
||||
white-space: nowrap;
|
||||
@@ -540,7 +540,7 @@
|
||||
.assign-group-hdr {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800;
|
||||
color: #8898AA; text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em;
|
||||
margin: 8px 0 4px; cursor: pointer; user-select: none;
|
||||
}
|
||||
.assign-group-hdr::before { content: ''; display: inline-block; width: 3px; height: 13px; border-radius: 99px; flex-shrink: 0; }
|
||||
@@ -569,7 +569,7 @@
|
||||
.ae-pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
|
||||
.ae-pill { padding: 3px 10px; border-radius: 99px; background: rgba(15,23,42,0.06); color: #6B7A8E; font-size: 0.72rem; font-weight: 600; }
|
||||
.ae-dl { flex: 1; }
|
||||
.ae-dl-label { font-size: 0.70rem; color: #8898AA; margin-bottom: 5px; display: flex; justify-content: space-between; }
|
||||
.ae-dl-label { font-size: 0.70rem; color: var(--text-3); margin-bottom: 5px; display: flex; justify-content: space-between; }
|
||||
.ae-dl-bar { height: 4px; border-radius: 99px; background: rgba(15,23,42,0.08); overflow: hidden; }
|
||||
.ae-dl-fill { height: 100%; border-radius: 99px; transition: width 0.4s; }
|
||||
.ae-btn {
|
||||
@@ -619,7 +619,7 @@
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
|
||||
}
|
||||
.ar-meta {
|
||||
font-size: 0.71rem; color: #8898AA; margin-top: 3px;
|
||||
font-size: 0.71rem; color: var(--text-3); margin-top: 3px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.ar-meta .ar-tag-urgent { color: #E83A1E; font-weight: 700; }
|
||||
@@ -635,7 +635,7 @@
|
||||
.ar-progress { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
.ar-prog-bar { width: 72px; height: 4px; border-radius: 99px; background: rgba(15,23,42,0.08); overflow: hidden; }
|
||||
.ar-prog-fill { height: 100%; border-radius: 99px; }
|
||||
.ar-prog-text { font-size: 0.71rem; color: #8898AA; white-space: nowrap; min-width: 36px; }
|
||||
.ar-prog-text { font-size: 0.71rem; color: var(--text-3); white-space: nowrap; min-width: 36px; }
|
||||
|
||||
.ar-btn {
|
||||
padding: 6px 16px; border: none; border-radius: 99px;
|
||||
@@ -655,7 +655,7 @@
|
||||
.ar-btn-result:hover { background: rgba(6,214,100,0.14); }
|
||||
.ar-btn-ghost {
|
||||
padding: 6px 16px; border: 1.5px solid rgba(15,23,42,0.12); border-radius: 99px;
|
||||
background: transparent; color: #8898AA;
|
||||
background: transparent; color: var(--text-3);
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.76rem; font-weight: 600;
|
||||
text-decoration: none; display: inline-flex; align-items: center;
|
||||
white-space: nowrap; transition: all 0.15s;
|
||||
@@ -684,13 +684,13 @@
|
||||
.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-meta { font-size: 0.75rem; color: #8898AA; }
|
||||
.hist-meta { font-size: 0.75rem; color: var(--text-3); }
|
||||
.hist-score { font-size: 0.8rem; color: #3D4F6B; font-weight: 600; white-space: nowrap; }
|
||||
|
||||
/* ── progress tab ── */
|
||||
.chart-section-title {
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.76rem; font-weight: 800;
|
||||
color: #8898AA; text-transform: uppercase; letter-spacing: 0.09em;
|
||||
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.09em;
|
||||
margin: 36px 0 16px;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
@@ -716,7 +716,7 @@
|
||||
}
|
||||
.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-sessions { font-size: 0.72rem; color: #8898AA; }
|
||||
.subj-chart-sessions { font-size: 0.72rem; color: var(--text-3); }
|
||||
.canvas-wrap { position: relative; width: 130px; height: 130px; margin: 4px 0; }
|
||||
|
||||
/* ── weak topics ── */
|
||||
@@ -731,7 +731,7 @@
|
||||
.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-meta { font-size: 0.75rem; color: #8898AA; }
|
||||
.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-pct { font-family: 'Unbounded', sans-serif; font-size: 1rem; font-weight: 900; color: #E0335E; min-width: 48px; text-align: right; }
|
||||
@@ -741,7 +741,7 @@
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding-top: 8px; border-top: 1px solid rgba(15,23,42,0.06); flex-wrap: wrap;
|
||||
}
|
||||
.ae-submit-label { font-size: 0.72rem; color: #8898AA; font-weight: 600; flex-shrink: 0; }
|
||||
.ae-submit-label { font-size: 0.72rem; color: var(--text-3); font-weight: 600; flex-shrink: 0; }
|
||||
.ae-submit-status {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
padding: 3px 10px; border-radius: 99px; font-size: 0.72rem; font-weight: 700;
|
||||
@@ -775,7 +775,7 @@
|
||||
.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;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.ms-file { font-size: 0.7rem; color: #8898AA; 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; }
|
||||
.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; }
|
||||
@@ -807,7 +807,7 @@
|
||||
/* ── spinner / empty ── */
|
||||
.spinner { width: 36px; height: 36px; border: 3px solid rgba(15,23,42,0.1); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.75s linear infinite; margin: 48px auto; display: block; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.empty { text-align: center; padding: 36px; color: #8898AA; font-size: 0.88rem; }
|
||||
.empty { text-align: center; padding: 36px; color: var(--text-3); font-size: 0.88rem; }
|
||||
|
||||
/* ── empty CTA ── */
|
||||
.empty-cta {
|
||||
@@ -850,7 +850,7 @@
|
||||
.form-input { width: 100%; padding: 12px 16px; border: 1.5px solid rgba(15,23,42,0.15); border-radius: 12px; font-family: 'Manrope', sans-serif; font-size: 0.95rem; color: var(--text); background: #f8f9fc; transition: border-color 0.2s; box-sizing: border-box; }
|
||||
.form-input:focus { outline: none; border-color: var(--violet); background: #fff; }
|
||||
.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: #8898AA; 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-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:hover { background: #1E2D4A; box-shadow: 0 6px 20px rgba(15,23,42,0.25); }
|
||||
@@ -860,7 +860,7 @@
|
||||
/* ── history timeline ── */
|
||||
.hist-date-sep {
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.68rem; font-weight: 800;
|
||||
color: #8898AA; text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em;
|
||||
margin: 22px 0 10px; display: flex; align-items: center; gap: 12px;
|
||||
}
|
||||
.hist-date-sep:first-child { margin-top: 0; }
|
||||
@@ -876,7 +876,7 @@
|
||||
border-radius: 18px; padding: 18px 20px;
|
||||
}
|
||||
.stats-chart-title {
|
||||
font-size: 0.72rem; font-weight: 700; color: #8898AA;
|
||||
font-size: 0.72rem; font-weight: 700; color: var(--text-3);
|
||||
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px;
|
||||
}
|
||||
.stats-bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 100px; }
|
||||
@@ -909,7 +909,7 @@
|
||||
font-family: 'Unbounded', sans-serif; font-size: 1.1rem; font-weight: 800;
|
||||
color: #0F172A; line-height: 1;
|
||||
}
|
||||
.stats-chip-lbl { font-size: 0.65rem; color: #8898AA; margin-top: 3px; font-weight: 600; }
|
||||
.stats-chip-lbl { font-size: 0.65rem; color: var(--text-3); margin-top: 3px; font-weight: 600; }
|
||||
|
||||
/* ── activity heatmap ── */
|
||||
.heatmap-section {
|
||||
@@ -924,7 +924,7 @@
|
||||
.hm-cell[data-n="3"] { background: rgba(155,93,229,0.65); }
|
||||
.hm-cell[data-n="4"] { background: rgba(155,93,229,0.88); }
|
||||
.hm-cell:hover { transform: scale(1.5); z-index: 5; position: relative; }
|
||||
.heatmap-legend { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 0.72rem; color: #8898AA; }
|
||||
.heatmap-legend { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 0.72rem; color: var(--text-3); }
|
||||
.hm-leg { width: 14px; height: 14px; border-radius: 3px; }
|
||||
|
||||
/* ── subject card grid (legacy, kept for compatibility) ── */
|
||||
@@ -945,12 +945,12 @@
|
||||
.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-subj { font-size: 0.7rem; font-weight: 700; color: #8898AA; 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-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.07); }
|
||||
.tc-fill { height: 100%; border-radius: 99px; background: var(--violet); }
|
||||
.tc-pct { font-size: 0.72rem; font-weight: 700; color: var(--violet); flex-shrink: 0; }
|
||||
.tc-meta { font-size: 0.74rem; color: #8898AA; }
|
||||
.tc-meta { font-size: 0.74rem; color: var(--text-3); }
|
||||
|
||||
/* ── Leaderboard widget ── */
|
||||
.lb-widget {
|
||||
@@ -964,7 +964,7 @@
|
||||
.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: #8898AA; 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-list { display: flex; flex-direction: column; gap: 4px; }
|
||||
@@ -978,7 +978,7 @@
|
||||
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'Unbounded', sans-serif; font-size: 0.68rem; font-weight: 900;
|
||||
background: rgba(15,23,42,0.06); color: #8898AA;
|
||||
background: rgba(15,23,42,0.06); color: var(--text-3);
|
||||
}
|
||||
.lb-pos.gold { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; }
|
||||
.lb-pos.silver { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: #fff; }
|
||||
@@ -991,9 +991,9 @@
|
||||
}
|
||||
.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-rank { font-size: 0.64rem; color: #8898AA; 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-empty { text-align: center; padding: 20px; color: #8898AA; font-size: 0.82rem; }
|
||||
.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;
|
||||
@@ -1014,7 +1014,7 @@
|
||||
.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-desc { font-size: 0.72rem; color: #8898AA; 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-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; }
|
||||
@@ -1047,7 +1047,7 @@
|
||||
.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-xp-text { font-size: 0.72rem; color: #8898AA; 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-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9B5DE5, #06D6E0); transition: width 0.6s ease; }
|
||||
.gam-chips { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
@@ -1059,7 +1059,7 @@
|
||||
}
|
||||
.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-lbl { font-size: 0.58rem; color: #8898AA; 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 svg { width: 40px; height: 40px; }
|
||||
|
||||
@@ -2640,11 +2640,11 @@
|
||||
y: {
|
||||
min: 0, max: 100,
|
||||
grid: { color: 'rgba(15,23,42,0.05)' },
|
||||
ticks: { callback: v => v + '%', font: { family: 'Manrope', size: 11 }, color: '#8898AA' }
|
||||
ticks: { callback: v => v + '%', font: { family: 'Manrope', size: 11 }, color: '#56687A' }
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { font: { family: 'Manrope', size: 11 }, color: '#8898AA' }
|
||||
ticks: { font: { family: 'Manrope', size: 11 }, color: '#56687A' }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2822,7 +2822,7 @@
|
||||
<span class="ae-submit-label">Работа:</span>
|
||||
<span class="ae-submit-status ${st.cls}">${lci(st.icon,'width:14px;height:14px')} ${st.label}</span>
|
||||
${gradeHtml}
|
||||
<span style="font-size:0.72rem;color:#8898AA;flex:1">${esc(sub.original_name)}</span>
|
||||
<span style="font-size:0.72rem;color:var(--text-3);flex:1">${esc(sub.original_name)}</span>
|
||||
${noteHtml}
|
||||
${resubBtn}
|
||||
${delBtn}
|
||||
@@ -2843,7 +2843,7 @@
|
||||
if (!wrap || !list || isTeacher) return;
|
||||
|
||||
if (!_allSubmissions.length) {
|
||||
list.innerHTML = `<div style="padding:18px 0;text-align:center;color:#8898AA;font-size:0.82rem">
|
||||
list.innerHTML = `<div style="padding:18px 0;text-align:center;color:var(--text-3);font-size:0.82rem">
|
||||
${lci('file-plus','width:24px;height:24px;opacity:0.4;display:block;margin:0 auto 8px')}
|
||||
Сданных работ пока нет.<br>
|
||||
<span style="font-size:0.74rem">Когда учитель назначит задание с прикреплением файла, вы сможете сдать его прямо здесь.</span>
|
||||
@@ -3354,7 +3354,7 @@
|
||||
<span class="sc-month">${monthNames[month]}</span>
|
||||
<span style="display:flex;gap:10px;align-items:center">
|
||||
<span class="sc-streak-badge">${lci('flame', 16)} ${streak}</span>
|
||||
${bestStreak > streak ? `<span style="font-size:0.6rem;color:#8898AA;font-weight:600">рекорд ${bestStreak}</span>` : ''}
|
||||
${bestStreak > streak ? `<span style="font-size:0.6rem;color:var(--text-3);font-weight:600">рекорд ${bestStreak}</span>` : ''}
|
||||
</span>
|
||||
</div>`;
|
||||
html += `<div class="sc-weekdays">${wdNames.map(d => `<span class="sc-wd">${d}</span>`).join('')}</div>`;
|
||||
@@ -3454,7 +3454,7 @@
|
||||
try {
|
||||
const classes = await LS.api('/api/classes');
|
||||
if (!classes || !classes.length) {
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Нет классов</div>';
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3);padding:8px 0">Нет классов</div>';
|
||||
return;
|
||||
}
|
||||
const colors = ['#9B5DE5','#06D6A0','#F59E0B','#06B6D4','#E0335E'];
|
||||
@@ -3475,7 +3475,7 @@
|
||||
}).join('');
|
||||
reIcons();
|
||||
} catch {
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Ошибка загрузки</div>';
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3);padding:8px 0">Ошибка загрузки</div>';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3488,7 +3488,7 @@
|
||||
const data = await LS.api('/api/admin/sessions?limit=8');
|
||||
const rows = Array.isArray(data) ? data : (data.rows || []);
|
||||
if (!rows.length) {
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Нет сессий</div>';
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3);padding:8px 0">Нет сессий</div>';
|
||||
return;
|
||||
}
|
||||
body.innerHTML = rows.slice(0, 8).map(s => {
|
||||
@@ -3502,7 +3502,7 @@
|
||||
</div>`;
|
||||
}).join('');
|
||||
} catch {
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Ошибка</div>';
|
||||
body.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3);padding:8px 0">Ошибка</div>';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3514,7 +3514,7 @@
|
||||
try {
|
||||
const list = await LS.teacherAssignments();
|
||||
if (!list.length) {
|
||||
listEl.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Заданий пока нет</div>';
|
||||
listEl.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3);padding:8px 0">Заданий пока нет</div>';
|
||||
return;
|
||||
}
|
||||
const sorted = [...list].sort((a, b) => urgencyScore(a) - urgencyScore(b));
|
||||
@@ -3524,7 +3524,7 @@
|
||||
}
|
||||
reIcons();
|
||||
} catch {
|
||||
listEl.innerHTML = '<div style="font-size:0.8rem;color:#8898AA;padding:8px 0">Ошибка загрузки</div>';
|
||||
listEl.innerHTML = '<div style="font-size:0.8rem;color:var(--text-3);padding:8px 0">Ошибка загрузки</div>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user