/* CraftBot viewer. The active render style writes three colours onto : --bg (page and every panel), --ink (type, borders) and --accent. Nothing in the GUI is translucent or grey: a surface is either the page colour or fully transparent, and type is ink, accent, or (on inverted chips) bg. */ @font-face { font-family: "MEK-Mono"; src: url("../fonts/MEK-Mono.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } :root { --bg: #ffffff; --ink: #000000; --accent: #000000; --shadow: 3px; /* hard-offset bitmap shadow (see below); 2px on phones */ /* Type follows the viewport: ~13px on a 1280px laptop, 18px from ~2000px up */ font-size: clamp(12px, 0.7vw + 4px, 18px); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: var(--bg); } body { font-family: "MEK-Mono", "IBM Plex Mono", Consolas, "Courier New", monospace; color: var(--ink); } #view { display: block; width: 100%; height: 100%; } /* Hard-offset drop shadow in the page colour: keeps type legible where it crosses the model, and reads as a retro bitmap shadow elsewhere. */ #gui, #stats, #footer, #inspector .text, .dim-label { text-shadow: var(--shadow) var(--shadow) 0 var(--bg); } button, select { text-shadow: none; } #banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 20; padding: 6px 14px; background: #300; color: #ff8888; border: 1px solid #a33; border-top: 0; } /* ---- GUI panel: grows downward from the top, no full-height column ---- */ #gui { position: fixed; top: 0; left: 0; z-index: 10; width: 17.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; user-select: none; } #gui header { padding: 0.5rem 0.6rem 0.4rem; letter-spacing: 1px; color: var(--accent); } #gui header .cursor { animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .gui-section > h2 { font-size: 1rem; font-weight: normal; letter-spacing: 2px; padding: 0.3rem 0.6rem; cursor: pointer; } .gui-section > h2:hover { color: var(--accent); } .gui-section > h2::before { content: "> "; color: var(--accent); } .gui-section.open > h2::before { content: "v "; } .gui-section > .body { display: none; padding: 0.1rem 0.6rem 0.4rem; } .gui-section.open > .body { display: block; } /* Layer toggles sit in two columns to keep the section short */ .gui-section.layers.open > .body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.4rem; } .gui-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0; } .gui-row > label { flex: 0 0 5rem; text-transform: uppercase; } .gui-row select, .gui-row input[type=range] { flex: 1; min-width: 0; } .gui-row .readout { flex: 0 0 auto; color: var(--accent); } /* < value > steppers, several per row (entry animation, then order) */ .stepper { display: inline-flex; align-items: center; gap: 0.2rem; margin-right: 0.4rem; } .stepper button { padding: 0 0.2rem; } .stepper .value { text-align: center; color: var(--accent); } /* Layer / cut rows: the whole row is the hit area */ .gui-toggle { cursor: pointer; padding: 1px 3px; margin: 2px -3px; } /* Cut toggle sharing a row with its slider: takes the label column */ .gui-row > .gui-toggle { flex: 0 0 5rem; margin: 0 0 0 -3px; display: flex; align-items: center; gap: 0.4rem; } .gui-toggle:hover { color: var(--accent); } .gui-toggle:hover input[type=checkbox] { border-color: var(--accent); } select { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); padding: 3px 4px; font: inherit; border-radius: 0; } select:focus { outline: 1px solid var(--accent); } button { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); font: inherit; padding: 3px 8px; cursor: pointer; text-transform: uppercase; border-radius: 0; } button:hover { color: var(--accent); border-color: var(--accent); } button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } input[type=checkbox] { appearance: none; width: 0.7rem; height: 0.7rem; flex: 0 0 0.7rem; border: 1px solid var(--ink); background: var(--bg); cursor: pointer; box-shadow: var(--shadow) var(--shadow) 0 var(--bg); /* same bitmap shadow as the type */ } input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); } input[type=range] { appearance: none; height: 2px; background: var(--ink); cursor: ew-resize; } input[type=range]::-webkit-slider-thumb { appearance: none; width: 0.5rem; height: 0.8rem; background: var(--accent); } /* ---- material takeoff, right of the panel; lets pointer events through so orbiting over it still works ---- */ #stats { position: fixed; top: 0.5rem; left: 18rem; z-index: 10; user-select: none; pointer-events: none; } table.stats { border-collapse: collapse; } table.stats td, table.stats th { text-align: right; padding: 1px 0.35rem 1px 0; font-weight: normal; white-space: nowrap; } table.stats th { border-bottom: 1px solid var(--ink); text-transform: uppercase; } table.stats td:first-child, table.stats th:first-child { text-align: left; } table.stats tr.total td { color: var(--accent); border-top: 1px solid var(--ink); } .info-line { margin: 0.2rem 0; } .info-line b { color: var(--accent); font-weight: normal; } /* ---- view cube ---- */ #viewcube { position: fixed; top: 12px; right: 12px; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 6px; } #viewcube canvas { display: block; touch-action: none; } #viewcube .quad-btn { padding: 4px 0; font-size: 0.8rem; letter-spacing: 1px; } /* ---- element inspector: opaque text block over a transparent viewport that the main renderer draws into (same style pipeline as the model). Sits next to the GUI; the rationale column owns the right edge. ---- */ #inspector { position: fixed; left: 18rem; bottom: 14px; z-index: 10; width: 20rem; border: 1px solid var(--ink); } #inspector .text { background: var(--bg); padding: 0.4rem 0.6rem 0.5rem; } #inspector h3 { font-size: 1rem; font-weight: normal; color: var(--accent); letter-spacing: 1px; } #inspector .dims { margin-top: 0.2rem; } #inspector .dims b { color: var(--accent); font-weight: normal; } #inspector .viewport { display: block; width: 100%; aspect-ratio: 276 / 200; border-top: 1px solid var(--ink); } .dim-label { position: fixed; z-index: 11; pointer-events: none; color: var(--accent); font-size: 0.8rem; transform: translate(-50%, -50%); } /* ---- hover tag: element name + layer next to the cursor ---- */ #hover-tag { position: fixed; z-index: 11; pointer-events: none; user-select: none; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); padding: 0.2rem 0.5rem; font-size: 0.85rem; line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow) var(--shadow) 0 var(--bg); } #hover-tag[hidden] { display: none; } #hover-tag b { color: var(--accent); font-weight: normal; } /* ---- design rationale panel (Fable runs only): column under the view cube ---- */ #doc { position: fixed; top: 180px; right: 12px; z-index: 10; display: flex; flex-direction: column; width: 24rem; max-height: calc(100vh - 180px - 3rem); min-height: 0; border: 1px solid var(--ink); background: var(--bg); } #doc[hidden] { display: none; } #doc > h2 { flex: 0 0 auto; font-size: 1rem; font-weight: normal; letter-spacing: 2px; padding: 0.3rem 0.6rem; cursor: pointer; border-bottom: 1px solid var(--ink); user-select: none; } #doc > h2::before { content: "v "; color: var(--accent); } #doc > h2:hover { color: var(--accent); } #doc.closed { width: auto; } /* collapsed: just the title */ #doc.closed > h2 { border-bottom: 0; } #doc.closed > h2::before { content: "> "; } #doc.closed > .md { display: none; } #doc > .md { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; padding: 0.4rem 0.6rem 0.8rem; font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; } /* One face throughout; emphasis is colour or an inverted chip, which stays readable when accent == ink (mono, wireframe). */ .md h1, .md h2, .md h3, .md h4 { font-weight: normal; color: var(--accent); margin: 1.1em 0 0.35em; } .md h1 { font-size: 1.45em; margin-top: 0.3em; } .md h2 { font-size: 1.25em; } .md h3 { font-size: 1.1em; } .md h4 { font-size: 1em; } .md p { margin: 0.4em 0; } .md ul, .md ol { margin: 0.4em 0 0.4em 1.4em; } .md li { margin: 0.15em 0; } .md code, .md pre { font: inherit; } .md code { background: var(--ink); color: var(--bg); padding: 0 0.25em; } .md pre { border: 1px solid var(--ink); padding: 0.4em 0.6em; margin: 0.5em 0; overflow-x: auto; white-space: pre; } .md pre code { background: none; color: var(--ink); padding: 0; } .md table { border-collapse: collapse; margin: 0.5em 0; } .md th, .md td { border: 1px solid var(--ink); padding: 1px 0.4em; text-align: left; vertical-align: top; font-weight: normal; } .md th { color: var(--accent); } .md a { color: var(--accent); } .md hr { border: 0; border-top: 1px solid var(--ink); margin: 0.8em 0; } .md blockquote { border-left: 2px solid var(--accent); padding-left: 0.6em; margin: 0.4em 0; } .md strong { background: var(--ink); color: var(--bg); font-weight: normal; padding: 0 0.2em; } .md em { color: var(--accent); font-style: normal; } /* Callout targets: numbered headings (hover = show the callouts) and quotes */ .md [data-section]:hover { text-decoration: underline; } .md mark.ref { background: none; color: inherit; border-bottom: 2px solid var(--accent); } .md .flash, .md mark.ref.flash { background: var(--accent); color: var(--bg); } /* ---- rationale callouts: tags pointing at passages of the document ---- */ #callout-lines { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; } #callout-lines line { stroke: var(--ink); stroke-width: 1; } #callout-lines circle { fill: var(--accent); } .callout { position: fixed; z-index: 10; transform: translate(-50%, -50%); max-width: 14rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; line-height: 1.3; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; user-select: none; box-shadow: var(--shadow) var(--shadow) 0 var(--bg); } .callout[hidden] { display: none; } .callout:hover, .callout.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* ---- footer ---- */ #footer { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 10; font-size: 0.8rem; user-select: none; white-space: nowrap; } #footer a { color: var(--accent); text-decoration: none; } #footer a:hover { text-decoration: underline; } /* quad view separators */ #quad-lines { position: fixed; inset: 0; pointer-events: none; z-index: 5; display: none; } #quad-lines.on { display: block; } #quad-lines::before, #quad-lines::after { content: ""; position: absolute; background: var(--ink); } #quad-lines::before { left: 0; right: 0; top: 50%; height: 1px; } #quad-lines::after { top: 0; bottom: 0; left: 50%; width: 1px; } /* ---- phones: collapsed exclusive GUI (see makePanel), smaller view cube (viewcube.js), takeoff bottom-left, rationale collapsed and full width ---- */ @media (max-width: 760px) { :root { font-size: 13px; --shadow: 2px; } #gui { width: 16rem; max-height: calc(100vh - 2.5rem); } #stats { top: auto; bottom: 2.4rem; left: 0.6rem; } #inspector { left: auto; right: 0.6rem; width: min(18rem, 55vw); bottom: 2.4rem; } #doc { top: 160px; right: 8px; width: min(24rem, calc(100vw - 16px)); max-height: calc(100vh - 160px - 3rem); } #footer { bottom: 6px; font-size: 0.75rem; } }