add more OS distros to icons
This commit is contained in:
KingKDot
@@ -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 `<div class="${activeCls}" data-client="${c.id}">
|
||||
<i class="fa-brands ${osIcon} text-slate-400" style="width:18px;text-align:center;"></i>
|
||||
<i class="fa ${os.icon} cv-tone-${os.tone}" style="width:18px;text-align:center;"></i>
|
||||
<span class="cmdp-status-dot" style="${dot}"></span>
|
||||
${flagFor(c.country)}
|
||||
<span class="cmdp-label">${r.label}</span>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 || "?";
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user