discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refined styling for #id_tray & .table-hex, which now mirror ea. other visually as parts of a befelted table
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Disco DeDisco
2026-03-29 00:48:19 -04:00
parent e35855f472
commit ab41797e57
2 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/static_src/scss/_room.scss
View File

@@ -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
}

2
src/templates/apps/gameboard/room.html
View File

@@ -9,6 +9,7 @@
{% if room.table_status %}data-select-role-url="{% url 'epic:select_role' room.id %}"{% endif %}>
<div class="room-shell">
<div id="id_game_table" class="room-table">
<div class="table-hex-border">
<div class="table-hex">
<div class="table-center">
{% if room.table_status == "ROLE_SELECT" and card_stack_state %}
@@ -22,6 +23,7 @@
{% endif %}
</div>
</div>
</div>
{% if room.table_status == "SIG_SELECT" and sig_seats %}
{% for seat in sig_seats %}
<div class="table-seat{% if seat == sig_active_seat %} active{% endif %}" data-role="{{ seat.role }}" data-slot="{{ seat.slot_number }}">