Spaces:
Running
on
Zero
Running
on
Zero
Unified font and UI size
Browse files- static/styles.css +329 -148
static/styles.css
CHANGED
@@ -12,13 +12,34 @@
|
|
12 |
--highlight: #FFFBEB;
|
13 |
--model-a-color: #92B4F4;
|
14 |
--model-b-color: #F8ADA7;
|
|
|
|
|
|
|
15 |
--query-background: #F0F7FF;
|
16 |
--query-border: #D1E3F8;
|
17 |
--query-text: #2E5AAC;
|
18 |
--insufficient-alert-bg: #fff0f0;
|
19 |
--insufficient-alert-border: #f78989;
|
20 |
--insufficient-alert-text: #b92020;
|
21 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
}
|
23 |
|
24 |
/* Dark Mode */
|
@@ -36,6 +57,9 @@
|
|
36 |
--highlight: #3D3825;
|
37 |
--model-a-color: #5A85C7;
|
38 |
--model-b-color: #C47A74;
|
|
|
|
|
|
|
39 |
--query-background: #2A3F5C;
|
40 |
--query-border: #3A5277;
|
41 |
--query-text: #A9C2E8;
|
@@ -48,7 +72,7 @@
|
|
48 |
/* Global Styles */
|
49 |
body, .gradio-container {
|
50 |
background-color: var(--background-main);
|
51 |
-
font-size:
|
52 |
overflow-x: hidden !important;
|
53 |
color: var(--text-dark);
|
54 |
}
|
@@ -66,21 +90,21 @@ body, .gradio-container {
|
|
66 |
padding-bottom: 0 !important;
|
67 |
}
|
68 |
|
69 |
-
/*
|
70 |
.gradio-markdown p,
|
71 |
.gradio-markdown li,
|
72 |
.gradio-markdown ul,
|
73 |
.gradio-markdown ol {
|
74 |
-
font-size: var(--text-
|
75 |
-
line-height:
|
76 |
-
margin-bottom:
|
77 |
}
|
78 |
|
79 |
/* Special styles for intro instruction text */
|
80 |
.gradio-markdown p:has(em):has(strong) {
|
81 |
-
font-size:
|
82 |
-
line-height:
|
83 |
-
margin-bottom:
|
84 |
}
|
85 |
|
86 |
.gradio-row {
|
@@ -94,16 +118,16 @@ body, .gradio-container {
|
|
94 |
|
95 |
.tab-nav {
|
96 |
background-color: var(--background-light) !important;
|
97 |
-
padding:
|
98 |
border-radius: 8px 8px 0 0 !important;
|
99 |
border-bottom: 1px solid var(--border-light) !important;
|
100 |
}
|
101 |
|
102 |
.tab-nav button {
|
103 |
-
font-size:
|
104 |
font-weight: 600 !important;
|
105 |
-
padding:
|
106 |
-
margin: 0
|
107 |
border-radius: 6px 6px 0 0 !important;
|
108 |
border: none !important;
|
109 |
background-color: transparent !important;
|
@@ -126,21 +150,24 @@ body, .gradio-container {
|
|
126 |
border: none !important;
|
127 |
}
|
128 |
|
129 |
-
/*
|
130 |
h1 {
|
131 |
-
font-size:
|
132 |
color: var(--primary) !important;
|
133 |
-
margin:
|
134 |
padding: 0 !important;
|
|
|
|
|
135 |
}
|
136 |
|
137 |
h3,
|
138 |
.section-heading {
|
139 |
-
font-size:
|
140 |
font-weight: 600 !important;
|
141 |
-
margin:
|
142 |
padding: 0 !important;
|
143 |
color: var(--text-dark) !important;
|
|
|
144 |
}
|
145 |
|
146 |
.orange-title {
|
@@ -150,14 +177,14 @@ h3,
|
|
150 |
|
151 |
/* Common Dividers */
|
152 |
hr {
|
153 |
-
margin:
|
154 |
border: none !important;
|
155 |
height: 1px !important;
|
156 |
background-color: var(--border-light) !important;
|
157 |
}
|
158 |
|
159 |
.results-reveal-area hr {
|
160 |
-
margin:
|
161 |
width: 100% !important;
|
162 |
}
|
163 |
|
@@ -167,14 +194,14 @@ hr {
|
|
167 |
display: flex !important;
|
168 |
align-items: center !important;
|
169 |
overflow: visible !important;
|
170 |
-
min-height:
|
171 |
white-space: normal !important;
|
172 |
}
|
173 |
|
174 |
#query-title-row h3 {
|
175 |
margin: 0 !important;
|
176 |
padding: 0 !important;
|
177 |
-
line-height:
|
178 |
flex-grow: 0 !important;
|
179 |
flex-shrink: 0 !important;
|
180 |
white-space: normal !important;
|
@@ -186,13 +213,13 @@ hr {
|
|
186 |
#query-container {
|
187 |
display: flex !important;
|
188 |
align-items: stretch !important;
|
189 |
-
gap:
|
190 |
overflow: visible !important;
|
191 |
}
|
192 |
|
193 |
.query-box-row {
|
194 |
background-color: var(--query-background) !important;
|
195 |
-
padding:
|
196 |
border-radius: 6px !important;
|
197 |
border: 1px solid var(--query-border) !important;
|
198 |
margin: 0 !important;
|
@@ -201,7 +228,7 @@ hr {
|
|
201 |
max-width: 70% !important;
|
202 |
overflow: visible !important;
|
203 |
display: flex !important;
|
204 |
-
min-height:
|
205 |
height: auto !important;
|
206 |
}
|
207 |
|
@@ -213,18 +240,18 @@ hr {
|
|
213 |
overflow: visible !important;
|
214 |
width: 100% !important;
|
215 |
display: block !important;
|
216 |
-
text-align: left !important;
|
217 |
}
|
218 |
|
219 |
.empty-query {
|
220 |
-
text-align: center !important;
|
221 |
}
|
222 |
|
223 |
.query-text p {
|
224 |
-
font-size:
|
225 |
font-weight: 600 !important;
|
226 |
color: var(--query-text) !important;
|
227 |
-
line-height:
|
228 |
margin: 0 !important;
|
229 |
padding: 0 !important;
|
230 |
background-color: transparent !important;
|
@@ -237,37 +264,40 @@ hr {
|
|
237 |
overflow: visible !important;
|
238 |
}
|
239 |
|
240 |
-
/*
|
241 |
.query-button,
|
242 |
-
.context-toggle-button
|
|
|
243 |
background-color: var(--background-light) !important;
|
244 |
color: var(--text-medium) !important;
|
245 |
border: 1px solid var(--border-light) !important;
|
246 |
border-radius: 6px !important;
|
247 |
font-weight: 500 !important;
|
248 |
transition: all 0.2s ease !important;
|
249 |
-
font-size:
|
|
|
250 |
}
|
251 |
|
252 |
.query-button {
|
253 |
-
padding: 0
|
254 |
flex: 0 0 auto !important;
|
255 |
display: flex !important;
|
256 |
align-items: center !important;
|
257 |
justify-content: center !important;
|
258 |
-
min-height:
|
259 |
white-space: nowrap !important;
|
260 |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
261 |
}
|
262 |
|
263 |
-
.context-toggle-button
|
264 |
-
|
265 |
-
|
266 |
-
|
|
|
267 |
line-height: 1 !important;
|
268 |
width: auto !important;
|
269 |
min-width: 0 !important;
|
270 |
-
max-width:
|
271 |
margin: 0 !important;
|
272 |
cursor: pointer !important;
|
273 |
}
|
@@ -279,28 +309,43 @@ hr {
|
|
279 |
border-color: var(--primary) !important;
|
280 |
}
|
281 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
282 |
/* Action Buttons */
|
283 |
#submit-button,
|
284 |
#try-another-btn {
|
285 |
background-color: var(--primary) !important;
|
286 |
color: white !important;
|
287 |
-
padding:
|
288 |
border-radius: 6px !important;
|
289 |
font-weight: 600 !important;
|
290 |
-
font-size:
|
|
|
291 |
transition: all 0.2s ease !important;
|
292 |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
|
293 |
border: none !important;
|
294 |
}
|
295 |
|
296 |
#submit-button {
|
297 |
-
margin-top:
|
298 |
}
|
299 |
|
300 |
#try-another-btn {
|
301 |
width: 100% !important;
|
302 |
max-width: 100% !important;
|
303 |
-
margin:
|
304 |
display: block !important;
|
305 |
}
|
306 |
|
@@ -311,10 +356,10 @@ hr {
|
|
311 |
}
|
312 |
|
313 |
.control-buttons button {
|
314 |
-
margin: 0
|
315 |
-
font-size:
|
316 |
border-radius: 6px !important;
|
317 |
-
padding:
|
318 |
transition: all 0.2s ease !important;
|
319 |
}
|
320 |
|
@@ -323,7 +368,8 @@ hr {
|
|
323 |
background-color: transparent !important;
|
324 |
font-style: normal !important;
|
325 |
color: var(--text-medium) !important;
|
326 |
-
font-size:
|
|
|
327 |
}
|
328 |
|
329 |
.context-topic {
|
@@ -338,21 +384,27 @@ hr {
|
|
338 |
.topic-label {
|
339 |
font-weight: 600 !important;
|
340 |
color: var(--text-medium) !important;
|
341 |
-
margin-right:
|
342 |
}
|
343 |
|
344 |
-
#context-header-row
|
|
|
345 |
display: flex !important;
|
346 |
justify-content: space-between !important;
|
347 |
align-items: center !important;
|
348 |
}
|
349 |
|
|
|
|
|
|
|
|
|
350 |
.context-title {
|
351 |
margin: 0 !important;
|
352 |
padding: 0 !important;
|
353 |
-
font-size:
|
354 |
font-weight: 600 !important;
|
355 |
color: var(--text-dark) !important;
|
|
|
356 |
}
|
357 |
|
358 |
.context-items-container {
|
@@ -363,11 +415,11 @@ hr {
|
|
363 |
.context-item {
|
364 |
border: 1px solid var(--border-light);
|
365 |
background-color: var(--background-light);
|
366 |
-
padding:
|
367 |
border-radius: 6px;
|
368 |
-
margin-bottom:
|
369 |
-
font-size:
|
370 |
-
line-height:
|
371 |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
372 |
}
|
373 |
|
@@ -378,9 +430,10 @@ hr {
|
|
378 |
.chunk-header {
|
379 |
font-weight: 600;
|
380 |
color: var(--query-text);
|
381 |
-
margin-bottom:
|
382 |
-
padding-bottom:
|
383 |
border-bottom: 1px solid var(--query-border);
|
|
|
384 |
}
|
385 |
|
386 |
.highlight {
|
@@ -396,29 +449,31 @@ hr {
|
|
396 |
border: 2px solid var(--insufficient-alert-border);
|
397 |
background-color: var(--insufficient-alert-bg);
|
398 |
color: var(--insufficient-alert-text);
|
399 |
-
padding:
|
400 |
border-radius: 6px;
|
401 |
-
margin-bottom:
|
402 |
-
font-size:
|
|
|
403 |
}
|
404 |
|
405 |
.insufficient-alert strong {
|
406 |
display: inline-flex !important;
|
407 |
align-items: center !important;
|
408 |
-
margin-bottom:
|
409 |
-
font-size:
|
410 |
font-weight: 600 !important;
|
411 |
}
|
412 |
|
413 |
.insufficient-alert strong svg {
|
414 |
-
margin-right:
|
415 |
-
width: 1.1em !important;
|
416 |
-
height: 1.1em !important;
|
417 |
}
|
418 |
|
419 |
.insufficient-alert p {
|
420 |
margin: 0;
|
421 |
-
font-size:
|
|
|
422 |
}
|
423 |
|
424 |
/* Summary Cards */
|
@@ -428,7 +483,7 @@ hr {
|
|
428 |
}
|
429 |
|
430 |
#summary-containers {
|
431 |
-
margin-top:
|
432 |
}
|
433 |
|
434 |
#main-interface-area > div:nth-child(7) > div {
|
@@ -444,10 +499,10 @@ hr {
|
|
444 |
}
|
445 |
|
446 |
#main-interface-area > p:first-of-type {
|
447 |
-
font-size: var(--text-
|
448 |
-
margin: 0 0
|
449 |
padding: 0 !important;
|
450 |
-
line-height:
|
451 |
color: var(--text-medium) !important;
|
452 |
}
|
453 |
|
@@ -457,11 +512,11 @@ hr {
|
|
457 |
background-color: var(--background-light) !important;
|
458 |
box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
|
459 |
margin: 0 !important;
|
460 |
-
padding:
|
461 |
display: flex !important;
|
462 |
flex-direction: column !important;
|
463 |
height: auto !important;
|
464 |
-
min-height:
|
465 |
overflow: visible !important;
|
466 |
}
|
467 |
|
@@ -473,6 +528,24 @@ hr {
|
|
473 |
border-left: 3px solid var(--model-b-color) !important;
|
474 |
}
|
475 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
476 |
.summary-card .gr-form,
|
477 |
.summary-card .gr-form > div {
|
478 |
margin: 0 !important;
|
@@ -484,18 +557,19 @@ hr {
|
|
484 |
|
485 |
.summary-card .gr-input-label,
|
486 |
.feedback-section .gr-input-label {
|
487 |
-
font-size:
|
488 |
font-weight: 600 !important;
|
489 |
color: var(--text-dark) !important;
|
|
|
490 |
}
|
491 |
|
492 |
.summary-card .gr-input-label {
|
493 |
-
margin: 0 0
|
494 |
padding: 0 !important;
|
495 |
}
|
496 |
|
497 |
.feedback-section .gr-input-label {
|
498 |
-
margin-bottom:
|
499 |
}
|
500 |
|
501 |
.summary-card .gr-textbox {
|
@@ -510,10 +584,10 @@ hr {
|
|
510 |
background-color: transparent !important;
|
511 |
border: none !important;
|
512 |
color: var(--text-dark) !important;
|
513 |
-
font-size:
|
514 |
-
line-height:
|
515 |
height: auto !important;
|
516 |
-
min-height:
|
517 |
padding: 0 !important;
|
518 |
margin: 0 !important;
|
519 |
width: 100% !important;
|
@@ -521,19 +595,20 @@ hr {
|
|
521 |
overflow-y: visible !important;
|
522 |
}
|
523 |
|
524 |
-
/* Voting Section */
|
525 |
.vote-button {
|
526 |
flex-grow: 1;
|
527 |
-
margin: 0
|
528 |
-
font-size:
|
529 |
-
padding:
|
530 |
border-radius: 6px !important;
|
531 |
transition: all 0.2s ease !important;
|
532 |
background-color: var(--background-light) !important;
|
533 |
border: 1px solid var(--border-light) !important;
|
534 |
-
min-height:
|
535 |
font-weight: 500 !important;
|
536 |
color: var(--text-dark) !important;
|
|
|
537 |
}
|
538 |
|
539 |
.vote-button:hover:not(.vote-button-neither) {
|
@@ -570,27 +645,28 @@ hr {
|
|
570 |
|
571 |
/* Feedback Section */
|
572 |
.feedback-section {
|
573 |
-
padding:
|
574 |
background-color: transparent !important;
|
575 |
-
margin:
|
576 |
-
font-size:
|
577 |
border: none !important;
|
578 |
box-shadow: none !important;
|
579 |
}
|
580 |
|
581 |
.feedback-section .gr-check-radio {
|
582 |
-
font-size:
|
583 |
}
|
584 |
|
585 |
.feedback-section .gr-check-radio span {
|
586 |
-
font-size:
|
587 |
color: var(--text-dark) !important;
|
|
|
588 |
}
|
589 |
|
590 |
.feedback-section input[type="checkbox"] {
|
591 |
-
width:
|
592 |
-
height:
|
593 |
-
margin-right:
|
594 |
}
|
595 |
|
596 |
.feedback-section input[type="checkbox"]:checked {
|
@@ -601,22 +677,24 @@ hr {
|
|
601 |
|
602 |
/* Model Reveal */
|
603 |
.model-reveal {
|
604 |
-
font-size:
|
605 |
text-align: center !important;
|
606 |
font-weight: 600 !important;
|
607 |
background-color: transparent !important;
|
608 |
padding: 0 !important;
|
609 |
border: none !important;
|
|
|
610 |
}
|
611 |
|
612 |
.model-reveal span {
|
613 |
-
font-size:
|
614 |
display: flex !important;
|
615 |
align-items: center !important;
|
616 |
justify-content: center !important;
|
617 |
width: 100% !important;
|
618 |
-
padding:
|
619 |
-
min-height:
|
|
|
620 |
}
|
621 |
|
622 |
.model-a-reveal span {
|
@@ -629,7 +707,7 @@ hr {
|
|
629 |
|
630 |
/* DataFrames and Tables */
|
631 |
.gr-dataframe table {
|
632 |
-
font-size:
|
633 |
border-collapse: separate !important;
|
634 |
border-spacing: 0 !important;
|
635 |
overflow: hidden !important;
|
@@ -637,9 +715,11 @@ hr {
|
|
637 |
|
638 |
.gr-dataframe th,
|
639 |
.gr-dataframe td {
|
640 |
-
padding:
|
641 |
border: none !important;
|
642 |
border-bottom: 1px solid var(--border-light) !important;
|
|
|
|
|
643 |
}
|
644 |
|
645 |
.gr-dataframe th {
|
@@ -649,7 +729,7 @@ hr {
|
|
649 |
}
|
650 |
|
651 |
.gradio-container .prose {
|
652 |
-
line-height:
|
653 |
margin: 0 !important;
|
654 |
padding: 0 !important;
|
655 |
}
|
@@ -661,7 +741,7 @@ hr {
|
|
661 |
border-spacing: 0 !important;
|
662 |
border: none !important;
|
663 |
width: 100% !important;
|
664 |
-
margin:
|
665 |
overflow: hidden !important;
|
666 |
}
|
667 |
|
@@ -675,6 +755,7 @@ hr {
|
|
675 |
display: inline-flex !important;
|
676 |
align-items: center !important;
|
677 |
font-weight: 500 !important;
|
|
|
678 |
}
|
679 |
|
680 |
.model-link:hover {
|
@@ -684,7 +765,7 @@ hr {
|
|
684 |
|
685 |
.external-icon {
|
686 |
display: inline-block !important;
|
687 |
-
margin-left:
|
688 |
opacity: 0.6 !important;
|
689 |
transition: opacity 0.2s !important;
|
690 |
}
|
@@ -693,9 +774,37 @@ hr {
|
|
693 |
opacity: 1 !important;
|
694 |
}
|
695 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
696 |
/* Special styling for the Elo ratings info box */
|
697 |
#leaderboard-info {
|
698 |
-
margin:
|
699 |
padding: 0 !important;
|
700 |
background-color: rgba(255, 236, 224, 0.5) !important;
|
701 |
border: none !important;
|
@@ -703,42 +812,43 @@ hr {
|
|
703 |
|
704 |
#leaderboard-info > div {
|
705 |
margin: 0 !important;
|
706 |
-
padding:
|
707 |
background-color: var(--background-light) !important;
|
708 |
border: none !important;
|
709 |
}
|
710 |
|
711 |
#leaderboard-info h3 {
|
712 |
margin-top: 0 !important;
|
713 |
-
margin-bottom:
|
714 |
color: var(--primary) !important;
|
715 |
-
font-size:
|
|
|
716 |
}
|
717 |
|
718 |
#leaderboard-info p {
|
719 |
-
margin-bottom:
|
720 |
-
line-height:
|
721 |
font-size: var(--text-md) !important;
|
722 |
}
|
723 |
|
724 |
#leaderboard-info ul {
|
725 |
-
margin-bottom:
|
726 |
-
padding-left:
|
727 |
}
|
728 |
|
729 |
#leaderboard-info li {
|
730 |
-
margin-bottom:
|
731 |
-
line-height:
|
732 |
font-size: var(--text-md) !important;
|
733 |
}
|
734 |
|
735 |
-
/* Leaderboard Table Specific Styles
|
736 |
.leaderboard-table {
|
737 |
width: 100% !important;
|
738 |
border-collapse: separate !important;
|
739 |
border-spacing: 0 !important;
|
740 |
-
font-size:
|
741 |
-
margin-top:
|
742 |
overflow: hidden !important;
|
743 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
|
744 |
border-radius: 8px !important;
|
@@ -758,9 +868,10 @@ hr {
|
|
758 |
border: none !important;
|
759 |
border-bottom: 1px solid var(--border-light) !important;
|
760 |
text-align: left !important;
|
761 |
-
padding:
|
762 |
background-color: var(--background-main) !important;
|
763 |
font-size: var(--text-md) !important;
|
|
|
764 |
}
|
765 |
|
766 |
/* Header row styling */
|
@@ -768,8 +879,8 @@ hr {
|
|
768 |
background-color: #FFF1E6 !important;
|
769 |
color: var(--text-dark) !important;
|
770 |
font-weight: 600 !important;
|
771 |
-
font-size:
|
772 |
-
padding:
|
773 |
border: none !important;
|
774 |
border-bottom: 1px solid var(--border-light) !important;
|
775 |
}
|
@@ -793,7 +904,7 @@ hr {
|
|
793 |
|
794 |
.leaderboard-table .confidence-value {
|
795 |
color: var(--text-medium) !important;
|
796 |
-
font-size:
|
797 |
font-weight: normal !important;
|
798 |
}
|
799 |
|
@@ -812,18 +923,20 @@ hr {
|
|
812 |
/* Blockquote styling */
|
813 |
.gradio-container .prose blockquote,
|
814 |
.gradio-container-5-28-0 .prose blockquote {
|
815 |
-
margin:
|
816 |
-
border-left: 12px solid var(--border-color-primary) !important;
|
817 |
-
padding-left: calc(var(--size-2) * 1.1) !important;
|
818 |
font-style: normal !important;
|
819 |
color: var(--text-dark) !important;
|
|
|
|
|
820 |
}
|
821 |
|
822 |
/* Spacing for Markdown content */
|
823 |
span.svelte-7ddecg p {
|
824 |
-
line-height:
|
825 |
margin-top: 0 !important;
|
826 |
-
margin-bottom:
|
827 |
}
|
828 |
|
829 |
.html-container.svelte-phx28p.padding {
|
@@ -837,14 +950,14 @@ html {
|
|
837 |
|
838 |
/* For the query section scroll margin */
|
839 |
#query-section {
|
840 |
-
scroll-margin-top:
|
841 |
}
|
842 |
|
843 |
-
/* FAQ Section Styles
|
844 |
#faq-toggle-row {
|
845 |
width: 100% !important;
|
846 |
-
margin-top:
|
847 |
-
margin-bottom:
|
848 |
padding-left: 0 !important;
|
849 |
margin-left: 0 !important;
|
850 |
text-align: left !important;
|
@@ -857,8 +970,8 @@ html {
|
|
857 |
color: var(--primary) !important;
|
858 |
background-color: transparent !important;
|
859 |
border: none !important;
|
860 |
-
padding:
|
861 |
-
font-size:
|
862 |
font-weight: 500 !important;
|
863 |
text-align: left !important;
|
864 |
justify-content: flex-start !important;
|
@@ -871,6 +984,7 @@ html {
|
|
871 |
width: auto !important;
|
872 |
display: inline-flex !important;
|
873 |
align-items: center !important;
|
|
|
874 |
}
|
875 |
|
876 |
/* Hover effect for FAQ toggle - just underline */
|
@@ -882,37 +996,37 @@ html {
|
|
882 |
#faq-content {
|
883 |
background-color: var(--background-light) !important;
|
884 |
border-radius: 6px !important;
|
885 |
-
padding:
|
886 |
-
margin-
|
887 |
-
margin-bottom: 15px !important; /* Reduced from 18px */
|
888 |
border: 1px solid var(--border-light) !important;
|
889 |
width: 70% !important;
|
890 |
}
|
891 |
|
892 |
.faq-text {
|
893 |
color: var(--text-medium) !important;
|
894 |
-
font-size:
|
|
|
895 |
}
|
896 |
|
897 |
.faq-text p {
|
898 |
-
margin-bottom:
|
899 |
-
line-height:
|
900 |
color: var(--text-medium) !important;
|
901 |
font-size: var(--text-md) !important;
|
902 |
}
|
903 |
|
904 |
.faq-text ul {
|
905 |
-
margin-top:
|
906 |
-
margin-bottom:
|
907 |
-
padding-left:
|
908 |
list-style-type: circle !important;
|
909 |
}
|
910 |
|
911 |
.faq-text li {
|
912 |
-
margin-bottom:
|
913 |
color: var(--text-medium) !important;
|
914 |
font-size: var(--text-md) !important;
|
915 |
-
line-height:
|
916 |
}
|
917 |
|
918 |
/* Empty State and Initial State Styles */
|
@@ -920,8 +1034,9 @@ html {
|
|
920 |
color: var(--text-medium) !important;
|
921 |
font-style: italic !important;
|
922 |
text-align: center !important;
|
923 |
-
padding:
|
924 |
-
font-size:
|
|
|
925 |
}
|
926 |
|
927 |
/* Get a Question Button - initially more prominent */
|
@@ -929,11 +1044,12 @@ html {
|
|
929 |
background-color: var(--primary) !important;
|
930 |
color: white !important;
|
931 |
font-weight: 600 !important;
|
932 |
-
padding:
|
933 |
border-radius: 6px !important;
|
934 |
transition: all 0.2s ease !important;
|
935 |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
936 |
-
font-size:
|
|
|
937 |
}
|
938 |
|
939 |
.initial-button:hover {
|
@@ -949,6 +1065,55 @@ html {
|
|
949 |
display: block !important;
|
950 |
}
|
951 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
952 |
/* Responsive Styles */
|
953 |
@media screen and (max-width: 768px) {
|
954 |
#query-container {
|
@@ -958,7 +1123,7 @@ html {
|
|
958 |
.query-box-row {
|
959 |
flex: 1 1 100% !important;
|
960 |
max-width: 100% !important;
|
961 |
-
margin-bottom:
|
962 |
}
|
963 |
|
964 |
.query-button {
|
@@ -966,28 +1131,44 @@ html {
|
|
966 |
}
|
967 |
|
968 |
.vote-button {
|
969 |
-
font-size:
|
970 |
-
padding:
|
971 |
}
|
972 |
|
973 |
.summary-card {
|
974 |
-
margin-bottom:
|
975 |
}
|
976 |
|
977 |
#main-interface-area > div:nth-child(7) > div {
|
978 |
flex-direction: column !important;
|
979 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
980 |
}
|
981 |
|
982 |
@media screen and (max-width: 480px) {
|
983 |
#main-interface-area > div:nth-child(10) > div {
|
984 |
display: grid !important;
|
985 |
grid-template-columns: 1fr 1fr !important;
|
986 |
-
gap:
|
987 |
}
|
988 |
|
989 |
.vote-button {
|
990 |
margin: 0 !important;
|
991 |
-
padding:
|
|
|
|
|
|
|
|
|
|
|
992 |
}
|
993 |
}
|
|
|
12 |
--highlight: #FFFBEB;
|
13 |
--model-a-color: #92B4F4;
|
14 |
--model-b-color: #F8ADA7;
|
15 |
+
--reference-color: #10B981; /* Green-500 */
|
16 |
+
--reference-light: #F0FDF4; /* Green-50 */
|
17 |
+
--reference-text: #065F46; /* Green-800 */
|
18 |
--query-background: #F0F7FF;
|
19 |
--query-border: #D1E3F8;
|
20 |
--query-text: #2E5AAC;
|
21 |
--insufficient-alert-bg: #fff0f0;
|
22 |
--insufficient-alert-border: #f78989;
|
23 |
--insufficient-alert-text: #b92020;
|
24 |
+
|
25 |
+
/* Unified Typography Scale - Smaller */
|
26 |
+
--text-xs: 0.75rem; /* 12px - Small text, captions */
|
27 |
+
--text-sm: 0.875rem; /* 14px - Base body text */
|
28 |
+
--text-md: 1rem; /* 16px - Emphasized body text */
|
29 |
+
--text-lg: 1.125rem; /* 18px - Large text, small headings */
|
30 |
+
--text-xl: 1.375rem; /* 22px - Main headings */
|
31 |
+
|
32 |
+
/* Consistent Line Heights */
|
33 |
+
--leading-tight: 1.3;
|
34 |
+
--leading-normal: 1.5;
|
35 |
+
--leading-relaxed: 1.6;
|
36 |
+
|
37 |
+
/* Consistent Spacing - Proportionally Smaller */
|
38 |
+
--space-xs: 0.25rem; /* 4px */
|
39 |
+
--space-sm: 0.5rem; /* 8px */
|
40 |
+
--space-md: 0.625rem; /* 10px */
|
41 |
+
--space-lg: 0.875rem; /* 14px */
|
42 |
+
--space-xl: 1.25rem; /* 20px */
|
43 |
}
|
44 |
|
45 |
/* Dark Mode */
|
|
|
57 |
--highlight: #3D3825;
|
58 |
--model-a-color: #5A85C7;
|
59 |
--model-b-color: #C47A74;
|
60 |
+
--reference-color: #10B981; /* Keep green in dark mode */
|
61 |
+
--reference-light: #1F2937; /* Dark gray for dark mode */
|
62 |
+
--reference-text: #34D399; /* Light green for dark mode text */
|
63 |
--query-background: #2A3F5C;
|
64 |
--query-border: #3A5277;
|
65 |
--query-text: #A9C2E8;
|
|
|
72 |
/* Global Styles */
|
73 |
body, .gradio-container {
|
74 |
background-color: var(--background-main);
|
75 |
+
font-size: var(--text-sm); /* Now 14px base */
|
76 |
overflow-x: hidden !important;
|
77 |
color: var(--text-dark);
|
78 |
}
|
|
|
90 |
padding-bottom: 0 !important;
|
91 |
}
|
92 |
|
93 |
+
/* Unified Typography */
|
94 |
.gradio-markdown p,
|
95 |
.gradio-markdown li,
|
96 |
.gradio-markdown ul,
|
97 |
.gradio-markdown ol {
|
98 |
+
font-size: var(--text-sm) !important;
|
99 |
+
line-height: var(--leading-normal) !important;
|
100 |
+
margin-bottom: var(--space-sm) !important;
|
101 |
}
|
102 |
|
103 |
/* Special styles for intro instruction text */
|
104 |
.gradio-markdown p:has(em):has(strong) {
|
105 |
+
font-size: var(--text-md) !important;
|
106 |
+
line-height: var(--leading-normal) !important;
|
107 |
+
margin-bottom: var(--space-sm) !important;
|
108 |
}
|
109 |
|
110 |
.gradio-row {
|
|
|
118 |
|
119 |
.tab-nav {
|
120 |
background-color: var(--background-light) !important;
|
121 |
+
padding: var(--space-sm) var(--space-md) !important;
|
122 |
border-radius: 8px 8px 0 0 !important;
|
123 |
border-bottom: 1px solid var(--border-light) !important;
|
124 |
}
|
125 |
|
126 |
.tab-nav button {
|
127 |
+
font-size: var(--text-md) !important;
|
128 |
font-weight: 600 !important;
|
129 |
+
padding: var(--space-md) var(--space-xl) !important;
|
130 |
+
margin: 0 var(--space-sm) !important;
|
131 |
border-radius: 6px 6px 0 0 !important;
|
132 |
border: none !important;
|
133 |
background-color: transparent !important;
|
|
|
150 |
border: none !important;
|
151 |
}
|
152 |
|
153 |
+
/* Unified Headings */
|
154 |
h1 {
|
155 |
+
font-size: var(--text-xl) !important;
|
156 |
color: var(--primary) !important;
|
157 |
+
margin: var(--space-md) 0 var(--space-sm) 0 !important;
|
158 |
padding: 0 !important;
|
159 |
+
line-height: var(--leading-tight) !important;
|
160 |
+
font-weight: 700 !important;
|
161 |
}
|
162 |
|
163 |
h3,
|
164 |
.section-heading {
|
165 |
+
font-size: var(--text-lg) !important;
|
166 |
font-weight: 600 !important;
|
167 |
+
margin: var(--space-sm) 0 var(--space-xs) 0 !important;
|
168 |
padding: 0 !important;
|
169 |
color: var(--text-dark) !important;
|
170 |
+
line-height: var(--leading-tight) !important;
|
171 |
}
|
172 |
|
173 |
.orange-title {
|
|
|
177 |
|
178 |
/* Common Dividers */
|
179 |
hr {
|
180 |
+
margin: var(--space-sm) 0 !important;
|
181 |
border: none !important;
|
182 |
height: 1px !important;
|
183 |
background-color: var(--border-light) !important;
|
184 |
}
|
185 |
|
186 |
.results-reveal-area hr {
|
187 |
+
margin: var(--space-xl) 0 var(--space-lg) 0 !important;
|
188 |
width: 100% !important;
|
189 |
}
|
190 |
|
|
|
194 |
display: flex !important;
|
195 |
align-items: center !important;
|
196 |
overflow: visible !important;
|
197 |
+
min-height: 40px !important;
|
198 |
white-space: normal !important;
|
199 |
}
|
200 |
|
201 |
#query-title-row h3 {
|
202 |
margin: 0 !important;
|
203 |
padding: 0 !important;
|
204 |
+
line-height: var(--leading-tight) !important;
|
205 |
flex-grow: 0 !important;
|
206 |
flex-shrink: 0 !important;
|
207 |
white-space: normal !important;
|
|
|
213 |
#query-container {
|
214 |
display: flex !important;
|
215 |
align-items: stretch !important;
|
216 |
+
gap: var(--space-md) !important;
|
217 |
overflow: visible !important;
|
218 |
}
|
219 |
|
220 |
.query-box-row {
|
221 |
background-color: var(--query-background) !important;
|
222 |
+
padding: var(--space-md) var(--space-lg) !important;
|
223 |
border-radius: 6px !important;
|
224 |
border: 1px solid var(--query-border) !important;
|
225 |
margin: 0 !important;
|
|
|
228 |
max-width: 70% !important;
|
229 |
overflow: visible !important;
|
230 |
display: flex !important;
|
231 |
+
min-height: 48px !important;
|
232 |
height: auto !important;
|
233 |
}
|
234 |
|
|
|
240 |
overflow: visible !important;
|
241 |
width: 100% !important;
|
242 |
display: block !important;
|
243 |
+
text-align: left !important;
|
244 |
}
|
245 |
|
246 |
.empty-query {
|
247 |
+
text-align: center !important;
|
248 |
}
|
249 |
|
250 |
.query-text p {
|
251 |
+
font-size: var(--text-lg) !important;
|
252 |
font-weight: 600 !important;
|
253 |
color: var(--query-text) !important;
|
254 |
+
line-height: var(--leading-normal) !important;
|
255 |
margin: 0 !important;
|
256 |
padding: 0 !important;
|
257 |
background-color: transparent !important;
|
|
|
264 |
overflow: visible !important;
|
265 |
}
|
266 |
|
267 |
+
/* Unified Button Styles */
|
268 |
.query-button,
|
269 |
+
.context-toggle-button,
|
270 |
+
.reference-toggle-button {
|
271 |
background-color: var(--background-light) !important;
|
272 |
color: var(--text-medium) !important;
|
273 |
border: 1px solid var(--border-light) !important;
|
274 |
border-radius: 6px !important;
|
275 |
font-weight: 500 !important;
|
276 |
transition: all 0.2s ease !important;
|
277 |
+
font-size: var(--text-sm) !important;
|
278 |
+
line-height: var(--leading-tight) !important;
|
279 |
}
|
280 |
|
281 |
.query-button {
|
282 |
+
padding: 0 var(--space-lg) !important;
|
283 |
flex: 0 0 auto !important;
|
284 |
display: flex !important;
|
285 |
align-items: center !important;
|
286 |
justify-content: center !important;
|
287 |
+
min-height: 48px !important;
|
288 |
white-space: nowrap !important;
|
289 |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
|
290 |
}
|
291 |
|
292 |
+
.context-toggle-button,
|
293 |
+
.reference-toggle-button {
|
294 |
+
padding: var(--space-sm) var(--space-md) !important;
|
295 |
+
font-size: var(--text-xs) !important;
|
296 |
+
height: 28px !important;
|
297 |
line-height: 1 !important;
|
298 |
width: auto !important;
|
299 |
min-width: 0 !important;
|
300 |
+
max-width: 140px !important;
|
301 |
margin: 0 !important;
|
302 |
cursor: pointer !important;
|
303 |
}
|
|
|
309 |
border-color: var(--primary) !important;
|
310 |
}
|
311 |
|
312 |
+
/* Reference Toggle Button - specific styling */
|
313 |
+
.reference-toggle-button:hover {
|
314 |
+
background-color: var(--reference-light) !important;
|
315 |
+
color: var(--reference-color) !important;
|
316 |
+
border-color: var(--reference-color) !important;
|
317 |
+
}
|
318 |
+
|
319 |
+
.reference-toggle-button.showing-reference {
|
320 |
+
background-color: var(--reference-light) !important;
|
321 |
+
color: var(--reference-color) !important;
|
322 |
+
border-color: var(--reference-color) !important;
|
323 |
+
font-weight: 600 !important;
|
324 |
+
}
|
325 |
+
|
326 |
/* Action Buttons */
|
327 |
#submit-button,
|
328 |
#try-another-btn {
|
329 |
background-color: var(--primary) !important;
|
330 |
color: white !important;
|
331 |
+
padding: var(--space-md) var(--space-xl) !important;
|
332 |
border-radius: 6px !important;
|
333 |
font-weight: 600 !important;
|
334 |
+
font-size: var(--text-md) !important;
|
335 |
+
line-height: var(--leading-tight) !important;
|
336 |
transition: all 0.2s ease !important;
|
337 |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
|
338 |
border: none !important;
|
339 |
}
|
340 |
|
341 |
#submit-button {
|
342 |
+
margin-top: var(--space-lg) !important;
|
343 |
}
|
344 |
|
345 |
#try-another-btn {
|
346 |
width: 100% !important;
|
347 |
max-width: 100% !important;
|
348 |
+
margin: var(--space-md) auto !important;
|
349 |
display: block !important;
|
350 |
}
|
351 |
|
|
|
356 |
}
|
357 |
|
358 |
.control-buttons button {
|
359 |
+
margin: 0 var(--space-md) !important;
|
360 |
+
font-size: var(--text-sm) !important;
|
361 |
border-radius: 6px !important;
|
362 |
+
padding: var(--space-sm) var(--space-lg) !important;
|
363 |
transition: all 0.2s ease !important;
|
364 |
}
|
365 |
|
|
|
368 |
background-color: transparent !important;
|
369 |
font-style: normal !important;
|
370 |
color: var(--text-medium) !important;
|
371 |
+
font-size: var(--text-sm) !important;
|
372 |
+
line-height: var(--leading-normal) !important;
|
373 |
}
|
374 |
|
375 |
.context-topic {
|
|
|
384 |
.topic-label {
|
385 |
font-weight: 600 !important;
|
386 |
color: var(--text-medium) !important;
|
387 |
+
margin-right: var(--space-sm) !important;
|
388 |
}
|
389 |
|
390 |
+
#context-header-row,
|
391 |
+
#model-comparison-header {
|
392 |
display: flex !important;
|
393 |
justify-content: space-between !important;
|
394 |
align-items: center !important;
|
395 |
}
|
396 |
|
397 |
+
#model-comparison-header {
|
398 |
+
margin-bottom: var(--space-lg) !important;
|
399 |
+
}
|
400 |
+
|
401 |
.context-title {
|
402 |
margin: 0 !important;
|
403 |
padding: 0 !important;
|
404 |
+
font-size: var(--text-lg) !important;
|
405 |
font-weight: 600 !important;
|
406 |
color: var(--text-dark) !important;
|
407 |
+
line-height: var(--leading-tight) !important;
|
408 |
}
|
409 |
|
410 |
.context-items-container {
|
|
|
415 |
.context-item {
|
416 |
border: 1px solid var(--border-light);
|
417 |
background-color: var(--background-light);
|
418 |
+
padding: var(--space-md);
|
419 |
border-radius: 6px;
|
420 |
+
margin-bottom: var(--space-sm);
|
421 |
+
font-size: var(--text-md);
|
422 |
+
line-height: var(--leading-normal);
|
423 |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
424 |
}
|
425 |
|
|
|
430 |
.chunk-header {
|
431 |
font-weight: 600;
|
432 |
color: var(--query-text);
|
433 |
+
margin-bottom: var(--space-sm);
|
434 |
+
padding-bottom: var(--space-sm);
|
435 |
border-bottom: 1px solid var(--query-border);
|
436 |
+
font-size: var(--text-sm);
|
437 |
}
|
438 |
|
439 |
.highlight {
|
|
|
449 |
border: 2px solid var(--insufficient-alert-border);
|
450 |
background-color: var(--insufficient-alert-bg);
|
451 |
color: var(--insufficient-alert-text);
|
452 |
+
padding: var(--space-md);
|
453 |
border-radius: 6px;
|
454 |
+
margin-bottom: var(--space-md);
|
455 |
+
font-size: var(--text-sm);
|
456 |
+
line-height: var(--leading-normal);
|
457 |
}
|
458 |
|
459 |
.insufficient-alert strong {
|
460 |
display: inline-flex !important;
|
461 |
align-items: center !important;
|
462 |
+
margin-bottom: var(--space-sm) !important;
|
463 |
+
font-size: var(--text-md) !important;
|
464 |
font-weight: 600 !important;
|
465 |
}
|
466 |
|
467 |
.insufficient-alert strong svg {
|
468 |
+
margin-right: var(--space-sm) !important;
|
469 |
+
width: 1.1em !important;
|
470 |
+
height: 1.1em !important;
|
471 |
}
|
472 |
|
473 |
.insufficient-alert p {
|
474 |
margin: 0;
|
475 |
+
font-size: var(--text-sm);
|
476 |
+
line-height: var(--leading-normal);
|
477 |
}
|
478 |
|
479 |
/* Summary Cards */
|
|
|
483 |
}
|
484 |
|
485 |
#summary-containers {
|
486 |
+
margin-top: var(--space-md) !important;
|
487 |
}
|
488 |
|
489 |
#main-interface-area > div:nth-child(7) > div {
|
|
|
499 |
}
|
500 |
|
501 |
#main-interface-area > p:first-of-type {
|
502 |
+
font-size: var(--text-sm) !important;
|
503 |
+
margin: 0 0 var(--space-sm) 0 !important;
|
504 |
padding: 0 !important;
|
505 |
+
line-height: var(--leading-normal) !important;
|
506 |
color: var(--text-medium) !important;
|
507 |
}
|
508 |
|
|
|
512 |
background-color: var(--background-light) !important;
|
513 |
box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
|
514 |
margin: 0 !important;
|
515 |
+
padding: var(--space-md) !important;
|
516 |
display: flex !important;
|
517 |
flex-direction: column !important;
|
518 |
height: auto !important;
|
519 |
+
min-height: 180px !important;
|
520 |
overflow: visible !important;
|
521 |
}
|
522 |
|
|
|
528 |
border-left: 3px solid var(--model-b-color) !important;
|
529 |
}
|
530 |
|
531 |
+
/* Reference Answer Card */
|
532 |
+
.reference-card {
|
533 |
+
border-left: 3px solid var(--reference-color) !important;
|
534 |
+
background-color: var(--reference-light) !important;
|
535 |
+
margin-top: var(--space-lg) !important;
|
536 |
+
}
|
537 |
+
|
538 |
+
.reference-card .gr-input-label {
|
539 |
+
color: var(--reference-text) !important;
|
540 |
+
font-weight: 600 !important;
|
541 |
+
}
|
542 |
+
|
543 |
+
/* Reference Section */
|
544 |
+
#reference-section {
|
545 |
+
margin-top: var(--space-lg) !important;
|
546 |
+
transition: all 0.3s ease !important;
|
547 |
+
}
|
548 |
+
|
549 |
.summary-card .gr-form,
|
550 |
.summary-card .gr-form > div {
|
551 |
margin: 0 !important;
|
|
|
557 |
|
558 |
.summary-card .gr-input-label,
|
559 |
.feedback-section .gr-input-label {
|
560 |
+
font-size: var(--text-md) !important;
|
561 |
font-weight: 600 !important;
|
562 |
color: var(--text-dark) !important;
|
563 |
+
line-height: var(--leading-tight) !important;
|
564 |
}
|
565 |
|
566 |
.summary-card .gr-input-label {
|
567 |
+
margin: 0 0 var(--space-sm) 0 !important;
|
568 |
padding: 0 !important;
|
569 |
}
|
570 |
|
571 |
.feedback-section .gr-input-label {
|
572 |
+
margin-bottom: var(--space-md) !important;
|
573 |
}
|
574 |
|
575 |
.summary-card .gr-textbox {
|
|
|
584 |
background-color: transparent !important;
|
585 |
border: none !important;
|
586 |
color: var(--text-dark) !important;
|
587 |
+
font-size: var(--text-md) !important;
|
588 |
+
line-height: var(--leading-normal) !important;
|
589 |
height: auto !important;
|
590 |
+
min-height: 140px !important;
|
591 |
padding: 0 !important;
|
592 |
margin: 0 !important;
|
593 |
width: 100% !important;
|
|
|
595 |
overflow-y: visible !important;
|
596 |
}
|
597 |
|
598 |
+
/* Unified Voting Section */
|
599 |
.vote-button {
|
600 |
flex-grow: 1;
|
601 |
+
margin: 0 var(--space-sm) var(--space-sm) var(--space-sm) !important;
|
602 |
+
font-size: var(--text-sm) !important;
|
603 |
+
padding: var(--space-md) var(--space-lg) !important;
|
604 |
border-radius: 6px !important;
|
605 |
transition: all 0.2s ease !important;
|
606 |
background-color: var(--background-light) !important;
|
607 |
border: 1px solid var(--border-light) !important;
|
608 |
+
min-height: 48px !important;
|
609 |
font-weight: 500 !important;
|
610 |
color: var(--text-dark) !important;
|
611 |
+
line-height: var(--leading-tight) !important;
|
612 |
}
|
613 |
|
614 |
.vote-button:hover:not(.vote-button-neither) {
|
|
|
645 |
|
646 |
/* Feedback Section */
|
647 |
.feedback-section {
|
648 |
+
padding: var(--space-xs) 0 !important;
|
649 |
background-color: transparent !important;
|
650 |
+
margin: var(--space-xs) 0 !important;
|
651 |
+
font-size: var(--text-sm);
|
652 |
border: none !important;
|
653 |
box-shadow: none !important;
|
654 |
}
|
655 |
|
656 |
.feedback-section .gr-check-radio {
|
657 |
+
font-size: var(--text-sm) !important;
|
658 |
}
|
659 |
|
660 |
.feedback-section .gr-check-radio span {
|
661 |
+
font-size: var(--text-sm) !important;
|
662 |
color: var(--text-dark) !important;
|
663 |
+
line-height: var(--leading-normal) !important;
|
664 |
}
|
665 |
|
666 |
.feedback-section input[type="checkbox"] {
|
667 |
+
width: 16px !important;
|
668 |
+
height: 16px !important;
|
669 |
+
margin-right: var(--space-sm) !important;
|
670 |
}
|
671 |
|
672 |
.feedback-section input[type="checkbox"]:checked {
|
|
|
677 |
|
678 |
/* Model Reveal */
|
679 |
.model-reveal {
|
680 |
+
font-size: var(--text-md) !important;
|
681 |
text-align: center !important;
|
682 |
font-weight: 600 !important;
|
683 |
background-color: transparent !important;
|
684 |
padding: 0 !important;
|
685 |
border: none !important;
|
686 |
+
line-height: var(--leading-tight) !important;
|
687 |
}
|
688 |
|
689 |
.model-reveal span {
|
690 |
+
font-size: var(--text-lg) !important;
|
691 |
display: flex !important;
|
692 |
align-items: center !important;
|
693 |
justify-content: center !important;
|
694 |
width: 100% !important;
|
695 |
+
padding: var(--space-xl) var(--space-lg) !important;
|
696 |
+
min-height: 48px !important;
|
697 |
+
line-height: var(--leading-tight) !important;
|
698 |
}
|
699 |
|
700 |
.model-a-reveal span {
|
|
|
707 |
|
708 |
/* DataFrames and Tables */
|
709 |
.gr-dataframe table {
|
710 |
+
font-size: var(--text-sm) !important;
|
711 |
border-collapse: separate !important;
|
712 |
border-spacing: 0 !important;
|
713 |
overflow: hidden !important;
|
|
|
715 |
|
716 |
.gr-dataframe th,
|
717 |
.gr-dataframe td {
|
718 |
+
padding: var(--space-sm) var(--space-md) !important;
|
719 |
border: none !important;
|
720 |
border-bottom: 1px solid var(--border-light) !important;
|
721 |
+
font-size: var(--text-sm) !important;
|
722 |
+
line-height: var(--leading-normal) !important;
|
723 |
}
|
724 |
|
725 |
.gr-dataframe th {
|
|
|
729 |
}
|
730 |
|
731 |
.gradio-container .prose {
|
732 |
+
line-height: var(--leading-normal) !important;
|
733 |
margin: 0 !important;
|
734 |
padding: 0 !important;
|
735 |
}
|
|
|
741 |
border-spacing: 0 !important;
|
742 |
border: none !important;
|
743 |
width: 100% !important;
|
744 |
+
margin: var(--space-lg) 0 !important;
|
745 |
overflow: hidden !important;
|
746 |
}
|
747 |
|
|
|
755 |
display: inline-flex !important;
|
756 |
align-items: center !important;
|
757 |
font-weight: 500 !important;
|
758 |
+
font-size: var(--text-md) !important;
|
759 |
}
|
760 |
|
761 |
.model-link:hover {
|
|
|
765 |
|
766 |
.external-icon {
|
767 |
display: inline-block !important;
|
768 |
+
margin-left: var(--space-sm) !important;
|
769 |
opacity: 0.6 !important;
|
770 |
transition: opacity 0.2s !important;
|
771 |
}
|
|
|
774 |
opacity: 1 !important;
|
775 |
}
|
776 |
|
777 |
+
.form-link {
|
778 |
+
color: var(--text-dark) !important;
|
779 |
+
text-decoration: none !important;
|
780 |
+
border-bottom: 1px dotted var(--border-light) !important;
|
781 |
+
transition: color 0.2s, border-color 0.2s !important;
|
782 |
+
padding: 2px 0 !important;
|
783 |
+
display: inline-flex !important;
|
784 |
+
align-items: center !important;
|
785 |
+
font-weight: 500 !important;
|
786 |
+
}
|
787 |
+
|
788 |
+
.form-link:hover {
|
789 |
+
color: #FF5500 !important;
|
790 |
+
border-color: #FF5500 !important;
|
791 |
+
}
|
792 |
+
|
793 |
+
.form-link::after {
|
794 |
+
content: " ↗";
|
795 |
+
display: inline-block !important;
|
796 |
+
margin-left: 5px !important;
|
797 |
+
opacity: 0.6 !important;
|
798 |
+
transition: opacity 0.2s !important;
|
799 |
+
}
|
800 |
+
|
801 |
+
.form-link:hover::after {
|
802 |
+
opacity: 1 !important;
|
803 |
+
}
|
804 |
+
|
805 |
/* Special styling for the Elo ratings info box */
|
806 |
#leaderboard-info {
|
807 |
+
margin: var(--space-lg) 0 !important;
|
808 |
padding: 0 !important;
|
809 |
background-color: rgba(255, 236, 224, 0.5) !important;
|
810 |
border: none !important;
|
|
|
812 |
|
813 |
#leaderboard-info > div {
|
814 |
margin: 0 !important;
|
815 |
+
padding: var(--space-md) var(--space-lg) !important;
|
816 |
background-color: var(--background-light) !important;
|
817 |
border: none !important;
|
818 |
}
|
819 |
|
820 |
#leaderboard-info h3 {
|
821 |
margin-top: 0 !important;
|
822 |
+
margin-bottom: var(--space-md) !important;
|
823 |
color: var(--primary) !important;
|
824 |
+
font-size: var(--text-lg) !important;
|
825 |
+
line-height: var(--leading-tight) !important;
|
826 |
}
|
827 |
|
828 |
#leaderboard-info p {
|
829 |
+
margin-bottom: var(--space-sm) !important;
|
830 |
+
line-height: var(--leading-normal) !important;
|
831 |
font-size: var(--text-md) !important;
|
832 |
}
|
833 |
|
834 |
#leaderboard-info ul {
|
835 |
+
margin-bottom: var(--space-md);
|
836 |
+
padding-left: var(--space-lg);
|
837 |
}
|
838 |
|
839 |
#leaderboard-info li {
|
840 |
+
margin-bottom: var(--space-xs);
|
841 |
+
line-height: var(--leading-normal);
|
842 |
font-size: var(--text-md) !important;
|
843 |
}
|
844 |
|
845 |
+
/* Leaderboard Table Specific Styles */
|
846 |
.leaderboard-table {
|
847 |
width: 100% !important;
|
848 |
border-collapse: separate !important;
|
849 |
border-spacing: 0 !important;
|
850 |
+
font-size: var(--text-md) !important;
|
851 |
+
margin-top: var(--space-lg) !important;
|
852 |
overflow: hidden !important;
|
853 |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
|
854 |
border-radius: 8px !important;
|
|
|
868 |
border: none !important;
|
869 |
border-bottom: 1px solid var(--border-light) !important;
|
870 |
text-align: left !important;
|
871 |
+
padding: var(--space-md) !important;
|
872 |
background-color: var(--background-main) !important;
|
873 |
font-size: var(--text-md) !important;
|
874 |
+
line-height: var(--leading-normal) !important;
|
875 |
}
|
876 |
|
877 |
/* Header row styling */
|
|
|
879 |
background-color: #FFF1E6 !important;
|
880 |
color: var(--text-dark) !important;
|
881 |
font-weight: 600 !important;
|
882 |
+
font-size: var(--text-md) !important;
|
883 |
+
padding: var(--space-md) !important;
|
884 |
border: none !important;
|
885 |
border-bottom: 1px solid var(--border-light) !important;
|
886 |
}
|
|
|
904 |
|
905 |
.leaderboard-table .confidence-value {
|
906 |
color: var(--text-medium) !important;
|
907 |
+
font-size: var(--text-xs) !important;
|
908 |
font-weight: normal !important;
|
909 |
}
|
910 |
|
|
|
923 |
/* Blockquote styling */
|
924 |
.gradio-container .prose blockquote,
|
925 |
.gradio-container-5-28-0 .prose blockquote {
|
926 |
+
margin: var(--space-xs) 0 !important;
|
927 |
+
border-left: 12px solid var(--border-color-primary) !important;
|
928 |
+
padding-left: calc(var(--size-2) * 1.1) !important;
|
929 |
font-style: normal !important;
|
930 |
color: var(--text-dark) !important;
|
931 |
+
font-size: var(--text-sm) !important;
|
932 |
+
line-height: var(--leading-normal) !important;
|
933 |
}
|
934 |
|
935 |
/* Spacing for Markdown content */
|
936 |
span.svelte-7ddecg p {
|
937 |
+
line-height: var(--leading-relaxed) !important;
|
938 |
margin-top: 0 !important;
|
939 |
+
margin-bottom: var(--space-sm) !important;
|
940 |
}
|
941 |
|
942 |
.html-container.svelte-phx28p.padding {
|
|
|
950 |
|
951 |
/* For the query section scroll margin */
|
952 |
#query-section {
|
953 |
+
scroll-margin-top: var(--space-lg);
|
954 |
}
|
955 |
|
956 |
+
/* FAQ Section Styles */
|
957 |
#faq-toggle-row {
|
958 |
width: 100% !important;
|
959 |
+
margin-top: var(--space-sm) !important;
|
960 |
+
margin-bottom: var(--space-sm) !important;
|
961 |
padding-left: 0 !important;
|
962 |
margin-left: 0 !important;
|
963 |
text-align: left !important;
|
|
|
970 |
color: var(--primary) !important;
|
971 |
background-color: transparent !important;
|
972 |
border: none !important;
|
973 |
+
padding: var(--space-sm) 0 !important;
|
974 |
+
font-size: var(--text-md) !important;
|
975 |
font-weight: 500 !important;
|
976 |
text-align: left !important;
|
977 |
justify-content: flex-start !important;
|
|
|
984 |
width: auto !important;
|
985 |
display: inline-flex !important;
|
986 |
align-items: center !important;
|
987 |
+
line-height: var(--leading-tight) !important;
|
988 |
}
|
989 |
|
990 |
/* Hover effect for FAQ toggle - just underline */
|
|
|
996 |
#faq-content {
|
997 |
background-color: var(--background-light) !important;
|
998 |
border-radius: 6px !important;
|
999 |
+
padding: var(--space-md) var(--space-lg) !important;
|
1000 |
+
margin-bottom: var(--space-lg) !important;
|
|
|
1001 |
border: 1px solid var(--border-light) !important;
|
1002 |
width: 70% !important;
|
1003 |
}
|
1004 |
|
1005 |
.faq-text {
|
1006 |
color: var(--text-medium) !important;
|
1007 |
+
font-size: var(--text-sm) !important;
|
1008 |
+
line-height: var(--leading-normal) !important;
|
1009 |
}
|
1010 |
|
1011 |
.faq-text p {
|
1012 |
+
margin-bottom: var(--space-md) !important;
|
1013 |
+
line-height: var(--leading-normal) !important;
|
1014 |
color: var(--text-medium) !important;
|
1015 |
font-size: var(--text-md) !important;
|
1016 |
}
|
1017 |
|
1018 |
.faq-text ul {
|
1019 |
+
margin-top: var(--space-sm) !important;
|
1020 |
+
margin-bottom: var(--space-md) !important;
|
1021 |
+
padding-left: var(--space-xl) !important;
|
1022 |
list-style-type: circle !important;
|
1023 |
}
|
1024 |
|
1025 |
.faq-text li {
|
1026 |
+
margin-bottom: var(--space-sm) !important;
|
1027 |
color: var(--text-medium) !important;
|
1028 |
font-size: var(--text-md) !important;
|
1029 |
+
line-height: var(--leading-normal) !important;
|
1030 |
}
|
1031 |
|
1032 |
/* Empty State and Initial State Styles */
|
|
|
1034 |
color: var(--text-medium) !important;
|
1035 |
font-style: italic !important;
|
1036 |
text-align: center !important;
|
1037 |
+
padding: var(--space-lg) !important;
|
1038 |
+
font-size: var(--text-md) !important;
|
1039 |
+
line-height: var(--leading-normal) !important;
|
1040 |
}
|
1041 |
|
1042 |
/* Get a Question Button - initially more prominent */
|
|
|
1044 |
background-color: var(--primary) !important;
|
1045 |
color: white !important;
|
1046 |
font-weight: 600 !important;
|
1047 |
+
padding: var(--space-md) var(--space-lg) !important;
|
1048 |
border-radius: 6px !important;
|
1049 |
transition: all 0.2s ease !important;
|
1050 |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
1051 |
+
font-size: var(--text-lg) !important;
|
1052 |
+
line-height: var(--leading-tight) !important;
|
1053 |
}
|
1054 |
|
1055 |
.initial-button:hover {
|
|
|
1065 |
display: block !important;
|
1066 |
}
|
1067 |
|
1068 |
+
/* Reference Answer Styles - Direct spacing control */
|
1069 |
+
#reference-toggle-row {
|
1070 |
+
margin-top: var(--space-md) !important;
|
1071 |
+
}
|
1072 |
+
|
1073 |
+
#reference-toggle-row .faq-toggle-button {
|
1074 |
+
font-size: var(--text-md) !important;
|
1075 |
+
padding: var(--space-sm) 0 !important;
|
1076 |
+
margin: 0 !important;
|
1077 |
+
}
|
1078 |
+
|
1079 |
+
#reference-content {
|
1080 |
+
margin-top: calc(-1 * var(--space-md)) !important;
|
1081 |
+
margin-bottom: 0px !important;
|
1082 |
+
}
|
1083 |
+
|
1084 |
+
/* When reference content is visible, add a tiny bit more space under toggle */
|
1085 |
+
#reference-content[style="block"] {
|
1086 |
+
margin-top: 0px !important;
|
1087 |
+
}
|
1088 |
+
|
1089 |
+
/* Reduce any default spacing on the reference content row */
|
1090 |
+
div[id="reference-content"] {
|
1091 |
+
padding-top: 0 !important;
|
1092 |
+
padding-bottom: 0 !important;
|
1093 |
+
}
|
1094 |
+
|
1095 |
+
/* Specific styling for reference answer text */
|
1096 |
+
#reference-content .faq-text,
|
1097 |
+
#reference-content .faq-text p {
|
1098 |
+
background-color: transparent !important;
|
1099 |
+
border: none !important;
|
1100 |
+
padding: 0 !important;
|
1101 |
+
border-radius: 0 !important;
|
1102 |
+
margin: 0 !important;
|
1103 |
+
box-shadow: none !important;
|
1104 |
+
color: var(--text-dark) !important;
|
1105 |
+
font-size: var(--text-md) !important;
|
1106 |
+
line-height: var(--leading-normal) !important;
|
1107 |
+
}
|
1108 |
+
|
1109 |
+
/* Dark mode support */
|
1110 |
+
@media (prefers-color-scheme: dark) {
|
1111 |
+
#reference-content .faq-text {
|
1112 |
+
background-color: transparent !important;
|
1113 |
+
color: var(--text-dark) !important;
|
1114 |
+
}
|
1115 |
+
}
|
1116 |
+
|
1117 |
/* Responsive Styles */
|
1118 |
@media screen and (max-width: 768px) {
|
1119 |
#query-container {
|
|
|
1123 |
.query-box-row {
|
1124 |
flex: 1 1 100% !important;
|
1125 |
max-width: 100% !important;
|
1126 |
+
margin-bottom: var(--space-md) !important;
|
1127 |
}
|
1128 |
|
1129 |
.query-button {
|
|
|
1131 |
}
|
1132 |
|
1133 |
.vote-button {
|
1134 |
+
font-size: var(--text-md) !important;
|
1135 |
+
padding: var(--space-md) var(--space-sm) !important;
|
1136 |
}
|
1137 |
|
1138 |
.summary-card {
|
1139 |
+
margin-bottom: var(--space-lg) !important;
|
1140 |
}
|
1141 |
|
1142 |
#main-interface-area > div:nth-child(7) > div {
|
1143 |
flex-direction: column !important;
|
1144 |
}
|
1145 |
+
|
1146 |
+
/* Reference card responsiveness */
|
1147 |
+
.reference-card {
|
1148 |
+
margin-bottom: var(--space-lg) !important;
|
1149 |
+
}
|
1150 |
+
|
1151 |
+
#model-comparison-header {
|
1152 |
+
flex-direction: column !important;
|
1153 |
+
align-items: flex-start !important;
|
1154 |
+
gap: var(--space-md) !important;
|
1155 |
+
}
|
1156 |
}
|
1157 |
|
1158 |
@media screen and (max-width: 480px) {
|
1159 |
#main-interface-area > div:nth-child(10) > div {
|
1160 |
display: grid !important;
|
1161 |
grid-template-columns: 1fr 1fr !important;
|
1162 |
+
gap: var(--space-sm) !important;
|
1163 |
}
|
1164 |
|
1165 |
.vote-button {
|
1166 |
margin: 0 !important;
|
1167 |
+
padding: var(--space-sm) var(--space-xs) !important;
|
1168 |
+
}
|
1169 |
+
|
1170 |
+
.reference-toggle-button {
|
1171 |
+
max-width: 100% !important;
|
1172 |
+
font-size: var(--text-xs) !important;
|
1173 |
}
|
1174 |
}
|