html, body {
width: 100%;
height: 100%;
}
body {
font-family: 'Silkscreen', monospace;
background-color: black;
margin: 0;
font-size: 0;
}
#tile-wrapper {
position: fixed;
}
.tile {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-size: contain;
background-position: 0 0;
image-rendering: pixelated;
}
.selected {
opacity: 0.5;
}
.selection-box {
position: absolute;
box-sizing: border-box;
border: 1px solid rgba(0, 255, 255, 0.5);
background-color: rgba(0, 255, 255, 0.2);
}
.hotbar {
background-color: #494949;
position: fixed;
top: 20px;
left: 20px;
max-height: calc(100vh - 44px);
width: 50px;
border-top: 2px solid #575757;
border-left: 2px solid #575757;
border-bottom: 2px solid #3e3e3e;
border-right: 2px solid #3e3e3e;
}
.slot {
padding: 8px;
border: 2px solid transparent;
width: 30px;
height: 30px;
cursor: pointer;
position: relative;
transition: all .2s;
}
.slot::after {
content: attr(aria-label);
background: #111111;
position: absolute;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
padding: 5px;
opacity: 0;
left: 150%;
height: 1em;
transition: left .2s, opacity .2s;
top: 0;
bottom: 0;
margin: auto;
white-space: pre;
pointer-events: none;
}
.slot:hover::after {
left: 100%;
opacity: 1;
}
.icon {
image-rendering: pixelated;
width: 30px;
opacity: 0.5;
transition: transform .2s;
}
.slot:hover .icon, .current-tool .icon {
opacity: 0.9;
}
.divider {
width: 30px;
margin: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.block {
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-size: 30px;
background-position: 0 0;
image-rendering: pixelated;
transition: transform .2s;
}
.current-tool {
cursor: default;
background-color: #696969;
border-top: 2px solid #717171;
border-left: 2px solid #717171;
border-bottom: 2px solid #5b5b5b;
border-right: 2px solid #5b5b5b;
}
.current-tool .icon, .current-tool .block {
transform: scale(1.2);
}
.disabled {
opacity: 0.5;
pointer-events: none;
}