Skip to content

Commit 983b6ca

Browse files
matinzdmatinzd
committed
fix: add dark mode for preview panel
1 parent 4728f59 commit 983b6ca

File tree

1 file changed

+110
-42
lines changed

1 file changed

+110
-42
lines changed

‎src/ui/preview-panel.css‎

Lines changed: 110 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,74 @@
11
/* PreviewPanel.css */
22

3+
:root {
4+
/* Light mode colors */
5+
--bg-primary: #f9fafb;
6+
--bg-secondary: #f3f4f6;
7+
--bg-card: #ffffff;
8+
--bg-elevated: #f9fafb;
9+
--bg-overlay: rgba(59, 130, 246, 0.05);
10+
--bg-overlay-secondary: rgba(139, 92, 246, 0.05);
11+
--bg-debug: #111827;
12+
13+
--border-primary: #e5e7eb;
14+
--border-secondary: #f3f4f6;
15+
--border-hover: #93c5fd;
16+
17+
--text-primary: #111827;
18+
--text-secondary: #374151;
19+
--text-tertiary: #6b7280;
20+
--text-muted: #9ca3af;
21+
--text-accent: #2563eb;
22+
--text-debug: #10b981;
23+
24+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
25+
--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
26+
--shadow-focus: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1);
27+
28+
--gradient-bg: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
29+
--gradient-icon: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
30+
--gradient-card: linear-gradient(135deg, white 0%, #f9fafb 100%);
31+
--gradient-preview-icon: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
32+
--gradient-preview-icon-hover: linear-gradient(135deg, #bfdbfe 0%, #c7d2fe 100%);
33+
}
34+
35+
@media (prefers-color-scheme: dark) {
36+
:root {
37+
/* Dark mode colors */
38+
--bg-primary: #0f172a;
39+
--bg-secondary: #1e293b;
40+
--bg-card: #1e293b;
41+
--bg-elevated: #334155;
42+
--bg-overlay: rgba(59, 130, 246, 0.1);
43+
--bg-overlay-secondary: rgba(139, 92, 246, 0.1);
44+
--bg-debug: #0f172a;
45+
46+
--border-primary: #334155;
47+
--border-secondary: #475569;
48+
--border-hover: #60a5fa;
49+
50+
--text-primary: #f8fafc;
51+
--text-secondary: #cbd5e1;
52+
--text-tertiary: #94a3b8;
53+
--text-muted: #64748b;
54+
--text-accent: #60a5fa;
55+
--text-debug: #34d399;
56+
57+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
58+
--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.4);
59+
--shadow-focus: 0 0 0 2px #60a5fa, 0 0 0 4px rgba(96, 165, 250, 0.2);
60+
61+
--gradient-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
62+
--gradient-icon: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
63+
--gradient-card: linear-gradient(135deg, #1e293b 0%, #334155 100%);
64+
--gradient-preview-icon: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
65+
--gradient-preview-icon-hover: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
66+
}
67+
}
68+
369
.preview-panel {
470
min-height: 100vh;
5-
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
71+
background: var(--gradient-bg);
672
padding: 24px;
773
}
874

@@ -13,10 +79,10 @@
1379

1480
/* Header Section */
1581
.header-card {
16-
background: white;
82+
background: var(--bg-card);
1783
border-radius: 16px;
18-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
19-
border: 1px solid #e5e7eb;
84+
box-shadow: var(--shadow-sm);
85+
border: 1px solid var(--border-primary);
2086
padding: 32px;
2187
margin-bottom: 32px;
2288
}
@@ -31,23 +97,24 @@
3197
.header-icon {
3298
width: 48px;
3399
height: 48px;
34-
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
100+
background: var(--gradient-icon);
35101
border-radius: 12px;
36102
display: flex;
37103
align-items: center;
38104
justify-content: center;
39105
font-size: 20px;
106+
color: white;
40107
}
41108

42109
.header-text h1 {
43110
font-size: 30px;
44111
font-weight: 700;
45-
color: #111827;
112+
color: var(--text-primary);
46113
margin: 0 0 4px 0;
47114
}
48115

49116
.header-text p {
50-
color: #6b7280;
117+
color: var(--text-tertiary);
51118
margin: 0;
52119
}
53120

@@ -56,9 +123,9 @@
56123
align-items: center;
57124
gap: 12px;
58125
padding: 16px;
59-
background: #f9fafb;
126+
background: var(--bg-elevated);
60127
border-radius: 12px;
61-
border: 1px solid #e5e7eb;
128+
border: 1px solid var(--border-primary);
62129
}
63130

