diff --git a/src/index.html b/src/index.html
index 2e2d141..cf3a302 100644
--- a/src/index.html
+++ b/src/index.html
@@ -211,6 +211,11 @@
+
+
+
+
+
unprivileged
diff --git a/src/styles.css b/src/styles.css
index cca5fb1..1fdcad8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1456,7 +1456,7 @@ body {
--border: #0d4450;
--border-bright: #1a5c6a;
- --text-primary: #93a1a1;
+ --text-primary: #cb4b16;
--text-secondary: #839496;
--text-muted: #586e75;
@@ -1489,11 +1489,11 @@ body {
--border: #313244;
--border-bright: #45475a;
- --text-primary: #cdd6f4;
+ --text-primary: #94e2d5;
--text-secondary: #a6adc8;
--text-muted: #6c7086;
- --cyan: #89b4fa;
+ --cyan: #b4befe;
--cyan-hover: #7ba4eb;
--cyan-dim: rgba(137, 180, 250, 0.08);
--cyan-glow: rgba(137, 180, 250, 0.2);
@@ -1515,24 +1515,209 @@ body {
filter: hue-rotate(40deg) saturate(0.6) brightness(0.9);
}
-:root[data-theme="latte"] .port-tag {
+:root[data-theme="mocha"] .port-tag {
background: rgba(30, 102, 245, 0.1);
border-color: rgba(30, 102, 245, 0.2);
}
-:root[data-theme="latte"] #privilege-status::before {
+:root[data-theme="mocha"] #privilege-status::before {
background: var(--status-up);
box-shadow: 0 0 4px rgba(64, 160, 43, 0.3);
}
-:root[data-theme="latte"] ::-webkit-scrollbar-track {
+:root[data-theme="mocha"] ::-webkit-scrollbar-track {
background: var(--bg-primary);
}
-:root[data-theme="latte"] ::-webkit-scrollbar-thumb {
+:root[data-theme="mocha"] ::-webkit-scrollbar-thumb {
background: var(--border-bright);
}
+/* ===== Theme: One Dark ===== */
+
+:root[data-theme="onedark"] {
+ --bg-primary: #282c34;
+ --bg-secondary: #21252b;
+ --bg-tertiary: #2c313a;
+ --bg-hover: #3e4451;
+ --bg-active: #4b5263;
+ --border: #3e4451;
+ --border-bright: #4b5263;
+
+ --text-primary: #abb2bf;
+ --text-secondary: #848b98;
+ --text-muted: #5c6370;
+
+ --cyan: #61afef;
+ --cyan-hover: #519fdf;
+ --cyan-dim: rgba(97, 175, 239, 0.08);
+ --cyan-glow: rgba(97, 175, 239, 0.2);
+ --cyan-subtle: rgba(97, 175, 239, 0.03);
+
+ --status-up: #98c379;
+ --status-up-glow: rgba(152, 195, 121, 0.15);
+ --status-down: #e06c75;
+ --status-down-glow: rgba(224, 108, 117, 0.15);
+ --status-filtered: #e5c07b;
+ --status-filtered-glow: rgba(229, 192, 123, 0.15);
+ --status-unknown: #5c6370;
+
+ --danger: #e06c75;
+ --danger-hover: #d05f68;
+}
+
+:root[data-theme="onedark"] .toolbar-circuit {
+ filter: hue-rotate(30deg) saturate(0.6);
+}
+
+/* ===== Theme: Rosé Pine ===== */
+
+:root[data-theme="rosepine"] {
+ --bg-primary: #191724;
+ --bg-secondary: #1f1d2e;
+ --bg-tertiary: #26233a;
+ --bg-hover: #403d52;
+ --bg-active: #524f67;
+ --border: #26233a;
+ --border-bright: #403d52;
+
+ --text-primary: #31748f;
+ --text-secondary: #908caa;
+ --text-muted: #6e6a86;
+
+ --cyan: #c4a7e7;
+ --cyan-hover: #b498d7;
+ --cyan-dim: rgba(196, 167, 231, 0.08);
+ --cyan-glow: rgba(196, 167, 231, 0.2);
+ --cyan-subtle: rgba(196, 167, 231, 0.03);
+
+ --status-up: #9ccfd8;
+ --status-up-glow: rgba(156, 207, 216, 0.15);
+ --status-down: #eb6f92;
+ --status-down-glow: rgba(235, 111, 146, 0.15);
+ --status-filtered: #f6c177;
+ --status-filtered-glow: rgba(246, 193, 119, 0.15);
+ --status-unknown: #6e6a86;
+
+ --danger: #eb6f92;
+ --danger-hover: #db5f82;
+}
+
+:root[data-theme="rosepine"] .toolbar-circuit {
+ filter: hue-rotate(80deg) saturate(0.5) brightness(0.8);
+}
+
+/* ===== Theme: Rosé Pine Moon ===== */
+
+:root[data-theme="rosepine-moon"] {
+ --bg-primary: #232136;
+ --bg-secondary: #2a273f;
+ --bg-tertiary: #393552;
+ --bg-hover: #44415a;
+ --bg-active: #56526e;
+ --border: #393552;
+ --border-bright: #44415a;
+
+ --text-primary: #9ccfd8;
+ --text-secondary: #908caa;
+ --text-muted: #6e6a86;
+
+ --cyan: #c4a7e7;
+ --cyan-hover: #b498d7;
+ --cyan-dim: rgba(196, 167, 231, 0.08);
+ --cyan-glow: rgba(196, 167, 231, 0.2);
+ --cyan-subtle: rgba(196, 167, 231, 0.03);
+
+ --status-up: #9ccfd8;
+ --status-up-glow: rgba(156, 207, 216, 0.15);
+ --status-down: #eb6f92;
+ --status-down-glow: rgba(235, 111, 146, 0.15);
+ --status-filtered: #f6c177;
+ --status-filtered-glow: rgba(246, 193, 119, 0.15);
+ --status-unknown: #6e6a86;
+
+ --danger: #eb6f92;
+ --danger-hover: #db5f82;
+}
+
+:root[data-theme="rosepine-moon"] .toolbar-circuit {
+ filter: hue-rotate(80deg) saturate(0.5) brightness(0.8);
+}
+
+/* ===== Theme: Tokyo Night ===== */
+
+:root[data-theme="tokyonight"] {
+ --bg-primary: #1a1b26;
+ --bg-secondary: #16161e;
+ --bg-tertiary: #1f2335;
+ --bg-hover: #292e42;
+ --bg-active: #33384d;
+ --border: #1f2335;
+ --border-bright: #292e42;
+
+ --text-primary: #bb9af7;
+ --text-secondary: #a9b1d6;
+ --text-muted: #565f89;
+
+ --cyan: #7aa2f7;
+ --cyan-hover: #6a92e7;
+ --cyan-dim: rgba(122, 162, 247, 0.08);
+ --cyan-glow: rgba(122, 162, 247, 0.2);
+ --cyan-subtle: rgba(122, 162, 247, 0.03);
+
+ --status-up: #9ece6a;
+ --status-up-glow: rgba(158, 206, 106, 0.15);
+ --status-down: #f7768e;
+ --status-down-glow: rgba(247, 118, 142, 0.15);
+ --status-filtered: #e0af68;
+ --status-filtered-glow: rgba(224, 175, 104, 0.15);
+ --status-unknown: #565f89;
+
+ --danger: #f7768e;
+ --danger-hover: #e7667e;
+}
+
+:root[data-theme="tokyonight"] .toolbar-circuit {
+ filter: hue-rotate(40deg) saturate(0.5);
+}
+
+/* ===== Theme: Iceberg ===== */
+
+:root[data-theme="iceberg"] {
+ --bg-primary: #161821;
+ --bg-secondary: #1e2132;
+ --bg-tertiary: #252837;
+ --bg-hover: #33374c;
+ --bg-active: #3d4259;
+ --border: #252837;
+ --border-bright: #33374c;
+
+ --text-primary: #c6c8d1;
+ --text-secondary: #818596;
+ --text-muted: #444b71;
+
+ --cyan: #84a0c6;
+ --cyan-hover: #7490b6;
+ --cyan-dim: rgba(132, 160, 198, 0.08);
+ --cyan-glow: rgba(132, 160, 198, 0.2);
+ --cyan-subtle: rgba(132, 160, 198, 0.03);
+
+ --status-up: #b4be82;
+ --status-up-glow: rgba(180, 190, 130, 0.15);
+ --status-down: #e27878;
+ --status-down-glow: rgba(226, 120, 120, 0.15);
+ --status-filtered: #e2a478;
+ --status-filtered-glow: rgba(226, 164, 120, 0.15);
+ --status-unknown: #444b71;
+
+ --danger: #e27878;
+ --danger-hover: #d26868;
+}
+
+:root[data-theme="iceberg"] .toolbar-circuit {
+ filter: hue-rotate(30deg) saturate(0.4) brightness(0.9);
+}
+
/* ===== Theme: Hacker (Easter Egg) ===== */
:root[data-theme="hacker"] {
@@ -1605,13 +1790,13 @@ body {
display: block;
background:
repeating-linear-gradient(0deg,
- rgba(0, 0, 0, 0.4) 0px,
- rgba(0, 0, 0, 0.4) 1px,
+ rgba(0, 0, 0, 0.5) 0px,
+ rgba(0, 0, 0, 0.5) 1px,
transparent 1px,
transparent 4px),
linear-gradient(180deg,
transparent 0%,
- rgba(0, 255, 65, 0.03) 50%,
+ rgba(0, 255, 65, 0.09) 50%,
transparent 100%);
animation: crt-flicker 3s infinite;
}