Skip to content

Commit b8d2b63

Browse files
EvMossanEvMossan
committed
fix(ui): polished dark-mode colors and input bar
1 parent a38568a commit b8d2b63

File tree

1 file changed

+47
-56
lines changed

1 file changed

+47
-56
lines changed

‎templates/index.html‎

Lines changed: 47 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,99 +6,90 @@
66
<title>Waste Management Assistant</title>
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
88
<style>
9-
/* ──────────────────── CSS variables: light by default ─────────────────── */
9+
/* ─────────────────────── CSS variables ─────────────────────── */
10+
1011
:root {
11-
/* neutrals */
12+
/* neutrals (light mode) */
1213
--bg-body: #f5f5f5;
1314
--bg-card: #ffffff;
1415
--bg-chat: #e0e0e0;
1516
--bg-user: #aae3c2;
1617
--bg-assistant: #F6F6F9;
18+
--bg-input: #ffffff;
1719
--border: #dddddd;
1820
--scroll-track: #f1f1f1;
1921
--scroll-thumb: #cccccc;
2022

21-
/* accent */
23+
/* text / accent */
24+
--text-default: #202124;
25+
--text-inverse: #ffffff;
2226
--accent-pink: #EE125B;
2327
}
2428

25-
/* ──────────────────── automatic dark-mode palette ─────────────────────── */
29+
/* ─────────────── automatic dark-mode palette ─────────────── */
2630
@media (prefers-color-scheme: dark) {
2731
:root {
28-
--bg-body: #18191b;
29-
--bg-card: #202124;
30-
--bg-chat: #26272a;
31-
--bg-user: #2d4b3a;
32-
--bg-assistant: #323438;
33-
--border: #3b3c3f;
34-
--scroll-track: #1e1f21;
35-
--scroll-thumb: #575a5d;
36-
--accent-pink: #ff2e7a;
32+
--bg-body: #18191b;
33+
--bg-card: #202124;
34+
--bg-chat: #26272a;
35+
--bg-user: #2d4b3a;
36+
--bg-assistant: #323438;
37+
--bg-input: #2b2c2f;
38+
--border: #3b3c3f;
39+
--scroll-track: #1e1f21;
40+
--scroll-thumb: #575a5d;
41+
42+
--text-default: #e8e8e8;
43+
--text-inverse: #e8e8e8;
44+
--accent-pink: #ff2e7a;
3745
}
3846
}
3947

40-
/* ─────────────── base / mobile styles ─────────────── */
48+
/* ───────────────── base / mobile styles ───────────────── */
4149

42-
html, body {
43-
height: 100%;
44-
margin: 0;
45-
font-family: Arial, sans-serif;
46-
background-color: var(--bg-body);
47-
overflow: hidden;
50+
html,body{
51+
height:100%;margin:0;
52+
font-family:Arial,sans-serif;color:var(--text-default);
53+
background:var(--bg-body);overflow:hidden;
4854
}
4955

5056
.container{
51-
display:flex;
52-
flex-direction:column;
53-
height:100vh;
54-
width:100%;
55-
max-width:100vw;
56-
margin:0;
57-
box-sizing:border-box;
58-
background:var(--bg-card);
59-
border-radius:10px;
57+
display:flex;flex-direction:column;height:100vh;width:100%;
58+
max-width:100vw;margin:0;box-sizing:border-box;
59+
background:var(--bg-card);border-radius:10px;
6060
}
6161

6262
.chat-container{
63-
flex-grow:1;
64-
overflow-y:auto;
65-
background:var(--bg-chat);
66-
padding:10px;
67-
box-sizing:border-box;
68-
margin-bottom:70px;/* reserve space for input bar */
63+
flex-grow:1;overflow-y:auto;background:var(--bg-chat);
64+
padding:10px;box-sizing:border-box;margin-bottom:70px;
6965
}
7066

7167
.message{
72-
margin-bottom:10px;
73-
padding:10px 15px;
74-
border-radius:10px;
75-
word-wrap:break-word;
76-
max-width:80%;
77-
box-sizing:border-box;
78-
box-shadow:0 1px 3px rgba(0,0,0,0.1);
68+
margin-bottom:10px;padding:10px 15px;border-radius:10px;
69+
word-wrap:break-word;max-width:80%;box-sizing:border-box;
70+
box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--text-default);
7971
}
80-
8172
.user-message {background:var(--bg-user); align-self:flex-end;margin-left:auto;}
8273
.assistant-message{background:var(--bg-assistant); align-self:flex-start;margin-right:auto;}
8374

