texasfortytwo.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * template implementation : © <Your name here> <Your email address here>
 *
 * 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.
 * -----
 *
 * heartsla.css
 *
 * template 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 (heartsla_heartsla.tpl), and to HTML elements you create dynamically
    (in template.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: No other @import directives may be used. */
@import url(../../../css/csslayer.css);

/** Table layout **/

#tabletop {
  display: flex;
  justify-content: space-between;
}

#playertables {
    position: relative;
    width: 710px;
    height: 340px;
}

.playertablename {
    font-weight: bold;
}

.playertable {
    position: absolute;
    text-align: center;
    width: 180px;
    height: 130px;
}

.playertable_N {
    left: 50%;
    top: 0px;
    margin-left: -90px; /* half of 180 */
}
.playertable_S {
    left: 50%;
    bottom: 0px;
    margin-left: -90px; /* half of 180 */
}
.playertable_W {
    left: 0px;
    top: 50%;
    margin-top: -55px; /* half of 130 */
}
.playertable_E {
    right: 0px;
    top: 50%;
    margin-top: -55px; /* half of 130 */
}

.playertablecard {
    display: inline-block;
    position: relative;
    margin-top: 5px;
    width: 194px;
    height: 104px;
}

/*** player scores ***/

#scores th, #scores td {
  border: solid;
  padding: 5px;
}

/*** cards on table ***/

.cardontable {
    position: absolute;
    /** Note: Whenever updating these values, also update them in the JS. */
    width: 194px;
    height: 104px;
    background-image: url("img/dominoes.svg");
}

/*** Player hand styles. ***/

/* Add a yellow glow to highlight playable dominoes. */
#hand .highlighted {
  border: solid 2px hsl(58deg 100% 50%);
  border-radius: 22px;
  box-shadow: 0 0 22px hsl(58deg 100% 50%);
}