summaryrefslogtreecommitdiff
path: root/2026/games_submissions/the0x539/screen.css
diff options
context:
space:
mode:
authorLLLL Colonq <llll@colonq>2026-07-19 04:26:39 -0400
committerLLLL Colonq <llll@colonq>2026-07-19 04:26:39 -0400
commit47c0d930736bb5247a7f7ba05c7d41e33038102a (patch)
tree82894a30c3022c2b84d9d3ea9e0b4e396e6b2a1f /2026/games_submissions/the0x539/screen.css
parent631fbd3a6567afa5ed9c5f8bb5fe1f32480fabc6 (diff)
Update
Diffstat (limited to '2026/games_submissions/the0x539/screen.css')
-rw-r--r--2026/games_submissions/the0x539/screen.css168
1 files changed, 168 insertions, 0 deletions
diff --git a/2026/games_submissions/the0x539/screen.css b/2026/games_submissions/the0x539/screen.css
new file mode 100644
index 0000000..d9a6f72
--- /dev/null
+++ b/2026/games_submissions/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;
+ }
+}