/* AUTO-GENERATED from shared/theme-dark.css — edit there, run: node scripts/sync-theme.js */ /* ============================================================ * BM Manager — Linear.app inspired DARK theme * Canonical source — DO NOT EDIT COPIES. * Edit at: shared/theme-dark.css * Sync to projects with: node scripts/sync-theme.js * ============================================================ */ /* Trigger selectors: * - web app: * - extension + admin: */ html.dark, html[data-theme="dark"], [data-theme="dark"] { /* ---- Background ---- */ --bg-primary: #08090a; --bg-secondary: #0e0f11; --bg-tertiary: #131316; --bg-sidebar: #0e0f11; --bg-hover: rgba(255,255,255,0.03); --bg-active: rgba(255,255,255,0.05); --bg-card: #131316; --bg-input: rgba(255,255,255,0.04); --bg-badge: rgba(255,255,255,0.06); --bg-tooltip: #1f2937; --bg-modal-overlay: rgba(0,0,0,0.55); /* ---- Text ---- */ --text-primary: #eeeeee; --text-secondary: #8a8a8e; --text-tertiary: #5c5c60; --text-placeholder: #5c5c60; --text-inverse: #1a1a1a; --text-link: #8b8ef8; /* ---- Border ---- */ --border-primary: rgba(255,255,255,0.06); --border-secondary: rgba(255,255,255,0.04); --border-input: rgba(255,255,255,0.08); --border-focus: #5e6ad2; /* ---- Accent (Linear violet) ---- */ --accent: #5e6ad2; --accent-hover: #4f5bc0; --accent-light: rgba(94,106,210,0.12); --accent-text: #8b8ef8; /* ---- Status ---- */ --success: #22c55e; --success-light: rgba(34,197,94,0.12); --error: #ef4444; --error-light: rgba(239,68,68,0.12); --warning: #f59e0b; --warning-light: rgba(245,158,11,0.12); --info: #60a5fa; --info-light: rgba(96,165,250,0.12); /* ---- Shadow (dark: rất nhẹ, gần như không có) ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 2px 8px rgba(0,0,0,0.40); --shadow-lg: 0 4px 16px rgba(0,0,0,0.50); --shadow-card: 0 0 0 1px rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.30); /* ---- Scrollbar ---- */ --scrollbar-thumb: rgba(255,255,255,0.10); --scrollbar-hover: rgba(255,255,255,0.18); /* ---- Motion ---- */ --transition: 0.1s ease; /* ---- Typography ---- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: dark; } /* ============================================================ * GLOBAL ELEMENT OVERRIDES (dark mode only) * ============================================================ */ html.dark body, html[data-theme="dark"] body, [data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.dark ::-webkit-scrollbar, html[data-theme="dark"] ::-webkit-scrollbar, [data-theme="dark"] ::-webkit-scrollbar { width: 4px; height: 4px; } html.dark ::-webkit-scrollbar-thumb, html[data-theme="dark"] ::-webkit-scrollbar-thumb, [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } html.dark ::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover, [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } html.dark ::-webkit-scrollbar-track, html[data-theme="dark"] ::-webkit-scrollbar-track, [data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } /* ============================================================ * WEB APP — Tailwind compat overrides (dark only) * Web dùng palette `ink-*` từ tailwind config — override để map Linear. * ============================================================ */ html.dark .dark\:bg-ink-900 { background-color: var(--bg-primary) !important; } html.dark .dark\:bg-ink-800 { background-color: var(--bg-sidebar) !important; } html.dark .dark\:bg-ink-700 { background-color: var(--bg-card) !important; } html.dark .dark\:bg-ink-700\/50 { background-color: rgba(19,19,22,0.50) !important; } html.dark .dark\:bg-ink-700\/40 { background-color: rgba(19,19,22,0.40) !important; } html.dark .dark\:bg-ink-700\/60 { background-color: rgba(19,19,22,0.60) !important; } html.dark .dark\:bg-ink-600 { background-color: var(--bg-active) !important; } html.dark .dark\:bg-ink-800\/30 { background-color: rgba(14,15,17,0.50) !important; } html.dark .dark\:hover\:bg-ink-600:hover, html.dark .dark\:hover\:bg-ink-700:hover, html.dark .dark\:hover\:bg-ink-700\/50:hover, html.dark .dark\:hover\:bg-ink-700\/40:hover { background-color: var(--bg-hover) !important; } html.dark .dark\:border-ink-700, html.dark .dark\:border-ink-700\/80, html.dark .dark\:border-ink-600, html.dark .dark\:border-ink-600\/40, html.dark .dark\:border-ink-600\/50, html.dark .dark\:border-ink-700\/60 { border-color: var(--border-primary) !important; } html.dark .dark\:border-ink-600\/80, html.dark .dark\:border-ink-500 { border-color: var(--border-input) !important; } html.dark .dark\:text-ink-50, html.dark .dark\:text-white { color: var(--text-primary) !important; } html.dark .dark\:text-ink-100, html.dark .dark\:text-ink-200, html.dark .dark\:text-ink-300 { color: var(--text-primary) !important; } html.dark .dark\:text-ink-400, html.dark .dark\:text-ink-500 { color: var(--text-secondary) !important; } html.dark .dark\:text-ink-600, html.dark .dark\:text-ink-500\/70 { color: var(--text-tertiary) !important; } html.dark .dark\:text-brand-400, html.dark .dark\:text-brand-500, html.dark .dark\:text-brand-600 { color: var(--accent-text) !important; } html.dark .dark\:bg-brand-500\/22 { background-color: var(--accent-light) !important; } html.dark .dark\:bg-brand-500\/45 { background-color: var(--accent-light) !important; } html.dark .dark\:bg-ink-50, html.dark .dark\:bg-ink-100 { background-color: var(--bg-primary) !important; } html.dark .sidebar-bg { background: var(--bg-sidebar) !important; background-image: none !important; border-right: 1px solid var(--border-primary) !important; } /* ============================================================ * LINEAR REFINEMENT — kill colorful gradients trong dark mode * Sidebar icons mono, action buttons flat, card icons rgba nhẹ. * ============================================================ */ /* ---- Sidebar: icons → mono (no gradient), active row → violet ---- */ html.dark .sidebar-bg [class*="bg-gradient-to-br"] { background-image: none !important; background-color: transparent !important; box-shadow: none !important; color: var(--text-secondary) !important; } html.dark .sidebar-bg a:hover { background: var(--bg-hover) !important; } html.dark .sidebar-bg a[aria-current="page"] { background: var(--accent-light) !important; } html.dark .sidebar-bg a[aria-current="page"], html.dark .sidebar-bg a[aria-current="page"] [class*="bg-gradient-to-br"], html.dark .sidebar-bg a[aria-current="page"] i, html.dark .sidebar-bg a[aria-current="page"] span { color: var(--accent-text) !important; } /* Section label */ html.dark .sidebar-bg p[class*="text-ink-"] { color: var(--text-tertiary) !important; } /* ---- "Truy cập ứng dụng" + brand gradient CTA → flat violet ---- */ html.dark .bg-gradient-to-r.from-brand-500, html.dark .bg-gradient-to-r.from-brand-500.to-brand-700, html.dark .bg-gradient-to-r.from-brand-500.to-brand-600 { background-image: none !important; background-color: rgba(94,106,210,0.10) !important; color: var(--accent-text) !important; border: 1px solid rgba(94,106,210,0.12) !important; box-shadow: none !important; } html.dark .bg-gradient-to-r.from-brand-500:hover, html.dark .bg-gradient-to-r.from-brand-500.to-brand-700:hover, html.dark .bg-gradient-to-r.from-brand-500.to-brand-600:hover { background-color: rgba(94,106,210,0.20) !important; } /* ---- Action button row (Cài đặt / Nạp tiền / ...) → flat rgba, mỗi icon giữ màu riêng ---- */ html.dark main [class*="bg-gradient-to-br"]:not(.sidebar-bg [class*="bg-gradient-to-br"]) { background-image: none !important; box-shadow: none !important; } /* Per-tone subtle bg (10-15%) + icon mono color sáng */ html.dark main .from-indigo-500 { background-color: rgba(99,102,241,0.12) !important; color: #a5b4fc !important; } html.dark main .from-blue-500 { background-color: rgba(59,130,246,0.12) !important; color: #93c5fd !important; } html.dark main .from-sky-500 { background-color: rgba(14,165,233,0.12) !important; color: #7dd3fc !important; } html.dark main .from-cyan-500 { background-color: rgba(6,182,212,0.12) !important; color: #67e8f9 !important; } html.dark main .from-emerald-500 { background-color: rgba(16,185,129,0.12) !important; color: #6ee7b7 !important; } html.dark main .from-green-500 { background-color: rgba(34,197,94,0.12) !important; color: #86efac !important; } html.dark main .from-violet-500 { background-color: rgba(139,92,246,0.12) !important; color: #c4b5fd !important; } html.dark main .from-purple-500 { background-color: rgba(168,85,247,0.12) !important; color: #d8b4fe !important; } html.dark main .from-fuchsia-500 { background-color: rgba(217,70,239,0.12) !important; color: #f0abfc !important; } html.dark main .from-pink-500 { background-color: rgba(236,72,153,0.12) !important; color: #f9a8d4 !important; } html.dark main .from-rose-500 { background-color: rgba(244,63,94,0.12) !important; color: #fda4af !important; } html.dark main .from-orange-500 { background-color: rgba(249,115,22,0.12) !important; color: #fdba74 !important; } html.dark main .from-amber-500 { background-color: rgba(245,158,11,0.12) !important; color: #fcd34d !important; } html.dark main [class*="bg-gradient-to-br"] { text-shadow: none !important; }