tablut.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * -----
 *
 * tablut.css
 *
 * Tablut stylesheet
 *
 */

/*
    This is the CSS stylesheet of your game User Interface.

    Styles defined on this file will be applied to the HTML elements you define in your
    HTML template (tablut_tablut.tpl), and to HTML elements you create dynamically
    (in tablut.js).

    Usually, you are using CSS to:

    1°) define the overall layout of your game
        (ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).
    2°) create your CSS-sprites:
        All images of your games should be gathered into a small number of image files. Then, using
        background-image and background-position CSS properties, you create HTML blocks that can
        display these images correctly (see example below).

    3°) ... anything else:
        It is really easy to add and remove CSS classes dynamically from your Javascript with
        dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class
        (dojo.hasClass) or to get all elements with a specific class (dojo.query). This is why,
        very often, using CSS classes for the logic of your user interface allow you to do complex
        thing easily.


     Note: on the production platform, this file will be compressed and comments will be removed.
           Consequently, don't hesitate to put as many comments as necessary.
*/

@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */

/********* You can start writing your CSS below this line: **********/

#board {
    position: relative;
    margin: 30px auto;
    height: 540px;
    width: 540px;
    background-image: url('img/board.jpg');
}

.square {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 1px solid black;
    box-sizing: border-box;
}

.border {
    position: absolute;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
}

.border-left {
    text-align: right;
    padding-right: 10px;
    line-height: 60px;
}

.border-right {
    text-align: left;
    padding-left: 10px;
    line-height: 60px;
}

.border-top {
    text-align: center;
    line-height: 100px;
}

.border-bottom {
    text-align: center;
}

.throne {
    background:
        repeating-linear-gradient(
            45deg,
            #60bcb0,
            #60bcb0 10px,
            #46988c 10px,
            #46988c 20px
        );
}

.fortress {
    background:
        repeating-linear-gradient(
            45deg,
            #606dbc,
            #606dbc 10px,
            #465298 10px,
            #465298 20px
        );
}

.corner.fortress::before {
    content: '☆';
    color: white;
    font-size: 3em;
    line-height: 54px;
    /* Horizontal centering: */
    display: block;
    text-align: center;
}

.p1Swede {
    width: 54px;
    height: 54px;
    margin: 3px;
    position: absolute;
    background-color: white;
    border-radius: 30px;
}

.p1King {
    width: 54px;
    height: 54px;
    margin: 3px;
    position: absolute;
    background-color: white;
    border-radius: 30px;
}

.p1King::before {
    content: '♕';
    font-size: 3em;
    line-height: 54px;
    /* Horizontal centering: */
    display: block;
    width: 100%;
    text-align: center;
}

.p0Muscovite {
    width: 54px;
    height: 54px;
    margin: 3px;
    position: absolute;
    background-color: #111;
    border-radius: 30px;
}

.selectable {
    cursor: pointer;
}

.selectable:hover {
    opacity: 0.6;
}

.selected {
    background-color: cadetblue;
}

.availableMove::before {
    content: ' ';
    width: 54px;
    height: 54px;
    margin: 3px;
    position: absolute;
    background-color: cadetblue;
    border-radius: 30px;
    cursor: pointer;
    opacity: 0.4;
}

.winningPath::before {
    content: ' ';
    width: 48px;
    height: 48px;
    position: absolute;
    margin: 3px;
    border-radius: 24px;
    cursor: pointer;
    opacity: 0.4;
    border: 3px solid gold;
}

.finalWinningPos::before {
    content: ' ';
    width: 54px;
    height: 54px;
    margin: 3px;
    position: absolute;
    background-color: gold;
    border-radius: 30px;
    cursor: pointer;
    opacity: 0.4;
}

#maintitlebar_topMsg {
    display: inline-block;
    position: relative;
    width: 100%;
}