This repository has no description
1/* Main container for single mode and comparison mode */
2.score-result {
3 width: 70%;
4 max-width: 800px; /* Optional: cap the width for larger screens */
5 margin: 20px auto; /* Center horizontally and add vertical spacing */
6 width: 100%;
7}
8
9.mode-toggle {
10 display: flex;
11 align-items: center;
12 justify-content: center; /* Centers the content horizontally */
13 max-width: 300px; /* Set a maximum width for the container */
14 margin: 10px auto; /* Center the div on the page */
15 padding: 10px;
16 border: 1px solid #ddd;
17 border-radius: 8px;
18 background-color: #f9f9f9;
19 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
20}
21
22.mode-toggle label {
23 font-size: 16px;
24 color: #333;
25 display: flex;
26 align-items: center;
27 gap: 8px; /* Adds spacing between the checkbox and the label text */
28}
29
30.mode-toggle input[type="checkbox"] {
31 width: 18px; /* Adjusts the checkbox size */
32 height: 18px;
33 cursor: pointer;
34}
35
36
37/* Comparison mode layout */
38
39/* Individual score breakdown cards */
40.score-breakdowns {
41 display: flex;
42 flex-direction: column; /* Default to column for single mode */
43 gap: 20px;
44 width: 100%;
45}
46
47/* Adjustments for comparison mode */
48.comparison-mode .score-breakdowns {
49 flex-direction: row; /* Side-by-side in comparison mode */
50 justify-content: space-between; /* Evenly space the breakdowns */
51}
52
53.score-breakdown {
54 flex: 1;
55 max-width: 100%; /* Full width by default */
56 padding: 15px;
57 border: 1px solid #ddd;
58 border-radius: 8px;
59 background-color: #f9f9f9;
60 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
61 box-sizing: border-box; /* Include padding and border in width */
62}
63
64/* Remove or comment out the existing custom bar-fill since Recharts handles it */
65.bar-fill {
66 display: none; /* Hide custom bar-fill since Recharts handles it */
67}
68
69/* Remove or comment out the existing h3 if it's no longer needed */
70/* .score-breakdown h3 {
71 text-align: center;
72 color: #333;
73 margin-bottom: 15px;
74} */
75
76/* New styles for the breakdown sections */
77.score-breakdown .breakdown-section {
78 background-color: #ffffff; /* White background for clarity */
79 padding: 1rem;
80 border-radius: 8px;
81 margin-bottom: 1rem;
82 border: 1px solid #ddd;
83}
84
85.score-breakdown .breakdown-section:last-child {
86 margin-bottom: 0;
87}
88
89.score-breakdown .breakdown-section h4 {
90 margin-bottom: 0.5rem;
91 color: #333;
92}
93
94.score-breakdown .breakdown-section ul {
95 list-style-type: disc;
96 padding-left: 1.5rem;
97}
98
99.score-breakdown .breakdown-section li {
100 margin-bottom: 0.5rem;
101 color: #555;
102}
103
104/* Score Toggle Controls */
105.score-toggle-controls {
106 display: flex;
107 justify-content: center;
108 gap: 20px;
109 margin-bottom: 15px;
110}
111
112.score-toggle-controls label {
113 font-size: 14px;
114 color: #333;
115 cursor: pointer;
116 display: flex;
117 align-items: center;
118 gap: 5px;
119}
120
121.score-toggle-controls input[type="checkbox"] {
122 width: 16px;
123 height: 16px;
124 cursor: pointer;
125}
126
127/* Bar Fill Container */
128.bar-fill {
129 display: flex;
130 height: 30px;
131 width: 100%;
132 background-color: #e0e0e0; /* Light gray background */
133 border-radius: 5px;
134 overflow: hidden;
135 position: relative;
136}
137
138/* Bluesky Segment */
139.bluesky-segment {
140 background-color: #3B9AF8; /* Blue color */
141 position: relative;
142 transition: opacity 0.3s ease;
143}
144
145.bluesky-segment:hover {
146 opacity: 0.8;
147}
148
149/* Atproto Segment */
150.atproto-segment {
151 background-color: #28a745; /* Green color */
152 position: relative;
153 transition: opacity 0.3s ease;
154}
155
156.atproto-segment:hover {
157 opacity: 0.8;
158}
159
160/* Bar Label */
161.bar-label {
162 width: 150px; /* Fixed width */
163 text-align: right;
164 padding-right: 10px;
165 font-weight: bold;
166 color: #333;
167}
168
169/* Bar Container */
170.bar {
171 display: flex;
172 align-items: center;
173 gap: 10px;
174}
175
176/* Single Mode Chart */
177.single-chart .bar-chart {
178 width: 100%;
179}
180
181/* Comparison Mode Chart */
182.comparison-chart .bar-chart {
183 width: 100%;
184}
185
186/* Score Breakdown Header */
187.score-breakdown-header {
188 font-size: 1.5rem;
189 font-weight: bold;
190 color: #3B9AF8; /* Blue color to make it stand out */
191 text-align: center;
192 margin-bottom: 1rem;
193}
194
195/* Ensure that the username header doesn't interfere with breakdown sections */
196.score-breakdown-header + .breakdown-section {
197 margin-top: 0;
198}
199
200/* Existing breakdown list styles */
201.score-breakdown ul {
202 list-style: none;
203 padding: 0;
204 margin: 15px 0 0;
205}
206
207.score-breakdown li {
208 margin-bottom: 8px;
209 color: #555;
210}
211
212.score-breakdown p {
213 margin: 8px 0;
214 color: #222;
215 font-weight: bold;
216}
217
218/* Center score breakdown card in single mode */
219.single-mode .score-breakdown {
220 max-width: 400px;
221 margin: 0 auto;
222}
223
224.single-chart {
225 margin-bottom: 20px;
226}
227
228/* Comparison chart and single chart styles */
229.chart {
230 margin-top: 20px;
231 padding: 15px;
232 background-color: #fff;
233 border: 1px solid #ddd;
234 border-radius: 8px;
235 background-color: #f9f9f9;
236 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
237}
238
239.bar-chart {
240 display: flex;
241 flex-direction: column;
242 gap: 10px;
243 padding: 10px;
244 border: 1px solid #ddd;
245 border-radius: 8px;
246 background-color: #f9f9f9;
247 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
248}
249
250.bar {
251 display: flex;
252 align-items: center;
253 height: 40px; /* Ensure consistent height for bars */
254 gap: 10px;
255}
256
257.bar-label {
258 width: 150px; /* Fixed size for labels */
259 text-align: right;
260 font-weight: bold;
261 color: #333;
262}
263
264
265.bar-fill {
266 display: none; /* Hide custom bar-fill since Recharts handles it */
267}
268
269/* Score Fill Span */
270.bar-fill span {
271 position: absolute;
272 width: 100%;
273 left: 0;
274 top: 0;
275 height: 100%;
276 display: flex;
277 align-items: center;
278 justify-content: center;
279 color: #fff;
280 font-weight: bold;
281}
282
283.bar-fill::before {
284 content: "";
285 position: absolute;
286 top: 0;
287 left: 0;
288 height: 100%;
289 background: #3B9AF8;
290 border-radius: 5px;
291 z-index: 0;
292 width: 100%;
293}
294
295/* High-Level Comparison Summary */
296.comparison-summary {
297 margin-top: 20px;
298 margin-bottom: 20px;
299 padding: 15px;
300 background-color: #e3f7e6;
301 border: 1px solid #ddd;
302 border-radius: 8px;
303 background-color: #f9f9f9;
304 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
305 font-size: 16px;
306 text-align: center;
307}
308
309.comparison-summary p {
310 margin: 10px 0;
311 color: #333;
312}
313
314.dark-mode .comparison-summary p {
315 color: white;
316}
317
318.comparison-summary-text {
319 padding-bottom: 15px;
320}
321
322/* Container for elements below the score breakdowns */
323.comparison-extras {
324 flex: 1 1 100%;
325}
326
327
328.loading-skeleton {
329 background-color: #f0f0f0;
330 border-radius: 8px;
331 padding: 20px;
332 width: 100%;
333 max-width: 400px;
334 margin: 0 auto 20px;
335 animation: pulse 1.5s infinite;
336}
337
338.skeleton-title {
339 height: 20px;
340 width: 50%;
341 margin-bottom: 15px;
342 background-color: #e0e0e0;
343 border-radius: 4px;
344}
345
346.skeleton-bar {
347 height: 20px;
348 width: 100%;
349 margin-bottom: 15px;
350 background-color: #e0e0e0;
351 border-radius: 4px;
352}
353
354.skeleton-paragraph {
355 height: 15px;
356 width: 80%;
357 margin-bottom: 10px;
358 background-color: #e0e0e0;
359 border-radius: 4px;
360}
361
362@keyframes pulse {
363 0% {
364 background-color: #f0f0f0;
365 }
366 50% {
367 background-color: #e0e0e0;
368 }
369 100% {
370 background-color: #f0f0f0;
371 }
372}
373
374
375/* Responsive Design */
376@media (max-width: 768px) {
377 .comparison-mode .score-breakdowns {
378 flex-direction: column; /* Stack breakdowns vertically on small screens */
379 }
380
381 .score-breakdown {
382 max-width: 100%;
383 }
384
385 .bar-label {
386 width: 100px;
387 }
388}
389
390@media (max-width: 768px) {
391 .score-result {
392 width: 90%; /* Take up more width on smaller screens */
393 padding: 15px; /* Reduce padding for smaller screens */
394 }
395}
396
397/* Additional Styles for Breakdown Sections */
398
399/* Ensure that the breakdown sections are clearly separated */
400.score-breakdown .breakdown-section {
401 background-color: #ffffff; /* White background for clarity */
402 padding: 1rem;
403 border-radius: 8px;
404 margin-bottom: 1rem;
405 border: 1px solid #ddd;
406}
407
408.score-breakdown .breakdown-section:last-child {
409 margin-bottom: 0;
410}
411
412.score-breakdown .breakdown-section h4 {
413 margin-bottom: 0.5rem;
414 color: #333;
415}
416
417.score-breakdown .breakdown-section ul {
418 list-style-type: disc;
419 padding-left: 1.5rem;
420}
421
422.score-breakdown .breakdown-section li {
423 margin-bottom: 0.5rem;
424 color: #555;
425}
426
427/* Score Breakdown Header */
428.score-breakdown-header {
429 font-size: 1.5rem;
430 font-weight: bold;
431 color: #3B9AF8; /* Blue color to make it stand out */
432 text-align: center;
433 margin-bottom: 1rem;
434}
435
436/* Ensure that the username header doesn't interfere with breakdown sections */
437.score-breakdown-header + .breakdown-section {
438 margin-top: 0;
439}
440
441/* Customize Recharts Tooltip */
442.recharts-tooltip-wrapper {
443 background-color: rgba(255, 255, 255, 0.9);
444 border: 1px solid #ccc;
445 border-radius: 4px;
446 padding: 10px;
447}
448
449/* Customize Recharts Legend */
450.recharts-legend-wrapper {
451 font-size: 14px;
452 color: #333;
453 text-align: center;
454}
455
456/* Optional: Customize Legend Items */
457.recharts-legend-item-text {
458 cursor: pointer;
459}
460
461.recharts-default-legend {
462 padding-top: 20px;
463}
464
465/* Hover Effects on Legend Items */
466.recharts-legend-item-text:hover {
467 text-decoration: underline;
468}
469
470
471/* Custom Tooltip Styles */
472.custom-tooltip {
473 background-color: rgba(255, 255, 255, 0.95);
474 border: 1px solid #ccc;
475 border-radius: 4px;
476 padding: 10px;
477 box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
478}
479
480.custom-tooltip .label {
481 font-weight: bold;
482 margin-bottom: 5px;
483 color: #333;
484}
485
486.custom-tooltip p {
487 margin: 0;
488 color: #555;
489 font-size: 14px;
490}