add more OS distros to icons

This commit is contained in:
KingKDot
2026-06-05 22:52:08 -05:00
parent 31ea4ba296
commit 91149853ce
4 changed files with 191 additions and 29 deletions
+153 -20
View File
@@ -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 {