151 lines
3.5 KiB
SCSS
151 lines
3.5 KiB
SCSS
#ingame_HUD_PlacementHints {
|
|
position: fixed;
|
|
@include S(top, 60px);
|
|
@include S(right, 10px);
|
|
|
|
display: grid;
|
|
|
|
@include S(padding, 6px);
|
|
@include S(border-radius, $globalBorderRadius);
|
|
@include S(width, 240px);
|
|
@include S(grid-column-gap, 5px);
|
|
|
|
background: rgba(#333438, 0.8);
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto 1fr;
|
|
|
|
@include DarkThemeOverride {
|
|
background-color: #55585a;
|
|
}
|
|
|
|
.buildingLabel {
|
|
@include PlainText;
|
|
@include S(margin-bottom, 2px);
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
grid-column: 1 / 3;
|
|
grid-row: 1 / 2;
|
|
}
|
|
|
|
.description {
|
|
color: #bbb;
|
|
@include SuperSmallText;
|
|
grid-column: 1 / 2;
|
|
grid-row: 2 / 3;
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
|
|
strong {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.additionalInfo {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
|
|
label {
|
|
color: lighten($colorGreenBright, 10);
|
|
font-weight: bold;
|
|
@include S(margin-right, 5px);
|
|
}
|
|
}
|
|
|
|
.hotkey {
|
|
color: lighten($colorGreenBright, 10);
|
|
font-weight: bold;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.keybinding {
|
|
position: relative;
|
|
@include S(margin-left, 5px);
|
|
}
|
|
}
|
|
|
|
.buildingImage {
|
|
grid-column: 2 / 3;
|
|
grid-row: 1 / 3;
|
|
@include S(width, 100px);
|
|
@include S(height, 100px);
|
|
background: top left / 100% 100% no-repeat;
|
|
@include S(border-radius, $globalBorderRadius);
|
|
}
|
|
|
|
@include StyleBelowWidth(700px) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
#ingame_HUD_PlacerVariants {
|
|
position: absolute;
|
|
@include S(left, 10px);
|
|
@include S(bottom, 80px);
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
justify-items: start;
|
|
@include S(grid-gap, 5px);
|
|
|
|
.explanation {
|
|
text-transform: uppercase;
|
|
@include SuperSmallText;
|
|
.keybinding {
|
|
position: relative;
|
|
}
|
|
|
|
@include DarkThemeOverride {
|
|
color: rgba(#fff, 0.5);
|
|
}
|
|
}
|
|
|
|
.variant {
|
|
@include S(border-radius, $globalBorderRadius);
|
|
background: rgba(0, 10, 20, 0.1);
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
@include S(padding, 5px);
|
|
@include S(grid-gap, 10px);
|
|
|
|
&.active {
|
|
background-color: rgba(74, 163, 223, 0.6);
|
|
}
|
|
|
|
$iconSize: 25px;
|
|
|
|
.iconWrap {
|
|
grid-column: 1 / 2;
|
|
grid-row: 1 / 2;
|
|
position: relative;
|
|
@include S(width, $iconSize);
|
|
@include S(height, $iconSize);
|
|
background: center center / contain no-repeat;
|
|
|
|
&[data-tile-w="2"] {
|
|
@include S(width, 2 * $iconSize);
|
|
}
|
|
&[data-tile-w="3"] {
|
|
@include S(width, 3 * $iconSize);
|
|
}
|
|
&[data-tile-w="4"] {
|
|
@include S(width, 4 * $iconSize);
|
|
}
|
|
&[data-tile-h="2"] {
|
|
@include S(height, 2 * $iconSize);
|
|
}
|
|
&[data-tile-h="3"] {
|
|
@include S(height, 3 * $iconSize);
|
|
}
|
|
}
|
|
|
|
.label {
|
|
display: none;
|
|
grid-column: 2 / 3;
|
|
text-transform: uppercase;
|
|
grid-row: 1 / 2;
|
|
@include SuperSmallText;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|