trickoftherails.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * TrickOfTheRails implementation : @ David Edelstein <davidedelstein@gmail.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.
 * -----
 *
 * trickoftherails.css
 *
 * TrickOfTheRails 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 (trickoftherails_trickoftherails.tpl), and to HTML elements you create dynamically
    (in trickoftherails.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 */

@font-face {
    font-family: 'Cinzel', serif;
    src: local('Cinzel'), url(https://fonts.googleapis.com/css2?family=Cinzel:wght@700);
    font-style: normal; 
    font-weight: 700;
}

@font-face {
    font-family: 'Frank Ruhl Libre', serif;
    src: local('Frank Ruhl Libre'), url(https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Frank+Ruhl+Libre:wght@700&display=swap);
    font-style: normal; 
    font-weight: 700;
}

:root {
    --color_b_and_o: #004D7A;
    --color_c_and_o: #80933F;
    --color_erie: #EDB630;
    --color_nyc: #B8B7AE;
    --color_prr: #9A1D20;
    --color_loc: #E2DAB4;
    --color_locomotive: #B8D2D4;
    --color_city: #D0C88C;
    --color_reservation: #E8E1C4;
    --color_team1:  #EFE7C6;
    --color_team2: #C5BF87;
    --card_height: 114px;
    --card_width: 76px;
}

/* Hide by default */
.totr_shares_display {
    display: none;
}

.totr_shares_lane {
    display: flex;
}

.totr_player_shares {
    margin: 10px;
}

.totr_flex_lane {
    display: flex;
    flex-wrap: wrap;
}

.totr_locomotive_slot {
    margin: 5px;
    background-size: 66px 33.6px;
    background-position: center;
    background-image: url(img/locomotive.png);
    background-repeat: no-repeat;
    background-color: lightgray;
    opacity: 0.5;
    width: var(--card_width);
    height: var(--card_height);
    border-radius: 5px;
    border-style: groove;
}

/** Only added during place locomotive */
.totr_locomotive_slot_active {
    opacity: 1;
    box-shadow: 1px 1px 1px 0px lightgray;
}

.totr_railhouse {
    background-size: 450px 225px;
    background-image: url(img/railhouse_sprites.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 75px;
    height: 75px;
}

.totr_nice_card {
    border-radius: 10px;
    border: 1px black solid;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
}

.totr_small_station_values_card {
    margin-left: 10px;
    background-size: 75px 50px;
    background-image: url(img/station_values_card.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 75px;
    height: 50px;
}

.totr_large_station_values_card {
    background-size: 960px 640px;
    background-image: url(img/station_values_card.jpg);
    background-repeat: no-repeat;
    width: 960px;
    height: 640px;
}

.totr_tooltip {
    font-family: 'Cinzel';
    font-size: 16px;
}

.totr_tooltip > h1 {
    font-size: 24px;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border-bottom: 4px solid #1C1916;
}

.totr_tt_hdr_val {
    margin: 0 0 0 5px;
    border: 2px white;
    border-style: outset;
    padding: 2px;
}

.totr_tt_hdr_loc_val {
    margin: 0 0 0 5px;
    border: 2px black;
    color: black;
    background-color: var(--color_loc);
    border-style: outset;
    padding: 2px;
}

.totr_tt_sv {
    margin-top: 10px;
    padding-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 3px groove gray;
    border-bottom: 3px groove gray;
    border-radius: 8px;
}

.totr_tt_sv_text {
    margin: 0 5px;
    font-family: 'Frank Ruhl Libre';
    font-weight: 500;
    font-size: 24px;
}

.totr_tt_sv_icon {
    margin: 0 0 0 5px;
    background-size: 250px 100px;
    background-image: url(img/station_values.png);
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
}

/* .card_lead {
    border: 2px solid white;
    box-shadow: 0px 0px 2px 3px;
}

*/
.totr_card_played_lbl {
    display: inline-block;
    color: white;
    margin-top: 10px;
    padding: 5px 3px 5px;
    position: absolute;
    bottom: 0;
    font-size: 0.5em;
    font-weight: 700;
    border-radius: 4px;
    transform: translateY(24px);
}

/** for card value text in logs */
.totr_card_value {
    font-family: 'Cinzel';
    color: #ffff;
    font-weight: bold;
    display: inline-block;
    padding-inline: 8px 8px;
}

/** for locomotive value text in logs */
.totr_locomotive_value {
    background-color: var(--color_loc);
    color: black;
    outline: 1px solid black;
    font-weight: bold;
    display: inline-block;
    padding-inline: 5px;
}

.totr_noselect {
    border: 1px gray solid;
    border-style: inset;
    cursor: not-allowed;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
}

/* Decoration for cards when they are selectable (of the trick color) */
.totr_trick_color {
    border: white 2px;
    border-style: solid;
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.8);
}

.totr_trick_color:hover {
    border-color: salmon;
    box-shadow: 5px 5px 10px 0px lightgray;
}

.totr_scored_card {
    border: 3px #B5CDCE;
    border-style: double outset;
    box-shadow: 2px 5px 1px 4px rgba(0,0,0,0.4);
}

/** totr_ready_railhouse class is dynamically added and removed */
.totr_ready_railhouse:active {
    transform: translateX(4px) translateY(4px);
}

.totr_lane_header {
    font-family: 'Cinzel';
    text-align: center;
    text-indent: 12px;
    font-size: 24px;
    font-weight: bold;
    line-height: 35px;
}

.totr_player_prefs {
    display: block;
    padding-top: 5px;
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    border-top: 2px solid;
}

.totr_pref {
    padding-left: 10px;
}

/* base class for RR logs */
.totr_rr_logo {
    margin: 5px;
    background-position: top;
    background-image: url(img/railroad_sprites.png);
    background-repeat: no-repeat;
}

/* holds an rr icon and counter */
.totr_rr_counter_container {
    margin: 5px;
    display: inline-block;
}

/* Shows share count on player boards */
.totr_shares_ctr {
    font-family: 'Frank Ruhl Libre';
    font-size: 32px;
    font-weight: 700;
    vertical-align: 10px;
}

/* scale can be resized separately in the tpl */
.totr_rr_icon {
    --scale: 1;
    display: inline-block;
    background-size: calc(var(--scale) * 140px) calc(var(--scale) * 25px);
    vertical-align: -10px;
}

.totr_b_and_o_icon {
    width: calc(var(--scale) *25px);
    height: calc(var(--scale) *25px);
    background-position: 0px 0px;
}

.totr_c_and_o_icon {
    width: calc(var(--scale) *25px);
    height: calc(var(--scale) *25px);
    background-position: calc(var(--scale) * -25px) 0px;
}

.totr_erie_icon {
    width: calc(var(--scale) *25px);
    height: calc(var(--scale) *25px);
    background-position: calc(var(--scale) * -50px) 0px;
}

.totr_nyc_icon {
    width: calc(var(--scale) *40px);
    height: calc(var(--scale) *25px);
    background-position: calc(var(--scale) *-100px) 0px;
}

.totr_prr_icon {
    width: calc(var(--scale) *25px);
    height: calc(var(--scale) *25px);
    background-position: calc(var(--scale) *-75px) 0px;
}

.totr_help_display {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.totr_unl_loc {
    opacity: 0.8 !important;
    border: black 4px;
}

.totr_team_banner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 2px;
    border: #686763 solid 3px;
    border-radius: 6px;
    border-style: ridge;
}

.totr_team_label {
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #1E1B18;
}

.totr_card_icon {
    margin: 0 0 0 5px;
    background-repeat: no-repeat;
    vertical-align: middle;
    float: right;
}

.totr_locomotive_icon {
    background-size: 44px 22.4px;
    background-image: url(img/locomotive.png);
    background-repeat: no-repeat;
    width: 44px;
    height: 22.4px;
    opacity: 0.8;
    margin-top: 6px;
    vertical-align: bottom;
}

/**
* For tooltip
*/
.totr_locomotive_card_icon {
    background-size: 44px 22.4px;
    background-image: url(img/locomotive.png);
    width: 44px;
    height: 22.4px;
}

.totr_exchange_icon {
    background-size: 90px 25px;
    background-image: url(img/icon_sprites.png);
    background-position: -65px 0;
    height: 25px;
    width: 25px;
}

.totr_reservation_icon {
    background-size: 90px 25px;
    background-image: url(img/icon_sprites.png);
    background-position: -40px 0;
    height: 25px;
    width: 25px;
}

.totr_share_icon {
    background-size: 90px 25px;
    background-image: url(img/icon_sprites.png);
    background-position: 0 0;
    height: 25px;
    width: 19px;
}

.totr_rail_icon {
    background-size: 90px 25px;
    background-image: url(img/icon_sprites.png);
    background-position: -18.6px 0;
    height: 25px;
    width: 21px;
}

.totr_btn_opt {
    position: relative;
    margin: 0 2px;
    top: 2px;
}

#card_rows {
    display: flex;
}

#share_value_display {
    display: flex;
    justify-content: center;
}

#cardsplayed_wrap {
    margin: 5px;
    flex: 0 0 415px;
}

#tricklane_wrap {
    margin: 5px;
    flex: 1;
}

#discard_shares_header {
    text-align: center;
    text-indent: 12px;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px;
    color: black;
}

#discarded_shares {
    background-color: lightgray;
    opacity: 0.6;
}

/* the NYC logo needs to be sized independently, or it takes up too much width */
#nyc_logo {
    background-size: calc(var(--scale) *88px) calc(var(--scale) *15.6px);
    width: calc(var(--scale) *25.1px);
    height: calc(var(--scale) *15.6px);
    background-position: calc(var(--scale) *-62.6px) 0px;
}