TaikoLocalServer/TaikoWebUI/wwwroot/style.overrides.css

.dani-results .mud-progress-linear {
    height: 25px !important;
}

.mud-progress-linear.bar-pass-gold .mud-progress-linear-bars .mud-progress-linear-bar {
    background: linear-gradient( 90deg, rgb(255,83,147) 0%, rgb(255,248,6) 15%, rgb(255,248,6) 20%, rgb(122,255,79) 30%, rgb(122,244,255) 45%, rgb(149,104,255) 70%, rgb(255,98,244) 90%, rgb(255,98,244) 95%, rgb(255,83,147) 100% );
}

.mud-progress-linear.bar-pass-red .mud-progress-linear-bars .mud-progress-linear-bar {
    background-color: #ff584d;
}

.mud-progress-linear.bar-default .mud-progress-linear-bars .mud-progress-linear-bar {
    background-color: lightgrey;
}

.mud-progress-linear.bar-pass-gold .mud-typography,
.mud-progress-linear.bar-pass-red .mud-typography {
    font-weight: bold;
    color: #333;
}

.mud-table-toolbar {
    flex-wrap: wrap;
    height: inherit;
    padding: 20px 10px;
}

.color-box {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid black;
    position: relative;
    top: 2px;
}

.columns-panel {
    column-count: 2;
}

.ai-battle-td {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 99;
    background: #FAFAFA;
    display: none;
}

.dialog-user-qr-code svg {
    /* makes the qr code render with no subpixels */
    transform: scale(1.1);
}

@media only screen and (min-width: 600px) {
    .ai-battle-td {
        display: revert;
    }
}