src/display/css_html_js.py

# custom_css = """

# .markdown-text {
#     font-size: 16px !important;
# }

# #models-to-add-text {
#     font-size: 18px !important;
# }

# #citation-button span {
#     font-size: 16px !important;
# }

# #citation-button textarea {
#     font-size: 16px !important;
# }

# #citation-button > label > button {
#     margin: 6px;
#     transform: scale(1.3);
# }

# #leaderboard-table {
#     margin-top: 15px
# }

# #leaderboard-table-lite {
#     margin-top: 15px
# }

# #search-bar-table-box > div:first-child {
#     background: none;
#     border: none;
# }
 
# #search-bar {
#     padding: 0px;
# }

# /* Limit the width of the first AutoEvalColumn so that names don't expand too much */
# #leaderboard-table td:nth-child(2),
# #leaderboard-table th:nth-child(2) {
#     max-width: 400px;
#     overflow: auto;
#     white-space: nowrap;
# }

# .tab-buttons button {
#     font-size: 20px;
# }

# #scale-logo {
#     border-style: none !important;
#     box-shadow: none;
#     display: block;
#     margin-left: auto;
#     margin-right: auto;
#     max-width: 600px;
# }

# #scale-logo .download {
#     display: none;
# }
# #filter_type{
#     border: 0;
#     padding-left: 0;
#     padding-top: 0;
# }
# #filter_type label {
#     display: flex;
# }
# #filter_type label > span{
#     margin-top: var(--spacing-lg);
#     margin-right: 0.5em;
# }
# #filter_type label > .wrap{
#     width: 103px;
# }
# #filter_type label > .wrap .wrap-inner{  
#     padding: 2px;
# }
# #filter_type label > .wrap .wrap-inner input{
#     width: 1px
# }
# #filter-columns-type{
#     border:0;
#     padding:0.5;
# }
# #filter-columns-size{
#     border:0;
#     padding:0.5;
# }
# #box-filter > .form{
#     border: 0
# }

# body, .gradio-container {
#     font-family: Roboto, sans-serif;
#     background-color: #ffffff;
#     color: #000000; /* main text color */
#     margin: 0;
#     padding: 0;
# }

# h1, h2, h3, h4, h5, h6 {
#     color: #eb088a; /* your brand color for headings */
#     font-weight: 600;
#     margin-bottom: 1rem;
# }

# /* Example ‘intro-block’ styling if you want extra flair */
# .intro-block {
#     background-color: #eb088a10; /* light tinted background */
#     padding: 1.5rem;
#     border-radius: 10px;
#     margin-bottom: 2rem;
# }

# """

# custom_css = """
# /* 1) Load Karbon Font: Make sure this points to your actual font files */
# @font-face {
#     font-family: 'Karbon';
#     src: url('path/to/Karbon.woff2') format('woff2'),
#          url('path/to/Karbon.woff') format('woff');
#     font-weight: normal;
#     font-style: normal;
# }

# /* 2) Global Container */
# body, .gradio-container {
#     font-family: 'Karbon', sans-serif;
#     margin: 0;
#     padding: 0;
#     background-color: #fafafa; /* Light background */
#     color: #000000;
# }

# .gradio-container {
#     max-width: 1200px; 
#     margin: 0 auto;
#     padding: 2rem 1rem;
# }

# /* 3) Headings, with brand color #eb088a */
# h1, h2, h3, h4, h5, h6 {
#     color: #000000;
#     margin-bottom: 1rem;
#     font-weight: 600;
# }

# /* 4) Intro Block for a slight highlight */
# .intro-block {
#     background-color: #ffe2f1; /* lighter tint of #eb088a */
#     padding: 1.5rem;
#     border-radius: 8px;
#     border: 1px solid #f8badb;
#     margin-bottom: 2rem;
# }

# /* 5) Tab styling - remove default orange styling */
# .tab-buttons {
#     margin-top: 1rem;
#     margin-bottom: 1rem;
#     display: flex;
# }
# .tab-buttons > .tabitem {
#     padding: 0.6rem 1.2rem;
#     background-color: #ffffff;
#     border: 1px solid #eb088a;
#     border-radius: 6px;
#     color: #eb088a;
#     margin-right: 5px;
#     cursor: pointer;
#     transition: background-color 0.2s ease, color 0.2s ease;
#     font-weight: 500;
# }
# .tab-buttons > .tabitem.selected {
#     background-color: #eb088a;
#     color: #ffffff;
# }
# .tab-buttons > .tabitem:hover {
#     background-color: #eb088a;
#     color: #ffffff;
# }

# /* 6) Dataframe Styling */
# .gr-dataframe table {
#     width: 100%;
#     border-collapse: collapse;
#     border: 1px solid #cccccc;
#     margin-bottom: 2rem;
# }
# .gr-dataframe th {
#     background-color: #eb088a;
#     color: #ffffff;
#     padding: 0.6rem;
#     text-align: left;
#     font-weight: 600;
# }
# .gr-dataframe td {
#     padding: 0.6rem;
#     border-bottom: 1px solid #e0e0e0;
# }
# .gr-dataframe tr:nth-child(even) {
#     background-color: #fdfdfd;
# }

# /* 7) Make default markdown text nice */
# .markdown-text p {
#     margin-bottom: 1rem;
#     line-height: 1.6;
# }
# """
custom_js = """
function tableLinkHack() {
    // This is a hack to make the table links work
    var allTableLinks = document.querySelectorAll(".llm-benchmark-tab-table .table-wrap table.table a")
    for (var link of allTableLinks) {
        link.addEventListener("click", e => { 
            window.open(e.target.href, e.target.target);
        });
    }
}
"""

custom_css = """

.tab-buttons button {
    font-size: 20px;
}

.intro-block {
    padding: 20px;
}

.header-row {
    height: 0;
    min-height: 0;
}

.tabitem {
    padding-top: 0;
}

.html-container {
    padding: 0;
}

#page-header {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 1rem;
}

#header-container{
    display: flex;
    width: 800px;
}

#left-container {
    flex: 1;
}

#left-container #black-logo, #left-container #white-logo {
    height: 150px;
    width: 150px;
}

#left-container #black-logo {
    display: block;
}

#left-container #white-logo {
    display: none;
}

#centre-container {
    align-self: center;
}

#right-container {
    flex: 1;
}

.llm-benchmark-tab-table .table-wrap table.table {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: rgb(97, 97, 97);
    overflow-y: auto;
    overflow-x: auto;
}

.llm-benchmark-tab-table .table-wrap table.table tr td,
.llm-benchmark-tab-table .table-wrap table.table tr th {
    border-bottom: 1px solid var(--border-color-primary);
}

.llm-benchmark-tab-table .table-wrap table.table a {
    color: rgb(2, 136, 209) !important;
}

@media (prefers-color-scheme: dark) {
    #left-container #black-logo {
        display: none;
    }    
    #left-container #white-logo {
        display: block;
    }
}


"""

# .selected.svelte-1tcem6n.svelte-1tcem6n {
#     background-color: #000000 !important; /* Desired background color */
#     color: #eb088a !important; /* Desired text color */
#     border-color: #eb088a !important; /* Desired border color */
# }


get_window_url_params = """
    function(url_params) {
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return url_params;
    }
    """