wasrusgen/wasrusgen1-crm
1
0
Fork 0
mirror of https://github.com/wasrusgen/wasrusgen1-crm.git synced 2026-06-03 18:24:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: sidebar color-coding — home white, done green, active accent, overdue badges

Browse Source
This commit is contained in:
wasrusgen 2026-05-29 17:12:00 +03:00
parent 99ea8c8fe0
commit 50cfd92f9b
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/mockup_cabinet.html
View File

@ -44,20 +44,26 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
.sb{width:228px;flex-shrink:0;background:var(--sb-bg);display:flex;flex-direction:column} .sb{width:228px;flex-shrink:0;background:var(--sb-bg);display:flex;flex-direction:column}
.sb-nav{flex:1;padding:14px 0;overflow-y:auto} .sb-nav{flex:1;padding:14px 0;overflow-y:auto}
.sb-cap{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.2);padding:10px 18px 6px} .sb-cap{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.2);padding:10px 18px 6px}
.si{display:flex;align-items:flex-start;gap:11px;padding:9px 18px;cursor:pointer;border-left:2px solid transparent;transition:background .12s,border-color .12s} .si{display:flex;align-items:flex-start;gap:11px;padding:9px 18px;cursor:pointer;border-left:2px solid transparent;transition:background .12s,border-color .12s;position:relative}
.si:hover:not(.locked){background:rgba(255,255,255,.04)} .si:hover:not(.locked){background:rgba(255,255,255,.04)}
.si.active{background:rgba(4,120,87,.14);border-left-color:var(--primary)} .si.active{background:rgba(4,120,87,.14);border-left-color:var(--primary)}
.si.home{background:rgba(255,255,255,.1)!important;border-left-color:rgba(255,255,255,.6)!important}
.si.home .si-name{color:#fff!important;font-weight:700!important}
.si.home .si-sub{color:rgba(255,255,255,.55)!important}
.si.locked{opacity:.38;cursor:default} .si.locked{opacity:.38;cursor:default}
.si-num{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px} .si-num{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px}
.si.done .si-num{background:rgba(16,185,129,.15);color:var(--mid);font-size:14px} .si.done{background:rgba(16,185,129,.07);border-left-color:rgba(16,185,129,.4)}
.si.done .si-num{background:rgba(16,185,129,.2);color:var(--mid);font-size:14px}
.si.active .si-num{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(4,120,87,.4)} .si.active .si-num{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(4,120,87,.4)}
.si.locked .si-num{background:rgba(255,255,255,.05);color:rgba(255,255,255,.2);font-size:11px} .si.locked .si-num{background:rgba(255,255,255,.05);color:rgba(255,255,255,.2);font-size:11px}
.si-body{flex:1;min-width:0} .si-body{flex:1;min-width:0}
.si-lbl{font-size:10px;color:rgba(255,255,255,.25);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1px} .si-lbl{font-size:10px;color:rgba(255,255,255,.25);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1px}
.si-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .si-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si.done .si-name{color:rgba(16,185,129,.85)}
.si.active .si-name{color:#fff} .si.active .si-name{color:#fff}
.si-sub{font-size:11px;color:rgba(255,255,255,.3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .si-sub{font-size:11px;color:rgba(255,255,255,.3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si.active .si-sub{color:rgba(16,185,129,.6)} .si.active .si-sub{color:rgba(16,185,129,.6)}
.si[data-overdue]::after{content:attr(data-overdue);position:absolute;top:8px;right:14px;background:#EF4444;color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;line-height:1.5}
.si-con{width:1px;height:10px;margin:0 0 0 31px;background:rgba(255,255,255,.07)} .si-con{width:1px;height:10px;margin:0 0 0 31px;background:rgba(255,255,255,.07)}
.si-con.done{background:rgba(16,185,129,.25)} .si-con.done{background:rgba(16,185,129,.25)}
.sb-foot{padding:14px;border-top:1px solid rgba(255,255,255,.05)} .sb-foot{padding:14px;border-top:1px solid rgba(255,255,255,.05)}
@ -500,7 +506,7 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
<div class="layout"> <div class="layout">
<aside class="sb"> <aside class="sb">
<div class="sb-nav"> <div class="sb-nav">
<div class="si active" id="si0" onclick="go(0)" style="margin-bottom:4px"> <div class="si active home" id="si0" onclick="go(0)" style="margin-bottom:4px">
<div class="si-num" style="background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:11px">⊞</div> <div class="si-num" style="background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:11px">⊞</div>
<div class="si-body"> <div class="si-body">
<div class="si-name">Обзор проекта</div> <div class="si-name">Обзор проекта</div>
@ -521,7 +527,7 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
</div> </div>
<div class="si-con done"></div> <div class="si-con done"></div>
<div class="si active" id="si2" onclick="go(2)"> <div class="si active" id="si2" onclick="go(2)" data-overdue="4 дн">
<div class="si-num" id="sn2">2</div> <div class="si-num" id="sn2">2</div>
<div class="si-body"> <div class="si-body">
<div class="si-lbl">Этап 2</div> <div class="si-lbl">Этап 2</div>
@ -531,7 +537,7 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
</div> </div>
<div class="si-con" id="con3"></div> <div class="si-con" id="con3"></div>
<div class="si locked" id="si3" onclick="go(3)"> <div class="si active" id="si3" onclick="go(3)" data-overdue="2 дн">
<div class="si-num" id="sn3">🔒</div> <div class="si-num" id="sn3">🔒</div>
<div class="si-body"> <div class="si-body">
<div class="si-lbl">Этап 3</div> <div class="si-lbl">Этап 3</div>