Hugging Face's logo

Spaces:
stat2025
/
PDF
Running

App Files Community
stat2025 commited on
Commit
2b81d19
·
verified ·
1 Parent(s): be4e2eb

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +487 -50
style.css CHANGED
@@ -1,109 +1,546 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
  margin: 0;
3
  padding: 0;
4
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
5
- background: #f5f7fb;
6
- direction: rtl;
 
 
 
7
  }
8
 
9
- .container {
10
- max-width: 720px;
11
- margin: 40px auto;
12
- padding: 24px 20px 40px;
13
- background: #ffffff;
14
- border-radius: 18px;
15
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
 
 
16
  }
17
 
18
- h1 {
19
- margin: 0 0 8px;
20
- font-size: 26px;
21
- text-align: center;
22
- color: #1f3b57;
 
 
 
 
 
 
 
 
23
  }
24
 
25
- .subtitle {
26
- margin: 0 0 24px;
27
- text-align: center;
28
- font-size: 14px;
29
- color: #6b7280;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  .card {
33
- margin-bottom: 18px;
34
- padding: 14px 14px 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  border-radius: 14px;
36
  background: #f9fafb;
37
  border: 1px solid #e5e7eb;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
- .card h2 {
41
- font-size: 16px;
42
- margin: 0 0 8px;
 
43
  color: #111827;
44
  }
45
 
46
- .option {
47
- display: block;
48
- margin: 6px 0;
49
- font-size: 14px;
50
- color: #374151;
51
  }
52
 
53
- input[type="file"] {
54
- margin-top: 6px;
55
- font-size: 13px;
 
 
 
 
 
 
 
56
  }
57
 
58
- .hint {
59
- margin: 6px 0 0;
60
- font-size: 12px;
61
- color: #6b7280;
 
 
 
 
 
62
  }
63
 
64
  .btn-main {
65
  width: 100%;
66
- margin-top: 12px;
67
  padding: 10px 0;
68
- font-size: 16px;
69
  font-weight: 600;
70
  border: none;
71
  border-radius: 999px;
72
- background: #2563eb;
73
  color: #ffffff;
74
  cursor: pointer;
75
- transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
 
76
  }
77
 
78
  .btn-main:hover {
79
- background: #1d4ed8;
80
- box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
81
  transform: translateY(-1px);
 
82
  }
83
 
84
  .btn-main:active {
85
  transform: translateY(1px);
 
 
 
 
 
 
 
86
  box-shadow: none;
87
  }
88
 
 
 
89
  .status {
90
- margin-top: 10px;
91
- font-size: 13px;
92
- padding: 8px 10px;
93
- border-radius: 10px;
94
- display: none;
 
 
95
  }
96
 
97
  .status.ok {
98
- display: block;
99
  background: #ecfdf5;
100
  color: #15803d;
101
  border: 1px solid #bbf7d0;
102
  }
103
 
104
  .status.error {
105
- display: block;
106
  background: #fef2f2;
107
  color: #b91c1c;
108
  border: 1px solid #fecaca;
109
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --bg: #0f172a;
3
+ --card-bg: #ffffff;
4
+ --accent: #2563eb;
5
+ --accent-soft: rgba(37, 99, 235, 0.12);
6
+ --text-main: #111827;
7
+ --text-muted: #6b7280;
8
+ --radius-xl: 22px;
9
+ --radius-md: 14px;
10
+ --shadow-soft: 0 16px 40px rgba(15, 23, 42, 0.18);
11
+ --transition-fast: 0.18s ease;
12
+ --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
13
+ }
14
+
15
+ *,
16
+ *::before,
17
+ *::after {
18
+ box-sizing: border-box;
19
+ }
20
+
21
  body {
22
  margin: 0;
23
  padding: 0;
24
+ font-family: var(--font);
25
+ background:
26
+ radial-gradient(circle at top left, rgba(37, 99, 235, 0.26), transparent 60%),
27
+ radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 55%),
28
+ #020817;
29
+ color: var(--text-main);
30
  }
31
 
32
+ /* إطار عام للصفحة */
33
+ .page {
34
+ min-height: 100vh;
35
+ max-width: 1120px;
36
+ margin: 0 auto;
37
+ padding: 26px 18px 26px;
38
+ display: flex;
39
+ flex-direction: column;
40
+ gap: 18px;
41
  }
42
 
