openclacky 0.8.2 → 0.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +34 -0
- data/lib/clacky/agent/session_serializer.rb +31 -0
- data/lib/clacky/agent/skill_manager.rb +59 -0
- data/lib/clacky/agent.rb +7 -2
- data/lib/clacky/agent_config.rb +10 -0
- data/lib/clacky/brand_config.rb +111 -24
- data/lib/clacky/cli.rb +1 -1
- data/lib/clacky/default_skills/onboard/SKILL.md +2 -2
- data/lib/clacky/server/http_server.rb +7 -4
- data/lib/clacky/skill_loader.rb +22 -18
- data/lib/clacky/ui2/layout_manager.rb +5 -0
- data/lib/clacky/ui2/screen_buffer.rb +24 -7
- data/lib/clacky/ui2/ui_controller.rb +56 -19
- data/lib/clacky/version.rb +1 -1
- data/lib/clacky/web/app.css +947 -337
- data/lib/clacky/web/app.js +30 -11
- data/lib/clacky/web/index.html +108 -30
- data/lib/clacky/web/onboard.js +92 -16
- data/lib/clacky/web/sessions.js +78 -3
- data/lib/clacky/web/settings.js +179 -26
- data/lib/clacky/web/skills.js +7 -3
- data/lib/clacky/web/tasks.js +34 -8
- data/lib/clacky/web/theme.js +67 -0
- metadata +16 -1
data/lib/clacky/web/app.css
CHANGED
|
@@ -1,87 +1,361 @@
|
|
|
1
|
+
/* ── CSS Variables for Theme System ─────────────────────────────────────── */
|
|
2
|
+
:root {
|
|
3
|
+
/* Dark theme (default) */
|
|
4
|
+
--color-bg-primary: #0b1020;
|
|
5
|
+
--color-bg-secondary: #141a2b;
|
|
6
|
+
--color-bg-tertiary: #1a2235;
|
|
7
|
+
--color-bg-hover: #1f2a44;
|
|
8
|
+
--color-bg-input: #141a2b;
|
|
9
|
+
--color-bg-card: #141a2b;
|
|
10
|
+
|
|
11
|
+
--color-border-primary: #1f2a44;
|
|
12
|
+
--color-border-secondary: #1f2a44;
|
|
13
|
+
|
|
14
|
+
--color-text-primary: #e5e7eb;
|
|
15
|
+
--color-text-secondary: #a3a9b8;
|
|
16
|
+
--color-text-tertiary: #7e8594;
|
|
17
|
+
--color-text-muted: #5c6270;
|
|
18
|
+
|
|
19
|
+
--color-accent-primary: #60a5fa;
|
|
20
|
+
--color-accent-hover: #3d8bd8;
|
|
21
|
+
|
|
22
|
+
--color-success: #34d399;
|
|
23
|
+
--color-success-bg: #0f2922;
|
|
24
|
+
--color-success-border: #1a4033;
|
|
25
|
+
|
|
26
|
+
--color-error: #f87171;
|
|
27
|
+
--color-error-bg: #2d1818;
|
|
28
|
+
--color-error-border: #4d2020;
|
|
29
|
+
|
|
30
|
+
--color-warning: #f59e0b;
|
|
31
|
+
--color-warning-bg: #2d1f00;
|
|
32
|
+
--color-warning-border: #4d3200;
|
|
33
|
+
|
|
34
|
+
--color-button-primary: #60a5fa;
|
|
35
|
+
--color-button-primary-hover: #3d8bd8;
|
|
36
|
+
|
|
37
|
+
--color-info: #38bdf8;
|
|
38
|
+
--color-secondary: #34d399;
|
|
39
|
+
--color-accent-alt: #f472b6;
|
|
40
|
+
|
|
41
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
42
|
+
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
43
|
+
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Light theme */
|
|
47
|
+
[data-theme="light"] {
|
|
48
|
+
--color-bg-primary: #f7f9fc;
|
|
49
|
+
--color-bg-secondary: #ffffff;
|
|
50
|
+
--color-bg-tertiary: #f0f3f6;
|
|
51
|
+
--color-bg-hover: #e8ecef;
|
|
52
|
+
--color-bg-input: #ffffff;
|
|
53
|
+
--color-bg-card: #ffffff;
|
|
54
|
+
|
|
55
|
+
--color-border-primary: #e5e7eb;
|
|
56
|
+
--color-border-secondary: #eaecef;
|
|
57
|
+
|
|
58
|
+
--color-text-primary: #1f2937;
|
|
59
|
+
--color-text-secondary: #4b5563;
|
|
60
|
+
--color-text-tertiary: #6b7280;
|
|
61
|
+
--color-text-muted: #9ca3af;
|
|
62
|
+
|
|
63
|
+
--color-accent-primary: #3b82f6;
|
|
64
|
+
--color-accent-hover: #2563eb;
|
|
65
|
+
|
|
66
|
+
--color-success: #10b981;
|
|
67
|
+
--color-success-bg: #d1fae5;
|
|
68
|
+
--color-success-border: #6ee7b7;
|
|
69
|
+
|
|
70
|
+
--color-error: #ef4444;
|
|
71
|
+
--color-error-bg: #fee2e2;
|
|
72
|
+
--color-error-border: #fca5a5;
|
|
73
|
+
|
|
74
|
+
--color-warning: #f59e0b;
|
|
75
|
+
--color-warning-bg: #fef3c7;
|
|
76
|
+
--color-warning-border: #fcd34d;
|
|
77
|
+
|
|
78
|
+
--color-button-primary: #3b82f6;
|
|
79
|
+
--color-button-primary-hover: #2563eb;
|
|
80
|
+
|
|
81
|
+
--color-info: #38bdf8;
|
|
82
|
+
--color-secondary: #10b981;
|
|
83
|
+
--color-accent-alt: #f59e0b;
|
|
84
|
+
|
|
85
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
86
|
+
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
|
|
87
|
+
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
88
|
+
}
|
|
89
|
+
|
|
1
90
|
/* ── Reset & Base ────────────────────────────────────────────────────────── */
|
|
2
91
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
3
92
|
body {
|
|
4
93
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
5
|
-
background:
|
|
6
|
-
color:
|
|
94
|
+
background: var(--color-bg-primary);
|
|
95
|
+
color: var(--color-text-primary);
|
|
7
96
|
height: 100vh;
|
|
8
97
|
display: flex;
|
|
9
98
|
overflow: hidden;
|
|
99
|
+
transition: background-color 0.3s ease, color 0.3s ease;
|
|
100
|
+
}
|
|
101
|
+
#app { display: flex; flex-direction: column; width: 100%; height: 100vh; }
|
|
102
|
+
|
|
103
|
+
/* ── Content Row (Sidebar + Main) ───────────────────────────────────────── */
|
|
104
|
+
#content-row {
|
|
105
|
+
display: flex;
|
|
106
|
+
flex: 1;
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* ── Top Header ───────────────────────────────────────────────────────── */
|
|
111
|
+
#top-header {
|
|
112
|
+
height: 60px;
|
|
113
|
+
min-height: 60px;
|
|
114
|
+
background: var(--color-bg-secondary);
|
|
115
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: space-between;
|
|
119
|
+
padding: 0 24px;
|
|
120
|
+
transition: background-color 0.3s ease;
|
|
121
|
+
flex-shrink: 0;
|
|
122
|
+
}
|
|
123
|
+
#header-left {
|
|
124
|
+
display: flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
gap: 12px;
|
|
127
|
+
}
|
|
128
|
+
.sidebar-toggle-btn {
|
|
129
|
+
width: 36px;
|
|
130
|
+
height: 36px;
|
|
131
|
+
border: none;
|
|
132
|
+
border-radius: 8px;
|
|
133
|
+
background: transparent;
|
|
134
|
+
color: var(--color-text-secondary);
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
justify-content: center;
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
|
|
140
|
+
}
|
|
141
|
+
.sidebar-toggle-btn:hover {
|
|
142
|
+
background: var(--color-bg-hover);
|
|
143
|
+
color: var(--color-accent-primary);
|
|
144
|
+
transform: scale(1.05);
|
|
145
|
+
}
|
|
146
|
+
.sidebar-toggle-btn:active {
|
|
147
|
+
transform: scale(0.95);
|
|
148
|
+
}
|
|
149
|
+
.header-logo {
|
|
150
|
+
font-weight: 700;
|
|
151
|
+
font-size: 18px;
|
|
152
|
+
color: var(--color-accent-primary);
|
|
153
|
+
letter-spacing: -0.5px;
|
|
154
|
+
}
|
|
155
|
+
#header-right {
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
gap: 12px;
|
|
159
|
+
}
|
|
160
|
+
.theme-toggle-btn {
|
|
161
|
+
width: 36px;
|
|
162
|
+
height: 36px;
|
|
163
|
+
border: none;
|
|
164
|
+
border-radius: 8px;
|
|
165
|
+
background: var(--color-bg-tertiary);
|
|
166
|
+
color: var(--color-text-secondary);
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
justify-content: center;
|
|
170
|
+
cursor: pointer;
|
|
171
|
+
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
|
|
172
|
+
}
|
|
173
|
+
.theme-toggle-btn:hover {
|
|
174
|
+
background: var(--color-bg-hover);
|
|
175
|
+
color: var(--color-accent-primary);
|
|
176
|
+
transform: scale(1.05);
|
|
177
|
+
}
|
|
178
|
+
.theme-toggle-btn:active {
|
|
179
|
+
transform: scale(0.95);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* ── Content Row (Sidebar + Main) ───────────────────────────────────────── */
|
|
183
|
+
#app > aside,
|
|
184
|
+
#app > main {
|
|
185
|
+
flex-shrink: 0;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* ── Icon Styles ─────────────────────────────────────────────────────────── */
|
|
189
|
+
.icon-sm {
|
|
190
|
+
width: 16px;
|
|
191
|
+
height: 16px;
|
|
192
|
+
stroke-width: 2;
|
|
193
|
+
}
|
|
194
|
+
.icon-md {
|
|
195
|
+
width: 20px;
|
|
196
|
+
height: 20px;
|
|
197
|
+
stroke-width: 2;
|
|
198
|
+
}
|
|
199
|
+
.icon-lg {
|
|
200
|
+
width: 24px;
|
|
201
|
+
height: 24px;
|
|
202
|
+
stroke-width: 2;
|
|
10
203
|
}
|
|
11
|
-
#app { display: flex; width: 100%; height: 100vh; }
|
|
12
204
|
|
|
13
205
|
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
|
|
14
206
|
#sidebar {
|
|
15
207
|
width: 240px;
|
|
16
|
-
min-width:
|
|
17
|
-
background:
|
|
18
|
-
border-right: 1px solid #30363d;
|
|
208
|
+
min-width: 240px;
|
|
209
|
+
background: var(--color-bg-secondary);
|
|
19
210
|
display: flex;
|
|
20
211
|
flex-direction: column;
|
|
212
|
+
transition: margin-left 0.3s ease, background-color 0.3s ease;
|
|
213
|
+
height: 100%;
|
|
214
|
+
flex-shrink: 0;
|
|
215
|
+
margin-left: 0;
|
|
216
|
+
}
|
|
217
|
+
#sidebar.hidden {
|
|
218
|
+
margin-left: -240px;
|
|
21
219
|
}
|
|
22
220
|
#sidebar-header {
|
|
23
221
|
display: flex;
|
|
24
222
|
align-items: center;
|
|
25
223
|
justify-content: space-between;
|
|
26
224
|
padding: 16px 12px;
|
|
27
|
-
border-bottom: 1px solid
|
|
225
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
28
226
|
}
|
|
29
|
-
.logo { font-weight: 700; font-size: 16px; color:
|
|
227
|
+
.logo { font-weight: 700; font-size: 16px; color: var(--color-accent-primary); }
|
|
30
228
|
#btn-new-session {
|
|
31
|
-
background:
|
|
229
|
+
background: var(--color-button-primary);
|
|
32
230
|
color: #fff;
|
|
33
231
|
border: none;
|
|
34
232
|
border-radius: 6px;
|
|
35
|
-
width:
|
|
36
|
-
height:
|
|
37
|
-
|
|
233
|
+
width: 32px;
|
|
234
|
+
height: 32px;
|
|
235
|
+
display: flex;
|
|
236
|
+
align-items: center;
|
|
237
|
+
justify-content: center;
|
|
38
238
|
cursor: pointer;
|
|
39
|
-
|
|
239
|
+
transition: background-color 0.2s ease, transform 0.15s ease;
|
|
240
|
+
}
|
|
241
|
+
#btn-new-session:hover {
|
|
242
|
+
background: var(--color-button-primary-hover);
|
|
243
|
+
transform: scale(1.05);
|
|
244
|
+
}
|
|
245
|
+
#btn-new-session:active {
|
|
246
|
+
transform: scale(0.98);
|
|
40
247
|
}
|
|
41
|
-
#btn-new-session:hover { background: #2ea043; }
|
|
42
248
|
|
|
43
249
|
/* ── Sidebar combined list ───────────────────────────────────────────────── */
|
|
44
|
-
#sidebar-list {
|
|
45
|
-
|
|
250
|
+
#sidebar-list {
|
|
251
|
+
flex: 1;
|
|
252
|
+
overflow-y: auto;
|
|
253
|
+
overflow-x: hidden;
|
|
254
|
+
display: flex;
|
|
255
|
+
flex-direction: column;
|
|
256
|
+
min-height: 0;
|
|
257
|
+
}
|
|
258
|
+
#session-list { padding: 0 8px 8px; }
|
|
46
259
|
|
|
47
|
-
/* ── Sidebar divider
|
|
260
|
+
/* ── Sidebar divider (Section Labels) ───────────────────────────────────── */
|
|
48
261
|
.sidebar-divider {
|
|
49
262
|
display: flex;
|
|
50
263
|
align-items: center;
|
|
264
|
+
justify-content: space-between;
|
|
51
265
|
gap: 8px;
|
|
52
|
-
padding:
|
|
53
|
-
font-size:
|
|
54
|
-
|
|
266
|
+
padding: 12px 16px 6px 16px;
|
|
267
|
+
font-size: 10px;
|
|
268
|
+
font-weight: 600;
|
|
269
|
+
color: var(--color-text-tertiary);
|
|
55
270
|
text-transform: uppercase;
|
|
56
|
-
letter-spacing:
|
|
57
|
-
|
|
58
|
-
|
|
271
|
+
letter-spacing: 1px;
|
|
272
|
+
margin-top: 8px;
|
|
273
|
+
}
|
|
274
|
+
.sidebar-divider:first-child {
|
|
275
|
+
margin-top: 0;
|
|
276
|
+
}
|
|
277
|
+
.sidebar-divider span {
|
|
278
|
+
flex: 1;
|
|
279
|
+
white-space: nowrap;
|
|
280
|
+
}
|
|
281
|
+
/* Inline New Session button in Chat divider */
|
|
282
|
+
.btn-new-inline {
|
|
283
|
+
width: 20px;
|
|
284
|
+
height: 20px;
|
|
285
|
+
border: none;
|
|
286
|
+
border-radius: 4px;
|
|
287
|
+
background: transparent;
|
|
288
|
+
color: var(--color-text-tertiary);
|
|
289
|
+
display: flex;
|
|
290
|
+
align-items: center;
|
|
291
|
+
justify-content: center;
|
|
292
|
+
cursor: pointer;
|
|
293
|
+
padding: 0;
|
|
294
|
+
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
|
|
295
|
+
}
|
|
296
|
+
.btn-new-inline:hover {
|
|
297
|
+
background: var(--color-bg-hover);
|
|
298
|
+
color: var(--color-accent-primary);
|
|
299
|
+
transform: scale(1.1);
|
|
300
|
+
}
|
|
301
|
+
.btn-new-inline:active {
|
|
302
|
+
transform: scale(0.95);
|
|
59
303
|
}
|
|
60
|
-
.sidebar-divider span { white-space: nowrap; }
|
|
61
304
|
|
|
62
305
|
/* ── Session empty placeholder ───────────────────────────────────────────── */
|
|
63
306
|
.session-empty {
|
|
64
307
|
margin: 4px 8px;
|
|
65
308
|
padding: 10px 12px;
|
|
66
309
|
border-radius: 6px;
|
|
67
|
-
border: 1px dashed
|
|
310
|
+
border: 1px dashed var(--color-border-primary);
|
|
68
311
|
font-size: 12px;
|
|
69
|
-
color:
|
|
312
|
+
color: var(--color-text-muted);
|
|
70
313
|
text-align: center;
|
|
71
314
|
}
|
|
72
315
|
|
|
73
316
|
/* ── Session List ────────────────────────────────────────────────────────── */
|
|
74
317
|
.session-item {
|
|
75
318
|
position: relative;
|
|
76
|
-
padding: 10px 12px;
|
|
319
|
+
padding: 10px 12px 10px 15px;
|
|
77
320
|
border-radius: 6px;
|
|
78
321
|
cursor: pointer;
|
|
79
322
|
margin-bottom: 4px;
|
|
80
323
|
border: 1px solid transparent;
|
|
81
|
-
transition: background .
|
|
324
|
+
transition: background .2s ease, border-color .2s ease;
|
|
325
|
+
}
|
|
326
|
+
/* Default: secondary text color for icons/text */
|
|
327
|
+
.session-item .session-name {
|
|
328
|
+
color: var(--color-text-secondary);
|
|
329
|
+
font-weight: 500;
|
|
330
|
+
transition: color .2s ease, font-weight .2s ease;
|
|
331
|
+
}
|
|
332
|
+
/* Hover: subtle background overlay */
|
|
333
|
+
.session-item:hover {
|
|
334
|
+
background: var(--color-bg-hover);
|
|
335
|
+
}
|
|
336
|
+
/* Active: primary color text, bold font, left indicator */
|
|
337
|
+
.session-item.active {
|
|
338
|
+
background: rgba(59, 130, 246, 0.08);
|
|
339
|
+
}
|
|
340
|
+
[data-theme="light"] .session-item.active {
|
|
341
|
+
background: rgba(59, 130, 246, 0.06);
|
|
342
|
+
}
|
|
343
|
+
.session-item.active .session-name {
|
|
344
|
+
color: var(--color-accent-primary);
|
|
345
|
+
font-weight: 700;
|
|
346
|
+
}
|
|
347
|
+
/* Left indicator bar (3px) for active state */
|
|
348
|
+
.session-item.active::before {
|
|
349
|
+
content: '';
|
|
350
|
+
position: absolute;
|
|
351
|
+
left: 0;
|
|
352
|
+
top: 50%;
|
|
353
|
+
transform: translateY(-50%);
|
|
354
|
+
width: 3px;
|
|
355
|
+
height: 60%;
|
|
356
|
+
background: var(--color-accent-primary);
|
|
357
|
+
border-radius: 0 2px 2px 0;
|
|
82
358
|
}
|
|
83
|
-
.session-item:hover { background: #1f2937; }
|
|
84
|
-
.session-item.active { background: #1f2937; border-color: #30363d; }
|
|
85
359
|
|
|
86
360
|
/* Delete button on session list items — visible only on hover */
|
|
87
361
|
.session-delete-btn {
|
|
@@ -97,7 +371,7 @@ body {
|
|
|
97
371
|
background: transparent;
|
|
98
372
|
border: none;
|
|
99
373
|
border-radius: 4px;
|
|
100
|
-
color:
|
|
374
|
+
color: var(--color-text-secondary);
|
|
101
375
|
font-size: 16px;
|
|
102
376
|
line-height: 1;
|
|
103
377
|
cursor: pointer;
|
|
@@ -105,15 +379,14 @@ body {
|
|
|
105
379
|
transition: background .15s, color .15s;
|
|
106
380
|
}
|
|
107
381
|
.session-item:hover .session-delete-btn { display: flex; }
|
|
108
|
-
.session-delete-btn:hover { background:
|
|
382
|
+
.session-delete-btn:hover { background: var(--color-error-bg); color: var(--color-error); }
|
|
109
383
|
.session-name {
|
|
110
384
|
font-size: 13px;
|
|
111
|
-
font-weight: 600;
|
|
112
385
|
white-space: nowrap;
|
|
113
386
|
overflow: hidden;
|
|
114
387
|
text-overflow: ellipsis;
|
|
115
388
|
}
|
|
116
|
-
.session-meta { font-size: 11px; color:
|
|
389
|
+
.session-meta { font-size: 11px; color: var(--color-text-secondary); margin-top: 3px; }
|
|
117
390
|
.session-dot {
|
|
118
391
|
display: inline-block;
|
|
119
392
|
width: 7px;
|
|
@@ -121,9 +394,9 @@ body {
|
|
|
121
394
|
border-radius: 50%;
|
|
122
395
|
margin-right: 5px;
|
|
123
396
|
}
|
|
124
|
-
.dot-idle { background:
|
|
125
|
-
.dot-running { background:
|
|
126
|
-
.dot-error { background:
|
|
397
|
+
.dot-idle { background: var(--color-text-secondary); }
|
|
398
|
+
.dot-running { background: var(--color-success); animation: pulse 1s infinite; }
|
|
399
|
+
.dot-error { background: var(--color-error); }
|
|
127
400
|
|
|
128
401
|
@keyframes pulse {
|
|
129
402
|
0%, 100% { opacity: 1; }
|
|
@@ -135,34 +408,73 @@ body {
|
|
|
135
408
|
|
|
136
409
|
.task-empty-hint {
|
|
137
410
|
font-size: 11px;
|
|
138
|
-
color:
|
|
411
|
+
color: var(--color-text-tertiary);
|
|
139
412
|
text-align: center;
|
|
140
413
|
padding: 10px 8px;
|
|
141
414
|
line-height: 1.6;
|
|
142
415
|
}
|
|
143
416
|
|
|
144
417
|
.task-item {
|
|
418
|
+
position: relative;
|
|
145
419
|
border-radius: 6px;
|
|
146
420
|
border: 1px solid transparent;
|
|
147
|
-
transition: background .
|
|
421
|
+
transition: background .2s ease;
|
|
422
|
+
}
|
|
423
|
+
/* Default: secondary text color */
|
|
424
|
+
.task-item .task-name,
|
|
425
|
+
.task-item .task-icon {
|
|
426
|
+
color: var(--color-text-secondary);
|
|
427
|
+
transition: color .2s ease, font-weight .2s ease;
|
|
428
|
+
}
|
|
429
|
+
/* Hover: subtle background */
|
|
430
|
+
.task-item:hover {
|
|
431
|
+
background: var(--color-bg-hover);
|
|
432
|
+
}
|
|
433
|
+
/* Active: primary color, bold text, left indicator */
|
|
434
|
+
.task-item.active {
|
|
435
|
+
background: rgba(59, 130, 246, 0.08);
|
|
436
|
+
}
|
|
437
|
+
[data-theme="light"] .task-item.active {
|
|
438
|
+
background: rgba(59, 130, 246, 0.06);
|
|
439
|
+
}
|
|
440
|
+
.task-item.active .task-name,
|
|
441
|
+
.task-item.active .task-icon {
|
|
442
|
+
color: var(--color-accent-primary);
|
|
443
|
+
font-weight: 700;
|
|
444
|
+
}
|
|
445
|
+
/* Left indicator bar (3px) for active state */
|
|
446
|
+
.task-item.active::before {
|
|
447
|
+
content: '';
|
|
448
|
+
position: absolute;
|
|
449
|
+
left: 0;
|
|
450
|
+
top: 50%;
|
|
451
|
+
transform: translateY(-50%);
|
|
452
|
+
width: 3px;
|
|
453
|
+
height: 60%;
|
|
454
|
+
background: var(--color-accent-primary);
|
|
455
|
+
border-radius: 0 2px 2px 0;
|
|
148
456
|
}
|
|
149
|
-
.task-item:hover { background: #1f2937; }
|
|
150
|
-
.task-item.active { background: #1f2937; border-color: #30363d; }
|
|
151
457
|
|
|
152
458
|
.task-row {
|
|
153
459
|
display: flex;
|
|
154
460
|
align-items: center;
|
|
155
|
-
gap:
|
|
156
|
-
padding:
|
|
461
|
+
gap: 10px;
|
|
462
|
+
padding: 10px 12px 10px 15px;
|
|
157
463
|
cursor: pointer;
|
|
464
|
+
border-radius: 6px;
|
|
465
|
+
transition: background 0.2s ease;
|
|
466
|
+
}
|
|
467
|
+
.task-icon {
|
|
468
|
+
width: 18px;
|
|
469
|
+
height: 18px;
|
|
470
|
+
flex-shrink: 0;
|
|
471
|
+
stroke-width: 2;
|
|
158
472
|
}
|
|
159
|
-
.task-icon { font-size: 14px; flex-shrink: 0; }
|
|
160
473
|
.task-info { flex: 1; min-width: 0; }
|
|
161
474
|
.task-name {
|
|
162
475
|
display: block;
|
|
163
476
|
font-size: 13px;
|
|
164
|
-
font-weight:
|
|
165
|
-
color: #e6edf3;
|
|
477
|
+
font-weight: 500;
|
|
166
478
|
white-space: nowrap;
|
|
167
479
|
overflow: hidden;
|
|
168
480
|
text-overflow: ellipsis;
|
|
@@ -170,7 +482,7 @@ body {
|
|
|
170
482
|
.task-cron {
|
|
171
483
|
display: block;
|
|
172
484
|
font-size: 11px;
|
|
173
|
-
color:
|
|
485
|
+
color: var(--color-warning);
|
|
174
486
|
font-family: monospace;
|
|
175
487
|
margin-top: 2px;
|
|
176
488
|
}
|
|
@@ -201,41 +513,72 @@ body {
|
|
|
201
513
|
flex-direction: column;
|
|
202
514
|
overflow: hidden;
|
|
203
515
|
}
|
|
204
|
-
#task-detail-
|
|
205
|
-
|
|
206
|
-
|
|
516
|
+
#task-detail-body {
|
|
517
|
+
flex: 1;
|
|
518
|
+
overflow: hidden;
|
|
207
519
|
display: flex;
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
flex-shrink: 0;
|
|
520
|
+
flex-direction: column;
|
|
521
|
+
padding: 32px 32px 24px;
|
|
522
|
+
gap: 20px;
|
|
212
523
|
}
|
|
213
|
-
#task-detail-title { font-weight: 600; font-size: 15px; }
|
|
214
524
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
525
|
+
/* ── Task Page Header ───────────────────────────────────────────────────── */
|
|
526
|
+
.task-page-header {
|
|
527
|
+
display: flex;
|
|
528
|
+
flex-direction: column;
|
|
529
|
+
gap: 8px;
|
|
530
|
+
flex-shrink: 0;
|
|
531
|
+
position: relative;
|
|
532
|
+
}
|
|
533
|
+
.task-page-title {
|
|
534
|
+
font-size: 24px;
|
|
535
|
+
font-weight: 700;
|
|
536
|
+
color: var(--color-text-primary);
|
|
537
|
+
margin: 0;
|
|
538
|
+
letter-spacing: -0.5px;
|
|
539
|
+
}
|
|
540
|
+
.task-page-subtitle {
|
|
541
|
+
font-size: 14px;
|
|
542
|
+
color: var(--color-text-secondary);
|
|
543
|
+
margin: 0;
|
|
544
|
+
line-height: 1.5;
|
|
545
|
+
}
|
|
546
|
+
.btn-create-task {
|
|
547
|
+
position: absolute;
|
|
548
|
+
top: 0;
|
|
549
|
+
right: 0;
|
|
550
|
+
display: flex;
|
|
551
|
+
align-items: center;
|
|
552
|
+
gap: 6px;
|
|
553
|
+
padding: 8px 16px;
|
|
554
|
+
background: var(--color-button-primary);
|
|
218
555
|
color: #fff;
|
|
219
556
|
border: none;
|
|
220
|
-
border-radius:
|
|
221
|
-
font-size:
|
|
557
|
+
border-radius: 8px;
|
|
558
|
+
font-size: 14px;
|
|
559
|
+
font-weight: 500;
|
|
222
560
|
cursor: pointer;
|
|
223
|
-
|
|
561
|
+
transition: background-color 0.2s ease, transform 0.15s ease;
|
|
562
|
+
}
|
|
563
|
+
.btn-create-task:hover {
|
|
564
|
+
background: var(--color-button-primary-hover);
|
|
565
|
+
transform: translateY(-1px);
|
|
566
|
+
}
|
|
567
|
+
.btn-create-task:active {
|
|
568
|
+
transform: translateY(0);
|
|
224
569
|
}
|
|
225
|
-
#btn-create-task:hover { background: #2ea043; }
|
|
226
570
|
|
|
227
571
|
/* ── Task list table ─────────────────────────────────────────────────────── */
|
|
228
572
|
#task-list-table {
|
|
229
573
|
flex: 1;
|
|
230
574
|
overflow: auto;
|
|
231
|
-
padding: 16px 20px;
|
|
232
575
|
display: flex;
|
|
233
576
|
flex-direction: column;
|
|
234
577
|
gap: 0;
|
|
235
578
|
}
|
|
236
579
|
|
|
237
580
|
.task-table-empty {
|
|
238
|
-
color:
|
|
581
|
+
color: var(--color-text-secondary);
|
|
239
582
|
font-size: 13px;
|
|
240
583
|
text-align: center;
|
|
241
584
|
padding: 40px 20px;
|
|
@@ -246,9 +589,11 @@ body {
|
|
|
246
589
|
}
|
|
247
590
|
|
|
248
591
|
.task-create-btn {
|
|
249
|
-
display: inline-
|
|
592
|
+
display: inline-flex;
|
|
593
|
+
align-items: center;
|
|
594
|
+
gap: 6px;
|
|
250
595
|
padding: 7px 18px;
|
|
251
|
-
background:
|
|
596
|
+
background: var(--color-button-primary);
|
|
252
597
|
color: #fff;
|
|
253
598
|
border: none;
|
|
254
599
|
border-radius: 6px;
|
|
@@ -258,7 +603,7 @@ body {
|
|
|
258
603
|
}
|
|
259
604
|
|
|
260
605
|
.task-create-btn:hover {
|
|
261
|
-
background:
|
|
606
|
+
background: var(--color-button-primary-hover);
|
|
262
607
|
}
|
|
263
608
|
|
|
264
609
|
.task-table-header,
|
|
@@ -272,28 +617,28 @@ body {
|
|
|
272
617
|
}
|
|
273
618
|
|
|
274
619
|
.task-table-header {
|
|
275
|
-
background:
|
|
620
|
+
background: var(--color-bg-secondary);
|
|
276
621
|
border-radius: 6px 6px 0 0;
|
|
277
|
-
border: 1px solid
|
|
622
|
+
border: 1px solid var(--color-border-primary);
|
|
278
623
|
border-bottom: none;
|
|
279
624
|
font-size: 11px;
|
|
280
625
|
font-weight: 600;
|
|
281
626
|
text-transform: uppercase;
|
|
282
627
|
letter-spacing: .05em;
|
|
283
|
-
color:
|
|
628
|
+
color: var(--color-text-secondary);
|
|
284
629
|
flex-shrink: 0;
|
|
285
630
|
}
|
|
286
631
|
|
|
287
632
|
.task-table-row {
|
|
288
|
-
background:
|
|
289
|
-
border: 1px solid
|
|
633
|
+
background: var(--color-bg-primary);
|
|
634
|
+
border: 1px solid var(--color-border-primary);
|
|
290
635
|
border-top: none;
|
|
291
636
|
transition: background .12s;
|
|
292
637
|
}
|
|
293
638
|
.task-table-row:last-child {
|
|
294
639
|
border-radius: 0 0 6px 6px;
|
|
295
640
|
}
|
|
296
|
-
.task-table-row:hover { background:
|
|
641
|
+
.task-table-row:hover { background: var(--color-bg-secondary); }
|
|
297
642
|
|
|
298
643
|
.task-col { min-width: 0; }
|
|
299
644
|
|
|
@@ -305,7 +650,7 @@ body {
|
|
|
305
650
|
.task-name-text {
|
|
306
651
|
font-weight: 600;
|
|
307
652
|
font-size: 13px;
|
|
308
|
-
color:
|
|
653
|
+
color: var(--color-text-primary);
|
|
309
654
|
white-space: nowrap;
|
|
310
655
|
overflow: hidden;
|
|
311
656
|
text-overflow: ellipsis;
|
|
@@ -314,20 +659,20 @@ body {
|
|
|
314
659
|
.task-col-schedule {
|
|
315
660
|
font-size: 12px;
|
|
316
661
|
font-family: monospace;
|
|
317
|
-
color:
|
|
662
|
+
color: var(--color-warning);
|
|
318
663
|
white-space: nowrap;
|
|
319
664
|
overflow: hidden;
|
|
320
665
|
text-overflow: ellipsis;
|
|
321
666
|
}
|
|
322
667
|
.sched-manual {
|
|
323
|
-
color:
|
|
668
|
+
color: var(--color-text-secondary);
|
|
324
669
|
font-style: italic;
|
|
325
670
|
font-family: inherit;
|
|
326
671
|
}
|
|
327
672
|
|
|
328
673
|
.task-col-content {
|
|
329
674
|
font-size: 12px;
|
|
330
|
-
color:
|
|
675
|
+
color: var(--color-text-secondary);
|
|
331
676
|
white-space: nowrap;
|
|
332
677
|
overflow: hidden;
|
|
333
678
|
text-overflow: ellipsis;
|
|
@@ -342,30 +687,47 @@ body {
|
|
|
342
687
|
}
|
|
343
688
|
|
|
344
689
|
.task-btn {
|
|
690
|
+
display: inline-flex;
|
|
691
|
+
align-items: center;
|
|
692
|
+
gap: 4px;
|
|
345
693
|
border: none;
|
|
346
694
|
border-radius: 5px;
|
|
347
|
-
padding:
|
|
695
|
+
padding: 5px 12px;
|
|
348
696
|
font-size: 12px;
|
|
349
697
|
cursor: pointer;
|
|
350
698
|
white-space: nowrap;
|
|
351
|
-
transition: background .12s;
|
|
699
|
+
transition: background .12s, transform 0.1s ease;
|
|
700
|
+
}
|
|
701
|
+
.task-btn:hover {
|
|
702
|
+
transform: translateY(-1px);
|
|
703
|
+
}
|
|
704
|
+
.task-btn:active {
|
|
705
|
+
transform: translateY(0);
|
|
352
706
|
}
|
|
353
|
-
.task-btn-run { background:
|
|
354
|
-
.task-btn-run:hover { background:
|
|
355
|
-
.task-btn-edit { background:
|
|
707
|
+
.task-btn-run { background: var(--color-accent-primary); color: #fff; }
|
|
708
|
+
.task-btn-run:hover { background: var(--color-accent-hover); }
|
|
709
|
+
.task-btn-edit { background: var(--color-border-primary); color: var(--color-text-primary); }
|
|
356
710
|
.task-btn-edit:hover { background: #3d444d; }
|
|
357
|
-
.task-btn-del { background:
|
|
358
|
-
.task-btn-del:hover { background:
|
|
711
|
+
.task-btn-del { background: var(--color-error-bg); color: var(--color-error); }
|
|
712
|
+
.task-btn-del:hover { background: var(--color-error); color: #fff; }
|
|
359
713
|
|
|
360
714
|
.empty-hint {
|
|
361
|
-
color:
|
|
715
|
+
color: var(--color-text-secondary);
|
|
362
716
|
font-size: 12px;
|
|
363
717
|
text-align: center;
|
|
364
718
|
padding: 20px 8px;
|
|
365
719
|
}
|
|
366
720
|
|
|
367
721
|
/* ── Main area ───────────────────────────────────────────────────────────── */
|
|
368
|
-
#main {
|
|
722
|
+
#main {
|
|
723
|
+
flex: 1;
|
|
724
|
+
display: flex;
|
|
725
|
+
flex-direction: column;
|
|
726
|
+
overflow: hidden;
|
|
727
|
+
width: 100%;
|
|
728
|
+
background: var(--color-bg-primary);
|
|
729
|
+
transition: background-color 0.3s ease;
|
|
730
|
+
}
|
|
369
731
|
.centered {
|
|
370
732
|
flex: 1;
|
|
371
733
|
display: flex;
|
|
@@ -373,12 +735,12 @@ body {
|
|
|
373
735
|
align-items: center;
|
|
374
736
|
justify-content: center;
|
|
375
737
|
gap: 16px;
|
|
376
|
-
color:
|
|
738
|
+
color: var(--color-text-secondary);
|
|
377
739
|
}
|
|
378
740
|
.welcome-icon { font-size: 48px; }
|
|
379
|
-
.centered h2 { color:
|
|
741
|
+
.centered h2 { color: var(--color-text-primary); font-size: 22px; }
|
|
380
742
|
#btn-welcome-new {
|
|
381
|
-
background:
|
|
743
|
+
background: var(--color-button-primary);
|
|
382
744
|
color: #fff;
|
|
383
745
|
border: none;
|
|
384
746
|
border-radius: 6px;
|
|
@@ -386,21 +748,20 @@ body {
|
|
|
386
748
|
font-size: 14px;
|
|
387
749
|
cursor: pointer;
|
|
388
750
|
}
|
|
389
|
-
#btn-welcome-new:hover { background:
|
|
751
|
+
#btn-welcome-new:hover { background: var(--color-button-primary-hover); }
|
|
390
752
|
|
|
391
753
|
/* ── Chat panel ──────────────────────────────────────────────────────────── */
|
|
392
754
|
#chat-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
393
755
|
#chat-header {
|
|
394
756
|
padding: 12px 20px;
|
|
395
|
-
border-bottom: 1px solid #30363d;
|
|
396
757
|
display: flex;
|
|
397
758
|
align-items: center;
|
|
398
759
|
gap: 10px;
|
|
399
|
-
background: #161b22;
|
|
400
760
|
}
|
|
401
761
|
#chat-title { font-weight: 600; font-size: 15px; }
|
|
402
|
-
.status-idle { font-size: 11px; color:
|
|
403
|
-
.status-running { font-size: 11px; color:
|
|
762
|
+
.status-idle { font-size: 11px; color: var(--color-text-secondary); }
|
|
763
|
+
.status-running { font-size: 11px; color: var(--color-success); }
|
|
764
|
+
.status-error { font-size: 11px; color: var(--color-error); }
|
|
404
765
|
|
|
405
766
|
/* Delete session button in chat header */
|
|
406
767
|
.btn-delete-session {
|
|
@@ -413,12 +774,12 @@ body {
|
|
|
413
774
|
background: transparent;
|
|
414
775
|
border: none;
|
|
415
776
|
border-radius: 6px;
|
|
416
|
-
color:
|
|
777
|
+
color: var(--color-text-tertiary);
|
|
417
778
|
cursor: pointer;
|
|
418
779
|
padding: 0;
|
|
419
780
|
transition: background .15s, color .15s;
|
|
420
781
|
}
|
|
421
|
-
.btn-delete-session:hover { background:
|
|
782
|
+
.btn-delete-session:hover { background: var(--color-error-bg); color: var(--color-error); }
|
|
422
783
|
|
|
423
784
|
/* ── Messages ────────────────────────────────────────────────────────────── */
|
|
424
785
|
#messages {
|
|
@@ -437,14 +798,14 @@ body {
|
|
|
437
798
|
line-height: 1.6;
|
|
438
799
|
word-break: break-word;
|
|
439
800
|
}
|
|
440
|
-
.msg-user { background:
|
|
441
|
-
.msg-assistant { background:
|
|
442
|
-
.msg-tool { background:
|
|
443
|
-
.msg-info { color:
|
|
444
|
-
.msg-error { background:
|
|
445
|
-
.msg-success { color:
|
|
446
|
-
.tool-name { color:
|
|
447
|
-
.progress-msg { color:
|
|
801
|
+
.msg-user { background: var(--color-accent-primary); align-self: flex-end; border-bottom-right-radius: 2px; }
|
|
802
|
+
.msg-assistant { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); align-self: flex-start; white-space: pre-wrap; }
|
|
803
|
+
.msg-tool { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); font-family: monospace; font-size: 12px; color: var(--color-text-secondary); align-self: flex-start; }
|
|
804
|
+
.msg-info { color: var(--color-text-secondary); font-size: 12px; align-self: center; font-style: italic; }
|
|
805
|
+
.msg-error { background: var(--color-error-bg); border: 1px solid var(--color-error); color: var(--color-error); align-self: flex-start; }
|
|
806
|
+
.msg-success { color: var(--color-success); align-self: flex-start; font-size: 13px; }
|
|
807
|
+
.tool-name { color: var(--color-warning); font-weight: 600; }
|
|
808
|
+
.progress-msg { color: var(--color-accent-primary); font-size: 12px; align-self: center; animation: pulse 1.2s infinite; }
|
|
448
809
|
|
|
449
810
|
/* ── Tool group (collapsible tool call list) ─────────────────────────────── */
|
|
450
811
|
.tool-group {
|
|
@@ -452,7 +813,7 @@ body {
|
|
|
452
813
|
max-width: 90%;
|
|
453
814
|
font-family: monospace;
|
|
454
815
|
font-size: 12px;
|
|
455
|
-
color:
|
|
816
|
+
color: var(--color-text-secondary);
|
|
456
817
|
}
|
|
457
818
|
.tool-group-header {
|
|
458
819
|
display: flex;
|
|
@@ -461,29 +822,29 @@ body {
|
|
|
461
822
|
cursor: pointer;
|
|
462
823
|
padding: 4px 8px;
|
|
463
824
|
border-radius: 6px;
|
|
464
|
-
background:
|
|
465
|
-
border: 1px solid
|
|
825
|
+
background: var(--color-bg-primary);
|
|
826
|
+
border: 1px solid var(--color-border-primary);
|
|
466
827
|
user-select: none;
|
|
467
|
-
color:
|
|
828
|
+
color: var(--color-text-secondary);
|
|
468
829
|
transition: background 0.15s;
|
|
469
830
|
}
|
|
470
|
-
.tool-group-header:hover { background:
|
|
831
|
+
.tool-group-header:hover { background: var(--color-bg-secondary); }
|
|
471
832
|
.tool-group-arrow {
|
|
472
833
|
font-size: 10px;
|
|
473
834
|
transition: transform 0.2s;
|
|
474
835
|
display: inline-block;
|
|
475
|
-
color:
|
|
836
|
+
color: var(--color-text-tertiary);
|
|
476
837
|
}
|
|
477
838
|
.tool-group.expanded .tool-group-arrow { transform: rotate(90deg); }
|
|
478
|
-
.tool-group-label { color:
|
|
479
|
-
.tool-group-label .tg-count { color:
|
|
839
|
+
.tool-group-label { color: var(--color-text-secondary); }
|
|
840
|
+
.tool-group-label .tg-count { color: var(--color-text-tertiary); margin-left: 4px; }
|
|
480
841
|
.tool-group-body {
|
|
481
842
|
margin-top: 4px;
|
|
482
843
|
display: none;
|
|
483
844
|
flex-direction: column;
|
|
484
845
|
gap: 2px;
|
|
485
846
|
padding-left: 8px;
|
|
486
|
-
border-left: 2px solid
|
|
847
|
+
border-left: 2px solid var(--color-border-secondary);
|
|
487
848
|
}
|
|
488
849
|
.tool-group.expanded .tool-group-body { display: flex; }
|
|
489
850
|
.tool-item {
|
|
@@ -493,12 +854,58 @@ body {
|
|
|
493
854
|
padding: 2px 6px;
|
|
494
855
|
border-radius: 4px;
|
|
495
856
|
}
|
|
496
|
-
.tool-item-name { color:
|
|
497
|
-
.tool-item-arg { color:
|
|
857
|
+
.tool-item-name { color: var(--color-warning); font-weight: 600; }
|
|
858
|
+
.tool-item-arg { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
|
|
498
859
|
.tool-item-status { margin-left: auto; font-size: 11px; flex-shrink: 0; }
|
|
499
|
-
.tool-item-status.ok { color:
|
|
500
|
-
.tool-item-status.err { color:
|
|
501
|
-
.tool-item-status.running { color:
|
|
860
|
+
.tool-item-status.ok { color: var(--color-success); }
|
|
861
|
+
.tool-item-status.err { color: var(--color-error); }
|
|
862
|
+
.tool-item-status.running { color: var(--color-accent-primary); animation: pulse 1.2s infinite; }
|
|
863
|
+
|
|
864
|
+
/* ── Thinking block (collapsible <think>...</think> sections) ─────────────── */
|
|
865
|
+
.thinking-block {
|
|
866
|
+
margin: 0 0 6px 0;
|
|
867
|
+
background: transparent;
|
|
868
|
+
overflow: hidden;
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
.thinking-summary {
|
|
872
|
+
display: inline-flex;
|
|
873
|
+
align-items: center;
|
|
874
|
+
gap: 5px;
|
|
875
|
+
padding: 0;
|
|
876
|
+
cursor: pointer;
|
|
877
|
+
user-select: none;
|
|
878
|
+
list-style: none;
|
|
879
|
+
color: var(--color-text-tertiary);
|
|
880
|
+
font-size: 12px;
|
|
881
|
+
font-style: italic;
|
|
882
|
+
transition: color 0.15s;
|
|
883
|
+
}
|
|
884
|
+
.thinking-summary::-webkit-details-marker { display: none; }
|
|
885
|
+
.thinking-summary:hover { color: var(--color-text-secondary); }
|
|
886
|
+
|
|
887
|
+
.thinking-icon { display: none; }
|
|
888
|
+
.thinking-label { font-weight: 400; }
|
|
889
|
+
.thinking-chevron {
|
|
890
|
+
font-size: 12px;
|
|
891
|
+
color: inherit;
|
|
892
|
+
transition: transform 0.2s;
|
|
893
|
+
line-height: 1;
|
|
894
|
+
display: inline-block;
|
|
895
|
+
}
|
|
896
|
+
.thinking-block[open] .thinking-chevron { transform: rotate(90deg); }
|
|
897
|
+
|
|
898
|
+
.thinking-body {
|
|
899
|
+
margin-top: 2px;
|
|
900
|
+
margin-bottom: 10px;
|
|
901
|
+
padding-left: 14px;
|
|
902
|
+
font-size: 12px;
|
|
903
|
+
line-height: 1.5;
|
|
904
|
+
color: var(--color-text-tertiary);
|
|
905
|
+
white-space: pre-wrap;
|
|
906
|
+
word-break: break-word;
|
|
907
|
+
font-style: italic;
|
|
908
|
+
}
|
|
502
909
|
|
|
503
910
|
/* Inline image thumbnails inside user message bubbles */
|
|
504
911
|
.msg-image-thumb {
|
|
@@ -512,15 +919,15 @@ body {
|
|
|
512
919
|
|
|
513
920
|
/* ── Input area (wraps preview strip + input bar) ────────────────────────── */
|
|
514
921
|
#input-area {
|
|
515
|
-
border-top: 1px solid
|
|
516
|
-
background:
|
|
922
|
+
border-top: 1px solid var(--color-border-primary);
|
|
923
|
+
background: var(--color-bg-secondary);
|
|
517
924
|
flex-shrink: 0;
|
|
518
925
|
}
|
|
519
926
|
|
|
520
927
|
/* Drop-target highlight when dragging a file over the input area */
|
|
521
928
|
#input-area.drag-over {
|
|
522
929
|
background: #1c2a3a;
|
|
523
|
-
outline: 2px dashed
|
|
930
|
+
outline: 2px dashed var(--color-accent-primary);
|
|
524
931
|
outline-offset: -2px;
|
|
525
932
|
}
|
|
526
933
|
|
|
@@ -537,7 +944,7 @@ body {
|
|
|
537
944
|
height: 64px;
|
|
538
945
|
border-radius: 6px;
|
|
539
946
|
overflow: hidden;
|
|
540
|
-
border: 1px solid
|
|
947
|
+
border: 1px solid var(--color-border-primary);
|
|
541
948
|
flex-shrink: 0;
|
|
542
949
|
}
|
|
543
950
|
.img-preview-item img {
|
|
@@ -561,13 +968,13 @@ body {
|
|
|
561
968
|
cursor: pointer;
|
|
562
969
|
padding: 0;
|
|
563
970
|
}
|
|
564
|
-
.img-preview-remove:hover { background:
|
|
971
|
+
.img-preview-remove:hover { background: var(--color-error); }
|
|
565
972
|
|
|
566
973
|
/* ── Skill autocomplete dropdown ─────────────────────────────────────────── */
|
|
567
974
|
#skill-autocomplete {
|
|
568
975
|
position: relative;
|
|
569
|
-
background:
|
|
570
|
-
border: 1px solid
|
|
976
|
+
background: var(--color-bg-tertiary);
|
|
977
|
+
border: 1px solid var(--color-border-primary);
|
|
571
978
|
border-bottom: none;
|
|
572
979
|
border-radius: 8px 8px 0 0;
|
|
573
980
|
overflow: hidden;
|
|
@@ -598,7 +1005,7 @@ body {
|
|
|
598
1005
|
}
|
|
599
1006
|
|
|
600
1007
|
.skill-ac-item.active {
|
|
601
|
-
background:
|
|
1008
|
+
background: var(--color-accent-primary)22;
|
|
602
1009
|
outline: none;
|
|
603
1010
|
}
|
|
604
1011
|
|
|
@@ -606,14 +1013,14 @@ body {
|
|
|
606
1013
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
607
1014
|
font-size: 13px;
|
|
608
1015
|
font-weight: 600;
|
|
609
|
-
color:
|
|
1016
|
+
color: var(--color-accent-primary);
|
|
610
1017
|
white-space: nowrap;
|
|
611
1018
|
flex-shrink: 0;
|
|
612
1019
|
}
|
|
613
1020
|
|
|
614
1021
|
.skill-ac-desc {
|
|
615
1022
|
font-size: 12px;
|
|
616
|
-
color:
|
|
1023
|
+
color: var(--color-text-secondary);
|
|
617
1024
|
white-space: nowrap;
|
|
618
1025
|
overflow: hidden;
|
|
619
1026
|
text-overflow: ellipsis;
|
|
@@ -623,11 +1030,11 @@ body {
|
|
|
623
1030
|
.skill-ac-header {
|
|
624
1031
|
padding: 5px 14px 3px;
|
|
625
1032
|
font-size: 11px;
|
|
626
|
-
color:
|
|
1033
|
+
color: var(--color-text-tertiary);
|
|
627
1034
|
text-transform: uppercase;
|
|
628
1035
|
letter-spacing: .06em;
|
|
629
1036
|
font-weight: 600;
|
|
630
|
-
border-bottom: 1px solid
|
|
1037
|
+
border-bottom: 1px solid var(--color-border-secondary);
|
|
631
1038
|
margin-bottom: 2px;
|
|
632
1039
|
}
|
|
633
1040
|
|
|
@@ -637,14 +1044,14 @@ body {
|
|
|
637
1044
|
display: flex;
|
|
638
1045
|
gap: 8px;
|
|
639
1046
|
align-items: center;
|
|
640
|
-
background:
|
|
1047
|
+
background: var(--color-bg-secondary);
|
|
641
1048
|
}
|
|
642
1049
|
|
|
643
1050
|
/* Attach button — left of textarea, vertically centered */
|
|
644
1051
|
#btn-attach {
|
|
645
1052
|
border: none;
|
|
646
1053
|
background: transparent;
|
|
647
|
-
color:
|
|
1054
|
+
color: var(--color-text-secondary);
|
|
648
1055
|
cursor: pointer;
|
|
649
1056
|
padding: 6px;
|
|
650
1057
|
line-height: 1;
|
|
@@ -654,11 +1061,11 @@ body {
|
|
|
654
1061
|
justify-content: center;
|
|
655
1062
|
border-radius: 6px;
|
|
656
1063
|
}
|
|
657
|
-
#btn-attach:hover { color:
|
|
1064
|
+
#btn-attach:hover { color: var(--color-text-primary); background: var(--color-border-secondary); }
|
|
658
1065
|
#btn-slash {
|
|
659
1066
|
border: none;
|
|
660
1067
|
background: transparent;
|
|
661
|
-
color:
|
|
1068
|
+
color: var(--color-text-secondary);
|
|
662
1069
|
cursor: pointer;
|
|
663
1070
|
padding: 4px 7px;
|
|
664
1071
|
line-height: 1;
|
|
@@ -671,14 +1078,14 @@ body {
|
|
|
671
1078
|
font-weight: 600;
|
|
672
1079
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
673
1080
|
}
|
|
674
|
-
#btn-slash:hover { color:
|
|
675
|
-
#btn-slash.active { color:
|
|
1081
|
+
#btn-slash:hover { color: var(--color-accent-primary); background: var(--color-border-secondary); }
|
|
1082
|
+
#btn-slash.active { color: var(--color-accent-primary); }
|
|
676
1083
|
#user-input {
|
|
677
1084
|
flex: 1;
|
|
678
|
-
background:
|
|
679
|
-
border: 1px solid
|
|
1085
|
+
background: var(--color-bg-primary);
|
|
1086
|
+
border: 1px solid var(--color-border-primary);
|
|
680
1087
|
border-radius: 8px;
|
|
681
|
-
color:
|
|
1088
|
+
color: var(--color-text-primary);
|
|
682
1089
|
padding: 8px 14px;
|
|
683
1090
|
font-size: 14px;
|
|
684
1091
|
resize: none;
|
|
@@ -686,7 +1093,7 @@ body {
|
|
|
686
1093
|
font-family: inherit;
|
|
687
1094
|
line-height: 1.5;
|
|
688
1095
|
}
|
|
689
|
-
#user-input:focus { outline: none; border-color:
|
|
1096
|
+
#user-input:focus { outline: none; border-color: var(--color-accent-primary); }
|
|
690
1097
|
#btn-send, #btn-interrupt {
|
|
691
1098
|
border: none;
|
|
692
1099
|
border-radius: 6px;
|
|
@@ -696,16 +1103,16 @@ body {
|
|
|
696
1103
|
white-space: nowrap;
|
|
697
1104
|
flex-shrink: 0;
|
|
698
1105
|
}
|
|
699
|
-
#btn-send { background:
|
|
700
|
-
#btn-send:hover { background:
|
|
701
|
-
#btn-send:disabled { background:
|
|
702
|
-
#btn-interrupt { background:
|
|
703
|
-
#btn-interrupt:hover{ background:
|
|
1106
|
+
#btn-send { background: var(--color-button-primary); color: #fff; }
|
|
1107
|
+
#btn-send:hover { background: var(--color-button-primary-hover); }
|
|
1108
|
+
#btn-send:disabled { background: var(--color-border-primary); color: var(--color-text-secondary); cursor: not-allowed; }
|
|
1109
|
+
#btn-interrupt { background: var(--color-error); color: #fff; }
|
|
1110
|
+
#btn-interrupt:hover{ background: var(--color-error); }
|
|
704
1111
|
|
|
705
1112
|
/* ── Sidebar footer ──────────────────────────────────────────────────────── */
|
|
706
1113
|
#sidebar-footer {
|
|
707
|
-
border-top: 1px solid
|
|
708
|
-
padding: 8px;
|
|
1114
|
+
border-top: 1px solid var(--color-border-primary);
|
|
1115
|
+
padding: 13px 8px 12px;
|
|
709
1116
|
flex-shrink: 0;
|
|
710
1117
|
}
|
|
711
1118
|
.sidebar-nav-btn {
|
|
@@ -716,15 +1123,15 @@ body {
|
|
|
716
1123
|
background: transparent;
|
|
717
1124
|
border: none;
|
|
718
1125
|
border-radius: 6px;
|
|
719
|
-
color:
|
|
1126
|
+
color: var(--color-text-secondary);
|
|
720
1127
|
font-size: 13px;
|
|
721
|
-
padding:
|
|
1128
|
+
padding: 10px 12px 10px 15px;
|
|
722
1129
|
cursor: pointer;
|
|
723
1130
|
text-align: left;
|
|
724
1131
|
transition: background .15s, color .15s;
|
|
725
1132
|
}
|
|
726
|
-
.sidebar-nav-btn:hover { background:
|
|
727
|
-
.sidebar-nav-btn.active { background:
|
|
1133
|
+
.sidebar-nav-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
1134
|
+
.sidebar-nav-btn.active { background: var(--color-bg-hover); color: var(--color-accent-primary); }
|
|
728
1135
|
.sidebar-nav-btn svg { flex-shrink: 0; }
|
|
729
1136
|
|
|
730
1137
|
/* ── Settings panel ──────────────────────────────────────────────────────── */
|
|
@@ -738,21 +1145,19 @@ body {
|
|
|
738
1145
|
display: flex;
|
|
739
1146
|
align-items: center;
|
|
740
1147
|
padding: 16px 20px;
|
|
741
|
-
border-bottom: 1px solid
|
|
1148
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
742
1149
|
font-size: 16px;
|
|
743
1150
|
font-weight: 600;
|
|
744
|
-
color:
|
|
1151
|
+
color: var(--color-text-primary);
|
|
745
1152
|
flex-shrink: 0;
|
|
746
1153
|
}
|
|
747
1154
|
#settings-body {
|
|
748
1155
|
flex: 1;
|
|
749
1156
|
overflow-y: auto;
|
|
750
|
-
padding: 24px;
|
|
1157
|
+
padding: 32px 32px 24px;
|
|
751
1158
|
display: flex;
|
|
752
1159
|
flex-direction: column;
|
|
753
1160
|
gap: 32px;
|
|
754
|
-
max-width: 720px;
|
|
755
|
-
width: 100%;
|
|
756
1161
|
}
|
|
757
1162
|
.settings-section {
|
|
758
1163
|
display: flex;
|
|
@@ -763,71 +1168,79 @@ body {
|
|
|
763
1168
|
display: flex;
|
|
764
1169
|
align-items: center;
|
|
765
1170
|
justify-content: space-between;
|
|
766
|
-
font-size:
|
|
767
|
-
font-weight:
|
|
768
|
-
color:
|
|
769
|
-
|
|
770
|
-
letter-spacing: 0.5px;
|
|
1171
|
+
font-size: 18px;
|
|
1172
|
+
font-weight: 700;
|
|
1173
|
+
color: var(--color-text-primary);
|
|
1174
|
+
letter-spacing: -0.3px;
|
|
771
1175
|
padding-bottom: 8px;
|
|
772
|
-
border-bottom: 1px solid #30363d;
|
|
773
1176
|
}
|
|
774
1177
|
.btn-settings-add {
|
|
775
|
-
|
|
776
|
-
|
|
1178
|
+
display: flex;
|
|
1179
|
+
align-items: center;
|
|
1180
|
+
gap: 6px;
|
|
1181
|
+
padding: 8px 20px;
|
|
1182
|
+
background: var(--color-button-primary);
|
|
1183
|
+
color: #fff;
|
|
1184
|
+
border: none;
|
|
777
1185
|
border-radius: 6px;
|
|
778
|
-
|
|
779
|
-
font-
|
|
780
|
-
padding: 4px 10px;
|
|
1186
|
+
font-size: 13px;
|
|
1187
|
+
font-weight: 500;
|
|
781
1188
|
cursor: pointer;
|
|
782
|
-
|
|
783
|
-
|
|
1189
|
+
transition: background-color 0.2s ease, transform 0.15s ease;
|
|
1190
|
+
}
|
|
1191
|
+
.btn-settings-add:hover {
|
|
1192
|
+
background: var(--color-button-primary-hover);
|
|
1193
|
+
transform: translateY(-1px);
|
|
1194
|
+
}
|
|
1195
|
+
.btn-settings-add:active {
|
|
1196
|
+
transform: translateY(0);
|
|
784
1197
|
}
|
|
785
|
-
.btn-settings-add:hover { background: #1f2937; }
|
|
786
1198
|
.settings-personalize {
|
|
787
1199
|
display: flex;
|
|
788
1200
|
align-items: center;
|
|
789
1201
|
justify-content: space-between;
|
|
790
1202
|
gap: 16px;
|
|
791
1203
|
padding: 14px 16px;
|
|
792
|
-
background:
|
|
793
|
-
border: 1px solid
|
|
1204
|
+
background: var(--color-bg-secondary);
|
|
1205
|
+
border: 1px solid var(--color-border-primary);
|
|
794
1206
|
border-radius: 10px;
|
|
795
1207
|
}
|
|
796
1208
|
.settings-personalize-desc {
|
|
797
1209
|
font-size: 13px;
|
|
798
|
-
color:
|
|
1210
|
+
color: var(--color-text-secondary);
|
|
799
1211
|
line-height: 1.5;
|
|
800
1212
|
margin: 0;
|
|
801
1213
|
}
|
|
802
1214
|
.btn-settings-action {
|
|
803
1215
|
flex-shrink: 0;
|
|
804
1216
|
background: transparent;
|
|
805
|
-
border: 1px solid
|
|
1217
|
+
border: 1px solid var(--color-border-primary);
|
|
806
1218
|
border-radius: 6px;
|
|
807
|
-
color:
|
|
1219
|
+
color: var(--color-accent-primary);
|
|
808
1220
|
font-size: 13px;
|
|
809
1221
|
padding: 6px 14px;
|
|
810
1222
|
cursor: pointer;
|
|
811
1223
|
white-space: nowrap;
|
|
812
1224
|
}
|
|
813
|
-
.btn-settings-action:hover { background:
|
|
1225
|
+
.btn-settings-action:hover { background: var(--color-bg-hover); border-color: var(--color-accent-primary); }
|
|
814
1226
|
.btn-settings-action:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
815
1227
|
.settings-loading, .settings-empty, .settings-error {
|
|
816
|
-
color:
|
|
1228
|
+
color: var(--color-text-secondary);
|
|
817
1229
|
font-size: 13px;
|
|
818
1230
|
padding: 16px 0;
|
|
819
1231
|
}
|
|
820
|
-
.settings-error { color:
|
|
1232
|
+
.settings-error { color: var(--color-error); }
|
|
821
1233
|
|
|
822
1234
|
/* ── Model card ──────────────────────────────────────────────────────────── */
|
|
823
1235
|
.model-card {
|
|
824
|
-
background:
|
|
825
|
-
border: 1px solid
|
|
1236
|
+
background: var(--color-bg-secondary);
|
|
1237
|
+
border: 1px solid var(--color-border-primary);
|
|
826
1238
|
border-radius: 10px;
|
|
827
1239
|
padding: 16px 20px;
|
|
828
1240
|
display: flex;
|
|
829
1241
|
flex-direction: column;
|
|
830
1242
|
gap: 14px;
|
|
1243
|
+
margin-bottom: 16px;
|
|
831
1244
|
}
|
|
832
1245
|
.model-card-header {
|
|
833
1246
|
display: flex;
|
|
@@ -842,32 +1255,32 @@ body {
|
|
|
842
1255
|
border-radius: 20px;
|
|
843
1256
|
letter-spacing: 0.3px;
|
|
844
1257
|
}
|
|
845
|
-
.badge-default { background: #
|
|
846
|
-
.badge-lite { background: #1a2f4e; color:
|
|
847
|
-
.badge-secondary { background:
|
|
1258
|
+
.badge-default { background: #0d3818; color: #3fb950; border: 1px solid #238636; }
|
|
1259
|
+
.badge-lite { background: #1a2f4e; color: var(--color-accent-primary); border: 1px solid var(--color-accent-primary); }
|
|
1260
|
+
.badge-secondary { background: var(--color-border-secondary); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); }
|
|
848
1261
|
.model-card-actions { display: flex; gap: 6px; }
|
|
849
1262
|
.btn-model-test {
|
|
850
1263
|
background: transparent;
|
|
851
|
-
border: 1px solid
|
|
1264
|
+
border: 1px solid var(--color-border-primary);
|
|
852
1265
|
border-radius: 6px;
|
|
853
|
-
color:
|
|
1266
|
+
color: var(--color-text-secondary);
|
|
854
1267
|
font-size: 12px;
|
|
855
1268
|
padding: 4px 10px;
|
|
856
1269
|
cursor: pointer;
|
|
857
1270
|
}
|
|
858
|
-
.btn-model-test:hover:not(:disabled) { border-color:
|
|
1271
|
+
.btn-model-test:hover:not(:disabled) { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
|
|
859
1272
|
.btn-model-test:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
860
1273
|
.btn-model-remove {
|
|
861
1274
|
background: transparent;
|
|
862
1275
|
border: 1px solid transparent;
|
|
863
1276
|
border-radius: 6px;
|
|
864
|
-
color:
|
|
865
|
-
font-size:
|
|
1277
|
+
color: var(--color-text-secondary);
|
|
1278
|
+
font-size: 18px;
|
|
866
1279
|
padding: 4px 8px;
|
|
867
1280
|
cursor: pointer;
|
|
868
1281
|
line-height: 1;
|
|
869
1282
|
}
|
|
870
|
-
.btn-model-remove:hover { color:
|
|
1283
|
+
.btn-model-remove:hover { color: var(--color-error); border-color: var(--color-error); }
|
|
871
1284
|
|
|
872
1285
|
/* Model form fields */
|
|
873
1286
|
.model-fields {
|
|
@@ -887,24 +1300,24 @@ body {
|
|
|
887
1300
|
}
|
|
888
1301
|
.field-label {
|
|
889
1302
|
font-size: 12px;
|
|
890
|
-
color:
|
|
1303
|
+
color: var(--color-text-secondary);
|
|
891
1304
|
}
|
|
892
1305
|
.field-input {
|
|
893
|
-
background:
|
|
894
|
-
border: 1px solid
|
|
1306
|
+
background: var(--color-bg-primary);
|
|
1307
|
+
border: 1px solid var(--color-border-primary);
|
|
895
1308
|
border-radius: 6px;
|
|
896
|
-
color:
|
|
1309
|
+
color: var(--color-text-primary);
|
|
897
1310
|
padding: 7px 10px;
|
|
898
1311
|
font-size: 13px;
|
|
899
1312
|
font-family: inherit;
|
|
900
1313
|
width: 100%;
|
|
901
1314
|
}
|
|
902
|
-
.field-input:focus { outline: none; border-color:
|
|
1315
|
+
.field-input:focus { outline: none; border-color: var(--color-accent-primary); }
|
|
903
1316
|
.field-select {
|
|
904
|
-
background:
|
|
905
|
-
border: 1px solid
|
|
1317
|
+
background: var(--color-bg-primary);
|
|
1318
|
+
border: 1px solid var(--color-border-primary);
|
|
906
1319
|
border-radius: 6px;
|
|
907
|
-
color:
|
|
1320
|
+
color: var(--color-text-primary);
|
|
908
1321
|
padding: 7px 10px;
|
|
909
1322
|
font-size: 13px;
|
|
910
1323
|
font-family: inherit;
|
|
@@ -916,29 +1329,100 @@ body {
|
|
|
916
1329
|
background-position: right 10px center;
|
|
917
1330
|
padding-right: 28px;
|
|
918
1331
|
}
|
|
919
|
-
.field-select:focus { outline: none; border-color:
|
|
920
|
-
.field-select option { background:
|
|
1332
|
+
.field-select:focus { outline: none; border-color: var(--color-accent-primary); }
|
|
1333
|
+
.field-select option { background: var(--color-bg-secondary); color: var(--color-text-primary); }
|
|
921
1334
|
.field-input-row {
|
|
922
1335
|
display: flex;
|
|
923
1336
|
gap: 6px;
|
|
924
1337
|
}
|
|
925
1338
|
.field-input-row .field-input { flex: 1; }
|
|
926
1339
|
.btn-toggle-key {
|
|
927
|
-
background:
|
|
928
|
-
border: 1px solid
|
|
1340
|
+
background: var(--color-border-secondary);
|
|
1341
|
+
border: 1px solid var(--color-border-primary);
|
|
929
1342
|
border-radius: 6px;
|
|
930
|
-
color:
|
|
1343
|
+
color: var(--color-text-secondary);
|
|
931
1344
|
font-size: 13px;
|
|
932
1345
|
padding: 4px 8px;
|
|
933
1346
|
cursor: pointer;
|
|
934
1347
|
flex-shrink: 0;
|
|
935
1348
|
}
|
|
936
|
-
.btn-toggle-key:hover { color:
|
|
1349
|
+
.btn-toggle-key:hover { color: var(--color-text-primary); }
|
|
937
1350
|
.field-checkbox {
|
|
938
1351
|
width: 16px;
|
|
939
1352
|
height: 16px;
|
|
940
1353
|
cursor: pointer;
|
|
941
|
-
accent-color:
|
|
1354
|
+
accent-color: var(--color-accent-primary);
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
/* Custom dropdown for provider selection */
|
|
1358
|
+
.custom-select-wrapper {
|
|
1359
|
+
position: relative;
|
|
1360
|
+
width: 100%;
|
|
1361
|
+
}
|
|
1362
|
+
.custom-select-trigger {
|
|
1363
|
+
background: var(--color-bg-primary);
|
|
1364
|
+
border: 1px solid var(--color-border-primary);
|
|
1365
|
+
border-radius: 6px;
|
|
1366
|
+
color: var(--color-text-primary);
|
|
1367
|
+
padding: 7px 10px;
|
|
1368
|
+
font-size: 13px;
|
|
1369
|
+
font-family: inherit;
|
|
1370
|
+
width: 100%;
|
|
1371
|
+
cursor: pointer;
|
|
1372
|
+
display: flex;
|
|
1373
|
+
align-items: center;
|
|
1374
|
+
justify-content: space-between;
|
|
1375
|
+
transition: border-color 0.15s ease;
|
|
1376
|
+
}
|
|
1377
|
+
.custom-select-trigger:hover {
|
|
1378
|
+
border-color: var(--color-text-muted);
|
|
1379
|
+
}
|
|
1380
|
+
.custom-select-trigger.open {
|
|
1381
|
+
border-color: var(--color-accent-primary);
|
|
1382
|
+
}
|
|
1383
|
+
.custom-select-trigger .placeholder {
|
|
1384
|
+
color: var(--color-text-secondary);
|
|
1385
|
+
}
|
|
1386
|
+
.custom-select-arrow {
|
|
1387
|
+
width: 12px;
|
|
1388
|
+
height: 12px;
|
|
1389
|
+
color: var(--color-text-secondary);
|
|
1390
|
+
transition: transform 0.2s ease;
|
|
1391
|
+
flex-shrink: 0;
|
|
1392
|
+
}
|
|
1393
|
+
.custom-select-trigger.open .custom-select-arrow {
|
|
1394
|
+
transform: rotate(180deg);
|
|
1395
|
+
}
|
|
1396
|
+
.custom-select-dropdown {
|
|
1397
|
+
position: absolute;
|
|
1398
|
+
top: calc(100% + 4px);
|
|
1399
|
+
left: 0;
|
|
1400
|
+
right: 0;
|
|
1401
|
+
background: var(--color-bg-secondary);
|
|
1402
|
+
border: 1px solid var(--color-border-primary);
|
|
1403
|
+
border-radius: 8px;
|
|
1404
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
1405
|
+
max-height: 280px;
|
|
1406
|
+
overflow-y: auto;
|
|
1407
|
+
z-index: 1000;
|
|
1408
|
+
display: none;
|
|
1409
|
+
}
|
|
1410
|
+
.custom-select-dropdown.open {
|
|
1411
|
+
display: block;
|
|
1412
|
+
}
|
|
1413
|
+
.custom-select-option {
|
|
1414
|
+
padding: 8px 12px;
|
|
1415
|
+
font-size: 13px;
|
|
1416
|
+
color: var(--color-text-primary);
|
|
1417
|
+
cursor: pointer;
|
|
1418
|
+
transition: background-color 0.15s ease;
|
|
1419
|
+
}
|
|
1420
|
+
.custom-select-option:hover {
|
|
1421
|
+
background: var(--color-bg-hover);
|
|
1422
|
+
}
|
|
1423
|
+
.custom-select-option.selected {
|
|
1424
|
+
background: var(--color-bg-hover);
|
|
1425
|
+
color: var(--color-accent-primary);
|
|
942
1426
|
}
|
|
943
1427
|
|
|
944
1428
|
/* Model card footer */
|
|
@@ -952,12 +1436,35 @@ body {
|
|
|
952
1436
|
font-size: 12px;
|
|
953
1437
|
flex: 1;
|
|
954
1438
|
}
|
|
955
|
-
.result-ok { color:
|
|
956
|
-
.result-fail { color:
|
|
1439
|
+
.result-ok { color: var(--color-success); }
|
|
1440
|
+
.result-fail { color: var(--color-error); }
|
|
957
1441
|
.btn-save-model {
|
|
958
1442
|
font-size: 13px;
|
|
959
1443
|
padding: 6px 18px;
|
|
960
1444
|
}
|
|
1445
|
+
.btn-set-default {
|
|
1446
|
+
font-size: 13px;
|
|
1447
|
+
padding: 6px 14px;
|
|
1448
|
+
background: transparent;
|
|
1449
|
+
border: 1px solid var(--color-border-primary);
|
|
1450
|
+
color: var(--color-accent-primary);
|
|
1451
|
+
border-radius: 6px;
|
|
1452
|
+
cursor: pointer;
|
|
1453
|
+
transition: background .15s, border-color .15s;
|
|
1454
|
+
}
|
|
1455
|
+
.btn-set-default:hover {
|
|
1456
|
+
background: var(--color-bg-hover);
|
|
1457
|
+
border-color: var(--color-accent-primary);
|
|
1458
|
+
}
|
|
1459
|
+
.btn-set-default:disabled {
|
|
1460
|
+
opacity: 0.5;
|
|
1461
|
+
cursor: not-allowed;
|
|
1462
|
+
}
|
|
1463
|
+
.model-card-actions-row {
|
|
1464
|
+
display: flex;
|
|
1465
|
+
gap: 8px;
|
|
1466
|
+
align-items: center;
|
|
1467
|
+
}
|
|
961
1468
|
|
|
962
1469
|
/* ── Modals ──────────────────────────────────────────────────────────────── */
|
|
963
1470
|
.modal-overlay {
|
|
@@ -970,48 +1477,48 @@ body {
|
|
|
970
1477
|
z-index: 100;
|
|
971
1478
|
}
|
|
972
1479
|
.modal-box {
|
|
973
|
-
background:
|
|
974
|
-
border: 1px solid
|
|
1480
|
+
background: var(--color-bg-secondary);
|
|
1481
|
+
border: 1px solid var(--color-border-primary);
|
|
975
1482
|
border-radius: 10px;
|
|
976
1483
|
padding: 24px;
|
|
977
1484
|
width: 90%;
|
|
978
1485
|
}
|
|
979
1486
|
.modal-box.sm { max-width: 480px; }
|
|
980
1487
|
.modal-box.lg { max-width: 680px; }
|
|
981
|
-
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color:
|
|
1488
|
+
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--color-text-primary); }
|
|
982
1489
|
.modal-actions {
|
|
983
1490
|
display: flex;
|
|
984
1491
|
gap: 10px;
|
|
985
1492
|
justify-content: flex-end;
|
|
986
1493
|
margin-top: 16px;
|
|
987
1494
|
}
|
|
988
|
-
.btn-primary { background:
|
|
989
|
-
.btn-primary:hover { background:
|
|
990
|
-
.btn-secondary { background:
|
|
1495
|
+
.btn-primary { background: var(--color-button-primary); color: #fff; border: none; border-radius: 6px; padding: 8px 20px; cursor: pointer; }
|
|
1496
|
+
.btn-primary:hover { background: var(--color-button-primary-hover); }
|
|
1497
|
+
.btn-secondary { background: var(--color-border-primary); color: var(--color-text-primary); border: none; border-radius: 6px; padding: 8px 20px; cursor: pointer; }
|
|
991
1498
|
.btn-secondary:hover { background: #3d444d; }
|
|
992
|
-
.btn-danger { background:
|
|
993
|
-
.btn-danger:hover { background:
|
|
1499
|
+
.btn-danger { background: var(--color-error); color: #fff; border: none; border-radius: 6px; padding: 8px 20px; cursor: pointer; }
|
|
1500
|
+
.btn-danger:hover { background: var(--color-error); }
|
|
994
1501
|
|
|
995
1502
|
/* ── Form elements ───────────────────────────────────────────────────────── */
|
|
996
1503
|
.form-group { margin-bottom: 12px; }
|
|
997
|
-
.form-label { font-size: 12px; color:
|
|
1504
|
+
.form-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; display: block; }
|
|
998
1505
|
.form-input {
|
|
999
1506
|
width: 100%;
|
|
1000
|
-
background:
|
|
1001
|
-
border: 1px solid
|
|
1507
|
+
background: var(--color-bg-primary);
|
|
1508
|
+
border: 1px solid var(--color-border-primary);
|
|
1002
1509
|
border-radius: 6px;
|
|
1003
|
-
color:
|
|
1510
|
+
color: var(--color-text-primary);
|
|
1004
1511
|
padding: 8px 12px;
|
|
1005
1512
|
font-size: 13px;
|
|
1006
1513
|
font-family: inherit;
|
|
1007
1514
|
}
|
|
1008
|
-
.form-input:focus { outline: none; border-color:
|
|
1515
|
+
.form-input:focus { outline: none; border-color: var(--color-accent-primary); }
|
|
1009
1516
|
.form-textarea {
|
|
1010
1517
|
width: 100%;
|
|
1011
|
-
background:
|
|
1012
|
-
border: 1px solid
|
|
1518
|
+
background: var(--color-bg-primary);
|
|
1519
|
+
border: 1px solid var(--color-border-primary);
|
|
1013
1520
|
border-radius: 6px;
|
|
1014
|
-
color:
|
|
1521
|
+
color: var(--color-text-primary);
|
|
1015
1522
|
padding: 10px 12px;
|
|
1016
1523
|
font-size: 13px;
|
|
1017
1524
|
font-family: monospace;
|
|
@@ -1019,8 +1526,8 @@ body {
|
|
|
1019
1526
|
min-height: 200px;
|
|
1020
1527
|
line-height: 1.6;
|
|
1021
1528
|
}
|
|
1022
|
-
.form-textarea:focus { outline: none; border-color:
|
|
1023
|
-
.form-hint { font-size: 11px; color:
|
|
1529
|
+
.form-textarea:focus { outline: none; border-color: var(--color-accent-primary); }
|
|
1530
|
+
.form-hint { font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; }
|
|
1024
1531
|
|
|
1025
1532
|
/* ── Skills Panel ────────────────────────────────────────────────────────── */
|
|
1026
1533
|
#skills-panel {
|
|
@@ -1029,49 +1536,73 @@ body {
|
|
|
1029
1536
|
height: 100%;
|
|
1030
1537
|
overflow: hidden;
|
|
1031
1538
|
}
|
|
1032
|
-
#skills-
|
|
1033
|
-
|
|
1034
|
-
|
|
1539
|
+
#skills-body {
|
|
1540
|
+
flex: 1;
|
|
1541
|
+
overflow: hidden;
|
|
1035
1542
|
display: flex;
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1543
|
+
flex-direction: column;
|
|
1544
|
+
padding: 32px 32px 24px;
|
|
1545
|
+
gap: 20px;
|
|
1546
|
+
}
|
|
1547
|
+
|
|
1548
|
+
/* ── Skills Page Header ──────────────────────────────────────────────────── */
|
|
1549
|
+
.skills-page-header {
|
|
1550
|
+
display: flex;
|
|
1551
|
+
flex-direction: column;
|
|
1552
|
+
gap: 8px;
|
|
1039
1553
|
flex-shrink: 0;
|
|
1040
|
-
|
|
1041
|
-
font-size: 15px;
|
|
1554
|
+
position: relative;
|
|
1042
1555
|
}
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1556
|
+
.skills-page-title {
|
|
1557
|
+
font-size: 24px;
|
|
1558
|
+
font-weight: 700;
|
|
1559
|
+
color: var(--color-text-primary);
|
|
1560
|
+
margin: 0;
|
|
1561
|
+
letter-spacing: -0.5px;
|
|
1562
|
+
}
|
|
1563
|
+
.skills-page-subtitle {
|
|
1564
|
+
font-size: 14px;
|
|
1565
|
+
color: var(--color-text-secondary);
|
|
1566
|
+
margin: 0;
|
|
1567
|
+
line-height: 1.5;
|
|
1568
|
+
}
|
|
1569
|
+
.btn-create-skill {
|
|
1570
|
+
position: absolute;
|
|
1571
|
+
top: 0;
|
|
1572
|
+
right: 0;
|
|
1573
|
+
display: flex;
|
|
1574
|
+
align-items: center;
|
|
1575
|
+
gap: 6px;
|
|
1576
|
+
padding: 8px 16px;
|
|
1577
|
+
background: var(--color-button-primary);
|
|
1046
1578
|
color: #fff;
|
|
1047
1579
|
border: none;
|
|
1048
|
-
border-radius:
|
|
1049
|
-
font-size:
|
|
1580
|
+
border-radius: 8px;
|
|
1581
|
+
font-size: 14px;
|
|
1582
|
+
font-weight: 500;
|
|
1050
1583
|
cursor: pointer;
|
|
1051
|
-
|
|
1584
|
+
transition: background-color 0.2s ease, transform 0.15s ease;
|
|
1052
1585
|
}
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
padding: 20px 24px;
|
|
1060
|
-
gap: 16px;
|
|
1586
|
+
.btn-create-skill:hover {
|
|
1587
|
+
background: var(--color-button-primary-hover);
|
|
1588
|
+
transform: translateY(-1px);
|
|
1589
|
+
}
|
|
1590
|
+
.btn-create-skill:active {
|
|
1591
|
+
transform: translateY(0);
|
|
1061
1592
|
}
|
|
1062
1593
|
|
|
1063
1594
|
/* ── Skills Tabs ─────────────────────────────────────────────────────────── */
|
|
1064
1595
|
#skills-tabs {
|
|
1065
1596
|
display: flex;
|
|
1066
1597
|
gap: 4px;
|
|
1067
|
-
border-bottom: 1px solid
|
|
1598
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
1068
1599
|
flex-shrink: 0;
|
|
1069
1600
|
}
|
|
1070
1601
|
.skills-tab {
|
|
1071
1602
|
background: none;
|
|
1072
1603
|
border: none;
|
|
1073
1604
|
border-bottom: 2px solid transparent;
|
|
1074
|
-
color:
|
|
1605
|
+
color: var(--color-text-secondary);
|
|
1075
1606
|
cursor: pointer;
|
|
1076
1607
|
font-size: 13px;
|
|
1077
1608
|
font-weight: 500;
|
|
@@ -1079,8 +1610,8 @@ body {
|
|
|
1079
1610
|
margin-bottom: -1px;
|
|
1080
1611
|
transition: color .15s, border-color .15s;
|
|
1081
1612
|
}
|
|
1082
|
-
.skills-tab:hover { color:
|
|
1083
|
-
.skills-tab.active { color:
|
|
1613
|
+
.skills-tab:hover { color: var(--color-text-primary); }
|
|
1614
|
+
.skills-tab.active { color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); }
|
|
1084
1615
|
|
|
1085
1616
|
.skills-tab-content {
|
|
1086
1617
|
flex: 1;
|
|
@@ -1095,7 +1626,7 @@ body {
|
|
|
1095
1626
|
padding-top: 12px;
|
|
1096
1627
|
}
|
|
1097
1628
|
.skills-empty {
|
|
1098
|
-
color:
|
|
1629
|
+
color: var(--color-text-secondary);
|
|
1099
1630
|
font-size: 13px;
|
|
1100
1631
|
padding: 20px 0;
|
|
1101
1632
|
text-align: center;
|
|
@@ -1103,13 +1634,13 @@ body {
|
|
|
1103
1634
|
|
|
1104
1635
|
/* ── Skill Card ──────────────────────────────────────────────────────────── */
|
|
1105
1636
|
.skill-card {
|
|
1106
|
-
background:
|
|
1107
|
-
border: 1px solid
|
|
1637
|
+
background: var(--color-bg-secondary);
|
|
1638
|
+
border: 1px solid var(--color-border-primary);
|
|
1108
1639
|
border-radius: 8px;
|
|
1109
1640
|
padding: 14px 16px;
|
|
1110
1641
|
transition: border-color .15s;
|
|
1111
1642
|
}
|
|
1112
|
-
.skill-card:hover { border-color:
|
|
1643
|
+
.skill-card:hover { border-color: var(--color-text-muted); }
|
|
1113
1644
|
.skill-card-main {
|
|
1114
1645
|
display: flex;
|
|
1115
1646
|
align-items: center;
|
|
@@ -1125,11 +1656,11 @@ body {
|
|
|
1125
1656
|
.skill-name {
|
|
1126
1657
|
font-size: 13px;
|
|
1127
1658
|
font-weight: 600;
|
|
1128
|
-
color:
|
|
1659
|
+
color: var(--color-text-primary);
|
|
1129
1660
|
}
|
|
1130
1661
|
.skill-card-desc {
|
|
1131
1662
|
font-size: 12px;
|
|
1132
|
-
color:
|
|
1663
|
+
color: var(--color-text-tertiary);
|
|
1133
1664
|
line-height: 1.5;
|
|
1134
1665
|
white-space: nowrap;
|
|
1135
1666
|
overflow: hidden;
|
|
@@ -1147,13 +1678,13 @@ body {
|
|
|
1147
1678
|
}
|
|
1148
1679
|
.skill-badge-system {
|
|
1149
1680
|
background: #1f3a5f;
|
|
1150
|
-
color:
|
|
1681
|
+
color: var(--color-accent-hover);
|
|
1151
1682
|
border: 1px solid #1d4070;
|
|
1152
1683
|
}
|
|
1153
1684
|
.skill-badge-custom {
|
|
1154
|
-
background:
|
|
1155
|
-
color:
|
|
1156
|
-
border: 1px solid
|
|
1685
|
+
background: var(--color-success-bg);
|
|
1686
|
+
color: var(--color-success);
|
|
1687
|
+
border: 1px solid var(--color-success-border);
|
|
1157
1688
|
}
|
|
1158
1689
|
|
|
1159
1690
|
/* ── Toggle Switch ───────────────────────────────────────────────────────── */
|
|
@@ -1178,7 +1709,7 @@ body {
|
|
|
1178
1709
|
display: inline-block;
|
|
1179
1710
|
width: 36px;
|
|
1180
1711
|
height: 20px;
|
|
1181
|
-
background:
|
|
1712
|
+
background: var(--color-border-primary);
|
|
1182
1713
|
border-radius: 10px;
|
|
1183
1714
|
transition: background .2s;
|
|
1184
1715
|
position: relative;
|
|
@@ -1195,7 +1726,7 @@ body {
|
|
|
1195
1726
|
transition: left .2s;
|
|
1196
1727
|
}
|
|
1197
1728
|
.skill-toggle-input:checked + .skill-toggle-track {
|
|
1198
|
-
background:
|
|
1729
|
+
background: var(--color-button-primary);
|
|
1199
1730
|
}
|
|
1200
1731
|
.skill-toggle-input:checked + .skill-toggle-track::after {
|
|
1201
1732
|
left: 19px;
|
|
@@ -1209,8 +1740,8 @@ body {
|
|
|
1209
1740
|
padding-top: 12px;
|
|
1210
1741
|
}
|
|
1211
1742
|
.store-card {
|
|
1212
|
-
background:
|
|
1213
|
-
border: 1px solid
|
|
1743
|
+
background: var(--color-bg-secondary);
|
|
1744
|
+
border: 1px solid var(--color-border-primary);
|
|
1214
1745
|
border-radius: 8px;
|
|
1215
1746
|
padding: 16px;
|
|
1216
1747
|
display: flex;
|
|
@@ -1218,7 +1749,7 @@ body {
|
|
|
1218
1749
|
gap: 14px;
|
|
1219
1750
|
transition: border-color .15s;
|
|
1220
1751
|
}
|
|
1221
|
-
.store-card:hover { border-color:
|
|
1752
|
+
.store-card:hover { border-color: var(--color-text-muted); }
|
|
1222
1753
|
.store-card-icon {
|
|
1223
1754
|
font-size: 28px;
|
|
1224
1755
|
flex-shrink: 0;
|
|
@@ -1227,37 +1758,40 @@ body {
|
|
|
1227
1758
|
display: flex;
|
|
1228
1759
|
align-items: center;
|
|
1229
1760
|
justify-content: center;
|
|
1230
|
-
background:
|
|
1761
|
+
background: var(--color-bg-primary);
|
|
1231
1762
|
border-radius: 8px;
|
|
1232
1763
|
}
|
|
1233
1764
|
.store-card-body { flex: 1; min-width: 0; }
|
|
1234
1765
|
.store-card-title {
|
|
1235
1766
|
font-size: 13px;
|
|
1236
1767
|
font-weight: 600;
|
|
1237
|
-
color:
|
|
1768
|
+
color: var(--color-text-primary);
|
|
1238
1769
|
margin-bottom: 4px;
|
|
1239
1770
|
}
|
|
1240
1771
|
.store-card-desc {
|
|
1241
1772
|
font-size: 12px;
|
|
1242
|
-
color:
|
|
1773
|
+
color: var(--color-text-tertiary);
|
|
1243
1774
|
line-height: 1.5;
|
|
1244
1775
|
}
|
|
1245
1776
|
.store-card-actions { flex-shrink: 0; }
|
|
1246
1777
|
.btn-store-install {
|
|
1247
|
-
background:
|
|
1248
|
-
|
|
1249
|
-
border: none;
|
|
1778
|
+
background: transparent;
|
|
1779
|
+
border: 1px solid var(--color-border-primary);
|
|
1250
1780
|
border-radius: 6px;
|
|
1781
|
+
color: var(--color-accent-primary);
|
|
1251
1782
|
padding: 6px 14px;
|
|
1252
1783
|
font-size: 12px;
|
|
1253
1784
|
font-weight: 600;
|
|
1254
1785
|
cursor: pointer;
|
|
1255
|
-
transition: background .15s;
|
|
1786
|
+
transition: background .15s, border-color .15s;
|
|
1787
|
+
}
|
|
1788
|
+
.btn-store-install:hover {
|
|
1789
|
+
background: var(--color-bg-hover);
|
|
1790
|
+
border-color: var(--color-accent-primary);
|
|
1256
1791
|
}
|
|
1257
|
-
.btn-store-install:hover { background: #2ea043; }
|
|
1258
1792
|
.store-badge-installed {
|
|
1259
1793
|
font-size: 12px;
|
|
1260
|
-
color:
|
|
1794
|
+
color: var(--color-success);
|
|
1261
1795
|
font-weight: 600;
|
|
1262
1796
|
}
|
|
1263
1797
|
|
|
@@ -1269,17 +1803,17 @@ body {
|
|
|
1269
1803
|
}
|
|
1270
1804
|
.btn-brand-skills-refresh {
|
|
1271
1805
|
background: none;
|
|
1272
|
-
border: 1px solid
|
|
1806
|
+
border: 1px solid var(--color-border-primary);
|
|
1273
1807
|
border-radius: 6px;
|
|
1274
|
-
color:
|
|
1808
|
+
color: var(--color-text-secondary);
|
|
1275
1809
|
cursor: pointer;
|
|
1276
1810
|
font-size: 12px;
|
|
1277
1811
|
padding: 4px 10px;
|
|
1278
1812
|
transition: color .15s, border-color .15s;
|
|
1279
1813
|
}
|
|
1280
1814
|
.btn-brand-skills-refresh:hover {
|
|
1281
|
-
border-color:
|
|
1282
|
-
color:
|
|
1815
|
+
border-color: var(--color-accent-primary);
|
|
1816
|
+
color: var(--color-accent-primary);
|
|
1283
1817
|
}
|
|
1284
1818
|
|
|
1285
1819
|
#brand-skills-list {
|
|
@@ -1292,21 +1826,21 @@ body {
|
|
|
1292
1826
|
.brand-skills-empty,
|
|
1293
1827
|
.brand-skills-error {
|
|
1294
1828
|
font-size: 13px;
|
|
1295
|
-
color:
|
|
1829
|
+
color: var(--color-text-secondary);
|
|
1296
1830
|
text-align: center;
|
|
1297
1831
|
padding: 24px 0;
|
|
1298
1832
|
}
|
|
1299
|
-
.brand-skills-error { color:
|
|
1833
|
+
.brand-skills-error { color: var(--color-error); }
|
|
1300
1834
|
|
|
1301
1835
|
/* Brand Skill card */
|
|
1302
1836
|
.brand-skill-card {
|
|
1303
|
-
background:
|
|
1304
|
-
border: 1px solid
|
|
1837
|
+
background: var(--color-bg-secondary);
|
|
1838
|
+
border: 1px solid var(--color-border-primary);
|
|
1305
1839
|
border-radius: 8px;
|
|
1306
1840
|
padding: 14px 16px;
|
|
1307
1841
|
transition: border-color .15s;
|
|
1308
1842
|
}
|
|
1309
|
-
.brand-skill-card:hover { border-color:
|
|
1843
|
+
.brand-skill-card:hover { border-color: var(--color-text-muted); }
|
|
1310
1844
|
.brand-skill-card-main {
|
|
1311
1845
|
display: flex;
|
|
1312
1846
|
align-items: center;
|
|
@@ -1322,11 +1856,11 @@ body {
|
|
|
1322
1856
|
.brand-skill-name {
|
|
1323
1857
|
font-size: 13px;
|
|
1324
1858
|
font-weight: 600;
|
|
1325
|
-
color:
|
|
1859
|
+
color: var(--color-text-primary);
|
|
1326
1860
|
}
|
|
1327
1861
|
.brand-skill-desc {
|
|
1328
1862
|
font-size: 12px;
|
|
1329
|
-
color:
|
|
1863
|
+
color: var(--color-text-tertiary);
|
|
1330
1864
|
line-height: 1.5;
|
|
1331
1865
|
white-space: nowrap;
|
|
1332
1866
|
overflow: hidden;
|
|
@@ -1348,17 +1882,17 @@ body {
|
|
|
1348
1882
|
white-space: nowrap;
|
|
1349
1883
|
}
|
|
1350
1884
|
.brand-skill-version.installed {
|
|
1351
|
-
background:
|
|
1352
|
-
color:
|
|
1353
|
-
border: 1px solid
|
|
1885
|
+
background: var(--color-success-bg);
|
|
1886
|
+
color: var(--color-success);
|
|
1887
|
+
border: 1px solid var(--color-success-border);
|
|
1354
1888
|
}
|
|
1355
1889
|
.brand-skill-version.latest {
|
|
1356
1890
|
background: #1f3a5f;
|
|
1357
|
-
color:
|
|
1891
|
+
color: var(--color-accent-hover);
|
|
1358
1892
|
border: 1px solid #1d4070;
|
|
1359
1893
|
}
|
|
1360
1894
|
.brand-skill-update-arrow {
|
|
1361
|
-
color:
|
|
1895
|
+
color: var(--color-text-secondary);
|
|
1362
1896
|
font-size: 12px;
|
|
1363
1897
|
}
|
|
1364
1898
|
|
|
@@ -1369,9 +1903,9 @@ body {
|
|
|
1369
1903
|
gap: 3px;
|
|
1370
1904
|
font-size: 11px;
|
|
1371
1905
|
font-weight: 500;
|
|
1372
|
-
color:
|
|
1373
|
-
background:
|
|
1374
|
-
border: 1px solid
|
|
1906
|
+
color: var(--color-text-secondary);
|
|
1907
|
+
background: var(--color-border-secondary);
|
|
1908
|
+
border: 1px solid var(--color-border-primary);
|
|
1375
1909
|
border-radius: 4px;
|
|
1376
1910
|
padding: 1px 6px;
|
|
1377
1911
|
white-space: nowrap;
|
|
@@ -1389,16 +1923,20 @@ body {
|
|
|
1389
1923
|
transition: background .15s;
|
|
1390
1924
|
}
|
|
1391
1925
|
.btn-brand-install {
|
|
1392
|
-
background:
|
|
1393
|
-
|
|
1926
|
+
background: transparent;
|
|
1927
|
+
border: 1px solid var(--color-border-primary);
|
|
1928
|
+
color: var(--color-accent-primary);
|
|
1929
|
+
}
|
|
1930
|
+
.btn-brand-install:hover {
|
|
1931
|
+
background: var(--color-bg-hover);
|
|
1932
|
+
border-color: var(--color-accent-primary);
|
|
1394
1933
|
}
|
|
1395
|
-
.btn-brand-install:hover { background: #2ea043; }
|
|
1396
1934
|
.btn-brand-update {
|
|
1397
1935
|
background: #1f4e9e;
|
|
1398
|
-
color:
|
|
1936
|
+
color: var(--color-accent-hover);
|
|
1399
1937
|
border: 1px solid #1d4070;
|
|
1400
1938
|
}
|
|
1401
|
-
.btn-brand-update:hover { background:
|
|
1939
|
+
.btn-brand-update:hover { background: var(--color-accent-primary); }
|
|
1402
1940
|
.btn-brand-install:disabled,
|
|
1403
1941
|
.btn-brand-update:disabled {
|
|
1404
1942
|
opacity: 0.5;
|
|
@@ -1435,13 +1973,13 @@ body {
|
|
|
1435
1973
|
.onboard-title {
|
|
1436
1974
|
font-size: 26px;
|
|
1437
1975
|
font-weight: 700;
|
|
1438
|
-
color:
|
|
1976
|
+
color: var(--color-text-primary);
|
|
1439
1977
|
text-align: center;
|
|
1440
1978
|
}
|
|
1441
1979
|
|
|
1442
1980
|
.onboard-subtitle {
|
|
1443
1981
|
font-size: 14px;
|
|
1444
|
-
color:
|
|
1982
|
+
color: var(--color-text-secondary);
|
|
1445
1983
|
text-align: center;
|
|
1446
1984
|
margin-bottom: 8px;
|
|
1447
1985
|
}
|
|
@@ -1458,9 +1996,9 @@ body {
|
|
|
1458
1996
|
width: 28px;
|
|
1459
1997
|
height: 28px;
|
|
1460
1998
|
border-radius: 50%;
|
|
1461
|
-
background:
|
|
1462
|
-
border: 2px solid
|
|
1463
|
-
color:
|
|
1999
|
+
background: var(--color-border-secondary);
|
|
2000
|
+
border: 2px solid var(--color-border-primary);
|
|
2001
|
+
color: var(--color-text-secondary);
|
|
1464
2002
|
font-size: 12px;
|
|
1465
2003
|
font-weight: 700;
|
|
1466
2004
|
display: flex;
|
|
@@ -1470,21 +2008,21 @@ body {
|
|
|
1470
2008
|
}
|
|
1471
2009
|
|
|
1472
2010
|
.onboard-step.active {
|
|
1473
|
-
background:
|
|
1474
|
-
border-color:
|
|
2011
|
+
background: var(--color-accent-primary);
|
|
2012
|
+
border-color: var(--color-accent-primary);
|
|
1475
2013
|
color: #fff;
|
|
1476
2014
|
}
|
|
1477
2015
|
|
|
1478
2016
|
.onboard-step.done {
|
|
1479
|
-
background:
|
|
1480
|
-
border-color:
|
|
2017
|
+
background: var(--color-button-primary);
|
|
2018
|
+
border-color: var(--color-button-primary);
|
|
1481
2019
|
color: #fff;
|
|
1482
2020
|
}
|
|
1483
2021
|
|
|
1484
2022
|
.onboard-step-line {
|
|
1485
2023
|
width: 60px;
|
|
1486
2024
|
height: 2px;
|
|
1487
|
-
background:
|
|
2025
|
+
background: var(--color-border-primary);
|
|
1488
2026
|
}
|
|
1489
2027
|
|
|
1490
2028
|
/* ── Phase containers ── */
|
|
@@ -1499,13 +2037,13 @@ body {
|
|
|
1499
2037
|
.onboard-phase-title {
|
|
1500
2038
|
font-size: 16px;
|
|
1501
2039
|
font-weight: 600;
|
|
1502
|
-
color:
|
|
2040
|
+
color: var(--color-text-primary);
|
|
1503
2041
|
text-align: center;
|
|
1504
2042
|
}
|
|
1505
2043
|
|
|
1506
2044
|
.onboard-phase-desc {
|
|
1507
2045
|
font-size: 13px;
|
|
1508
|
-
color:
|
|
2046
|
+
color: var(--color-text-secondary);
|
|
1509
2047
|
text-align: center;
|
|
1510
2048
|
line-height: 1.6;
|
|
1511
2049
|
}
|
|
@@ -1520,7 +2058,7 @@ body {
|
|
|
1520
2058
|
.onboard-label {
|
|
1521
2059
|
font-size: 12px;
|
|
1522
2060
|
font-weight: 600;
|
|
1523
|
-
color:
|
|
2061
|
+
color: var(--color-text-secondary);
|
|
1524
2062
|
text-transform: uppercase;
|
|
1525
2063
|
letter-spacing: .04em;
|
|
1526
2064
|
}
|
|
@@ -1528,10 +2066,10 @@ body {
|
|
|
1528
2066
|
.onboard-select,
|
|
1529
2067
|
.onboard-input {
|
|
1530
2068
|
width: 100%;
|
|
1531
|
-
background:
|
|
1532
|
-
border: 1px solid
|
|
2069
|
+
background: var(--color-bg-primary);
|
|
2070
|
+
border: 1px solid var(--color-border-primary);
|
|
1533
2071
|
border-radius: 6px;
|
|
1534
|
-
color:
|
|
2072
|
+
color: var(--color-text-primary);
|
|
1535
2073
|
font-size: 13px;
|
|
1536
2074
|
padding: 8px 12px;
|
|
1537
2075
|
outline: none;
|
|
@@ -1540,7 +2078,7 @@ body {
|
|
|
1540
2078
|
|
|
1541
2079
|
.onboard-select:focus,
|
|
1542
2080
|
.onboard-input:focus {
|
|
1543
|
-
border-color:
|
|
2081
|
+
border-color: var(--color-accent-primary);
|
|
1544
2082
|
}
|
|
1545
2083
|
|
|
1546
2084
|
.onboard-input-row {
|
|
@@ -1559,8 +2097,8 @@ body {
|
|
|
1559
2097
|
text-align: center;
|
|
1560
2098
|
}
|
|
1561
2099
|
|
|
1562
|
-
.onboard-test-result.result-ok { color:
|
|
1563
|
-
.onboard-test-result.result-fail { color:
|
|
2100
|
+
.onboard-test-result.result-ok { color: var(--color-success); }
|
|
2101
|
+
.onboard-test-result.result-fail { color: var(--color-error); }
|
|
1564
2102
|
|
|
1565
2103
|
/* ── Action buttons ── */
|
|
1566
2104
|
.onboard-actions {
|
|
@@ -1576,7 +2114,7 @@ body {
|
|
|
1576
2114
|
}
|
|
1577
2115
|
|
|
1578
2116
|
.onboard-btn-primary {
|
|
1579
|
-
background:
|
|
2117
|
+
background: var(--color-button-primary);
|
|
1580
2118
|
color: #fff;
|
|
1581
2119
|
border: none;
|
|
1582
2120
|
border-radius: 6px;
|
|
@@ -1587,12 +2125,12 @@ body {
|
|
|
1587
2125
|
transition: background .15s;
|
|
1588
2126
|
}
|
|
1589
2127
|
|
|
1590
|
-
.onboard-btn-primary:hover { background:
|
|
2128
|
+
.onboard-btn-primary:hover { background: var(--color-button-primary-hover); }
|
|
1591
2129
|
.onboard-btn-primary:disabled { opacity: .6; cursor: default; }
|
|
1592
2130
|
|
|
1593
2131
|
.onboard-btn-secondary {
|
|
1594
2132
|
background: transparent;
|
|
1595
|
-
color:
|
|
2133
|
+
color: var(--color-text-secondary);
|
|
1596
2134
|
border: none;
|
|
1597
2135
|
font-size: 13px;
|
|
1598
2136
|
cursor: pointer;
|
|
@@ -1600,7 +2138,7 @@ body {
|
|
|
1600
2138
|
padding: 0;
|
|
1601
2139
|
}
|
|
1602
2140
|
|
|
1603
|
-
.onboard-btn-secondary:hover { color:
|
|
2141
|
+
.onboard-btn-secondary:hover { color: var(--color-text-primary); }
|
|
1604
2142
|
|
|
1605
2143
|
/* ── Brand activation panel ─────────────────────────────────────────────── */
|
|
1606
2144
|
#brand-panel {
|
|
@@ -1623,8 +2161,8 @@ body {
|
|
|
1623
2161
|
|
|
1624
2162
|
/* ── Brand & License settings section ───────────────────────────────────── */
|
|
1625
2163
|
.brand-status-card {
|
|
1626
|
-
background:
|
|
1627
|
-
border: 1px solid
|
|
2164
|
+
background: var(--color-bg-secondary);
|
|
2165
|
+
border: 1px solid var(--color-border-primary);
|
|
1628
2166
|
border-radius: 10px;
|
|
1629
2167
|
padding: 16px 20px;
|
|
1630
2168
|
display: flex;
|
|
@@ -1638,26 +2176,26 @@ body {
|
|
|
1638
2176
|
font-size: 13px;
|
|
1639
2177
|
}
|
|
1640
2178
|
.brand-status-label {
|
|
1641
|
-
color:
|
|
2179
|
+
color: var(--color-text-secondary);
|
|
1642
2180
|
width: 60px;
|
|
1643
2181
|
flex-shrink: 0;
|
|
1644
2182
|
}
|
|
1645
2183
|
.brand-status-value {
|
|
1646
|
-
color:
|
|
2184
|
+
color: var(--color-text-primary);
|
|
1647
2185
|
font-weight: 500;
|
|
1648
2186
|
}
|
|
1649
2187
|
.brand-status-actions {
|
|
1650
2188
|
margin-top: 4px;
|
|
1651
2189
|
padding-top: 12px;
|
|
1652
|
-
border-top: 1px solid
|
|
2190
|
+
border-top: 1px solid var(--color-border-primary);
|
|
1653
2191
|
}
|
|
1654
|
-
.badge-active { color:
|
|
1655
|
-
.badge-expired { color:
|
|
1656
|
-
.badge-inactive { color:
|
|
2192
|
+
.badge-active { color: var(--color-success); }
|
|
2193
|
+
.badge-expired { color: var(--color-error); }
|
|
2194
|
+
.badge-inactive { color: var(--color-text-secondary); }
|
|
1657
2195
|
|
|
1658
2196
|
.brand-activate-form {
|
|
1659
|
-
background:
|
|
1660
|
-
border: 1px solid
|
|
2197
|
+
background: var(--color-bg-secondary);
|
|
2198
|
+
border: 1px solid var(--color-border-primary);
|
|
1661
2199
|
border-radius: 10px;
|
|
1662
2200
|
padding: 16px 20px;
|
|
1663
2201
|
display: flex;
|
|
@@ -1666,7 +2204,7 @@ body {
|
|
|
1666
2204
|
}
|
|
1667
2205
|
.brand-activate-desc {
|
|
1668
2206
|
font-size: 13px;
|
|
1669
|
-
color:
|
|
2207
|
+
color: var(--color-text-secondary);
|
|
1670
2208
|
line-height: 1.5;
|
|
1671
2209
|
margin: 0;
|
|
1672
2210
|
}
|
|
@@ -1688,9 +2226,9 @@ body {
|
|
|
1688
2226
|
justify-content: space-between;
|
|
1689
2227
|
gap: 12px;
|
|
1690
2228
|
padding: 8px 16px;
|
|
1691
|
-
background:
|
|
1692
|
-
border-bottom: 1px solid
|
|
1693
|
-
color:
|
|
2229
|
+
background: var(--color-warning-bg);
|
|
2230
|
+
border-bottom: 1px solid var(--color-warning-border);
|
|
2231
|
+
color: var(--color-warning);
|
|
1694
2232
|
font-size: 13px;
|
|
1695
2233
|
flex-shrink: 0;
|
|
1696
2234
|
}
|
|
@@ -1698,7 +2236,7 @@ body {
|
|
|
1698
2236
|
.brand-warning-bar button {
|
|
1699
2237
|
background: transparent;
|
|
1700
2238
|
border: none;
|
|
1701
|
-
color:
|
|
2239
|
+
color: var(--color-warning);
|
|
1702
2240
|
cursor: pointer;
|
|
1703
2241
|
font-size: 14px;
|
|
1704
2242
|
padding: 0 4px;
|
|
@@ -1710,4 +2248,76 @@ body {
|
|
|
1710
2248
|
/* ── Scrollbar ───────────────────────────────────────────────────────────── */
|
|
1711
2249
|
::-webkit-scrollbar { width: 6px; }
|
|
1712
2250
|
::-webkit-scrollbar-track { background: transparent; }
|
|
1713
|
-
::-webkit-scrollbar-thumb { background:
|
|
2251
|
+
::-webkit-scrollbar-thumb { background: var(--color-border-primary); border-radius: 3px; }
|
|
2252
|
+
|
|
2253
|
+
/* ── Theme Switcher ────────────────────────────────────────────────────────── */
|
|
2254
|
+
.settings-theme-card {
|
|
2255
|
+
background: var(--color-bg-secondary);
|
|
2256
|
+
border: 1px solid var(--color-border-primary);
|
|
2257
|
+
border-radius: 10px;
|
|
2258
|
+
padding: 16px 20px;
|
|
2259
|
+
display: flex;
|
|
2260
|
+
align-items: center;
|
|
2261
|
+
justify-content: space-between;
|
|
2262
|
+
gap: 16px;
|
|
2263
|
+
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
2264
|
+
}
|
|
2265
|
+
|
|
2266
|
+
.settings-theme-info {
|
|
2267
|
+
flex: 1;
|
|
2268
|
+
display: flex;
|
|
2269
|
+
flex-direction: column;
|
|
2270
|
+
gap: 4px;
|
|
2271
|
+
}
|
|
2272
|
+
|
|
2273
|
+
.settings-theme-label {
|
|
2274
|
+
font-size: 14px;
|
|
2275
|
+
font-weight: 600;
|
|
2276
|
+
color: var(--color-text-primary);
|
|
2277
|
+
transition: color 0.3s ease;
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
.settings-theme-desc {
|
|
2281
|
+
font-size: 13px;
|
|
2282
|
+
color: var(--color-text-secondary);
|
|
2283
|
+
line-height: 1.5;
|
|
2284
|
+
transition: color 0.3s ease;
|
|
2285
|
+
}
|
|
2286
|
+
|
|
2287
|
+
.btn-theme-toggle {
|
|
2288
|
+
display: flex;
|
|
2289
|
+
align-items: center;
|
|
2290
|
+
gap: 8px;
|
|
2291
|
+
padding: 8px 16px;
|
|
2292
|
+
background: var(--color-bg-tertiary);
|
|
2293
|
+
border: 1px solid var(--color-border-primary);
|
|
2294
|
+
border-radius: 8px;
|
|
2295
|
+
color: var(--color-text-primary);
|
|
2296
|
+
font-size: 14px;
|
|
2297
|
+
font-weight: 500;
|
|
2298
|
+
cursor: pointer;
|
|
2299
|
+
white-space: nowrap;
|
|
2300
|
+
flex-shrink: 0;
|
|
2301
|
+
transition: all 0.2s ease;
|
|
2302
|
+
}
|
|
2303
|
+
|
|
2304
|
+
.btn-theme-toggle:hover {
|
|
2305
|
+
background: var(--color-bg-hover);
|
|
2306
|
+
border-color: var(--color-accent-primary);
|
|
2307
|
+
transform: translateY(-1px);
|
|
2308
|
+
box-shadow: var(--shadow-sm);
|
|
2309
|
+
}
|
|
2310
|
+
|
|
2311
|
+
.btn-theme-toggle:active {
|
|
2312
|
+
transform: translateY(0);
|
|
2313
|
+
}
|
|
2314
|
+
|
|
2315
|
+
.btn-theme-toggle .theme-icon {
|
|
2316
|
+
font-size: 18px;
|
|
2317
|
+
line-height: 1;
|
|
2318
|
+
transition: transform 0.3s ease;
|
|
2319
|
+
}
|
|
2320
|
+
|
|
2321
|
+
.btn-theme-toggle:hover .theme-icon {
|
|
2322
|
+
transform: rotate(15deg) scale(1.1);
|
|
2323
|
+
}
|