src/display/css_html_js.py

"""
CSS and styling for MUSEval Leaderboard
"""

custom_css = """
/* Custom styling for MUSEval Leaderboard */

/* Main title styling */
#main-title h1 {
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

#main-title p {
    font-size: 16px !important;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}

/* Description and about text styling */
.markdown-text {
    font-size: 20px !important;
    line-height: 1.6 !important;
}

#description-text,
#about-text,
#submit-text {
    font-size: 16px !important;
}

/* General UI element sizing */
.gradio-container .gradio-dropdown,
.gradio-container .gradio-textbox,
.gradio-container .gradio-button,
.gradio-container .gradio-markdown {
    font-size: 18px !important;
}

/* Compact dropdown styling for filters - using specific IDs for higher specificity */
#category-filter,
#domain-filter,
#dataset-filter,
#sort-filter {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 150px !important;
    flex: 0 0 120px !important;
}

/* Compact textbox styling for model search */
#model-search {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 250px !important;
    flex: 0 0 200px !important;
}

/* Additional targeting for Gradio's internal structure */
.gradio-container #category-filter .gradio-dropdown,
.gradio-container #domain-filter .gradio-dropdown,
.gradio-container #dataset-filter .gradio-dropdown,
.gradio-container #sort-filter .gradio-dropdown {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 150px !important;
}

.gradio-container #model-search .gradio-textbox {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 250px !important;
}

/* Targeted CSS to remove grey backgrounds and make compact layout */

/* Target specific Gradio elements */
.gradio-container .gradio-row,
.gradio-container .gradio-column,
.gradio-container .gradio-block,
.gradio-container .gradio-form,
.gradio-container .gradio-panel {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Remove grey boxes around individual components */
.gradio-container .gradio-form,
.gradio-container .gradio-panel,
.gradio-container .gradio-block {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make labels inline with inputs */
.gradio-container .gradio-form label,
.gradio-container .gradio-panel label,
.gradio-container .gradio-block label {
    display: inline-block !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    width: auto !important;
}

/* Make form containers inline */
.gradio-container .gradio-form,
.gradio-container .gradio-panel {
    display: inline-block !important;
    vertical-align: top !important;
    margin-right: 12px !important;
}

/* Full-width filter row */
#filter-row {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 8px !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}


/* Force all components to stay in single row and distribute evenly */
#filter-row > * {
    flex-shrink: 1 !important;
    flex-grow: 1 !important;
    flex-basis: 0 !important;
}

/* Remove individual scrollbars from components */
#model-search,
#category-filter,
#domain-filter,
#dataset-filter,
#sort-filter {
    overflow: hidden !important;
    resize: none !important;
}

/* Hide scrollbars on individual components */
#model-search::-webkit-scrollbar,
#category-filter::-webkit-scrollbar,
#domain-filter::-webkit-scrollbar,
#dataset-filter::-webkit-scrollbar,
#sort-filter::-webkit-scrollbar {
    display: none !important;
}

/* Remove column containers entirely */
.gradio-container .gradio-column {
    display: contents !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    flex: none !important;
}

/* Remove any box shadows or borders that might create grey appearance */
.gradio-container .gradio-column,
.gradio-container .gradio-row,
.gradio-container .gradio-block {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Target the specific filter elements - consistent height and padding */
#model-search,
#category-filter,
#domain-filter,
#dataset-filter,
#sort-filter {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
    min-height: auto !important;
}

#model-search {
    /* No specific sizing - let it grow with the others */
}

/* Remove borders from Gradio internal elements */
#model-search input,
#category-filter select,
#domain-filter select,
#dataset-filter select,
#sort-filter select,
#model-search .gradio-textbox,
#category-filter .gradio-dropdown,
#domain-filter .gradio-dropdown,
#dataset-filter .gradio-dropdown,
#sort-filter .gradio-dropdown {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Target all input and select elements within filters - fix vertical alignment */
#filter-row input,
#filter-row select,
#filter-row .gradio-textbox,
#filter-row .gradio-dropdown {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 28px !important;
    max-height: 32px !important;
    padding: 4px 6px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: top !important;
    font-size: 14px !important;
    display: block !important;
    visibility: visible !important;
}

/* Specifically target text input for proper alignment and styling */
#filter-row .gradio-textbox,
#model-search {
    height: auto !important;
    min-height: 28px !important;
    max-height: 80px !important;
    font-size: 14px !important;
    line-height: 5px !important;
    display: block !important;
    visibility: visible !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Target the actual input element inside the textbox */
#filter-row .gradio-textbox input,
#model-search input,
#filter-row input[type="text"] {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    height: auto !important;
    min-height: 28px !important;
    max-height: 32px !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 10.2 !important;
}

/* Remove any grey backgrounds from the specific filter containers */
#model-search .gradio-form,
#category-filter .gradio-form,
#domain-filter .gradio-form,
#dataset-filter .gradio-form,
#sort-filter .gradio-form {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Additional targeting for parent containers */
.gradio-container div[data-testid],
.gradio-container .gradio-container,
.gradio-container .gradio-component {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Citation button styling */
#citation-button {
    font-family: 'Courier New', monospace;
    font-size: 16px !important;
}

/* Table styling */
.elegant-table {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px !important;
}

/* Smooth scrolling behavior */
html {
    scroll-behavior: smooth !important;
}

/* Model Inspector accordion styling for better visibility */
#model-inspector {
    scroll-margin-top: 20px !important;
}

/* Ensure smooth scrolling when accordion opens */
.gradio-container {
    scroll-behavior: smooth !important;
}

/* Add scroll animation for accordion expansion */
@keyframes scrollToAccordion {
    from {
        scroll-behavior: auto;
    }
    to {
        scroll-behavior: smooth;
    }
}

/* Apply scroll behavior when accordion is opened */
#model-inspector[aria-expanded="true"] {
    animation: scrollToAccordion 0.3s ease-in-out;
}

/* Additional scrollbar hiding for all browsers */
#model-search,
#category-filter,
#domain-filter,
#dataset-filter,
#sort-filter {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Ensure filter row scrollbar is visible */
#filter-row::-webkit-scrollbar {
    height: 8px !important;
}

#filter-row::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

#filter-row::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 4px !important;
}

#filter-row::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* Reduce spacing around description accordion */
.gradio-container .gradio-accordion {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

/* Larger text for description content */
#description-text,
.markdown-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

/* Target description accordion specifically */
.gradio-container .gradio-accordion .gradio-markdown p,
.gradio-container .gradio-accordion .gradio-markdown div {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

/* Aggressive removal of all grey backgrounds */
.gradio-container .gradio-row,
.gradio-container .gradio-column,
.gradio-container .gradio-block,
.gradio-container .gradio-form,
.gradio-container .gradio-panel,
.gradio-container .gradio-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force single row layout */
.gradio-container .gradio-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}

/* Larger dropdown labels */
.gradio-container .gradio-form label,
.gradio-container .gradio-panel label,
.gradio-container .gradio-block label {
    font-size: 18px !important;
    font-weight: bold !important;
}

/* Target specific filter labels */
#model-search label,
#category-filter label,
#domain-filter label,
#dataset-filter label,
#sort-filter label {
    font-size: 18px !important;
    font-weight: bold !important;
}

/* Larger accordion labels - targeting specific IDs */
#description-accordion button,
#about-accordion button,
#citation-accordion button,
#submit-accordion button,
#model-inspector button {
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Target accordion button spans */
#description-accordion button span,
#about-accordion button span,
#citation-accordion button span,
#submit-accordion button span,
#model-inspector button span {
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Force all accordion labels to be larger */
.gradio-container .gradio-accordion button {
    font-size: 20px !important;
    font-weight: bold !important;
}

.gradio-container .gradio-accordion button span {
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Fix horizontal alignment - remove form container padding */
.gradio-container .gradio-form,
.gradio-container .gradio-panel,
.gradio-container .gradio-block {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Align input fields directly under labels */
#model-search,
#category-filter,
#domain-filter,
#dataset-filter,
#sort-filter {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* Target the form containers specifically - consistent spacing */
#model-search .gradio-form,
#category-filter .gradio-form,
#domain-filter .gradio-form,
#dataset-filter .gradio-form,
#sort-filter .gradio-form {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    height: auto !important;
    min-height: auto !important;
}
"""