43
+ /* شريط علوي */
44
+ .topbar {
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: space-between;
48
+ gap: 18px;
49
+ padding: 14px 18px;
50
+ background: rgba(15, 23, 42, 0.9);
51
+ border-radius: 999px;
52
+ backdrop-filter: blur(16px);
53
+ -webkit-backdrop-filter: blur(16px);
54
+ color: #e5e7eb;
55
+ box-shadow: 0 10px 28px rgba(15, 23, 42, 0.48);
56
  }
57
 
58
+ .brand {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 10px;
62
+ }
63
+
64
+ .logo-circle {
65
+ width: 32px;
66
+ height: 32px;
67
+ border-radius: 999px;
68
+ background: linear-gradient(135deg, #2563eb, #38bdf8);
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ color: #ffffff;
73
+ font-weight: 700;
74
+ font-size: 18px;
75
+ }
76
+
77
+ .brand-text {
78
+ display: flex;
79
+ flex-direction: column;
80
+ line-height: 1.2;
81
+ }
82
+
83
+ .brand-title {
84
+ font-size: 15px;
85
+ font-weight: 600;
86
+ }
87
+
88
+ .brand-sub {
89
+ font-size: 11px;
90
+ color: #9ca3af;
91
+ }
92
+
93
+ .nav {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 10px;
97
+ font-size: 12px;
98
+ }
99
+
100
+ .nav-link {
101
+ color: #9ca3af;
102
+ text-decoration: none;
103
+ padding: 6px 10px;
104
+ border-radius: 999px;
105
+ transition: all var(--transition-fast);
106
+ }
107
+
108
+ .nav-link.active,
109
+ .nav-link:hover {
110
+ color: #eff6ff;
111
+ background-color: rgba(37, 99, 235, 0.32);
112
+ }
113
+
114
+ .nav-link.muted {
115
+ opacity: 0.6;
116
+ }
117
+
118
+ /* المحتوى الرئيسي */
119
+
120
+ .main {
121
+ flex: 1;
122
+ display: flex;
123
+ flex-direction: column;
124
+ gap: 14px;
125
+ }
126
+
127
+ /* هيدر نصي */
128
+
129
+ .hero {
130
+ background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent),
131
+ rgba(15, 23, 42, 0.98);
132
+ padding: 18px 18px 16px;
133
+ border-radius: var(--radius-xl);
134
+ color: #e5e7eb;
135
+ box-shadow: var(--shadow-soft);
136
+ }
137
+
138
+ .hero h1 {
139
+ margin: 0 0 6px;
140
+ font-size: 22px;
141
+ font-weight: 600;
142
+ }
143
+
144
+ .hero p {
145
+ margin: 0;
146
+ font-size: 13px;
147
+ color: #9ca3af;
148
  }
149
 
