Hugging Face's logo

Spaces:
DHEIVER
/
CalibrationReport
Running

App Files Community
DHEIVER commited on
Commit
3e88d63
·
verified ·
1 Parent(s): 7340b7e

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +180 -103
style.css CHANGED
@@ -1,166 +1,243 @@
 
1
  :root {
 
2
  --primary-color: #2563eb;
 
 
3
  --success-color: #16a34a;
 
4
  --error-color: #dc2626;
 
5
  --warning-color: #d97706;
 
6
  --background-color: #f8fafc;
7
  --text-color: #1e293b;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  }
9
 
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
  }
15
 
16
- body {
17
- font-family: system-ui, -apple-system, sans-serif;
18
- background-color: var(--background-color);
19
- color: var(--text-color);
20
- line-height: 1.5;
21
  }
22
 
23
- header {
24
- background-color: white;
25
- padding: 1rem;
26
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
27
- margin-bottom: 2rem;
28
  }
29
 
30
- h1 {
31
- max-width: 1200px;
32
- margin: 0 auto;
33
- font-size: 1.5rem;
34
- font-weight: 600;
35
  }
36
 
37
- .container {
38
- max-width: 1200px;
39
- margin: 0 auto;
40
- padding: 0 1rem;
 
 
41
  }
42
 
43
- .upload-area {
44
- background-color: white;
45
- border: 2px dashed #cbd5e1;
46
- border-radius: 0.5rem;
47
- padding: 2rem;
48
- text-align: center;
49
- transition: all 0.3s ease;
50
  }
51
 
52
- .upload-area.drag-over {
53
- border-color: var(--primary-color);
54
- background-color: #eff6ff;
 
 
 
 
 
 
55
  }
56
 
57
- .upload-label {
58
- cursor: pointer;
59
- display: flex;
60
- flex-direction: column;
61
- align-items: center;
62
- gap: 1rem;
63
  }
64
 
65
- .upload-icon {
66
- width: 4rem;
67
- height: 4rem;
68
- border: 2px solid #94a3b8;
69
- border-radius: 50%;
70
  position: relative;
71
- transition: all 0.3s ease;
72
  }
73
 
74
- .hidden {
75
- display: none !important;
 
 
 
 
 
 
 
 
 
 
 
76
  }
77
 
78
- .loading {
79
- display: flex;
80
- flex-direction: column;
81
- align-items: center;
82
- gap: 1rem;
83
- margin: 2rem 0;
 
84
  }
85
 
86
- .spinner {
87
- width: 2.5rem;
88
- height: 2.5rem;
89
- border: 3px solid #e2e8f0;
90
- border-top-color: var(--primary-color);
91
- border-radius: 50%;
92
- animation: spin 1s linear infinite;
 
 
 
93
  }
94
 
95
- .analysis-results {
96
- margin-top: 2rem;
 
 
97
  }
98
 
99
- .alert {
100
- background-color: white;
101
- border-radius: 0.5rem;
102
- padding: 1rem;
103
- margin-bottom: 1rem;
104
- border-left: 4px solid;
105
  }
106
 
107
- .alert-success {
108
- border-left-color: var(--success-color);
 
 
 
 
 
 
 
109
  }
110
 
111
- .alert-error {
112
- border-left-color: var(--error-color);
 
113
  }
114
 
115
- .alert-warning {
116
- border-left-color: var(--warning-color);
117
  }
118
 
119
- .compliance-report {
120
- background-color: white;
121
- border-radius: 0.5rem;
122
- padding: 1.5rem;
123
- margin-top: 2rem;
124
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
125
  }
126
 
127
- .report-content {
128
- margin-top: 1rem;
129
  }
130
 
131
- .report-section {
132
- margin-bottom: 1.5rem;
 
133
  }
134
 
135
- .report-section h3 {
136
- margin-bottom: 0.5rem;
137
- font-size: 1.1rem;
138
- font-weight: 600;
 
 
 
139
  }
140
 
141
- .metric {
142
- display: flex;
143
- justify-content: space-between;
144
- padding: 0.5rem 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  border-bottom: 1px solid #e2e8f0;
146
  }
147
 
148
- .metric:last-child {
149
- border-bottom: none;
 
 
 
150
  }
