server/www/game.css

202 lines
2.9 KiB
CSS
Raw Normal View History

#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% 1300%;
display: inline-block;
border-radius: 0.5em;
border: 1px solid #555;
width: 4.5em;
height: 7em;
float: left;
margin: 0.5em;
background-position: 0% 100%; /* back of the card */
}
#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: 8.3%;
}
#game .card.month2 {
background-position-y: 16.7%;
}
#game .card.month3 {
background-position-y: 25%;
}
#game .card.month4 {
background-position-y: 33.3%;
}
#game .card.month5 {
background-position-y: 41.7%;
}
#game .card.month6 {
background-position-y: 50%;
}
#game .card.month7 {
background-position-y: 58.3%;
}
#game .card.month8 {
background-position-y: 66.7%;
}
#game .card.month9 {
background-position-y: 75%;
}
#game .card.month10 {
background-position-y: 83.3%;
}
#game .card.month11 {
background-position-y: 91.7%;
}
#game .card.slot {
background: none;
border: 1px solid transparent;
}
#game .card.moving {
position: relative;
transition-property: left, top;
transition-duration: 1s;
}
#game #rest {
margin: 0;
}
#rest.init, #rest.count24 {
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 6px 9px 0 0 #555;
}
#rest.count22 {
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5.5px 8.3px 0 0 #555;
}
#rest.count20 {
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5px 7.5px 0 0 #555;
}
#rest.count18 {
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 4.5px 6.8px 0 0 #555;
}
#rest.count16 {
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555;
}
#rest.count14 {
box-shadow: 2px 3px 0 0 #555, 3.5px 5.3px 0 0 #555;
}
#rest.count12 {
box-shadow: 2px 3px 0 0 #555, 3px 4.5px 0 0 #555;
}
#rest.count10 {
box-shadow: 2px 3px 0 0 #555, 2.5px 3.8px 0 0 #555;
}
#rest.count8 {
box-shadow: 2px 3px 0 0 #555;
}
#game #turned {
margin: -0.1em 0 0 -4.75em;
}
#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;
2018-05-26 11:11:38 +02:00
margin: 0 0 0 3.5em;
padding: 0;
float: right;
2018-05-26 11:11:38 +02:00
position: relative;
top: 50%;
transform: translateY(-50%);
}
#game ul#deck {
float: left;
}
2018-05-26 11:11:38 +02:00
#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 {
2018-05-26 11:11:38 +02:00
margin-left: -3.5em;
}
#game .hand {
margin-left: 0;
float: left;
}
#game .hand .card {
2018-05-26 11:11:38 +02:00
margin: 0.5em 0.1em;
}