357 lines
7.1 KiB
Text
357 lines
7.1 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 ---------------------------------------- */
|
|
|
|
.bottom-ui {
|
|
height: 110px;
|
|
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);
|
|
}
|
|
|
|
/* Minimap — host container. MinimapView injects two stacked sub-elements
|
|
(.minimap-terrain and .minimap-entities) at runtime. */
|
|
.minimap {
|
|
width: 110px;
|
|
flex-shrink: 0;
|
|
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;
|
|
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);
|
|
}
|
|
|
|
.portrait-image {
|
|
width: 58px;
|
|
height: 72px;
|
|
margin-bottom: 3px;
|
|
background-color: rgb(13, 26, 13);
|
|
border-width: 1px;
|
|
border-color: rgba(58, 90, 58, 1);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.portrait-name {
|
|
font-size: 9px;
|
|
color: rgb(255, 224, 102);
|
|
-unity-text-align: upper-center;
|
|
}
|
|
|
|
/* Command grid: 3 row-containers injected at runtime, each holding 4 buttons */
|
|
.command-grid {
|
|
flex: 1;
|
|
flex-direction: column;
|
|
padding: 4px;
|
|
}
|
|
|
|
.cmd-row {
|
|
flex: 1;
|
|
flex-direction: row;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* Individual command buttons */
|
|
.cmd-btn {
|
|
flex: 1;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2px;
|
|
background-color: rgb(26, 26, 10);
|
|
border-width: 1px;
|
|
border-color: rgba(58, 58, 26, 1);
|
|
border-radius: 3px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/* Icon area placeholder — replaced by background-image when art exists */
|
|
.cmd-icon-placeholder {
|
|
flex: 1;
|
|
width: 100%;
|
|
background-color: rgba(255, 255, 255, 0.06);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
|
|
.cmd-btn:hover {
|
|
background-color: rgb(42, 42, 21);
|
|
border-color: rgba(106, 106, 48, 1);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 {
|
|
font-size: 11px;
|
|
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;
|
|
}
|