Hugging Face's logo

Spaces:
luguog
/
anycoder-4d476bdf
Running

App Files Community
luguog commited on
Commit
582dfd6
·
verified ·
1 Parent(s): fcac8fd

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +231 -180
style.css CHANGED
@@ -1,299 +1,350 @@
1
  :root {
2
- --bg-primary: #0d1117;
3
- --bg-secondary: #161b22;
4
- --bg-tertiary: #21262d;
5
- --text-primary: #c9d1d9;
6
- --text-secondary: #8b949e;
7
- --accent-primary: #58a6ff;
8
- --accent-success: #3fb950;
9
- --accent-error: #f85149;
10
- --border-color: #30363d;
 
11
  }
12
 
13
  * {
14
- margin: 0;
15
- padding: 0;
16
- box-sizing: border-box;
17
  }
18
 
19
  body {
20
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
21
- background-color: var(--bg-primary);
22
- color: var(--text-primary);
23
- line-height: 1.5;
24
  }
25
 
26
  .container {
27
- max-width: 1200px;
28
- margin: 0 auto;
29
- padding: 2rem;
30
- min-height: 100vh;
31
- display: flex;
32
- flex-direction: column;
33
  }
34
 
35
  header {
36
- text-align: center;
37
- margin-bottom: 2rem;
38
  }
39
 
40
  header h1 {
41
- font-size: 2.5rem;
42
- font-weight: 700;
43
- margin-bottom: 0.5rem;
44
  }
45
 
46
  .subtitle {
47
- color: var(--text-secondary);
48
- font-size: 1.1rem;
49
- margin-bottom: 1rem;
50
  }
51
 
52
  .attribution a {
53
- display: inline-block;
54
- padding: 0.5rem 1rem;
55
- background-color: var(--bg-secondary);
56
- color: var(--accent-primary);
57
- text-decoration: none;
58
- border-radius: 6px;
59
- font-size: 0.9rem;
60
- font-weight: 500;
61
- transition: all 0.2s;
62
  }
63
 
64
  .attribution a:hover {
65
- background-color: var(--bg-tertiary);
66
- text-decoration: underline;
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  }
68
 
69
  main {
70
- flex: 1;
71
  }
72
 
73
  .input-section {
74
- background-color: var(--bg-secondary);
75
- padding: 1.5rem;
76
- border-radius: 8px;
77
- border: 1px solid var(--border-color);
78
- margin-bottom: 2rem;
79
  }
80
 
81
  .input-section label {
82
- display: block;
83
- margin-bottom: 0.5rem;
84
- font-weight: 500;
85
- color: var(--text-primary);
86
  }
87
 
88
  textarea {
89
- width: 100%;
90
- padding: 0.75rem;
91
- background-color: var(--bg-primary);
92
- color: var(--text-primary);
93
- border: 1px solid var(--border-color);
94
- border-radius: 6px;
95
- font-size: 1rem;
96
- font-family: inherit;
97
- resize: vertical;
98
- transition: border-color 0.2s;
99
  }
100
 
101
  textarea:focus {
102
- outline: none;
103
- border-color: var(--accent-primary);
104
  }
105
 
106
  .controls {
107
- display: flex;
108
- justify-content: space-between;
109
- align-items: flex-end;
110
- margin-top: 1rem;
111
- gap: 1rem;
112
  }
113
 
114
  .language-selector {
115
- flex: 1;
116
  }
117
 
118
  .language-selector label {
119
- display: inline-block;
120
- margin-right: 0.5rem;
121
- margin-bottom: 0;
122
  }
123
 
124
  select {
125
- padding: 0.5rem 0.75rem;
126
- background-color: var(--bg-primary);
127
- color: var(--text-primary);
128
- border: 1px solid var(--border-color);
129
- border-radius: 6px;
130
- font-size: 0.95rem;
131
  }
132
 
133
  .generate-btn {
134
- padding: 0.75rem 2rem;
135
- background-color: var(--accent-primary);
136
- color: white;
137
- border: none;
138
- border-radius: 6px;
139
- font-size: 1rem;
140
- font-weight: 600;
141
- cursor: pointer;
142
- transition: all 0.2s;
143
- display: flex;
144
- align-items: center;
145
- gap: 0.5rem;
146
- min-width: 150px;
147
- justify-content: center;
148
  }
149
 
150
  .generate-btn:hover:not(:disabled) {
151
- background-color: #4493f8;
152
  }
153
 
154
  .generate-btn:disabled {
155
- opacity: 0.6;
156
- cursor: not-allowed;
157
  }
158
 
