Hugging Face's logo

Spaces:
akhaliq
/
supertonic
Running

App Files Community
akhaliq HF Staff commited on
Commit
cf258e5
·
verified ·
1 Parent(s): b9eca36

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +310 -41
style.css CHANGED
@@ -1,76 +1,345 @@
 
 
 
 
 
 
 
 
 
 
 
 
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: #4F46E5;
3
+ --primary-hover: #4338CA;
4
+ --bg-color: #F3F4F6;
5
+ --card-bg: #FFFFFF;
6
+ --text-main: #1F2937;
7
+ --text-muted: #6B7280;
8
+ --border-color: #E5E7EB;
9
+ --error: #DC2626;
10
+ --success: #059669;
11
+ }
12
+
13
  * {
14
  box-sizing: border-box;
 
15
  margin: 0;
16
+ padding: 0;
17
  }
18
 
 
19
  body {
20
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
21
+ background-color: var(--bg-color);
22
+ color: var(--text-main);
23
+ line-height: 1.5;
24
+ min-height: 100vh;
25
+ display: flex;
26
+ flex-direction: column;
27
  }
28
 
29
+ /* Header */
30
+ header {
31
+ background-color: var(--card-bg);
32
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
33
+ padding: 1rem 0;
34
  }
35
 
36
+ .header-content {
37
+ max-width: 800px;
38
+ margin: 0 auto;
39
+ padding: 0 1rem;
40
+ display: flex;
41
+ justify-content: space-between;
42
+ align-items: center;
43
+ }
44
+
45
+ h1 {
46
+ font-size: 1.5rem;
47
+ font-weight: 700;
48
+ color: var(--primary);
49
+ }
50
+
51
+ .built-with {
52
+ font-size: 0.9rem;
53
+ color: var(--text-muted);
54
+ text-decoration: none;
55
+ border: 1px solid var(--border-color);
56
+ padding: 0.4rem 0.8rem;
57
+ border-radius: 6px;
58
+ transition: all 0.2s;
59
+ }
60
+
61
+ .built-with:hover {
62
+ border-color: var(--primary);
63
+ color: var(--primary);
64
+ }
65
+
66
+ /* Main Layout */
67
+ main {
68
+ flex: 1;
69
+ padding: 2rem 1rem;
70
  display: flex;
 
71
  justify-content: center;
72
+ }
73
+
74
+ .container {
75
+ width: 100%;
76
+ max-width: 800px;
77
+ display: flex;
78
+ flex-direction: column;
79
+ gap: 1.5rem;
80
+ }
81
+
82
+ .card {
83
+ background: var(--card-bg);
84
+ border-radius: 12px;
85
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
86
+ padding: 1.5rem;
87
+ }
88
+
89
+ /* Controls */
90
+ .controls-top {
91
+ display: flex;
92
+ justify-content: space-between;
93
+ align-items: flex-end;
94
+ margin-bottom: 1.5rem;
95
+ flex-wrap: wrap;
96
+ gap: 1rem;
97
+ }
98
+
99
+ .select-group {
100
+ flex: 1;
101
+ min-width: 200px;
102
+ }
103
+
104
+ .select-group label {
105
+ display: block;
106
+ font-size: 0.9rem;
107
+ font-weight: 500;
108
+ margin-bottom: 0.5rem;
109
+ color: var(--text-main);
110
+ }
111
+
112
+ select {
113
+ width: 100%;
114
+ padding: 0.6rem;
115
+ border: 1px solid var(--border-color);
116
+ border-radius: 6px;
117
+ font-size: 1rem;
118
+ background-color: #fff;
119
+ }
120
+
121
+ /* Toggle Switch */
122
+ .toggle-group {
123
+ display: flex;
124
  align-items: center;
125
+ gap: 0.8rem;
126
+ padding-bottom: 0.2rem;
127
  }
128
 
129
+ .switch {
130
  position: relative;
131
+ display: inline-block;
132
+ width: 48px;
133
+ height: 24px;
134
+ }
135
 
136
+ .switch input {
137
+ opacity: 0;
138
+ width: 0;
139
+ height: 0;
140
+ }
141
 
142
+ .slider {
143
+ position: absolute;
 
144
  cursor: pointer;
145
+ top: 0;
146
+ left: 0;
147
+ right: 0;
148
+ bottom: 0;
149
+ background-color: #ccc;
150
+ transition: .4s;
151
+ }
152
 
153
+ .slider:before {
154
+ position: absolute;
155
+ content: "";
156
+ height: 18px;
157
+ width: 18px;
158
+ left: 3px;
159
+ bottom: 3px;
160
+ background-color: white;
161
+ transition: .4s;
162
  }
163
 
164
+ input:checked + .slider {
165
+ background-color: var(--primary);
166
  }
167
 
168
+ input:checked + .slider:before {
169
+ transform: translateX(24px);
170
  }
171
 
