src/app.css

/* Hide the standard Gradio footer */
footer {
    display: none !important;
}
/* Make the text in the input box and chat label bigger */
textarea, .wrapper > label {
    font-size: var(--text-md)
}
.input-container {
    align-items: center;
}
/* Make the chat label bold */
.wrapper > label {
    font-weight: 600;
}
/* Limit the overall width of the demo */
.gradio-container {
    max-width: 1024px !important;
    margin: 5vh auto !important;
}
/* Theme anchor links with Carbon coloring */
.gr_docs_link a, .gr_docs_link a > i {
    color: #78A9FF;
    text-decoration: none;
}
/* Title alignment with the Granite icon */
.gr_title {
    display: flex;
    align-items: center;
    margin-bottom: -0.5rem;
}
.gr_title img {
    height: 42px;
    width: 42px;
    margin-right: 1rem;
    filter: invert(0%) sepia(0%) saturate(7459%) hue-rotate(154deg) brightness(96%) contrast(100%);
}
.gr_title h1 {
    margin: auto !important;
    font-size: 36px;
    font-weight: 600;
}
/* Only one form on the page, within the Accordion component */
.form {
    flex-direction: row;
    background-color: var(--block-background-fill);
}
.gr_accordion_element {
    width: 50%;
    margin: 0px;
}
/* Color the example background */
.example:hover {
    background-color: #D0E2FF
}
/* Centre the example text within the example box */
.example-text-content {
    margin-top: auto;
    margin-bottom: auto;
}
/* Centre the values in advanced settings */
.tab-like-container  {
    align-items: center;
}
/* dark mode */
@media (prefers-color-scheme: dark) {
    /* Color the Granite icon in white */
    .gr_title img {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);
    }
    /* Color the example background */
    .example:hover {
        background-color: #4589FF
    }
}