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

refactor(profile): use ls.css design tokens

Browse Source 
Replaced 12 hardcoded brand colors with var() tokens:
- linear-gradient(135deg,#9B5DE5,#06D6E0) → var(--grad-1) in 7 CSS rules
  (avatar ring, badge dot, stat val grad, xp level, frame preview, zoom thumb, send btn, modal dot)
- #9B5DE5 → var(--violet) in 3 rules (avatar edit btn, bm-icon-lesson, frame selected border, av-drop hover)
- #06D6E0 → var(--cyan) in bm-icon-file
- #0F172A → var(--text) in frames-section heading inline style

Kept: dark panel palette (#0d0b28/#1a1248), 90deg horizontal gradients,
domain subject colors (SUBJ_META palette), shop gold/amber gradients,
shop-activate/active brand variants, #06D6A0 bookmark course teal,
#EF476F delete-hover (≠ --pink), tinted rgba values.

Before: ~26 hardcodes | After: ~12 hardcodes (decorative/domain/dark-panel)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-05-22 22:10:10 +03:00
parent 0b06e8facd
commit 916e2ddc31
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/profile.html
+15 -15
View File
@@ -63,7 +63,7 @@
} }
.p-avatar-ring { .p-avatar-ring {
position: absolute; inset: -3px; border-radius: 50%; position: absolute; inset: -3px; border-radius: 50%;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
padding: 3px; border-radius: 50%; padding: 3px; border-radius: 50%;
} }
.p-avatar-ring-inner { .p-avatar-ring-inner {
@@ -81,7 +81,7 @@
.p-avatar-edit-btn { .p-avatar-edit-btn {
position: absolute; bottom: 0; right: 0; position: absolute; bottom: 0; right: 0;
width: 26px; height: 26px; border-radius: 50%; width: 26px; height: 26px; border-radius: 50%;
background: #9B5DE5; border: 2px solid #1a1248; background: var(--violet); border: 2px solid #1a1248;
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 2; transition: background .15s; cursor: pointer; z-index: 2; transition: background .15s;
} }
@@ -111,7 +111,7 @@
} }
.p-badge-dot { .p-badge-dot {
width: 5px; height: 5px; border-radius: 50%; width: 5px; height: 5px; border-radius: 50%;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
} }
.p-since { font-size: 0.67rem; color: rgba(255,255,255,0.3); } .p-since { font-size: 0.67rem; color: rgba(255,255,255,0.3); }
@@ -130,7 +130,7 @@
color: #fff; line-height: 1; color: #fff; line-height: 1;
} }
.p-stat-val.grad { .p-stat-val.grad {
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
} }
.p-stat-lbl { font-size: 0.58rem; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .p-stat-lbl { font-size: 0.58rem; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
@@ -281,9 +281,9 @@
width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center;
justify-content: center; font-size: 0.9rem; flex-shrink: 0; justify-content: center; font-size: 0.9rem; flex-shrink: 0;
} }
.bm-item-icon-lesson { background: rgba(155,93,229,0.1); color: #9B5DE5; } .bm-item-icon-lesson { background: rgba(155,93,229,0.1); color: var(--violet); }
.bm-item-icon-course { background: rgba(6,214,160,0.1); color: #06D6A0; } .bm-item-icon-course { background: rgba(6,214,160,0.1); color: #06D6A0; }
.bm-item-icon-file { background: rgba(6,214,224,0.1); color: #06D6E0; } .bm-item-icon-file { background: rgba(6,214,224,0.1); color: var(--cyan); }
.bm-item-body { flex: 1; min-width: 0; } .bm-item-body { flex: 1; min-width: 0; }
.bm-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bm-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-item-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; } .bm-item-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
@@ -315,7 +315,7 @@
.form-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .form-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.btn-save { .btn-save {
padding: 9px 22px; border: none; border-radius: 99px; padding: 9px 22px; border: none; border-radius: 99px;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
color: #fff; font-family: 'Manrope', sans-serif; color: #fff; font-family: 'Manrope', sans-serif;
font-size: 0.82rem; font-weight: 700; cursor: pointer; font-size: 0.82rem; font-weight: 700; cursor: pointer;
transition: all .2s; position: relative; overflow: hidden; transition: all .2s; position: relative; overflow: hidden;
@@ -398,7 +398,7 @@
} }
.ach-xp-lvl { .ach-xp-lvl {
width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; width: 48px; height: 48px; 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;
} }
@@ -425,11 +425,11 @@
border: 2px solid transparent; transition: all 0.18s; min-width: 72px; border: 2px solid transparent; transition: all 0.18s; min-width: 72px;
} }
.frame-item:hover { background: rgba(155,93,229,0.04); } .frame-item:hover { background: rgba(155,93,229,0.04); }
.frame-item.selected { border-color: #9B5DE5; background: rgba(155,93,229,0.06); } .frame-item.selected { border-color: var(--violet); background: rgba(155,93,229,0.06); }
.frame-item.locked { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.5); } .frame-item.locked { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.5); }
.frame-preview { .frame-preview {
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.7rem; font-weight: 800; color: #fff; font-family: 'Unbounded', sans-serif; font-size: 0.7rem; font-weight: 800; color: #fff;
} }
@@ -624,7 +624,7 @@
} }
.av-title-dot { .av-title-dot {
width: 8px; height: 8px; border-radius: 50%; width: 8px; height: 8px; border-radius: 50%;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
flex-shrink: 0; flex-shrink: 0;
} }
.av-close { .av-close {
@@ -662,7 +662,7 @@
transition: all .2s; background: rgba(155,93,229,0.04); transition: all .2s; background: rgba(155,93,229,0.04);
} }
.av-drop:hover, .av-drop.drag-over { .av-drop:hover, .av-drop.drag-over {
border-color: #9B5DE5; background: rgba(155,93,229,0.10); border-color: var(--violet); background: rgba(155,93,229,0.10);
transform: translateY(-1px); transform: translateY(-1px);
} }
.av-drop-icon { width: 30px; height: 30px; color: rgba(155,93,229,0.65); margin-bottom: 2px; } .av-drop-icon { width: 30px; height: 30px; color: rgba(155,93,229,0.65); margin-bottom: 2px; }
@@ -696,7 +696,7 @@
} }
#av-zoom::-webkit-slider-thumb { #av-zoom::-webkit-slider-thumb {
-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;
} }
.av-crop-hint { font-size: 0.67rem; color: rgba(255,255,255,0.28); text-align: center; } .av-crop-hint { font-size: 0.67rem; color: rgba(255,255,255,0.28); text-align: center; }
@@ -712,7 +712,7 @@
.av-btn-back:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); } .av-btn-back:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
.av-btn-send { .av-btn-send {
flex: 2; padding: 10px 16px; border-radius: 12px; border: none; flex: 2; padding: 10px 16px; border-radius: 12px; border: none;
background: linear-gradient(135deg, #9B5DE5, #06D6E0); background: var(--grad-1);
color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700; color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
cursor: pointer; transition: opacity .15s; cursor: pointer; transition: opacity .15s;
} }
@@ -896,7 +896,7 @@
<div class="ach-summary" id="ach-summary"></div> <div class="ach-summary" id="ach-summary"></div>
<!-- Avatar frames --> <!-- Avatar frames -->
<div class="frames-section" id="frames-section" style="display:none"> <div class="frames-section" id="frames-section" style="display:none">
<div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:#0F172A;margin-bottom:10px">Рамки аватара</div> <div style="font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:800;color:var(--text);margin-bottom:10px">Рамки аватара</div>
<div class="frames-grid" id="frames-grid"></div> <div class="frames-grid" id="frames-grid"></div>
</div> </div>
<div class="ach-grid" id="ach-grid"></div> <div class="ach-grid" id="ach-grid"></div>