style(command-center): выровнять токены под дизайн-систему ls.css
Командный центр форкал токены со своими значениями → визуально не совпадал с системой. Выровнено: --surface стекло rgba(255,255,255,.82)+backdrop-filter (было сплошной #fff), --border .10 (было .08), --border-2 .20 (было .16), тени → системные --shadow/--shadow-h, радиусы --r-sm 8 / --r 12 (было 10/14). Карточки (acc-card/kpi/hcard/qbtn/tb-icon) теперь матовое стекло как везде. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -514,19 +514,18 @@
|
||||
/* ════════════════════ SCOPED CSS ════════════════════ */
|
||||
const CSS = `
|
||||
#admin-command-center{
|
||||
--surface:#fff; --surface-2:#faf8ff; --surface-3:rgba(155,93,229,.06);
|
||||
--border:rgba(15,23,42,.08); --border-2:rgba(15,23,42,.16);
|
||||
/* совпадает с дизайн-системой /css/ls.css (стекло, border, тени, радиусы) */
|
||||
--surface:rgba(255,255,255,0.82); --surface-2:#faf8ff; --surface-3:rgba(155,93,229,.06);
|
||||
--border:rgba(15,23,42,.10); --border-2:rgba(15,23,42,.20);
|
||||
--tx:#0F172A; --tx2:#3D4F6B; --tx3:#56687A; --tx4:#8693A6;
|
||||
--acc:#9B5DE5; --acc-600:#8a4fd0; --acc-700:#7a3bc4; --acc-50:rgba(155,93,229,.10); --acc-100:rgba(155,93,229,.22);
|
||||
--acc-green:#0BA85A; --acc-green-50:rgba(6,214,100,.14); --acc-amber:#D9831A; --acc-amber-50:rgba(255,179,71,.16);
|
||||
--acc-rose:#E23C8E; --acc-rose-50:rgba(241,91,181,.13); --acc-cyan:#0AA6B2; --acc-cyan-50:rgba(6,214,224,.14);
|
||||
--acc-violet:#9B5DE5; --acc-violet-50:rgba(155,93,229,.12);
|
||||
--grad-1:linear-gradient(135deg,#06D6E0,#9B5DE5);
|
||||
--acc-sh-xs:0 2px 8px rgba(15,23,42,.04);
|
||||
--acc-sh-sm:0 2px 10px rgba(15,23,42,.05);
|
||||
--acc-sh:0 6px 24px rgba(15,23,42,.09);
|
||||
--acc-sh-accent:0 8px 22px rgba(155,93,229,.34);
|
||||
--r-sm:10px; --r:14px; --r-lg:20px;
|
||||
--acc-sh-xs:var(--shadow); --acc-sh-sm:var(--shadow); --acc-sh:var(--shadow-h);
|
||||
--acc-sh-accent:0 2px 14px rgba(155,93,229,.30);
|
||||
--r-sm:8px; --r:12px; --r-lg:20px;
|
||||
--sans:'Manrope',system-ui,-apple-system,sans-serif;
|
||||
--mono:'Manrope',system-ui,sans-serif;
|
||||
--display:'Unbounded',sans-serif;
|
||||
@@ -551,7 +550,7 @@
|
||||
#admin-command-center .acc-clock b{ color:var(--tx2); font-weight:700; }
|
||||
#admin-command-center .acc-tb-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
|
||||
#admin-command-center .acc-tb-icon{ width:36px; height:36px; display:grid; place-items:center;
|
||||
border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface);
|
||||
border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); backdrop-filter:var(--blur);
|
||||
color:var(--tx2); box-shadow:var(--acc-sh-xs); transition:border-color .16s,color .16s,background .16s; }
|
||||
#admin-command-center .acc-tb-icon:hover{ border-color:var(--acc-100); color:var(--acc); background:var(--acc-50); }
|
||||
#admin-command-center .acc-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 16px;
|
||||
@@ -575,7 +574,7 @@
|
||||
|
||||
/* pulse kpi */
|
||||
#admin-command-center .acc-pulse{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:16px; margin-bottom:24px; }
|
||||
#admin-command-center .acc-kpi{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg);
|
||||
#admin-command-center .acc-kpi{ background:var(--surface); backdrop-filter:var(--blur); border:1.5px solid var(--border); border-radius:var(--r-lg);
|
||||
padding:18px; box-shadow:var(--acc-sh-xs); position:relative; overflow:hidden; transition:transform .18s var(--ease-out),box-shadow .18s,border-color .18s; }
|
||||
#admin-command-center .acc-kpi:hover{ transform:translateY(-3px); box-shadow:var(--acc-sh); border-color:var(--acc-100); }
|
||||
#admin-command-center .acc-kpi.hero{ background:linear-gradient(180deg,rgba(155,93,229,.06),var(--surface)); border-color:rgba(155,93,229,.20); }
|
||||
@@ -603,7 +602,7 @@
|
||||
/* main grid */
|
||||
#admin-command-center .acc-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:start; margin-bottom:24px; }
|
||||
#admin-command-center .acc-col{ display:flex; flex-direction:column; gap:20px; }
|
||||
#admin-command-center .acc-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--acc-sh-xs); overflow:hidden; transition:box-shadow .2s; }
|
||||
#admin-command-center .acc-card{ background:var(--surface); backdrop-filter:var(--blur); border:1.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--acc-sh-xs); overflow:hidden; transition:box-shadow .2s; }
|
||||
#admin-command-center .acc-card:hover{ box-shadow:var(--acc-sh); }
|
||||
#admin-command-center .acc-card-head{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border); }
|
||||
#admin-command-center .acc-ttl-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:var(--acc-50); }
|
||||
@@ -690,7 +689,7 @@
|
||||
|
||||
/* health */
|
||||
#admin-command-center .acc-health{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
|
||||
#admin-command-center .acc-hcard{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:16px 17px;
|
||||
#admin-command-center .acc-hcard{ background:var(--surface); backdrop-filter:var(--blur); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:16px 17px;
|
||||
box-shadow:var(--acc-sh-xs); transition:transform .18s var(--ease-out),box-shadow .18s,border-color .18s; }
|
||||
#admin-command-center .acc-hcard:hover{ transform:translateY(-3px); box-shadow:var(--acc-sh); border-color:var(--acc-100); }
|
||||
#admin-command-center .acc-hcard-top{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
|
||||
@@ -717,7 +716,7 @@
|
||||
|
||||
/* quick */
|
||||
#admin-command-center .acc-quick{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
|
||||
#admin-command-center .acc-qbtn{ display:flex; flex-direction:column; gap:11px; padding:16px 15px; background:var(--surface);
|
||||
#admin-command-center .acc-qbtn{ display:flex; flex-direction:column; gap:11px; padding:16px 15px; background:var(--surface); backdrop-filter:var(--blur);
|
||||
border:1.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--acc-sh-xs); text-align:left; cursor:pointer;
|
||||
transition:transform .16s var(--ease-out),box-shadow .16s,border-color .16s; font-family:var(--sans); }
|
||||
#admin-command-center .acc-qbtn:hover{ transform:translateY(-3px); box-shadow:var(--acc-sh); border-color:var(--acc-100); }
|
||||
|
||||
Reference in New Issue
Block a user