/* Inter, self-hosted. Two subsets, 130KB together, served from this app's own origin: a font loaded from a third party is a request to somebody else on every visit, and this thing is meant to work on a phone in a spot with one bar of signal. Variable, so 400 through 700 come out of one file per subset rather than four static weights. The latin subset covers everything Dutch needs; latin-ext carries the accents that turn up in a pasted filename. Kept in the order Google serves them, ranges and all, so a browser only fetches the second file if a page actually uses a character from it. font-display: swap — the fallback below shows immediately and Inter replaces it. Never invisible text while a font loads. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* A phone app that happens to be served as HTML: opened one-handed, from a home screen, often on a slow connection. No framework, no utility classes, no webfont — the system stack is SF on the hardware most of these parents hold, and downloading a typeface to imitate it would be slower and worse. The structure is Apple's inset-grouped list: a quiet ground, white cards floating on it, hairline separators inside them. The palette (Slate) is deliberately cool and near-neutral rather than hue-biased: the thumbnails are worksheets, storybook covers, photos — already colourful — and a tinted neutral would compete with them instead of framing them. Colour is spent in exactly one place, the accent, and nowhere else. */ /* ---------------------------------------------------------------- tokens -- */ :root { color-scheme: light dark; /* Modern Minimalist (theme-factory): Charcoal, Slate Gray, Light Gray, White, verbatim as ink/accent/hairline/surface. Every other token here is derived from those four at the same hue (~207°, the shared cool cast of Charcoal and Slate Gray) rather than invented — a filled-in version of the named theme, not a different palette wearing its name. */ --bg: #f7f7f8; --surface: #ffffff; --surface-sunk: #f2f2f3; --surface-press: #e4e6e7; --ink: #36454f; --ink-2: #607280; --ink-3: #949fa8; --hairline: #d3d3d3; --hairline-strong: #b8b8b8; /* The theme's own Slate Gray swapped for this specific blue — everything else in Modern Minimalist (ink, hairline, surface, type) stays as specified. */ --accent: #3a4e7a; --accent-press: #2e3e62; --accent-ink: #ffffff; --accent-wash: #e7eaef; /* The mark in the banner, and nothing else. Three colours rather than one, because the glyph is drawn in two parts: a pale canvas disc, the house in near-black, and the book inside it in the accent blue. Owner's choice, replacing an orange disc with a white glyph — it holds its own against the dark band without introducing a hue the rest of the app never uses. */ --mark-canvas: #f7f7f6; --mark-house: #18181b; --mark-book: #3a4e7a; /* Gold, and the only warm hue in the whole palette. Spent on exactly one thing: the "+N" that rises when somebody has just added something to the library. It is up for about a second and then gone, which is what lets it be the one loud note in an otherwise cool, near-neutral interface — a permanent gold element would fight every thumbnail on the page. No dark-mode variant: the pill carries its own fill and its own dark ink, so it reads the same against a white page and a near-black one. */ --gold: #e0aa2e; --gold-light: #f7d774; --gold-deep: #c2871a; --gold-ink: #3d2a05; /* The favourite heart, and nothing else. Its own token rather than --danger: red means "careful" everywhere else in this app, and a filled heart means the opposite of that. */ --heart: #d92b4b; --heart-press: #b71f3c; --heart-wash: #fbe9ed; --danger: #b3261e; /* What is legible on --danger. White in light mode; in dark the danger colour itself is a light coral, and white on it comes out at 2.7:1. */ --danger-ink: #ffffff; /* Only used to say "this edit is ready to save" on the rename control. Green is the one signal that reads as go without a word of text next to it. */ --ok: #2c9633; --ok-ink: #ffffff; /* Age deliberately carries no colour of its own — plain theme chips/tags, the same surface/hairline/accent language as every other untinted control — so that subject, below, is the one place on the page colour means something. (An earlier version gave age its own five-hue palette; removed on request in favour of this plainer look.) Subject is an open, per-group vocabulary, so it can't be keyed by value the way a fixed enum could — --subject-0 .. --subject-9 are assigned by each tag's position in the group's own vocabulary instead (see LibraryModel.SubjectPaletteSize), cycling if a group ever seeds more than ten. Each index is a PAIR: --subject-N is a pale tint used as a fill, --subject-N-ink the deep version of the same hue used for the text on it and for the dot on a file's card. An earlier version was ten fully saturated hues with white text; these tints replace them at the owner's choice. Three roles per index, because two were not enough once the chip fill went back to neutral: -N is the accent (the border, the dot on a card, and the fill once the chip is on), -N-ink writes on the neutral chip, -N-on writes on that accent fill. In light mode -ink and -on are the same deep colour — dark text works on white and on a pale tint alike. Dark mode is where they part: on a dark chip the text has to be the light tint, while on a tint-filled chip it has to go dark again. Measured, so that nobody re-derives it from the look: muting a palette moves its colours closer together, and colour-vision deficiency then collapses them faster. Ten colliding pairs under deuteranopia here against five for the old vivid set — Muziek and Talen land 0.6 ΔE apart, which is to say identical. What makes the change an improvement anyway is that the chip now carries its own label on top of the tint, so colour stopped being the only channel there. The one place it is still the only channel is the dot on a file's card — so that dot must never become the sole way to tell two subjects apart, and if a subject's identity has to survive on a card, it needs a second channel. */ --subject-0: #e7c9cf; --subject-0-ink: #8a2136; --subject-0-on: #8a2136; --subject-1: #dcebc2; --subject-1-ink: #3f6210; --subject-1-on: #3f6210; --subject-2: #c8dff5; --subject-2-ink: #12457f; --subject-2-on: #12457f; --subject-3: #f6dfc0; --subject-3-ink: #8a5205; --subject-3-on: #8a5205; --subject-4: #d9d2ef; --subject-4-ink: #472a8a; --subject-4-on: #472a8a; --subject-5: #f4d2e6; --subject-5-ink: #8a2168; --subject-5-on: #8a2168; --subject-6: #efe7b4; --subject-6-ink: #645a08; --subject-6-on: #645a08; --subject-7: #f8d3c6; --subject-7-ink: #8f3418; --subject-7-on: #8f3418; --subject-8: #dedcd8; --subject-8-ink: #4f4b45; --subject-8-on: #4f4b45; --subject-9: #bfe3db; --subject-9-ink: #0d5248; --subject-9-on: #0d5248; /* Apple's radii are large and consistent; small ones read as cheap. */ --r-card: 16px; --r-inner: 12px; --r-pill: 999px; /* The file card's own corner, tuned apart from --r-inner. It was sharing that 12px with the form fields and the panels, and at the size a card actually is in a three-column grid on a phone that read as far too round. One token, because three things have to agree on it: the card, the footer row that rounds its own bottom corners underneath it, and the selection overlay that sits on top. */ --r-tile: 8px; --tap: 44px; /* Where the floating add button sits, and how big it is. Shared with the two options that open above it — see .add-dial. */ --fab-right: max(16px, calc(env(safe-area-inset-right) + 12px)); /* Written down once: the floating button, the add sheet's dial, and the foot of every page all have to clear the navigation bar, and three copies of this sum would drift apart the first time the bar changed height. */ --head-height: 45px; --tabs-height: 40px; --nav-height: 58px; --nav-total: calc(var(--nav-height) + env(safe-area-inset-bottom)); --fab-bottom: calc(var(--nav-total) + 14px); --fab-size: 50px; /* The two round options that open above it. Smaller than the button they came out of, so the button stays the one that is obviously in charge. */ --dial-size: 44px; /* Two shadows: one hairline for edge definition, one wide and very soft for lift. Tinted by ink rather than pure black, so the lift reads as part of this palette. */ --lift: 0 0 0 0.5px rgb(54 69 79 / 6%), 0 1px 2px rgb(54 69 79 / 5%), 0 8px 24px rgb(54 69 79 / 6%); --ease: cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-color-scheme: dark) { :root { /* Modern Minimalist has no dark variant of its own — presentation themes rarely do — so this extends it the same way the rest of this app's dark mode was built: Charcoal's own hue darkens further for the canvas, and the accent lightens for contrast rather than being replaced with an unrelated colour. */ --bg: #1d252a; --surface: #2a3237; --surface-sunk: #363f45; --surface-press: #424c52; --ink: #f2f2f3; --ink-2: #a6aeb5; --ink-3: #6d7983; /* Solid borders don't scale across arbitrary dark surfaces the way they do against a fixed white card, so dark mode goes back to a translucent line. */ --hairline: rgb(255 255 255 / 10%); --hairline-strong: rgb(255 255 255 / 18%); /* A deep red disappears into a dark card, so the heart lightens the same way the accent does — same hue, lifted until it reads. */ --heart: #ff5f7a; --heart-press: #ff8496; --heart-wash: #43262d; /* The accent lightens for contrast against a dark ground — the same blue, not a different hue — and its ink flips dark to sit on top of it. */ --accent: #7e93c4; --accent-press: #93a6d1; --accent-ink: #121826; --accent-wash: #232a3b; /* The disc stays pale in dark mode: it is a canvas the glyph is drawn on, and inverting it would put a dark mark on a light band, which is the one arrangement that stops reading as a badge. */ --mark-canvas: #f2f2f0; --mark-house: #18181b; --mark-book: #3a4e7a; --danger: #ff6f62; --danger-ink: #2b0a06; --ok: #57b85e; --ok-ink: #12210f; /* The same ten pairs with their roles swapped for a dark ground: the fill is the deep hue dropped onto the dark card, the text is the pale tint. Because both modes keep the same three roles, so every rule below is written once and works in both. Unselected text and the border are the same light tint here; -on is a deep version of the hue for the moment that tint becomes the fill. Text clears 7.7:1 on all ten, borders 8.4:1. */ --subject-0: #e7c9cf; --subject-0-ink: #e7c9cf; --subject-0-on: #522b37; --subject-1: #dcebc2; --subject-1-ink: #dcebc2; --subject-1-on: #334627; --subject-2: #c8dff5; --subject-2-ink: #c8dff5; --subject-2-on: #203a55; --subject-3: #f6dfc0; --subject-3-ink: #f6dfc0; --subject-3-on: #523f22; --subject-4: #d9d2ef; --subject-4-ink: #d9d2ef; --subject-4-on: #362f5a; --subject-5: #f4d2e6; --subject-5-ink: #f4d2e6; --subject-5-on: #522b4c; --subject-6: #efe7b4; --subject-6-ink: #efe7b4; --subject-6-on: #424323; --subject-7: #f8d3c6; --subject-7-ink: #f8d3c6; --subject-7-on: #54332a; --subject-8: #dedcd8; --subject-8-ink: #dedcd8; --subject-8-on: #3a3c3d; --subject-9: #bfe3db; --subject-9-ink: #bfe3db; --subject-9-on: #1e3f3e; --lift: 0 0 0 0.5px rgb(255 255 255 / 6%), 0 8px 24px rgb(0 0 0 / 40%); } } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Nothing in this app is ever wider than the screen. */ overflow-x: hidden; } body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); /* Inter, self-hosted above. The earlier note here said self-hosting was not worth ~1.4MB of font files; that was about shipping two static weights of DejaVu. One variable subset is 47KB, which changes the answer. The fallback is the system UI stack, which is what Inter is modelled on anyway, so the swap when it lands is barely visible. */ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Apple's own body size is 17px; dialed back one notch because this app leans denser than a typical iOS screen — a 4-across grid and compact list rows throughout. */ font-size: 16px; line-height: 1.47; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; /* The browser's grey flash on tap looks like a bug next to a real press state. */ -webkit-tap-highlight-color: transparent; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } main { max-width: 680px; margin: 0 auto; /* The top is roomier than it looks like it needs to be: the brand disc hangs out of the band above and lands in this space. */ padding: 16px 16px 56px; } /* With no band above, that allowance is paying for a disc that is not there. Trimmed rather than removed: a title flush against the top of the window reads as cut off, and on a phone this is where the clock and the notch are. The saved height is what the page gains. */ main.no-top-bar { padding-top: max(10px, env(safe-area-inset-top)); } /* And starts below the bar at the top, on the one screen that has one. The window's own top inset is already paid for by the padding on , so this is the bar's drawn height and nothing more — adding the inset again would leave a gap the width of the notch under the bar. */ body:has(.library-head) main { /* The bar's height plus a little air, so the search field is not glued to the line under it. The gap has to live here rather than as a margin on the first thing in the page: what sits directly under the bar differs per state — the search row normally, a toast when a handler has just said something. */ padding-top: calc(var(--head-height) + 10px); } /* With the two tabs under the bar, the page starts under those instead. */ body:has(.library-tabs) main { padding-top: calc(var(--head-height) + var(--tabs-height) + 10px); } /* Every page ends above the navigation bar — but only on the pages that have one. Keyed off the bar actually being in the document rather than off the flag: signed out there are no tabs, and reserving room for them would leave a strip of nothing under the sign-in form. Pages with a floating button need more still; see the .fab rules further down. */ body:has(.bottom-nav) main { padding-bottom: calc(var(--nav-total) + 24px); } h1 { margin: 0; /* Scales with the viewport instead of being a fixed size tuned on a desktop. Small enough on a 360px phone to sit under the site header without a jarring size jump between the two. */ font-size: clamp(18px, 5vw, 22px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } /* The small uppercase label above a grouped section, straight out of iOS Settings. */ h2 { margin: 0 0 8px; font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } .muted { color: var(--ink-2); } .small { font-size: 13px; line-height: 1.4; } :where(a, button, input, label):focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* --------------------------------------------------------------- buttons -- */ button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 20px; border: none; border-radius: var(--r-inner); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: transform 140ms var(--ease), background-color 140ms var(--ease); } button:hover, .button:hover { background: var(--accent-press); text-decoration: none; } /* The slight give on press is most of what makes a web page feel like an app. */ button:active, .button:active { transform: scale(0.96); } /* A button that has just been pressed and is waiting for the answer. Same look as any other disabled button — the point is only that it is visibly no longer pressable, so nobody taps it a second time while the phone thinks. See submit-once.js. */ [data-locked] { cursor: default; } button:disabled { opacity: 0.4; cursor: default; transform: none; } /* Sits beside a title without dominating it. Still 38px tall, comfortably tappable. */ .button.compact, button.compact { min-height: 38px; padding: 0 16px; font-size: 13px; } .link-button { min-height: 32px; padding: 0 12px; background: var(--surface-sunk); color: var(--ink-2); font-size: 13px; font-weight: 500; } .link-button:hover { background: var(--surface-press); } .link-button.danger { color: var(--danger); } /* ----------------------------------------------------------------- forms -- */ .stack { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; } /* ------------------------------------------------------- aanmelden/inschrijven -- */ /* Two radios drive which panel is on screen. No script: the same checkbox-and-label trick the filter row and the tag chips already use, so it works before a single byte of JavaScript has loaded — which on the one screen you cannot get past is worth something. */ .auth-mode { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .auth-tabs { display: flex; gap: 4px; margin: 26px 0 0; padding: 3px; border-radius: var(--r-pill); background: var(--surface-sunk); } .auth-tabs label { flex: 1 1 0; padding: 9px 10px; border-radius: var(--r-pill); text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color 140ms var(--ease), color 140ms var(--ease); } #auth-signin:checked ~ .auth-tabs label[for="auth-signin"], #auth-register:checked ~ .auth-tabs label[for="auth-register"] { background: var(--surface); color: var(--ink); box-shadow: var(--lift); } /* The radio itself is a pixel in the corner, so its focus ring would land nowhere. Put it on the label the keyboard is actually pointing at — same as .same-labels-toggle does. */ .auth-mode:focus-visible ~ .auth-tabs label[for="auth-signin"], .auth-mode:focus-visible ~ .auth-tabs label[for="auth-register"] { outline: 2px solid var(--accent); outline-offset: 2px; } .auth-panel { display: none; margin-top: 20px; } #auth-signin:checked ~ .auth-panel-signin, #auth-register:checked ~ .auth-panel-register { display: flex; } .field { display: flex; flex-direction: column; gap: 7px; } .field > span:first-child { padding-inline-start: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-2); } /* textarea was missing here, which is why every one in the app came out in the browser's default monospace with its own border — the two description fields looked like a different app. */ input[type="text"], input[type="search"], input[type="email"], input[type="number"], textarea, .field input { width: 100%; max-width: 100%; min-height: 42px; padding: 0 16px; border: none; border-radius: var(--r-inner); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink); font: inherit; transition: box-shadow 140ms var(--ease); } input::placeholder, textarea::placeholder { color: var(--ink-3); } input:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } /* A single-line rule cannot serve a box of text: the padding has to be on both axes, and a fixed height would fight the rows attribute. */ textarea { min-height: 0; padding: 10px 16px; line-height: 1.45; } input[type="search"] { /* Safari draws its own search-field chrome (a rounded lozenge with a baked-in cancel icon) that fights whatever shape is set here — turn it off everywhere search inputs appear. */ -webkit-appearance: none; appearance: none; } .error, .errors { color: var(--danger); font-size: 14px; } .errors:empty { display: none; } .errors ul { margin: 0; padding-inline-start: 18px; } /* --------------------------------------------------------------- library -- */ /* The bar at the top of a school, in the shape a phone user knows from a chat: back, a round mark, the name, one action. Fixed, so it survives a flick through a long grid — the name of the school you are in and the way out of it are exactly the two things you want when you are lost in it. Opaque, like the bar at the foot: a translucent strip over a grid of thumbnails makes the title a guess. */ .library-head { position: fixed; left: 0; right: 0; top: 0; /* Under the toasts (60), above everything the page itself draws. */ z-index: 6; background: var(--surface); box-shadow: inset 0 -1px 0 var(--hairline); /* The bar is measured from the top of the window, not from the body, so the notch is its own problem to solve — the same arrangement the navigation bar makes at the other end. */ padding-top: env(safe-area-inset-top); } /* The bar reaches both edges; what is in it lines up with the grid underneath. */ .library-head-inner { display: flex; align-items: center; gap: 9px; max-width: 680px; height: var(--head-height); margin: 0 auto; padding: 0 14px; } .library-head h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; } /* Drawn small, tapped large: 22px of ink inside a 40px target. */ .head-back, .head-action { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 19px; height: 19px; } .head-back::after, .head-action::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; } /* Both header actions in the app's one interactive colour. Grey on the gear beside a blue arrow read as two different kinds of thing, when they are the same kind: the two ways out of the grid. */ .head-back, .head-action { color: var(--accent); } .head-back { margin-inline-start: -4px; } .head-back svg, .head-action svg { width: 100%; height: 100%; } .head-back:active, .head-action:active { opacity: 0.55; } /* The same round mark the list of schools uses, one size down: there it is the row, here it sits beside a title that has to stay the thing you read first. */ .head-mark { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-wash); color: var(--accent); font-size: 10.5px; font-weight: 700; } .head-mark-heart { background: var(--heart-wash); color: var(--heart); } .head-mark-heart svg { width: 15px; height: 15px; } /* Small on purpose: it sits beside the group's name, which is the thing to read on this screen, and a settings control is visited once in a while rather than every visit. */ .icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-sunk); color: var(--ink-2); } /* The button is drawn smaller than the words beside it, but a thumb still needs something to hit. This invisible ring puts the tappable area back at 40px without changing what is on screen. */ .icon-button::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; } .icon-button:hover { background: var(--surface-press); text-decoration: none; } .icon-button svg { /* block, or the svg sits on the text baseline and leaves a descender's worth of space under it - which reads as a glyph nudged up and to the left inside its circle. */ display: block; width: 12px; height: 12px; } .filters { margin-bottom: 16px; } /* Always visible, never a separate expandable panel — narrowing the grid costs one tap, not open-then-pick. Clipped to a fixed height rather than left to scroll off-screen with no sign there was more, with a "meer" chip that reveals the rest. Age and subject are two stacked groups rather than one wrapping line — age (short, fixed at six chips including "Geen") reads as its own row, subject (a longer, per-group list) wraps below it, and which dimension a chip belongs to is which row it's in rather than a thin divider that could land mid-wrap depending on viewport width and vocabulary size. */ /* Shorter than the fields on the forms: this one sits above a grid you are scanning, not in a form you are filling in, so it should take less of the screen. The text stays at 16px on purpose. Anything smaller and iOS Safari zooms the page in the moment the field takes focus, and the reader has to pinch back out to see the results they just narrowed. Height and padding do the shrinking instead. */ .filters input[type="search"] { min-height: 36px; padding: 0 14px; } /* Hidden until the switch above it is on. Not display:none on the group inside — the whole block goes, label and all, so nothing is left hanging under the search field. */ .filter-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* The switch sits on the same line as the search field, to its right, but deliberately not against it. A control welded to the right edge of a search box is read as that box's submit button, and this one does the opposite of searching — it narrows the grid below. The gap is what keeps them two separate controls; they match in height, so the row reads as one line rather than a tall thing with a small thing floating beside it. */ .search-line { display: flex; align-items: center; gap: 12px; } .search-line input[type="search"] { /* min-width:0 because a flex item will not shrink past its intrinsic width without it, and on a narrow phone the button would be pushed off the row instead. */ flex: 1 1 auto; min-width: 0; } .filter-button { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; /* Exactly the search field's height (.filters input[type="search"]). Both are border-box with no border — an inset shadow draws the outline — so the two numbers are directly comparable and any change to one has to be made to the other. */ min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; user-select: none; } .filter-button:hover { background: var(--surface-sunk); } .filter-button svg { width: 13px; height: 13px; flex: 0 0 auto; } /* On, so the switch says so as well as showing it. */ .filter-toggle:checked ~ .filters .chip-row { display: flex; } /* A count in the corner of the switch, and only while the chips are out of sight. Once they are on screen they show which ones are on, and two answers to one question is one too many. */ /* Nothing filtering, nothing to say. The element stays in the DOM so htmx has something to swap. */ .filter-count:empty { display: none; } .filter-count { position: absolute; top: -6px; /* Flush with the button's right edge rather than hanging past it. The button now sits on the page's right margin, and a badge sticking out beyond it was the only thing on the screen crossing the line the search field, the grid and the cards all stop at. It still lifts above the top edge, which is what makes it read as a badge. */ inset-inline-end: 0; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); box-shadow: 0 0 0 2px var(--bg); color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 1; } /* Blijft staan met het paneel open. Hij verdween daar eerst, met als redenering dat de chips het dan zelf wel zeggen — maar dat klopt niet: de chips staan in twee rijen die ook nog ingeklapt kunnen zijn, en dan is er geen enkele plek meer die in één oogopslag zegt hoeveel filters er aan staan. Het getal hoort bij het filteren, niet bij de toestand van het paneel. Wel omgekeerd getekend, want de knop is in open toestand zelf accentkleurig: een accentbadge daarop zou erin verdwijnen. Wit met een accentrand leest tegen allebei. */ .filter-toggle:checked ~ .filters .filter-count { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); color: var(--accent); } /* The second switch: unclips the rows inside the panel. Both live outside the form, so neither fires the search. */ .chip-expand { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .chip-expand:checked ~ .filters .chip-group { max-height: none; } .chip-expand:checked ~ .filters .chip-more { display: none; } .chip.chip-less { display: none; } .chip-expand:checked ~ .filters .chip.chip-less { display: inline-flex; } /* Two classes, higher specificity than .chip alone, so these win regardless of source order. */ .chip.chip-more, .chip.chip-less { color: var(--ink-2); } /* The no-script fallback position: its own right-aligned line below the rows, used until filter-more.js relocates it to sit right after the last chip that actually fits. */ .filters > .chip.chip-more { display: flex; width: fit-content; margin-top: 6px; margin-inline-start: auto; } /* filter-more.js hides the "…" when nothing is actually clipped. Last, and matching the fallback selector above class for class: three separate rules give a chip a display, and a plain .chip[hidden] loses to all of them on specificity or on source order. */ .filters > .chip.chip-more[hidden], .chip.chip-more[hidden], .chip[hidden] { display: none; } .filter-toggle:checked ~ .filters .filter-button { background: var(--accent); box-shadow: none; color: var(--accent-ink); } .filter-toggle:focus-visible ~ .filters .filter-button { outline: 2px solid var(--accent); outline-offset: 2px; } .chip-row { display: none; flex-direction: column; gap: 8px; /* Gap from the search field above, which otherwise touches the first row directly — margins collapse onto this since the field has none of its own. */ margin-top: 10px; } /* One dimension's chips, wrapping independently of the other's. The clamp is per group, not on the pair. It used to be one 66px box around both, which meant a long age row could wrap onto a second line and push the subject row out of sight entirely — at 360px, adding the "LEEFTIJD" label was enough to do exactly that. A line each: whichever group is too long loses its own tail to the "…", never the other group's. */ .chip-group { display: flex; flex-wrap: wrap; align-items: center; max-height: 30px; overflow: hidden; /* 5px rather than 6 for the same reason as the chip padding above — it buys the last few pixels of headroom so the age row survives a font that renders a touch wider. */ gap: 5px; } /* Says what the row is, in the row. Fixed width so the two labels line up under each other and the chips start at the same place on both lines — ragged starts read as two unrelated rows. */ .chip-group-label { flex: 0 0 auto; /* Wide enough for "LEEFTIJD", which is the longer of the two — at 44px it came out as "LEEFTIJC" on a 360px screen. */ width: 52px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; color: var(--ink-3); } /* A plain checkbox-and-label toggle rather than JS: "reveal the rest of this list" is exactly what that pattern is for, and it keeps working if a script fails to load. */ /* Stands where the chip rows would be, so a group that has not made any filters yet is asked for them in the place it would use them. Full width: it is the only thing to do on this line. */ .filter-invite { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 4px 0 2px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); font-size: 14px; } .filter-invite:hover { background: var(--surface-sunk); } .filter-invite svg { width: 16px; height: 16px; flex: 0 0 auto; } .chip { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 100%; min-height: 28px; /* 9px, not 10: measured, not guessed. Adding the "!" badge to the "Geen" chip pushed the six age chips 10px over the line at 360px — the width the phones this is built for actually report — and 1px off each side of six chips buys back 12px. */ padding: 0 9px; border: none; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; user-select: none; transition: transform 140ms var(--ease), background-color 140ms var(--ease), box-shadow 140ms var(--ease), color 140ms var(--ease); } /* The checkbox stays in the accessibility tree; only its rendering is replaced. */ .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .chip:active { transform: scale(0.95); } .chip:has(input:checked), .chip.on { background: var(--accent); box-shadow: none; color: var(--accent-ink); font-weight: 600; } /* Age chips carry no colour of their own - plain at rest, solid accent when checked, exactly like every other untinted chip. Subject is the one row that spends colour; see below. */ /* The "Geen" chip wears a miniature of the corner badge from .tile-warn, so the mark on an untagged card and the filter that collects those cards are recognisably the same thing. */ .chip-untagged::before { content: "!"; display: inline-grid; place-items: center; flex: 0 0 auto; /* Kept deliberately tight: every pixel here pushes the age row towards wrapping onto a second line at 360px, and that row fitting on one line is worth more than a larger badge. */ width: 12px; height: 12px; margin-inline-end: 4px; margin-inline-start: -1px; border-radius: 50%; background: var(--danger); color: var(--danger-ink); font-size: 8px; font-weight: 700; line-height: 1; } /* Selected, the chip fills with the accent — and red on dark blue is barely legible, so the badge inverts rather than keeping a colour that stops reading as a warning. */ .chip-untagged:has(input:checked)::before { background: #fff; color: var(--accent); } /* Subject chips, keyed by position in the group's own vocabulary rather than by value — see the --subject-* tokens. The matching mark on a file's own card (.tile-mark below) reads this same index, so a subject is always the same colour in both places without the two ever needing to agree on a name. Unselected is an outline: the neutral chip surface, the subject's accent on the border and on the dot ahead of the label, its deep colour on the text. Selected fills with that same accent and drops the ring, because a solid fill needs no border to read as "on". The ✓ (further down) says the same thing a second time for anyone who cannot rely on the colour. */ .chip[data-subject-color="0"] { background: var(--surface); color: var(--subject-0-ink); box-shadow: inset 0 0 0 1.5px var(--subject-0); } .chip[data-subject-color="1"] { background: var(--surface); color: var(--subject-1-ink); box-shadow: inset 0 0 0 1.5px var(--subject-1); } .chip[data-subject-color="2"] { background: var(--surface); color: var(--subject-2-ink); box-shadow: inset 0 0 0 1.5px var(--subject-2); } .chip[data-subject-color="3"] { background: var(--surface); color: var(--subject-3-ink); box-shadow: inset 0 0 0 1.5px var(--subject-3); } .chip[data-subject-color="4"] { background: var(--surface); color: var(--subject-4-ink); box-shadow: inset 0 0 0 1.5px var(--subject-4); } .chip[data-subject-color="5"] { background: var(--surface); color: var(--subject-5-ink); box-shadow: inset 0 0 0 1.5px var(--subject-5); } .chip[data-subject-color="6"] { background: var(--surface); color: var(--subject-6-ink); box-shadow: inset 0 0 0 1.5px var(--subject-6); } .chip[data-subject-color="7"] { background: var(--surface); color: var(--subject-7-ink); box-shadow: inset 0 0 0 1.5px var(--subject-7); } .chip[data-subject-color="8"] { background: var(--surface); color: var(--subject-8-ink); box-shadow: inset 0 0 0 1.5px var(--subject-8); } .chip[data-subject-color="9"] { background: var(--surface); color: var(--subject-9-ink); box-shadow: inset 0 0 0 1.5px var(--subject-9); } .chip[data-subject-color="0"]:has(input:checked) { background: var(--subject-0); color: var(--subject-0-on); box-shadow: none; } .chip[data-subject-color="1"]:has(input:checked) { background: var(--subject-1); color: var(--subject-1-on); box-shadow: none; } .chip[data-subject-color="2"]:has(input:checked) { background: var(--subject-2); color: var(--subject-2-on); box-shadow: none; } .chip[data-subject-color="3"]:has(input:checked) { background: var(--subject-3); color: var(--subject-3-on); box-shadow: none; } .chip[data-subject-color="4"]:has(input:checked) { background: var(--subject-4); color: var(--subject-4-on); box-shadow: none; } .chip[data-subject-color="5"]:has(input:checked) { background: var(--subject-5); color: var(--subject-5-on); box-shadow: none; } .chip[data-subject-color="6"]:has(input:checked) { background: var(--subject-6); color: var(--subject-6-on); box-shadow: none; } .chip[data-subject-color="7"]:has(input:checked) { background: var(--subject-7); color: var(--subject-7-on); box-shadow: none; } .chip[data-subject-color="8"]:has(input:checked) { background: var(--subject-8); color: var(--subject-8-on); box-shadow: none; } .chip[data-subject-color="9"]:has(input:checked) { background: var(--subject-9); color: var(--subject-9-on); box-shadow: none; } /* A filled dot ahead of the label on every unselected subject chip — the same glyph a file's own card shows next to that subject, in the same inherited colour, so the two are a direct, side-by-side comparison rather than an outline colour the reader has to separately map to a dot elsewhere. Replaced by the ✓ below the instant the chip is checked, since a solid-fill chip already reads as "this colour" without needing its own swatch repeated on top of it. */ .chip[data-subject-color]::before { content: attr(data-mark); margin-inline-end: 6px; min-width: 13px; padding: 1px 3px; border-radius: 4px; font-size: 9px; font-weight: 700; line-height: 1.2; text-align: center; } /* The mark wears the same fill here as it does on a card, so the two are a direct comparison rather than a letter the reader has to separately map to a colour somewhere else. */ .chip[data-subject-color="0"]::before { background: var(--subject-0); color: var(--subject-0-on); } .chip[data-subject-color="1"]::before { background: var(--subject-1); color: var(--subject-1-on); } .chip[data-subject-color="2"]::before { background: var(--subject-2); color: var(--subject-2-on); } .chip[data-subject-color="3"]::before { background: var(--subject-3); color: var(--subject-3-on); } .chip[data-subject-color="4"]::before { background: var(--subject-4); color: var(--subject-4-on); } .chip[data-subject-color="5"]::before { background: var(--subject-5); color: var(--subject-5-on); } .chip[data-subject-color="6"]::before { background: var(--subject-6); color: var(--subject-6-on); } .chip[data-subject-color="7"]::before { background: var(--subject-7); color: var(--subject-7-on); } .chip[data-subject-color="8"]::before { background: var(--subject-8); color: var(--subject-8-on); } .chip[data-subject-color="9"]::before { background: var(--subject-9); color: var(--subject-9-on); } /* The same ✓ convention the tag editor's chips already use for "this is on". Its colour is whatever .chip's own `color` resolves to at that moment (inherited, not set here), which the rule above already switches to white the instant a subject chip is checked. */ .chip[data-subject-color]:has(input:checked)::before { content: "✓"; background: none; color: inherit; margin-inline-end: 6px; min-width: 0; padding: 0; font-size: 12px; font-weight: 700; } .chip:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; } /* Nothing may be hidden on the tag editor, whose entire job is showing every option — that one wraps instead of scrolling. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; } /* --------------------------------------------------------- bulk tagging -- */ /* Selection is a mode. Entering it is a checkbox-and-label toggle, exactly like the filter row's "meer" reveal, so the whole feature works with no script: the mode checkbox drives the per-tile overlays and the bar at the foot purely through sibling selectors. */ .select-mode { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .grid-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } /* The line under the filters: how many files they leave. Set in from the edge by the same amount the cards are, so it lines up with the first column. */ .grid-count { margin: 0 0 8px; padding: 0 2px; } .select-toggle { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; } .select-toggle:hover { background: var(--surface-sunk); } /* The way in with no script. Once bulk-select.js runs it sets .has-longpress on and this folds down to nothing visible — but stays in the tab order and comes back the moment it takes keyboard focus, because press-and-hold is a gesture a keyboard cannot make. */ .select-mode:checked ~ .grid-head .select-enter { display: none; } .has-longpress .select-enter { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .has-longpress .select-enter:focus-visible { position: static; width: auto; height: auto; padding: 0 12px; overflow: visible; clip-path: none; } .has-longpress .grid-head { margin: 0; } /* The mode's own controls, in the bar at the foot rather than above the grid. */ .bulk-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } .select-leave { margin-inline-start: auto; background: var(--accent); box-shadow: none; color: var(--accent-ink); } .select-leave:hover { background: var(--accent-press); } .select-count { font-size: 13px; font-weight: 500; color: var(--ink-2); } .tile-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Inert while browsing; in selection mode it covers the whole card - above the tile's own link and above the corner badges - so a tap can only ever mean "select this". */ /* A footer row across the whole foot of the card. It is a sibling of .tile rather than a child — neither a