egyptianratscrew.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * Hearts implementation : © Gregory Isabelli <gisabelli@boardgamearena.com>
 *
 * 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.
 * -----
 *
  *
 * Hearts stylesheet
 *
 */

/*

    This is the CSS stylesheet of your game User Interface.
    
    Styles defined on this file will be applied to the HTML elements you defined in your
    HTML template (egyptianratscrew_egyptianratscrew.tpl), and to HTML elements you create dynamically
    (in egyptianratscrew.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:
        This is really easy to add and remove CSS classes dynamically from your Javascript with
        dojo.addClass and dojo.removeClass. This 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 easyly.
        
        
     Note: on the production platform, this file will be compressed and comments will be remove.
           Consequently, don't hesitate to put as many comments as necessary.
*/

@import url(../../../css/csslayer.css);

/** Table layout **/

#wrapper {
    position: relative;
    width: 600px;
    margin: 60px auto;
}

#wrapper:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

#game_table {
    position: absolute;
    width: 100%;
    height: 100%;

    background-color: transparent;
    border: 1px solid black;
    border-radius: 50%;
}

#pile {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgba(255,255,255,0.5);
    width: 300px !important;
    height: 300px !important;
    top: 150px;
    left: 155px;

    cursor: pointer;
}

#pile > .stockitem {
    top: auto !important;
    cursor: pointer !important;
}

.player_name {
    font-weight: bold;
    text-align: center;
}

.player_cards {
    margin-top: 5px;
}

.player_seat {
    position: absolute;
    width: 140px;
    top: 250px; /*50%;*/
    left: 230px;
    z-index: 100;
}

.player_hand {
    width: 60px;
    height: 77px;
    position: absolute;
    left: 85px;
    top: 35px;
    z-index: 100;
}

.player_hand > div {
    content: "";
    position: absolute;
    width: 60px;
    height: 77px;
    background-image: url('img/hand.png');
    cursor: pointer;
}