sharedcode.css

/**
Copyright (c) 2017 Board Game Arena
All rights reserved. This program and the accompanying materials are made
available under the terms of the Eclipse Public License v1.0 which
accompanies this distribution, and is available at
http://www.eclipse.org/legal/epl-v10.html

Contributors:
  BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
  Alena Laskavaia <laskava@gmail.com> - initial API and implementation

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.
*/
@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: **********/

/** Shadow for square tokens or boards, make them appear more real board-gamish */
.shadow {
	-moz-box-shadow: 1px 1px 2px 1px #222;
	-webkit-box-shadow: 1px 1px 2px 1px #222;
	-o-box-shadow: 1px 1px 2px 1px #222;
	box-shadow: 1px 1px 2px 1px #222;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.selected {
	outline-color: blue !important;
	box-shadow: 1px 1px 2px 1px #444, 0 0 5px blue, 0 0 5px darkblue !important;
}

.active_slot:hover {
	outline-color: blue;
	outline-style: solid;
	outline-width: 2px;
}

.active_slot {
	cursor: pointer;
	outline-color: white;
	outline-style: solid;
	outline-width: 2px;
}

.splabel {
	position: absolute;
}

/** mini board styles */
.mini_board_item {
	display: inline-block;
	margin-right: 1em;
}

.mini_board_item>* {
	display: inline-block;
	vertical-align: middle;
}

/** Wooden cubes */
.wcube {
	width: 30px;
	height: 30px;
	background-image: url(img/30_30_wooden_cubes.png);
}

.wcube_gray {
	background-position: 0% 0%;
}

.wcube_blue {
	background-position: 10% 0%;
}

.wcube_red {
	background-position: 20% 0%;
}

.wcube_yellow {
	background-position: 30% 0%;
}

.wcube_green {
	background-position: 40% 0%;
}

.wcube_white {
	background-position: 50% 0%;
}

.wcube_black {
	background-position: 60% 0%;
}

.wcube_brown {
	background-position: 70% 0%;
}

.wcube_purple {
	background-position: 80% 0%;
}

.wcube_pink {
	background-position: 90% 0%;
}

.wcube_orange {
	background-position: 100% 0%;
}

/** Standing meeples */
.smeeple2 {
	width: 64px;
	height: 78px;
	background-image: url(img/78_64_stand_meeples.png);
}

.smeeple {
	width: 32px;
	height: 39px;
	background-image: url(img/78_64_stand_meeples.png);
	background-size: 352px;
}

.smeeple_gray {
	background-position: 20% 0%;
}

.smeeple_blue {
	background-position: 40% 0%;
}

.smeeple_red {
	background-position: 30% 0%;
}

.smeeple_yellow {
	background-position: 10% 0%;
}

.smeeple_green {
	background-position: 60% 0%;
}

.smeeple_white {
	background-position: 20% 0%;
}

.smeeple_black {
	background-position: 50% 0%;
}

.smeeple_brown {
	background-position: 50% 0%;
}

.smeeple_purple {
	background-position: 0% 0%;
}

.smeeple_pink {
	background-position: 0% 0%;
}

.smeeple_orange {
	background-position: 70% 0%;
}

.logitem {
	display: inline-block;
	vertical-align: middle;
}

/** main board styles */
.mainboard {
	width: 980px;
	height: 300px;
	background-color: #c99d6c;
	position: relative;
	margin-bottom: 10px;
}

.action_space {
	width: 150px;
	height: 50px;
	background-color: white;
	border-style: dotted;
	border-width: 1px;
	border-color: brown;
	position: absolute;
	top: 20px;
}

.action_space_1 {
	left: 10px;
}

.action_space_2 {
	left: 180px;
}

.action_space_3 {
	left: 410px;
}

.action_space_4 {
	left: 600px;
}

.action_space_4::after {
	content: "This is text inject by css ::after"
}


.action_space>* {
	display: inline-block;
}

.action_space>*:NOT(span) {
	z-index: 11;
	position: relative;
}

.basket {
	width: 200px;
	height: 100px;
	background-color: antiquewhite;
	outline-style: inset;
	outline-width: 3px;
	outline-color: white;
	position: absolute;
	outline-width: 3px;
	outline-color: white;
}

.basket_1 {
	top: 180px;
	left: 20px;
}

.basket_2 {
	top: 180px;
	left: 300px;
}

.basket>* {
	display: inline-block;
}
.funcontrols{
	height: 350px;
}
.funcontrols>*{
		display: inline-block;
		margin-right: 30px;
}

/** Stock areas */
.playarea, .hand {
   min-width: 70px;
   min-height: 78px;
   padding: 10px;	

}

.cardgame {
	position: relative;
}
.cardgame > * {
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: calc(64px * 5);
	margin-right: 20px;
}

label {
	white-space: nowrap;
	overflow-wrap: none;
	display:inline-block;
}

/** Card flipping effect */

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 110px;
	height: 176px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

.card {
  	border-radius: 15px;
  	border-color: gray;
  	box-shadow: 1px 1px 2px 1px #222;
}

.front.card {
	background-image: url(img/publisher.png);
	background-color: white;
}

.back.card {
	background-color: blue;
}
.purple {
	background-color: purple;
}
.purple.card {
	width: 64px;
	height: 73px;
}

/** */
.drag_target {
	outline: dotted blue;
}

.drag_target_hover {
	outline: solid blue;
}

/** Dice rolling effect */

/* 3D Cube */
.cube-scene {
	perspective: 1000px;
	width: 100px;
	height: 100px;
	text-align: center;
	display: inline-block;
}

