Hugging Face's logo

Spaces:
stat2025
/
ticket-parser
Running

App Files Community
stat2025 commited on
Commit
b3e6801
·
verified ·
1 Parent(s): b7c0216

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +396 -127
style.css CHANGED
@@ -1,128 +1,397 @@
1
- :root{
2
- --bg:#f6f7fb;
3
- --card:#ffffff;
4
- --ink:#101828;
5
- --muted:#667085;
6
- --primary:#4137A8;
7
- --primary-600:#3b3299;
8
- --success:#1b9c85;
9
- --info:#0ea5e9;
10
- --danger:#ef4444;
11
- --border:#e5e7eb;
12
- --table-head:#302a86;
13
- --table-alt:#f5f8ff;
14
- --radius:16px;
15
- --shadow:0 4px 20px rgba(0,0,0,.06);
16
- }
17
-
18
- body.dark{
19
- --bg:#0f172a;
20
- --card:#111827;
21
- --ink:#e5e7eb;
22
- --muted:#94a3b8;
23
- --border:#1f2937;
24
- --table-head:#1f2565;
25
- --table-alt:#0b1326;
26
- --shadow:0 4px 20px rgba(0,0,0,.35);
27
- }
28
-
29
- *{box-sizing:border-box}
30
- html,body{height:100%}
31
-
32
- body{
33
- margin:0;
34
- font-family:"Cairo",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
35
- color:var(--ink);
36
- background:var(--bg);
37
- line-height:1.7;
38
- text-align:center;
39
- }
40
-
41
- .container{
42
- max-width:1100px;
43
- margin:24px auto;
44
- padding:0 16px;
45
- }
46
-
47
- .hero{position:relative;margin-bottom:16px}
48
- .theme-toggle{
49
- position:absolute;top:0;inset-inline-start:0;
50
- padding:8px 12px;border-radius:999px;border:1px solid var(--border);
51
- background:var(--card);color:var(--ink);font-weight:700;cursor:pointer;box-shadow:var(--shadow)
52
- }
53
- .title{margin:0 0 6px;font-size:28px;font-weight:800;color:var(--primary)}
54
- .signature{
55
- display:inline-flex;gap:8px;align-items:center;justify-content:center;
56
- background:var(--card);padding:6px 12px;border-radius:999px;border:1px solid var(--border);
57
- color:var(--muted);font-weight:600;box-shadow:var(--shadow)
58
- }
59
- .signature .role{color:var(--primary)}
60
- .signature .name{color:var(--ink)}
61
-
62
- .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:1px solid var(--border)}
63
- .label{display:block;font-weight:600;margin-bottom:8px;color:var(--muted)}
64
-
65
- .paste{
66
- width:100%;min-height:180px;resize:vertical;padding:12px 14px;border-radius:12px;
67
- border:1px solid var(--border);outline:none;background:var(--card);color:var(--ink);text-align:center
68
- }
69
- .paste::placeholder{color:#9aa3af;white-space:pre-line}
70
- .paste:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(65,55,168,.12)}
71
-
72
- .filters{display:flex;gap:10px;margin:14px 0;justify-content:center;flex-wrap:wrap}
73
- .center-input{text-align:center}
74
- .control{
75
- width:320px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
76
- outline:none;background:var(--card);color:var(--ink)
77
- }
78
- .control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(65,55,168,.08)}
79
-
80
- .btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-bottom:10px}
81
- .btn{padding:10px 14px;border:none;border-radius:12px;cursor:pointer;font-weight:700;background:#ddd;color:#111;transition:transform .04s ease,box-shadow .2s ease}
82
- body.dark .btn{color:#eee}
83
- .btn:disabled{opacity:.5;cursor:not-allowed}
84
- .btn:hover:not(:disabled){transform:translateY(-1px)}
85
- .btn-primary{background:var(--primary);color:#fff}
86
- .btn-primary:hover{background:var(--primary-600)}
87
- .btn-success{background:var(--success);color:#fff}
88
- .btn-info{background:var(--info);color:#fff}
89
- .btn-danger{background:var(--danger);color:#fff}
90
- .num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:#fff;color:var(--primary);border:1px solid var(--border);margin-inline-end:6px;font-weight:800;font-size:12px}
91
- .badge{background:#fff;color:var(--primary);border-radius:999px;padding:2px 8px;margin-inline-start:6px;font-size:12px}
92
-
93
- .warn{margin:8px auto 12px;padding:8px 12px;border-radius:10px;border:1px solid #f59e0b;color:#92400e;background:#fffbeb;max-width:900px}
94
-
95
- .table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--border)}
96
- .table{width:100%;border-collapse:separate;border-spacing:0;text-align:center}
97
- .table thead th{background:var(--table-head);color:#fff;font-weight:700;padding:12px;position:sticky;top:0}
98
- .table tbody td{padding:10px 12px;background:var(--card);border-top:1px solid var(--border);color:var(--ink)}
99
- .table tbody tr:nth-child(even) td{background:var(--table-alt)}
100
-
101
- .table td[contenteditable="true"]{outline:none}
102
- .table td.invalid{background:#fff3f3;position:relative}
103
- .table td.invalid::after{
104
- content:"⚠";position:absolute;inset-inline-end:6px;inset-block-start:6px;font-size:14px;color:#ef4444;opacity:.95;pointer-events:none
105
- }
106
- .table td.invalid[title]{cursor:help}
107
- body.dark .table td.invalid{background:#3b1d1d}
108
-
109
- .cat{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
110
- .cat.login{background:#fff1;color:#fff;border:1px solid #fff3}
111
- .cat.device{background:#0ea5e922;color:#0ea5e9;border:1px solid #0ea5e955}
112
- .cat.form{background:#fef3c7;color:#a16207;border:1px solid #f59e0b}
113
- .cat.network{background:#dcfce7;color:#166534;border:1px solid #22c55e}
114
- .cat.update{background:#e0e7ff;color:#3730a3;border:1px solid #6366f1}
115
- .cat.default{background:#f1f5f9;color:#0f172a;border:1px solid #cbd5e1}
116
- body.dark .cat.default{background:#111827;color:#e5e7eb;border-color:#334155}
117
-
118
- .toast{
119
- position:fixed;bottom:20px;inset-inline-start:20px;background:#111827;color:#fff;
120
- padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);
121
- transition:.25s ease;pointer-events:none;font-weight:600
122
- }
123
- .toast.show{opacity:1;transform:translateY(0)}
124
-
125
- @media (max-width:640px){
126
- .filters{flex-direction:column}
127
- .btn-row{gap:6px}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  }
 
1
+ :root {
2
+ --bg: #f6f7fb;
3
+ --card: #ffffff;
4
+ --ink: #101828;
5
+ --muted: #667085;
6
+ --primary: #4137a8;
7
+ --primary-600: #3b3299;
8
+ --success: #1b9c85;
9
+ --info: #0ea5e9;
10
+ --danger: #ef4444;
11
+ --border: #e5e7eb;
12
+ --table-head: #302a86;
13
+ --table-alt: #f5f8ff;
14
+ --radius: 16px;
15
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
16
+ }
17
+
18
+ body.dark {
19
+ --bg: #0f172a;
20
+ --card: #111827;
21
+ --ink: #e5e7eb;
22
+ --muted: #94a3b8;
23
+ --border: #1f2937;
24
+ --table-head: #1f2565;
25
+ --table-alt: #0b1326;
26
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
27
+ }
28
+
29
+ * {
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ html,
34
+ body {
35
+ height: 100%;
36
+ }
37
+
38
+ body {
39
+ margin: 0;
40
+ font-family: "Cairo", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
41
+ color: var(--ink);
42
+ background: var(--bg);
43
+ line-height: 1.7;
44
+ text-align: center;
45
+ }
46
+
47
+ .container {
48
+ max-width: 1100px;
49
+ margin: 24px auto;
50
+ padding: 0 16px;
51
+ }
52
+
53
+ .hero {
54
+ position: relative;
55
+ margin-bottom: 16px;
56
+ }
57
+
58
+ .theme-toggle {
59
+ position: absolute;
60
+ top: 0;
61
+ inset-inline-start: 0;
62
+ padding: 8px 12px;
63
+ border-radius: 999px;
64
+ border: 1px solid var(--border);
65
+ background: var(--card);
66
+ color: var(--ink);
67
+ font-weight: 700;
68
+ cursor: pointer;
69
+ box-shadow: var(--shadow);
70
+ }
71
+
72
+ .title {
73
+ margin: 0 0 6px;
74
+ font-size: 28px;
75
+ font-weight: 800;
76
+ color: var(--primary);
77
+ }
78
+
79
+ .signature {
80
+ display: inline-flex;
81
+ gap: 8px;
82
+ align-items: center;
83
+ justify-content: center;
84
+ background: var(--card);
85
+ padding: 6px 12px;
86
+ border-radius: 999px;
87
+ border: 1px solid var(--border);
88
+ color: var(--muted);
89
+ font-weight: 600;
90
+ box-shadow: var(--shadow);
91
+ }
92
+
93
+ .signature .role {
94
+ color: var(--primary);
95
+ }
96
+
97
+ .signature .name {
98
+ color: var(--ink);
99
+ }
100
+
101
+ .card {
102
+ background: var(--card);
103
+ border-radius: var(--radius);
104
+ box-shadow: var(--shadow);
105
+ padding: 18px;
106
+ border: 1px solid var(--border);
107
+ }
108
+
109
+ .label {
110
+ display: block;
111
+ font-weight: 600;
112
+ margin-bottom: 8px;
113
+ color: var(--muted);
114
+ }
115
+
116
+ .paste {
117
+ width: 100%;
118
+ min-height: 180px;
119
+ resize: vertical;
120
+ padding: 12px 14px;
121
+ border-radius: 12px;
122
+ border: 1px solid var(--border);
123
+ outline: none;
124
+ background: var(--card);
125
+ color: var(--ink);
126
+ text-align: center;
127
+ }
128
+
129
+ .paste::placeholder {
130
+ color: #9aa3af;
131
+ white-space: pre-line;
132
+ }
133
+
134
+ .paste:focus {
135
+ border-color: var(--primary);
136
+ box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12);
137
+ }
138
+
139
+ .filters {
140
+ display: flex;
141
+ gap: 10px;
142
+ margin: 14px 0;
143
+ justify-content: center;
144
+ flex-wrap: wrap;
145
+ }
146
+
147
+ .center-input {
148
+ text-align: center;
149
+ }
150
+
151
+ .control {
152
+ width: 320px;
153
+ padding: 10px 12px;
154
+ border-radius: 10px;
155
+ border: 1px solid var(--border);
156
+ outline: none;
157
+ background: var(--card);
158
+ color: var(--ink);
159
+ }
160
+
161
+ .control:focus {
162
+ border-color: var(--primary);
163
+ box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.08);
164
+ }
165
+
166
+ .btn-row {
167
+ display: flex;
168
+ flex-wrap: wrap;
169
+ gap: 8px;
170
+ align-items: center;
171
+ justify-content: center;
172
+ margin-bottom: 10px;
173
+ }
174
+
175
+ .btn {
176
+ padding: 10px 14px;
177
+ border: none;
178
+ border-radius: 12px;
179
+ cursor: pointer;
180
+ font-weight: 700;
181
+ background: #ddd;
182
+ color: #111;
183
+ transition: transform 0.04s ease, box-shadow 0.2s ease;
184
+ }
185
+
186
+ body.dark .btn {
187
+ color: #eee;
188
+ }
189
+
190
+ .btn:disabled {
191
+ opacity: 0.5;
192
+ cursor: not-allowed;
193
+ }
194
+
195
+ .btn:hover:not(:disabled) {
196
+ transform: translateY(-1px);
197
+ }
198
+
199
+ .btn-primary {
200
+ background: var(--primary);
201
+ color: #fff;
202
+ }
203
+
204
+ .btn-primary:hover {
205
+ background: var(--primary-600);
206
+ }
207
+
208
+ .btn-success {
209
+ background: var(--success);
210
+ color: #fff;
211
+ }
212
+
213
+ .btn-info {
214
+ background: var(--info);
215
+ color: #fff;
216
+ }
217
+
218
+ .btn-danger {
219
+ background: var(--danger);
220
+ color: #fff;
221
+ }
222
+
223
+ .num {
224
+ display: inline-flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ width: 22px;
228
+ height: 22px;
229
+ border-radius: 999px;
230
+ background: #fff;
231
+ color: var(--primary);
232
+ border: 1px solid var(--border);
233
+ margin-inline-end: 6px;
234
+ font-weight: 800;
235
+ font-size: 12px;
236
+ }
237
+
238
+ .badge {
239
+ background: #fff;
240
+ color: var(--primary);
241
+ border-radius: 999px;
242
+ padding: 2px 8px;
243
+ margin-inline-start: 6px;
244
+ font-size: 12px;
245
+ }
246
+
247
+ .warn {
248
+ margin: 8px auto 12px;
249
+ padding: 8px 12px;
250
+ border-radius: 10px;
251
+ border: 1px solid #f59e0b;
252
+ color: #92400e;
253
+ background: #fffbeb;
254
+ max-width: 900px;
255
+ }
256
+
257
+ .table-wrap {
258
+ overflow: auto;
259
+ border-radius: 14px;
260
+ border: 1px solid var(--border);
261
+ }
262
+
263
+ .table {
264
+ width: 100%;
265
+ border-collapse: separate;
266
+ border-spacing: 0;
267
+ text-align: center;
268
+ }
269
+
270
+ .table thead th {
271
+ background: var(--table-head);
272
+ color: #fff;
273
+ font-weight: 700;
274
+ padding: 12px;
275
+ position: sticky;
276
+ top: 0;
277
+ }
278
+
279
+ .table tbody td {
280
+ padding: 10px 12px;
281
+ background: var(--card);
282
+ border-top: 1px solid var(--border);
283
+ color: var(--ink);
284
+ }
285
+
286
+ .table tbody tr:nth-child(even) td {
287
+ background: var(--table-alt);
288
+ }
289
+
290
+ .table td[contenteditable="true"] {
291
+ outline: none;
292
+ }
293
+
294
+ .table td.invalid {
295
+ background: #fff3f3;
296
+ position: relative;
297
+ }
298
+
299
+ .table td.invalid::after {
300
+ content: "⚠";
301
+ position: absolute;
302
+ inset-inline-end: 6px;
303
+ inset-block-start: 6px;
304
+ font-size: 14px;
305
+ color: #ef4444;
306
+ opacity: 0.95;
307
+ pointer-events: none;
308
+ }
309
+
310
+ .table td.invalid[title] {
311
+ cursor: help;
312
+ }
313
+
314
+ body.dark .table td.invalid {
315
+ background: #3b1d1d;
316
+ }
317
+
318
+ .cat {
319
+ display: inline-block;
320
+ padding: 4px 8px;
321
+ border-radius: 999px;
322
+ font-size: 12px;
323
+ font-weight: 700;
324
+ }
325
+
326
+ .cat.login {
327
+ background: #fff1;
328
+ color: #fff;
329
+ border: 1px solid #fff3;
330
+ }
331
+
332
+ .cat.device {
333
+ background: #0ea5e922;
334
+ color: #0ea5e9;
335
+ border: 1px solid #0ea5e955;
336
+ }
337
+
338
+ .cat.form {
339
+ background: #fef3c7;
340
+ color: #a16207;
341
+ border: 1px solid #f59e0b;
342
+ }
343
+
344
+ .cat.network {
345
+ background: #dcfce7;
346
+ color: #166534;
347
+ border: 1px solid #22c55e;
348
+ }
349
+
350
+ .cat.update {
351
+ background: #e0e7ff;
352
+ color: #3730a3;
353
+ border: 1px solid #6366f1;
354
+ }
355
+
356
+ .cat.default {
357
+ background: #f1f5f9;
358
+ color: #0f172a;
359
+ border: 1px solid #cbd5e1;
360
+ }
361
+
362
+ body.dark .cat.default {
363
+ background: #111827;
364
+ color: #e5e7eb;
365
+ border-color: #334155;
366
+ }
367
+
368
+ .toast {
369
+ position: fixed;
370
+ bottom: 20px;
371
+ inset-inline-start: 20px;
372
+ background: #111827;
373
+ color: #fff;
374
+ padding: 10px 14px;
375
+ border-radius: 10px;
376
+ box-shadow: var(--shadow);
377
+ opacity: 0;
378
+ transform: translateY(8px);
379
+ transition: 0.25s ease;
380
+ pointer-events: none;
381
+ font-weight: 600;
382
+ }
383
+
384
+ .toast.show {
385
+ opacity: 1;
386
+ transform: translateY(0);
387
+ }
388
+
389
+ @media (max-width: 640px) {
390
+ .filters {
391
+ flex-direction: column;
392
+ }
393
+
394
+ .btn-row {
395
+ gap: 6px;
396
+ }
397
  }