pi.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * P.I. implementation: © Fabian Neumann <fabian.neumann@posteo.de>
 *
 * 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.
 * -----
 *
 * pi.css
 *
 * pi 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 (pi_pi.tpl), and to HTML elements you create dynamically
    (in pi.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: **********/


@import url('https://fonts.googleapis.com/css?family=Oswald:500,600,700');


.whiteblock {
    border-radius: 6px;
    margin-bottom:6px;
    margin-top:6px;
}

.whiteblock h3,
.whiteblock h4,
.whiteblock h5 {
    font-family:Oswald, Roboto, Arial, sans-serif;
    font-weight: 600;
    color:#222;
    margin-top:0;
    text-transform: uppercase;
    text-shadow: 0 1px #fff;
}
.whiteblock h4 {
    font-size: .85rem;
}
.whiteblock h5 {
    font-size: .75rem;
    margin:0;
}

.myicon20 {
    display: inline-block;
    background-image: url("img/common/icons20.png");
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
}
.myicon20_help {
    background-position:0 0;
}

.player-board .boarditems {
    margin-top: 3px;
}
.player-board .boarditem {
    display: inline-block;
    height:40px;
    margin:0 5px 5px 0;
    vertical-align: middle;
}
.player-board .boarditem:last-child {
    margin-right:0;
}
.player-board .boarditem > div {
    vertical-align: middle;
}
.player-board .sp_marker {
    background-image: url("img/startplayer.png");
    background-size: cover;
    height:36px;
    width:13px;
    visibility:hidden;
    margin:3px;
}
.player-board .sp_marker.visible {
    visibility: visible;
}
.player-board .investigator {
    display: inline-block;
    vertical-align: middle;
    margin-right: .5em;
}
.player-board .cube_supply {
    position: relative;
    margin-top:5px;
    margin-right:8px;
}
.player-board .cube_supply > .cube20 {
    position: relative;
    float:left;
    margin:0 -8px -14px 0;
}
.player-board .disc_supply {
    position: relative;
    margin-top:5px;
    margin-right:15px;
}
.player-board .disc_supply > .disc30 {
    position: relative;
    float:left;
    margin:0 -15px 0 0;
}

#carddisplay {
    width:960px;
    margin:0 auto;
}
#boardwrap {
    margin:0 auto;
    box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.66);
    border: solid 2px #333;
    border-radius: 3px;
    height:720px;
    width:960px;
    overflow: hidden;
}
#board {
    position: relative;
    top:-10px;
    left:-10px;
    background-image: url(img/board_big.jpg);
    height: 740px;
    width: 980px;
    background-size: 1000px;
    background-position: -10px -12px;
}
#belowboard {
    margin:0 auto;
    max-width:960px;
}

#minigamecounter {
    position: absolute;
    top: 220px;
    background: rgba(255, 233, 182, 0.55);
    box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.4);
    left: 18px;
    width: 90px;
    text-align: center;
    padding:.33em;
}

