79 lines
1.7 KiB
CSS
79 lines
1.7 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-layout .card {
|
|
position: absolute; /* Essential for correct placement in layout */
|
|
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
z-index: 100;
|
|
}
|
|
|
|
.pyramid-layout .card:not(.is-exposed) {
|
|
filter: brightness(0.9) grayscale(0.2);
|
|
}
|
|
|
|
.pyramid-bottom-piles {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
gap: 80px;
|
|
align-items: flex-start;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Make stock look like a stack */
|
|
#pyramid-stock::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px solid var(--line);
|
|
border-radius: var(--card-radius);
|
|
z-index: -1;
|
|
background: var(--card-bg);
|
|
}
|
|
|
|
#pyramid-stock:empty::before {
|
|
content: '↺';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 32px;
|
|
opacity: 0.3;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|