Hugging Face's logo

Spaces:
stat2025
/
ticket-parser
Running

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

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +83 -98
style.css CHANGED
@@ -1,113 +1,98 @@
1
  :root{
2
- --bg:#F4F6FA;
3
- --card:#FFFFFF;
4
- --text:#1F2937;
5
- --muted:#6B7280;
6
- --primary:#4137A8;
7
- --accent:#1CADE4;
8
- --success:#42BA97;
9
- --secondary:#5C6E88;
10
- --violet:#7030A0;
11
- --cyan:#27CED7;
12
- --warning:#FFC000;
13
- --danger:#F5554A;
14
- --border:#E5E7EB;
15
- --rowAlt:#F5F8FF;
16
  }
17
-
18
- *{ box-sizing:border-box }
19
- html,body{ height:100% }
20
  body{
21
- margin:0; padding:24px; background:var(--bg); color:var(--text);
22
- font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 
 
23
  }
24
-
25
- .container{ max-width:1100px; margin:0 auto; }
26
- .center{ text-align:center }
27
-
28
- .hero h1{ margin:0 0 4px; font-weight:800; font-size:clamp(22px,4vw,34px); color:var(--primary) }
29
- .hero .sub{ margin:0; color:var(--muted); font-size:14px }
30
- .hero .sep{ margin:0 .5rem }
31
-
32
- .card{
33
- margin:18px auto 28px; background:var(--card); border:1px solid var(--border);
34
- border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.05); padding:18px;
35
  }
36
-
37
- .label{ display:block; text-align:right; font-weight:700; margin:4px 4px 8px }
38
- .paste{
39
- width:100%; min-height:180px; resize:vertical; border:1px solid var(--border); border-radius:12px;
40
- padding:12px 14px; line-height:1.7; font-size:15px; background:#fff;
41
  }
42
- .paste:focus{ outline:2px solid var(--accent) }
43
-
44
- .filters{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; justify-content:center }
45
- .control{
46
- border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff;
47
- min-width:260px; font-size:14px;
48
  }
49
-
50
- .hint{ margin:12px 0 8px; color:var(--muted); font-size:13px }
51
-
52
- .btn-row{
53
- display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin:8px 0 16px;
 
 
 
 
 
 
54
  }
55
- .btn{
56
- border:0; border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer;
57
- box-shadow:0 4px 12px rgba(0,0,0,.08); transition:transform .05s ease;
 
 
58
  }
