diff options
| author | LLLL Colonq <llll@colonq> | 2026-08-29 04:06:51 -0400 |
|---|---|---|
| committer | LLLL Colonq <llll@colonq> | 2026-08-29 04:06:51 -0400 |
| commit | 761a3172bf4c15aed3836e4d1cd6f815b651b0e0 (patch) | |
| tree | cc90491529e83349d84d42a8e9982e5f0f38338e /2026/games/the0x539/screen.css | |
| parent | 0d2d8cd897e94bd94e0b3ae7c6ce9aa580a44a0a (diff) | |
Fix
Diffstat (limited to '2026/games/the0x539/screen.css')
| -rw-r--r-- | 2026/games/the0x539/screen.css | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/2026/games/the0x539/screen.css b/2026/games/the0x539/screen.css new file mode 100644 index 0000000..d9a6f72 --- /dev/null +++ b/2026/games/the0x539/screen.css @@ -0,0 +1,168 @@ +@font-face { + font-family: "Minecraft"; + src: url("./MinecraftStandard.otf") format("opentype"); +} + +* { + box-sizing: border-box; + user-select: none; + font-family: Minecraft; + font-smooth: never; + font-size: 6px; + text-rendering: geometricPrecision; + line-height: 1em; +} + +body { + margin: 0; +} + +crafting-grid, +inventory-grid { + position: absolute; + display: grid; + align-items: center; + justify-items: center; +} + +follow-cursor { + position: absolute; + pointer-events: none; +} + +grabbed-stack { + display: block; + translate: -50% -50%; + z-index: 10; + pointer-events: none; +} + +:root:has(grabbed-stack > item-stack) { + cursor: grabbing; +} + +inventory-cell, +crafting-output { + width: 16px; + height: 16px; + + &:hover, + &:has(> item-stack[data-original-count]) { + background-color: rgba(255, 255, 255, 0.5); + } + + &:has(> item-stack) { + cursor: grab; + } +} + +crafting-grid { + left: 62px; + top: 22px; + grid-template: repeat(3, 18px) / repeat(3, 18px); +} + +crafting-output { + position: absolute; + left: 157px; + top: 41px; +} + +inventory-grid { + left: 12px; + top: 94px; + grid-template: repeat(3, 18px) / repeat(12, 18px); +} + +item-stack { + display: block; + position: relative; + + & > data { + position: absolute; + color: #fcfcfc; + text-shadow: #3e3e3e 1px 1px; + bottom: 0; + right: 0; + translate: 1px -1px; + } + + &[data-count="0"] { + display: none; + } + + &[data-count="1"] > data { + display: none; + } + + &[data-item="clock"]::before { + background-image: url("./items/clock.gif"); + } + + &::before { + display: block; + width: 16px; + height: 16px; + content: ""; + background-size: 16px 16px; + } +} + +img { + pointer-events: none; +} + +item-tooltip { + display: block; + color: white; + border-style: solid; + border-width: 4px; + border-image-source: url("./tooltip-backdrop.png"); + border-image-slice: 4 fill; + text-shadow: gray 1px 1px; + height: 16px; + line-height: 1em; + color: #fcfcfc; + text-shadow: #3e3e3e 1px 1px; + translate: 8px -100%; + + &:empty, + &:has(+ * > item-stack) { + display: none; + } +} + +body.failed { + filter: brightness(0.8) sepia(75%) hue-rotate(-45deg); + cursor: not-allowed; + & > * { + pointer-events: none; + } +} + +label[for="todo-list"] { + position: absolute; + top: 12px; + left: 12px; + color: #3f3f3f; + + &:has(+ #todo-list:empty) { + display: none; + } +} + +#todo-list { + position: absolute; + left: 12px; + top: 24px; + margin: 0; + padding: 0; + display: flex; + width: 32px; + flex-wrap: wrap; + justify-content: center; + + & > li { + list-style: none; + } +} |