159
  .btn-spinner {
160
- width: 16px;
161
- height: 16px;
162
- border: 2px solid transparent;
163
- border-top: 2px solid white;
164
- border-radius: 50%;
165
- animation: spin 1s linear infinite;
166
  }
167
 
168
  @keyframes spin {
169
- 0% { transform: rotate(0deg); }
170
- 100% { transform: rotate(360deg); }
171
  }
172
 
173
  .loading-section {
174
- background-color: var(--bg-secondary);
175
- padding: 2rem;
176
- border-radius: 8px;
177
- border: 1px solid var(--border-color);
178
- text-align: center;
179
- margin-bottom: 2rem;
180
  }
181
 
182
  .progress-container {
183
- width: 100%;
184
- height: 8px;
185
- background-color: var(--bg-primary);
186
- border-radius: 4px;
187
- overflow: hidden;
188
- margin-bottom: 1rem;
189
  }
190
 
191
  .progress-bar {
192
- height: 100%;
193
- background-color: var(--accent-primary);
194
- width: 0%;
195
- transition: width 0.3s ease;
196
  }
197
 
198
  .loading-text {
199
- color: var(--text-secondary);
 
 
 
 
 
 
200
  }
201
 
202
  .error-section {
203
- background-color: rgba(248, 81, 73, 0.1);
204
- border: 1px solid var(--accent-error);
205
- padding: 1rem;
206
- border-radius: 8px;
207
- margin-bottom: 2rem;
 
 
 
 
208
  }
209
 
210
  .error-text {
211
- color: var(--accent-error);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  }
213
 
214
  .output-section {
215
- background-color: var(--bg-secondary);
216
- border-radius: 8px;
217
- border: 1px solid var(--border-color);
218
- overflow: hidden;
219
  }
220
 
221
  .output-header {
222
- display: flex;
223
- justify-content: space-between;
224
- align-items: center;
225
- padding: 1rem 1.5rem;
226
- background-color: var(--bg-tertiary);
227
- border-bottom: 1px solid var(--border-color);
228
  }
229
 
230
  .output-header span {
231
- font-weight: 600;
232
- color: var(--text-primary);
233
  }
234
 
235
  .copy-btn {
236
- padding: 0.5rem 1rem;
237
- background-color: var(--bg-primary);
238
- color: var(--text-primary);
239
- border: 1px solid var(--border-color);
240
- border-radius: 6px;
241
- cursor: pointer;
242
- font-size: 0.9rem;
243
- transition: all 0.2s;
244
  }
245
 
246
  .copy-btn:hover {
247
- background-color: var(--accent-primary);
248
- color: white;
249
- border-color: var(--accent-primary);
250
  }
251
 
252
  pre {
253
- margin: 0;
254
- padding: 1.5rem;
255
- overflow-x: auto;
256
- background-color: var(--bg-primary) !important;
257
  }
258
 
259
  code {
260
- font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
261
- font-size: 0.9rem;
262
  }
263
 
264
  footer {
265
- text-align: center;
266
- margin-top: 2rem;
267
- padding-top: 2rem;
268
- border-top: 1px solid var(--border-color);
269
- color: var(--text-secondary);
270
- font-size: 0.9rem;
271
  }
272
 
273
  footer a {
274
- color: var(--accent-primary);
275
- text-decoration: none;
276
  }
277
 
278
  footer a:hover {
279
- text-decoration: underline;
280
  }
281
 
282
  @media (max-width: 768px) {
283
- .container {
284
- padding: 1rem;
285
- }
286
-
287
- header h1 {
288
- font-size: 2rem;
289
- }
290
-
291
- .controls {
292
- flex-direction: column;
293
- align-items: stretch;
294
- }
295
-
296
- .generate-btn {
297
- width: 100%;
298
- }
 
 
 
 
 
 
 
 
 
 
299
  }
 
1
  :root {
2
+ --bg-primary: #0d1117;
3
+ --bg-secondary: #161b22;
4
+ --bg-tertiary: #21262d;
5
+ --text-primary: #c9d1d9;
6
+ --text-secondary: #8b949e;
7
+ --accent-primary: #58a6ff;
8
+ --accent-success: #3fb950;
9
+ --accent-error: #f85149;
10
+ --border-color: #30363d;
11
+ --warning-color: #d29922;
12
  }
13
 
14
  * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
  }
19
 
20
  body {
21
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
22
+ background-color: var(--bg-primary);
23
+ color: var(--text-primary);
24
+ line-height: 1.5;
25
  }
26
 
