Hugging Face's logo

Spaces:
DHEIVER
/
CalibrationReport
Running

App Files Community
DHEIVER commited on
Commit
89bba7c
·
verified ·
1 Parent(s): 1adaf9b

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +68 -48
style.css CHANGED
@@ -1,76 +1,96 @@
1
- * {
2
- box-sizing: border-box;
3
- padding: 0;
4
- margin: 0;
5
- font-family: sans-serif;
6
  }
7
 
8
- html,
9
  body {
10
- height: 100%;
 
 
11
  }
12
 
13
- body {
14
- padding: 32px;
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
 
 
 
 
19
  display: flex;
20
  flex-direction: column;
21
- justify-content: center;
22
  align-items: center;
 
23
  }
24
 
25
- #container {
 
 
 
 
26
  position: relative;
27
- gap: 0.4rem;
28
-
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
44
  }
45
 
46
- #upload {
47
- display: none;
 
 
 
 
 
 
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
 
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
 
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
 
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
68
  }
69
 
70
- .bounding-box-label {
71
- color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
76
  }
 
1
+ :root {
2
+ --primary-color: #3b82f6;
3
+ --error-color: #ef4444;
4
+ --success-color: #22c55e;
 
5
  }
6
 
 
7
  body {
8
+ margin: 0;
9
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
+ background-color: #f3f4f6;
11
  }
12
 
13
+ .container {
14
+ max-width: 64rem;
15
+ margin: 2rem auto;
16
+ padding: 0 1rem;
17
+ }
18
+
19
+ .upload-area {
20
+ border: 2px dashed #d1d5db;
21
+ border-radius: 0.5rem;
22
+ padding: 2rem;
23
+ text-align: center;
24
+ background-color: white;
25
+ transition: border-color 0.3s;
26
  }
27
 
28
+ .upload-area:hover {
29
+ border-color: var(--primary-color);
30
+ }
31
+
32
+ .upload-label {
33
+ cursor: pointer;
34
  display: flex;
35
  flex-direction: column;
 
36
  align-items: center;
37
+ gap: 0.5rem;
38
  }
39
 
40
+ .upload-icon {
41
+ width: 3rem;
42
+ height: 3rem;
43
+ border: 2px solid #9ca3af;
44
+ border-radius: 50%;
45
  position: relative;
46
+ }
 
 
 
 
 
47
 
48
+ .hidden {
49
+ display: none;
50
+ }
 
 
51
 
52
+ .loading {
53
+ display: flex;
54
+ justify-content: center;
55
+ margin: 1rem 0;
56
  }
57
 
58
+ .loading::after {
59
+ content: "";
60
+ width: 2rem;
61
+ height: 2rem;
62
+ border: 2px solid #e5e7eb;
63
+ border-top-color: var(--primary-color);
64
+ border-radius: 50%;
65
+ animation: spin 1s linear infinite;
66
  }
67
 
68
+ .analysis-results {
69
+ margin-top: 2rem;
70
+ display: flex;
71
+ flex-direction: column;
72
+ gap: 1rem;
73
  }
74
 
75
+ .alert {
76
+ padding: 1rem;
77
+ border-radius: 0.5rem;
78
+ background-color: white;
79
+ border: 1px solid #e5e7eb;
80
  }
81
 
82
+ .alert-error {
83
+ border-color: var(--error-color);
84
+ background-color: #fef2f2;
85
  }
86
 
87
+ .alert-success {
88
+ border-color: var(--success-color);
89
+ background-color: #f0fdf4;
 
90
  }
91
 
92
+ @keyframes spin {
93
+ to {
94
+ transform: rotate(360deg);
95
+ }
 
 
96
  }