light mode colors rework
3clyp50 committed
Jan 4, 2026 at 03:39 UTC
6d4c6bb4e9bced72482c1dbc085be67187c902cc
9 files changed
+51
-51
webui/components/chat/input/bottom-actions.html
+1
-1
@@ -84,7 +84,7 @@
84
<style>
85
.text-buttons-row { width: 100%; display: flex; padding-top: var(--spacing-xs); margin-left: var(--spacing-xs); }
86
.text-button { background-color: transparent; border: none; border-radius: 5px; color: var(--color-text); font-family: "Rubik", Arial, Helvetica, sans-serif; font-size: 0.6rem; padding: 6px var(--spacing-sm); cursor: pointer; opacity: 0.8; -webkit-transition: all 0.3s; transition: all 0.3s; display: flex; align-items: center; gap: var(--spacing-xs); }
87
- .text-button:hover:not(:disabled) { opacity: 1; background-color: var(--color-secondary); border-radius: 4px; }
87
+ .text-button:hover:not(:disabled) { opacity: 1; background-color: var(--color-background-hover); border-radius: 4px; }
88
.text-button:active:not(:disabled) { opacity: 0.5; }
89
.text-button:disabled { opacity: 0.4; cursor: not-allowed; }
90
.text-button svg { width: 14px; height: 14px; flex-shrink: 0; }
webui/components/sidebar/left-sidebar.html
+4
@@ -168,6 +168,10 @@
168
cursor: pointer;
169
}
170
171
+ .light-mode #left-panel {
172
+ box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1);
173
+ }
174
+
175
@media (max-width: 768px) {
176
#left-panel {
177
position: fixed;
webui/components/sidebar/tasks/tasks-list.html
-1
@@ -135,7 +135,6 @@
135
}
136
137
.task-name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 0; cursor: pointer; border-radius: 4px; transition: background-color 0.2s; font-size: var(--font-size-small); margin-bottom: 2px; }
138
- .light-mode .task-name:hover { background-color: rgba(0,0,0,0.05); }
138
139
.task-info-line { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 2px; }
140
.task-actions { display: flex; gap: 0.375rem; margin-left: auto; }
webui/components/sidebar/top-section/header-icons.html
+1
-1
@@ -39,7 +39,7 @@
39
-webkit-transition: all var(--transition-speed) ease-in-out;
40
transition: all var(--transition-speed) ease-in-out;
41
}
42
- .toggle-sidebar-button:hover { background-color: var(--color-secondary); opacity: 1; }
42
+ .toggle-sidebar-button:hover { background-color: var(--color-background-hover); opacity: 1; }
43
.toggle-sidebar-button:active { opacity: 0.5; }
44
.toggle-sidebar-button .material-symbols-outlined {
45
font-size: 22px;
webui/components/sidebar/top-section/quick-actions.html
+3
-8
@@ -165,7 +165,7 @@
165
}
166
167
.config-button:hover {
168
- background-color: var(--color-secondary);
168
+ background-color: var(--color-background-hover);
169
opacity: 1;
170
z-index: 1;
171
position: relative;
@@ -234,13 +234,8 @@
234
color: #333333;
235
}
236
237
- .light-mode .config-button:hover {
238
- background-color: #d6dae8;
239
- }
240
-
241
- .light-mode .config-button:active {
242
- background-color: #bdc0cb;
243
- }
237
+ .light-mode .config-button:hover { background-color: var(--color-background-hover); }
238
+ .light-mode .config-button:active { background-color: var(--color-background-hover); }
239
240
/* Transition helpers */
241
.-translate-y-1 { transform: translateY(-0.25rem); }
webui/css/buttons.css
+4
-4
@@ -3,7 +3,7 @@
3
background: var(--color-panel);
4
font-weight: 500;
5
padding: 0.5rem 1.5rem;
6
- border-radius: 0.25rem;
6
+ border-radius: 6px;
7
cursor: pointer;
8
border: 1px solid var(--color-border);
9
color: var(--color-text);
@@ -213,12 +213,12 @@
213
214
.btn-icon-action:hover {
215
border-color: var(--color-primary);
216
- background-color: rgba(50, 69, 86, 0.56);
216
+ background-color: var(--color-background-hover);
217
}
218
219
.btn-icon-action:active {
220
- background-color: rgba(19, 26, 32, 0.56);
221
- color: rgba(253, 253, 253, 0.35);
220
+ background-color: var(--color-background-hover);
221
+ color: var(--color-primary);
222
}
223
224
.btn-icon-action.danger:hover {
webui/css/modals.css
+15
-2
@@ -381,29 +381,42 @@ input[type="range"] {
381
background: var(--color-border);
382
border-radius: 2px;
383
outline: none;
384
+ transition: all 0.2s ease;
385
}
386
input[type="range"]::-webkit-slider-thumb {
387
-webkit-appearance: none;
388
appearance: none;
389
width: 16px;
390
height: 16px;
390
- background: var(--color-text);
391
+ background: var(--color-primary);
392
border-radius: 50%;
393
cursor: pointer;
394
+ transition: all 0.2s ease;
395
}
396
+
397
input[type="range"]::-moz-range-thumb {
398
width: 16px;
399
height: 16px;
397
- background: var(--color-text);
400
+ background: var(--color-primary);
401
border-radius: 50%;
402
cursor: pointer;
403
border: none;
404
+ transition: all 0.2s ease;
405
}
406
+
407
.range-value {
408
min-width: 3em;
409
text-align: right;
410
}
411
412
+/* Light mode overrides */
413
+.light-mode input[type="range"]::-webkit-slider-thumb {
414
+ background: #777;
415
+}
416
+.light-mode input[type="range"]::-moz-range-thumb {
417
+ background: #777;
418
+}
419
+
420
/* Responsive Design */
421
@media (max-width: 1280px) {
422
.modal-container {
webui/css/settings.css
+13
-27
@@ -47,7 +47,7 @@ textarea,
47
select {
48
width: 100%;
49
padding: 0.5rem;
50
- border: 1px solid var(--color-secondary);
50
+ border: 1px solid var(--color-border);
51
border-radius: 0.25rem;
52
background-color: var(--color-background);
53
color: var(--color-text);
@@ -56,11 +56,6 @@ select {
56
transition: all 0.3s ease;
57
}
58
59
-input[type="text"]:focus,
60
-input[type="password"]:focus {
61
- opacity: 1;
62
-}
63
-
59
textarea {
60
min-height: 100px;
61
font-family: 'Roboto Mono', monospace;
@@ -69,8 +64,19 @@ textarea {
64
background-clip: border-box;
65
}
66
67
+input[type="text"]:focus,
68
+input[type="number"]:focus,
69
+input[type="password"]:focus,
70
textarea:focus {
73
- background-color: #151515;
71
+ background-color: var(--color-background);
72
+ filter: brightness(1.2);
73
+}
74
+
75
+.light-mode input[type="text"]:focus,
76
+.light-mode input[type="number"]:focus,
77
+.light-mode input[type="password"]:focus,
78
+.light-mode textarea:focus {
79
+ filter: brightness(1.1);
80
}
81
82
/* Button Disabled State */
@@ -324,26 +330,6 @@ nav ul li a img {
330
max-width: 150px;
331
}
332
327
-/* Light mode overrides */
328
-.light-mode .settings-tab.active {
329
- /* color: var(--color-border); */
330
- /* box-shadow:
331
- 0 -4px 8px -2px var(--color-border),
332
- 4px 0 8px -2px var(--color-border),
333
- -4px 0 8px -2px var(--color-border); */
334
-}
335
-
336
-.light-mode .settings-tab:not(.active) {
337
- background-color: rgba(0, 0, 0, 0.03);
338
-}
339
-
340
-.light-mode .settings-tabs::before {
341
- background: linear-gradient(to right, var(--color-panel-light), transparent);
342
-}
343
-
344
-.light-mode .settings-tabs::after {
345
- background: linear-gradient(to left, var(--color-panel-light), transparent);
346
-}
333
334
/* Responsive Design for Settings Tabs */
335
@media (max-width: 640px) {
webui/index.css
+10
-7
@@ -23,7 +23,7 @@
23
--color-input-focus-dark: #101010;
24
25
/* Light mode */
26
- --color-background-light: #dbdbdb;
26
+ --color-background-light: #fafafa;
27
--color-text-light: #333333;
28
--color-primary-light: #384653;
29
--color-secondary-light: #e8eaf6;
@@ -32,7 +32,7 @@
32
--color-highlight-light: #2563eb;
33
--color-message-text-light: #333333;
34
--color-panel-light: #f0f0f0;
35
- --color-border-light: #e0e0e0c7;
35
+ --color-border-light: #bdbdbdcf;
36
--color-input-light: #e4e4e4;
37
--color-input-focus-light: #dadada;
38
@@ -1397,7 +1397,7 @@ nav ul li a img {
1397
top: 100%;
1398
right: 0;
1399
min-width: 180px;
1400
- max-height: 400px;
1400
+ max-height: 70vh;
1401
overflow-y: auto;
1402
background-color: var(--color-panel);
1403
border: 1px solid var(--color-border);
@@ -1435,7 +1435,6 @@ nav ul li a img {
1435
.dropdown-item:hover {
1436
background-color: var(--color-background-hover);
1437
opacity: 1;
1438
- transform: translateX(-2px);
1438
}
1439
1440
.dropdown-item:active {
@@ -1455,6 +1454,12 @@ nav ul li a img {
1454
opacity: 0.8;
1455
}
1456
1457
+.dropdown-item .material-symbols-outlined {
1458
+ font-size: 18px;
1459
+ flex-shrink: 0;
1460
+ opacity: 0.8;
1461
+}
1462
+
1463
/* Dropdown separator */
1464
.dropdown-separator {
1465
height: 1px;
@@ -1477,6 +1482,4 @@ nav ul li a img {
1482
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
1483
}
1484
1480
-.light-mode .dropdown-item:hover {
1481
- background-color: var(--color-secondary);
1482
-}
1485
+.light-mode .dropdown-item:hover { background-color: var(--color-background-hover); }