Major updates to the HUD and selectable objects
This commit is contained in:
parent
5bc757b385
commit
c100db52e5
23 changed files with 1615 additions and 614 deletions
|
|
@ -154,108 +154,255 @@
|
|||
}
|
||||
|
||||
/* ---- BOTTOM UI STRIP ---------------------------------------- */
|
||||
/* Five separate framed sections, left to right:
|
||||
1. Minimap — tall frame, 180w x 220h
|
||||
2. Portrait — short frame, 90w x 165h (bottom-aligned)
|
||||
3. Info Panel — short frame, 280w x 165h
|
||||
4. Tool Tip — short frame, 120w x 165h
|
||||
5. Action Menu — tall frame, 320w x 220h (hides via display:none
|
||||
when no actions are available for the selection)
|
||||
Sections sit on a transparent strip with 100px margins on each side; the
|
||||
3D scene shows through above and beside them. */
|
||||
|
||||
.bottom-ui {
|
||||
height: 110px;
|
||||
height: 220px; /* matches the tall sections */
|
||||
flex-shrink: 0;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
background-color: rgb(19, 15, 4);
|
||||
border-top-width: 2px;
|
||||
border-top-color: rgba(90, 74, 16, 1);
|
||||
align-items: flex-end; /* short sections hug the bottom */
|
||||
justify-content: flex-start;
|
||||
padding: 0 100px; /* margin on either side — the X regions */
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* Minimap — host container. MinimapView injects two stacked sub-elements
|
||||
(.minimap-terrain and .minimap-entities) at runtime. */
|
||||
.minimap {
|
||||
width: 110px;
|
||||
/* ----- Section 1: Minimap (tall) ----- */
|
||||
.minimap-frame {
|
||||
width: 180px;
|
||||
height: 220px;
|
||||
flex-shrink: 0;
|
||||
padding: 4px;
|
||||
background-color: rgb(35, 30, 15);
|
||||
border-width: 3px;
|
||||
border-color: rgb(120, 100, 50);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* MinimapView injects .minimap-terrain and .minimap-entities into this. */
|
||||
.minimap {
|
||||
flex: 1;
|
||||
background-color: rgb(8, 10, 12);
|
||||
border-right-width: 1px;
|
||||
border-right-color: rgba(42, 58, 26, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Static baked terrain. Background-image assigned by MinimapView. */
|
||||
.minimap-terrain {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
-unity-background-scale-mode: stretch-to-fill;
|
||||
}
|
||||
|
||||
/* Dynamic entity overlay. Drawn via Painter2D in generateVisualContent. */
|
||||
.minimap-entities {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
}
|
||||
|
||||
/* Portrait */
|
||||
.portrait-box {
|
||||
width: 84px;
|
||||
/* ----- Section 2: Portrait (short, bottom-aligned) ----- */
|
||||
.portrait-frame {
|
||||
width: 90px;
|
||||
height: 165px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
border-right-width: 1px;
|
||||
border-right-color: rgba(58, 48, 16, 1);
|
||||
padding: 6px;
|
||||
background-color: rgb(35, 30, 15);
|
||||
border-width: 2px;
|
||||
border-color: rgb(80, 65, 35);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.portrait-image {
|
||||
width: 58px;
|
||||
height: 72px;
|
||||
margin-bottom: 3px;
|
||||
width: 74px;
|
||||
height: 110px;
|
||||
background-color: rgb(13, 26, 13);
|
||||
border-width: 1px;
|
||||
border-color: rgba(58, 90, 58, 1);
|
||||
border-color: rgb(58, 90, 58);
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.level-label {
|
||||
font-size: 11px;
|
||||
color: rgb(220, 220, 200);
|
||||
-unity-text-align: upper-center;
|
||||
margin-top: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ----- Section 3: Info Panel (short, name + stat lines) ----- */
|
||||
.info-frame {
|
||||
width: 280px;
|
||||
height: 165px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
padding: 8px 10px;
|
||||
background-color: rgb(15, 15, 15);
|
||||
border-width: 2px;
|
||||
border-color: rgb(80, 65, 35);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.portrait-name {
|
||||
font-size: 9px;
|
||||
font-size: 14px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-text-align: upper-center;
|
||||
-unity-font-style: bold;
|
||||
-unity-text-align: upper-left;
|
||||
margin-bottom: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Command grid: 3 row-containers injected at runtime, each holding 4 buttons */
|
||||
.stat-lines {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-line {
|
||||
font-size: 11px;
|
||||
color: rgb(220, 220, 200);
|
||||
-unity-text-align: upper-left;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* Build-progress block — shown in the info panel only when a BuildSiteVisual
|
||||
is selected. Thin horizontal bar with a left-anchored fill, percent below. */
|
||||
.build-progress {
|
||||
flex-direction: column;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.build-progress-bg {
|
||||
height: 10px;
|
||||
background-color: rgb(30, 30, 24);
|
||||
border-width: 1px;
|
||||
border-color: rgb(80, 65, 35);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* The fill is anchored to the LEFT side via absolute positioning + 0 right
|
||||
margin set in code (width is driven each frame from progress). Color is the
|
||||
same green family as the selection ring for visual consistency. */
|
||||
.build-progress-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
background-color: rgb(120, 220, 120);
|
||||
}
|
||||
|
||||
.build-progress-percent {
|
||||
font-size: 11px;
|
||||
color: rgb(220, 220, 200);
|
||||
-unity-text-align: upper-left;
|
||||
}
|
||||
|
||||
/* ----- Section 4: Tool Tip (short, hover-driven) ----- */
|
||||
.tooltip-frame {
|
||||
width: 120px;
|
||||
height: 165px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
padding: 8px;
|
||||
background-color: rgb(15, 15, 15);
|
||||
border-width: 2px;
|
||||
border-color: rgb(80, 65, 35);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tt-title {
|
||||
font-size: 12px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-font-style: bold;
|
||||
margin-bottom: 4px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-desc {
|
||||
font-size: 10px;
|
||||
color: rgb(170, 168, 144);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-stats {
|
||||
font-size: 10px;
|
||||
color: rgb(136, 170, 136);
|
||||
margin-top: 3px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-cost {
|
||||
font-size: 10px;
|
||||
color: rgb(255, 224, 102);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ----- Section 5: Action Menu (tall, hides when no actions are available) ----- */
|
||||
.action-frame {
|
||||
width: 320px;
|
||||
height: 220px;
|
||||
flex-shrink: 0;
|
||||
padding: 6px;
|
||||
background-color: rgb(35, 30, 15);
|
||||
border-width: 3px;
|
||||
border-color: rgb(120, 100, 50);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Command grid: 3 row-containers injected at runtime, each holding 5 buttons. */
|
||||
.command-grid {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.cmd-row {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
/* Individual command buttons */
|
||||
/* Button is the cell. The icon-placeholder fills the cell; hotkey and cost
|
||||
labels are absolute-positioned overlays in the top-left and bottom-left
|
||||
corners. (Name label was removed — name lives in the Tool Tip box on hover.) */
|
||||
.cmd-btn {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
padding: 3px;
|
||||
background-color: rgb(26, 26, 10);
|
||||
border-width: 1px;
|
||||
border-color: rgba(58, 58, 26, 1);
|
||||
border-color: rgb(58, 58, 26);
|
||||
border-radius: 3px;
|
||||
margin-right: 2px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
/* Icon area placeholder — replaced by background-image when art exists */
|
||||
/* Placeholder icon — flat grey square with embossed borders (light top/left,
|
||||
dark bottom/right) to suggest a raised 3D button. Swap for background-image
|
||||
when art exists. */
|
||||
.cmd-icon-placeholder {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
background-color: rgb(140, 140, 140);
|
||||
border-top-width: 2px;
|
||||
border-left-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-right-width: 2px;
|
||||
border-top-color: rgb(220, 220, 220);
|
||||
border-left-color: rgb(220, 220, 220);
|
||||
border-bottom-color: rgb(70, 70, 70);
|
||||
border-right-color: rgb(70, 70, 70);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
.cmd-btn:hover {
|
||||
background-color: rgb(42, 42, 21);
|
||||
border-color: rgba(106, 106, 48, 1);
|
||||
border-color: rgb(106, 106, 48);
|
||||
}
|
||||
|
||||
.cmd-btn.active {
|
||||
|
|
@ -271,87 +418,29 @@
|
|||
opacity: 0.12;
|
||||
}
|
||||
|
||||
.cmd-icon {
|
||||
font-size: 14px;
|
||||
-unity-text-align: upper-center;
|
||||
color: rgb(255, 255, 255);
|
||||
/* Icon is set as text on a Label; swap for background-image when art exists */
|
||||
}
|
||||
|
||||
.cmd-name {
|
||||
font-size: 7px;
|
||||
color: rgb(170, 170, 170);
|
||||
-unity-text-align: upper-center;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cmd-cost {
|
||||
font-size: 7px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-text-align: upper-center;
|
||||
}
|
||||
|
||||
/* Side column: Upgrade / (empty) / Sell */
|
||||
.side-col {
|
||||
width: 66px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
padding: 4px;
|
||||
border-left-width: 2px;
|
||||
border-left-color: rgba(58, 48, 16, 1);
|
||||
}
|
||||
|
||||
.side-col > * {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
.side-btn {
|
||||
flex: 1;
|
||||
/* inherits .cmd-btn styles */
|
||||
}
|
||||
|
||||
.side-empty {
|
||||
flex: 1;
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
/* Tooltip panel */
|
||||
.tooltip-box {
|
||||
width: 164px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
border-left-width: 1px;
|
||||
border-left-color: rgba(58, 48, 16, 1);
|
||||
}
|
||||
|
||||
.tt-title {
|
||||
/* Hotkey badge — top-left corner of the button, overlapping the icon. */
|
||||
.cmd-hotkey {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
font-size: 11px;
|
||||
color: rgb(255, 255, 255);
|
||||
-unity-font-style: bold;
|
||||
/* Drop-shadow-ish backdrop via semi-opaque text background for legibility. */
|
||||
background-color: rgba(0, 0, 0, 0.55);
|
||||
padding: 0 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Cost badge — bottom-left corner of the icon. */
|
||||
.cmd-cost {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 4px;
|
||||
font-size: 10px;
|
||||
color: rgb(255, 224, 102);
|
||||
-unity-font-style: bold;
|
||||
margin-bottom: 4px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-desc {
|
||||
font-size: 9px;
|
||||
color: rgb(170, 168, 144);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-stats {
|
||||
font-size: 9px;
|
||||
color: rgb(136, 170, 136);
|
||||
margin-top: 3px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tt-cost {
|
||||
font-size: 9px;
|
||||
color: rgb(255, 224, 102);
|
||||
margin-top: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.55);
|
||||
padding: 0 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue