Template:Actions/styles.css

From Uncyclopedia, the content-free encyclopedia
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;
}