Hugging Face's logo

Spaces:
akhaliq
/
anycoder-ddc254a1
Running

App Files Community
akhaliq HF Staff commited on
Commit
541c548
·
verified ·
1 Parent(s): 52527f0

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +260 -42
style.css CHANGED
@@ -1,76 +1,294 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  * {
2
  box-sizing: border-box;
3
- padding: 0;
4
  margin: 0;
5
- font-family: sans-serif;
6
  }
7
 
8
- html,
9
  body {
 
 
 
 
 
 
 
 
 
 
 
10
  height: 100%;
 
 
 
 
 
11
  }
12
 
13
- body {
14
- padding: 32px;
 
 
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
 
 
19
  display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
  align-items: center;
 
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
 
 
 
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  cursor: pointer;
38
- margin: 1rem;
 
 
 
 
 
 
 
 
 
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
 
 
 
 
 
44
  }
45
 
46
- #upload {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  display: none;
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
 
 
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
 
 
 
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
 
68
  }
69
 
70
- .bounding-box-label {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
 
1
+ :root {
2
+ --primary-color: #2563eb;
3
+ --primary-hover: #1d4ed8;
4
+ --bg-color: #f8fafc;
5
+ --chat-bg: #ffffff;
6
+ --user-bubble: #2563eb;
7
+ --user-text: #ffffff;
8
+ --bot-bubble: #f1f5f9;
9
+ --bot-text: #1e293b;
10
+ --border-color: #e2e8f0;
11
+ --text-muted: #64748b;
12
+ }
13
+
14
  * {
15
  box-sizing: border-box;
 
16
  margin: 0;
17
+ padding: 0;
18
  }
19
 
 
20
  body {
21
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
22
+ background-color: var(--bg-color);
23
+ color: #0f172a;
24
+ height: 100vh;
25
+ display: flex;
26
+ justify-content: center;
27
+ }
28
+
29
+ .app-container {
30
+ width: 100%;
31
+ max-width: 900px;
32
  height: 100%;
33
+ background-color: var(--chat-bg);
34
+ display: flex;
35
+ flex-direction: column;
36
+ box-shadow: 0 0 20px rgba(0,0,0,0.05);
37
+ position: relative;
38
  }
39
 
40
+ /* Header */
41
+ header {
42
+ padding: 1rem;
43
+ border-bottom: 1px solid var(--border-color);
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ background: #fff;
48
+ z-index: 10;
49
  }
50
 
51
+ .header-content h1 {
52
+ font-size: 1.25rem;
53
+ font-weight: 700;
54
+ color: #1e293b;
55
  display: flex;
 
 
56
  align-items: center;
57
+ gap: 0.5rem;
58
  }
59
 
60
+ .attribution {
61
+ font-size: 0.75rem;
62
+ color: var(--text-muted);
63
+ text-decoration: none;
64
+ font-weight: 500;
65
+ margin-top: 0.2rem;
66
+ display: block;
67
+ }
68
 
69
+ .attribution:hover {
70
+ color: var(--primary-color);
71
+ text-decoration: underline;
72
+ }
73
 
74
+ .controls {
75
+ display: flex;
76
+ gap: 0.5rem;
77
+ align-items: center;
78
+ }
79
+
80
+ .select-wrapper {
81
+ display: flex;
82
+ flex-direction: column;
83
+ font-size: 0.75rem;
84
+ }
85
+
86
+ .select-wrapper label {
87
+ color: var(--text-muted);
88
+ margin-bottom: 2px;
89
+ }
90
+
91
+ select {
92
+ padding: 0.25rem;
93
+ border: 1px solid var(--border-color);
94
+ border-radius: 4px;
95
+ font-size: 0.8rem;
96
+ background: #fff;
97
+ }
98
+
99
+ #reset-btn {
100
+ background: none;
101
+ border: 1px solid var(--border-color);
102
  cursor: pointer;
103
+ padding: 0.5rem;
104
+ border-radius: 6px;
105
+ color: var(--text-muted);
106
+ transition: all 0.2s;
107
+ }
108
+
109
+ #reset-btn:hover {
110
+ background: #f1f5f9;
111
+ color: #ef4444;
112
+ }
113
 
114
+ /* Chat Area */
115
+ main {
116
+ flex: 1;
117
+ overflow-y: auto;
118
+ padding: 1rem;
119
+ display: flex;
120
+ flex-direction: column;
121
+ gap: 1rem;
122
+ scroll-behavior: smooth;
123
  }
124
 
