m-ric HF Staff commited on
Commit
51e5344
·
verified ·
1 Parent(s): aff7ee7

Update frontend/src/App.css

Browse files
Files changed (1) hide show
  1. frontend/src/App.css +86 -26
frontend/src/App.css CHANGED
@@ -1,38 +1,98 @@
1
- .App {
 
 
 
 
 
 
2
  text-align: center;
 
3
  }
4
 
5
- .App-logo {
6
- height: 40vmin;
7
- pointer-events: none;
8
  }
9
 
10
- @media (prefers-reduced-motion: no-preference) {
11
- .App-logo {
12
- animation: App-logo-spin infinite 20s linear;
13
- }
14
  }
15
 
16
- .App-header {
17
- background-color: #282c34;
18
- min-height: 100vh;
19
- display: flex;
20
- flex-direction: column;
21
- align-items: center;
22
- justify-content: center;
23
- font-size: calc(10px + 2vmin);
24
- color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  }
26
 
27
- .App-link {
28
- color: #61dafb;
29
  }
30
 
31
- @keyframes App-logo-spin {
32
- from {
33
- transform: rotate(0deg);
34
- }
35
- to {
36
- transform: rotate(360deg);
37
- }
38
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .container {
2
+ max-width: 1000px;
3
+ margin: 0 auto;
4
+ padding: 20px;
5
+ }
6
+
7
+ .header {
8
  text-align: center;
9
+ margin-bottom: 24px;
10
  }
11
 
12
+ .title {
13
+ color: #333;
14
+ margin-bottom: 8px;
15
  }
16
 
17
+ .subtitle {
18
+ color: #666;
 
 
19
  }
20
 
21
+ .search-container {
22
+ margin-bottom: 20px;
23
+ }
24
+
25
+ .search-input {
26
+ width: 100%;
27
+ padding: 8px 12px;
28
+ font-size: 14px;
29
+ border: 1px solid #ddd;
30
+ border-radius: 4px;
31
+ }
32
+
33
+ .table-container {
34
+ background: white;
35
+ border-radius: 8px;
36
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
37
+ overflow: hidden;
38
+ }
39
+
40
+ table {
41
+ width: 100%;
42
+ border-collapse: collapse;
43
+ }
44
+
45
+ th {
46
+ text-align: left;
47
+ padding: 12px;
48
+ border-bottom: 2px solid #eee;
49
+ color: #333;
50
+ font-weight: 600;
51
+ cursor: pointer;
52
  }
53
 
54
+ th:hover {
55
+ color: #2ecc71;
56
  }
57
 
58
+ td {
59
+ padding: 12px;
60
+ border-bottom: 1px solid #eee;
 
 
 
 
61
  }
62
+
63
+ tr:nth-child(even) {
64
+ background-color: #f8f9fa;
65
+ }
66
+
67
+ .model-name {
68
+ font-weight: 500;
69
+ color: #2c3e50;
70
+ }
71
+
72
+ .score-bar {
73
+ width: 100%;
74
+ height: 24px;
75
+ background: #eee;
76
+ border-radius: 12px;
77
+ overflow: hidden;
78
+ position: relative;
79
+ }
80
+
81
+ .score-fill {
82
+ height: 100%;
83
+ background: #2ecc71;
84
+ transition: width 0.3s ease;
85
+ border-radius: 12px;
86
+ }
87
+
88
+ .score-text {
89
+ position: absolute;
90
+ right: 8px;
91
+ top: 50%;
92
+ transform: translateY(-50%);
93
+ color: white;
94
+ font-size: 12px;
95
+ font-weight: 500;
96
+ text-shadow: 0 1px 2px rgba(0,0,0,0.1);
97
+ mix-blend-mode: difference;
98
+ }