151
 
152
- @keyframes spin {
153
- to {
154
- transform: rotate(360deg);
155
- }
 
 
 
 
 
 
 
 
 
 
 
156
  }
157
 
158
- @media (max-width: 640px) {
 
159
  .container {
160
- padding: 0 0.5rem;
 
 
 
 
161
  }
162
 
163
- .upload-area {
164
- padding: 1rem;
 
 
165
  }
166
- }
 
1
+ /* Melhorias no CSS */
2
  :root {
3
+ /* 1. Paleta de cores expandida */
4
  --primary-color: #2563eb;
5
+ --primary-dark: #1d4ed8;
6
+ --primary-light: #3b82f6;
7
  --success-color: #16a34a;
8
+ --success-light: #22c55e;
9
  --error-color: #dc2626;
10
+ --error-light: #ef4444;
11
  --warning-color: #d97706;
12
+ --warning-light: #f59e0b;
13
  --background-color: #f8fafc;
14
  --text-color: #1e293b;
15
+ --text-light: #64748b;
16
+
17
+ /* 2. Sistema de espaçamento consistente */
18
+ --spacing-xs: 0.25rem;
19
+ --spacing-sm: 0.5rem;
20
+ --spacing-md: 1rem;
21
+ --spacing-lg: 1.5rem;
22
+ --spacing-xl: 2rem;
23
+ }
24
+
25
+ /* 3. Dark mode support */
26
+ @media (prefers-color-scheme: dark) {
27
+ :root {
28
+ --background-color: #0f172a;
29
+ --text-color: #e2e8f0;
30
+ --text-light: #94a3b8;
31
+ }
32
  }
33
 
34
+ /* 4. Animações melhoradas */
35
+ @keyframes slideIn {
36
+ from { transform: translateY(-20px); opacity: 0; }
37
+ to { transform: translateY(0); opacity: 1; }
38
  }
39
 
40
+ @keyframes fadeIn {
41
+ from { opacity: 0; }
42
+ to { opacity: 1; }
 
 
43
  }
44
 
45
+ /* 5. Tipografia responsiva */
46
+ html {
47
+ font-size: clamp(14px, 1vw + 10px, 18px);
 
 
48
  }
49
 
50
+ /* 6. Melhorias na acessibilidade */
51
+ :focus {
52
+ outline: 3px solid var(--primary-light);
53
+ outline-offset: 2px;
 
54
  }
55
 
56
+ /* 7. Cards com design moderno */
57
+ .card {
58
+ background: white;
59
+ border-radius: 1rem;
60
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
61
+ transition: transform 0.2s, box-shadow 0.2s;
62
  }
63
 
64
+ .card:hover {
65
+ transform: translateY(-2px);
66
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
 
 
 
 
67
  }
68
 
69
+ /* 8. Upload area mais interativa */
70
+ .upload-area {
71
+ background-image: linear-gradient(45deg, var(--background-color) 25%, transparent 25%),
72
+ linear-gradient(-45deg, var(--background-color) 25%, transparent 25%),
73
+ linear-gradient(45deg, transparent 75%, var(--background-color) 75%),
74
+ linear-gradient(-45deg, transparent 75%, var(--background-color) 75%);
75
+ background-size: 20px 20px;
76
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
77
+ animation: fadeIn 0.5s ease-out;
78
  }
79
 
80
+ /* 9. Loading spinner aprimorado */
81
+ .spinner {
82
+ background: conic-gradient(from 0deg, var(--primary-color), var(--primary-light));
83
+ mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
 
 
84
  }
85
 
86
+ /* 10. Tooltips informativos */
87
+ [data-tooltip] {
 
 
 
88
  position: relative;
 
89
  }
90
 
91
+ [data-tooltip]:hover::before {
92
+ content: attr(data-tooltip);
93
+ position: absolute;
94
+ bottom: 100%;
95
+ left: 50%;
96
+ transform: translateX(-50%);
97
+ padding: var(--spacing-sm) var(--spacing-md);
98
+ background: var(--text-color);
99
+ color: white;
100
+ border-radius: 4px;
101
+ font-size: 0.875rem;
102
+ white-space: nowrap;
103
+ z-index: 10;
104
  }
