main.css

@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap');

/* CSS Vars */
:root {
    /* dynamic vars (controlled via CSSController.ts) */
    --pieceSize: 10px;
    --cellSize: 10px;
    --miniPieceSize: 10px;
    --miniPieceMargain: 10px;
    --boardSize: 10px;
    --sideBarWidth: 10px;
    --capturedPieceColumnHeight: 10px;
    /* color vars */
    --greyDarkest: #1a2021;
    --greyDark: #415052;
    --grey: #738588;
    --greyLight: #a2b6b9;
    --greyLightest:#d7eaec;
}
/* classes for the page itself */
.pageBG{
    background-color: #1a2021;
}
/* contains all the page elements */
.pageElementContainer{
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    height: var(--boardSize);
    display: flex;
}

/* game board classes */
.button{
    border: none;
    outline: none;
    width: var(--cellSize);
    height: var(--cellSize);
    float: left;
    -webkit-user-select: none;
    user-select: none;
}
/* different colors for the different cells on the board during different states */
.cell1{background-color: #bd8f8c;}
.cell2{background-color: #f7e0c1;}
.cellAttacked{background-color: #ff7b3d;}
.cellMove{background-color: #8cf9ff;}
.cellBoth{background-color: red;}
.cell{ background-color: white;}
.rowContainer{
    overflow: auto;
}
.boardContainer{
    width: var(--boardSize);
    height: var(--boardSize);
    overflow: auto;
    position: relative;
    background-color: var(--greyDarkest);
}
.pieceIMG{
    margin-left: auto;
    margin-right: auto;
    width: var(--pieceSize);
    height: var(--pieceSize);
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
/* mouse image */
.mouseIMG{
    width: var(--pieceSize);
    height: var(--pieceSize);
    z-index: 1;
    position: absolute;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* captured pieces vars */
.leftSideBar{
    width: var(--sideBarWidth);
    height: var(--boardSize);
    background-color: var(--greyDark);
    float: left;
    margin-left: 30px;
    border-radius: calc(var(--sideBarWidth)/10);
}
.capturedPieces{
    width: calc(var(--sideBarWidth)/2);
    height: var(--capturedPieceColumnHeight);
    float: left;
}
.pieceIMGMini{
    margin-left: auto;
    margin-right: auto;
    width: var(--miniPieceSize);
    height: var(--miniPieceSize);
    margin: var(--miniPieceMargain);
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
.captureTitle{
    font-family: 'Eagle Lake';
    margin: 5px;
    color: white;
}
/* all board overlay elements and classes are contained here */
.boardOverlay{
    width: var(--boardSize);
    height: var(--boardSize);
    background-color: #1a2021;
    position: fixed;
    opacity: 0.9;
}
.boardOverlayContainer{
    width: var(--boardSize);
    height: var(--boardSize);
    position: fixed;
    z-index: 10;
}
.overlayContainer{
    width: var(--boardSize);
    height: 150px;
    position: fixed;
    z-index: 20;
    display: flex;
    justify-content: center;
}
.overlayText{
    color: white;
    font-family: 'Eagle Lake';
    text-align: center;
    margin: auto;
}
.size1{font-size: calc(var(--cellSize)/3);}
.size2{font-size: calc(var(--cellSize)/4);}
.size3{font-size: calc(var(--cellSize)/5);}
.verticallycenterDIV{
    display: flex;
    align-items: center;
    height: var(--boardSize);
}
/* checkmate overlay classes */
.restartButton{
    border: none;
    outline: none;
    width: 100px;
    height: 40px;
    float: left;
    background-color: var(--greyDark);
    border-radius: 15px;
    -webkit-user-select: none;
    user-select: none;
}
.restartButton:hover{
    background-color: var(--greyDark);
}
.restartButton:active{
    background-color: var(--greyLight);
}
.checkmateDiv{
    text-align: center; 
    padding: 10px;
}
/* piece promotion classes */
.promotionButtonContainer{
    overflow: auto;
    background-color: var(--greyDarkest);
    border-radius: 15px;
    z-index: 20;
}
.promotionButton{
    border: none;
    outline: none;
    width: var(--cellSize);
    height: var(--cellSize);
    float: left;
    background-color: var(--grey);
    border-radius: var(--cellSize/9);
    -webkit-user-select: none;
    user-select: none;
    margin: 5px;
    z-index: 20;
}
.promotionButton:hover{
    background-color: var(--greyLight);
}
.promotionButton:active{
    background-color: var(--greyLightest);
}