150
+ /* خطوات */
151
+
152
+ .steps {
153
+ display: grid;
154
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
155
+ gap: 8px;
156
+ }
157
+
158
+ .step {
159
+ display: flex;
160
+ align-items: center;
161
+ gap: 8px;
162
+ padding: 10px 12px;
163
+ background: rgba(15, 23, 42, 0.9);
164
+ border-radius: 16px;
165
+ border: 1px solid rgba(148, 163, 253, 0.16);
166
+ color: #e5e7eb;
167
+ }
168
+
169
+ .step-number {
170
+ width: 22px;
171
+ height: 22px;
172
+ border-radius: 999px;
173
+ background: rgba(37, 99, 235, 0.96);
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ font-size: 13px;
178
+ font-weight: 600;
179
+ }
180
+
181
+ .step-text {
182
+ font-size: 11px;
183
+ color: #cbd5f5;
184
+ }
185
+
186
+ /* الكرت الرئيسي */
187
+
188
  .card {
189
+ background: var(--card-bg);
190
+ border-radius: var(--radius-xl);
191
+ padding: 18px 16px 16px;
192
+ box-shadow: var(--shadow-soft);
193
+ border: 1px solid rgba(226, 232, 240, 0.9);
194
+ }
195
+
196
+ .main-card {
197
+ display: flex;
198
+ flex-direction: column;
199
+ gap: 10px;
200
+ }
201
+
202
+ .card-row {
203
+ display: flex;
204
+ flex-direction: column;
205
+ gap: 6px;
206
+ }
207
+
208
+ .card-row.inline {
209
+ flex-direction: row;
210
+ align-items: center;
211
+ gap: 10px;
212
+ margin-top: 4px;
213
+ }
214
+
215
+ .card-title {
216
+ font-size: 14px;
217
+ font-weight: 600;
218
+ color: var(--text-main);
219
+ margin: 0;
220
+ }
221
+
222
+ .card-title.small {
223
+ font-size: 12px;
224
+ }
225
+
226
+ /* خيارات نوع الملفات */
227
+
228
+ .options {
229
+ display: flex;
230
+ flex-wrap: wrap;
231
+ gap: 8px;
232
+ }
233
+
234
+ .option-pill {
235
+ display: inline-flex;
236
+ align-items: center;
237
+ gap: 6px;
238
+ padding: 7px 12px;
239
+ border-radius: 999px;
240
+ border: 1px solid #e5e7eb;
241
+ font-size: 11px;
242
+ color: var(--text-muted);
243
+ background: #f9fafb;
244
+ cursor: pointer;
245
+ transition: all var(--transition-fast);
246
+ }
247
+
248
+ .option-pill input {
249
+ accent-color: var(--accent);
250
+ }
251
+
252
+ .option-pill:hover {
253
+ border-color: var(--accent);
254
+ background: var(--accent-soft);
255
+ color: #1f2937;
256
+ }
257
+
258
+ /* منطقة السحب والإفلات */
259
+
260
+ .dropzone {
261
+ position: relative;
262
+ border-radius: var(--radius-md);
263
+ border: 1.3px dashed #cbd5f5;
264
+ background: #f9fafb;
265
+ padding: 16px 10px;
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 10px;
269
+ cursor: pointer;
270
+ transition: all var(--transition-fast);
271
+ }
272
+
273
+ .dropzone:hover {
274
+ background: #eef2ff;
275
+ border-color: var(--accent);
276
+ box-shadow: 0 6px 18px rgba(148, 163, 253, 0.35);
277
+ }
278
+
279
+ .dropzone.hover {
280
+ background: #e0ecff;
281
+ border-color: var(--accent);
282
+ box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35);
283
+ }
284
+
285
+ .dropzone-icon {
286
+ width: 40px;
287
+ height: 40px;
288
+ border-radius: 16px;
289
+ background: var(--accent-soft);
290
+ display: flex;
291
+ align-items: center;
292
+ justify-content: center;
293
+ }
294
+
295
+ .dropzone-icon svg {
296
+ width: 22px;
297
+ height: 22px;
298
+ fill: var(--accent);
299
+ }
300
+
301
+ .dropzone-text {
302
+ display: flex;
303
+ flex-direction: column;
304
+ font-size: 12px;
305
+ color: var(--text-main);
306
+ }
307
+
308
+ .dropzone-text span {
309
+ font-size: 10px;
310
+ color: var(--text-muted);
311
+ }
312
+
313
+ .dropzone input[type="file"] {
314
+ position: absolute;
315
+ inset: 0;
316
+ opacity: 0;
317
+ cursor: pointer;
318
+ }
319
+
320
+ /* ملاحظات */
321
+
322
+ .hint {
323
+ margin: 3px 2px 0;
324
+ font-size: 10px;
325
+ color: var(--text-muted);
326
+ }
327
+
328
+ /* قائمة الملفات */
329
+
330
+ .file-list {
331
+ margin-top: 4px;
332
+ padding: 8px 8px;
333
  border-radius: 14px;
334
  background: #f9fafb;
335
  border: 1px solid #e5e7eb;
336
+ max-height: 170px;
337
+ overflow-y: auto;
338
+ box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
339
+ transition: box-shadow var(--transition-fast);
340
+ }
341
+
342
+ .file-list:hover {
343
+ box-shadow: inset 0 0 10px rgba(148, 163, 253, 0.16);
344
+ }
345
+
346
+ .file-list.hidden {
347
+ display: none;
348
+ }
349
+
350
+ .file-list-header {
351
+ display: flex;
352
+ justify-content: space-between;
353
+ align-items: baseline;
354
+ font-size: 10px;
355
+ color: var(--text-main);
356
+ margin-bottom: 4px;
357
+ }
358
+
359
+ .file-note {
360
+ font-size: 9px;
361
+ color: var(--text-muted);
362
+ }
363
+
364
+ .file-list-ul {
365
+ list-style: none;
366
+ padding: 0;
367
+ margin: 0;
368
+ display: flex;
369
+ flex-direction: column;
370
+ gap: 2px;
371
+ }
372
+
373
+ .file-list-ul li {
374
+ display: grid;
375
+ grid-template-columns: 20px minmax(0, 1fr) auto;
376
+ align-items: center;
377
+ gap: 6px;
378
+ font-size: 10px;
379
+ padding: 4px 4px;
380
+ border-radius: 8px;
381
+ }
382
+
383
+ .file-list-ul li:nth-child(odd) {
384
+ background: #f3f4ff;
385
+ }
386
+
387
+ .index {
388
+ text-align: center;
389
+ color: var(--accent);
390
+ font-weight: 600;
391
  }
