From 91149853ce2a2de40154109e4882bfbb8f8d03c3 Mon Sep 17 00:00:00 2001 From: KingKDot Date: Fri, 5 Jun 2026 22:52:08 -0500 Subject: [PATCH] add more OS distros to icons --- .../public/assets/command-palette.js | 6 +- Overlord-Server/public/assets/main.css | 173 ++++++++++++++++-- Overlord-Server/public/assets/render.js | 15 ++ Overlord-Server/public/assets/viewUtils.js | 26 ++- 4 files changed, 191 insertions(+), 29 deletions(-) diff --git a/Overlord-Server/public/assets/command-palette.js b/Overlord-Server/public/assets/command-palette.js index cffeeaa..96153d4 100644 --- a/Overlord-Server/public/assets/command-palette.js +++ b/Overlord-Server/public/assets/command-palette.js @@ -1,5 +1,6 @@ import { NAV_GROUPS } from "./nav/template.js"; import { CAPTURE_FLAG } from "./keyboard-capture.js"; +import { osBadge } from "./viewUtils.js"; const ALL_PER_CLIENT_ACTIONS = [ { key: "console", feature: "console", label: "Console", icon: "fa-terminal", color: "text-emerald-400", href: (id) => `/${id}/console` }, @@ -167,10 +168,9 @@ function renderRow(r, active) { if (r.kind === "client") { const c = r.client; const dot = c.online ? "background:#10b981" : "background:#475569"; - const os = (c.os || "").toLowerCase(); - const osIcon = os.includes("win") ? "fa-windows" : os.includes("mac") || os.includes("darwin") ? "fa-apple" : os.includes("linux") ? "fa-linux" : os.includes("android") ? "fa-android" : "fa-circle-question"; + const os = osBadge(c.os || ""); return `
- + ${flagFor(c.country)} ${r.label} diff --git a/Overlord-Server/public/assets/main.css b/Overlord-Server/public/assets/main.css index 08560db..3638a97 100644 --- a/Overlord-Server/public/assets/main.css +++ b/Overlord-Server/public/assets/main.css @@ -438,6 +438,44 @@ p { color: #c7d2fe; border-color: rgba(59, 130, 246, 0.18); } +.pill-kali, +.pill-alpine { + background: rgba(14, 165, 233, 0.08); + color: #bae6fd; + border-color: rgba(14, 165, 233, 0.18); +} +.pill-redhat, +.pill-freebsd { + background: rgba(239, 68, 68, 0.09); + color: #fecaca; + border-color: rgba(239, 68, 68, 0.2); +} +.pill-centos, +.pill-gentoo { + background: rgba(139, 92, 246, 0.1); + color: #ddd6fe; + border-color: rgba(139, 92, 246, 0.22); +} +.pill-suse, +.pill-manjaro, +.pill-rocky, +.pill-alma, +.pill-pop, +.pill-nixos { + background: rgba(16, 185, 129, 0.08); + color: #bbf7d0; + border-color: rgba(16, 185, 129, 0.18); +} +.pill-raspi { + background: rgba(219, 39, 119, 0.08); + color: #fbcfe8; + border-color: rgba(219, 39, 119, 0.18); +} +.pill-android { + background: rgba(132, 204, 22, 0.08); + color: #d9f99d; + border-color: rgba(132, 204, 22, 0.18); +} .pill-linux { background: rgba(16, 185, 129, 0.07); color: #bbf7d0; @@ -3365,28 +3403,37 @@ tbody tr:hover { /* OS / arch tones — applied to icon containers across all variants */ .cv-tone-pill-win { color: #93c5fd; } .cv-tone-pill-mac { color: #f1f5f9; } -.cv-tone-pill-ubuntu { color: #fdba74; } -.cv-tone-pill-debian { color: #f9a8d4; } -.cv-tone-pill-arch { color: #67e8f9; } -.cv-tone-pill-kali { color: #7dd3fc; } -.cv-tone-pill-fedora { color: #bfdbfe; } -.cv-tone-pill-redhat { color: #fca5a5; } -.cv-tone-pill-centos { color: #c4b5fd; } -.cv-tone-pill-suse { color: #86efac; } -.cv-tone-pill-raspi { color: #f9a8d4; } -.cv-tone-pill-freebsd { color: #fca5a5; } -.cv-tone-pill-alpine { color: #7dd3fc; } -.cv-tone-pill-manjaro { color: #6ee7b7; } -.cv-tone-pill-mint { color: #86efac; } -.cv-tone-pill-linux { color: #86efac; } +.cv-tone-pill-ubuntu { color: #e95420; } +.cv-tone-pill-debian { color: #d70a53; } +.cv-tone-pill-arch { color: #1793d1; } +.cv-tone-pill-kali { color: #2777ff; } +.cv-tone-pill-fedora { color: #51a2da; } +.cv-tone-pill-redhat { color: #ee0000; } +.cv-tone-pill-centos { color: #932279; } +.cv-tone-pill-suse { color: #73ba25; } +.cv-tone-pill-raspi { color: #c51a4a; } +.cv-tone-pill-freebsd { color: #ab2b28; } +.cv-tone-pill-alpine { color: #0d597f; } +.cv-tone-pill-manjaro { color: #35bf5c; } +.cv-tone-pill-mint { color: #87cf3e; } +.cv-tone-pill-pop { color: #48b9c7; } +.cv-tone-pill-nixos { color: #5277c3; } +.cv-tone-pill-gentoo { color: #54487a; } +.cv-tone-pill-rocky { color: #10b981; } +.cv-tone-pill-alma { color: #0ea5e9; } +.cv-tone-pill-android { color: #a4c639; } +.cv-tone-pill-linux { color: #facc15; } .cv-tone-pill-x64 { color: #5eead4; } .cv-tone-pill-arm { color: #7dd3fc; } .cv-tone-pill-ghost, .cv-tone-pill-unknown { color: var(--cv-text-mute); } .cv-os, .cv-arch { display: inline-flex; align-items: center; gap: 4px; } -.cv-os i { font-size: 11px; } -.cv-os .cv-os-icon, -.cv-card-meta-bit .cv-os-icon { +.cv-os i, +.cv-card-meta-bit i.fa-brands { + color: currentColor; + font-size: 12px; +} +.cv-os-icon { position: relative; display: inline-flex; align-items: center; @@ -3398,15 +3445,14 @@ tbody tr:hover { font-size: 0; line-height: 1; } -.cv-os .cv-os-icon::before, -.cv-card-meta-bit .cv-os-icon::before { +.cv-os-icon::before { content: ""; display: block; } .cv-os-icon-arch::before { width: 12px; height: 12px; - background: #67e8f9; + background: currentColor; clip-path: polygon(50% 3%, 95% 96%, 70% 82%, 61% 62%, 50% 39%, 39% 62%, 30% 82%, 5% 96%); } .cv-os-icon-mint::before { @@ -3427,6 +3473,93 @@ tbody tr:hover { color: #86efac; letter-spacing: 0; } +.cv-os-icon-manjaro::before { + width: 13px; + height: 13px; + border-radius: 2px; + background: + linear-gradient(currentColor 0 0) 0 0 / 4px 13px no-repeat, + linear-gradient(currentColor 0 0) 5px 0 / 8px 4px no-repeat, + linear-gradient(currentColor 0 0) 5px 5px / 4px 8px no-repeat, + linear-gradient(currentColor 0 0) 10px 5px / 3px 8px no-repeat; +} +.cv-os-icon-kali::before { + width: 13px; + height: 13px; + border-radius: 2px; + background: currentColor; + clip-path: polygon(8% 14%, 92% 14%, 58% 40%, 86% 86%, 66% 86%, 48% 55%, 33% 66%, 33% 86%, 8% 86%); +} +.cv-os-icon-alpine::before { + width: 13px; + height: 13px; + border-radius: 2px; + background: + linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.55) 0) 1px 7px / 5px 5px no-repeat, + linear-gradient(135deg, transparent 48%, currentColor 0) 0 3px / 13px 10px no-repeat; +} +.cv-os-icon-pop::before { + width: 13px; + height: 13px; + border: 1px solid currentColor; + border-radius: 50%; + box-shadow: inset 0 0 0 3px rgba(72, 185, 199, 0.16); +} +.cv-os-icon-pop::after { + content: ""; + position: absolute; + width: 4px; + height: 4px; + right: 1px; + bottom: 1px; + border-radius: 50%; + background: currentColor; +} +.cv-os-icon-nixos::before, +.cv-os-icon-nixos::after { + position: absolute; + left: 0; + top: 50%; + width: 13px; + height: 2px; + border-radius: 999px; + background: currentColor; + box-shadow: 0 0 0 1px rgba(82, 119, 195, 0.08); +} +.cv-os-icon-nixos::before { + transform: translateY(-50%) rotate(30deg); +} +.cv-os-icon-nixos::after { + content: ""; + transform: translateY(-50%) rotate(-30deg); +} +.cv-os-icon-gentoo::before { + width: 13px; + height: 13px; + border-radius: 50%; + border: 2px solid currentColor; + border-left-color: transparent; + transform: rotate(-20deg); +} +.cv-os-icon-rocky::before { + width: 13px; + height: 13px; + border-radius: 3px; + background: + linear-gradient(135deg, transparent 45%, currentColor 0 62%, transparent 0), + linear-gradient(45deg, transparent 42%, currentColor 0 63%, transparent 0), + linear-gradient(currentColor 0 0) center / 5px 5px no-repeat; +} +.cv-os-icon-alma::before { + width: 5px; + height: 5px; + border-radius: 50%; + background: #0ea5e9; + box-shadow: + 6px 0 0 #22c55e, + 3px 5px 0 #f97316, + 0 0 0 1px rgba(255, 255, 255, 0.12); +} /* Arch chip in table variant */ .clients-table .cv-arch-chip { diff --git a/Overlord-Server/public/assets/render.js b/Overlord-Server/public/assets/render.js index b2f2d79..df0c44e 100644 --- a/Overlord-Server/public/assets/render.js +++ b/Overlord-Server/public/assets/render.js @@ -276,11 +276,26 @@ function shortOsLabel(osRaw = "") { if (o.includes("windows 11")) return "W11"; if (o.includes("windows 10")) return "W10"; if (o.includes("windows")) return "Win"; + if (o.includes("linux mint")) return "Mint"; + if (o.includes("pop!_os") || o.includes("pop os") || o.includes("pop-os")) return "Pop!_OS"; if (o.includes("ubuntu")) return "Ubuntu"; if (o.includes("debian")) return "Debian"; + if (o.includes("manjaro")) return "Manjaro"; if (o.includes("arch")) return "Arch"; if (o.includes("kali")) return "Kali"; if (o.includes("fedora")) return "Fedora"; + if (o.includes("red hat") || o.includes("rhel")) return "RHEL"; + if (o.includes("rocky")) return "Rocky"; + if (o.includes("alma")) return "Alma"; + if (o.includes("centos")) return "CentOS"; + if (o.includes("opensuse")) return "openSUSE"; + if (o.includes("suse")) return "SUSE"; + if (o.includes("raspbian") || o.includes("raspberry")) return "Raspberry Pi"; + if (o.includes("freebsd")) return "FreeBSD"; + if (o.includes("nixos") || o.includes("nix os")) return "NixOS"; + if (o.includes("gentoo")) return "Gentoo"; + if (o.includes("alpine")) return "Alpine"; + if (o.includes("android")) return "Android"; if (o.includes("mac") || o.includes("darwin")) return "macOS"; if (o.includes("linux")) return "Linux"; return osRaw || "?"; diff --git a/Overlord-Server/public/assets/viewUtils.js b/Overlord-Server/public/assets/viewUtils.js index 1b5623f..6467e7c 100644 --- a/Overlord-Server/public/assets/viewUtils.js +++ b/Overlord-Server/public/assets/viewUtils.js @@ -34,7 +34,7 @@ export function osBadge(osRaw = "") { const os = osRaw.toLowerCase(); const base = { label: osRaw || "Unknown", - icon: "fa-linux", + icon: "fa-solid fa-circle-question", tone: "pill-unknown", }; if (os.includes("windows 11")) @@ -47,30 +47,44 @@ export function osBadge(osRaw = "") { return { label: "macOS", icon: "fa-brands fa-apple", tone: "pill-mac" }; if (os.includes("linux mint")) return { label: "Mint", icon: "cv-os-icon cv-os-icon-mint", tone: "pill-mint" }; + if (os.includes("pop!_os") || os.includes("pop os") || os.includes("pop-os")) + return { label: "Pop!_OS", icon: "cv-os-icon cv-os-icon-pop", tone: "pill-pop" }; if (os.includes("ubuntu")) return { label: "Ubuntu", icon: "fa-brands fa-ubuntu", tone: "pill-ubuntu" }; if (os.includes("debian")) return { label: "Debian", icon: "fa-brands fa-debian", tone: "pill-debian" }; + if (os.includes("manjaro")) + return { label: "Manjaro", icon: "cv-os-icon cv-os-icon-manjaro", tone: "pill-manjaro" }; if (os.includes("arch")) return { label: "Arch", icon: "cv-os-icon cv-os-icon-arch", tone: "pill-arch" }; if (os.includes("kali")) - return { label: "Kali", icon: "fa-brands fa-linux", tone: "pill-kali" }; + return { label: "Kali", icon: "cv-os-icon cv-os-icon-kali", tone: "pill-kali" }; if (os.includes("fedora")) return { label: "Fedora", icon: "fa-brands fa-fedora", tone: "pill-fedora" }; if (os.includes("red hat") || os.includes("rhel")) return { label: "RHEL", icon: "fa-brands fa-redhat", tone: "pill-redhat" }; + if (os.includes("rocky")) + return { label: "Rocky", icon: "cv-os-icon cv-os-icon-rocky", tone: "pill-rocky" }; + if (os.includes("alma")) + return { label: "Alma", icon: "cv-os-icon cv-os-icon-alma", tone: "pill-alma" }; if (os.includes("centos")) return { label: "CentOS", icon: "fa-brands fa-centos", tone: "pill-centos" }; - if (os.includes("suse") || os.includes("opensuse")) + if (os.includes("opensuse")) + return { label: "openSUSE", icon: "fa-brands fa-opensuse", tone: "pill-suse" }; + if (os.includes("suse")) return { label: "SUSE", icon: "fa-brands fa-suse", tone: "pill-suse" }; if (os.includes("raspbian") || os.includes("raspberry")) return { label: "Raspberry Pi", icon: "fa-brands fa-raspberry-pi", tone: "pill-raspi" }; if (os.includes("freebsd")) return { label: "FreeBSD", icon: "fa-brands fa-freebsd", tone: "pill-freebsd" }; + if (os.includes("nixos") || os.includes("nix os")) + return { label: "NixOS", icon: "cv-os-icon cv-os-icon-nixos", tone: "pill-nixos" }; + if (os.includes("gentoo")) + return { label: "Gentoo", icon: "cv-os-icon cv-os-icon-gentoo", tone: "pill-gentoo" }; if (os.includes("alpine")) - return { label: "Alpine", icon: "fa-brands fa-linux", tone: "pill-alpine" }; - if (os.includes("manjaro")) - return { label: "Manjaro", icon: "fa-brands fa-linux", tone: "pill-manjaro" }; + return { label: "Alpine", icon: "cv-os-icon cv-os-icon-alpine", tone: "pill-alpine" }; + if (os.includes("android")) + return { label: "Android", icon: "fa-brands fa-android", tone: "pill-android" }; if (os.includes("linux")) return { label: "Linux", icon: "fa-brands fa-linux", tone: "pill-linux" }; return base;