velonimo.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * Velonimo implementation : © Oliver THEBAULT (a.k.a. Oliboy50)
 *
 * 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.
 * -----
 *
 * velonimo.css
 *
 * Velonimo 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 (velonimo_velonimo.tpl), and to HTML elements you create dynamically
    (in velonimo.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 */

/**
Override BGA elements style
 */
#page-title,
#log_history_status,
#maingameview_menuheader {
    z-index: 97;
}
.tableWindow table {
    width: 100%;
}
.tableWindow table th {
    text-align: center;
}
.tableWindow table tr:last-child td {
    border-bottom: none;
    text-transform: uppercase;
    font-weight: bold;
}
/**
END Override BGA elements style
 */

/**
Board
 */
#game_play_area {
    position:relative;
}

#board {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 740px;
}

#game-info {
    width: auto; /* to cancel the width property of the BGA ".player-board" class */
    position: absolute;
    top: 0;
    left: 2px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid black;
    border-radius: 8px;
}
#current-round {
    font-size: 1.5em;
}

#board-carpet {
    position: relative;
    width: 740px;
    height: 480px;
    background-size: 740px 480px;
    background-image: url('img/board_carpet.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.player-table {
    position: absolute; /* position is dynamically computed */
    text-align: center;
    z-index: 0;
}
.player-table.selectable,
.player-table.selectable-for-card-picking {
    cursor: pointer;
}
.player-table.selectable:hover {
    transform: scale(1.02);
}
.player-table-name {
    position: absolute;
    width: 100%;
    font-weight: bold;
    border: 2px solid transparent;
    box-sizing: border-box;
    z-index: 6;
}
.player-table.selectable .player-table-name,
.player-table.selectable-for-card-picking .player-table-name {
    pointer-events: none;
}
.player-table-name span {
    background: rgba(255, 255, 255, 0.9);
}
.player-table.active .player-table-name span {
    border: 2px solid;
}
.player-table.selectable .player-table-name span,
.player-table.selectable-for-card-picking .player-table-name span {
    border: 2px solid black;
}
.player-table.selectable:hover .player-table-name span,
.player-table.selectable-for-card-picking:hover .player-table-name span {
    border: 2px solid;
}
.player-table.player-position-top .player-table-name {
    top: 10px;
}
.player-table.player-position-bottom .player-table-name {
    bottom: 10px;
}
/* Put the player name below the finished image even when players are at the top of the board */
.player-table.player-position-top.has-finished-1 .player-table-name,
.player-table.player-position-top.has-finished-2 .player-table-name,
.player-table.player-position-top.has-finished-3 .player-table-name,
.player-table.player-position-top.has-finished-4 .player-table-name {
    top: 120px;
}
.player-table-hand {
    position: absolute;
    width: 90px;
    height: 126px;
    padding-left: 100px;
    transition-property: top, bottom;
    transition-duration: 1s;
    z-index: 4;
}
.player-table.selectable .player-table-hand,
.player-table.selectable-for-card-picking .player-table-hand {
    pointer-events: none;
}
.player-table.player-position-top .player-table-hand {
    top: 0;
}
.player-table.player-position-top.active .player-table-hand {
    top: 25px;
}
.player-table.player-position-bottom .player-table-hand {
    bottom: 0;
}
.player-table.player-position-bottom.active .player-table-hand {
    bottom: 20px;
}
.player-table-hand-cards {
    position: absolute;
}
.player-table-hand-cards .velonimo-card {
    position: absolute;
    transform-origin: center 100% 0;
    left: 0;
    transition-property: all;
    transition-duration: 0.4s;
}
.player-table.selectable-for-card-picking:hover .player-table-hand-cards .velonimo-card {
    transform-origin: center 200% 0;
}
.player-table.player-position-top .player-table-hand-cards .velonimo-card {
    bottom: 0;
}
.player-table.selectable-for-card-picking.player-position-top .player-table-hand-cards .velonimo-card:hover {
    bottom: 30px;
}
.player-table.player-position-bottom .player-table-hand-cards .velonimo-card {
    top: 0;
}
.player-table.selectable-for-card-picking.player-position-bottom .player-table-hand-cards .velonimo-card:hover {
    top: -30px;
}
.player-table.player-position-top .player-table-hand-cards {
    top: -25px;
    left: 145px;
    transform: rotate(180deg);
}
.player-table.player-position-bottom .player-table-hand-cards {
    top: 20px;
    left: 55px;
}
.player-table-speech-bubble {
    position: absolute;
    min-width: 25px;
    padding: 2px 4px;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 2px 2px 5px 0 black;
    font-size: 2.2em;
    text-align: center;
    font-weight: bold;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
}
.player-table.selectable .player-table-speech-bubble,
.player-table.selectable-for-card-picking .player-table-speech-bubble {
    pointer-events: none;
}
.player-table.player-position-top .player-table-speech-bubble {
    bottom: -15px;
}
.player-table.player-position-bottom .player-table-speech-bubble {
    top: -15px;
}
.player-table-speech-bubble.speech-bubble-on-left {
    right: 185px;
}
.player-table-speech-bubble.speech-bubble-on-right {
    left: 185px;
}
.player-table-speech-bubble::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 20px solid #ffffff;
}
.player-table.player-position-top .player-table-speech-bubble::after {
    top: -10px;
}
.player-table.player-position-bottom .player-table-speech-bubble::after {
    bottom: -10px;
}
.player-table-speech-bubble.speech-bubble-on-left::after {
    right: -10px;
}
.player-table-speech-bubble.speech-bubble-on-right::after {
    left: -10px;
}
.player-table.player-position-top .player-table-speech-bubble.speech-bubble-on-left::after {
    transform: rotate(-120deg);
}
.player-table.player-position-top .player-table-speech-bubble.speech-bubble-on-right::after {
    transform: rotate(120deg);
}
.player-table.player-position-bottom .player-table-speech-bubble.speech-bubble-on-left::after {
    transform: rotate(-60deg);
}
.player-table.player-position-bottom .player-table-speech-bubble.speech-bubble-on-right::after {
    transform: rotate(60deg);
}
.player-table-speech-bubble.show-bubble {
    opacity: 1;
}
.player-table .player-special-cards {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.player-table.player-position-top .player-special-cards {
    top: 50px;
}
.player-table.player-position-bottom .player-special-cards {
    bottom: 50px;
}
.player-special-cards div {
    display: none;
    width: 30px;
    height: 30px;
    background-image: url('img/cards.png'); /* background-position is dynamically computed */
    background-size: 630px 1134px; /* width = cardWidth * number of columns in sprite ; height = cardHeight * number of rows in sprite */
    border-radius: 50%;
    z-index: 5;
}
.player-table.has-jersey .player-table-jersey,
.player-table.has-legends-broom-wagon .player-table-legends-broom-wagon,
.player-table.has-legends-coach-eagle .player-table-legends-coach,
.player-table.has-legends-coach-panda .player-table-legends-coach,
.player-table.has-legends-coach-shark .player-table-legends-coach,
.player-table.has-legends-coach-badger .player-table-legends-coach,
.player-table.has-legends-coach-elephant .player-table-legends-coach {
    display: block;
}
.player-table.has-jersey.has-used-jersey .player-table-jersey,
.player-table.has-legends-broom-wagon.has-used-legends-broom-wagon .player-table-legends-broom-wagon,
.player-table.has-legends-coach-eagle.has-used-legends-coach-eagle .player-table-legends-coach,
.player-table.has-legends-coach-panda.has-used-legends-coach-panda .player-table-legends-coach,
.player-table.has-legends-coach-shark.has-used-legends-coach-shark .player-table-legends-coach,
.player-table.has-legends-coach-badger.has-used-legends-coach-badger .player-table-legends-coach,
.player-table.has-legends-coach-elephant.has-used-legends-coach-elephant .player-table-legends-coach {
    display: none;
}
.player-table.selectable .player-special-cards div,
.player-table.selectable-for-card-picking .player-special-cards div {
    pointer-events: none;
}
.player-table .player-table-finish-position {
    display: none;
    position: absolute;
    left: 25px;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-image: url('img/finish.png');
    background-size: 600px 150px;
    background-position-y: center;
}
.player-table.selectable .player-table-finish-position,
.player-table.selectable-for-card-picking .player-table-finish-position {
    pointer-events: none;
}
.player-table.player-position-top .player-table-finish-position {
    bottom: -25px;
}
.player-table.player-position-bottom .player-table-finish-position {
    top: -25px;
}
.player-table.has-finished-1 .player-table-finish-position,
.player-table.has-finished-2 .player-table-finish-position,
.player-table.has-finished-3 .player-table-finish-position,
.player-table.has-finished-4 .player-table-finish-position {
    display: block;
}
.player-table.has-finished-1 .player-special-cards div,
.player-table.has-finished-2 .player-special-cards div,
.player-table.has-finished-3 .player-special-cards div,
.player-table.has-finished-4 .player-special-cards div {
    display: none;
}
.player-table.has-finished-1 .player-table-finish-position {
    background-position-x: 0;
}
.player-table.has-finished-2 .player-table-finish-position {
    background-position-x: -150px;
}
.player-table.has-finished-3 .player-table-finish-position {
    background-position-x: -300px;
}
.player-table.has-finished-4 .player-table-finish-position {
    background-position-x: -450px;
}
/**
END Board
 */

/**
Board cards
 */
#played-cards {
    position: relative;
    top: 160px; /* (containerHeight / 2) - (selfHeight / 2) - 6px */
    left: 235px; /* (containerWidth / 2) - (selfWidth / 2) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 270px; /* cardWidth + (6 * (cardWidth / 3)) */
    height: 156px; /* cardHeight + (cardHeight / 6) + 8px */
    z-index: 4;
}
#previous-last-played-cards {
    position: absolute;
    top: 0;
    height: 126px; /* cardHeight */
    z-index: 8;
}
#last-played-cards {
    position: absolute;
    bottom: 0;
    height: 126px; /* cardHeight */
    z-index: 10;
}
#previous-last-played-cards .velonimo-card,
#last-played-cards .velonimo-card {
    transition-property: all;
    transition-duration: 0.5s;
    transform: scale(1.3);
}
/* /!\ 2P mode only */
#cards-deck {
    position: absolute;
    display: block;
    top: 177px; /* (containerHeight / 2) - (selfHeight / 2) */
    left: 10px; /* boardMargin */
    width: 90px; /* cardWidth */
    height: 126px; /* cardHeight */
}
/* /!\ 2P mode only */
#cards-deck-cards .card-in-deck {
    position: absolute;
    display: block;
    width: 90px; /* cardWidth */
    height: 126px; /* cardHeight */
    border-radius: 5px;
    background-image: url('img/remaining_cards.png');
    background-size: 90px 126px;
}
/* /!\ 2P mode only */
#attack-reward-card {
    position: absolute;
    display: inline-block;
    top: 177px; /* (containerHeight / 2) - (selfHeight / 2) */
    left: 110px; /* cardWidth + (2 * boardMargin) */
    width: 90px; /* cardWidth */
    height: 126px; /* cardHeight */
}
/**
END Board cards
 */

