This repository has no description
1.leaderboard-container {
2 max-width: 1200px;
3 margin: 0 auto;
4 padding: 1rem;
5 margin-top: 20px;
6}
7
8.leaderboard-card {
9 background: var(--navbar-bg);
10 border-radius: 12px;
11 border: 5px solid var(--card-border);
12 padding: 1.7rem;
13 transition: background-color 0.3s ease, border-color 0.3s ease;
14}
15
16.leaderboard-header {
17 margin-bottom: 1.5rem;
18}
19
20.leaderboard-header h1 {
21 font-size: 1.5rem;
22 font-weight: bold;
23 margin-bottom: 0.5rem;
24 color: var(--button-bg);
25}
26
27.leaderboard-description {
28 color: var(--text);
29 line-height: 1.5;
30 opacity: 0.8;
31 transition: color 0.3s ease;
32}
33
34.score-type-filters {
35 margin-bottom: 1.5rem;
36}
37
38.filter-button {
39 padding: 0.5rem 1rem;
40 border-radius: 6px;
41 border: none;
42 cursor: pointer;
43 transition: all 0.2s ease;
44 background: var(--card-border);
45 color: var(--text);
46 margin-right: 10px;
47}
48
49.filter-button:hover {
50 background: var(--button-bg);
51 color: var(--button-text);
52}
53
54.filter-button.active {
55 background: var(--button-bg);
56 color: var(--button-text);
57}
58
59.error-message {
60 background: #fee2e2;
61 border: 1px solid #ef4444;
62 color: #b91c1c;
63 padding: 0.75rem 1rem;
64 border-radius: 4px;
65 margin-bottom: 1rem;
66}
67
68.dark-mode .error-message {
69 background: #414141;
70}
71
72/* Table wrapper and scrollbar styles */
73.table-wrapper {
74 position: relative;
75 margin: -5px;
76 padding: 5px;
77}
78
79.table-container {
80 overflow-x: auto;
81}
82
83/* Webkit scrollbar styles */
84.table-container::-webkit-scrollbar {
85 -webkit-appearance: none;
86 height: 8px;
87}
88
89.table-container::-webkit-scrollbar-track {
90 background: var(--card-border);
91 border-radius: 4px;
92}
93
94.table-container::-webkit-scrollbar-thumb {
95 background: var(--button-bg);
96 border-radius: 4px;
97}
98
99/* Make the scrollbar float in supporting browsers */
100@supports (overflow: overlay) {
101 .table-container {
102 overflow: overlay;
103 }
104}
105
106/* Firefox scrollbar styles */
107.table-container {
108 scrollbar-width: thin;
109 scrollbar-color: var(--button-bg) var(--card-border);
110}
111
112.leaderboard-table {
113 width: 100%;
114 min-width: 800px;
115 border-collapse: collapse;
116}
117
118.leaderboard-table th,
119.leaderboard-table td {
120 padding: 0.75rem 1rem;
121 text-align: center;
122 color: var(--text);
123 transition: color 0.3s ease;
124}
125
126.leaderboard-table th {
127 border-bottom: 2px solid var(--card-border);
128 font-weight: 600;
129 white-space: nowrap;
130}
131
132.leaderboard-table tr {
133 transition: background-color 0.3s ease;
134}
135
136.leaderboard-table tr:hover {
137 background: #b6b6b6;
138}
139
140.dark-mode .leaderboard-table tr:hover {
141 background: #151515;
142}
143
144/* Runner-up styling */
145.leaderboard-table tr.runner-up {
146 position: relative;
147}
148
149.leaderboard-table tr.runner-up td {
150 background: var(--card-border);
151 opacity: 0.8;
152}
153
154.leaderboard-table tr.runner-up:first-of-type td:first-child {
155 border-top-left-radius: 10px;
156}
157
158.leaderboard-table tr.runner-up:first-of-type td:last-child {
159 border-top-right-radius: 10px;
160}
161
162.leaderboard-table tr.runner-up:last-of-type td:first-child {
163 border-bottom-left-radius: 10px;
164}
165
166.leaderboard-table tr.runner-up:last-of-type td:last-child {
167 border-bottom-right-radius: 10px;
168}
169
170.leaderboard-table tr.runner-up:hover td {
171 opacity: 0.9;
172}
173
174.leaderboard-table tr.runner-up .user-handle {
175 opacity: 0.8;
176}
177
178/* Column specific styles */
179.rank-cell {
180 width: 80px;
181 font-weight: 500;
182}
183
184.user-handle {
185 color: var(--button-bg);
186 text-decoration: none;
187 font-weight: 500;
188 transition: color 0.3s ease;
189}
190
191.user-handle:hover {
192 opacity: 0.8;
193}
194
195.score-column,
196.score-cell {
197 width: 100px;
198 text-align: right;
199 font-weight: 600;
200}
201
202.activity-badge {
203 background: var(--card-border);
204 color: var(--text);
205 padding: 0.25rem 0.75rem;
206 border-radius: 9999px;
207 font-size: 0.875rem;
208 white-space: nowrap;
209 transition: background-color 0.3s ease, color 0.3s ease;
210}
211
212.age-cell {
213 width: 100px;
214 white-space: nowrap;
215}
216
217/* Balance indicator styling */
218.balance-indicator {
219 width: 180px;
220 min-width: 180px;
221 position: relative;
222}
223
224.balance-track {
225 height: 24px;
226 background: var(--card-border);
227 border-radius: 12px;
228 position: relative;
229 margin-bottom: 8px;
230 overflow: hidden;
231}
232
233.balance-bar {
234 width: 4px;
235 height: 24px;
236 background: var(--button-bg);
237 position: absolute;
238 top: 0;
239 transform: translateX(-50%);
240 transition: left 0.3s ease;
241}
242
243.protocol-labels {
244 position: absolute;
245 top: 0;
246 left: 0;
247 right: 0;
248 bottom: 0;
249 display: flex;
250 justify-content: space-between;
251 align-items: center;
252 padding: 0 10px;
253 font-size: 0.7rem;
254 color: var(--text);
255 opacity: 0.6;
256 pointer-events: none;
257}
258
259.balance-description {
260 display: block;
261 font-size: 0.75rem;
262 color: var(--text);
263 opacity: 0.8;
264 text-align: center;
265 transition: color 0.3s ease;
266}
267
268/* Loading spinner */
269.loading-container {
270 text-align: center;
271 padding: 1rem 0;
272}
273
274.loading-spinner {
275 display: inline-block;
276 width: 2rem;
277 height: 2rem;
278 border: 4px solid var(--card-border);
279 border-top-color: var(--button-bg);
280 border-radius: 50%;
281 animation: spin 1s linear infinite;
282 transition: border-color 0.3s ease;
283}
284
285@keyframes spin {
286 to {
287 transform: rotate(360deg);
288 }
289}
290
291/* Responsive adjustments */
292@media (max-width: 1024px) {
293 .leaderboard-card {
294 padding: 1rem;
295 }
296
297 .balance-indicator {
298 width: 140px;
299 min-width: 140px;
300 }
301
302 .activity-badge {
303 padding: 0.25rem 0.5rem;
304 }
305
306 .leaderboard-table th,
307 .leaderboard-table td {
308 padding: 0.5rem;
309 }
310}
311
312@media (max-width: 768px) {
313 .score-type-filters {
314 flex-direction: column;
315 }
316
317 .filter-button {
318 width: 100%;
319 margin-bottom: 10px;
320 }
321
322 .balance-description {
323 display: none;
324 }
325
326 .balance-track {
327 margin-bottom: 0px;
328 }
329}
330
331@media (max-width: 480px) {
332 .protocol-labels {
333 font-size: 0.6rem;
334 }
335
336 .balance-indicator {
337 width: 100px;
338 min-width: 100px;
339 }
340}