1677 lines
43 KiB
CSS
1677 lines
43 KiB
CSS
:root {
|
|
--bg: #04070d;
|
|
--bg-2: #07101a;
|
|
--panel: #0a1420;
|
|
--panel-2: #08111b;
|
|
--line: rgba(126, 174, 224, .13);
|
|
--line-strong: rgba(126, 190, 240, .24);
|
|
--text: #e7f2ff;
|
|
--text-2: #c7d8ea;
|
|
--muted: #7e93a8;
|
|
--muted-2: #566b80;
|
|
--cyan: #52e6cf;
|
|
--cyan-2: #34c9ff;
|
|
--blue: #5aa9ff;
|
|
--violet: #b58cff;
|
|
--amber: #ffb45c;
|
|
--red: #ff6072;
|
|
--green: #62e6a8;
|
|
--mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
|
|
--sans: "Inter", "SF Pro Display", "Segoe UI", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
background: var(--bg);
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
color: var(--text);
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
|
|
button { font: inherit; color: inherit; }
|
|
|
|
.svg-defs {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.viewport {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(900px 620px at 18% -10%, rgba(46, 160, 155, .09), transparent 62%),
|
|
radial-gradient(900px 700px at 100% 110%, rgba(51, 103, 196, .12), transparent 64%),
|
|
#03060b;
|
|
}
|
|
|
|
.stage {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -512px;
|
|
margin-top: -384px;
|
|
width: 1024px;
|
|
height: 768px;
|
|
padding: 20px 22px;
|
|
display: grid;
|
|
grid-template-rows: 86px 30px 512px 42px 18px;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(110, 170, 225, .16);
|
|
border-radius: 6px;
|
|
background:
|
|
radial-gradient(680px 420px at 12% 0%, rgba(31, 138, 136, .13), transparent 62%),
|
|
radial-gradient(800px 500px at 100% 100%, rgba(38, 87, 170, .14), transparent 66%),
|
|
linear-gradient(155deg, #07101a 0%, #050a12 48%, #060c15 100%);
|
|
box-shadow: 0 28px 90px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .015);
|
|
transform-origin: center center;
|
|
}
|
|
|
|
.stage-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
opacity: .5;
|
|
background-image:
|
|
linear-gradient(rgba(112, 165, 220, .035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(112, 165, 220, .035) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
mask-image: radial-gradient(ellipse at 50% 35%, black, transparent 82%);
|
|
}
|
|
|
|
.stage-glow {
|
|
position: absolute;
|
|
width: 420px;
|
|
height: 420px;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(90px);
|
|
opacity: .18;
|
|
}
|
|
.glow-a { top: -190px; left: -100px; background: #1fb8a4; }
|
|
.glow-b { right: -150px; bottom: -230px; background: #2e63c7; opacity: .22; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Header */
|
|
/* ------------------------------------------------------------------ */
|
|
.panel {
|
|
background:
|
|
linear-gradient(180deg, rgba(18, 32, 49, .86), rgba(8, 17, 28, .92));
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 8px 26px rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.topbar {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 180px 150px;
|
|
align-items: center;
|
|
gap: 22px;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
.identity {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 46px;
|
|
height: 46px;
|
|
flex: none;
|
|
border-radius: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: linear-gradient(145deg, rgba(69, 224, 203, .09), rgba(59, 124, 231, .06));
|
|
border: 1px solid rgba(81, 221, 204, .19);
|
|
box-shadow: 0 0 24px rgba(42, 212, 190, .08), inset 0 0 14px rgba(51, 199, 183, .04);
|
|
}
|
|
.brand-mark svg { width: 40px; height: 40px; display: block; }
|
|
|
|
.identity-copy { min-width: 0; }
|
|
|
|
.hostline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
min-width: 0;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 24px;
|
|
line-height: 1.05;
|
|
font-weight: 650;
|
|
letter-spacing: -.015em;
|
|
color: #f1f8ff;
|
|
text-shadow: 0 0 30px rgba(102, 208, 255, .12);
|
|
}
|
|
|
|
.live-pill, .demo-pill {
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 18px;
|
|
padding: 0 7px;
|
|
border-radius: 99px;
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
font-weight: 600;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
border: 1px solid rgba(103, 151, 196, .22);
|
|
color: var(--muted);
|
|
background: rgba(86, 120, 155, .07);
|
|
}
|
|
.live-pill i {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
box-shadow: 0 0 5px currentColor;
|
|
}
|
|
.live-pill[data-state="live"] {
|
|
color: var(--green);
|
|
border-color: rgba(88, 226, 159, .27);
|
|
background: rgba(60, 190, 130, .07);
|
|
}
|
|
.live-pill[data-state="connecting"] {
|
|
color: var(--amber);
|
|
border-color: rgba(255, 178, 90, .25);
|
|
background: rgba(220, 153, 75, .06);
|
|
}
|
|
.live-pill[data-state="offline"] {
|
|
color: var(--red);
|
|
border-color: rgba(255, 96, 114, .3);
|
|
background: rgba(255, 96, 114, .06);
|
|
}
|
|
.live-pill[data-state="live"] i { animation: breathe 2.4s ease-in-out infinite; }
|
|
.demo-pill {
|
|
color: var(--amber);
|
|
border-color: rgba(255, 180, 92, .26);
|
|
background: rgba(255, 180, 92, .07);
|
|
}
|
|
|
|
.host-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 7px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
letter-spacing: .025em;
|
|
color: var(--muted);
|
|
}
|
|
.host-meta > span { overflow: hidden; text-overflow: ellipsis; }
|
|
.host-meta #os-name { max-width: 210px; color: var(--text-2); }
|
|
.host-meta #kernel { max-width: 160px; }
|
|
.host-meta #arch { flex: none; }
|
|
.sep {
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 8px;
|
|
flex: none;
|
|
background: rgba(130, 172, 214, .2);
|
|
}
|
|
.host-ip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
flex: none;
|
|
color: var(--cyan);
|
|
}
|
|
.ip-dot {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
box-shadow: 0 0 5px currentColor;
|
|
}
|
|
.host-ip b { font-weight: 500; }
|
|
|
|
.clock-block { text-align: right; }
|
|
.clock {
|
|
font-family: var(--mono);
|
|
font-size: 42px;
|
|
line-height: .96;
|
|
font-weight: 500;
|
|
letter-spacing: -.045em;
|
|
color: #f4faff;
|
|
font-variant-numeric: tabular-nums;
|
|
text-shadow: 0 0 28px rgba(96, 197, 255, .13);
|
|
}
|
|
.clock-meta {
|
|
margin-top: 7px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
letter-spacing: .06em;
|
|
color: var(--muted);
|
|
}
|
|
#timezone { color: var(--cyan); }
|
|
|
|
.uptime-block {
|
|
border-left: 1px solid rgba(128, 173, 216, .16);
|
|
padding-left: 18px;
|
|
min-width: 0;
|
|
}
|
|
.eyebrow {
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .2em;
|
|
color: var(--muted-2);
|
|
}
|
|
.uptime {
|
|
margin-top: 5px;
|
|
font-family: var(--mono);
|
|
font-size: 16px;
|
|
letter-spacing: -.01em;
|
|
color: #e9f5ff;
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.boot {
|
|
margin-top: 6px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
color: var(--muted-2);
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Nav */
|
|
/* ------------------------------------------------------------------ */
|
|
.nav {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
align-items: center;
|
|
padding: 0 4px;
|
|
}
|
|
.nav-current { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
|
.page-index {
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
letter-spacing: .04em;
|
|
color: var(--cyan);
|
|
padding-right: 10px;
|
|
border-right: 1px solid rgba(119, 169, 215, .2);
|
|
}
|
|
.nav-titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
|
.nav-titles strong {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: .02em;
|
|
color: #e6f1fd;
|
|
white-space: nowrap;
|
|
}
|
|
.nav-titles span {
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .15em;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dots { display: flex; align-items: center; gap: 7px; justify-self: center; }
|
|
.dot {
|
|
position: relative;
|
|
width: 26px;
|
|
height: 18px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--muted-2);
|
|
cursor: pointer;
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .05em;
|
|
transition: color .25s;
|
|
}
|
|
.dot::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 12px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: currentColor;
|
|
opacity: .22;
|
|
transform: translateX(-50%);
|
|
transition: width .25s, background .25s, opacity .25s;
|
|
}
|
|
.dot:hover { color: var(--text-2); }
|
|
.dot.is-active { color: var(--cyan); }
|
|
.dot.is-active::after {
|
|
width: 20px;
|
|
opacity: 1;
|
|
background: var(--cyan);
|
|
box-shadow: 0 0 8px rgba(82, 230, 207, .6);
|
|
}
|
|
|
|
.nav-state {
|
|
justify-self: end;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .06em;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.state-led {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 6px rgba(98, 230, 168, .8);
|
|
}
|
|
.nav.is-paused .state-led { background: var(--amber); box-shadow: 0 0 6px rgba(255, 180, 92, .7); }
|
|
.key-hint {
|
|
margin-left: 3px;
|
|
padding: 2px 5px;
|
|
border: 1px solid rgba(119, 163, 204, .2);
|
|
border-radius: 3px;
|
|
color: var(--muted-2);
|
|
font-size: 7px;
|
|
letter-spacing: .08em;
|
|
}
|
|
.progress {
|
|
position: absolute;
|
|
left: 4px;
|
|
right: 4px;
|
|
bottom: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
background: rgba(110, 155, 200, .1);
|
|
}
|
|
.progress i {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, rgba(82, 230, 207, .9), rgba(90, 169, 255, .75));
|
|
box-shadow: 0 0 8px rgba(82, 230, 207, .55);
|
|
transform: scaleX(0);
|
|
transform-origin: left center;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Pages & cards */
|
|
/* ------------------------------------------------------------------ */
|
|
.pages { position: relative; min-height: 0; }
|
|
|
|
.page {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
gap: 10px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transform: translateX(30px) scale(.996);
|
|
transition: opacity .42s ease, transform .52s cubic-bezier(.22, .68, .24, 1), visibility .52s;
|
|
}
|
|
.page.is-active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
transform: translateX(0) scale(1);
|
|
z-index: 2;
|
|
}
|
|
.page.is-prev {
|
|
opacity: 0;
|
|
visibility: visible;
|
|
transform: translateX(-30px) scale(.996);
|
|
z-index: 1;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background:
|
|
linear-gradient(155deg, rgba(17, 31, 48, .84) 0%, rgba(8, 17, 28, .9) 56%, rgba(7, 15, 25, .92) 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .028),
|
|
0 7px 22px rgba(0, 0, 0, .16);
|
|
}
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 16px;
|
|
right: 16px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(128, 205, 255, .2), transparent);
|
|
opacity: .65;
|
|
pointer-events: none;
|
|
}
|
|
.card-head {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-height: 20px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.card-title { display: flex; align-items: baseline; min-width: 0; }
|
|
.card-title .cn {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: .02em;
|
|
color: #dceafa;
|
|
white-space: nowrap;
|
|
}
|
|
.card-title .en {
|
|
margin-left: 7px;
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .15em;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
.card-badge {
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 17px;
|
|
padding: 0 6px;
|
|
border: 1px solid rgba(111, 161, 207, .16);
|
|
border-radius: 3px;
|
|
background: rgba(72, 116, 158, .055);
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
font-weight: 500;
|
|
letter-spacing: .075em;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.live-badge { color: var(--green); border-color: rgba(98, 230, 168, .2); }
|
|
.live-badge i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Rings */
|
|
/* ------------------------------------------------------------------ */
|
|
.ring {
|
|
--pct: 0;
|
|
position: relative;
|
|
flex: none;
|
|
width: 104px;
|
|
height: 104px;
|
|
color: var(--cyan);
|
|
}
|
|
.ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
|
|
.ring-track {
|
|
fill: none;
|
|
stroke: rgba(112, 158, 203, .13);
|
|
stroke-width: 6.5;
|
|
}
|
|
.ring-value {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 6.5;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: calc(100 - var(--pct));
|
|
transition: stroke-dashoffset .7s cubic-bezier(.3, .8, .3, 1), stroke .3s ease;
|
|
filter: drop-shadow(0 0 4px currentColor);
|
|
}
|
|
.ring[data-tone="warn"] { color: var(--amber); }
|
|
.ring[data-tone="crit"] { color: var(--red); }
|
|
.ring[data-tone="ok"] { color: var(--cyan); }
|
|
.ring-mem[data-tone="ok"] { color: var(--blue); }
|
|
.ring-center {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
pointer-events: none;
|
|
}
|
|
.ring-center b {
|
|
font-family: var(--mono);
|
|
font-size: 26px;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
letter-spacing: -.055em;
|
|
color: #f2faff;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ring-center b span { font-size: 11px; margin-left: 1px; color: var(--muted); letter-spacing: 0; }
|
|
.ring-center small {
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
letter-spacing: .18em;
|
|
color: var(--muted-2);
|
|
}
|
|
.ring-hero { width: 166px; height: 166px; }
|
|
.ring-hero .ring-value, .ring-hero .ring-track { stroke-width: 4.6; }
|
|
.ring-hero .ring-center b { font-size: 38px; }
|
|
.ring-hero .ring-center b span { font-size: 14px; }
|
|
.ring-hero .ring-center small { font-size: 8px; margin-top: 4px; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Sparklines */
|
|
/* ------------------------------------------------------------------ */
|
|
.spark-wrap {
|
|
position: relative;
|
|
margin-top: auto;
|
|
min-height: 0;
|
|
}
|
|
.spark-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 3px;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
letter-spacing: .08em;
|
|
color: var(--muted-2);
|
|
}
|
|
.spark-peak { color: var(--muted); }
|
|
.spark { display: block; width: 100%; height: 54px; overflow: visible; }
|
|
.spark-wrap-load .spark { height: 58px; }
|
|
.spark-wrap-net .spark { height: 68px; }
|
|
.spark-wrap-hero .spark { height: 66px; }
|
|
.spark-wrap-mem .spark { height: 62px; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Overview */
|
|
/* ------------------------------------------------------------------ */
|
|
.page-overview {
|
|
grid-template-columns: 1.28fr 1fr .78fr;
|
|
grid-template-rows: 246px 256px;
|
|
}
|
|
.card-cpu { grid-column: 1; grid-row: 1; }
|
|
.card-mem { grid-column: 2; grid-row: 1; }
|
|
.card-sys { grid-column: 3; grid-row: 1; }
|
|
.card-load { grid-column: 1; grid-row: 2; }
|
|
.card-disk { grid-column: 2; grid-row: 2; }
|
|
.card-net { grid-column: 3; grid-row: 2; }
|
|
|
|
.cpu-main {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
height: 106px;
|
|
}
|
|
.cpu-facts { flex: 1; min-width: 0; }
|
|
.cpu-model {
|
|
margin: 0 0 8px;
|
|
font-size: 9px;
|
|
line-height: 1.35;
|
|
color: var(--text-2);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
min-height: 24px;
|
|
}
|
|
.fact-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
height: 18px;
|
|
border-top: 1px solid rgba(112, 159, 204, .075);
|
|
font-size: 8.5px;
|
|
color: var(--muted);
|
|
}
|
|
.fact-row b {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.card-cpu .spark-wrap { margin-top: auto; }
|
|
|
|
.mem-main {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: 98px;
|
|
}
|
|
.ring-mem { width: 94px; height: 94px; }
|
|
.ring-mem .ring-center b { font-size: 23px; }
|
|
.mem-facts { flex: 1; min-width: 0; }
|
|
.mem-total {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
margin-bottom: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.mem-total b {
|
|
font-family: var(--mono);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
letter-spacing: -.04em;
|
|
color: #f1f9ff;
|
|
}
|
|
.mem-total span { font-family: var(--mono); font-size: 9px; color: var(--muted); }
|
|
.mem-total em { font-style: normal; color: var(--text-2); }
|
|
.kv-line {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 7px;
|
|
height: 18px;
|
|
border-top: 1px solid rgba(112, 159, 204, .075);
|
|
font-size: 8px;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.kv-line > span { overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
|
|
.kv-line b {
|
|
font-family: var(--mono);
|
|
font-size: 9.5px;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.composition {
|
|
flex: none;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 6px;
|
|
margin-top: auto;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
background: rgba(100, 145, 190, .1);
|
|
}
|
|
.composition .seg { display: block; height: 100%; transition: width .6s ease; }
|
|
.seg-apps { background: linear-gradient(90deg, #3f8cff, #5aa9ff); }
|
|
.seg-cache { background: linear-gradient(90deg, #2b6fb5, #3e8ecf); opacity: .8; }
|
|
.seg-buffers { background: #305a7a; opacity: .75; }
|
|
.seg-free { background: rgba(116, 158, 198, .15); }
|
|
.composition-legend {
|
|
flex: none;
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 6px;
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
letter-spacing: .03em;
|
|
}
|
|
.composition-legend span { display: inline-flex; align-items: center; gap: 4px; }
|
|
.legend-dot { width: 4px; height: 4px; border-radius: 1px; display: inline-block; }
|
|
.legend-dot.apps { background: var(--blue); }
|
|
.legend-dot.cache { background: #3e8ecf; }
|
|
.legend-dot.free { background: #456176; }
|
|
.swap-line {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin-top: 7px;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
}
|
|
.swap-label { letter-spacing: .12em; }
|
|
.swap-line .mini-bar { flex: 1; }
|
|
.swap-line b { font-weight: 500; color: var(--text-2); font-size: 8px; }
|
|
|
|
.mini-bar {
|
|
position: relative;
|
|
height: 3px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
background: rgba(106, 151, 196, .12);
|
|
}
|
|
.mini-bar > i {
|
|
display: block;
|
|
width: var(--w, 0%);
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: var(--bar-color, var(--blue));
|
|
box-shadow: 0 0 6px var(--bar-glow, rgba(90, 169, 255, .35));
|
|
transition: width .55s cubic-bezier(.3, .8, .3, 1), background .3s;
|
|
}
|
|
|
|
.sys-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.sys-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-height: 25px;
|
|
border-top: 1px solid rgba(112, 159, 204, .08);
|
|
font-size: 8.5px;
|
|
color: var(--muted);
|
|
}
|
|
.sys-row:first-child { border-top: 0; }
|
|
.sys-row span { flex: none; letter-spacing: .03em; }
|
|
.sys-row b {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
text-align: right;
|
|
}
|
|
|
|
.load-stats {
|
|
flex: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
padding: 2px 0 8px;
|
|
}
|
|
.load-stat > span {
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
letter-spacing: .12em;
|
|
color: var(--muted-2);
|
|
}
|
|
.load-stat b {
|
|
display: block;
|
|
margin: 3px 0 6px;
|
|
font-family: var(--mono);
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
letter-spacing: -.055em;
|
|
color: #edf7ff;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.load-stat .mini-bar { --bar-color: var(--amber); --bar-glow: rgba(255, 180, 92, .4); }
|
|
.load-foot {
|
|
flex: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding-top: 7px;
|
|
border-top: 1px solid rgba(112, 159, 204, .085);
|
|
font-size: 8px;
|
|
color: var(--muted-2);
|
|
}
|
|
.load-foot b { font-family: var(--mono); font-weight: 500; color: var(--text-2); }
|
|
.spark-wrap-load { margin-top: auto; }
|
|
|
|
.disk-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; }
|
|
.disk-row { min-width: 0; }
|
|
.disk-top {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.disk-mount {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
color: var(--text-2);
|
|
}
|
|
.disk-mount span { font-family: var(--sans); font-size: 8px; color: var(--muted-2); margin-left: 5px; }
|
|
.disk-pct {
|
|
flex: none;
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
color: var(--text);
|
|
}
|
|
.disk-bar { height: 4px; border-radius: 3px; background: rgba(106, 151, 196, .12); overflow: hidden; }
|
|
.disk-bar i {
|
|
display: block;
|
|
height: 100%;
|
|
width: var(--w, 0%);
|
|
border-radius: inherit;
|
|
background: var(--bar-color, var(--violet));
|
|
box-shadow: 0 0 7px var(--bar-glow, rgba(181, 140, 255, .32));
|
|
transition: width .55s ease;
|
|
}
|
|
.disk-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 3px;
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
color: var(--muted-2);
|
|
}
|
|
|
|
.net-rates {
|
|
flex: none;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
padding-bottom: 3px;
|
|
}
|
|
.net-rate { min-width: 0; }
|
|
.net-rate > span {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 7.5px;
|
|
letter-spacing: .06em;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
.net-rate b {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
letter-spacing: -.045em;
|
|
color: #eef8ff;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.net-rate.rx b { color: #78f0d9; }
|
|
.net-rate.tx b { color: #83baff; }
|
|
.net-foot {
|
|
flex: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-top: 5px;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
}
|
|
.net-foot b { color: var(--text-2); font-weight: 500; }
|
|
.spark-wrap-net { margin-top: auto; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* CPU page */
|
|
/* ------------------------------------------------------------------ */
|
|
.page-cpu {
|
|
grid-template-columns: 300px minmax(0, 1fr);
|
|
grid-template-rows: 246px 256px;
|
|
}
|
|
.cpu-hero { grid-column: 1; grid-row: 1 / 3; }
|
|
.core-card { grid-column: 2; grid-row: 1; }
|
|
.proc-card { grid-column: 2; grid-row: 2; }
|
|
|
|
.hero-ring { display: flex; justify-content: center; padding: 3px 0 7px; }
|
|
.hero-model {
|
|
margin: 0;
|
|
min-height: 25px;
|
|
text-align: center;
|
|
font-size: 8.5px;
|
|
line-height: 1.4;
|
|
color: var(--text-2);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.hero-facts {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px 12px;
|
|
margin-top: 10px;
|
|
padding: 9px 0;
|
|
border-top: 1px solid rgba(112, 159, 204, .09);
|
|
border-bottom: 1px solid rgba(112, 159, 204, .09);
|
|
}
|
|
.hero-facts span {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
}
|
|
.hero-facts b {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
}
|
|
.breakdown { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
|
|
.breakdown-row {
|
|
display: grid;
|
|
grid-template-columns: 45px 1fr 32px;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
color: var(--muted-2);
|
|
}
|
|
.breakdown-row > b { text-align: right; font-size: 8px; font-weight: 500; color: var(--text-2); }
|
|
.breakdown-row .mini-bar { --bar-color: var(--cyan); --bar-glow: rgba(82, 230, 207, .3); }
|
|
.breakdown-row:nth-child(2) .mini-bar { --bar-color: var(--blue); --bar-glow: rgba(90, 169, 255, .3); }
|
|
.breakdown-row:nth-child(3) .mini-bar { --bar-color: var(--amber); --bar-glow: rgba(255, 180, 92, .3); }
|
|
.breakdown-row:nth-child(4) .mini-bar { --bar-color: var(--violet); --bar-glow: rgba(181, 140, 255, .3); }
|
|
.spark-wrap-hero { margin-top: auto; }
|
|
|
|
.core-grid {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
|
grid-auto-rows: minmax(0, 1fr);
|
|
gap: 7px;
|
|
}
|
|
.core {
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 6px 7px 7px;
|
|
border: 1px solid rgba(111, 159, 204, .1);
|
|
border-radius: 6px;
|
|
background: linear-gradient(180deg, rgba(23, 42, 61, .45), rgba(9, 19, 30, .48));
|
|
}
|
|
.core-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 3px;
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
color: var(--muted-2);
|
|
}
|
|
.core-head b { font-size: 8px; font-weight: 500; color: var(--text-2); }
|
|
.core-track {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 24px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border-radius: 3px;
|
|
background:
|
|
linear-gradient(180deg, rgba(104, 149, 194, .04), rgba(104, 149, 194, .1));
|
|
}
|
|
.core-track i {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: var(--v, 0%);
|
|
min-height: 2px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(180deg, var(--cyan), rgba(49, 174, 187, .5));
|
|
box-shadow: 0 0 9px rgba(82, 230, 207, .25);
|
|
transition: height .55s cubic-bezier(.3, .8, .3, 1), background .3s;
|
|
}
|
|
.core[data-tone="warn"] .core-track i { background: linear-gradient(180deg, var(--amber), rgba(179, 118, 46, .55)); box-shadow: 0 0 9px rgba(255, 180, 92, .2); }
|
|
.core[data-tone="crit"] .core-track i { background: linear-gradient(180deg, var(--red), rgba(179, 70, 80, .55)); box-shadow: 0 0 9px rgba(255, 96, 114, .24); }
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
font-size: 9.5px;
|
|
}
|
|
.data-table th {
|
|
padding: 0 6px 6px;
|
|
border-bottom: 1px solid rgba(117, 162, 205, .14);
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
font-weight: 500;
|
|
letter-spacing: .09em;
|
|
text-align: left;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
.data-table td {
|
|
height: 24px;
|
|
padding: 2px 6px;
|
|
border-bottom: 1px solid rgba(112, 159, 204, .065);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--text-2);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.data-table tr:last-child td { border-bottom: 0; }
|
|
.data-table .num { text-align: right; font-family: var(--mono); }
|
|
.data-table th.num { text-align: right; }
|
|
.col-pid { width: 48px; }
|
|
.proc-table { flex: 1; min-height: 0; }
|
|
.proc-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
|
|
.proc-name b {
|
|
flex: none;
|
|
max-width: 130px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: var(--mono);
|
|
font-size: 9.5px;
|
|
font-weight: 500;
|
|
color: #e4f1ff;
|
|
}
|
|
.proc-name span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
}
|
|
.proc-pid { color: var(--muted-2); font-size: 8px; }
|
|
.proc-cpu { color: var(--cyan); }
|
|
.proc-cpu.hot { color: var(--amber); }
|
|
.proc-cpu.critical { color: var(--red); }
|
|
.proc-mem { color: var(--blue); }
|
|
.proc-rss { color: var(--muted); }
|
|
.empty-row { color: var(--muted-2) !important; text-align: center !important; font-family: var(--mono); font-size: 8px !important; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Memory page */
|
|
/* ------------------------------------------------------------------ */
|
|
.page-memory {
|
|
grid-template-columns: 380px minmax(0, 1fr);
|
|
grid-template-rows: 246px 256px;
|
|
}
|
|
.mem-hero { grid-column: 1; grid-row: 1 / 3; }
|
|
.mem-trend { grid-column: 2; grid-row: 1; }
|
|
.mem-proc-card { grid-column: 2; grid-row: 2; }
|
|
|
|
.mem-total-line {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
margin-top: 1px;
|
|
white-space: nowrap;
|
|
}
|
|
.mem-total-line b {
|
|
font-family: var(--mono);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
letter-spacing: -.045em;
|
|
color: #f0f9ff;
|
|
}
|
|
.mem-total-line span { font-size: 9px; color: var(--muted); }
|
|
.mem-total-line em { font-family: var(--mono); font-style: normal; color: var(--text-2); }
|
|
.composition-large { height: 8px; margin-top: 14px; }
|
|
.mem-stats {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px 14px;
|
|
margin-top: 10px;
|
|
padding: 9px 0;
|
|
border-top: 1px solid rgba(112, 159, 204, .09);
|
|
border-bottom: 1px solid rgba(112, 159, 204, .09);
|
|
}
|
|
.mem-stats span {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
font-size: 7.5px;
|
|
letter-spacing: .015em;
|
|
color: var(--muted-2);
|
|
}
|
|
.mem-stats b {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
}
|
|
.mem-hero .ring-hero { width: 158px; height: 158px; }
|
|
.mem-breakdown {
|
|
flex: none;
|
|
margin-top: 8px;
|
|
padding-top: 7px;
|
|
border-top: 1px solid rgba(112, 159, 204, .09);
|
|
}
|
|
.mem-bd-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
font-family: var(--mono);
|
|
font-size: 6.8px;
|
|
letter-spacing: .07em;
|
|
color: var(--muted-2);
|
|
}
|
|
.mem-bd-head span:last-child { letter-spacing: .11em; color: rgba(126, 147, 168, .65); }
|
|
.mem-bd-row {
|
|
display: grid;
|
|
grid-template-columns: 62px minmax(0, 1fr) 36px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 17px;
|
|
font-size: 7.5px;
|
|
color: var(--muted);
|
|
}
|
|
.mem-bd-row .mini-bar { height: 3px; }
|
|
.mem-bd-row b {
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
color: var(--text-2);
|
|
}
|
|
.mem-key {
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 4px;
|
|
margin-right: 4px;
|
|
border-radius: 1px;
|
|
vertical-align: 1px;
|
|
background: var(--blue);
|
|
}
|
|
.mem-key.cache { background: #3e8ecf; }
|
|
.mem-key.buffers { background: #305a7a; }
|
|
.mem-key.free { background: #456176; }
|
|
.spark-wrap-mem { margin-top: auto; }
|
|
|
|
.trend-chart { flex: 1; min-height: 0; display: flex; align-items: stretch; }
|
|
.trend-chart .spark { height: 100%; min-height: 100px; }
|
|
.trend-stats {
|
|
flex: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
margin-top: 7px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid rgba(112, 159, 204, .08);
|
|
}
|
|
.trend-stats span { display: block; margin-bottom: 2px; font-size: 7px; color: var(--muted-2); letter-spacing: .05em; }
|
|
.trend-stats b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--text-2); }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Storage page */
|
|
/* ------------------------------------------------------------------ */
|
|
.page-storage {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 256px 246px;
|
|
}
|
|
.fs-card { grid-row: 1; }
|
|
.io-card { grid-row: 2; }
|
|
.fs-table, .io-table { flex: none; }
|
|
.iface-table { flex: 1; min-height: 0; }
|
|
.fs-table th, .fs-table td { padding-left: 7px; padding-right: 7px; }
|
|
.fs-table th:nth-child(1) { width: 20%; }
|
|
.fs-table th:nth-child(2) { width: 21%; }
|
|
.fs-table th:nth-child(3) { width: 8%; }
|
|
.fs-table th:nth-child(4) { width: 10%; }
|
|
.fs-table th:nth-child(5) { width: 10%; }
|
|
.fs-table th:nth-child(6) { width: 10%; }
|
|
.fs-table th:nth-child(7) { width: 15%; }
|
|
.fs-table th:nth-child(8) { width: 6%; }
|
|
.fs-table td { height: 28px; }
|
|
.fs-mount { color: #e5f1ff; font-family: var(--mono); font-size: 10px; }
|
|
.fs-device { color: var(--muted); font-family: var(--mono); font-size: 8px; }
|
|
.fs-type { color: var(--muted-2); font-family: var(--mono); font-size: 8px; }
|
|
.fs-num { color: var(--text-2); font-family: var(--mono); font-size: 8.5px; }
|
|
.fs-usage { display: flex; align-items: center; gap: 7px; }
|
|
.fs-usage .mini-bar { flex: 1; height: 4px; }
|
|
.fs-pct { font-family: var(--mono); font-size: 9px; }
|
|
.fs-ro { margin-left: 4px; color: var(--amber); font-size: 7px; }
|
|
|
|
.io-table th:nth-child(1) { width: 22%; }
|
|
.io-table th:nth-child(2) { width: 16%; }
|
|
.io-table th:nth-child(3) { width: 16%; }
|
|
.io-table th:nth-child(4) { width: 14%; }
|
|
.io-table th:nth-child(5) { width: 14%; }
|
|
.io-table th:nth-child(6) { width: 14%; }
|
|
.io-table th:nth-child(7) { width: 5%; }
|
|
.io-table td { height: 28px; }
|
|
.io-grid {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 300px;
|
|
gap: 18px;
|
|
}
|
|
.io-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
|
|
.io-footer {
|
|
margin-top: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
padding-top: 7px;
|
|
border-top: 1px solid rgba(112, 159, 204, .08);
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
.io-footer b { font-family: var(--mono); font-weight: 500; color: var(--text-2); margin-left: 3px; }
|
|
.io-side {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 16px;
|
|
border-left: 1px solid rgba(112, 159, 204, .09);
|
|
}
|
|
.io-side-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
margin-bottom: 5px;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
letter-spacing: .07em;
|
|
color: var(--muted-2);
|
|
}
|
|
.io-side-head b {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: -.02em;
|
|
color: #e9f5ff;
|
|
}
|
|
.io-side .spark { flex: 1; width: 100%; height: auto; min-height: 56px; }
|
|
.io-legend {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
letter-spacing: .07em;
|
|
color: var(--muted-2);
|
|
}
|
|
.io-legend span::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 2px;
|
|
margin-right: 3px;
|
|
vertical-align: middle;
|
|
background: currentColor;
|
|
}
|
|
.io-legend .read { color: var(--cyan); }
|
|
.io-legend .write { color: var(--violet); }
|
|
|
|
.fs-summary {
|
|
flex: none;
|
|
margin-top: auto;
|
|
display: grid;
|
|
grid-template-columns: 88px 88px 88px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid rgba(112, 159, 204, .085);
|
|
}
|
|
.fs-sum-item span {
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
font-size: 7px;
|
|
letter-spacing: .04em;
|
|
color: var(--muted-2);
|
|
}
|
|
.fs-sum-item b {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
white-space: nowrap;
|
|
}
|
|
.fs-sum-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.fs-sum-bar .mini-bar { flex: 1; height: 4px; --bar-color: var(--violet); --bar-glow: rgba(181, 140, 255, .35); }
|
|
.fs-sum-bar b {
|
|
flex: none;
|
|
min-width: 42px;
|
|
text-align: right;
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
}
|
|
.fs-sum-more {
|
|
justify-self: end;
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
.io-device { color: #e5f1ff; font-family: var(--mono); font-size: 10px; }
|
|
.io-rate { font-family: var(--mono); font-size: 9px; }
|
|
.io-rate.read { color: #78f0d9; }
|
|
.io-rate.write { color: #83baff; }
|
|
.io-busy { display: flex; align-items: center; gap: 7px; }
|
|
.io-busy .mini-bar { flex: 1; height: 4px; }
|
|
.bar-col { width: 15%; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Network page */
|
|
/* ------------------------------------------------------------------ */
|
|
.page-network {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 246px 256px;
|
|
}
|
|
.net-hero-card { grid-row: 1; }
|
|
.iface-card { grid-row: 2; }
|
|
.net-hero-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: 195px minmax(0, 1fr) 195px;
|
|
align-items: center;
|
|
gap: 22px;
|
|
padding: 0 4px;
|
|
}
|
|
.net-big { min-width: 0; }
|
|
.net-big.tx { text-align: right; }
|
|
.net-direction {
|
|
display: block;
|
|
margin-bottom: 7px;
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .12em;
|
|
color: var(--muted-2);
|
|
}
|
|
.net-big b {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--mono);
|
|
font-size: 33px;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
letter-spacing: -.06em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.net-big.rx b { color: #78f0d9; text-shadow: 0 0 24px rgba(82, 230, 207, .13); }
|
|
.net-big.tx b { color: #8ec1ff; text-shadow: 0 0 24px rgba(90, 169, 255, .13); }
|
|
.net-big small {
|
|
display: block;
|
|
margin-top: 8px;
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
color: var(--muted-2);
|
|
}
|
|
.net-big-chart { position: relative; height: 135px; min-width: 0; }
|
|
.net-big-chart .spark { height: 118px; }
|
|
.chart-legend {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-family: var(--mono);
|
|
font-size: 7px;
|
|
letter-spacing: .07em;
|
|
color: var(--muted-2);
|
|
}
|
|
.chart-legend .rx { color: var(--cyan); }
|
|
.chart-legend .tx { color: var(--blue); }
|
|
.chart-legend .window { margin-left: auto; }
|
|
.chart-legend span::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 2px;
|
|
margin-right: 3px;
|
|
vertical-align: middle;
|
|
background: currentColor;
|
|
}
|
|
.chart-legend .window::before { display: none; }
|
|
.net-summary {
|
|
flex: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid rgba(112, 159, 204, .08);
|
|
font-size: 8px;
|
|
color: var(--muted-2);
|
|
}
|
|
.net-summary b { font-family: var(--mono); font-weight: 500; color: var(--text-2); margin-left: 3px; }
|
|
.net-sum-live {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
letter-spacing: .1em;
|
|
color: var(--green);
|
|
}
|
|
.net-sum-live i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
|
|
|
|
.iface-table th:nth-child(1) { width: 18%; }
|
|
.iface-table th:nth-child(2) { width: 14%; }
|
|
.iface-table th:nth-child(3) { width: 13%; }
|
|
.iface-table th:nth-child(4) { width: 13%; }
|
|
.iface-table th:nth-child(5) { width: 20%; }
|
|
.iface-table th:nth-child(6) { width: 12%; }
|
|
.iface-table th:nth-child(7) { width: 10%; }
|
|
.iface-table td { height: 28px; }
|
|
.iface-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
|
|
.iface-name i {
|
|
width: 4px;
|
|
height: 4px;
|
|
flex: none;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 5px rgba(98, 230, 168, .7);
|
|
}
|
|
.iface-name i.virtual { background: var(--violet); box-shadow: 0 0 5px rgba(181, 140, 255, .5); }
|
|
.iface-name b { font-family: var(--mono); font-size: 10px; font-weight: 500; color: #e5f1ff; overflow: hidden; text-overflow: ellipsis; }
|
|
.iface-name span {
|
|
flex: none;
|
|
padding: 1px 4px;
|
|
border: 1px solid rgba(98, 230, 168, .18);
|
|
border-radius: 3px;
|
|
font-family: var(--mono);
|
|
font-size: 6px;
|
|
letter-spacing: .06em;
|
|
color: var(--green);
|
|
}
|
|
.iface-ip { color: var(--muted); font-family: var(--mono); font-size: 8.5px; }
|
|
.iface-rate { font-family: var(--mono); font-size: 9px; }
|
|
.iface-rate.rx { color: #78f0d9; }
|
|
.iface-rate.tx { color: #83baff; }
|
|
.iface-total { color: var(--muted); font-family: var(--mono); font-size: 8px; }
|
|
.iface-errors { color: var(--muted); font-family: var(--mono); font-size: 8px; }
|
|
.iface-errors.bad { color: var(--red); }
|
|
.iface-link { color: var(--muted); font-family: var(--mono); font-size: 8px; }
|
|
.iface-link b { color: var(--text-2); font-weight: 500; }
|
|
|
|
/* ------------------------------------------------------------------ */
|
|
/* Ticker & footer */
|
|
/* ------------------------------------------------------------------ */
|
|
.ticker {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
padding: 0 14px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 180, 92, .13);
|
|
border-radius: 10px;
|
|
background:
|
|
linear-gradient(90deg, rgba(34, 28, 21, .4), rgba(11, 19, 28, .9) 18%, rgba(9, 17, 27, .92) 82%, rgba(24, 27, 31, .5));
|
|
box-shadow: inset 0 1px 0 rgba(255, 205, 145, .035);
|
|
}
|
|
.ticker-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding-right: 13px;
|
|
border-right: 1px solid rgba(255, 180, 92, .16);
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .16em;
|
|
color: var(--amber);
|
|
}
|
|
.ticker-label svg { width: 13px; height: 13px; opacity: .9; }
|
|
.ticker-window {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 24px), transparent);
|
|
}
|
|
.ticker-track {
|
|
display: inline-flex;
|
|
width: max-content;
|
|
white-space: nowrap;
|
|
will-change: transform;
|
|
animation: ticker-marquee 72s linear infinite;
|
|
}
|
|
.ticker-copy {
|
|
display: inline-block;
|
|
padding-right: 80px;
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
letter-spacing: .02em;
|
|
color: #b9cce0;
|
|
}
|
|
.ticker-side {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
.ticker-side .sep { height: 7px; }
|
|
@keyframes ticker-marquee {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
@keyframes breathe {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .35; }
|
|
}
|
|
|
|
.footline {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
padding: 0 4px;
|
|
font-family: var(--mono);
|
|
font-size: 7.5px;
|
|
letter-spacing: .04em;
|
|
color: var(--muted-2);
|
|
white-space: nowrap;
|
|
}
|
|
.foot-left, .foot-hint, .foot-right { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
.foot-left b { color: var(--muted); font-weight: 500; }
|
|
.foot-led {
|
|
width: 4px;
|
|
height: 4px;
|
|
flex: none;
|
|
border-radius: 50%;
|
|
background: var(--green);
|
|
box-shadow: 0 0 5px rgba(98, 230, 168, .7);
|
|
}
|
|
.foot-led.offline { background: var(--red); box-shadow: 0 0 5px rgba(255, 96, 114, .7); }
|
|
.foot-led.paused { background: var(--amber); box-shadow: 0 0 5px rgba(255, 180, 92, .7); }
|
|
.foot-hint { justify-content: center; opacity: .75; }
|
|
.foot-right { justify-content: flex-end; }
|
|
.footline .sep { height: 7px; }
|
|
|
|
.hide-cursor { cursor: none; }
|
|
|
|
/* A hair of texture without hurting readability. */
|
|
.stage::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
border-radius: 6px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 12%),
|
|
repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0, rgba(255, 255, 255, .012) 1px, transparent 1px, transparent 3px);
|
|
opacity: .4;
|
|
mix-blend-mode: soft-light;
|
|
}
|
|
|
|
|
|
/* Dynamic state helpers */
|
|
.tone-warn { color: var(--amber) !important; }
|
|
.tone-crit { color: var(--red) !important; }
|
|
.empty-note {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 80px;
|
|
color: var(--muted-2);
|
|
font-family: var(--mono);
|
|
font-size: 8px;
|
|
letter-spacing: .06em;
|
|
}
|
|
.iface-name span.virtual-badge {
|
|
border-color: rgba(181, 140, 255, .2);
|
|
color: var(--violet);
|
|
}
|
|
.iface-name span.primary-badge {
|
|
border-color: rgba(98, 230, 168, .22);
|
|
color: var(--green);
|
|
}
|
|
@keyframes page-progress-fill {
|
|
from { transform: scaleX(0); }
|
|
to { transform: scaleX(1); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.page, .ring-value, .mini-bar > i, .core-track i, .disk-bar i, .composition .seg {
|
|
transition: none !important;
|
|
}
|
|
.ticker-track { animation: none; }
|
|
.live-pill[data-state="live"] i { animation: none; }
|
|
} |