.disc {
    z-index:200;
    position: absolute;
    height:25px;
    width:25px;
    background-color: #000;
    border: solid 2px rgba(0, 0, 0, 0.5);
    border-width: 0 1px 1px 0;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.disc.blue { background-color:hsl(230, 100%, 55%); }
.disc.green { background-color:#0c0; }
.disc.purple { background-color:#e0e; }
.disc.red { background-color:#f30; }
.disc.yellow { background-color:#fe0; }

/* Location containers */
.loccont {
    position: absolute;
    height:114px;
    width:205px;
}

.loccont .agentarea {
    position: absolute;
    top:0; left:0;
    height:46px;
    width:100%;
    border-radius: 5px;
    z-index:50;
    text-align: center;
    /* background:rgba(0, 0, 0, 0.3);
    box-shadow:0 0 5px 5px rgba(0, 0, 0, 0.3);
    padding:4px; */
}
.loccont .agentarea.active_slot {
    box-shadow: 0 0 2px 2px rgb(255, 255, 255) !important;
    border:solid 2px red; /* because it's an instant action */
    border-width:2px !important;
    cursor: pointer !important;
}

/* Location slots */
.locslot {
    position: absolute;
    height:64px;
    width:64px;
    bottom:0;
    /* box-shadow: 0 0 0 4px rgba(255, 0, 255, 0.658); */
}
.locslot.location_slot { left:34%; }
.locslot.crime_slot { right:0; }

.locslot .stockitem {
    background-size: 448px;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.75);
    border: solid 0px #00000066;
}
.locslot .stockitem.fake_tile {
    box-shadow:none;
    background:none;
}
.locslot .highlight {
    box-shadow: 0 0 4px 6px rgb(255, 255, 255) !important;
}
.locslot .active_slot:not(.no_x_tile) {
    border-width:1px !important;
    box-shadow: 0 0 4px 6px rgb(255, 255, 255) !important;
    cursor: pointer !important;
}
.locslot .active_slot.stockitem_selected {
    border-width:1px !important;
    box-shadow: 0 0 4px 6px rgb(0, 0, 255) !important;
}

.cube {
    z-index:300;
    position: absolute;
    height:15px;
    width:15px;
    background-color: #000;
    border: solid 1px rgba(0, 0, 0, 0.5);
    border-width: 0 1px 1px 0;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5);
}
.cube.blue { background-color:hsl(230, 100%, 55%); }
.cube.green { background-color:#0c0; }
.cube.purple { background-color:#e0e; }
.cube.red { background-color:#ff3300; }
.cube.yellow { background-color:#fe0; }

.card,
#evidence .stockitem,
#evidence_discard .stockitem,
#playerdisplays .stockitem,
#myevidence .stockitem,
#myhand .stockitem {
    background-size: 810px;
    box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.66);
    border-radius: 8px;
}

#myhand-wrap {
    position: relative;
    float:left;
    height:166px;
    width: 282px;
    margin-right:.5em;
}
#myevidence-wrap {
    position: relative;
    float:left;
    height:166px;
    width:630px;
}
#casecards_help,
#myevidence_help {
    position: absolute;
    top:5px;
    right:5px;
    opacity: .5;
}

.spectatorMode #myhand-wrap,
.spectatorMode #myevidence-wrap {
    display: none;
}

#playerdisplays > .whiteblock {
    display:inline-block;
    min-height:166px;
    width:455px;
    margin-right: 6px;
}
#playerdisplays > .whiteblock:nth-of-type(2n) {
    margin-right: 0;
}

.locslot .cube20,
.locslot .disc30 {
    z-index:100;
    position: absolute;
}
.locslot .locslot_cubes {
    position: absolute;
    bottom:-2px;
    left:-2px;
    height:50px;
    width:50px;
}
/* Bottom left */
/*
 Cubes and disc on a tile:
 Closest to the middle looks best, so we start there.
    ------------
    |       d  |
    | 4 3  ddd |
    | 2 1   d  |
    | 6 5      |
    ------------
*/
.locslot .cube20:nth-of-type(1) { bottom:13px; left:17px; z-index:201; }
.locslot .cube20:nth-of-type(2) { bottom:13px; left: 0px; z-index:201; }
.locslot .cube20:nth-of-type(3) { bottom:26px; left:17px; z-index:203; }
.locslot .cube20:nth-of-type(4) { bottom:26px; left:0px; z-index:203; }
.locslot .cube20:nth-of-type(5) { bottom:0; left:17px; z-index:200; }
.locslot .cube20:nth-of-type(6) { bottom:0; left: 0px; z-index:200; }

