/* Rindöborna-tema för publicerade Grist-formulär. * * Monteras som /grist/static/custom.css och dras in i på ALLA * Grist-sidor när APP_STATIC_INCLUDE_CUSTOM_CSS=true. Vi vill bara påverka * publicerade formulär, inte redigerings-UI:t styrelsen jobbar i — därför * ligger allt utom @font-face bakom scope-selektorn nedan. * * Scope-hooken: publicerade formulär laddar en egen bundle, form.bundle.js, * som ingen annan Grist-sida drar in. `body:has(> script[src="form.bundle.js"])` * matchar alltså exakt formulärsidorna. Byter Grist namn på bundlen slutar * temat gälla (formulären blir ostylade, inget går sönder) — kontrollera den * här selektorn vid större version-bumpar. * * Om selektorer: grainjs styled() genererar hashade klassnamn (_grain336_) * som ändras mellan builds — dem rör vi inte. Däremot sätter Grist ut egna * test-hooks (test-form-framing, test-form-reset, test-form-field ...) som * deras nbrowser-svit hänger på; de är stabila och används här. Resten är * elementselektorer och struktur. * * Förlagan är webbplatsen, inte Bibblan: formulären länkas från * www.rindoborna.se och fylls i av medlemmar som just kommit därifrån. * Se www.rindoborna.se/src/styles/global.css och * src/pages/nyheter/[slug].astro. Sajten är serif rakt igenom — Oswald * finns definierad som --font-display där men används inte i src/, så vi * använder den inte heller här. */ /* Source Serif 4 — mellansteget i serif-stacken. macOS-läsare får Iowan Old * Style från systemet; Linux/Windows faller ned hit i stället för en godtycklig * system-serif. Samma variabla filer som sajten och Bibblan använder. * Monteras på /grist/static/rindoborna-fonts/; URL:erna är relativa mot * som Grist sätter, därför ingen inledande slash. */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('rindoborna-fonts/source-serif-4-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; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('rindoborna-fonts/source-serif-4-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; } /* ---------------------------------------------------------------------- */ /* Allt nedanför gäller enbart publicerade formulär. */ /* ---------------------------------------------------------------------- */ body:has(> script[src="form.bundle.js"]) { --rindo-blue-dark: #3d5c7a; --rindo-blue: #6a7797; --rindo-paper: #f5f3ef; --rindo-sand: #f0e8d4; --rindo-ink: #292524; /* stone-800, sajtens brödtext */ --rindo-ink-muted: #44403c; /* stone-700, markdown-texten */ --rindo-line: #d6d3d1; /* stone-300, sajtens avdelare */ --rindo-serif: 'Iowan Old Style', 'Source Serif 4', 'Palatino Linotype', 'Palatino', serif; /* Grists gröna accentfärger. De sitter i legacy-variabler som används rakt * av i komponent-CSS:en — t.ex. ramen runt formuläret * (border: 2px solid var(--grist-color-light-green)) och asterisken på * obligatoriska fält. Att peka om dem här färgar allt grönt på en gång, * i stället för att jaga varje enskild regel. */ --grist-color-light-green: var(--rindo-blue-dark); --grist-color-lighter-green: var(--rindo-blue); --grist-color-dark-green: var(--rindo-blue-dark); --grist-color-darker-green: var(--rindo-blue-dark); /* Samma sak för text och avdelare: Grists komponent-CSS läser dem härifrån * (t.ex. ramen runt fältgruppen, border: 1px solid var(--grist-color-dark-grey)). */ --grist-color-dark: var(--rindo-ink); --grist-color-dark-grey: var(--rindo-line); --grist-color-slate: var(--rindo-ink-muted); background: var(--rindo-paper); color: var(--rindo-ink); font-family: var(--rindo-serif); line-height: 1.625; /* leading-relaxed, som sajtens */ } /* Grists egen inramning: 2px grön ram med 20px tjock ovankant, och ovanpå den * en absolutpositionerad "Grist Form"-badge med tooltip. Vi tar bort hela * inramningen i stället för att färga om den — göms badgen men ramen står * kvar blir ovankanten bara ett tomt 20px-band. * * Scope-prefixet ger högre specificitet än grainjs klassregler, så inga * !important behövs trots att deras