mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-10-02 08:06:17 +00:00
Update AppImage
This commit is contained in:
MacRimi
@@ -4,6 +4,7 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
/* Proxmox light theme colors */
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
@@ -31,54 +32,49 @@
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--header-bg: oklch(1 0 0);
|
||||
--header-foreground: oklch(0.145 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.205 0.005 240); /* Proxmox dark gray #2b2f36 */
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.235 0.005 240); /* Slightly lighter gray for cards #363c45 */
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.235 0.005 240);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.285 0.005 240); /* Better contrast for secondary elements */
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.285 0.005 240);
|
||||
--muted-foreground: oklch(0.708 0 0); /* Better contrast for muted text */
|
||||
--accent: oklch(0.285 0.005 240);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.335 0.005 240); /* More visible borders */
|
||||
--input: oklch(0.285 0.005 240);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--chart-1: oklch(0.65 0.2 220); /* Bright Blue */
|
||||
--chart-2: oklch(0.65 0.2 140); /* Bright Green */
|
||||
--chart-3: oklch(0.7 0.2 50); /* Bright Yellow */
|
||||
--chart-4: oklch(0.65 0.2 300); /* Bright Purple */
|
||||
--chart-5: oklch(0.65 0.2 20); /* Bright Orange */
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.285 0.005 240);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.285 0.005 240);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
--header-bg: oklch(0 0 0);
|
||||
--header-foreground: oklch(1 0 0);
|
||||
/* Proxmox dark theme with proper gray background (#2b2f36) */
|
||||
--background: #2b2f36; /* Proxmox dark gray */
|
||||
--foreground: #ffffff;
|
||||
--card: #363c45; /* Slightly lighter gray for cards */
|
||||
--card-foreground: #ffffff;
|
||||
--popover: #363c45;
|
||||
--popover-foreground: #ffffff;
|
||||
--primary: #ffffff;
|
||||
--primary-foreground: #2b2f36;
|
||||
--secondary: #4a5058; /* Better contrast for secondary elements */
|
||||
--secondary-foreground: #ffffff;
|
||||
--muted: #4a5058;
|
||||
--muted-foreground: #b4b4b4; /* Better contrast for muted text */
|
||||
--accent: #4a5058;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #525862; /* More visible borders */
|
||||
--input: #4a5058;
|
||||
--ring: #6b7280;
|
||||
/* Updated chart colors to be more vibrant and visible in dark mode */
|
||||
--chart-1: #3b82f6; /* Bright Blue */
|
||||
--chart-2: #10b981; /* Bright Green */
|
||||
--chart-3: #f59e0b; /* Bright Yellow */
|
||||
--chart-4: #8b5cf6; /* Bright Purple */
|
||||
--chart-5: #f97316; /* Bright Orange */
|
||||
--sidebar: #2b2f36;
|
||||
--sidebar-foreground: #ffffff;
|
||||
--sidebar-primary: #6366f1;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #4a5058;
|
||||
--sidebar-accent-foreground: #ffffff;
|
||||
--sidebar-border: #4a5058;
|
||||
--sidebar-ring: #6b7280;
|
||||
/* Header is black only in dark mode */
|
||||
--header-bg: #000000;
|
||||
--header-foreground: #ffffff;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
@@ -115,6 +111,9 @@
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
/* Custom header colors */
|
||||
--color-header-bg: var(--header-bg);
|
||||
--color-header-foreground: var(--header-foreground);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -124,78 +123,80 @@
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
.header-bg {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-foreground);
|
||||
backdrop-filter: none; /* Remove any blur effects */
|
||||
}
|
||||
/* Custom scrollbar with better contrast */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--muted);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Better contrast for dark mode content */
|
||||
.dark .metric-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dark .metric-value {
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .metric-label {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Fix chart axis visibility in dark mode */
|
||||
.dark .recharts-cartesian-axis-tick-value {
|
||||
fill: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
.dark .recharts-text {
|
||||
fill: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Improve server info layout in header - clean design without transparency */
|
||||
.server-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark .server-info {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Better spacing for VM/LXC badges */
|
||||
.vm-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vm-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header styling that adapts to theme */
|
||||
.header-bg {
|
||||
background-color: var(--header-bg);
|
||||
color: var(--header-foreground);
|
||||
}
|
||||
|
||||
/* Custom scrollbar with better contrast */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--muted);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Better contrast for dark mode content */
|
||||
.dark .metric-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dark .metric-value {
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .metric-label {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Fix chart axis visibility in dark mode */
|
||||
.dark .recharts-cartesian-axis-tick-value {
|
||||
fill: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
.dark .recharts-text {
|
||||
fill: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Improve server info layout in header - clean design without transparency */
|
||||
.server-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark .server-info {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Better spacing for VM/LXC badges */
|
||||
.vm-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vm-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user