Hugging Face's logo

Spaces:
appvoid
/
carbono
Running

App Files Community
appvoid commited on
Commit
3346c33
·
verified ·
1 Parent(s): c6ec9c9

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +215 -17
style.css CHANGED
@@ -1,28 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary: #2563eb;
3
+ --surface: #ffffff;
4
+ --background: #f8fafc;
5
+ --text: #1e293b;
6
+ --text-secondary: #64748b;
7
+ --border: #e2e8f0;
8
+ --radius: 16px;
9
+ --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
10
+ }
11
+
12
+ @media (prefers-color-scheme: dark) {
13
+ :root {
14
+ --primary: #3b82f6;
15
+ --surface: #1e293b;
16
+ --background: #0f172a;
17
+ --text: #f8fafc;
18
+ --text-secondary: #94a3b8;
19
+ --border: #334155;
20
+ }
21
+ }
22
+
23
+ * {
24
+ box-sizing: border-box;
25
+ margin: 0;
26
+ padding: 0;
27
+ }
28
+
29
  body {
30
+ background: var(--background);
31
+ color: var(--text);
32
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
33
+ line-height: 1.5;
34
+ padding: 1rem;
35
+ transition: background-color 0.3s ease;
36
  }
37
 
38
+ .container {
39
+ max-width: 1200px;
40
+ margin: 0 auto;
41
+ padding: 2rem;
42
  }
43
 
44
+ .header {
45
+ text-align: center;
46
+ margin-bottom: 2rem;
47
+ }
48
+
49
+ .title {
50
+ font-size: 2rem;
51
+ font-weight: 700;
52
+ margin-bottom: 0.5rem;
53
+ background: linear-gradient(45deg, var(--primary), #6366f1);
54
+ -webkit-background-clip: text;
55
+ -webkit-text-fill-color: transparent;
56
+ }
57
+
58
+ .description {
59
+ color: var(--text-secondary);
60
+ max-width: 600px;
61
+ margin: 0 auto;
62
+ }
63
+
64
+ .grid {
65
+ display: grid;
66
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
67
+ gap: 1.5rem;
68
+ margin-bottom: 2rem;
69
  }
70
 
71
  .card {
72
+ background: var(--surface);
73
+ border-radius: var(--radius);
74
+ padding: 1.5rem;
75
+ box-shadow: var(--shadow);
76
+ border: 1px solid var(--border);
77
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
78
  }
79
 
80
+ .card:hover {
81
+ transform: translateY(-2px);
82
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
83
  }
84
+
85
+ .card-title {
86
+ font-size: 1.25rem;
87
+ font-weight: 600;
88
+ margin-bottom: 1rem;
89
+ display: flex;
90
+ align-items: center;
91
+ gap: 0.5rem;
92
+ }
93
+
94
+ .input-group {
95
+ margin-bottom: 1rem;
96
+ }
97
+
98
+ .input-group label {
99
+ display: block;
100
+ margin-bottom: 0.5rem;
101
+ font-weight: 500;
102
+ }
103
+
104
+ input, select, textarea {
105
+ width: 100%;
106
+ padding: 0.75rem;
107
+ border: 1px solid var(--border);
108
+ border-radius: calc(var(--radius) / 2);
109
+ background: var(--background);
110
+ color: var(--text);
111
+ font-size: 0.95rem;
112
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
113
+ }
114
+
115
+ input:focus, select:focus, textarea:focus {
116
+ outline: none;
117
+ border-color: var(--primary);
118
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
119
+ }
120
+
121
+ .button {
122
+ display: inline-flex;
123
+ align-items: center;
124
+ gap: 0.5rem;
125
+ padding: 0.75rem 1.5rem;
126
+ background: var(--primary);
127
+ color: white;
128
+ border: none;
129
+ border-radius: calc(var(--radius) / 2);
130
+ font-weight: 500;
131
+ cursor: pointer;
132
+ transition: background-color 0.2s ease, transform 0.2s ease;
133
+ }
134
+
135
+ .button:hover {
136
+ background: #1d4ed8;
137
+ transform: translateY(-1px);
138
+ }
139
+
140
+ .button:active {
141
+ transform: translateY(0);
142
+ }
143
+
144
+ .button:disabled {
145
+ opacity: 0.7;
146
+ cursor: not-allowed;
147
+ }
148
+
149
+ .progress-container {
150
+ position: relative;
151
+ height: 200px;
152
+ border-radius: var(--radius);
153
+ overflow: hidden;
154
+ background: var(--background);
155
+ border: 1px solid var(--border);
156
+ }
157
+
158
+ .progress-bar {
159
+ height: 6px;
160
+ background: var(--background);
161
+ border-radius: 3px;
162
+ overflow: hidden;
163
+ margin: 1rem 0;
164
+ }
165
+
166
+ .progress-value {
167
+ height: 100%;
168
+ background: var(--primary);
169
+ border-radius: 3px;
170
+ transition: width 0.3s ease;
171
+ }
172
+
173
+ .stats {
174
+ display: grid;
175
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
176
+ gap: 1rem;
177
+ margin-top: 1rem;
178
+ }
179
+
180
+ .stat {
181
+ text-align: center;
182
+ padding: 1rem;
183
+ background: var(--background);
184
+ border-radius: calc(var(--radius) / 2);
185
+ border: 1px solid var(--border);
186
+ }
187
+
188
+ .stat-value {
189
+ font-size: 1.5rem;
190
+ font-weight: 600;
191
+ margin-bottom: 0.25rem;
192
+ }
193
+
194
+ .stat-label {
195
+ color: var(--text-secondary);
196
+ font-size: 0.875rem;
197
+ }
198
+
199
+ @keyframes fadeIn {
200
+ from {
201
+ opacity: 0;
202
+ transform: translateY(10px);
203
+ }
204
+ to {
205
+ opacity: 1;
206
+ transform: translateY(0);
207
+ }
208
+ }
209
+
210
+ .animate-in {
211
+ animation: fadeIn 0.3s ease forwards;
212
+ }
213
+
214
+ @media (max-width: 768px) {
215
+ .container {
216
+ padding: 1rem;
217
+ }
218
+
219
+ .grid {
220
+ grid-template-columns: 1fr;
221
+ }
222
+
223
+ .card {
224
+ padding: 1rem;
225
+ }
226
+ }