mirror of
https://github.com/netbirdio/netbird.git
synced 2026-04-23 02:36:42 +00:00
187 lines
6.3 KiB
CSS
187 lines
6.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ── Light-mode tokens (default) ────────────────────────────────── */
|
|
:root {
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #f5f5f7;
|
|
--color-bg-tertiary: #e8e8ed;
|
|
--color-bg-elevated: #ffffff;
|
|
--color-bg-sidebar: rgba(245, 245, 247, 0.8);
|
|
--color-sidebar-selected: rgba(0, 0, 0, 0.06);
|
|
--color-sidebar-hover: rgba(0, 0, 0, 0.04);
|
|
|
|
--color-text-primary: #1d1d1f;
|
|
--color-text-secondary: #6e6e73;
|
|
--color-text-tertiary: #86868b;
|
|
--color-text-quaternary: #aeaeb2;
|
|
|
|
--color-separator: rgba(0, 0, 0, 0.09);
|
|
--color-separator-heavy: rgba(0, 0, 0, 0.16);
|
|
|
|
--color-accent: #f68330;
|
|
--color-accent-hover: #e55311;
|
|
|
|
--color-status-green: #34c759;
|
|
--color-status-green-bg: rgba(52, 199, 89, 0.12);
|
|
--color-status-yellow: #ff9f0a;
|
|
--color-status-yellow-bg: rgba(255, 159, 10, 0.12);
|
|
--color-status-red: #ff3b30;
|
|
--color-status-red-bg: rgba(255, 59, 48, 0.12);
|
|
--color-status-gray: #8e8e93;
|
|
--color-status-gray-bg: rgba(142, 142, 147, 0.12);
|
|
|
|
--color-input-bg: #ffffff;
|
|
--color-input-border: rgba(0, 0, 0, 0.12);
|
|
--color-input-focus: var(--color-accent);
|
|
|
|
--color-control-bg: rgba(116, 116, 128, 0.08);
|
|
|
|
--shadow-card: 0 0.5px 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
|
|
--shadow-elevated: 0 2px 8px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.08);
|
|
--shadow-segment: 0 1px 3px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.06);
|
|
|
|
--radius-card: 10px;
|
|
--radius-control: 6px;
|
|
--radius-sidebar-item: 7px;
|
|
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
/* ── Dark-mode tokens ───────────────────────────────────────────── */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-bg-primary: #1c1c1e;
|
|
--color-bg-secondary: #2c2c2e;
|
|
--color-bg-tertiary: #3a3a3c;
|
|
--color-bg-elevated: #2c2c2e;
|
|
--color-bg-sidebar: rgba(44, 44, 46, 0.8);
|
|
--color-sidebar-selected: rgba(255, 255, 255, 0.08);
|
|
--color-sidebar-hover: rgba(255, 255, 255, 0.05);
|
|
|
|
--color-text-primary: #f5f5f7;
|
|
--color-text-secondary: #98989d;
|
|
--color-text-tertiary: #6e6e73;
|
|
--color-text-quaternary: #48484a;
|
|
|
|
--color-separator: rgba(255, 255, 255, 0.08);
|
|
--color-separator-heavy: rgba(255, 255, 255, 0.15);
|
|
|
|
--color-status-green: #30d158;
|
|
--color-status-green-bg: rgba(48, 209, 88, 0.15);
|
|
--color-status-yellow: #ffd60a;
|
|
--color-status-yellow-bg: rgba(255, 214, 10, 0.15);
|
|
--color-status-red: #ff453a;
|
|
--color-status-red-bg: rgba(255, 69, 58, 0.15);
|
|
--color-status-gray: #636366;
|
|
--color-status-gray-bg: rgba(99, 99, 102, 0.15);
|
|
|
|
--color-input-bg: rgba(255, 255, 255, 0.05);
|
|
--color-input-border: rgba(255, 255, 255, 0.1);
|
|
|
|
--color-control-bg: rgba(118, 118, 128, 0.24);
|
|
|
|
--shadow-card: 0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
|
|
--shadow-elevated: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
|
|
--shadow-segment: 0 1px 3px rgba(0,0,0,0.3), 0 0.5px 1px rgba(0,0,0,0.2);
|
|
}
|
|
}
|
|
|
|
/* Manual toggle for WebKitGTK fallback */
|
|
[data-theme="dark"] {
|
|
--color-bg-primary: #1c1c1e;
|
|
--color-bg-secondary: #2c2c2e;
|
|
--color-bg-tertiary: #3a3a3c;
|
|
--color-bg-elevated: #2c2c2e;
|
|
--color-bg-sidebar: rgba(44, 44, 46, 0.8);
|
|
--color-sidebar-selected: rgba(255, 255, 255, 0.08);
|
|
--color-sidebar-hover: rgba(255, 255, 255, 0.05);
|
|
|
|
--color-text-primary: #f5f5f7;
|
|
--color-text-secondary: #98989d;
|
|
--color-text-tertiary: #6e6e73;
|
|
--color-text-quaternary: #48484a;
|
|
|
|
--color-separator: rgba(255, 255, 255, 0.08);
|
|
--color-separator-heavy: rgba(255, 255, 255, 0.15);
|
|
|
|
--color-status-green: #30d158;
|
|
--color-status-green-bg: rgba(48, 209, 88, 0.15);
|
|
--color-status-yellow: #ffd60a;
|
|
--color-status-yellow-bg: rgba(255, 214, 10, 0.15);
|
|
--color-status-red: #ff453a;
|
|
--color-status-red-bg: rgba(255, 69, 58, 0.15);
|
|
--color-status-gray: #636366;
|
|
--color-status-gray-bg: rgba(99, 99, 102, 0.15);
|
|
|
|
--color-input-bg: rgba(255, 255, 255, 0.05);
|
|
--color-input-border: rgba(255, 255, 255, 0.1);
|
|
|
|
--color-control-bg: rgba(118, 118, 128, 0.24);
|
|
|
|
--shadow-card: 0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
|
|
--shadow-elevated: 0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
|
|
--shadow-segment: 0 1px 3px rgba(0,0,0,0.3), 0 0.5px 1px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
@theme {
|
|
--color-netbird-50: #fff6ed;
|
|
--color-netbird-100: #feecd6;
|
|
--color-netbird-150: #ffdfb8;
|
|
--color-netbird-200: #ffd4a6;
|
|
--color-netbird-300: #fab677;
|
|
--color-netbird-400: #f68330;
|
|
--color-netbird-DEFAULT: #f68330;
|
|
--color-netbird-500: #f46d1b;
|
|
--color-netbird-600: #e55311;
|
|
--color-netbird-700: #be3e10;
|
|
--color-netbird-800: #973215;
|
|
--color-netbird-900: #7a2b14;
|
|
--color-netbird-950: #421308;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
|
}
|
|
|
|
/* ── Base ────────────────────────────────────────────────────────── */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
background-color: var(--color-bg-primary);
|
|
color: var(--color-text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── Scrollbar (macOS-like thin) ────────────────────────────────── */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-text-quaternary);
|
|
border-radius: 4px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-text-tertiary);
|
|
background-clip: content-box;
|
|
}
|