.cube {
	display: inline-block;
	transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	text-align: center;
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateX(-15deg) rotateY(15deg);
	top: 50%;
	left: 50%;
	transform-origin: 50%;
}

.cube-face {
	overflow: hidden;
	position: absolute;
	border: 1px solid #888;
	border-radius: 5px;
	background: #FFF;
	/* box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); */
	color: #333;
	line-height: 100px;	
	width: 100px;
	height: 100px;
}

.cube-face-front {
	transform: translate3d(0, 0, 50px);
}

.cube-face-top {
	transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.cube-face-bottom {
	transform: rotateX(-90deg) translate3d(0, 0, 50px);
}

.cube-face-left {
	transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.cube-face-right {
	transform: rotateY(90deg) translate3d(0, 0, 50px);
}

.cube-face-back {
	transform: rotateY(180deg) translate3d(0, 0, 50px);
}

/* image sides */
.cube-face {
	background: url(img/64_64_dice.jpg);
	background-size: 600%;
}

.cube-face-front {
	background-position: 0% 0%;
}

.cube-face-left {
	background-position: 20% 0%;
}

.cube-face-right {
	background-position: 40% 0%;
}

.cube-face-top {
	background-position: 60% 0%;
}

.cube-face-bottom {
	background-position: 80% 0%;
}

.cube-face-back {
	background-position: 100% 0%;
}

/* controls */



#radio-back:checked ~ .cube-scene .shape {
	transform: rotateY(180deg) rotateX(-15deg);
}

#radio-left:checked ~ .cube-scene .shape {
	transform: rotateY(90deg);
}

#radio-right:checked ~ .cube-scene .shape {
	transform: rotateY(-90deg);
}

#radio-top:checked ~ .cube-scene .shape {
	transform: rotateX(-90deg);
}

#radio-bottom:checked ~ .cube-scene .shape {
	transform: rotateX(90deg);
}

/* Cilinder css */

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ 

.face {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}



.scene, .shape, .face, .face-wrapper, .cr {
	transform-style: preserve-3d;
}

.face, .face-wrapper, .cr {
	position: absolute;	
}

.scene {
	width: 80em;
	height: 80em;
	top: 50%;
	left: 50%;
	margin: -40em 0 0 -40em;
	perspective: 800px;
}

.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
  transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: rotateX(-15deg) rotateY(15deg);
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .cyl-1 styles */
.cyl-1 {
  /*transform:translate3D(0em, 0.125em, 0.125em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);*/
  opacity:1;
  width:6em;
  height:2.75em;
  margin:-1.375em 0 0 -3em;
}
.cyl-1 .tp, .cyl-1 .bm {
  width:6em;
  height:6em;
}
.cyl-1 .side {
  width:1.3944608463408996em;
  height:2.75em;
}
.cyl-1 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .face, .cyl-1 .side {
  background-color:red;
}
.cyl-1 .tp {
  background-color:red;
}

/* Pulse scale */

         
@keyframes pulsescale_anim {
            0% {transform: scale(1.0);}
            50% { 
            transform: scale(1.1);   
            }
            100% {transform: scale(1.0);}
}
         
.pulsescale {
	animation: pulsescale_anim 2s infinite;
}

.scorenumber {
    font-size: 1em;
    font-weight: bold;
    color: maroon;
    text-shadow: 1px 0 1px #fff, 0 -1px 1px #fff, 0 1px 1px #fff, -1px 0 1px #fff;
    
    position: absolute;
	z-index: 100;
    transition: transform 0.5s ease-in-out;
}

.tmp_obj {
	position: absolute;
	z-index: 100;
    transition: transform 0.5s ease-in-out;
}

.scorenumber_anim {
    transform: translateY(-50px) rotate(-360deg) scale(3);
    transition: transform 0.5s ease-in-out;
}

.vapor_anim {
    transform: translateY(-100px) scale(1.5) ;
    transition: transform 2s ease-out
}


/** Scrollable area **/

#map_container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    
    border: solid yellow;
    margin-top: 10px;
    margin-left: 500px;
    width: 300px;
}

.map_scrollable_layer {
    position: absolute;
    min-height: 100px;
    min-width: 100px;
}
.map_scrollable_oversurface{
	background-color: #98d7dae8;
}
.map_scrollable{
	background-color: #525e62;
}
.map_surface {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    cursor: move;
}
.map_scrollable_oversurface{
	pointer-events: none;
}
.map_scrollable_oversurface > *{
	pointer-events: initial;
}

/** Move arrows **/

.movetop,.moveleft,.moveright,.movedown {
    display: block;
    position: absolute;
    background-image: url('../../../img/common/arrows.png');
    width: 32px;
    height: 32px;
}

.movetop {
    top: 0px;
    left: calc(50% - 32px / 2);
    background-position: 0px 32px;
}
.moveleft {
    top: calc(50% - 32px / 2);
    left: 0px;
    background-position: 32px 0px;
}
.moveright {
    top: calc(50% - 32px / 2);
    right: 0px;
    background-position: 0px 0px;
}
.movedown {
    bottom: 0px;
    left: calc(50% - 32px / 2);
    
    background-position: 32px 32px;
}

/* flexbox*/

.card_x {
	background-color: white;
	width: 64px;
	height: 73px;
	transition: all 0.5s;
}
.cards-flexbox {
	width: 400px;
	height: 200px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	outline: green 1px solid;
}
.abszone {
	width: 400px;
	height: 200px;
	outline: red 1px solid;
	position: relative;
	padding: 10px;
}
.abszone > * {
	margin-top: 20px;
}
.gray {
	background-color: gray;
}
.purple {
	background-color: purple;
}
.red {
	background-color: red;
}
.blue {
	background-color: blue;
}