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: #eb088a;
    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;
}
"""


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