392
 
393
+ .name {
394
+ overflow: hidden;
395
+ text-overflow: ellipsis;
396
+ white-space: nowrap;
397
  color: #111827;
398
  }
399
 
400
+ .size {
401
+ color: var(--text-muted);
402
+ font-size: 9px;
 
 
403
  }
404
 
405
+ /* حقل اسم ملف الإخراج */
406
+
407
+ .output-input {
408
+ flex: 1;
409
+ padding: 7px 10px;
410
+ font-size: 11px;
411
+ border-radius: 999px;
412
+ border: 1px solid #e5e7eb;
413
+ outline: none;
414
+ transition: all var(--transition-fast);
415
  }
416
 
417
+ .output-input:focus {
418
+ border-color: var(--accent);
419
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
420
+ }
421
+
422
+ /* زر الدمج */
423
+
424
+ .actions {
425
+ margin-top: 6px;
426
  }
427
 
428
  .btn-main {
429
  width: 100%;
 
430
  padding: 10px 0;
431
+ font-size: 14px;
432
  font-weight: 600;
433
  border: none;
434
  border-radius: 999px;
435
+ background: linear-gradient(90deg, #2563eb, #38bdf8);
436
  color: #ffffff;
437
  cursor: pointer;
438
+ box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
439
+ transition: all var(--transition-fast);
440
  }
441
 
442
  .btn-main:hover {
 
 
443
  transform: translateY(-1px);
444
+ box-shadow: 0 12px 26px rgba(37, 99, 235, 0.5);
445
  }
446
 
447
  .btn-main:active {
448
  transform: translateY(1px);
449
+ box-shadow: 0 4px 14px rgba(15, 23, 42, 0.5);
450
+ }
451
+
452
+ .btn-main.disabled,
453
+ .btn-main:disabled {
454
+ opacity: 0.45;
455
+ cursor: default;
456
  box-shadow: none;
457
  }
458
 
459
+ /* حالة النظام */
460
+
461
  .status {
462
+ margin-top: 6px;
463
+ padding: 7px 10px;
464
+ font-size: 10px;
465
+ border-radius: 12px;
466
+ display: inline-flex;
467
+ align-items: center;
468
+ gap: 6px;
469
  }
470
 
471
  .status.ok {
 
472
  background: #ecfdf5;
473
  color: #15803d;
474
  border: 1px solid #bbf7d0;
475
  }
476
 
477
  .status.error {
 
478
  background: #fef2f2;
479
  color: #b91c1c;
480
  border: 1px solid #fecaca;
481
  }
482
+
483
+ .status.loading {
484
+ background: #eff6ff;
485
+ color: #1d4ed8;
486
+ border: 1px solid #bfdbfe;
487
+ }
488
+
489
+ /* قسم الخصوصية */
490
+
491
+ .privacy {
492
+ padding: 10px 12px 10px;
493
+ border-radius: 18px;
494
+ background: rgba(15, 23, 42, 0.98);
495
+ color: #d1d5db;
496
+ font-size: 10px;
497
+ border: 1px solid rgba(75, 85, 99, 0.9);
498
+ display: flex;
499
+ flex-direction: column;
500
+ gap: 4px;
501
+ box-shadow: 0 10px 26px rgba(15, 23, 42, 0.6);
502
+ }
503
+
504
+ .privacy h3 {
505
+ margin: 0;
506
+ font-size: 11px;
507
+ font-weight: 600;
508
+ color: #bfdbfe;
509
+ }
510
+
511
+ .privacy p {
512
+ margin: 0;
513
+ line-height: 1.7;
514
+ }
515
+
516
+ /* تذييل */
517
+
518
+ .footer {
519
+ padding: 6px 4px 2px;
520
+ font-size: 9px;
521
+ color: #9ca3af;
522
+ display: flex;
523
+ justify-content: center;
524
+ align-items: center;
525
+ gap: 4px;
526
+ }
527
+
528
+ .footer .dot {
529
+ opacity: 0.5;
530
+ }
531
+
532
+ /* تجاوب */
533
+
534
+ @media (max-width: 640px) {
535
+ .topbar {
536
+ flex-direction: column;
537
+ align-items: flex-start;
538
+ }
539
+ .nav {
540
+ width: 100%;
541
+ justify-content: flex-end;
542
+ }
543
+ .hero h1 {
544
+ font-size: 18px;
545
+ }
546
+ }