69 lines
1.3 KiB
CSS
69 lines
1.3 KiB
CSS
.foodbar {
|
|
position: fixed;
|
|
display: flex;
|
|
z-index: -1;
|
|
flex-direction: row-reverse;
|
|
left: calc(50% + 91px);
|
|
transform: translate(-100%);
|
|
bottom: calc(var(--safe-area-inset-bottom) + 30px);
|
|
--kind: 0;
|
|
--lightened: 0;
|
|
--offset: calc(-1 * (52px + (9px * (4 * var(--kind) + var(--lightened) * 2))));
|
|
--bg-x: calc(-1 * (16px + 9px * var(--lightened)));
|
|
--bg-y: calc(-1 * 27px);
|
|
pointer-events: none;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.foodbar.poisoned {
|
|
--kind: 1;
|
|
}
|
|
|
|
.foodbar.withered {
|
|
--kind: 2;
|
|
}
|
|
|
|
.food {
|
|
width: 9px;
|
|
height: 9px;
|
|
background-size: 256px, 256px;
|
|
background-position: var(--bg-x) var(--bg-y), var(--bg-x) var(--bg-y);
|
|
background-image: var(--gui-icons);
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.food.full {
|
|
background-position: var(--offset) var(--bg-y), var(--bg-x) var(--bg-y);
|
|
}
|
|
|
|
.food.half {
|
|
background-position: calc(var(--offset) - 9px) var(--bg-y), var(--bg-x) var(--bg-y);
|
|
}
|
|
|
|
.foodbar.low .food {
|
|
animation: lowHungerAnim 0.2s steps(2, end) infinite;
|
|
}
|
|
|
|
.foodbar.low .food:nth-of-type(2n) {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.foodbar.low .food:nth-of-type(3n) {
|
|
animation-duration: 0.1s;
|
|
}
|
|
|
|
.foodbar.updated {
|
|
animation: updatedAnim 0.3s steps(2, end) 2;
|
|
}
|
|
|
|
.creative {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes lowHungerAnim {
|
|
to { transform: translateY(1px); }
|
|
}
|
|
|
|
@keyframes updatedAnim {
|
|
to { --lightened: 1; }
|
|
}
|