446 lines
10 KiB
Text
446 lines
10 KiB
Text
/* ============================================================
|
|
HUD.uss — Match HUD stylesheet
|
|
Layout mirrors wintermaul_ui_v4.html; visual style is
|
|
placeholder and will be replaced in Phase 2.
|
|
============================================================ */
|
|
|
|
/* Root: covers full screen, transparent so the 3D scene shows through.
|
|
PickingMode.Ignore is set in C# so clicks in the map area reach the scene. */
|
|
.hud-root {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
flex-direction: column;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
/* ---- TOP BAR ------------------------------------------------ */
|
|
|
|
.top-bar {
|
|
height: 28px;
|
|
flex-shrink: 0;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
background-color: rgba(22, 20, 10, 0.92);
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: rgba(90, 80, 32, 1);
|
|
}
|
|
|
|
.res-group {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.gold-label,
|
|
.income-label,
|
|
.wave-label,
|
|
.dimmed-label {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.top-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.gold-label {
|
|
color: rgb(255, 224, 102);
|
|
font-size: 12px;
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.income-label {
|
|
color: rgb(136, 204, 255);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.wave-label {
|
|
color: rgb(255, 170, 170);
|
|
font-size: 11px;
|
|
-unity-font-style: bold;
|
|
background-color: rgba(58, 26, 26, 0.85);
|
|
border-width: 1px;
|
|
border-color: rgba(138, 58, 58, 1);
|
|
border-radius: 3px;
|
|
padding: 1px 7px;
|
|
}
|
|
|
|
.dimmed-label {
|
|
color: rgb(136, 136, 136);
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ---- MAIN AREA ---------------------------------------------- */
|
|
|
|
.main-area {
|
|
flex: 1;
|
|
flex-direction: row;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Transparent viewport area. PickingMode set to Ignore in C#. */
|
|
.map-area {
|
|
flex: 1;
|
|
background-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
.rejection-label {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 0;
|
|
right: 0;
|
|
-unity-text-align: upper-center;
|
|
color: rgb(255, 90, 90);
|
|
font-size: 14px;
|
|
-unity-font-style: bold;
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
padding: 4px 14px;
|
|
border-radius: 4px;
|
|
display: none;
|
|
}
|
|
|
|
/* ---- RIGHT SCOREBOARD PANEL --------------------------------- */
|
|
|
|
.right-panel {
|
|
width: 130px;
|
|
flex-shrink: 0;
|
|
align-self: flex-start;
|
|
flex-direction: column;
|
|
background-color: rgb(22, 22, 16);
|
|
border-left-width: 1px;
|
|
border-left-color: rgba(58, 58, 32, 1);
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: rgba(58, 58, 32, 1);
|
|
border-radius: 0 0 0 3px;
|
|
}
|
|
|
|
.panel-header {
|
|
padding: 4px 6px;
|
|
font-size: 10px;
|
|
color: rgb(255, 224, 102);
|
|
-unity-font-style: bold;
|
|
-unity-text-align: upper-center;
|
|
background-color: rgb(42, 36, 16);
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: rgba(58, 58, 32, 1);
|
|
}
|
|
|
|
.section-label {
|
|
padding: 4px 6px 2px;
|
|
font-size: 9px;
|
|
color: rgb(102, 102, 80);
|
|
}
|
|
|
|
.player-list {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.income-row {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.income-key {
|
|
font-size: 10px;
|
|
color: rgb(136, 136, 112);
|
|
}
|
|
|
|
.income-val {
|
|
font-size: 10px;
|
|
color: rgb(255, 224, 102);
|
|
}
|
|
|
|
/* ---- 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: 220px; /* matches the tall sections */
|
|
flex-shrink: 0;
|
|
flex-direction: row;
|
|
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);
|
|
}
|
|
|
|
/* ----- 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);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.minimap-terrain {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
-unity-background-scale-mode: stretch-to-fill;
|
|
}
|
|
|
|
.minimap-entities {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
}
|
|
|
|
/* ----- Section 2: Portrait (short, bottom-aligned) ----- */
|
|
.portrait-frame {
|
|
width: 90px;
|
|
height: 165px;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 6px;
|
|
background-color: rgb(35, 30, 15);
|
|
border-width: 2px;
|
|
border-color: rgb(80, 65, 35);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.portrait-image {
|
|
width: 74px;
|
|
height: 110px;
|
|
background-color: rgb(13, 26, 13);
|
|
border-width: 1px;
|
|
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: 14px;
|
|
color: rgb(255, 224, 102);
|
|
-unity-font-style: bold;
|
|
-unity-text-align: upper-left;
|
|
margin-bottom: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.cmd-row {
|
|
flex: 1;
|
|
flex-direction: row;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
/* 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;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
padding: 3px;
|
|
background-color: rgb(26, 26, 10);
|
|
border-width: 1px;
|
|
border-color: rgb(58, 58, 26);
|
|
border-radius: 3px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
/* 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;
|
|
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: rgb(106, 106, 48);
|
|
}
|
|
|
|
.cmd-btn.active {
|
|
background-color: rgb(42, 38, 16);
|
|
border-color: rgb(255, 224, 102);
|
|
}
|
|
|
|
.cmd-btn.unaffordable {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.cmd-btn.empty-slot {
|
|
opacity: 0.12;
|
|
}
|
|
|
|
/* 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;
|
|
background-color: rgba(0, 0, 0, 0.55);
|
|
padding: 0 3px;
|
|
border-radius: 2px;
|
|
}
|