mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-10-26 20:52:52 +08:00
401 lines
13 KiB
CSS
401 lines
13 KiB
CSS
/* ── netstat.css (light theme) ── */
|
||
|
||
/* CSS custom properties – override all the scattered !important chains */
|
||
:root {
|
||
--ns-bg: #ffffff;
|
||
--ns-border: #dfe3eb;
|
||
--ns-text: #111111;
|
||
--ns-muted: #4b5563;
|
||
--ns-number: #111111;
|
||
--ns-unit: #2a2a2a;
|
||
--ns-label: #3a3a3a;
|
||
--ns-box-shadow: rgba(0,0,0,0.05);
|
||
--ns-dl-color: #1f7a3a;
|
||
--ns-ul-color: #1c63b8;
|
||
--ns-total-color: #222222;
|
||
--ns-status-up: #1e6b2f;
|
||
--ns-status-down: #b32020;
|
||
--ns-sep: #111111;
|
||
--ns-summary-bg: #f7f9fc;
|
||
--ns-badge-bg: #e0f2fe;
|
||
--ns-badge-text: #0369a1;
|
||
--ns-mem-color: #7c3aed;
|
||
--ns-temp-color: #dc2626;
|
||
--ns-disk-color: #0891b2;
|
||
--ns-bar-bg: #e5e7eb;
|
||
}
|
||
|
||
/* ── Widget wrapper ─────────────────────────────────────────────────────────── */
|
||
.stats-grid.netstat-wrap {
|
||
padding: 10px 0 !important;
|
||
border-radius: 0 !important;
|
||
border: 0 !important;
|
||
overflow: visible !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
font-family: "Trebuchet MS", "Lucida Sans Unicode", sans-serif !important;
|
||
max-width: 1240px !important;
|
||
width: 100% !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
.netstat-row {
|
||
display: flex !important;
|
||
gap: 10px !important;
|
||
align-items: stretch !important;
|
||
justify-content: center !important;
|
||
flex-wrap: nowrap !important; /* single row on desktop */
|
||
max-width: 1280px !important;
|
||
margin: 0 auto !important;
|
||
padding: 0 16px !important;
|
||
}
|
||
|
||
/* ── Stat boxes ──────────────────────────────────────────────────────────────── */
|
||
.netstat-box {
|
||
flex: 1 1 0 !important; /* all boxes share space equally */
|
||
min-width: 0 !important;
|
||
max-width: none !important;
|
||
padding: 12px 10px !important;
|
||
background: var(--ns-bg) !important;
|
||
border: 2px solid var(--ns-border) !important;
|
||
border-radius: 12px !important;
|
||
text-align: center !important;
|
||
box-shadow: 0 2px 6px var(--ns-box-shadow) !important;
|
||
transition: border-color 0.15s, box-shadow 0.15s !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: center !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
.netstat-box:hover {
|
||
border-color: #94a3b8 !important;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
|
||
}
|
||
|
||
.netstat-center {
|
||
flex: 1.2 1 0 !important; /* status card slightly wider */
|
||
min-width: 0 !important;
|
||
border-style: dashed !important;
|
||
border-width: 2px !important;
|
||
}
|
||
|
||
.netstat-info-card {
|
||
flex: 1.2 1 0 !important; /* info cards slightly wider for pill bars */
|
||
min-width: 0 !important;
|
||
}
|
||
|
||
/* ── Typography ─────────────────────────────────────────────────────────────── */
|
||
.netstat-number {
|
||
font-weight: 800 !important;
|
||
font-size: 24px !important;
|
||
color: var(--ns-number) !important;
|
||
line-height: 1 !important;
|
||
}
|
||
|
||
.netstat-unit {
|
||
font-weight: 700 !important;
|
||
font-size: 12px !important;
|
||
color: var(--ns-unit) !important;
|
||
letter-spacing: 0.2px !important;
|
||
margin-top: 4px !important;
|
||
}
|
||
|
||
.netstat-label {
|
||
margin-top: 6px !important;
|
||
font-size: 11px !important;
|
||
font-weight: 700 !important;
|
||
color: var(--ns-label) !important;
|
||
text-transform: uppercase !important;
|
||
letter-spacing: 0.6px !important;
|
||
}
|
||
|
||
/* ── Center (status) card ─────────────────────────────────────────────────── */
|
||
.netstat-center-title {
|
||
font-size: 11px !important;
|
||
font-weight: 800 !important;
|
||
color: var(--ns-muted) !important;
|
||
text-transform: uppercase !important;
|
||
letter-spacing: 0.8px !important;
|
||
}
|
||
|
||
.netstat-center-status {
|
||
font-size: 15px !important;
|
||
font-weight: 800 !important;
|
||
color: var(--ns-status-up) !important;
|
||
margin-top: 4px !important;
|
||
}
|
||
|
||
.netstat-center-sep {
|
||
height: 1px !important;
|
||
background: var(--ns-sep) !important;
|
||
opacity: 0.15 !important;
|
||
margin: 8px 0 !important;
|
||
}
|
||
|
||
.netstat-center-ip {
|
||
font-size: 12px !important;
|
||
font-weight: 700 !important;
|
||
color: var(--ns-text) !important;
|
||
font-family: "Lucida Console", "Courier New", monospace !important;
|
||
word-break: break-all !important;
|
||
margin-top: 4px !important;
|
||
}
|
||
|
||
|
||
/* ── Accent colours ─────────────────────────────────────────────────────────── */
|
||
.netstat-box.is-download .netstat-number { color: var(--ns-dl-color) !important; }
|
||
.netstat-box.is-upload .netstat-number { color: var(--ns-ul-color) !important; }
|
||
.netstat-box.is-total .netstat-number { color: var(--ns-total-color) !important; }
|
||
.netstat-box.is-downloaded .netstat-number { color: var(--ns-dl-color) !important; }
|
||
.netstat-box.is-uploaded .netstat-number { color: var(--ns-ul-color) !important; }
|
||
.netstat-box.is-down .netstat-center-status { color: var(--ns-status-down) !important; }
|
||
|
||
/* ── Downloaded / Uploaded stat box accent borders ─────────────────────────── */
|
||
.netstat-box.is-downloaded {
|
||
border-color: color-mix(in srgb, var(--ns-dl-color) 35%, var(--ns-border)) !important;
|
||
}
|
||
.netstat-box.is-uploaded {
|
||
border-color: color-mix(in srgb, var(--ns-ul-color) 35%, var(--ns-border)) !important;
|
||
}
|
||
|
||
/* Fallback for browsers without color-mix */
|
||
@supports not (color: color-mix(in srgb, red 50%, blue)) {
|
||
.netstat-box.is-downloaded { border-color: #a8d5b5 !important; }
|
||
.netstat-box.is-uploaded { border-color: #a8c8f0 !important; }
|
||
}
|
||
|
||
/* ── Stat box value row ──────────────────────────────────────────────────────── */
|
||
.ns-stat-value-row {
|
||
display: flex !important;
|
||
align-items: baseline !important;
|
||
justify-content: center !important;
|
||
gap: 4px !important;
|
||
}
|
||
|
||
/* ── Rate box layout ────────────────────────────────────────────────────────── */
|
||
.ns-spark {
|
||
width: 90px !important;
|
||
height: 28px !important;
|
||
margin: 0 auto 4px !important;
|
||
display: block !important;
|
||
}
|
||
|
||
.ns-rate-row {
|
||
display: flex !important;
|
||
align-items: baseline !important;
|
||
justify-content: center !important;
|
||
gap: 4px !important;
|
||
}
|
||
|
||
.ns-peak {
|
||
font-size: 10px !important;
|
||
font-weight: 600 !important;
|
||
color: var(--ns-muted) !important;
|
||
margin-top: 2px !important;
|
||
letter-spacing: 0.2px !important;
|
||
}
|
||
|
||
/* ── Trend arrows ───────────────────────────────────────────────────────────── */
|
||
.ns-trend {
|
||
font-size: 13px !important;
|
||
font-weight: 900 !important;
|
||
line-height: 1 !important;
|
||
margin-left: 2px !important;
|
||
}
|
||
|
||
.ns-trend-up { color: #1f7a3a !important; }
|
||
.ns-trend-down { color: #b32020 !important; }
|
||
.ns-trend-flat { color: #9ca3af !important; font-size: 8px !important; }
|
||
|
||
/* ── Info card ───────────────────────────────────────────────────────────────── */
|
||
.netstat-info-card {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: center !important;
|
||
gap: 0 !important;
|
||
padding: 10px !important;
|
||
}
|
||
|
||
.ns-info-row {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
gap: 8px !important;
|
||
padding: 4px 0 !important;
|
||
}
|
||
|
||
.ns-info-icon {
|
||
font-size: 18px !important;
|
||
line-height: 1 !important;
|
||
width: 24px !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
.ns-info-block {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: flex-start !important;
|
||
}
|
||
|
||
.ns-info-value {
|
||
font-size: 15px !important;
|
||
font-weight: 800 !important;
|
||
color: var(--ns-number) !important;
|
||
line-height: 1 !important;
|
||
font-family: "Lucida Console", "Courier New", monospace !important;
|
||
}
|
||
|
||
.ns-info-label {
|
||
font-size: 10px !important;
|
||
font-weight: 700 !important;
|
||
color: var(--ns-muted) !important;
|
||
text-transform: uppercase !important;
|
||
letter-spacing: 0.5px !important;
|
||
margin-top: 2px !important;
|
||
}
|
||
|
||
.ns-info-block-grow {
|
||
flex: 1 !important;
|
||
min-width: 0 !important;
|
||
}
|
||
|
||
.ns-info-top-row {
|
||
display: flex !important;
|
||
align-items: baseline !important;
|
||
justify-content: space-between !important;
|
||
gap: 4px !important;
|
||
}
|
||
|
||
.ns-info-sublabel {
|
||
font-size: 10px !important;
|
||
font-weight: 600 !important;
|
||
color: var(--ns-muted) !important;
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
/* ── Info tag label (RAM / CPU TEMP / STORAGE) ──────────────────────────────── */
|
||
.ns-info-tag {
|
||
font-size: 9px !important;
|
||
font-weight: 800 !important;
|
||
color: var(--ns-muted) !important;
|
||
text-transform: uppercase !important;
|
||
letter-spacing: 0.7px !important;
|
||
margin-top: 3px !important;
|
||
}
|
||
|
||
/* ── Pill bar (RAM / STORAGE) ────────────────────────────────────────────────── */
|
||
.ns-pill-bar {
|
||
position: relative !important;
|
||
height: 18px !important;
|
||
background: var(--ns-bar-bg) !important;
|
||
border-radius: 20px !important;
|
||
margin-top: 4px !important;
|
||
overflow: hidden !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.ns-pill-fill {
|
||
position: absolute !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
height: 100% !important;
|
||
border-radius: 20px !important;
|
||
transition: width 0.5s ease !important;
|
||
opacity: 0.30 !important;
|
||
}
|
||
|
||
.ns-pill-text {
|
||
position: relative !important;
|
||
z-index: 1 !important;
|
||
display: block !important;
|
||
text-align: center !important;
|
||
font-size: 9.5px !important;
|
||
font-weight: 700 !important;
|
||
color: var(--ns-text) !important;
|
||
line-height: 18px !important;
|
||
white-space: nowrap !important;
|
||
overflow: hidden !important;
|
||
text-overflow: ellipsis !important;
|
||
padding: 0 6px !important;
|
||
}
|
||
|
||
#ns-mem-bar { background: var(--ns-mem-color) !important; }
|
||
#ns-disk-bar { background: var(--ns-disk-color) !important; }
|
||
|
||
/* ── Temperature value colour ───────────────────────────────────────────────── */
|
||
.ns-temp-val { color: var(--ns-temp-color) !important; }
|
||
|
||
/* ── Responsive ─────────────────────────────────────────────────────────────── */
|
||
|
||
/* Tablet: wrap into 2 columns */
|
||
@media (max-width: 900px) {
|
||
.netstat-row {
|
||
flex-wrap: wrap !important;
|
||
padding: 0 10px !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.netstat-box,
|
||
.netstat-center,
|
||
.netstat-info-card {
|
||
flex: 1 1 calc(50% - 10px) !important;
|
||
min-width: 0 !important;
|
||
max-width: none !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* Status card full width, placed after rate+total boxes */
|
||
.netstat-center {
|
||
flex: 1 1 100% !important;
|
||
order: 5 !important;
|
||
}
|
||
}
|
||
|
||
/* Mobile: 2 compact columns, explicit order matching screenshot */
|
||
@media (max-width: 600px) {
|
||
.netstat-row {
|
||
flex-wrap: wrap !important;
|
||
padding: 0 8px !important;
|
||
gap: 8px !important;
|
||
}
|
||
|
||
.netstat-box,
|
||
.netstat-center,
|
||
.netstat-info-card {
|
||
flex: 1 1 calc(50% - 8px) !important;
|
||
min-width: 0 !important;
|
||
max-width: none !important;
|
||
padding: 10px 8px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* Mobile order: download | upload → status(full) → info | temp → downloaded | uploaded */
|
||
.netstat-box.is-download { order: 1 !important; }
|
||
.netstat-box.is-upload { order: 2 !important; }
|
||
.netstat-center { order: 3 !important; flex: 1 1 100% !important; }
|
||
.netstat-info-card { order: 4 !important; }
|
||
.netstat-box.is-downloaded { order: 5 !important; }
|
||
.netstat-box.is-uploaded { order: 6 !important; }
|
||
|
||
.netstat-number { font-size: 20px !important; }
|
||
.netstat-unit { font-size: 11px !important; }
|
||
|
||
.ns-spark {
|
||
width: 100% !important;
|
||
max-width: 80px !important;
|
||
}
|
||
|
||
.netstat-info-card {
|
||
padding: 8px !important;
|
||
}
|
||
}
|
||
|
||
/* Very small phones: single column */
|
||
@media (max-width: 360px) {
|
||
.netstat-box,
|
||
.netstat-center,
|
||
.netstat-info-card {
|
||
flex: 1 1 100% !important;
|
||
}
|
||
}
|