From ab41797e57caea0fae4fb5b7d915b16586878cbf Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Sun, 29 Mar 2026 00:48:19 -0400 Subject: [PATCH] refined styling for #id_tray & .table-hex, which now mirror ea. other visually as parts of a befelted table --- src/static_src/scss/_room.scss | 62 ++++++++++++++++++++------ src/templates/apps/gameboard/room.html | 2 + 2 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss index 1e247b8..7951018 100644 --- a/src/static_src/scss/_room.scss +++ b/src/static_src/scss/_room.scss @@ -367,13 +367,43 @@ $seat-r-y: round($seat-r * 0.5); // 65px min-height: 300px; } +// Hex border: clip-path clips CSS borders, so the ring is a wrapper with the +// same hex polygon at a slightly larger size. 0.25rem each side — subtle only. +.table-hex-border { + width: calc(160px + 0.5rem); + height: calc(185px + 0.5rem); + clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); + background: rgba(var(--quaUser), 1); + filter: drop-shadow(0 0 6px rgba(var(--quaUser), 0.5)); + display: flex; + align-items: center; + justify-content: center; +} + .table-hex { width: 160px; height: 185px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - background: rgba(var(--duoUser), 1); - // box-shadow is clipped by clip-path; use filter instead - filter: drop-shadow(0 0 8px rgba(var(--duoUser), 1)); + // Six gradients — one per hex face — each perpendicular to that face so the + // shadows follow the hex geometry rather than the rectangular bounding box. + // CSS angle convention: 0°=up, 90°=right. Shadow goes FROM face INWARD. + // Left face → 90° Right face → 270° + // Top-left face → 150° Top-right face → 210° + // Bottom-left face → 30° Bottom-right face→ 330° + background: + linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, transparent 15%), + linear-gradient(90deg, rgba(var(--quaUser), 0.1) 0%, transparent 15%), + linear-gradient(270deg, rgba(0, 0, 0, 0.2) 0%, transparent 15%), + linear-gradient(270deg, rgba(var(--quaUser), 0.1) 0%, transparent 15%), + linear-gradient(210deg, rgba(0, 0, 0, 0.2) 0%, transparent 15%), + linear-gradient(210deg, rgba(var(--quaUser), 0.1) 0%, transparent 15%), + linear-gradient(150deg, rgba(0, 0, 0, 0.2) 0%, transparent 15%), + linear-gradient(150deg, rgba(var(--quaUser), 0.1) 0%, transparent 15%), + linear-gradient(30deg, rgba(0, 0, 0, 0.2) 0%, transparent 15%), + linear-gradient(30deg, rgba(var(--quaUser), 0.1) 0%, transparent 15%), + linear-gradient(330deg, rgba(0, 0, 0, 0.2) 0%, transparent 15%), + linear-gradient(330deg, rgba(var(--quaUser), 0.1) 0%, transparent 15%), + rgba(var(--duoUser), 1); display: flex; align-items: center; justify-content: center; @@ -888,11 +918,14 @@ $handle-r: 1rem; border-top: 2.5rem solid rgba(var(--quaUser), 1); border-bottom: 2.5rem solid rgba(var(--quaUser), 1); box-shadow: - -0.25rem 0 0.5rem rgba(0, 0, 0, 0.75), - inset 0 0 0 0.12rem rgba(255, 255, 255, 0.12), // bright bevel ring at wall edge - inset 0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 0.45), // left wall depth - inset 0 0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3), // top wall depth - inset 0 -0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3) // bottom wall depth + -0.25rem 0 0.5rem rgba(0, 0, 0, 0.55), + inset 0 0 0 0.3rem rgba(var(--quiUser), 0.45), // prominent bevel ring at wall edge + inset 0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 1), // left wall depth + inset 0.6rem 0 1.5rem -0.5rem rgba(var(--quaUser), 0.5), // left wall depth (hue) + inset 0 0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 1), // top wall depth + inset 0 0.6rem 1.5rem -0.5rem rgba(var(--quaUser), 0.5), // top wall depth (hue) + inset 0 -0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 1), // bottom wall depth + inset 0 -0.6rem 1.5rem -0.5rem rgba(var(--quaUser), 0.5) // bottom wall depth (hue) ; overflow-y: auto; max-height: 85vh; // cap on very tall portrait screens @@ -964,11 +997,14 @@ $handle-r: 1rem; align-self: center; box-shadow: - 0 0.25rem 0.5rem rgba(0, 0, 0, 0.75), // outer shadow (downward, below tray toward handle) - inset 0 0 0 0.12rem rgba(255, 255, 255, 0.12), // bright bevel ring - inset 0 -0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 0.45), // bottom wall depth (inward from bottom border) - inset 0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 0.3), // left wall depth - inset -0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 0.3) // right wall depth + 0 0.25rem 0.5rem rgba(0, 0, 0, 0.55), + inset 0 0 0 0.3rem rgba(var(--quiUser), 0.45), // prominent bevel ring + inset 0 -0.6rem 1.5rem -0.5rem rgba(0, 0, 0, 1), // bottom wall depth + inset 0 -0.6rem 1.5rem -0.5rem rgba(var(--quaUser), 0.5), // bottom wall depth (hue) + inset 0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 1), // left wall depth + inset 0.6rem 0 1.5rem -0.5rem rgba(var(--quaUser), 0.5), // left wall depth (hue) + inset -0.6rem 0 1.5rem -0.5rem rgba(0, 0, 0, 1), // right wall depth + inset -0.6rem 0 1.5rem -0.5rem rgba(var(--quaUser), 0.5) // right wall depth (hue) ; min-height: 2000px; // give tray real height so JS offsetHeight > 0 } diff --git a/src/templates/apps/gameboard/room.html b/src/templates/apps/gameboard/room.html index 1f24758..fc0014b 100644 --- a/src/templates/apps/gameboard/room.html +++ b/src/templates/apps/gameboard/room.html @@ -9,6 +9,7 @@ {% if room.table_status %}data-select-role-url="{% url 'epic:select_role' room.id %}"{% endif %}>
+
{% if room.table_status == "ROLE_SELECT" and card_stack_state %} @@ -22,6 +23,7 @@ {% endif %}
+
{% if room.table_status == "SIG_SELECT" and sig_seats %} {% for seat in sig_seats %}