/* ========================================================= mbrd - layout, canvas chrome, sidebar, item cards Structure only. Every colour, corner, duration, typeface and ornament comes from a custom property in tokens.css - nothing below names a hue, and the handful of values that are written literally here are proportions rather than style (a 50% centre, a 100% fill). That is what lets the whimsy slider re-skin the whole interface at runtime without touching this file, and what will let the board re-skin itself from the pictures dropped on it later. The rules gated on [data-whimsy] at the bottom are the exceptions: the few decisions that are structural rather than numeric, and so cannot live in a token. ========================================================= */ * { box-sizing: border-box; } /* Selected text, in this board's own pigment rather than the browser's blue. Unqualified on purpose: it covers the canvas, the sidebar and the menus in one rule, because a highlight is a property of the board's palette and not of any one surface on it. See --highlight in tokens.css for why it is a wash at two of the three whimsy levels and a solid block at the third. */ ::selection { background: var(--highlight); color: var(--highlight-ink); } html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); -webkit-font-smoothing: antialiased; /* Kill rubber-band / pull-to-refresh: every gesture on this page is ours. */ overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } /* The small print goes in the display face. Every selector here is an aside - a caption, a section head, a keyboard legend, a toast - and an aside is the display voice's job, not the body's. In the middle of the whimsy axis, where the two tokens name different families, this is the split doing its work; at either end both name the same family and the whole rule is a no-op. Grouped rather than repeated thirteen times, and kept next to the body rule it is the counterweight to. */ .card-icon, .card-meta, .item-label, .wordmark h1, .wordmark .sub, .side-sec h2, .field > span, .hint, .keys li, .side-foot, #bin-panel h2, #bin-none, #bin-hint, #drop-overlay div, #toast { font-family: var(--font-display); } /* The sheet. #viewport paints the grid on top of this and stays transparent, so the paper shows through at every zoom without the grid painter having to know about it. Soft blooms and a vignette only - no fibre hatching. Fine repeating lines under a dot grid read as a second, competing grid, and at fractional zoom the two beat against each other into moire. */ body { background-color: var(--paper); /* --wash scales all three at once, so the whimsy axis can flatten the paper to nothing without a second background declaration to keep in sync. */ background-image: radial-gradient(58% 44% at 18% 12%, color-mix(in srgb, var(--accent-warm) calc(5% * var(--wash)), transparent), transparent 70%), radial-gradient(52% 40% at 84% 78%, color-mix(in srgb, var(--leafy) calc(4% * var(--wash)), transparent), transparent 72%), radial-gradient(120% 100% at 50% 50%, transparent 55%, color-mix(in srgb, var(--ink) calc(5% * var(--wash)), transparent)); } button, input, select, textarea { font: inherit; color: inherit; } /* --------------------------------------------------------- Canvas --------------------------------------------------------- */ #viewport { position: fixed; inset: 0; /* Pointer Events only - the browser must never claim a pan/pinch for itself. */ touch-action: none; cursor: default; overflow: hidden; background-color: transparent; /* the paper on shows through */ background-repeat: repeat; contain: layout paint; } #viewport.is-panning { cursor: grabbing; } #viewport.can-pan { cursor: grab; } /* The one transformed layer. Sits at the viewport centre so world (0,0) is the centre of the screen at pan (0,0); viewport.js writes the transform and --iz (= 1/zoom), which item chrome multiplies by to stay a constant screen size. */ #world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; will-change: transform; --iz: 1; } /* The Harsh lattice. Empty at the other two tiers, where #viewport's own background-image draws the dots - so this is either the whole grid or nothing, never a second layer under one. Sized in device pixels by canvas/grid.js and stretched back to CSS pixels here, which is what lets a mark be snapped to the device grid rather than to a CSS pixel that may be two thirds of one. */ #grid-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* World axes, drawn in screen space so they stay hairline at any zoom. */ .axis { position: absolute; background: var(--grid-axis); pointer-events: none; } #axis-x { left: 0; width: 100%; height: 1px; } #axis-y { top: 0; height: 100%; width: 1px; } #viewport.no-axes .axis { display: none; } /* The origin, marked like a compass rose rather than just a crossing. Drawn a shade stronger than the axes so (0,0) reads as a place, not an accident. */ #origin-mark { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; color: var(--accent); opacity: 0.7; pointer-events: none; } #viewport.no-axes #origin-mark { display: none; } #marquee { position: absolute; border: 1.5px dashed var(--select); background: var(--select-fill); border-radius: var(--radius-sm); pointer-events: none; z-index: 5; } /* The web of threads between items (canvas/web.js). Inside #world, so pan and zoom are the layer's transform rather than anything this has to redraw. Negative z-index puts it under every item; #world paints no background of its own, so there is nothing for it to disappear behind. */ #web { position: absolute; overflow: visible; pointer-events: none; z-index: -1; } /* Two kinds of element, one appearance. The bulk carries every settled thread as subpaths of a single `d`, which is what keeps a redraw to one attribute write on a board with hundreds of them. A thread only gets its own for as long as it is fading, because opacity cannot be applied to a subpath - and it is handed back to the path the moment it lands. */ #web path, #web line.thread { stroke: var(--web-line); stroke-width: var(--web-weight); stroke-linecap: round; /* A thread, not a beam: without this the stroke would be multiplied by the zoom along with everything else, and reach ten pixels wide at 8x. */ vector-effect: non-scaling-stroke; } /* --------------------------------------------------------- Items --------------------------------------------------------- */ .item { position: absolute; background: var(--item-bg); /* The corner this item actually draws, which is not simply --radius. Two things bend it. A note is cut from a pad and carries --note-radius instead, so --shape-radius is overridden per type. And the browser caps a border-radius at half the box's shorter side - an item narrower than twice its radius comes out a lozenge, whatever was asked for - so --half-min (written by items.js/place(), which is where the size is known) applies that same cap here. Everything that has to trace this corner reads --own-radius rather than guessing, so nothing ends up sweeping a 26px curve around a corner the browser quietly flattened to 10. */ --shape-radius: var(--radius); --own-radius: min(var(--shape-radius), var(--half-min, 9999px)); border-radius: var(--own-radius); box-shadow: var(--item-shadow); /* Deliberately not clipped: the resize handles and their brackets sit *outside* this box, and a clip here would slice every one of them in half. .item-body does the clipping instead - it fills the item and carries the same radius, so content still rounds off at the corners. */ overflow: visible; cursor: grab; user-select: none; -webkit-user-select: none; /* The selection ring's geometry, derived once here so that the ring and its corner marks cannot drift apart - which they had, in two separate ways. --sel-edge how far the ring's outer edge sits from the item box --mark-radius the curve both of them trace: the item's own corner, pushed outwards by that gap. A curve of radius R offset outwards by d is a curve of radius R + d, and both terms are in the item's own units, so it holds at any zoom --mark-size how big a corner mark has to be. Not merely --sel-reach: a border-radius larger than its own box is scaled down by the browser, which flattened the marks on a heavily rounded card while a note's - with a much smaller radius - came out true. Sized from the curve *plus* the straight run, so --sel-reach now means what it says: how far the heavy part continues past the end of the curve. R + d is the true parallel of a *rounded* corner. A square corner's true parallel is an arc of radius d - geometrically correct, and visibly wrong: a rounded ring around a sharp card reads as a mistake in a language whose whole premise is that corners are square. So the growth is switched off when there is no corner to grow. Multiplying by a large factor saturates to R + d for any real radius and collapses to zero at exactly zero, which is a branch CSS has no other way to express. */ --sel-edge: calc((var(--sel-gap) + var(--sel-line)) * var(--iz)); --mark-radius: min(calc(var(--own-radius) + var(--sel-edge)), calc(var(--own-radius) * 1000)); --mark-size: calc(var(--mark-radius) + var(--sel-reach) * var(--iz)); /* The lift and the tilt are zero at the plain end of the whimsy axis, so the same declaration covers "springs up to meet you" and "does not move". The resting tilt is each item's own factor in [-1, 1] (written by canvas/items.js, dealt from a bag so a third of the board hangs straight) times whatever the axis currently allows - and the drag tilt adds on top of it, rather than replacing it, so picking a crooked item up keeps it crooked. */ translate: 0 calc(var(--lift) * var(--iz)); rotate: calc(var(--item-tilt, 0) * var(--tilt-max) + var(--tilt)); scale: var(--grow); --lift: 0px; --tilt: 0deg; --grow: 1; transition: box-shadow var(--dur-base) var(--ease), translate var(--dur-base) var(--ease-back), rotate var(--dur-base) var(--ease-back), scale var(--dur-base) var(--ease-back); } /* translate/rotate/scale rather than transform, because items.js already owns `transform` for the item's own rotation - these are independent properties and compose with it instead of fighting over one declaration. */ .item:hover { box-shadow: var(--item-shadow), 0 0 0 calc(1px * var(--iz)) var(--rule-2); --lift: var(--lift-hover); --grow: var(--grow-hover); } .item.is-dragging { cursor: grabbing; --lift: var(--lift-drag); --tilt: var(--tilt-drag); --grow: var(--grow-hover); } /* The selection ring, drawn rather than outlined. `outline` would be the obvious tool and is the wrong one: engines disagree about whether outline-offset grows the outline's corner radius along with it. Firefox keeps the element's radius, Blink adds the offset - so a ring and a corner mark computed from the same numbers still came out as two different curves, doubling visibly at every corner. A border on a pseudo-element has one interpretation everywhere. The box's outer edge is --sel-edge out from the item and the border grows inwards from it, so the ring occupies exactly --sel-gap to --sel-edge - and its radius is the item's own, offset by the same amount, which is the same expression the corner marks use. */ .item::before { content: ''; position: absolute; inset: calc(-1 * var(--sel-edge)); border: 0 solid var(--select); border-radius: var(--mark-radius); pointer-events: none; transition: border-width var(--dur-fast) var(--ease); } .item.is-selected::before { border-width: calc(var(--sel-line) * var(--iz)); } .item-body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Carries .item's radius down the tree. `border-radius: inherit` copies the *parent's* value, so without this link the card inside inherits 0 and its border and inset ruling turn up square inside a rounded card. */ border-radius: inherit; pointer-events: none; /* the whole card is one drag target */ } .item-body img, .item-body video { width: 100%; height: 100%; object-fit: cover; display: block; } .item[data-fit="contain"] .item-body img, .item[data-fit="contain"] .item-body video { object-fit: contain; } /* Frozen GIFs (canvas/stills.js). The twin is out of the flow until it holds a decoded frame - is-ready, not merely [src], because the attribute lands the moment it is assigned and swapping then would show a blank where the picture was. Until it is ready the GIF just keeps playing, which is the harmless failure. */ .item-body img.still { display: none; } #world.is-stilled .item-body img.still.is-ready { display: block; } #world.is-stilled .item-body img[data-gif]:has(+ .still.is-ready) { display: none; } /* Cards for the non-visual types: audio, text, and the generic fallback. Ruled just inside the edge, the way a plate or a bookplate is. */ .card { position: relative; width: 100%; height: 100%; padding: 15px 16px; display: flex; flex-direction: column; gap: 7px; border-radius: inherit; background: var(--paper-card); /* The card fills .item exactly, and .item clips at the same radius - so a real border would be shaved away at the corners by that clip. An inset shadow draws inside the padding box and survives it. */ box-shadow: inset 0 0 0 var(--hairline) var(--item-border); overflow: hidden; } /* The inner rule. Two nested rounded rectangles only look concentric when the inner radius is the outer radius *minus* the gap between them - otherwise the corners bow outward and the gap reads wider at the corners than along the sides. That subtraction is the whole point of this rule. */ .card::after { content: ''; position: absolute; inset: var(--card-rule-gap); border: var(--hairline) solid var(--rule); border-radius: max(0px, calc(var(--own-radius) - var(--card-rule-gap))); pointer-events: none; } .card-icon { font-family: var(--font-display); font-size: 11px; font-style: var(--display-italic); letter-spacing: calc(0.16em * var(--ls-scale)); text-transform: uppercase; color: var(--accent); } .card-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-title); line-height: 1.2; word-break: break-word; } .card-meta { color: var(--ink-3); font-size: var(--t-small); font-style: var(--display-italic); } /* The body of a text card. Written before the renderer that uses it existed; canvas/renderers.js/RENDERERS.text is what fills it. */ .card-text { flex: 1; min-height: 0; overflow: hidden; margin: 0; white-space: pre-wrap; /* Source and CSV routinely run past the card; wrapping mid-word is what keeps a minified line or a long path from widening the card's own scroll box. */ overflow-wrap: anywhere; tab-size: 2; font-family: var(--font-mono); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); } /* A picture given to a card that is not itself one - album art off an mp3's tags, or anything chosen by hand. See coverEl() in canvas/renderers.js, which prepends it inside the card rather than behind it. Inside the padding, not bled to the edges. A card here is a plate: ruled just in from its own border, with the rule's radius derived from the card's so the two curves stay concentric. A full-bleed cover would cross that rule and turn the plate into a poster with a line drawn across it - and the rule is what tells a filed card apart from a photograph on this board. flex rather than a fixed aspect, because a cover has no aspect it is entitled to. Square for album art, wide for a screenshot, tall for a poster; the card was sized by its type and its own resizing, so the picture takes the room the words leave and crops to it. */ .card-cover { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block; border-radius: var(--radius-sm); /* A pale cover on pale card stock has no edge of its own - the same problem the polaroid mat has, and the same hairline answers it. */ box-shadow: 0 0 0 var(--hairline) color-mix(in srgb, var(--ink) 10%, transparent); } /* The kicker earns its place on a card that is only words. Above a picture of the record it is labelling a card AUDIO that is plainly a record sleeve. */ .card.has-cover .card-icon { display: none; } /* The native player is a fixed-height control, so it is pinned to the foot of the card rather than left to be squeezed by the text above it. */ /* The audio card's own transport. The