AI4Math/IneqMath-Leaderboard

1custom_css = """2.logo {3    width: 300px;4    height: auto;5    margin: 0 auto;6    max-width: 100%7    object-fit: contain;8}9.text {10    font-size: 16px !important;11}12 13.tabs button {14    font-size: 20px;15}16.subtabs button {17    font-size: 20px;18}19 20.descriptive-text span {21    font-size: 16px !important;22}23 24#control-panel span {25    font-size: 20px !important;26}27#search-bar span {28    font-size: 16px !important;29}30#threshold-slider span {31    font-size: 16px !important;32}33#memory-slider span {34    font-size: 16px !important;35}36#columns-checkboxes span {37    font-size: 16px !important;38}39#backend-checkboxes span {40    font-size: 16px !important;41}42#dtype-checkboxes span {43    font-size: 16px !important;44}45#optimization-checkboxes span {46    font-size: 16px !important;47}48#quantization-checkboxes span {49    font-size: 16px !important;50}51#kernel-checkboxes span {52    font-size: 16px !important;53}54 55/* Hide Gradio's built-in sorting dropdown */56.gradio-container .dataframe .sort-dropdown,57.gradio-container .dataframe .sort-button,58.gradio-container .dataframe .sort-icon,59.gradio-container .dataframe [data-testid="sort-dropdown"],60.gradio-container .dataframe button[aria-label*="sort"],61.gradio-container .dataframe .dropdown-menu,62.gradio-container .dataframe .dropdown,63.gradio-container .dataframe select,64.gradio-container .dataframe .sort-menu,65.gradio-container .dataframe .header-menu,66.gradio-container .dataframe .column-menu,67.gradio-dataframe .sort-dropdown,68.gradio-dataframe .sort-button,69.gradio-dataframe .sort-icon,70.gradio-dataframe [data-testid="sort-dropdown"],71.gradio-dataframe button[aria-label*="sort"],72.gradio-dataframe .dropdown-menu,73.gradio-dataframe .dropdown,74.gradio-dataframe select,75.gradio-dataframe .sort-menu,76.gradio-dataframe .header-menu,77.gradio-dataframe .column-menu {78    display: none !important;79    visibility: hidden !important;80    opacity: 0 !important;81    pointer-events: none !important;82}83 84/* Leaderboard table container */85#leaderboard-table,86.gradio-container .gradio-dataframe {87    max-height: 650px !important;88    overflow: auto !important;89    width: 100% !important;90    border: 1px solid #ddd !important;91    border-radius: 8px !important;92    box-sizing: border-box !important;93    background: white !important;94}95 96/* Table structure */97.gradio-container .gradio-dataframe table,98#leaderboard-table table {99    width: 100% !important;100    table-layout: auto !important;101    border-collapse: collapse !important;102    display: table !important;103    margin: 0 !important;104    background: white !important;105}106 107/* Table headers */108.gradio-container .gradio-dataframe th,109.sortable-table th {110    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;111    color: white !important;112    font-weight: 600 !important;113    font-size: 16px !important;114    padding: 16px 12px !important;115    border: 1px solid rgba(255,255,255,0.2) !important;116    cursor: pointer !important;117    text-align: center !important;118    position: sticky !important;119    top: 0 !important;120    z-index: 10 !important;121    white-space: nowrap !important;122    user-select: none !important;123    transition: all 0.2s ease !important;124    line-height: 1.4 !important;125}126 127/* Sort arrow styling */128.gradio-container .gradio-dataframe th:contains("🔺") {129    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;130    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;131}132 133.gradio-container .gradio-dataframe th:contains("🔻") {134    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;135    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;136}137 138.gradio-container .gradio-dataframe th:contains("⬆️⬇️") {139    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;140    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;141}142 143/* Header hover effects */144.gradio-container .gradio-dataframe th:hover {145    background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%) !important;146    transform: translateY(-1px) !important;147    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;148}149 150.gradio-container .gradio-dataframe th:active {151    transform: translateY(0) !important;152    background: linear-gradient(135deg, #4e5bc6 0%, #5e397e 100%) !important;153}154 155/* Table cells */156.gradio-container .gradio-dataframe td {157    padding: 14px 12px !important;158    border: 1px solid #ddd !important;159    text-align: center !important;160    vertical-align: middle !important;161    white-space: nowrap !important;162    overflow: hidden !important;163    text-overflow: ellipsis !important;164    line-height: 1.5 !important;165    font-size: 14px !important;166}167 168/* Table rows */169.gradio-container .gradio-dataframe tr:nth-child(even) {170    background-color: #f8f9fa !important;171}172 173.gradio-container .gradio-dataframe tbody tr:hover {174    background-color: #e3f2fd !important;175    transition: background-color 0.2s ease !important;176}177 178/* Ensure table body structure */179.gradio-container .gradio-dataframe tbody {180    display: table-row-group !important;181}182 183.gradio-container .gradio-dataframe tr {184    height: auto !important;185    min-height: 48px !important;186}187 188.gradio-container .gradio-dataframe td,189.gradio-container .gradio-dataframe th {190    display: table-cell !important;191}192 193/* Scrollbar styling */194.gradio-container .gradio-dataframe::-webkit-scrollbar {195    width: 12px !important;196    height: 12px !important;197}198 199.gradio-container .gradio-dataframe::-webkit-scrollbar-track {200    background: #f1f1f1 !important;201    border-radius: 6px !important;202}203 204.gradio-container .gradio-dataframe::-webkit-scrollbar-thumb {205    background: #888 !important;206    border-radius: 6px !important;207    border: 2px solid #f1f1f1 !important;208}209 210.gradio-container .gradio-dataframe::-webkit-scrollbar-thumb:hover {211    background: #555 !important;212}213 214/* Disable cell selection highlighting */215.gradio-container .gradio-dataframe td {216    user-select: none !important;217    -webkit-user-select: none !important;218    -moz-user-select: none !important;219    -ms-user-select: none !important;220}221 222/* Remove hover effects on data cells */223.gradio-container .gradio-dataframe tbody td:hover {224    background-color: inherit !important;225    cursor: default !important;226}227 228/* JavaScript for enhanced sorting visual feedback */229<script>230document.addEventListener('DOMContentLoaded', function() {231    function updateHeaderStyling() {232        const headers = document.querySelectorAll('.gradio-dataframe th, .sortable-table th');233        headers.forEach(header => {234            const text = header.textContent || header.innerText;235            if (text.includes('🔺')) {236                header.style.background = 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)';237                header.style.boxShadow = '0 2px 4px rgba(76, 175, 80, 0.3)';238            } else if (text.includes('🔻')) {239                header.style.background = 'linear-gradient(135deg, #2196F3 0%, #1976D2 100%)';240                header.style.boxShadow = '0 2px 4px rgba(33, 150, 243, 0.3)';241            } else if (text.includes('⬆️⬇️')) {242                header.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';243                header.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';244            }245        });246        247        // Force hide any dropdown elements248        const dropdowns = document.querySelectorAll('.dataframe select, .dataframe .dropdown, .dataframe .sort-menu');249        dropdowns.forEach(dropdown => {250            dropdown.style.display = 'none';251            dropdown.style.visibility = 'hidden';252            dropdown.style.opacity = '0';253        });254    }255    256    // Update styling on page load257    updateHeaderStyling();258    259    // Update styling when table content changes260    const observer = new MutationObserver(updateHeaderStyling);261    const container = document.querySelector('.gradio-container');262    if (container) {263        observer.observe(container, { childList: true, subtree: true });264    }265});266</script>267 268/* Responsive design */269@media (max-width: 768px) {270    .gradio-container .gradio-dataframe th,271    .gradio-container .gradio-dataframe td {272        font-size: 12px !important;273        padding: 6px 4px !important;274    }275}276"""277