Adding HUD!
This commit is contained in:
parent
ff62b1e9f1
commit
f7720a9915
20 changed files with 1482 additions and 92 deletions
342
Assets/_Project/UI/HUD.uss
Normal file
342
Assets/_Project/UI/HUD.uss
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
/* ============================================================
|
||||
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 — RenderTexture applied as background-image at runtime */
|
||||
.minimap {
|
||||
width: 110px;
|
||||
flex-shrink: 0;
|
||||
background-color: rgb(10, 26, 10);
|
||||
border-right-width: 1px;
|
||||
border-right-color: rgba(42, 58, 26, 1);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue