146 lines
2.0 KiB
CSS
146 lines
2.0 KiB
CSS
#game > div {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#them {
|
|
top: 0;
|
|
bottom: 75%;
|
|
}
|
|
|
|
#table {
|
|
top: 25%;
|
|
bottom: 25%;
|
|
}
|
|
|
|
#you {
|
|
top: 75%;
|
|
bottom: 0;
|
|
}
|
|
|
|
#game .card {
|
|
background: url("/cards.jpg") no-repeat;
|
|
background-size: 400% 1200%;
|
|
display: inline-block;
|
|
border-radius: 0.5em;
|
|
border: 1px solid #555;
|
|
width: 4.5em;
|
|
height: 7em;
|
|
float: left;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
#game .card.value0 {
|
|
background-position-x: 0%;
|
|
}
|
|
|
|
#game .card.value1 {
|
|
background-position-x: 33.3%;
|
|
}
|
|
|
|
#game .card.value2 {
|
|
background-position-x: 66.7%;
|
|
}
|
|
|
|
#game .card.value3 {
|
|
background-position-x: 100%;
|
|
}
|
|
|
|
#game .card.month0 {
|
|
background-position-y: 0%;
|
|
}
|
|
|
|
#game .card.month1 {
|
|
background-position-y: 9.1%;
|
|
}
|
|
|
|
#game .card.month2 {
|
|
background-position-y: 18.2%;
|
|
}
|
|
|
|
#game .card.month3 {
|
|
background-position-y: 27.3%;
|
|
}
|
|
|
|
#game .card.month4 {
|
|
background-position-y: 36.4%;
|
|
}
|
|
|
|
#game .card.month5 {
|
|
background-position-y: 45.5%;
|
|
}
|
|
|
|
#game .card.month6 {
|
|
background-position-y: 54.5%;
|
|
}
|
|
|
|
#game .card.month7 {
|
|
background-position-y: 63.6%;
|
|
}
|
|
|
|
#game .card.month8 {
|
|
background-position-y: 72.7%;
|
|
}
|
|
|
|
#game .card.month9 {
|
|
background-position-y: 81.8%;
|
|
}
|
|
|
|
#game .card.month10 {
|
|
background-position-y: 90.9%;
|
|
}
|
|
|
|
#game .card.month11 {
|
|
background-position-y: 100%;
|
|
}
|
|
|
|
#turned.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#river li.card.candidate, #you .hand.yourTurn li.card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#river li.card.candidate {
|
|
box-shadow: 0 0 0.5em 0.1em #fc0;
|
|
}
|
|
|
|
#you .hand li.card.selected {
|
|
margin-top: -1em;
|
|
}
|
|
|
|
#game ul {
|
|
display: inline-block;
|
|
margin: 0 0 0 3.5em;
|
|
padding: 0;
|
|
float: right;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
#game ul#river {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
margin-left: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
#them .card, #you .card {
|
|
margin-left: -3.5em;
|
|
}
|
|
|
|
#game #you .hand {
|
|
margin-left: 0;
|
|
float: left;
|
|
}
|
|
|
|
#you .hand .card {
|
|
margin: 0.5em 0.1em;
|
|
}
|