open-web-leaderboard/static/site.css

/* general */
body{
    background: #323232 !important;
}

/* ############### TOP NAVBAR ############# */
.top-spacer{

}

.top-bar{
    background-color: orange;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;

    left: 0;
    top: 0;
    right: 0;

    overflow:auto;
}

.top-button{
    float: left;
    margin-right: 10px;
    background-color: #FF6B6B;
    font-weight: bold;
    color: #583535;
}

.disabled {
    opacity: 0.5;
}

.input-field{
    float: left;
    margin-right: 10px;
}

.input-field-number{
    float: left;
    margin-right: 10px;
    width: 100px;
}

.noPlayerFound{
    background: red;
    float: left;
    width: 180px;
    text-align: center;
    font-weight: bold;
}

@media(max-width: 800px){
    .top-bar{
        /* bar will be scrolled aways */
        min-width: 250px;
        padding-bottom: 4vw;
        padding-top: 2vw;
        padding-left: 4vw;
    }
    .top-button{
        font-size: 5vw;
        margin-right: 2.5%;
    }
    
    .input-field{
        margin-top: 2vw;
        float: left;
        font-size: 6vw;
        margin-right: 10px;
    }
    
    .input-field-number{
        display: none;
    }

    .noPlayerFound{
        display: none;
    }
}

/* ############# PLAYER INFORMATION IN LINES ############# */ 
.playerRank{
    margin-left:1%;
    float: left;
    width: 10%;
    color: black;
}

.playerName{
    float: left;
    width: 25%;
    color: black;
}

.playerName:hover{
    opacity: 0.8;
}

.playerRating{
    float: right;
    width: 15%;
    text-align: right;
    color: black;
}

.playerGames{
    float: right;
    text-align: right;
    margin-right: 1%;
    width: 20%;
    color: black;
}

.playerWinratio{
    float: right;
    width: 20%;
    text-align: center;
    color: black;
}

.colum-names{
    width: 100%;
    font-weight: bold;
    background-color: #00B800;
    overflow: hidden;
    font-weight: bold;
}

.line-even{
    width: 100%;
    color: black;
    background-color: #999999 !important; /* 60% grey */
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
}

.bg-special{
    background-color: #eae9e9 !important;
}

.line-odd{
    width: 100%;    
    color: black;
    background-color: lightgrey !important;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
}

.targetPlayer{
    /* overwrite background for seached player */
    background: yellow !important;
}

.endOfBoardIndicator{
    background: #FF6B6B;
    text-align: center;
    font-weight: bold;
}

@media(max-width: 800px){
    .leaderboard-container{
        font-size: 4.5vw;
        width: 100%;
    }
    
    .colum-names{
        white-space: nowrap;
        overflow: hidden;
    }

    .playerName{
        overflow: hidden;
        white-space: nowrap;
        width: 30%;
        /* write over games */
        z-index: 2;
    }

    .playerName:hover{
        overflow: visible;
        white-space: normal;
    }

    .playerRating{
        text-align: left;
    }

    .playerRank{
        width: unset;
        margin-right: 20px;
    }

    .playerGames{
        width: 15%;
        text-align: left;
    }
    
    .playerWinratio{
        /* 19% is just enought to cut the last letter */
        width: 19%;
    }
}

/* ######################## FOOTER ####################### */ 
.footer{
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    position: fixed;
    width: 100%;
    background-color: grey;
    bottom: 0;
    left: 0;
    height: 30px;
    
}

.footerLink{
    margin-top: 0;
    padding-top: 0;
    font-size: 12pt;
    text-decoration: none;
    color: black;
}
.mid{
    margin-right: 25%;
    margin-left: 25%;
}


@media(max-width: 800px){
    .footer{
        height: unset;
    }

    .footerLink{
        font-size: 4vw;
    }
    
    .mid{
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
}