mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 17:45:42 +00:00
UNITRONIX
cbf72ca1e3
- Added UX 3.5 as the default console shell, featuring a full-list sidebar, topbar, and customizable themes (Dark/Light/Custom). - Updated documentation to reflect the new UX 3.5 shell. - Removed legacy Desktop Mode and Beta 3.1 styles, ensuring a streamlined user experience. - Enhanced language support for new theme options across multiple languages. - Fixed OIDC client login issues by proxying callback URLs to the Go API. This update improves the overall user interface and experience, aligning with modern design standards.
246 lines
10 KiB
CSS
246 lines
10 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);
|
|
|
|
/* Semantic color aliases used by the rebuilt appearance system */
|
|
--color-primary: var(--accent-blue);
|
|
--color-primary-hover: var(--accent-blue-hover);
|
|
--color-primary-muted: var(--accent-blue-muted);
|
|
--color-success: var(--accent-green);
|
|
--color-success-hover: var(--accent-green-hover);
|
|
--color-success-muted: var(--accent-green-muted);
|
|
--color-danger: var(--accent-red);
|
|
--color-danger-hover: var(--accent-red-hover);
|
|
--color-danger-muted: var(--accent-red-muted);
|
|
--color-warning: var(--accent-yellow);
|
|
--color-warning-hover: var(--accent-yellow-hover);
|
|
--color-warning-muted: var(--accent-yellow-muted);
|
|
--color-info: var(--accent-purple);
|
|
--color-info-hover: var(--accent-purple-hover);
|
|
--color-info-muted: var(--accent-purple-muted);
|
|
--color-surface: var(--bg-secondary);
|
|
--color-surface-alt: var(--bg-primary);
|
|
--color-surface-hover: var(--bg-tertiary);
|
|
--color-surface-raised: var(--bg-elevated);
|
|
--color-text: var(--text-primary);
|
|
--color-text-muted: var(--text-secondary);
|
|
--color-border: var(--border-primary);
|
|
--focus-ring-color: var(--accent-blue-muted);
|
|
|
|
/* 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-3: 0.75rem; /* 12px — UX 3.5 scale */
|
|
--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;
|
|
|
|
/* Mobile / responsive breakpoints (match device-capabilities.js) */
|
|
--bp-phone-max: 767px;
|
|
--bp-tablet-max: 1024px;
|
|
--bp-fold-inner-max: 720px;
|
|
--bp-desktop-min: 1025px;
|
|
|
|
/* Mobile shell chrome */
|
|
--mobile-nav-height: 56px;
|
|
--app-height: 100vh;
|
|
--safe-top: env(safe-area-inset-top, 0px);
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-left: env(safe-area-inset-left, 0px);
|
|
--safe-right: env(safe-area-inset-right, 0px);
|
|
--mobile-chrome-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom));
|
|
--rdclient-mobile-toolbar-height: 52px;
|
|
|
|
/* 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; }
|