54 lines
1.1 KiB
CSS
54 lines
1.1 KiB
CSS
.pyramid-board {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.pyramid-layout {
|
|
position: relative;
|
|
width: 100%;
|
|
/* 7 rows * (card height * overlap) + last card height */
|
|
height: calc(var(--card-height) + (6 * (var(--card-height) * 0.45)));
|
|
margin-bottom: 40px;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.pyramid-bottom-piles {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
gap: 100px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.discard-pile-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.pyramid-layout .card {
|
|
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
z-index: 100;
|
|
}
|
|
|
|
.card.is-selected {
|
|
outline: 4px solid var(--glow);
|
|
box-shadow: 0 0 20px var(--glow);
|
|
transform: scale(1.05) translateY(-5px);
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
/* Specific to Pyramid Card layout */
|
|
.pyramid-card {
|
|
/* These will be overridden by inline styles from pyramid.js */
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.pyramid-bottom-piles {
|
|
gap: 40px;
|
|
}
|
|
}
|