/**
Current player hand
 */
#my-hand-wrapper {
    position: relative;
    z-index: 20;
}
.spectatorMode #my-hand-wrapper {
    display: none;
}
#my-hand-title-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
#my-hand-title-wrapper-left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}
#my-hand-title-wrapper-right {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}
#my-hand-title {
    margin-left: 5px;
    text-decoration: underline;
}
#toggle-sort-button,
#group-cards-button,
#ungroup-cards-button {
    margin-left: 10px;
}
#my-hand-selected-cards {
    padding: 10px;
    border: 1px solid black;
    border-radius: 40px;
}
#my-hand-selected-cards-value {
    margin-left: 5px;
    font-weight: bold;
}
#my-hand .stockitem {
    border-radius: 10px;
    margin: 5px;
    border: 1px solid grey;
}
#my-hand .stockitem:hover {
    cursor: pointer;
    margin: 4px;
    border: 2px solid black !important;
}
#my-hand .stockitem_selected {
    margin: 3px;
    transform: scale(1.02);
    border: 2px solid black !important;
    box-shadow: 1px 1px 5px black, 2px 2px 4px black;
}
#my-hand .stockitem.non-selectable-player-card {
    cursor: not-allowed;
    opacity: 0.5 !important;
}
#my-hand .stockitem.non-selectable-player-card:hover {
    cursor: not-allowed;
    margin: 5px;
    border: 1px solid gray !important;
}
/**
END Current player hand
 */

