mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-10-29 16:15:13 +08:00
⛄ Sync 2026-10-05 06:17:58
This commit is contained in:
github-actions[bot] committed
1 parent
c0e26fb987
commit
4f24db0fde
7 files changed
+1299
-3
No files matched your search
@@ -0,0 +1,400 @@
|
||||
/* ── 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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* ── netstat_dark.css (dark theme) ── */
|
||||
/* Imports light theme then overrides only the colour tokens.
|
||||
This eliminates ~120 lines of duplicated rules. */
|
||||
@import url("netstat.css");
|
||||
|
||||
:root {
|
||||
--ns-bg: #0f1113;
|
||||
--ns-border: #374151;
|
||||
--ns-text: #f4f4f4;
|
||||
--ns-muted: #9ca3af;
|
||||
--ns-number: #f4f4f4;
|
||||
--ns-unit: #d6d6d6;
|
||||
--ns-label: #c8c8c8;
|
||||
--ns-box-shadow: rgba(0,0,0,0.35);
|
||||
--ns-dl-color: #7fdc98;
|
||||
--ns-ul-color: #7db8ff;
|
||||
--ns-total-color: #f0f0f0;
|
||||
--ns-status-up: #7fdc98;
|
||||
--ns-status-down: #ff7d7d;
|
||||
--ns-sep: #e6e6e6;
|
||||
--ns-summary-bg: #1a1d20;
|
||||
--ns-badge-bg: #1e3a5f;
|
||||
--ns-badge-text: #93c5fd;
|
||||
--ns-mem-color: #a78bfa;
|
||||
--ns-temp-color: #f87171;
|
||||
--ns-disk-color: #22d3ee;
|
||||
--ns-bar-bg: #374151;
|
||||
}
|
||||
|
||||
/* Dark-specific trend arrow colours */
|
||||
.ns-trend-up { color: #7fdc98 !important; }
|
||||
.ns-trend-down { color: #ff7d7d !important; }
|
||||
|
||||
/* Dark-specific hover (slightly lighter border) */
|
||||
.netstat-box:hover {
|
||||
border-color: #6b7280 !important;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
|
||||
}
|
||||
Reference in new issue
Block a user