woggioni
322ca27bf4
The call picker stacked the four 120px cards vertically, making the
dialog about 780px tall, and the overlay centered its content with no
scroll fallback. On typical laptop window heights that pushed the title
and options off-screen (the heading sat at y=-110 on a 560px viewport),
leaving what looked like a free-floating selection with no explanation
and no way to scroll.
Make dialogs scroll instead of clipping: the overlay scrolls and the
panel centers with `margin: auto`, which keeps every modal (the capture
picker and the scoring summaries too) centered when it fits and
reachable when it does not. Lay the call options out in a compact grid
(four across, 2x2 on phones) with 84px cards, name the won rank in the
title ("You won with the Re - name the card") and label each option
"Partner" or "Plays alone" so the choice reads at a glance.
874 lines
15 KiB
CSS
874 lines
15 KiB
CSS
/* tavolo frontend — game tables, cards and scoring summaries.
|
|
*
|
|
* The felt palette and the Bootstrap theme overrides live in theme.css,
|
|
* which is loaded before this file. */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
|
|
.app {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ---------- shared chrome ---------- */
|
|
|
|
.app-toast {
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--danger);
|
|
color: #fff;
|
|
padding: 0.6rem 1.2rem;
|
|
border-radius: 8px;
|
|
z-index: 30;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ---------- game table ---------- */
|
|
|
|
.hud {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem 1.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.6rem 1rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.hud a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hud-scores {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.turn-note {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.turn-note.you {
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.turn-timer {
|
|
color: var(--muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.table-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.table-grid {
|
|
flex: 1;
|
|
display: grid;
|
|
/* minmax(0, …) lets the tracks shrink below their content's
|
|
* min-content width; without it the center's move banner and the
|
|
* seat panels push the grid wider than the screen on phones. */
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr);
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-areas:
|
|
". top ."
|
|
"left center right"
|
|
"bottom bottom bottom";
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.seat-top {
|
|
grid-area: top;
|
|
}
|
|
|
|
.seat-left {
|
|
grid-area: left;
|
|
}
|
|
|
|
.seat-right {
|
|
grid-area: right;
|
|
}
|
|
|
|
.seat-bottom {
|
|
grid-area: bottom;
|
|
text-align: center;
|
|
}
|
|
|
|
.seat {
|
|
background: var(--panel);
|
|
border: 2px solid transparent;
|
|
border-radius: 10px;
|
|
padding: 0.5rem 0.75rem;
|
|
text-align: center;
|
|
/* Fixed height keeps the table from jumping as cards are played. */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
min-height: 116px;
|
|
min-width: 0;
|
|
align-self: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.seat.active {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 12px rgba(232, 197, 71, 0.45);
|
|
}
|
|
|
|
.seat-name {
|
|
font-weight: 600;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.15rem 0.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.team-badge {
|
|
font-size: 0.7rem;
|
|
background: var(--panel-light);
|
|
border-radius: 4px;
|
|
padding: 0.1rem 0.35rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* Opponents' hidden hands: a tidy grid so the count reads at a glance. */
|
|
.seat-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, auto);
|
|
gap: 2px;
|
|
justify-content: center;
|
|
margin: 0.35rem 0;
|
|
}
|
|
|
|
.seat-stats {
|
|
font-size: 0.8rem;
|
|
color: var(--muted);
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* The viewer's own stats sit above the hand; no flex context here. */
|
|
.seat-bottom .seat-stats {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.center {
|
|
grid-area: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
min-height: 230px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.table-cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
justify-content: center;
|
|
min-height: 90px;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-empty {
|
|
color: var(--muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ---------- cards ---------- */
|
|
|
|
.playing-card {
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
|
|
background: #fff;
|
|
user-select: none;
|
|
}
|
|
|
|
.playing-card.mini {
|
|
height: 34px;
|
|
}
|
|
|
|
.playing-card.move-card {
|
|
height: 54px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.playing-card.table-card {
|
|
height: 84px;
|
|
}
|
|
|
|
.playing-card.hand-card {
|
|
height: 120px;
|
|
}
|
|
|
|
.hand {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
min-height: 132px;
|
|
}
|
|
|
|
.hand-slot {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.hand-slot:hover {
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.hand-slot.selected {
|
|
outline: 3px solid var(--accent);
|
|
border-radius: 8px;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
/* ---------- move banner ---------- */
|
|
|
|
.move-banner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.4rem;
|
|
max-width: 100%;
|
|
background: rgba(0, 0, 0, 0.35);
|
|
border-radius: 999px;
|
|
padding: 0.35rem 1rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.scopa-badge {
|
|
background: var(--accent);
|
|
color: #1d1d1d;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.15rem 0.6rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.pigliatutto-badge {
|
|
background: var(--danger, #d9534f);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.15rem 0.6rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.spectator-badge {
|
|
background: var(--panel-light);
|
|
color: var(--muted);
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.15rem 0.6rem;
|
|
border: 1px solid var(--muted);
|
|
}
|
|
|
|
/* ---------- overlays ---------- */
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.65);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
/* Tall dialogs (the chiamata call picker, the scoring summaries) can
|
|
* exceed short windows: allow scrolling instead of clipping them. */
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
z-index: 20;
|
|
}
|
|
|
|
.picker {
|
|
background: var(--panel);
|
|
border-radius: 14px;
|
|
padding: 1.5rem 2rem;
|
|
text-align: center;
|
|
/* Centers the dialog when it fits and keeps it reachable (top
|
|
* aligned, scrollable via the overlay) when it does not. */
|
|
margin: auto;
|
|
min-width: min(320px, calc(100vw - 3rem));
|
|
max-width: calc(100vw - 3rem);
|
|
}
|
|
|
|
.capture-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.capture-option {
|
|
background: var(--panel-light);
|
|
border: 1px solid #4c6a54;
|
|
border-radius: 10px;
|
|
padding: 0.4rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.capture-option:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.gameover-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* ---------- hand-end scoring summary ---------- */
|
|
|
|
.summary-panel {
|
|
min-width: min(420px, calc(100vw - 1.5rem));
|
|
max-width: min(560px, calc(100vw - 1.5rem));
|
|
text-align: left;
|
|
}
|
|
|
|
.summary-panel h2 {
|
|
text-align: center;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.score-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.score-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
background: var(--panel-light);
|
|
border-left: 4px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 0.45rem 0.75rem;
|
|
}
|
|
|
|
.score-row.team-a {
|
|
border-left-color: var(--team-a);
|
|
}
|
|
|
|
.score-row.team-b {
|
|
border-left-color: var(--team-b);
|
|
}
|
|
|
|
.score-row.tie {
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.score-icon {
|
|
width: 32px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.playing-card.score-mini {
|
|
height: 38px;
|
|
}
|
|
|
|
.score-body {
|
|
flex: 1;
|
|
}
|
|
|
|
.score-title {
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.score-text {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.score-points {
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.score-row.team-a .score-points {
|
|
color: var(--team-a);
|
|
}
|
|
|
|
.score-row.team-b .score-points {
|
|
color: var(--team-b);
|
|
}
|
|
|
|
.totals {
|
|
margin: 1rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.total-row {
|
|
display: grid;
|
|
grid-template-columns: 4.5rem 1fr 4rem;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.total-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.total-value {
|
|
font-weight: 700;
|
|
text-align: right;
|
|
}
|
|
|
|
.gained {
|
|
margin-left: 0.35rem;
|
|
font-size: 0.85rem;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.total-row.team-a .gained {
|
|
color: var(--team-a);
|
|
}
|
|
|
|
.total-row.team-b .gained {
|
|
color: var(--team-b);
|
|
}
|
|
|
|
.progress {
|
|
height: 10px;
|
|
background: rgba(0, 0, 0, 0.35);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.total-row.team-a .progress-fill {
|
|
background: var(--team-a);
|
|
}
|
|
|
|
.total-row.team-b .progress-fill {
|
|
background: var(--team-b);
|
|
}
|
|
|
|
.summary-actions {
|
|
text-align: center;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.final-score {
|
|
text-align: center;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ---------- briscola ---------- */
|
|
|
|
.briscola-badge {
|
|
background: var(--panel-light);
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.15rem 0.6rem;
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
/* The face-down stock with the face-up trump card beside it. */
|
|
.stock {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.stock-pile {
|
|
display: flex;
|
|
}
|
|
|
|
.playing-card.stock-card {
|
|
height: 48px;
|
|
margin-left: -18px;
|
|
}
|
|
|
|
.playing-card.stock-card:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.playing-card.briscola-card {
|
|
height: 64px;
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.stock-count {
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Current-trick cards with the player's name above each. */
|
|
.trick-slot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.trick-name {
|
|
font-size: 0.7rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* Two-player table: opponent on top, player at the bottom. */
|
|
.table-grid.duo {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-areas:
|
|
"top"
|
|
"center"
|
|
"bottom";
|
|
}
|
|
|
|
/* ---------- phones ---------- */
|
|
|
|
@media (max-width: 576px) {
|
|
.hud {
|
|
gap: 0.3rem 0.75rem;
|
|
padding: 0.45rem 0.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.table-grid {
|
|
gap: 0.35rem;
|
|
padding: 0.4rem;
|
|
}
|
|
|
|
.seat {
|
|
min-height: 92px;
|
|
padding: 0.35rem 0.4rem;
|
|
}
|
|
|
|
.seat-name {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.team-badge {
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.seat-stats {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
/* Flex-wrap lets the hidden-hand backs drop to the next row instead
|
|
* of forcing the seat wider than its track. */
|
|
.seat-cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
justify-content: center;
|
|
margin: 0.2rem 0;
|
|
}
|
|
|
|
.center {
|
|
min-height: 180px;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.move-banner {
|
|
font-size: 0.8rem;
|
|
padding: 0.25rem 0.6rem;
|
|
}
|
|
|
|
.playing-card.mini {
|
|
height: 26px;
|
|
}
|
|
|
|
.playing-card.table-card {
|
|
height: 62px;
|
|
}
|
|
|
|
.playing-card.move-card {
|
|
height: 42px;
|
|
}
|
|
|
|
.playing-card.hand-card {
|
|
height: 92px;
|
|
}
|
|
|
|
.hand {
|
|
min-height: 100px;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.stock {
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.playing-card.stock-card {
|
|
height: 38px;
|
|
margin-left: -12px;
|
|
}
|
|
|
|
.playing-card.briscola-card {
|
|
height: 50px;
|
|
}
|
|
|
|
.picker {
|
|
padding: 1rem 1.1rem;
|
|
}
|
|
|
|
.summary-panel h2 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.score-row {
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 0.5rem;
|
|
}
|
|
|
|
.score-text {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.score-icon {
|
|
width: 26px;
|
|
}
|
|
|
|
.playing-card.score-mini {
|
|
height: 30px;
|
|
}
|
|
|
|
.total-row {
|
|
grid-template-columns: 3.5rem 1fr 3.2rem;
|
|
gap: 0.4rem;
|
|
}
|
|
}
|
|
|
|
/* ---------- briscola chiamata ---------- */
|
|
|
|
/* Five seats: two across the top and one on each side of the viewer. */
|
|
.table-grid.cinque {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-areas:
|
|
"tl . tr"
|
|
"left center right"
|
|
"bottom bottom bottom";
|
|
}
|
|
|
|
.seat-tl {
|
|
grid-area: tl;
|
|
}
|
|
|
|
.seat-tr {
|
|
grid-area: tr;
|
|
}
|
|
|
|
.called-badge {
|
|
background: var(--panel-light);
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.15rem 0.6rem;
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
.role-badge {
|
|
background: var(--accent);
|
|
color: var(--felt-dark);
|
|
}
|
|
|
|
.reveal-banner {
|
|
background: rgba(232, 197, 71, 0.15);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 8px;
|
|
padding: 0.35rem 0.75rem;
|
|
}
|
|
|
|
.patta-banner {
|
|
background: rgba(217, 83, 79, 0.25);
|
|
}
|
|
|
|
/* The calling auction: standing bid, trail and the bid buttons. */
|
|
.auction-panel {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border-radius: 10px;
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
max-width: 32rem;
|
|
}
|
|
|
|
.auction-standing {
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.auction-history {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.auction-chip {
|
|
background: var(--panel-light);
|
|
color: var(--muted);
|
|
border-radius: 4px;
|
|
padding: 0.1rem 0.4rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.bid-options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bid-button {
|
|
background: var(--panel-light);
|
|
color: var(--text);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 6px;
|
|
padding: 0.25rem 0.6rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bid-button:hover {
|
|
background: var(--accent);
|
|
color: var(--felt-dark);
|
|
}
|
|
|
|
.bid-button.points {
|
|
border-color: var(--team-a);
|
|
}
|
|
|
|
.pass-button {
|
|
background: transparent;
|
|
color: var(--muted);
|
|
border: 1px solid var(--muted);
|
|
border-radius: 6px;
|
|
padding: 0.25rem 0.6rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pass-button:hover {
|
|
color: var(--text);
|
|
border-color: var(--text);
|
|
}
|
|
|
|
/* The auction winner's call picker: the four cards of the won rank,
|
|
* laid out in a compact grid so the dialog stays short. */
|
|
.call-picker {
|
|
max-width: min(34rem, calc(100vw - 3rem));
|
|
}
|
|
|
|
.call-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.5rem;
|
|
margin: 1rem 0 0;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.call-options {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.call-option {
|
|
background: var(--panel-light);
|
|
border: 1px solid #4c6a54;
|
|
border-radius: 10px;
|
|
padding: 0.4rem 0.3rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.call-option:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Smaller than a hand card: the picker must fit short laptop windows. */
|
|
.playing-card.call-card {
|
|
height: 84px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.call-label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
color: var(--text);
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.call-note {
|
|
display: block;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.call-note.partner {
|
|
color: var(--team-a);
|
|
}
|
|
|
|
.call-note.solo {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.chiamata-row .score-title {
|
|
color: var(--accent);
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.table-grid.cinque {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"tl tr"
|
|
"left right"
|
|
"center center"
|
|
"bottom bottom";
|
|
}
|
|
|
|
.auction-panel {
|
|
padding: 0.5rem;
|
|
max-width: 100%;
|
|
}
|
|
}
|