/**
Cards
 */
.velonimo-card {
    width: 90px;
    height: 126px;
    border-radius: 10px;
    background-repeat: no-repeat;
}
.velonimo-card.front-side {
    background-image: url('img/cards.png'); /* background-position is dynamically computed */
    background-size: 630px 1134px; /* width = cardWidth * number of columns in sprite ; height = cardHeight * number of rows in sprite */
}
.velonimo-card.back-side {
    background-image: url('img/remaining_cards.png');
    background-size: 90px 126px;
}
.cards-stack {
    position: absolute; /* position and width are dynamically computed */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
}
.cards-stack.previous-last-played-cards {
    opacity: 0.2;
}
.cards-stack .velonimo-card {
    margin-right: -50px; /* 2/3 of card width - 10px */
}
.cards-group-card::after {
    content: "";
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -3px;
    right: -3px;
}
.cards-group-card-left::before {
    content: "";
    border-left: 3px solid black;
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -3px;
}
.cards-group-card-right::before {
    content: "";
    border-right: 3px solid black;
    position: absolute;
    top: -2px;
    bottom: -2px;
    right: -3px;
}
#my-hand .stockitem_selected.cards-group-card.cards-group-1,
#my-hand .stockitem.cards-group-card.cards-group-1:hover,
.cards-group-card.cards-group-1::after,
.cards-group-card-left.cards-group-1::before,
.cards-group-card-right.cards-group-1::before {
    border-color: green !important;
}
#my-hand .stockitem_selected.cards-group-card.cards-group-2,
#my-hand .stockitem.cards-group-card.cards-group-2:hover,
.cards-group-card.cards-group-2::after,
.cards-group-card-left.cards-group-2::before,
.cards-group-card-right.cards-group-2::before {
    border-color: red !important;
}
#my-hand .stockitem_selected.cards-group-card.cards-group-3,
#my-hand .stockitem.cards-group-card.cards-group-3:hover,
.cards-group-card.cards-group-3::after,
.cards-group-card-left.cards-group-3::before,
.cards-group-card-right.cards-group-3::before {
    border-color: blue !important;
}
#my-hand .stockitem_selected.cards-group-card.cards-group-4,
#my-hand .stockitem.cards-group-card.cards-group-4:hover,
.cards-group-card.cards-group-4::after,
.cards-group-card-left.cards-group-4::before,
.cards-group-card-right.cards-group-4::before {
    border-color: orange !important;
}
#my-hand .stockitem_selected.cards-group-card.cards-group-5,
#my-hand .stockitem.cards-group-card.cards-group-5:hover,
.cards-group-card.cards-group-5::after,
.cards-group-card-left.cards-group-5::before,
.cards-group-card-right.cards-group-5::before {
    border-color: hotpink !important;
}
#my-hand .stockitem_selected.cards-group-card.cards-group-6,
#my-hand .stockitem.cards-group-card.cards-group-6:hover,
.cards-group-card.cards-group-6::after,
.cards-group-card-left.cards-group-6::before,
.cards-group-card-right.cards-group-6::before {
    border-color: royalblue !important;
}
/**
END Cards
 */

