159 lines
5.6 KiB
CSS
159 lines
5.6 KiB
CSS
/* ==========================================================================
|
|
Nexus Terminal — Design Tokens
|
|
Central palette, spacing, typography, and layout constants.
|
|
All values consumed via var(--token-name) throughout the application.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* -----------------------------------------------------------------------
|
|
Colour palette — dark charcoal theme
|
|
----------------------------------------------------------------------- */
|
|
--bg-base: #1c1c1c; /* deepest background */
|
|
--bg-surface: #232323; /* primary surface (sidebar, bars) */
|
|
--bg-elevated: #2a2a2a; /* elevated panels, cards */
|
|
--bg-overlay: #303030; /* overlays, dropdowns */
|
|
--bg-hover: #363636; /* hover state backgrounds */
|
|
--bg-active: #3c3c3c; /* active / pressed state */
|
|
--bg-input: #1e1e1e; /* input field backgrounds */
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Border colours
|
|
----------------------------------------------------------------------- */
|
|
--border-subtle: rgba(255, 255, 255, 0.07);
|
|
--border-default: rgba(255, 255, 255, 0.12);
|
|
--border-strong: rgba(255, 255, 255, 0.18);
|
|
--border-focus: var(--accent);
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Text colours
|
|
----------------------------------------------------------------------- */
|
|
--text-primary: #e4e4e4;
|
|
--text-secondary: #a0a0a0;
|
|
--text-tertiary: #707070;
|
|
--text-disabled: #4a4a4a;
|
|
--text-inverse: #1c1c1c;
|
|
--sidebar-group-title: #b89d5f;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Accent colours — teal / cyan
|
|
----------------------------------------------------------------------- */
|
|
--accent: #4ecdc4;
|
|
--accent-hover: #45b7af;
|
|
--accent-muted: rgba(78, 205, 196, 0.12);
|
|
--accent-strong: rgba(78, 205, 196, 0.22);
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Status colours
|
|
----------------------------------------------------------------------- */
|
|
--success: #66bb6a;
|
|
--warning: #ffa726;
|
|
--error: #ef5350;
|
|
--info: #42a5f5;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Protocol badge colours
|
|
----------------------------------------------------------------------- */
|
|
--protocol-ssh: #4ecdc4;
|
|
--protocol-telnet: #ffa726;
|
|
--protocol-raw: #ab47bc;
|
|
--protocol-github: #7c8aff;
|
|
--protocol-vnc: #e85d4a;
|
|
--protocol-local: #8bc34a;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Spacing scale (4 px base unit)
|
|
----------------------------------------------------------------------- */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
--space-16: 64px;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Typography
|
|
----------------------------------------------------------------------- */
|
|
--font-sans:
|
|
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
|
|
sans-serif;
|
|
--font-mono:
|
|
"JetBrains Mono", "Fira Code", "SF Mono", Monaco, "Cascadia Code", monospace;
|
|
|
|
--text-xs: 11px;
|
|
--text-sm: 12px;
|
|
--text-base: 13px;
|
|
--text-md: 14px;
|
|
--text-lg: 16px;
|
|
--text-xl: 18px;
|
|
--text-2xl: 22px;
|
|
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.625;
|
|
|
|
--weight-normal: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Border radius
|
|
----------------------------------------------------------------------- */
|
|
--radius-sm: 3px;
|
|
--radius-md: 5px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 12px;
|
|
--radius-full: 9999px;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Shadows
|
|
----------------------------------------------------------------------- */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.6);
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Transitions
|
|
----------------------------------------------------------------------- */
|
|
--transition-fast: 100ms ease;
|
|
--transition-normal: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Z-index layers
|
|
----------------------------------------------------------------------- */
|
|
--z-base: 0;
|
|
--z-sticky: 100;
|
|
--z-dropdown: 200;
|
|
--z-modal-backdrop: 300;
|
|
--z-modal: 400;
|
|
--z-notification: 500;
|
|
--z-tooltip: 600;
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Layout
|
|
----------------------------------------------------------------------- */
|
|
--sidebar-width: 260px;
|
|
--sidebar-width-collapsed: 48px;
|
|
--tab-bar-height: 36px;
|
|
--toolbar-height: 40px;
|
|
--status-bar-height: 24px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------
|
|
Global input overrides — disable macOS/WebKit auto-capitalisation,
|
|
autocorrect, and spellcheck on all text fields.
|
|
----------------------------------------------------------------------- */
|
|
input,
|
|
textarea,
|
|
select {
|
|
autocapitalize: none;
|
|
autocorrect: off;
|
|
spellcheck: false;
|
|
text-transform: none;
|
|
}
|