#ingame_HUD_buildings_toolbar { position: fixed; @include S(bottom, 0px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; background-color: rgb(255, 255, 255); background: transparent; border-bottom-width: 0; transition: transform 0.12s ease-in-out; background: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75); @include DarkThemeOverride { background: #222428; } &:not(.visible) { transform: translateX(-50%) translateY(#{D(100px)}); } .buildings { display: grid; grid-auto-flow: column; @include S(margin-bottom, 2px); .building { color: $accentColorDark; display: flex; flex-direction: column; position: relative; align-items: center; justify-content: center; @include S(padding, 5px); @include S(padding-bottom, 1px); @include S(width, 35px); @include S(height, 40px); background: center center / 70% no-repeat; &:not(.unlocked) { @include S(width, 20px); opacity: 0.15; background-image: none !important; &::before { content: " "; background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)} no-repeat; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; } } @include S(border-radius, $globalBorderRadius); &.selected { background-color: rgba($colorBlueBright, 0.6) !important; transform: scale(1.05); .keybinding { color: #111; } } pointer-events: all; transition: all 0.05s ease-in-out; transition-property: background-color, transform; &.unlocked:hover { background-color: rgba($accentColorDark, 0.1); cursor: pointer; } } } }