better UI
This commit is contained in:
KingKDot
@@ -212,9 +212,7 @@
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(120% 120% at 20% 20%, #102040 0%, transparent 45%),
|
||||
radial-gradient(110% 110% at 80% 0%, #112233 0%, transparent 50%), #05070f;
|
||||
background: #0a0d14;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@@ -334,9 +332,9 @@ p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.pill-online {
|
||||
background: rgba(16, 185, 129, 0.16);
|
||||
color: #bbf7d0;
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
color: #86efac;
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
.pill-ghost {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
@@ -348,13 +346,9 @@ p {
|
||||
border-color: rgba(148, 163, 184, 0.32);
|
||||
}
|
||||
.pill-win {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(59, 130, 246, 0.18),
|
||||
rgba(14, 165, 233, 0.14)
|
||||
);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #bfdbfe;
|
||||
border-color: rgba(59, 130, 246, 0.35);
|
||||
border-color: rgba(59, 130, 246, 0.22);
|
||||
}
|
||||
.pill-mac {
|
||||
background: rgba(209, 213, 219, 0.12);
|
||||
@@ -362,29 +356,29 @@ p {
|
||||
border-color: rgba(209, 213, 219, 0.22);
|
||||
}
|
||||
.pill-ubuntu {
|
||||
background: rgba(249, 115, 22, 0.16);
|
||||
background: rgba(249, 115, 22, 0.08);
|
||||
color: #fed7aa;
|
||||
border-color: rgba(249, 115, 22, 0.3);
|
||||
border-color: rgba(249, 115, 22, 0.18);
|
||||
}
|
||||
.pill-debian {
|
||||
background: rgba(236, 72, 153, 0.16);
|
||||
background: rgba(236, 72, 153, 0.08);
|
||||
color: #fbcfe8;
|
||||
border-color: rgba(236, 72, 153, 0.32);
|
||||
border-color: rgba(236, 72, 153, 0.18);
|
||||
}
|
||||
.pill-arch {
|
||||
background: rgba(34, 211, 238, 0.16);
|
||||
background: rgba(34, 211, 238, 0.08);
|
||||
color: #a5f3fc;
|
||||
border-color: rgba(34, 211, 238, 0.32);
|
||||
border-color: rgba(34, 211, 238, 0.18);
|
||||
}
|
||||
.pill-fedora {
|
||||
background: rgba(59, 130, 246, 0.16);
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
color: #c7d2fe;
|
||||
border-color: rgba(59, 130, 246, 0.32);
|
||||
border-color: rgba(59, 130, 246, 0.18);
|
||||
}
|
||||
.pill-linux {
|
||||
background: rgba(16, 185, 129, 0.14);
|
||||
background: rgba(16, 185, 129, 0.07);
|
||||
color: #bbf7d0;
|
||||
border-color: rgba(16, 185, 129, 0.28);
|
||||
border-color: rgba(16, 185, 129, 0.16);
|
||||
}
|
||||
.pill-x64 {
|
||||
background: rgba(94, 234, 212, 0.14);
|
||||
@@ -404,25 +398,20 @@ p {
|
||||
|
||||
/* .grid removed — was colliding with Tailwind's grid utility (display: grid) */
|
||||
.card {
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
var(--color-surface),
|
||||
var(--color-surface-dark)
|
||||
);
|
||||
border: 1px solid var(--color-border);
|
||||
background: rgba(30, 41, 59, 0.72) !important;
|
||||
border: 1px solid rgba(51, 65, 85, 0.6) !important;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px 14px;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
|
||||
box-shadow: none;
|
||||
}
|
||||
.card.card-offline {
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
rgba(10, 14, 24, 0.7),
|
||||
rgba(4, 6, 12, 0.9)
|
||||
);
|
||||
border-color: rgba(71, 85, 105, 0.5);
|
||||
filter: saturate(0.55);
|
||||
opacity: 0.85;
|
||||
background: rgba(15, 23, 40, 0.65) !important;
|
||||
border-color: rgba(51, 65, 85, 0.35) !important;
|
||||
filter: saturate(0.5);
|
||||
opacity: 0.8;
|
||||
}
|
||||
article.card[data-bookmarked="true"] {
|
||||
border-color: rgba(202, 138, 4, 0.55) !important;
|
||||
}
|
||||
.pill-offline {
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
@@ -430,19 +419,19 @@ p {
|
||||
border-color: rgba(71, 85, 105, 0.55);
|
||||
}
|
||||
.pill-admin {
|
||||
background: rgba(234, 179, 8, 0.18);
|
||||
background: rgba(234, 179, 8, 0.08);
|
||||
color: #fef08a;
|
||||
border-color: rgba(234, 179, 8, 0.45);
|
||||
border-color: rgba(234, 179, 8, 0.22);
|
||||
}
|
||||
.pill-system {
|
||||
background: rgba(239, 68, 68, 0.18);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: #fca5a5;
|
||||
border-color: rgba(239, 68, 68, 0.45);
|
||||
border-color: rgba(239, 68, 68, 0.22);
|
||||
}
|
||||
.pill-ti {
|
||||
background: rgba(168, 85, 247, 0.18);
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
color: #d8b4fe;
|
||||
border-color: rgba(168, 85, 247, 0.45);
|
||||
border-color: rgba(168, 85, 247, 0.22);
|
||||
}
|
||||
.pill-perm-ok {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
@@ -533,15 +522,8 @@ p {
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: var(
|
||||
--card-accent,
|
||||
radial-gradient(
|
||||
circle at 20% 20%,
|
||||
rgba(99, 102, 241, 0.08),
|
||||
transparent 45%
|
||||
)
|
||||
);
|
||||
opacity: 1;
|
||||
background: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.card > * {
|
||||
position: relative;
|
||||
|
||||
@@ -403,7 +403,7 @@ export function createRenderer({
|
||||
};
|
||||
const gpuHtml = dedupeGpu(client.gpu);
|
||||
const borderClass = client.bookmarked ? "border-yellow-600/60" : "border-slate-800";
|
||||
card.className = `card rounded-xl border ${borderClass} bg-slate-900/70 p-4 shadow-lg ${client.online ? "" : "card-offline"} tone-${os.tone}`;
|
||||
card.className = `card rounded-xl border ${borderClass} p-4 ${client.online ? "" : "card-offline"}`;
|
||||
if (!client.bookmarked && groupColor) {
|
||||
card.style.setProperty("--group-color", groupColor);
|
||||
} else {
|
||||
@@ -494,8 +494,8 @@ export function createRenderer({
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="bookmark-btn inline-flex items-center justify-center w-9 h-9 rounded-lg border ${client.bookmarked ? "border-yellow-600 bg-yellow-900/50 text-yellow-300" : "border-slate-700 bg-slate-800/50 text-slate-500 hover:text-yellow-300 hover:border-yellow-700"} transition-colors" data-id="${escapeHtml(client.id)}" title="${client.bookmarked ? "Remove bookmark" : "Bookmark"}"><i class="fa-${client.bookmarked ? "solid" : "regular"} fa-star"></i></button>
|
||||
<span class="text-emerald-300 font-mono text-sm inline-flex items-center gap-2"><i class="fa-solid fa-satellite-dish"></i> ${formatPing(client.pingMs)}</span>
|
||||
${isViewer ? "" : `<button class="command-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-800 bg-slate-800/70 hover:bg-slate-700" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-bars"></i> Commands</button>`}
|
||||
${isViewer ? "" : `<button class="ban-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-red-800 bg-red-900/60 hover:bg-red-800 text-red-100" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ban"></i> Ban</button>`}
|
||||
${isViewer ? "" : `<button class="command-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-700/60 bg-slate-800/70 hover:bg-slate-700/70" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-bars"></i> Commands</button>`}
|
||||
${isViewer ? "" : `<button class="ban-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-red-900/60 bg-red-950/40 hover:bg-red-900/50 text-red-300" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ban"></i> Ban</button>`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user