64131
.status-icon {
@@ -68,7 +135,7 @@
68135
.status-text {
69136
font-size: 14px;
70137
font-weight: 500;
71-
color: #374151;
138+
color: var(--text-secondary);
72139
}
73140

74141
.status-value {
@@ -79,20 +146,20 @@
79146
.status-loading { color: #3b82f6; }
80147
.status-error { color: #ef4444; }
81148
.status-success { color: #10b981; }
82-
.status-default { color: #6b7280; }
149+
.status-default { color: var(--text-tertiary); }
83150

84151
/* Previews Section */
85152
.previews-card {
86-
background: white;
153+
background: var(--bg-card);
87154
border-radius: 16px;
88-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
89-
border: 1px solid #e5e7eb;
155+
box-shadow: var(--shadow-sm);
156+
border: 1px solid var(--border-primary);
90157
overflow: hidden;
91158
}
92159

93160
.previews-header {
94161
padding: 24px;
95-
border-bottom: 1px solid #f3f4f6;
162+
border-bottom: 1px solid var(--border-secondary);
96163
display: flex;
97164
align-items: center;
98165
justify-content: space-between;
@@ -101,7 +168,7 @@
101168
.previews-title {
102169
font-size: 20px;
103170
font-weight: 600;
104-
color: #111827;
171+
color: var(--text-primary);
105172
margin: 0;
106173
}
107174

@@ -110,7 +177,7 @@
110177
align-items: center;
111178
gap: 8px;
112179
padding: 4px 12px;
113-
background: #eff6ff;
180+
background: rgba(59, 130, 246, 0.1);
114181
border-radius: 9999px;
115182
}
116183

@@ -124,7 +191,7 @@
124191
.count-text {
125192
font-size: 14px;
126193
font-weight: 500;
127-
color: #1d4ed8;
194+
color: var(--text-accent);
128195
}
129196

130197
.previews-content {
@@ -140,25 +207,25 @@
140207
.empty-icon {
141208
width: 64px;
142209
height: 64px;
143-
background: #f3f4f6;
210+
background: var(--bg-elevated);
144211
border-radius: 50%;
145212
display: flex;
146213
align-items: center;
147214
justify-content: center;
148215
margin: 0 auto 16px;
149216
font-size: 32px;
150-
color: #9ca3af;
217+
color: var(--text-muted);
151218
}
152219

153220
.empty-title {
154221
font-size: 18px;
155222
font-weight: 500;
156-
color: #111827;
223+
color: var(--text-primary);
157224
margin: 0 0 8px 0;
158225
}
159226

160227
.empty-description {
161-
color: #6b7280;
228+
color: var(--text-tertiary);
162229
margin: 0;
163230
}
164231

@@ -185,8 +252,8 @@
185252
.preview-card {
186253
position: relative;
187254
padding: 24px;
188-
background: linear-gradient(135deg, white 0%, #f9fafb 100%);
189-
border: 1px solid #e5e7eb;
255+
background: var(--gradient-card);
256+
border: 1px solid var(--border-primary);
190257
border-radius: 12px;
191258
text-align: left;
192259
cursor: pointer;
@@ -195,14 +262,14 @@
195262
}
196263

197264
.preview-card:hover {
198-
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
199-
border-color: #93c5fd;
265+
box-shadow: var(--shadow-lg);
266+
border-color: var(--border-hover);
200267
transform: translateY(-1px);
201268
}
202269

203270
.preview-card:focus {
204271
outline: none;
205-
box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1);
272+
box-shadow: var(--shadow-focus);
206273
}
207274

208275
.preview-card-header {
@@ -215,18 +282,18 @@
215282
.preview-icon {
216283
width: 40px;
217284
height: 40px;
218-
background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
285+
background: var(--gradient-preview-icon);
219286
border-radius: 8px;
220287
display: flex;
221288
align-items: center;
222289
justify-content: center;
223-
color: #2563eb;
290+
color: var(--text-accent);
224291
font-weight: 700;
225292
transition: all 0.2s ease;
226293
}
227294

228295
.preview-card:hover .preview-icon {
229-
background: linear-gradient(135deg, #bfdbfe 0%, #c7d2fe 100%);
296+
background: var(--gradient-preview-icon-hover);
230297
}
231298

232299
.preview-name {
@@ -236,7 +303,7 @@
236303

237304
.preview-title {
238305
font-weight: 600;
239-
color: #111827;
306+
color: var(--text-primary);
240307
margin: 0;
241308
white-space: nowrap;
242309
overflow: hidden;
@@ -245,7 +312,7 @@
245312
}
246313

247314
.preview-card:hover .preview-title {
248-
color: #2563eb;
315+
color: var(--text-accent);
249316
}
250317

251318
.preview-arrow {
@@ -260,14 +327,14 @@
260327

261328
.preview-description {
262329
font-size: 14px;
263-
color: #6b7280;
330+
color: var(--text-tertiary);
264331
margin: 0;
265332
}
266333

267334
.preview-overlay {
268335
position: absolute;
269336
inset: 0;
270-
background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
337+
background: linear-gradient(90deg, var(--bg-overlay) 0%, var(--bg-overlay-secondary) 100%);
271338
border-radius: 12px;
272339
opacity: 0;
273340
transition: opacity 0.2s ease;
@@ -286,28 +353,28 @@
286353
.debug-summary {
287354
cursor: pointer;
288355
padding: 16px;
289-
background: white;
356+
background: var(--bg-card);
290357
border-radius: 12px;
291-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
292-
border: 1px solid #e5e7eb;
358+
box-shadow: var(--shadow-sm);
359+
border: 1px solid var(--border-primary);
293360
transition: background-color 0.2s ease;
294361
display: flex;
295362
align-items: center;
296363
justify-content: space-between;
297364
}
298365

299366
.debug-summary:hover {
300-
background: #f9fafb;
367+
background: var(--bg-elevated);
301368
}
302369

303370
.debug-title {
304371
font-weight: 500;
305-
color: #374151;
372+
color: var(--text-secondary);
306373
margin: 0;
307374
}
308375

309376
.debug-arrow {
310-
color: #9ca3af;
377+
color: var(--text-muted);
311378
transition: transform 0.2s ease;
312379
font-size: 12px;
313380
}
@@ -319,13 +386,14 @@
319386
.debug-content {
320387
margin-top: 8px;
321388
padding: 16px;
322-
background: #111827;
389+
background: var(--bg-debug);
323390
border-radius: 12px;
324391
overflow: auto;
392+
border: 1px solid var(--border-primary);
325393
}
326394

327395
.debug-pre {
328-
color: #10b981;
396+
color: var(--text-debug);
329397
font-size: 14px;
330398
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
331399
white-space: pre-wrap;

0 commit comments

Comments
 (0)