layout.css
1@import 'tailwindcss';
2
3/* Theme design tokens */
4:root,
5[data-theme="dark"] {
6 --t-surface: #18181b;
7 --t-panel: #27272a;
8 --t-hover: #3f3f46;
9 --t-active: #52525b;
10 --t-text: #e4e4e7;
11 --t-text-2: #d4d4d8;
12 --t-text-3: #a1a1aa;
13 --t-text-muted: #71717a;
14 --t-text-faint: #52525b;
15 --t-border: #3f3f46;
16 --t-border-strong: #52525b;
17 --t-accent-green: #4ade80;
18 --t-accent-red: #f87171;
19 --t-accent-blue: #60a5fa;
20 --t-accent-yellow: #facc15;
21 --t-diff-add: rgba(5, 46, 22, 0.4);
22 --t-diff-del: rgba(69, 10, 10, 0.4);
23 --t-scrollbar: #52525b;
24 --t-scrollbar-hover: #71717a;
25 --t-terminal-bg: #1e1e1e;
26}
27
28[data-theme="light"] {
29 --t-surface: #ffffff;
30 --t-panel: #f4f4f5;
31 --t-hover: #e4e4e7;
32 --t-active: #d4d4d8;
33 --t-text: #18181b;
34 --t-text-2: #27272a;
35 --t-text-3: #52525b;
36 --t-text-muted: #71717a;
37 --t-text-faint: #a1a1aa;
38 --t-border: #e4e4e7;
39 --t-border-strong: #d4d4d8;
40 --t-accent-green: #16a34a;
41 --t-accent-red: #dc2626;
42 --t-accent-blue: #2563eb;
43 --t-accent-yellow: #ca8a04;
44 --t-diff-add: #dcfce7;
45 --t-diff-del: #fee2e2;
46 --t-scrollbar: #d4d4d8;
47 --t-scrollbar-hover: #a1a1aa;
48 --t-terminal-bg: #f8f8f8;
49}
50
51@theme {
52 --color-surface: var(--t-surface);
53 --color-panel: var(--t-panel);
54 --color-hover: var(--t-hover);
55 --color-active: var(--t-active);
56 --color-primary: var(--t-text);
57 --color-secondary: var(--t-text-2);
58 --color-tertiary: var(--t-text-3);
59 --color-muted: var(--t-text-muted);
60 --color-faint: var(--t-text-faint);
61 --color-border: var(--t-border);
62 --color-border-strong: var(--t-border-strong);
63 --color-accent-green: var(--t-accent-green);
64 --color-accent-red: var(--t-accent-red);
65 --color-accent-blue: var(--t-accent-blue);
66 --color-accent-yellow: var(--t-accent-yellow);
67 --color-diff-add: var(--t-diff-add);
68 --color-diff-del: var(--t-diff-del);
69 --color-terminal: var(--t-terminal-bg);
70}
71
72html, body {
73 margin: 0;
74 padding: 0;
75 height: 100%;
76 overflow: hidden;
77}
78
79/* Scrollbar styling */
80::-webkit-scrollbar {
81 width: 8px;
82 height: 8px;
83}
84
85::-webkit-scrollbar-track {
86 background: transparent;
87}
88
89::-webkit-scrollbar-thumb {
90 background: var(--t-scrollbar);
91 border-radius: 4px;
92}
93
94::-webkit-scrollbar-thumb:hover {
95 background: var(--t-scrollbar-hover);
96}
97
98/* Syntax highlighting dual theme */
99.st { color: var(--sd); }
100[data-theme="light"] .st { color: var(--sl); }