59
- .btn:active{ transform:translateY(1px) }
60
- .btn[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none }
61
-
62
- .btn-primary{ background:var(--primary); color:#fff }
63
- .btn-success{ background:var(--success); color:#fff }
64
- .btn-info{ background:var(--accent); color:#fff }
65
- .btn-danger{ background:var(--danger); color:#fff }
66
- .btn-light{ background:#EEF2FF; color:var(--primary) }
67
-
68
- .btn[data-step]{ position:relative; padding-inline-start:36px }
69
- .btn[data-step]::before{
70
- content:attr(data-step); position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%);
71
- width:20px; height:20px; border-radius:999px; background:#fff; color:var(--primary);
72
- font-weight:800; font-size:12px; display:grid; place-items:center;
73
  }
74
-
75
- .badge{
76
- display:inline-flex; align-items:center; justify-content:center;
77
- min-width:22px; height:22px; padding:0 6px; background:#fff; color:var(--primary);
78
- border-radius:999px; font-weight:800; font-size:12px; margin-inline-start:8px;
79
- box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
 
 
 
 
 
 
80
  }
81
-
82
- .table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px }
83
- .table{ width:100%; border-collapse:collapse; min-width:900px }
84
  .table thead th{
85
- background:var(--primary); color:#fff; padding:10px; font-weight:800; position:sticky; top:0; text-align:center;
86
- }
87
- .table td{ padding:10px; border:1px solid var(--border); text-align:center; background:#fff }
88
- .table tbody tr:nth-child(even) td{ background:var(--rowAlt) }
89
- .invalid{ background:#FFF2F2 !important; outline:2px solid var(--danger) }
90
-
91
- .footer{ margin:18px 0; text-align:center; color:var(--muted); font-size:13px }
92
-
93
- .toast{
94
- position:fixed; left:50%; transform:translateX(-50%); bottom:22px;
95
- background:#111827; color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; opacity:0;
96
  }
97
- .toast.show{ opacity:1; transition:opacity .2s ease }
98
-
99
- .modal{
100
- position:fixed; inset:0; background:rgba(0,0,0,.35); display:grid; place-items:center; padding:16px;
 
 
 
101
  }
102
- .modal[hidden]{ display:none }
103
- .modal-card{
104
- width:min(720px,95vw); background:#fff; border-radius:14px; border:1px solid var(--border);
105
- box-shadow:0 10px 40px rgba(0,0,0,.2); padding:14px;
106
- }
107
- .modal-head{ font-weight:800; color:var(--primary); margin-bottom:8px; text-align:right }
108
- .modal-textarea{ min-height:180px }
109
-
110
- @media (max-width:640px){
111
- body{ padding:16px }
112
- .table{ min-width:760px }
113
  }
 
1
  :root{
2
+ --bg:#0b0f14;
3
+ --card:#10161d;
4
+ --muted:#9fb0c3;
5
+ --text:#e8f0f7;
6
+ --accent:#3aa6ff;
7
+ --danger:#ff5d5d;
8
+ --border:#1c2430;
 
 
 
 
 
 
 
9
  }
10
+ *{box-sizing:border-box}
11
+ html,body{height:100%}
 
12
  body{
13
+ margin:0;
14
+ background:var(--bg);
15
+ color:var(--text);
16
+ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans Arabic",Tahoma,Arial,sans-serif;
17
  }
18
+ .header{
19
+ padding:16px 20px;
20
+ border-bottom:1px solid var(--border);
21
+ background:linear-gradient(180deg, #0d1218, #0b0f14);
 
 
 
 
 
 
 
22
  }
23
+ .header h1{margin:0;font-size:20px}
24
+ .container{
25
+ max-width:1100px;
26
+ margin:24px auto;
27
+ padding:0 16px;
28
  }
29
+ .controls{
30
+ background:var(--card);
31
+ border:1px solid var(--border);
32
+ padding:16px;
33
+ border-radius:16px;
34
+ box-shadow:0 8px 20px rgba(0,0,0,.25);
35
  }
36
+ .input{
37
+ width:100%;
38
+ min-height:180px;
39
+ background:#0b1218;
40
+ color:var(--text);
41
+ border:1px solid var(--border);
42
+ border-radius:12px;
43
+ padding:12px;
44
+ outline:none;
45
+ resize:vertical;
46
+ line-height:1.7;
47
  }
48
+ .buttons{
49
+ margin-top:12px;
50
+ display:flex;
51
+ gap:8px;
52
+ flex-wrap:wrap;
53
  }
54
+ .btn{
55
+ border:1px solid var(--border);
56
+ background:#0e141b;
57
+ color:var(--text);
58
+ padding:10px 14px;
59
+ border-radius:12px;
60
+ cursor:pointer;
61
+ font-weight:600;
 
 
 
 
 
 
62
  }
63
+ .btn.primary{background:var(--accent);border-color:#2c7ecc;color:#021423}
64
+ .btn.primary:hover{filter:brightness(1.05)}
65
+ .btn.danger{background:#2a0e0e;border-color:#4b1c1c}
66
+ .btn.danger:hover{filter:brightness(1.1)}
67
+ .counter{margin-top:10px;color:var(--muted);font-size:14px}
68
+
69
+ .table-wrap{
70
+ margin-top:16px;
71
+ background:var(--card);
72
+ border:1px solid var(--border);
73
+ border-radius:16px;
74
+ overflow:hidden;
75
  }
76
+ .table{width:100%;border-collapse:collapse}
 
 
77
  .table thead th{
78
+ position:sticky;top:0;background:#0e151c;border-bottom:1px solid var(--border);padding:10px;text-align:right;font-size:14px
 
 
 
 
 
 
 
 
 
 
79
  }
80
+ .table tbody td{
81
+ border-top:1px solid var(--border);
82
+ padding:10px;
83
+ vertical-align:top;
84
+ font-size:14px;
85
+ line-height:1.6;
86
+ word-break:break-word;
87
  }
88
+ @media (max-width: 760px){
89
+ .input{min-height:140px}
90
+ .table thead{display:none}
91
+ .table tr{display:block;border-top:1px solid var(--border)}
92
+ .table td{display:flex;justify-content:space-between;gap:12px}
93
+ .table td::before{
94
+ content:attr(data-label);
95
+ color:var(--muted);
96
+ font-weight:600
97
+ }
 
98
  }