27
  .container {
28
+ max-width: 1200px;
29
+ margin: 0 auto;
30
+ padding: 2rem;
31
+ min-height: 100vh;
32
+ display: flex;
33
+ flex-direction: column;
34
  }
35
 
36
  header {
37
+ text-align: center;
38
+ margin-bottom: 2rem;
39
  }
40
 
41
  header h1 {
42
+ font-size: 2.5rem;
43
+ font-weight: 700;
44
+ margin-bottom: 0.5rem;
45
  }
46
 
47
  .subtitle {
48
+ color: var(--text-secondary);
49
+ font-size: 1.1rem;
50
+ margin-bottom: 1rem;
51
  }
52
 
53
  .attribution a {
54
+ display: inline-block;
55
+ padding: 0.5rem 1rem;
56
+ background-color: var(--bg-secondary);
57
+ color: var(--accent-primary);
58
+ text-decoration: none;
59
+ border-radius: 6px;
60
+ font-size: 0.9rem;
61
+ font-weight: 500;
62
+ transition: all 0.2s;
63
  }
64
 
65
  .attribution a:hover {
66
+ background-color: var(--bg-tertiary);
67
+ text-decoration: underline;
68
+ }
69
+
70
+ .model-info {
71
+ background-color: rgba(210, 153, 34, 0.1);
72
+ border: 1px solid var(--warning-color);
73
+ padding: 1rem;
74
+ border-radius: 8px;
75
+ margin-bottom: 1.5rem;
76
+ }
77
+
78
+ .model-info p {
79
+ color: var(--warning-color);
80
+ font-size: 0.9rem;
81
  }
82
 
83
  main {
84
+ flex: 1;
85
  }
86
 
87
  .input-section {
88
+ background-color: var(--bg-secondary);
89
+ padding: 1.5rem;
90
+ border-radius: 8px;
91
+ border: 1px solid var(--border-color);
92
+ margin-bottom: 2rem;
93
  }
94
 
95
  .input-section label {
96
+ display: block;
97
+ margin-bottom: 0.5rem;
98
+ font-weight: 500;
99
+ color: var(--text-primary);
100
  }
101
 
102
  textarea {
103
+ width: 100%;
104
+ padding: 0.75rem;
105
+ background-color: var(--bg-primary);
106
+ color: var(--text-primary);
107
+ border: 1px solid var(--border-color);
108
+ border-radius: 6px;
109
+ font-size: 1rem;
110
+ font-family: inherit;
111
+ resize: vertical;
112
+ transition: border-color 0.2s;
113
  }
114
 
115
  textarea:focus {
116
+ outline: none;
117
+ border-color: var(--accent-primary);
118
  }
119
 
120
  .controls {
121
+ display: flex;
122
+ justify-content: space-between;
123
+ align-items: flex-end;
124
+ margin-top: 1rem;
125
+ gap: 1rem;
126
  }
127
 
128
  .language-selector {
129
+ flex: 1;
130
  }
131
 
132
  .language-selector label {
133
+ display: inline-block;
134
+ margin-right: 0.5rem;
135
+ margin-bottom: 0;
136
  }
137
 
138
  select {
139
+ padding: 0.5rem 0.75rem;
140
+ background-color: var(--bg-primary);
141
+ color: var(--text-primary);
142
+ border: 1px solid var(--border-color);
143
+ border-radius: 6px;
144
+ font-size: 0.95rem;
145
  }
146
 
147
  .generate-btn {
148
+ padding: 0.75rem 2rem;
149
+ background-color: var(--accent-primary);
150
+ color: white;
151
+ border: none;
152
+ border-radius: 6px;
153
+ font-size: 1rem;
154
+ font-weight: 600;
155
+ cursor: pointer;
156
+ transition: all 0.2s;
157
+ display: flex;
158
+ align-items: center;
159
+ gap: 0.5rem;
160
+ min-width: 150px;
161
+ justify-content: center;
162
  }
163
 
164
  .generate-btn:hover:not(:disabled) {
165
+ background-color: #4493f8;
166
  }
167
 
168
  .generate-btn:disabled {
169
+ opacity: 0.6;
170
+ cursor: not-allowed;
171
  }
172
 
173
  .btn-spinner {
174
+ width: 16px;
175
+ height: 16px;
176
+ border: 2px solid transparent;
177
+ border-top: 2px solid white;
178
+ border-radius: 50%;
179
+ animation: spin 1s linear infinite;
180
  }
181
 
182
  @keyframes spin {
183
+ 0% { transform: rotate(0deg); }
184
+ 100% { transform: rotate(360deg); }
185
  }
186
 
