44r0n7/deepgrain-foundry
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build menu: hover popup with full info, top-left card hidden while building

Browse Source 
The short description row became a status row for the selected piece
(variant, Replace, ghosts, messages). Gamepad shows the selected tile's popup.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
44r0n7
2026-10-23 19:21:23 -04:00
co-authored by Claude Opus 5.5
parent caa2463fda
commit fec4f3bfe1
8 changed files with 96 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/style.css
+13 -2
View File
@@ -61,8 +61,17 @@ canvas#game.nocursor { cursor: none; }
.bb-tile:hover { border-color: var(--soot-4); background: #2a2521; }
.bb-tile.on { border-color: var(--melt); background: linear-gradient(180deg, #3a2a1d, #2a201a); box-shadow: 0 0 0 1px rgba(255, 154, 60, 0.35), 0 0 14px rgba(255, 154, 60, 0.22); }
.bb-tile.on svg { color: var(--melt-hot); }
#buildbar .bb-tip { font-size: 0.82em; line-height: 1.35; color: var(--ash); min-height: 1.35em; }
#buildbar .bb-tip b { color: var(--bone); font-weight: 600; }
#buildbar { position: relative; }
.bb-menu { display: flex; flex-direction: column; gap: 6px; }
.bb-status { display: flex; align-items: center; gap: 4px; min-height: 1.4em; overflow-x: auto; }
.bb-status .sw { flex-shrink: 0; }
#bb-pop { position: absolute; bottom: calc(100% + 8px); width: min(calc(300px * var(--ui)), calc(100vw - 32px)); box-sizing: border-box; padding: calc(10px * var(--ui)); display: flex; flex-direction: column; gap: 8px; background: var(--plate); border: 1px solid var(--soot-3); border-radius: 5px; box-shadow: 0 4px 18px #0008; color: var(--bone); pointer-events: none; }
.bb-title { display: flex; align-items: center; gap: 8px; }
.bb-title svg { width: calc(26px * var(--ui)); height: calc(26px * var(--ui)); color: var(--melt-hot); flex-shrink: 0; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bb-desc { font-size: 0.88em; }
.bb-place { color: var(--ash); font-size: 0.82em; }
.bb-place b { display: block; color: var(--bone); margin-bottom: 3px; }
#ovbadges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ovbadge { --ov: 92, 186, 166; display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 11px; border-radius: 999px; background: rgba(12, 13, 16, 0.86); border: 1px solid rgba(var(--ov), 0.75); color: rgb(var(--ov)); font-weight: 650; font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.ovbadge.lens { --ov: 255, 160, 90; }
@@ -338,3 +347,5 @@ input.text { background: var(--soot-0); border: 1px solid var(--soot-4); border-
#baglist .mixrow .pick { gap: 6px; }
#baglist .mixsw { display: flex; gap: 1px; flex: none; }
#baglist .mixsw .sw { width: 7px; height: 14px; border-radius: 1px; }
@media (max-width: 1100px) { #hud.building .br { bottom: calc(160px * var(--ui)); } }