8475
.user-image{
85-
align-self:flex-end;margin-left:auto;
86-
max-width:200px;border:1px solid var(--border);
87-
border-radius:10px;display:block;margin-top:10px;margin-bottom:10px;
88-
background:transparent;box-shadow:none;padding:0;
76+
align-self:flex-end;margin-left:auto;max-width:200px;
77+
border:1px solid var(--border);border-radius:10px;display:block;
78+
margin:10px 0;background:transparent;box-shadow:none;
8979
}
9080

9181
.input-container{
9282
display:flex;align-items:flex-end;padding:10px;
93-
background:var(--bg-body);border-top:1px solid var(--border);
83+
background:var(--bg-input);border-top:1px solid var(--border);
9484
box-sizing:border-box;position:sticky;bottom:0;left:0;right:0;width:100%;
9585
}
9686

9787
.textarea-container{flex-grow:1;margin-left:10px;display:flex;flex-direction:column;}
9888

9989
textarea{
100-
width:100%;padding:10px 10px;font-size:16px;line-height:17px;
101-
border-radius:15px;border:1px solid var(--border);background:#fff;
90+
width:100%;padding:10px;font-size:16px;line-height:17px;
91+
border-radius:15px;border:1px solid var(--border);
92+
background:var(--bg-card);color:var(--text-default);
10293
resize:none;height:40px;max-height:150px;overflow-y:auto;box-sizing:border-box;
10394
}
10495

@@ -111,9 +102,9 @@
111102
.icon-button i,button#sendButton i{font-size:30px;color:var(--accent-pink);}
112103
button#sendButton:disabled{cursor:not-allowed;}
113104

114-
.chat-container::-webkit-scrollbar{width:8px;}
115-
.chat-container::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:5px;}
116-
.chat-container::-webkit-scrollbar-track{background:var(--scroll-track);}
105+
.chat-container::-webkit-scrollbar {width:8px;}
106+
.chat-container::-webkit-scrollbar-thumb {background:var(--scroll-thumb);border-radius:5px;}
107+
.chat-container::-webkit-scrollbar-track {background:var(--scroll-track);}
117108

118109
.image-thumbnail{
119110
position:relative;width:50px;height:50px;border-radius:5px;overflow:visible;
@@ -132,15 +123,15 @@
132123
max-width:900px;margin:0 auto;border:1px solid var(--border);
133124
}
134125
.chat-container{
135-
margin:20px;margin-bottom:90px;border-radius:12px;
136-
background:var(--bg-chat);box-shadow:0 2px 6px rgba(0,0,0,.06);
126+
margin:20px;margin-bottom:90px;border-radius:12px;background:var(--bg-chat);
127+
box-shadow:0 2px 6px rgba(0,0,0,.06);
137128
}
138129
.message {max-width:60%;font-size:15px;}
139130
.user-image{max-width:250px;}
140131

141132
.input-container{
142133
position:static;width:auto;margin:0 20px 20px;
143-
border:1px solid var(--border);border-radius:12px;
134+
border:1px solid var(--border);border-radius:12px;background:var(--bg-input);
144135
}
145136
textarea{font-size:15px;padding:12px;}
146137
.icon-button i,#sendButton i{font-size:26px;}

0 commit comments

Comments
 (0)