chessboard.css

/**
 * CSS codes of Chessboard.
 * @see For more information, check file: src\Chess\Board\Chessboard.ts
 */

:root{
    /**
     * All sizes are will be calculated based on the board size.
     * For example, if the board size is 800px, the square size will be 100px(1/8 of the board size),
     * font size will be 16px(1/50 of the board size), and the piece size will be 80px(1/10 of the board size).
     */
    --board-size: 70vh;

    /* Colors */
    --white-square-color: #859884;
    --white-coordinate-color: #a2b9a1;
    --black-square-color: #667c67;
    --black-coordinate-color: #637263;
    --square-shadow-color: none;
    --clicked-color: #000;

    /* Promotion Menu */
    --promotion-option-color: #D3D3D3;
    --promotion-option-hover-color: #808080;

    /* Result Screen */
    --result-screen-bg-color: #111111;
    --result-screen-border-color: #2a2a2a;
    --result-screen-color: #fff;

    /* Effects */
    --playable-color: #57CE92;
    --killable-color: #57CE92;
    --checked-color: #DF3030;
    --disabled-color: #000;
    --selected-color: rgba(87, 206, 146, 0.25);
    --from-color: rgba(69, 201, 255, 0.39);
    --to-color: rgba(69, 201, 255, 0.39);

    /* White Pieces */
    --white-pawn-image: url("../images/pawn_white.png");
    --white-rook-image: url("../images/rook_white.png");
    --white-knight-image: url("../images/knight_white.png");
    --white-bishop-image: url("../images/bishop_white.png");
    --white-queen-image: url("../images/queen_white.png");
    --white-king-image: url("../images/king_white.png");

    /* Black Pieces */
    --black-pawn-image: url("../images/pawn_black.png");
    --black-rook-image: url("../images/rook_black.png");
    --black-knight-image: url("../images/knight_black.png");
    --black-bishop-image: url("../images/bishop_black.png");
    --black-queen-image: url("../images/queen_black.png");
    --black-king-image: url("../images/king_black.png");

    /* For animation of piece movement */
    --move-from-left: 0;
    --move-from-top: 0;
    --move-to-left: 0;
    --move-to-top: 0;
}

/* -------------- Chessboard -------------- */
#chessboard {
    width: var(--board-size);
    height: var(--board-size);
    min-width: var(--board-size);
    min-height: var(--board-size);
    border:1px solid black;
    display:flex;
    flex-wrap: wrap;
    cursor: pointer!important;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position:relative;
}

/* -------------- Promotion Menu -------------- */
#chessboard {
    & .promotion-option{
        z-index:999!important;
        position:inherit;
        background-color: var(--promotion-option-color);
        border-radius: 50%;
        margin-left:0;

        &:hover{
            background-color: var(--promotion-option-hover-color);
        }
    }
}

/* -------------- Board Styles -------------- */
#chessboard {
    /* Individual square styles */
    & .square{
        position: relative;
        width:calc(var(--board-size) / 8);
        height:calc(var(--board-size) / 8);
        box-shadow: inset 0 0 0 1px var(--square-shadow-color);
        text-align: center;
        margin:0!important;
    }

    /* Black squares */
    & .square--black{
        background-color:var(--black-square-color);
    }

    /* White squares */
    & .square--white{
        background-color:var(--white-square-color);
    }

    /* Row coordinates display styles */
    & .row-coordinate{
        position:absolute;
        right:0;
        margin-right:0.4vw;
        font-size:calc(var(--board-size) / 50);
        margin-top:0.3vw;
        font-weight: bold;
    }

    /* Row coordinates that on black squares */
    & .row-coordinate--black{
        color:var(--white-coordinate-color);
    }

    /* Row coordinates that on white squares */
    & .row-coordinate--white{
        color:var(--black-coordinate-color);
    }

    /* Column coordinates display styles */
    & .column-coordinate{
        position:absolute;
        bottom:0;
        font-size:calc(var(--board-size) / 50);
        margin-left:0.4vw;
        margin-bottom:0.2vw;
        font-weight: bold;
    }

    /* Column coordinates that on black squares */
    & .column-coordinate--black{
        color:var(--white-coordinate-color);
    }

    /* Column coordinates that on white squares */
    & .column-coordinate--white{
        color:var(--black-coordinate-color);
    }
}