105
 
106
+ /* 11. Badges de status */
107
+ .badge {
108
+ display: inline-block;
109
+ padding: 0.25em 0.75em;
110
+ border-radius: 9999px;
111
+ font-size: 0.875em;
112
+ font-weight: 500;
113
  }
114
 
115
+ .badge-success { background: var(--success-light); color: white; }
116
+ .badge-error { background: var(--error-light); color: white; }
117
+ .badge-warning { background: var(--warning-light); color: white; }
118
+
119
+ /* 12. Progress bars estilizados */
120
+ .progress {
121
+ height: 8px;
122
+ background: #e2e8f0;
123
+ border-radius: 4px;
124
+ overflow: hidden;
125
  }
126
 
127
+ .progress-bar {
128
+ height: 100%;
129
+ background: linear-gradient(90deg, var(--primary-light), var(--primary-color));
130
+ transition: width 0.3s ease;
131
  }
132
 
133
+ /* 13. Grid responsivo */
134
+ .grid {
135
+ display: grid;
136
+ gap: var(--spacing-md);
137
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 
138
  }
139
 
140
+ /* 14. Botões modernos */
141
+ .button {
142
+ display: inline-flex;
143
+ align-items: center;
144
+ gap: var(--spacing-sm);
145
+ padding: var(--spacing-sm) var(--spacing-md);
146
+ border-radius: 8px;
147
+ font-weight: 500;
148
+ transition: all 0.2s;
149
  }
150
 
151
+ .button-primary {
152
+ background: var(--primary-color);
153
+ color: white;
154
  }
155
 
156
+ .button-primary:hover {
157
+ background: var(--primary-dark);
158
  }
159
 
160
+ /* 15. Scrollbar personalizado */
161
+ ::-webkit-scrollbar {
162
+ width: 8px;
163
+ height: 8px;
 
 
164
  }
165
 
166
+ ::-webkit-scrollbar-track {
167
+ background: #f1f1f1;
168
  }
169
 
170
+ ::-webkit-scrollbar-thumb {
171
+ background: var(--primary-light);
172
+ border-radius: 4px;
173
  }
174
 
175
+ /* 16. Form inputs estilizados */
176
+ .input {
177
+ width: 100%;
178
+ padding: var(--spacing-sm) var(--spacing-md);
179
+ border: 2px solid #e2e8f0;
180
+ border-radius: 8px;
181
+ transition: border-color 0.2s;
182
  }
183
 
184
+ .input:focus {
185
+ border-color: var(--primary-color);
186
+ }
187
+
188
+ /* 17. Tabelas responsivas */
189
+ .table-container {
190
+ overflow-x: auto;
191
+ margin: var(--spacing-md) 0;
192
+ }
193
+
194
+ .table {
195
+ width: 100%;
196
+ border-collapse: collapse;
197
+ }
198
+
199
+ .table th, .table td {
200
+ padding: var(--spacing-sm) var(--spacing-md);
201
  border-bottom: 1px solid #e2e8f0;
202
  }
203
 
204
+ /* 18. Skeleton loading */
205
+ .skeleton {
206
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
207
+ background-size: 200% 100%;
208
+ animation: skeleton-loading 1.5s infinite;
209
  }
210
 
211
+ @keyframes skeleton-loading {
212
+ from { background-position: 200% 0; }
213
+ to { background-position: -200% 0; }
214
+ }
215
+
216
+ /* 19. Notificações toast */
217
+ .toast {
218
+ position: fixed;
219
+ bottom: var(--spacing-xl);
220
+ right: var(--spacing-xl);
221
+ padding: var(--spacing-md);
222
+ background: white;
223
+ border-radius: 8px;
224
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
225
+ animation: slideIn 0.3s ease-out;
226
  }
227
 
228
+ /* 20. Media queries para dispositivos diferentes */
229
+ @media (max-width: 768px) {
230
  .container {
231
+ padding: 0 var(--spacing-md);
232
+ }
233
+
234
+ .grid {
235
+ grid-template-columns: 1fr;
236
  }
237
 
238
+ .toast {
239
+ left: var(--spacing-md);
240
+ right: var(--spacing-md);
241
+ bottom: var(--spacing-md);
242
  }
243
+ }