/* Top right, so we can still see the image and the cubes */
.locslot .disc30 {
    top:18px;
    left:33px;
}
/* Regarding multiple discs on one locslot: Yes, there can only ever be one disc
   on a tile. If a user manually moves one there it stays there, unless we find
   a full match later. Then we move it back to the agentarea. A full match is a
   full match, there is no sense in keeping a wrongly manually placed disc there
   then. This might count as a very very minor 'helping the player'; but it's
   really too obvious not to tell them. TODO: implement this in the backend. */


.investigator {
    z-index:100;
    position: relative;
    height:36px;
    width:36px;
    margin:3px;
    background-image: url("img/investigators.png");
    background-size:182px;
    border-radius: 4px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
}
.investigator_red { background-position: 0px 0px }
.investigator_blue { background-position: -36px 0px }
.investigator_yellow { background-position: -72px 0px }
.investigator_green { background-position: -108px 0px }
.investigator_purple { background-position: -144px 0px }

.agentarea .investigator {
    display: inline-block;
    margin-right:3px;
}
.agentarea .investigator:last-of-type {
    margin-right:0;
}

.investigator .cube20,
.investigator .disc30 {
    position: absolute;
}
.investigator .cube20 {
    top:-2px;
}
.investigator .disc30 {
    bottom:-4px;
}
.investigator > div:nth-of-type(1) { left:-3px; z-index:200; }
.investigator > div:nth-of-type(2) { left:8px;z-index:201; }
.investigator > div:nth-of-type(3) { left:19px; z-index:202; }

.cube20 {
    height: 20px;
    width: 20px;
    background-image: url("img/common/cubes20_hc.png");
}
.cube20_blue { background-position: -20px 0px }
.cube20_red { background-position: -40px 0px }
.cube20_yellow { background-position: -60px 0px }
.cube20_green { background-position: -80px 0px }
.cube20_white { background-position: -100px 0px }
.cube20_black { background-position: -120px 0px }
.cube20_brown { background-position: -140px 0px }
.cube20_purple { background-position: -160px 0px }
.cube20_pink { background-position: -180px 0px }
.cube20_orange { background-position: -200px 0px }

.disc30 {
    height: 25px;
    width: 25px;
    background-image: url("img/common/discs30_hc.png");
    background-size: cover;
}
.disc30_blue { background-position: 0px 0px }
.disc30_green { background-position: -25px 0px }
.disc30_beige { background-position: -50px 0px }
.disc30_orange { background-position: -75px 0px }
.disc30_white { background-position: -100px 0px }
.disc30_black { background-position: -125px 0px }
.disc30_red { background-position: -150px 0px }
.disc30_yellow { background-position: -175px 0px }
.disc30_gray { background-position: -200px 0px }
.disc30_purple { background-position: -225px 0px }

/* Correct the rotation of the location containers for the tokens.
   The tokens look better when they are not rotated.
*/
#loccont_1 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_2 div:not(.token) > .token {
    transform:rotate(-2.5deg);
}
#loccont_3 div:not(.token) > .token {
    transform:rotate(-2.0deg);
}
#loccont_4 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_5 div:not(.token) > .token {
    transform:rotate(-1.3deg);
}
#loccont_6 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_7 div:not(.token) > .token {
    transform:rotate(-1.15deg);
}
#loccont_8 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_9 div:not(.token) > .token {
    transform:rotate(-1.7deg);
}
#loccont_10 div:not(.token) > .token {
    transform:rotate(1.5deg);
}
#loccont_11 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_12 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_13 div:not(.token) > .token {
    transform:rotate(-1.5deg);
}
#loccont_14 div:not(.token) > .token {
    transform:rotate(-0deg);
}

.vpbox,
.penaltybox {
    position: absolute;
    height:80px;
    width:64px;
}
.penaltybox {
    bottom:25px;
}
.vpbox {
    top:58px;
}
#penalty_0 { left: 24px; }
#penalty_2 { left: 92px; }
#penalty_4 { left: 164px; bottom:20px; }
#penalty_6 { left: 758px; bottom:20px; }
#penalty_8 { left: 830px; }
#penalty_10 { left: 898px; }
#vp_7 { top: 58px; left: 24px; }
#vp_5 { top: 50px; left: 95px; }
#vp_3 { top: 45px; left: 165px; }
#vp_1 { top: 50px; left: 796px; }
#vp_0 { top: 46px; left: 868px; }