/**
Animations
 */
.moving-card {
    z-index: 100;
}
.moving-special-card.player-table-jersey,
.moving-special-card.player-table-legends-broom-wagon,
.moving-special-card.player-table-legends-coach {
    opacity: 1;
    z-index: 100;
}
/**
END Animations
 */

/**
Log HTML
 */
.log .velonimo-card {
    display: inline-block;
    vertical-align: bottom;
    border-radius: 0;
}
/**
END Log HTML
 */

/**
Player panel HTML
 */
.player-panel-velonimo-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.player-panel-velonimo-left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}
.player-panel-velonimo-right {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-end;
}
.player-panel-number-of-remaining-cards {
    width: 40px;
    margin-top: 10px;
    margin-right: 10px;
    text-align: center;
}
.player-panel-jersey,
.player-panel-legends-broom-wagon,
.player-panel-legends-coach-eagle.velonimo-card,
.player-panel-legends-coach-panda.velonimo-card,
.player-panel-legends-coach-shark.velonimo-card,
.player-panel-legends-coach-badger.velonimo-card,
.player-panel-legends-coach-elephant.velonimo-card {
    border-radius: 50%;
}
.has-used-jersey .player-panel-jersey,
.has-used-legends-broom-wagon .player-panel-legends-broom-wagon,
.has-used-legends-coach-eagle .player-panel-legends-coach-eagle,
.has-used-legends-coach-panda .player-panel-legends-coach-panda,
.has-used-legends-coach-shark .player-panel-legends-coach-shark,
.has-used-legends-coach-badger .player-panel-legends-coach-badger,
.has-used-legends-coach-elephant .player-panel-legends-coach-elephant {
    filter: grayscale(1);
    opacity: 0.5;
}
/**
END Player panel HTML
 */