exciting-aftermath/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css

124 lines
1.7 KiB
CSS

.five-percent {
width: 5%;
}
.ten-percent {
width: 10%;
}
.tableFixHead {
overflow: auto;
height: 600px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
z-index: 10;
}
.pokemon-name-style {
cursor:pointer;
font-size: 1.3rem;
}
.flip-container {
perspective: 1000px;
display: inline-block;
width: 90px;
height: 90px;
cursor: pointer;
}
.flipper {
transition: transform 0.6s;
transform-style: preserve-3d;
width: 100%;
height: 100%;
position: relative;
}
.flipped {
transform: rotateY(180deg);
}
.flip-container-sm {
perspective: 1000px;
width: 64px;
height: 64px;
}
.flipper-sm {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.flipper-sm img {
backface-visibility: hidden;
position: absolute;
width: 64px;
height: 64px;
}
.flipper-sm .front {
z-index: 2;
}
.flipper-sm .back {
transform: rotateY(180deg);
}
.flipper-sm.flipped {
transform: rotateY(180deg);
}
.pokeimage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}
.badge {
width: 100px;
height: 30px;
color: white;
padding: 4px 8px;
text-align: center;
vertical-align: middle;
border-radius: 30px;
}
.statText {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
cursor: default;
}