.token.penalty,
.token.vpmarker {
    z-index:100;
    position: relative;
    height:32px;
    width:32px;
    background-image: url("img/vptoken.jpg");
    background-size:352px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.75);
}
.token.penalty_red { background-position: -192px 32px }
.token.penalty_blue { background-position: -224px 32px }
.token.penalty_yellow { background-position: -256px 32px }
.token.penalty_green { background-position: -288px 32px }
.token.penalty_purple { background-position: -320px 32px }

.penaltybox .token.penalty {
    position: absolute;
    top:0;
    left:0;
}
.penaltybox .token:nth-of-type(1) { left: 5px; top: 0px }
.penaltybox .token:nth-of-type(2) { left: 30px; top: 4px }
.penaltybox .token:nth-of-type(3) { left: 0px; top: 26px }
.penaltybox .token:nth-of-type(4) { left: 24px; top: 30px }
.penaltybox .token:nth-of-type(5) { left: 10px; top: 54px }

#vp_red_0 { background-position: 0 0 }
#vp_red_1 { background-position: -32px 0 }
#vp_red_2 { background-position: -64px 0 }
#vp_blue_0 { background-position: -96px 0 }
#vp_blue_1 { background-position: -128px 0 }
#vp_blue_2 { background-position: -160px 0 }
#vp_green_0 { background-position: 0 32px }
#vp_green_1 { background-position: -32px 32px }
#vp_green_2 { background-position: -64px 32px }
#vp_purple_0 { background-position: -96px 32px }
#vp_purple_1 { background-position: -128px 32px }
#vp_purple_2 { background-position: -160px 32px }
#vp_yellow_0 { background-position: -192px 0 }
#vp_yellow_1 { background-position: -224px 0 }
#vp_yellow_2 { background-position: -256px 0 }

/* Just make it look a little random. In 5P games they might be many tokens on one spot. */
.vpbox .vpmarker {
    display: inline-block;
    margin-right:-12px;
    margin-bottom:-12px;
}
.vpbox .vpmarker:nth-of-type(2n) {
    margin-bottom:-6px;
    margin-top:0;
}
.vpbox .vpmarker:nth-of-type(2n+1),
.vpbox .vpmarker:nth-of-type(4n) {
    margin-left:-6px;
    margin-top:-6px;
}

.cardname,
.tilename {
    position: absolute;
    top:0;
    background:#f2904b;
    background-image: url(img/namebg.png);
    background-position: center;
    color:#251815;
    text-align:center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Oswald', sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cardname {
    left:0;
    width:91%;
    padding:1px 2px;
    border: solid 2px #f9eee3;
    border-radius: 10px 10px 0 0;
    font-size: 13px;
    font-weight: 600;
}
.cardname.casecard {
    background-image: url(img/casenamebg.png);
    color:#f3f1ec;
}
.tilename {
    left:4px;
    width:81%;
    padding:0 2px;
    border-bottom:solid 1px #f9eee3;
    border-radius: 3px 3px 0 0;
    font-size: .7em;
    font-weight: 500;
}
.location_slot .tilename {
    top:2px;
    left:5px;
    width:81%;
}

.cardtooltip {
    background-image: url(img/namebg.png);
    font-family: 'Oswald', sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    color:#251815;
    padding:0 10px 1px;
    border-radius: 3px;
}
.casecardtooltip {
    background-image: url(img/casenamebg.png);
    color:#f3f1ec;
}

.help_click {
    background-image: url(img/common/help_click.png);
    background-repeat: no-repeat;
    padding-left:20px;
}