/* -------------- Piece Styles -------------- */
/* Generic piece style */
.piece{
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    width:calc(var(--board-size) / 9);
    height:calc(var(--board-size) / 10);
    position: absolute;
    z-index:99;
    left:5%;
    top:10%;

    &.dragging {
        opacity: 0.5;
    }
}

/* Animation for piece movement, don't change this */
@keyframes move{
    0% {
        left:var(--move-from-left);
        top:var(--move-from-top);
    }
    100% {
        left:var(--move-to-left);
        top:var(--move-to-top);
    }
}

/* White pieces */
[data-piece="Rook"][data-color="White"]{
    background-image:var(--white-rook-image);
}

[data-piece="Knight"][data-color="White"]{
    background-image:var(--white-knight-image);
}

[data-piece="Bishop"][data-color="White"]{
    background-image:var(--white-bishop-image);
}

[data-piece="Queen"][data-color="White"]{
    background-image:var(--white-queen-image);
}

[data-piece="King"][data-color="White"]{
    background-image:var(--white-king-image);
}

[data-piece="Pawn"][data-color="White"]{
    background-image:var(--white-pawn-image);
}

/* Black pieces */
[data-piece="Rook"][data-color="Black"]{
    background-image:var(--black-rook-image);
}

[data-piece="Knight"][data-color="Black"]{
    background-image:var(--black-knight-image);
}

[data-piece="Bishop"][data-color="Black"]{
    background-image:var(--black-bishop-image);
}

[data-piece="Queen"][data-color="Black"]{
    background-image:var(--black-queen-image);
}

[data-piece="King"][data-color="Black"]{
    background-image:var(--black-king-image);
}

[data-piece="Pawn"][data-color="Black"]{
    background-image:var(--black-pawn-image);
}

/* -------------- Effects Styles -------------- */
#chessboard {
    /* Clicked square effect */
    & .square-effect--clicked{
        box-shadow:inset 0 0 15px var(--clicked-color)!important;
    }

    /* Playable square effect */
    & .square-effect--playable{
        box-shadow:inset 0 0 15px var(--playable-color)!important;
    }

    /* Killable square effect */
    & .square-effect--killable{
        box-shadow:inset 0 0 15px var(--killable-color)!important;
    }

    /* Checked square effect */
    & .square-effect--checked{
        box-shadow:inset 0 0 15px var(--checked-color)!important;
    }

    /* Selected square effect */
    & .square-effect--selected{
        box-shadow:inset 0 0 100px var(--selected-color)!important;
    }

    /* Disabled square effect */
    & .square-effect--disabled{
        box-shadow:inset 0 0 100px var(--disabled-color)!important;
    }

    /* Move from effect */
    & .square-effect--from{
        box-shadow:inset 0 0 100px var(--from-color);
    }

    /* Move to effect */
    & .square-effect--to{
        box-shadow:inset 0 0 100px var(--to-color);
    }

    /* Opacity for disabled pieces */
    & .square-effect--disabled div.piece{
        opacity: 0.4;
    }

    /* Opacity for disabled elements other than pieces */
    & .square-effect--disabled span{
        opacity: 0.2;
    }
}

/* -------------- Result Message -------------- */
.result-message{
    box-shadow: 0 0 5px #000;
    padding-top:60px;
    background-color: var(--result-screen-bg-color);
    color: var(--result-screen-color);
    font-size: 30px;
    font-weight: bold;
    width: 250px;
    height:100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border:1px solid var(--result-screen-border-color);
    z-index:9999!important;
}

/** 
 * ------------------ Responsive ------------------- 
 *             700px - 900px - 1250px
 */
@media screen and (max-width: 900px) {
    :root{
        --board-size: calc(100vw - 5rem);
    }
}

@media screen and (max-width: 700px) {
    :root{
        --board-size: calc(100vw - 1.1rem);
    }
}