tutotheod.css

/**
 *------
 * BGA framework: Gregory Isabelli & Emmanuel Colin & BoardGameArena
 * TutoTheod implementation : © <Théo de la Hogue> <dev@theod.fr>
 *
 * This code has been produced on the BGA studio platform for use on http://boardgamearena.com.
 * See http://en.boardgamearena.com/#!doc/Studio for more information.
 * -----
 *
 * tutotheod.css
 *
 * TutoTheod 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 (tutotheod_tutotheod.tpl), and to HTML elements you create dynamically
    (in tutotheod.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.
*/


/* Note: you must not use any @import directive */

#board {
    width: 384px;
    height: 384px;
    margin: auto;
    background-image: url('img/board.jpg');
    display: grid;
    grid-template-columns: repeat(6, 60px);
    grid-template-rows: repeat(6, 60px);
    grid-gap: 5px;
    place-items: center;
    border: 72px solid;
    border-color: #16255F;
    position: relative;
}
.square {
    top: 2px;
    left: 2px;
    width: 56px;
    height: 56px;
    display: grid;
    grid-template-columns: repeat(3, 18px);
    grid-template-rows: repeat(3, 18px);
    grid-gap: 1px;
    place-items: center;
    /*outline: 2px solid orange;*/
}
.slot {
    width: 18px;
    height: 18px;
    display: block;
    /*outline: 1px solid orange;*/
}
.token {
    width: 32px;
    height: 32px;
    background-image: url('img/tokens.png');
    background-size: auto 100%;
}
.token[data-color="86D1F5"] { background-position-x: 0px; }
.token[data-color="FFF271"] { background-position-x: -32px; }
.token[data-color="A8ADD7"] { background-position-x: -64px; }
.token[data-color="F7BFD9"] { background-position-x: -96px; }
.token[data-color="D1E2AD"] { background-position-x: -128px; }
.token_wrapper {
    margin: -7px;
}
.active {
    width: 38px;
    height: 38px;
}
.die {
    width: 38px;
    height: 38px;
    background-image: url('img/die.png');
    background-size: auto 100%;
    position: absolute;
    cursor: pointer;
}
.die[data-value="1"] { background-position-x: 0px; }
.die[data-value="2"] { background-position-x: -38px; }
.die[data-value="3"] { background-position-x: -76px; }
.die[data-value="4"] { background-position-x: -114px; }
.die[data-value="5"] { background-position-x: -152px; }
.die[data-value="6"] { background-position-x: -190px; }