mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-11 13:49:03 +00:00
UNITRONIX
f6d4112ef7
Updated sidebar styles to use new glass background variables for both the sidebar rail and flyout. This change enhances the visual aesthetics by applying a semi-transparent glass effect, improving the overall UI experience. Additionally, adjustments were made to the theme CSS to ensure consistency across light and dark modes.
204 lines
8.6 KiB
CSS
204 lines
8.6 KiB
CSS
/**
|
|
* BetterDesk Console v2.0 - CSS Variables
|
|
* Dark theme design tokens
|
|
*/
|
|
|
|
:root {
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
COLORS - Dark Theme
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Background colors */
|
|
--bg-primary: #0d1117;
|
|
--bg-secondary: #161b22;
|
|
--bg-tertiary: #21262d;
|
|
--bg-elevated: #30363d;
|
|
--bg-overlay: rgba(0, 0, 0, 0.7);
|
|
|
|
/* Glass surface tokens (overridden by branding.css) */
|
|
--surface-glass-blur: 16px;
|
|
--surface-glass-saturate: 1.2;
|
|
--surface-glass-bg-secondary: rgba(22, 27, 34, 0.55);
|
|
--surface-glass-bg-tertiary: rgba(33, 38, 45, 0.62);
|
|
--surface-glass-bg-elevated: rgba(48, 54, 61, 0.7);
|
|
--surface-glass-border: rgba(48, 54, 61, 0.5);
|
|
--card-bg: var(--surface-glass-bg-secondary);
|
|
--sidebar-glass-bg-rail: rgba(22, 27, 34, 0.48);
|
|
--sidebar-glass-bg-flyout: rgba(22, 27, 34, 0.58);
|
|
|
|
/* Text colors */
|
|
--text-primary: #e6edf3;
|
|
--text-secondary: #8b949e;
|
|
--text-tertiary: #6e7681;
|
|
--text-link: #58a6ff;
|
|
|
|
/* Border colors */
|
|
--border-primary: #30363d;
|
|
--border-secondary: #21262d;
|
|
--border-hover: #8b949e;
|
|
--border-color: #30363d; /* Alias for --border-primary */
|
|
|
|
/* Hover/Active backgrounds */
|
|
--bg-hover: rgba(255, 255, 255, 0.05);
|
|
--bg-active: rgba(255, 255, 255, 0.08);
|
|
|
|
/* Accent colors */
|
|
--accent-green: #2ea44f;
|
|
--accent-green-hover: #3fb950;
|
|
--accent-green-muted: rgba(46, 164, 79, 0.15);
|
|
|
|
--accent-blue: #58a6ff;
|
|
--accent-blue-hover: #79c0ff;
|
|
--accent-blue-muted: rgba(88, 166, 255, 0.15);
|
|
|
|
--accent-red: #f85149;
|
|
--accent-red-hover: #ff6b6b;
|
|
--accent-red-muted: rgba(248, 81, 73, 0.15);
|
|
|
|
--accent-yellow: #d29922;
|
|
--accent-yellow-hover: #e3b341;
|
|
--accent-yellow-muted: rgba(210, 153, 34, 0.15);
|
|
|
|
--accent-purple: #a371f7;
|
|
--accent-purple-hover: #bc8cff;
|
|
--accent-purple-muted: rgba(163, 113, 247, 0.15);
|
|
|
|
/* Status colors */
|
|
--status-online: #2ea44f;
|
|
--status-offline: #8b949e;
|
|
--status-banned: #f85149;
|
|
--status-warning: #d29922;
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
TYPOGRAPHY
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
--font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, monospace;
|
|
|
|
--font-size-xs: 0.75rem; /* 12px */
|
|
--font-size-sm: 0.875rem; /* 14px */
|
|
--font-size-md: 1rem; /* 16px */
|
|
--font-size-lg: 1.125rem; /* 18px */
|
|
--font-size-xl: 1.25rem; /* 20px */
|
|
--font-size-2xl: 1.5rem; /* 24px */
|
|
--font-size-3xl: 2rem; /* 32px */
|
|
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
--line-height: 1.5;
|
|
--line-height-tight: 1.25;
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
SPACING
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
--space-xs: 0.25rem; /* 4px */
|
|
--space-sm: 0.5rem; /* 8px */
|
|
--space-md: 1rem; /* 16px */
|
|
--space-lg: 1.5rem; /* 24px */
|
|
--space-xl: 2rem; /* 32px */
|
|
--space-2xl: 3rem; /* 48px */
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
LAYOUT
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
--sidebar-width: 260px;
|
|
--sidebar-width-collapsed: 64px;
|
|
--navbar-height: 60px;
|
|
--content-max-width: 1400px;
|
|
|
|
/* Sidebar navigation — readability & category accents */
|
|
--sidebar-rail-bg: #1c2128;
|
|
--sidebar-flyout-bg: #141a21;
|
|
--sidebar-btn-color: #b1bac4;
|
|
--sidebar-btn-hover-bg: rgba(255, 255, 255, 0.10);
|
|
--sidebar-btn-hover-color: #f0f6fc;
|
|
--sidebar-section-title: #9da7b3;
|
|
--sidebar-neutral-accent: #b1bac4;
|
|
--sidebar-neutral-muted: rgba(177, 186, 196, 0.18);
|
|
--sidebar-focus-ring: rgba(121, 192, 255, 0.55);
|
|
|
|
--sidebar-cat-main-accent: #79c0ff;
|
|
--sidebar-cat-main-muted: rgba(88, 166, 255, 0.22);
|
|
--sidebar-cat-management-accent: #56d4c8;
|
|
--sidebar-cat-management-muted: rgba(63, 185, 176, 0.20);
|
|
--sidebar-cat-tools-accent: #e3b341;
|
|
--sidebar-cat-tools-muted: rgba(210, 153, 34, 0.22);
|
|
--sidebar-cat-system-accent: #bc8cff;
|
|
--sidebar-cat-system-muted: rgba(163, 113, 247, 0.20);
|
|
--sidebar-cat-server-mgmt-accent: #ff9b7a;
|
|
--sidebar-cat-server-mgmt-muted: rgba(255, 155, 122, 0.18);
|
|
--sidebar-cat-commercialization-accent: #f0b429;
|
|
--sidebar-cat-commercialization-muted: rgba(240, 180, 41, 0.18);
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
SHAPES & EFFECTS
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
--radius-full: 9999px;
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
--shadow-glow: 0 0 20px rgba(88, 166, 255, 0.3);
|
|
|
|
--transition-fast: 0.15s ease;
|
|
--transition-normal: 0.25s ease;
|
|
--transition-slow: 0.4s ease;
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
Z-INDEX LAYERS
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-overlay: 300;
|
|
--z-modal: 1100;
|
|
--z-toast: 1200;
|
|
--z-tooltip: 1300;
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
SCROLLBAR
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
--scrollbar-width: 8px;
|
|
--scrollbar-track: var(--bg-secondary);
|
|
--scrollbar-thumb: var(--bg-elevated);
|
|
--scrollbar-thumb-hover: var(--border-hover);
|
|
}
|
|
|
|
/* Material Icons */
|
|
.material-icons,
|
|
.material-icons-outlined,
|
|
.material-symbols-outlined {
|
|
font-family: 'Material Icons';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
-webkit-font-feature-settings: 'liga';
|
|
font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Icon sizes */
|
|
.icon-sm { font-size: 18px; }
|
|
.icon-md { font-size: 24px; }
|
|
.icon-lg { font-size: 32px; }
|
|
.icon-xl { font-size: 48px; }
|