Template:Actions/styles.css
Jump to navigation
Jump to search
.actions-nav .simple-list {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 0.4em;
}
.flip-card, .flip-card-static {
background-color: transparent;
width: 75px;
height: 126px;
perspective: 1000px;
}
.flip-card-static .flip-card-front {
transform: rotateY(180deg);
}
.flip-card-static .flip-card-back {
transform: rotateY(0deg);
}
.flip-card-static .flip-card-back a {
user-select: none;
color: #333 !important;
font-weight: normal;
}
.flip-card-static:hover .flip-card-inner {
transform: rotateY(180deg) translateY(-4px);
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: 250ms;
transform-style: preserve-3d;
}
.flip-card-front img {
width: 75px;
height: 126px;
object-fit: cover;
object-position: top;
border-radius: 3px;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg) translateY(-4px);
}
.flip-card:active .flip-card-back {
background-color: #FCE4EC;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 3px;
backface-visibility: hidden;
}
.flip-card-front {
background: transparent;
}
.flip-card-back {
display: flex;
justify-content: center;
align-items: center;
background-color: #fffaf7;
box-shadow: inset 0 0 0 2px #333;
color: white;
transform: rotateY(180deg);
overflow: hidden;
}
.flip-card-back a {
color: #333;
text-decoration: none;
font-family: Bookman Old Style, Georgia, serif;
flex: 1 1 auto;
width: 75px;
padding: 63px 0;
}