You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.8 KiB
87 lines
1.8 KiB
.flipper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(./bg.jpg);
|
|
background-size: cover;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-auto-rows: 22%;
|
|
grid-gap: 1.25%;
|
|
padding: 26.48148148148148% 16.34259259259259% 0 16.34259259259259%;
|
|
}
|
|
.flipper .tip {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
background: center / 65.83333333333333% no-repeat url("./tip.png"),
|
|
rgba(0, 0, 0, 0.6);
|
|
z-index: 1;
|
|
}
|
|
.flipper .meta {
|
|
position: absolute;
|
|
top: 16.6%;
|
|
font-family: flipper;
|
|
font-weight: bolder;
|
|
color: #4294dd;
|
|
}
|
|
.flipper .meta.l {
|
|
left: 33%;
|
|
}
|
|
.flipper .meta.r {
|
|
left: 76%;
|
|
}
|
|
.flipper.no-event {
|
|
pointer-events: none;
|
|
}
|
|
.flipper .card {
|
|
position: relative;
|
|
cursor: pointer;
|
|
-webkit-perspective: 700px;
|
|
perspective: 700px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.flipper .card.flipped,
|
|
.flipper .card.has-match {
|
|
pointer-events: none;
|
|
}
|
|
.flipper .card.flipped .back,
|
|
.flipper .card.has-match .back {
|
|
-webkit-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
}
|
|
.flipper .card.flipped .front,
|
|
.flipper .card.has-match .front {
|
|
-webkit-transform: rotateY(360deg);
|
|
transform: rotateY(360deg);
|
|
}
|
|
.flipper .card .back,
|
|
.flipper .card .front {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
transition: -webkit-transform 400ms;
|
|
transition: transform 400ms;
|
|
transition: transform 400ms, -webkit-transform 400ms;
|
|
}
|
|
.flipper .card .back {
|
|
z-index: 1;
|
|
background-image: url(./back.png);
|
|
background-size: cover;
|
|
}
|
|
.flipper .card .front {
|
|
-webkit-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
background-size: cover;
|
|
}
|
|
|