125
+ .welcome-message {
126
+ text-align: center;
127
+ margin-top: 2rem;
128
+ color: var(--text-muted);
129
+ }
130
+
131
+ .welcome-message h2 {
132
+ color: #334155;
133
+ margin-bottom: 0.5rem;
134
+ }
135
+
136
+ .note {
137
+ font-size: 0.85rem;
138
+ background: #fff7ed;
139
+ color: #c2410c;
140
+ display: inline-block;
141
+ padding: 0.25rem 0.5rem;
142
+ border-radius: 4px;
143
+ margin-top: 0.5rem;
144
+ }
145
+
146
+ /* Messages */
147
+ .message {
148
+ display: flex;
149
+ width: 100%;
150
+ }
151
+
152
+ .message.user {
153
+ justify-content: flex-end;
154
+ }
155
+
156
+ .message.assistant {
157
+ justify-content: flex-start;
158
+ }
159
+
160
+ .bubble {
161
+ max-width: 80%;
162
+ padding: 0.75rem 1rem;
163
+ border-radius: 1rem;
164
+ line-height: 1.5;
165
+ font-size: 0.95rem;
166
+ word-wrap: break-word;
167
+ white-space: pre-wrap;
168
+ position: relative;
169
+ }
170
+
171
+ .message.user .bubble {
172
+ background-color: var(--user-bubble);
173
+ color: var(--user-text);
174
+ border-bottom-right-radius: 0.25rem;
175
+ }
176
+
177
+ .message.assistant .bubble {
178
+ background-color: var(--bot-bubble);
179
+ color: var(--bot-text);
180
+ border-bottom-left-radius: 0.25rem;
181
+ }
182
+
183
+ .bubble.streaming::after {
184
+ content: '▋';
185
+ display: inline-block;
186
+ animation: blink 1s infinite;
187
+ margin-left: 2px;
188
+ }
189
+
190
+ @keyframes blink {
191
+ 0%, 100% { opacity: 1; }
192
+ 50% { opacity: 0; }
193
+ }
194
+
195
+ /* Status Bar */
196
+ #status-bar {
197
+ padding: 0.5rem 1rem;
198
+ background: #f8fafc;
199
+ border-top: 1px solid var(--border-color);
200
+ font-size: 0.8rem;
201
+ }
202
+
203
+ .hidden {
204
  display: none;
205
  }
206
 
207
+ .status-text {
208
+ margin-bottom: 0.25rem;
209
+ color: var(--text-muted);
210
  }
211
 
212
+ .progress-container {
213
+ width: 100%;
214
+ height: 4px;
215
+ background: #e2e8f0;
216
+ border-radius: 2px;
217
+ overflow: hidden;
218
  }
219
 
220
+ .progress-bar {
221
+ height: 100%;
222
+ background: var(--primary-color);
223
+ width: 0%;
224
+ transition: width 0.2s ease;
225
  }
226
 
227
+ /* Footer / Input */
228
+ footer {
229
+ padding: 1rem;
230
+ background: #fff;
231
+ border-top: 1px solid var(--border-color);
232
  }
233
 
234
+ #chat-form {
235
+ display: flex;
236
+ gap: 0.5rem;
237
+ align-items: flex-end;
238
+ background: #f8fafc;
239
+ padding: 0.5rem;
240
+ border-radius: 0.75rem;
241
+ border: 1px solid var(--border-color);
242
+ }
243
+
244
+ textarea {
245
+ flex: 1;
246
+ border: none;
247
+ background: transparent;
248
+ resize: none;
249
+ outline: none;
250
+ padding: 0.5rem;
251
+ font-family: inherit;
252
+ font-size: 0.95rem;
253
+ max-height: 150px;
254
+ color: #334155;
255
+ }
256
+
257
+ button#send-btn {
258
+ background: var(--primary-color);
259
  color: white;
260
+ border: none;
261
+ width: 36px;
262
+ height: 36px;
263
+ border-radius: 50%;
264
+ cursor: pointer;
265
+ display: flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ transition: background 0.2s;
269
+ }
270
+
271
+ button#send-btn:hover:not(:disabled) {
272
+ background: var(--primary-hover);
273
+ }
274
+
275
+ button#send-btn:disabled {
276
+ background: #94a3b8;
277
+ cursor: not-allowed;
278
+ }
279
+
280
+ /* Responsive */
281
+ @media (max-width: 600px) {
282
+ .app-container {
283
+ height: 100%;
284
+ max-width: 100%;
285
+ }
286
+
287
+ .bubble {
288
+ max-width: 90%;
289
+ }
290
+
291
+ .controls span {
292
+ display: none;
293
+ }
294
  }