feat: Added New Theme

2026-10-08 11:22:28 -04:00
parent aaeb7636a1
commit 1fe24d22ed
4 changed files with 219 additions and 1 deletions
@@ -1478,6 +1478,174 @@ body {
  --danger-hover: #c62825;
 }

+/* ===== Theme: Catppuccin Mocha ===== */
+
+:root[data-theme="mocha"] {
+  --bg-primary: #1e1e2e;
+  --bg-secondary: #181825;
+  --bg-tertiary: #313244;
+  --bg-hover: #45475a;
+  --bg-active: #585b70;
+  --border: #313244;
+  --border-bright: #45475a;
+
+  --text-primary: #cdd6f4;
+  --text-secondary: #a6adc8;
+  --text-muted: #6c7086;
+
+  --cyan: #89b4fa;
+  --cyan-hover: #7ba4eb;
+  --cyan-dim: rgba(137, 180, 250, 0.08);
+  --cyan-glow: rgba(137, 180, 250, 0.2);
+  --cyan-subtle: rgba(137, 180, 250, 0.03);
+
+  --status-up: #a6e3a1;
+  --status-up-glow: rgba(166, 227, 161, 0.15);
+  --status-down: #f38ba8;
+  --status-down-glow: rgba(243, 139, 168, 0.15);
+  --status-filtered: #f9e2af;
+  --status-filtered-glow: rgba(249, 226, 175, 0.15);
+  --status-unknown: #6c7086;
+
+  --danger: #f38ba8;
+  --danger-hover: #e57a97;
+}
+
+:root[data-theme="mocha"] .toolbar-circuit {
+  filter: hue-rotate(40deg) saturate(0.6) brightness(0.9);
+}
+
+:root[data-theme="latte"] .port-tag {
+  background: rgba(30, 102, 245, 0.1);
+  border-color: rgba(30, 102, 245, 0.2);
+}
+
+:root[data-theme="latte"] #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 {
+  background: var(--bg-primary);
+}
+
+:root[data-theme="latte"] ::-webkit-scrollbar-thumb {
+  background: var(--border-bright);
+}
+
+/* ===== Theme: Hacker (Easter Egg) ===== */
+
+:root[data-theme="hacker"] {
+  --bg-primary: #000000;
+  --bg-secondary: #0a0a0a;
+  --bg-tertiary: #0d0d0d;
+  --bg-hover: #1a1a1a;
+  --bg-active: #222222;
+  --border: #0a3a0a;
+  --border-bright: #0f4f0f;
+
+  --text-primary: #00ff41;
+  --text-secondary: #00cc33;
+  --text-muted: #006b1d;
+
+  --cyan: #00ff41;
+  --cyan-hover: #00dd38;
+  --cyan-dim: rgba(0, 255, 65, 0.06);
+  --cyan-glow: rgba(0, 255, 65, 0.3);
+  --cyan-subtle: rgba(0, 255, 65, 0.02);
+
+  --status-up: #00ff41;
+  --status-up-glow: rgba(0, 255, 65, 0.2);
+  --status-down: #ff0040;
+  --status-down-glow: rgba(255, 0, 64, 0.2);
+  --status-filtered: #ffff00;
+  --status-filtered-glow: rgba(255, 255, 0, 0.15);
+  --status-unknown: #006b1d;
+
+  --danger: #ff0040;
+  --danger-hover: #dd0038;
+
+  --font-mono: "Courier New", "Lucida Console", monospace;
+  --font-sans: "Courier New", "Lucida Console", monospace;
+}
+
+:root[data-theme="hacker"] .toolbar-circuit {
+  filter: hue-rotate(-60deg) saturate(3) brightness(0.8);
+}
+
+:root[data-theme="hacker"] body {
+  font-family: "Courier New", "Lucida Console", monospace;
+}
+
+:root[data-theme="hacker"] .app-title {
+  letter-spacing: 5px;
+}
+
+:root[data-theme="hacker"] .btn-primary {
+  text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
+}
+
+:root[data-theme="hacker"] #results-table td,
+:root[data-theme="hacker"] #monitor-table td {
+  text-shadow: 0 0 3px rgba(0, 255, 65, 0.15);
+}
+
+#crt-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+:root[data-theme="hacker"] #crt-overlay {
+  display: block;
+  background:
+    repeating-linear-gradient(0deg,
+      rgba(0, 0, 0, 0.4) 0px,
+      rgba(0, 0, 0, 0.4) 1px,
+      transparent 1px,
+      transparent 4px),
+    linear-gradient(180deg,
+      transparent 0%,
+      rgba(0, 255, 65, 0.03) 50%,
+      transparent 100%);
+  animation: crt-flicker 3s infinite;
+}
+
+@keyframes crt-flicker {
+  0% {
+    opacity: 1;
+  }
+
+  5% {
+    opacity: 0.85;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  40% {
+    opacity: 0.95;
+  }
+
+  45% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0.9;
+  }
+
+  85% {
+    opacity: 1;
+  }
+}
+
 /* ===== Circuit art theme tinting ===== */

 :root[data-theme="dracula"] .toolbar-circuit {