187
  .loading-section {
188
+ background-color: var(--bg-secondary);
189
+ padding: 2rem;
190
+ border-radius: 8px;
191
+ border: 1px solid var(--border-color);
192
+ text-align: center;
193
+ margin-bottom: 2rem;
194
  }
195
 
196
  .progress-container {
197
+ width: 100%;
198
+ height: 8px;
199
+ background-color: var(--bg-primary);
200
+ border-radius: 4px;
201
+ overflow: hidden;
202
+ margin-bottom: 1rem;
203
  }
204
 
205
  .progress-bar {
206
+ height: 100%;
207
+ background-color: var(--accent-primary);
208
+ width: 0%;
209
+ transition: width 0.3s ease;
210
  }
211
 
212
  .loading-text {
213
+ color: var(--text-secondary);
214
+ margin-bottom: 0.25rem;
215
+ }
216
+
217
+ .loading-subtext {
218
+ color: var(--text-secondary);
219
+ font-size: 0.85rem;
220
  }
221
 
222
  .error-section {
223
+ background-color: rgba(248, 81, 73, 0.1);
224
+ border: 1px solid var(--accent-error);
225
+ padding: 1rem;
226
+ border-radius: 8px;
227
+ margin-bottom: 2rem;
228
+ display: flex;
229
+ justify-content: space-between;
230
+ align-items: center;
231
+ gap: 1rem;
232
  }
233
 
234
  .error-text {
235
+ color: var(--accent-error);
236
+ flex: 1;
237
+ }
238
+
239
+ .dismiss-btn {
240
+ padding: 0.5rem 1rem;
241
+ background-color: var(--accent-error);
242
+ color: white;
243
+ border: none;
244
+ border-radius: 6px;
245
+ cursor: pointer;
246
+ font-size: 0.9rem;
247
+ transition: opacity 0.2s;
248
+ white-space: nowrap;
249
+ }
250
+
251
+ .dismiss-btn:hover {
252
+ opacity: 0.8;
253
  }
254
 
255
  .output-section {
256
+ background-color: var(--bg-secondary);
257
+ border-radius: 8px;
258
+ border: 1px solid var(--border-color);
259
+ overflow: hidden;
260
  }
261
 
262
  .output-header {
263
+ display: flex;
264
+ justify-content: space-between;
265
+ align-items: center;
266
+ padding: 1rem 1.5rem;
267
+ background-color: var(--bg-tertiary);
268
+ border-bottom: 1px solid var(--border-color);
269
  }
270
 
271
  .output-header span {
272
+ font-weight: 600;
273
+ color: var(--text-primary);
274
  }
275
 
276
  .copy-btn {
277
+ padding: 0.5rem 1rem;
278
+ background-color: var(--bg-primary);
279
+ color: var(--text-primary);
280
+ border: 1px solid var(--border-color);
281
+ border-radius: 6px;
282
+ cursor: pointer;
283
+ font-size: 0.9rem;
284
+ transition: all 0.2s;
285
  }
286
 
287
  .copy-btn:hover {
288
+ background-color: var(--accent-primary);
289
+ color: white;
290
+ border-color: var(--accent-primary);
291
  }
292
 
293
  pre {
294
+ margin: 0;
295
+ padding: 1.5rem;
296
+ overflow-x: auto;
297
+ background-color: var(--bg-primary) !important;
298
  }
299
 
300
  code {
301
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
302
+ font-size: 0.9rem;
303
  }
304
 
305
  footer {
306
+ text-align: center;
307
+ margin-top: 2rem;
308
+ padding-top: 2rem;
309
+ border-top: 1px solid var(--border-color);
310
+ color: var(--text-secondary);
311
+ font-size: 0.9rem;
312
  }
313
 
314
  footer a {
315
+ color: var(--accent-primary);
316
+ text-decoration: none;
317
  }
318
 
319
  footer a:hover {
320
+ text-decoration: underline;
321
  }
322
 
323
  @media (max-width: 768px) {
324
+ .container {
325
+ padding: 1rem;
326
+ }
327
+
328
+ header h1 {
329
+ font-size: 2rem;
330
+ }
331
+
332
+ .controls {
333
+ flex-direction: column;
334
+ align-items: stretch;
335
+ }
336
+
337
+ .generate-btn {
338
+ width: 100%;
339
+ }
340
+
341
+ .error-section {
342
+ flex-direction: column;
343
+ align-items: flex-start;
344
+ }
345
+
346
+ .dismiss-btn {
347
+ width: 100%;
348
+ margin-top: 0.5rem;
349
+ }
350
  }