172
+ .slider.round {
173
+ border-radius: 24px;
174
+ }
175
+
176
+ .slider.round:before {
177
+ border-radius: 50%;
178
+ }
179
+
180
+ /* Input Area */
181
+ .text-area-wrapper {
182
+ position: relative;
183
+ margin-bottom: 1rem;
184
+ }
185
+
186
+ textarea {
187
+ width: 100%;
188
+ height: 150px;
189
+ padding: 1rem;
190
+ border: 1px solid var(--border-color);
191
+ border-radius: 8px;
192
+ resize: vertical;
193
+ font-family: inherit;
194
+ font-size: 1rem;
195
+ outline: none;
196
  }
197
 
198
+ textarea:focus {
199
+ border-color: var(--primary);
200
+ box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
201
  }
202
 
203
+ .char-count {
204
  position: absolute;
205
+ bottom: 10px;
206
+ right: 10px;
207
+ font-size: 0.8rem;
208
+ color: var(--text-muted);
209
+ background: rgba(255,255,255,0.8);
210
+ padding: 2px 5px;
211
+ border-radius: 4px;
212
  }
213
 
214
+ /* Button */
215
+ button {
216
+ width: 100%;
217
+ padding: 0.8rem;
218
+ background-color: var(--primary);
219
  color: white;
220
+ border: none;
221
+ border-radius: 8px;
222
+ font-size: 1rem;
223
+ font-weight: 600;
224
+ cursor: pointer;
225
+ transition: background-color 0.2s;
226
+ }
227
+
228
+ button:hover {
229
+ background-color: var(--primary-hover);
230
+ }
231
+
232
+ button:disabled {
233
+ background-color: var(--text-muted);
234
+ cursor: not-allowed;
235
+ }
236
+
237
+ /* Status & Progress */
238
+ #status-container {
239
+ margin-top: 1.5rem;
240
+ }
241
+
242
+ .status-text {
243
+ font-size: 0.9rem;
244
+ color: var(--text-muted);
245
+ margin-bottom: 0.5rem;
246
+ text-align: center;
247
+ }
248
+
249
+ .progress-bar-bg {
250
+ width: 100%;
251
+ height: 8px;
252
+ background-color: var(--border-color);
253
+ border-radius: 4px;
254
+ overflow: hidden;
255
+ }
256
+
257
+ .progress-bar-fill {
258
+ height: 100%;
259
+ background-color: var(--primary);
260
+ width: 0%;
261
+ transition: width 0.3s ease;
262
+ }
263
+
264
+ .pulsing {
265
+ animation: pulse 1.5s infinite;
266
+ width: 100% !important;
267
+ background: linear-gradient(90deg, var(--primary), #818cf8, var(--primary));
268
+ background-size: 200% 100%;
269
+ }
270
+
271
+ @keyframes pulse {
272
+ 0% { background-position: 100% 0; }
273
+ 100% { background-position: -100% 0; }
274
+ }
275
+
276
+ /* Output Section */
277
+ .output-section h2 {
278
+ font-size: 1.2rem;
279
+ margin-bottom: 1rem;
280
+ color: var(--text-main);
281
+ }
282
+
283
+ .audio-player-wrapper {
284
+ background: var(--bg-color);
285
+ padding: 1rem;
286
+ border-radius: 8px;
287
+ display: flex;
288
+ justify-content: center;
289
+ margin-bottom: 1rem;
290
+ }
291
+
292
+ audio {
293
+ width: 100%;
294
+ height: 40px;
295
+ }
296
+
297
+ .download-btn {
298
+ display: inline-block;
299
+ text-align: center;
300
+ width: 100%;
301
+ padding: 0.6rem;
302
+ border: 1px solid var(--border-color);
303
+ background: white;
304
+ color: var(--text-main);
305
+ text-decoration: none;
306
+ border-radius: 6px;
307
+ font-size: 0.9rem;
308
+ transition: all 0.2s;
309
+ }
310
+
311
+ .download-btn:hover {
312
+ background: var(--bg-color);
313
+ border-color: var(--text-muted);
314
+ }
315
+
316
+ .error-msg {
317
+ margin-top: 1rem;
318
+ padding: 0.8rem;
319
+ background-color: #FEF2F2;
320
+ border: 1px solid #FECACA;
321
+ color: var(--error);
322
+ border-radius: 6px;
323
+ font-size: 0.9rem;
324
+ }
325
+
326
+ .hidden {
327
+ display: none;
328
+ }
329
+
330
+ @media (max-width: 600px) {
331
+ .controls-top {
332
+ flex-direction: column;
333
+ align-items: flex-start;
334
+ }
335
+
336
+ .select-group, .toggle-group {
337
+ width: 100%;
338
+ }
339
+
340
+ .toggle-group {
341
+ justify-content: space-between;
342
+ border-top: 1px solid var(--border-color);
343
+ padding-top: 1rem;
344
+ }
345
  }