v0.4.1
This commit is contained in:
Mateusz Gruszczyński committed
1 parent
439cc20dcf
commit
722a49f6bc
14 files changed
+564
-283
No files matched your search
+23
-26
@@ -61,28 +61,18 @@ html[data-theme=light] .theme-toggle .ic-moon{display:block}
|
||||
|
||||
/* === dashboard shell (stats page) ======================================= */
|
||||
.shell{min-height:100vh;display:grid;grid-template-rows:56px minmax(0,1fr)}
|
||||
.topbar{position:relative;display:grid;grid-template-columns:240px 1fr auto;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
|
||||
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
|
||||
.brand svg{color:var(--accent);width:24px;height:24px}
|
||||
.header-online{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
|
||||
.topbar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
|
||||
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;min-width:0}
|
||||
.brand svg{color:var(--accent);width:24px;height:24px;flex:0 0 auto}
|
||||
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.header-online{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;justify-content:center}
|
||||
.header-online strong{color:var(--text);font-size:16px}
|
||||
.top-actions{display:flex;align-items:center;gap:8px}
|
||||
.top-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
|
||||
.route-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;background:transparent}
|
||||
.route-progress>span{display:block;width:35%;height:100%;background:var(--accent);animation:route-progress 1.1s ease-in-out infinite}
|
||||
.route-progress[hidden]{display:none}
|
||||
@keyframes route-progress{0%{transform:translateX(-110%)}50%{transform:translateX(120%)}100%{transform:translateX(310%)}}
|
||||
|
||||
.body{min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr)}
|
||||
.sidebar{min-height:0;padding:14px 10px;border-right:1px solid var(--line);background:var(--sidebar);overflow:auto}
|
||||
.nav{display:grid;gap:3px}
|
||||
.nav a{display:flex;align-items:center;gap:10px;height:38px;padding:0 11px;border:1px solid transparent;border-radius:var(--r);color:var(--muted)}
|
||||
.nav a:hover{background:var(--hover);color:var(--text)}
|
||||
.nav a.active{background:var(--selected);color:var(--text);border-color:var(--line)}
|
||||
.nav a svg{width:17px;height:17px}
|
||||
.nav-section{margin:16px 11px 6px;color:var(--subtle);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
|
||||
.nav-server{display:flex;align-items:center;gap:9px;height:30px;padding:0 11px;color:var(--muted);font-size:12px}
|
||||
.nav-server svg{width:15px;height:15px;flex:0 0 auto}
|
||||
.nav-server span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.icon-sprite{display:none}
|
||||
|
||||
.content{min-width:0;min-height:0;overflow:auto;padding:26px 28px 48px}
|
||||
@@ -102,18 +92,20 @@ html[data-theme=light] .theme-toggle .ic-moon{display:block}
|
||||
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
|
||||
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding:0 13px;border-bottom:1px solid var(--line)}
|
||||
.panel-head h2{margin:0;font-size:14px;font-weight:650}
|
||||
.panel-head p{margin:0;font-size:11px;color:var(--muted)}
|
||||
|
||||
.graphs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
|
||||
.graph-image-button{display:block;width:100%;padding:0;border:0;background:var(--field);cursor:zoom-in;overflow:hidden}
|
||||
.graph-image-button img{display:block;width:100%;height:auto;aspect-ratio:1200/320;object-fit:contain;transition:transform .18s ease,opacity .18s ease}
|
||||
.graph-image-button:hover img{transform:scale(1.012);opacity:.96}
|
||||
.graph-chart{display:block;width:100%;padding:0;border:0;background:var(--field);cursor:zoom-in}
|
||||
.graph-chart canvas{display:block;width:100%;height:auto;aspect-ratio:3/1}
|
||||
.graph-empty{margin:0;padding:58px 10px;text-align:center;font-size:12px}
|
||||
.graph-stats{margin:0;padding:9px 13px 12px;font-size:11px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
|
||||
.lightbox[hidden]{display:none}
|
||||
.lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:28px}
|
||||
.lightbox-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.78);cursor:zoom-out}
|
||||
.lightbox-dialog{position:relative;z-index:1;width:min(96vw,1500px);max-height:92vh;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:48px 16px 16px;box-shadow:0 24px 80px var(--shadow);overflow:auto}
|
||||
.lightbox-dialog img{display:block;width:100%;height:auto}
|
||||
.lightbox-dialog{position:relative;z-index:1;width:min(96vw,1200px);max-height:92vh;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:48px 18px 16px;box-shadow:0 24px 80px var(--shadow);overflow:auto}
|
||||
.lightbox-title{margin:0 0 10px;padding-right:90px;font-size:15px;font-weight:650}
|
||||
.lightbox-canvas{display:block;width:100%;height:min(62vh,560px)}
|
||||
.lightbox-dialog .graph-stats{padding:10px 2px 0}
|
||||
.lightbox-close{position:absolute;top:10px;right:12px;display:inline-flex;gap:6px;align-items:center}
|
||||
.lightbox-open{overflow:hidden}
|
||||
|
||||
@@ -158,12 +150,17 @@ html[data-theme=light] .theme-toggle .ic-moon{display:block}
|
||||
@media(max-width:1060px){
|
||||
.cards{grid-template-columns:repeat(2,minmax(140px,1fr))}
|
||||
.graphs{grid-template-columns:1fr}
|
||||
.graph-image-button img{aspect-ratio:auto;min-height:260px}
|
||||
.graph-chart canvas{aspect-ratio:auto;height:200px}
|
||||
}
|
||||
@media(max-width:860px){
|
||||
.topbar{grid-template-columns:auto 1fr auto}
|
||||
.body{grid-template-columns:1fr}
|
||||
.sidebar{display:none}
|
||||
.topbar{grid-template-columns:minmax(64px,auto) 1fr auto}
|
||||
#refresh-status{display:none}
|
||||
}
|
||||
@media(max-width:520px){
|
||||
.brand span{max-width:40vw}
|
||||
.header-online .badge{display:none}
|
||||
.btn-label{display:none}
|
||||
.top-actions .btn{padding:7px 10px}
|
||||
}
|
||||
@media(max-width:620px){
|
||||
.cards{grid-template-columns:1fr}
|
||||
|
||||
Reference in new issue
Block a user