/* ========================================================================== TEMA — lyst og mørkt HVORDAN DET HENGER SAMMEN nordiva.css ER det lyse temaet. Den er kopiert fra kreatørportalen, og den flaten er lys av natur. Dette laget definerer to ting: 1. et sett FLATETOKENS som begge temaene fyller med hver sine verdier 2. de mørke verdiene, under :root[data-tema="mork"] Grunnen til at det finnes egne flatetokens: første utgave hadde rgba(255,255,255,.06) og lignende spredt utover tjue regler. Det virker i mørkt tema og blir usynlig i lyst — hvit gjennomsiktighet på hvit flate er ingenting. Nå peker hver regel på et token, og temaet avgjør verdien. VALGET LAGRES PER NETTLESER, ikke per konto. En som jobber lyst på kontoret og mørkt hjemme skal ikke måtte velge om for hver maskin. Se assets/tema.js. Uten et lagret valg følger vi systemet, slik alt annet på maskinen gjør. ========================================================================== */ /* ========================================================================== «hidden» SKAL BETY SKJULT Standardregelen for hidden er «display: none», men den taper mot enhver annen display-regel. «.btn { display: inline-flex }» gjør at en knapp med hidden fortsatt vises — og da står det knapper på skjermen som ikke gjør noe når man trykker. Denne fella har bitt i dette prosjektet minst ni ganger: valgraden, knapperaden, søkekrysset, bolkoverskriften, visningsruta, redigeringen, tilbakestill-knappen, fakturastripa, og til slutt «Send til redigereren» og WhatsApp-knappen. Hver gang ble den lappet med en ny regel for akkurat det elementet. Dette er lappen som gjelder alt. De ni enkeltreglene er fjernet. ========================================================================== */ [hidden] { display: none !important; } /* --- LYST: standardverdiene --------------------------------------------- Fargene er nordiva.css sine egne. Her navngis bare flatene den bruker, så det mørke temaet har noe å bytte ut. */ :root { --flate-topp: rgba(255, 255, 255, .82); --flate-meny: #FFFFFF; --flate-meny2: #FFFFFF; --flate-kort: #FFFFFF; --flate-klippkort: #FFFFFF; --flate-bilde: var(--lodd-flate-3); --flate-felt: #FFFFFF; --flate-felt-fokus: #FFFFFF; --flate-knapp: #FFFFFF; --flate-knapp-hover: var(--lodd-flate-2); --flate-svak: var(--lodd-flate-2); --flate-hover: var(--lodd-flate-3); --flate-valgrad: rgba(255, 255, 255, .95); --kant-kort: var(--line); --ink-svak: var(--lodd-ink-3); /* Merkelappene på miniatyrbildene ligger OVER et bilde, ikke over flaten. De skal være mørke i begge temaer — hvit tekst på lys plate forsvinner mot et lyst klipp. */ --flate-krukke: rgba(6, 11, 30, .78); --flate-krukke-hover: rgba(6, 11, 30, .92); /* Bølgene bak innloggingen. På lys flate må de være mørkere enn bakgrunnen, ikke lysere — ellers forsvinner de helt. */ --bolge-grunn: rgba(14, 27, 77, .10); --bolge-lys: #2A54CF; --bolge-glod: rgba(47, 91, 216, .38); } /* --- MØRKT --------------------------------------------------------------- */ :root[data-tema="mork"] { /* ===== PALETTEN KOMMER FRA LODD ===================================== 27. september 2026. Portalen og OS-et så ut som to produkter, og det var ikke en tilfeldighet: de hadde hvert sitt variabelsett, og de hadde drevet fra hverandre. Papiret her var varmt (#F7F6F4, rødt høyest og blått lavest) mens OS-ets var nøytralt. Nå lastes assets/lodd-tokens.css FØR denne fila. Den har bare verdiene fra Lodd, ingen komponentregler, så ingenting kan kollidere med nordiva.css. De navnene Lodd og portalen deler, er tatt ut her, slik at Lodds verdi står. De navnene bare portalen har, PEKER på et Lodd-token i stedet for å gjenta en verdi. Regelen videre: en farge skrives ett sted. Skal noe endres, endres det i lodd.css i nordiva-os, og del-lodd.sh tar det hit. ================== */ /* --paper, --line, --ink og --brand er tatt ut: Lodd har dem, med de samme navnene, og lodd-tokens.css lastes foer denne fila. --ink var alt identisk (#E9EEFB), og det samme var --brand (#4C7DFF). */ --card: var(--flate); --brand-myk: rgb(var(--brand-rgb) / .14); /* Disse tre staar i nordiva.css, som er en laast kopi og lastes ETTER lodd-tokens.css. Derfor kan de ikke bare tas ut her: de maa PEKES, og tema.css lastes sist. Se lag-tokenfil.py i nordiva-os. */ --paper: var(--lodd-paper); --ink: var(--lodd-ink); --line: var(--lodd-line); --line-mork: var(--line-2); --ink-soft: var(--ink-2); --ink-svak: var(--ink-3); /* --brand-mork er IKKE --brand-hover. Portalens er moerkere enn merket, Lodds er lysere. Samme jobb, motsatt retning i lyst tema, saa den staar som portalens egen til noen har sett paa hva den faktisk brukes til. */ --brand-mork: #3A66E0; /* De lyse statusbakgrunnene fra kreatørportalen blir lysende flekker på mørk flate. Her bærer fargen teksten, og bakgrunnen er bare et hint. */ --green: #5FD99B; --green-bg: rgba(95, 217, 155, .13); --green-line: rgba(95, 217, 155, .32); --red: #FF8B8B; --red-bg: rgba(255, 139, 139, .13); --red-line: rgba(255, 139, 139, .32); --amber: #F2C46B; --amber-bg: rgba(242, 196, 107, .13); --amber-line: rgba(242, 196, 107, .32); --violet: #A9B6FF; --violet-bg: rgba(169, 182, 255, .13); --violet-line: rgba(169, 182, 255, .32); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.38); --shadow-lav: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.3); --flate-topp: var(--lodd-paper); --flate-meny: var(--lodd-flate); --flate-meny2: var(--lodd-flate); --flate-kort: var(--lodd-flate); --flate-klippkort: var(--lodd-flate-2); --flate-bilde: var(--lodd-skjerm); --flate-felt: rgba(255, 255, 255, .045); --flate-felt-fokus: rgba(255, 255, 255, .075); --flate-knapp: rgba(255, 255, 255, .06); --flate-knapp-hover: rgba(255, 255, 255, .10); --flate-svak: rgba(255, 255, 255, .05); --flate-hover: rgba(255, 255, 255, .09); --flate-valgrad: rgba(14, 27, 77, .93); --kant-kort: var(--lodd-line); --bolge-grunn: rgba(120, 160, 255, .11); --bolge-lys: #9CC0FF; --bolge-glod: rgba(96, 145, 255, .75); } /* --- bare i mørkt -------------------------------------------------------- Lyset i bakgrunnen og den snudde logoen hører til det mørke temaet alene. To myke skjær som ligger fast i vinduet, så flaten får dybde uten at noe beveger seg mens man jobber. */ :root[data-tema="mork"] body { background: radial-gradient(1100px 620px at 12% -8%, rgba(76, 125, 255, .20), transparent 62%), radial-gradient(900px 520px at 92% 108%, rgba(76, 125, 255, .11), transparent 60%), var(--paper); background-attachment: fixed; } /* Logoen er marineblå og forsvinner mot marineblått. I lyst tema står den som den er — der er den riktig fra før. */ :root[data-tema="mork"] .logo, :root[data-tema="mork"] .loginlogo { filter: brightness(0) invert(1); } :root[data-tema="mork"] select { color-scheme: dark; } /* --- flater som var hvite ------------------------------------------------- */ .topplinje { background: var(--flate-topp); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .sidemeny, .bunnmeny, .ark .arkinnhold { background: var(--flate-meny); border: 1px solid var(--line); } .bunnmeny { backdrop-filter: blur(14px); } /* Tekstfargen på knappene fulgte ikke med da menyen fikk temaets flate. nordiva.css gir dem hvit tekst for den blå pilla, og i lyst tema ble det hvitt på hvitt: bare det valgte punktet var synlig. Oppdaget 11. september 2026 i forhåndsvisningen av adminpanelet på telefon. */ .bunnmeny button { color: var(--ink-soft); } /* Valgt punkt i menyen. Merkefargen som svakt felt, ikke som fyll — et fylt punkt i en meny drar blikket vekk fra innholdet det peker på. */ .sidemeny button[aria-current="true"], .bunnmeny button[aria-current="true"] { background: var(--brand-myk); color: var(--ink); } .sidemeny button:hover, .bunnmeny button:hover { background: var(--flate-svak); } /* --- felt ----------------------------------------------------------------- */ input, select, textarea { background: var(--flate-felt); border-color: var(--line); color: var(--ink); } input:focus, select:focus, textarea:focus { border-color: var(--brand); background: var(--flate-felt-fokus); outline: none; box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .18); } input::placeholder, textarea::placeholder { color: var(--ink-svak); } /* Her sto «select { color-scheme: dark }» uten noen betingelse. Det er en rest fra da mørkt var det eneste temaet: i lyst tema fikk man en mørk nedtrekksliste midt i en lys side. Regelen finnes allerede lenger oppe, riktig avgrenset til [data-tema="mork"]. */ /* --- knapper --------------------------------------------------------------- */ .btn.rolig { background: var(--flate-knapp); border-color: var(--line); color: var(--ink); } .btn.rolig:hover { background: var(--flate-knapp-hover); border-color: var(--line-mork); } /* --- kort og striper ------------------------------------------------------- */ .kort, .oppdragskort, .varsel { background: var(--flate-kort); border: 1px solid var(--line); } .oppdragskort:hover { border-color: var(--brand); background: rgb(var(--brand-rgb) / .07); } .stripe { border-color: var(--line); } /* Videoruta skal være svart, ikke grå. Alt annet enn svart rundt et klipp forskyver hvordan man leser bildet. */ .videoramme { background: #000; border: 1px solid var(--line); } .videoramme .mangler { color: var(--ink-soft); } /* --- småting --------------------------------------------------------------- */ .merkepille { background: var(--brand-myk); color: var(--ink); border: 1px solid rgb(var(--brand-rgb) / .3); } .brukerchip { background: var(--flate-svak); border: 1px solid var(--line); } .brukerchip:hover { background: var(--flate-hover); } .initialer { background: var(--brand); color: #fff; } .meny2 { background: var(--flate-meny2); border: 1px solid var(--line-mork); } .meny2 button:hover { background: var(--flate-knapp); } .tomstat { color: var(--ink-soft); } .tomstat .ikon svg { opacity: .55; } .loginbunn, .hint { color: var(--ink-soft); } .loginskille:before, .loginskille:after { background: var(--line); } a { color: var(--brand); } code { background: var(--flate-felt-fokus); color: var(--ink); padding: 2px 6px; border-radius: var(--r-2); } /* ========================================================================== BØLGENE BAK INNLOGGINGEN ========================================================================== */ .bolger { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* Ligger i #login, som skjules når man er innlogget. Bølgene forsvinner dermed av seg selv idet arbeidsflaten åpnes — ingen egen regel for det. */ } /* Kortet må ligge over. «.loginside { z-index: 1 }» var ikke nok. Bølgene er «position: fixed» med «z-index: 0», altså et POSISJONERT element, mens kortet var statisk. Posisjonerte elementer males over statiske uansett rekkefølge i koden, så linjene la seg oppå innloggingen og gjorde teksten urolig å lese. Kortet må derfor selv være posisjonert for å komme over. */ .loginside { position: relative; z-index: 1; } /* Lyslaget ligger paa z-index 0, som bolgene. Kortet maa over begge. */ .loginkort { position: relative; z-index: 2; } .loginbunn, .loginsprak { position: relative; z-index: 2; } .bolger .grunn use { fill: none; stroke: var(--bolge-grunn); stroke-width: 1.1; } /* LYSET, OG HVORFOR DET IKKE LIGGER I SVG-EN Foerste utgave hadde lyspunktene som streker inne i SVG-en, animert med «stroke-dashoffset». Det var feil verktoey, og det lot seg ikke redde med finjustering. «stroke-dashoffset» er MALING: fjorten baner maatte tegnes fullstendig om for hvert bilde. Vi halverte geometrien, smalnet gloeden og kuttet fra seksten striper til sju, og det hakket fortsatt, fordi omtegningen i seg selv var problemet. «transform» males ikke. Skjermkortet flytter et ferdig tegnet lag, og koster like lite enten laget er lite og blekt eller stort og glodende. Derfor kan lyset her vaere saa langt og saa kraftig som det skal, uten at det merkes. Slik henger det sammen: .bolger seksten svake linjer i SVG. Tegnes EN gang. Ingen animasjon. .bolgelys et lag med maske formet som de samme seksten linjene. .skimmer tre myke lysflekker inni. De glir; maska klipper dem til traadene. Lys som beveger seg langs linjene, uten at en eneste linje tegnes om. Alle tre starter samtidig. Ingen forsinkelser, altsaa ingen striper som tennes ovenfra og nedover etter tur. -------------------------------- */ .bolgelys { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint style; -webkit-mask-image: url(bolger-maske.svg?v=1); mask-image: url(bolger-maske.svg?v=1); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* Tones inn naar siden er tegnet. Se tema.js. */ opacity: 0; transition: opacity 1.2s ease; } .igang .bolgelys { opacity: 1; } /* BOELGENE Tre smale lysbaand som gaar tvers over. Tre valg gjoer at det leses som en boelge og ikke som at bakgrunnen blinker: SMALE, IKKE BREDE. Foerste utgave var 46, 62 og 38 prosent brede. De overlappet hverandre og dekket hele flata samtidig, saa alt lyste likt og ingenting saa ut til aa bevege seg. Et baand maa vaere smalere enn flata for at man skal se at det passerer. LINEAER FART. «ease-in-out» bremser inn og ut ved hver ende. Det leses som at noe dukker opp og forsvinner igjen. En boelge holder farten. INGEN FELLES PULS. Foer laa det en egen «puste» oppaa som tok hele laget fra 45 til 100 prosent styrke. Da lyste og sluknet hele bakgrunnen i takt, uansett hvor baandene befant seg. Det var akkurat det som poppet. Lyset varierer naa bare fordi baandet flytter seg. NEGATIV FORSINKELSE er ikke en detalj: den starter animasjonen et stykke uti. Uten den ville alle tre staatt til venstre i det siden aapner, og saa krysset skjermen i flokk. Med den ligger de spredt fra foerste bilde. */ .skimmer { position: absolute; top: -50%; height: 200%; left: 0; background: radial-gradient(closest-side, var(--bolge-lys) 0%, var(--bolge-glod) 45%, transparent 78%); will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; } .skimmer.en { width: 24%; animation-name: boelge1; animation-duration: 15s; animation-delay: 0s; } .skimmer.to { width: 32%; animation-name: boelge2; animation-duration: 23s; animation-delay: -9s; } .skimmer.tre { width: 19%; animation-name: boelge3; animation-duration: 19s; animation-delay: -14s; } /* Forskyvningen er i prosent av BAANDETS egen bredde, ikke skjermens. Et baand paa 24 prosent maa derfor flytte seg rundt 420 prosent for aa krysse hele flata, og litt til i hver ende saa det gaar helt ut av bildet foer det begynner paa nytt. Da er hoppet ved omstart usynlig. Den lille hellingen foelger baandet linjene ligger i, saa lyset kommer paa skraa slik boelgene gjoer. */ @keyframes boelge1 { from { transform: translate3d(-120%, -5%, 0) rotate(-5deg); } to { transform: translate3d(540%, 5%, 0) rotate(-5deg); } } @keyframes boelge2 { from { transform: translate3d(-120%, 6%, 0) rotate(-7deg); } to { transform: translate3d(430%, -4%, 0) rotate(-7deg); } } @keyframes boelge3 { from { transform: translate3d(-120%, -8%, 0) rotate(-4deg); } to { transform: translate3d(660%, 8%, 0) rotate(-4deg); } } /* Uten maskestoette ville lysflekkene ligget som store blaa skyer over hele siden i stedet for aa foelge traadene. Da er det bedre aa la vaere. */ @supports not ((-webkit-mask-image: url(x)) or (mask-image: url(x))) { .bolgelys { display: none; } } /* Den som har slaatt av bevegelse i systemet skal ikke faa den likevel. Traadene staar da opplyst og stille. */ @media (prefers-reduced-motion: reduce) { .skimmer { animation: none; } .skimmer.en { transform: translate3d(120%, 0, 0); } .skimmer.to { transform: translate3d(200%, 0, 0); } .skimmer.tre { transform: translate3d(380%, 0, 0); } } /* ========================================================================== KLIPPSØKET — bygget som Drives rutenett Målt fra et skjermbilde av Drive, ikke skjønnsmessig lignet: kolonner 6 på 1445 px innholdsbredde kortbredde 223 px kolonneavstand 23 px, radavstand 26 px topplinje 37 px, med filmikon og navn bilde 211 x 176 px, altså forholdet 6:5 innrykk 6 px rundt bildet, inne i kortet DET AVGJØRENDE ER LIK HØYDE PÅ ALLE KORT. Første utgave lot hvert kort beholde klippets eget sideforhold, og et rutenett der 16:9 og 1:1 står ved siden av hverandre blir ujevnt. Drive beskjærer i stedet alt til samme ramme, og det er derfor øyet kan skanne nedover i rette linjer. Formatet går ikke tapt av beskjæringen — det står som merkelapp på bildet. ========================================================================== */ .klippnett { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); column-gap: 23px; row-gap: 26px; } .innhold .klippkort { /* MÅ være relative. .klippknapper er absolutt plassert og er SØSKEN av .klippbilde, ikke barn av den. Uten dette fester knappene seg til nærmeste posisjonerte forelder lenger opp i treet, og havner et vilkårlig sted på siden — synlig som en løs grå strek nederst på noen kort. */ position: relative; display: block; padding: 0 6px 6px; overflow: hidden; text-decoration: none; color: inherit; /* Løftet et hakk over --card. I Drive står hvite kort mot lys grå bakgrunn og leses som atskilte fliser; mørkeblått på mørkeblått gjør at rutenettet flyter sammen til én flate. Litt lysere kort og en synligere kant gir samme skille uten å bryte med paletten. */ background: var(--flate-klippkort); border: 1px solid var(--kant-kort); border-radius: var(--r-3); transition: border-color .13s ease, background .13s ease; } .innhold .klippkort + .klippkort { margin-top: 0; } a.klippkort:hover { border-color: var(--brand); background: rgb(var(--brand-rgb) / .1); } /* Topplinja: filmikon og navn, som i Drive. Fast høyde, så kortene står i linje selv når teksten er kort. */ .klipptopp { display: flex; align-items: center; gap: 8px; height: 37px; padding: 0 4px; font-size: var(--t-3); color: var(--ink); } .klipptopp svg { width: 16px; height: 16px; flex: none; color: #E5484D; } .klipptopp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 6:5, som målt. object-fit cover beskjærer, slik Drive gjør. */ .klippbilde { position: relative; display: block; aspect-ratio: 6 / 5; background: var(--flate-bilde); border-radius: var(--r-2); overflow: hidden; } .klippbilde img { width: 100%; height: 100%; object-fit: cover; display: block; } .klippformat, .klipptid { position: absolute; background: rgba(0,0,0,.7); color: #fff; font-size: var(--t-1); padding: 2px 6px; border-radius: var(--r-2); line-height: 1.4; } .klippformat { left: 6px; top: 6px; letter-spacing: .02em; } .klipptid { right: 6px; bottom: 6px; font-variant-numeric: tabular-nums; } /* GAMMEL MODELL. Rød kant rundt hele kortet — i et rutenett man skanner raskt må advarselen leses som en form, ikke som tekst man rekker å overse. */ .innhold .klippkort.gammel { border-color: var(--red); } .innhold .klippkort.gammel .klippbilde { box-shadow: inset 0 0 0 2px var(--red); } .klippgammel { position: absolute; left: 6px; bottom: 6px; background: var(--red); color: #fff; font-size: var(--t-1); font-weight: 600; padding: 2px 6px; border-radius: var(--r-2); } .filterknapp.valgt { background: var(--brand); border-color: var(--brand); color: #fff; } /* Ordforslagene. Vises mens man skriver, forsvinner når ordet er ferdig. Tallet bak er antall klipp — det gjør valget for deg når to ord ligner. */ .forslagsrad { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .forslagsrad:empty { margin: 0; } /* Forslagene er hint, ikke handlinger. De sto like store som filterknappene over dem og konkurrerte om oppmerksomheten — nå leses de som det de er. */ .btn.forslag { padding: 3px 10px; font-size: var(--t-2); min-height: 0; border-radius: 999px; font-weight: 500; } .forslagtall { opacity: .45; font-size: var(--t-2); font-variant-numeric: tabular-nums; margin-left: 3px; } .forslagsrad { gap: 5px; margin-top: 8px; } /* --- valg og nedlasting ------------------------------------------------- */ /* Knappene ligger over bildet og kommer fram når musa er på kortet. På berøringsskjerm finnes ingen hover, så der står de alltid synlige — en knapp man ikke kan få øye på er ingen knapp. */ /* ALLTID SYNLIGE. Første utgave viste dem bare ved hover. Det er ryddig, og det er feil: en nedlastingsknapp man må lete etter med musa er en knapp folk ikke vet finnes — og på berøringsskjerm finnes hover ikke i det hele tatt. De er dempet til man er borti kortet, så de ikke konkurrerer med bildet. */ .klippknapper { position: absolute; right: 12px; top: 43px; display: flex; gap: 5px; opacity: .82; transition: opacity .12s ease; } .klippkort:hover .klippknapper, .klippkort:focus-within .klippknapper, .klippkort.valgt .klippknapper { opacity: 1; } .kruk { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--flate-krukke); color: #fff; backdrop-filter: blur(6px); } .kruk:hover { background: var(--flate-krukke-hover); } .kruk svg { width: 15px; height: 15px; } .kruk.velg.pa { background: var(--brand); } /* Valgt kort: full ramme i merkefargen, så man ser hva som er plukket ut når man scroller nedover i et rutenett med seksti kort. */ .innhold .klippkort.valgt { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } /* Handlingslinja. Klistrer seg til toppen når man scroller, ellers må man tilbake opp for å laste ned det man nettopp valgte lenger nede. */ /* hidden MÅ vinne over display:flex. Dette er fella fra kreatørprosjektets STATUS.md, og den tok oss her også: «Vis større»-knappen ble skjult med hidden, men .storknapp satte display:block, og en eksplisitt display slår hidden-attributtet. Knappen ble stående synlig uten å gjøre noe. Her sto handlingslinja framme med «Last ned» og «Fjern valg» før noe var valgt i det hele tatt. */ .valgrad { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 11px 14px; background: var(--flate-valgrad); backdrop-filter: blur(10px); border: 1px solid var(--brand); border-radius: var(--r-2); } .valgrad > span:first-child { font-weight: 600; margin-right: auto; } .valgrad .btn { padding: 8px 15px; font-size: var(--t-4); } /* KLIPPSKJERMEN BRUKER HELE BREDDEN Alle andre skjermer har en lesespalte med tak, og det er riktig: brødtekst som går over hele en bred skjerm er tung å lese, fordi øyet mister linja på vei tilbake til venstre. Et rutenett med miniatyrbilder har ikke det problemet. Der er taket bare bortkastet plass — man ser fire klipp der det var rom for åtte. Drive bruker hele vinduet, og det er hele grunnen til at man finner fram i det. Derfor: taket bort, og la kolonnene fylle det som finnes. */ #skjerm-klipp .wrap { max-width: none; } /* Samme felle, samme sted: .knapperad er også display:flex, så «Vis flere»- knappen ville stått framme selv når alt var vist. */ /* --- søkefeltet ---------------------------------------------------------- nordiva.css gir width:100% til text, email, tel, url og date — men ikke til type=search. Derfor sto feltet som en liten boks på 150 px i stedet for å fylle kortet. Her settes det eksplisitt. Feltet er dessuten den viktigste kontrollen på hele skjermen: 844 klipp finnes ikke ved å bla. Det skal se ut som et søkefelt på avstand. */ .sokefelt { position: relative; display: flex; align-items: center; } .sokefelt .sokikon { position: absolute; left: 20px; width: 21px; height: 21px; color: var(--ink-soft); pointer-events: none; } .innhold .sokefelt input[type=search] { width: 100%; font: inherit; font-size: var(--t-5); min-height: 58px; padding: 16px 52px 16px 52px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--flate-svak); color: var(--ink); -webkit-appearance: none; appearance: none; } .innhold .sokefelt input[type=search]::-webkit-search-cancel-button { display: none; } .innhold .sokefelt input[type=search]:focus { border-color: var(--brand); background: var(--flate-felt-fokus); outline: none; box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .16); } .sokstryk { position: absolute; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--flate-hover); color: var(--ink); /* Sentreres med flex, ikke med line-height: 1. Det siste virker for ett tegn, men arver nedover og gjør enhver tekst inni knappen uleselig. */ display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-6); cursor: pointer; } .sokstryk:hover { background: var(--flate-hover); } .skjultetikett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .velgerad { align-items: center; margin: 0; } /* Søkeblokka tok over 400 px før første klipp kom til syne. Den er et verktøy, ikke innholdet — klippene skal begynne høyt oppe på skjermen. */ #skjerm-klipp .kort { padding: 16px 18px; } #skjerm-klipp .kort .knapperad { margin: 12px 0 0; gap: 8px; } #skjerm-klipp .kort .knapperad .btn { padding: 9px 16px; font-size: var(--t-4); } #skjerm-klipp h1 { margin-bottom: 4px; } #skjerm-klipp .lead { margin-bottom: 14px; } #klipp-teller { margin: 14px 0 10px; } /* ========================================================================== INNHOLDET FORANKRES TIL VENSTRE nordiva.css sentrerer lesespalta med «margin: 0 auto». Det er riktig for kreatørportalen, som er en side man LESER: en spalte midt på skjermen med luft rundt er behagelig for løpende tekst. Dette er et adminpanel. Her ligger det en meny til venstre, og da leses sentrert innhold som «halvveis plassert» — overskriften starter fem hundre piksler fra menyen, med tomrom på begge sider og ingen tydelig venstrekant. Drive, Shopify og Linear gjør alle det samme: innholdet begynner der menyen slutter. Øyet får én venstrekant å forholde seg til nedover hele siden. Taket beholdes, men litt høyere enn 740: skjemaer og vurderingskort tåler mer bredde enn brødtekst gjør. ========================================================================== */ .innhold .wrap { margin-left: 0; margin-right: auto; max-width: 980px; } /* Tomme tilstander sentrerte seg i spalta og havnet dermed enda lenger til høyre. De hører til venstre som alt annet, og de trenger ikke halve skjermen i høyde heller. */ .innhold .tomstat { text-align: left; align-items: flex-start; padding: 26px 0; max-width: 46em; } .innhold .tomstat .ikon { margin-left: 0; } /* Klippskjermen er unntaket: der er det et rutenett, og det skal ha alt. */ #skjerm-klipp .wrap { max-width: none; } /* .rad settes til display:block et sted i nordiva.css, og da faller statuslappen ned under teksten i stedet for å stå til høyre. Vi setter den eksplisitt for kortene i adminflaten framfor å lete etter regelen som vant — den kan endre seg neste gang designsystemet oppdateres. */ .innhold .kort > .rad, .innhold .stripe > .rad { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0; flex-wrap: wrap; } .innhold .kort > .rad > .venstre { flex: 1 1 260px; min-width: 0; } .innhold .kort > .rad > .hoyre { flex: 0 0 auto; text-align: right; } /* --- dra for å velge ------------------------------------------------------ */ .dragramme { position: fixed; z-index: 40; pointer-events: none; background: rgb(var(--brand-rgb) / .16); border: 1px solid var(--brand); border-radius: var(--r-1); } /* Mens man drar skal ingenting markeres som tekst, og musepekeren skal ikke bytte til «lenke» over hvert kort den passerer. */ body.drar, body.drar * { user-select: none; -webkit-user-select: none; cursor: crosshair !important; } /* Hjelpeteksten under filtrene forklarer de tre måtene. */ /* «Vis flere» klemte seg inntil siste rad, venstrestilt under et halvtomt rutenett. Den er en avslutning på lista og hører midt under den, med luft nok til at den ikke leses som enda et kort. */ #klipp-mer-rad { justify-content: center; margin: 30px 0 8px; } #klipp-mer-rad .btn { padding: 12px 28px; } /* --- bunnlinje ------------------------------------------------------------ Én rolig linje som avslutter siden. Uten den slutter innholdet bare midt i ingenting, og en lang liste ser ut som den er kuttet av. */ .appbunn { /* Samme innrykk som .wrap, så bunnlinja står i linje med overskriftene over. Uten det starter den 24 px lenger til venstre enn alt annet, og hele siden mister venstrekanten sin helt nederst. */ margin: var(--luft-5) 0 0; padding: 22px 24px 30px; max-width: 980px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } .appbunn a { color: var(--ink-soft); text-decoration: underline; } .appbunn a:hover { color: var(--brand); } /* «prikk» er tellermerket i menyen — et gult pilleformet tall. Bunnlinjas skilletegn lånte samme klasse, og arvet dermed en farge og en form det ikke skulle hatt. Skilletegnet heter «skille» nå, og er dessuten skjult for skjermlesere: det er tegnsetting, ikke innhold. */ .appbunn .skille { opacity: .4; } /* --- topplinja i hjørnene ------------------------------------------------- .wrap.bred sentrerer med maksbredde, og på en bred skjerm havnet logoen flere hundre piksler inn fra venstre kant mens brukerchipen sto like langt inn fra høyre. Det leses som at linja «flyter» midt på skjermen. En topplinje er ramme, ikke innhold. Den skal spenne hele vinduet, med logoen i venstre hjørne og brukeren i høyre — slik Drive, Shopify og alt annet med en toppmeny gjør det. */ .topplinje .wrap { max-width: none; padding-left: 22px; padding-right: 22px; } /* «Vis flere» sto tett inntil siste rad med klipp. Den avslutter lista og trenger tydelig avstand oppover, ellers leses den nesten som enda et kort. */ #klipp-mer-rad { justify-content: center; margin: 54px 0 10px; } /* --- temabryteren --------------------------------------------------------- En rund knapp i topplinja, som hos TIHLDE. Sola vises i mørkt tema (trykk for lys), månen i lyst. Ikonet viser hva du får, ikke hva du har — det er den tolkningen folk gjetter på først. Den ligger til venstre for brukerchipen, fordi den hører til flaten og ikke til kontoen. Valget lagres i nettleseren, ikke på kontoen: en som jobber lyst på kontoret og mørkt hjemme skal slippe å velge om hver gang. */ .temabryter { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--flate-svak); color: var(--ink); cursor: pointer; padding: 0; margin-right: 10px; } .temabryter:hover { background: var(--flate-hover); } .temabryter svg { width: 18px; height: 18px; } .temabryter .sol { display: none; } :root[data-tema="mork"] .temabryter .sol { display: block; } :root[data-tema="mork"] .temabryter .mane { display: none; } /* --- folk ---------------------------------------------------------------- Kortet er én rad: bilde, tekst, status. Samme geometri uansett hvor mye som står i midten, så bunnlinja ikke danser nedover lista. */ .innhold .personkort { display: flex; align-items: center; gap: 16px; padding: 16px 20px; } .persontekst { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .personnavn { font-weight: 600; font-size: var(--t-5); } .persontekst .hint { margin: 0; font-size: var(--t-3); } .personhoyre { display: flex; align-items: center; gap: 16px; flex: none; } /* Initialen som profilbilde. Fargen utledes av e-postadressen, så samme person får samme farge hver gang — det er den som gjør at øyet kjenner igjen raden før det har lest noe. */ .personmerke { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: var(--t-5); } /* Invitasjonsfeltene på én linje. Tre korte felt under hverandre gjorde skjemaet dobbelt så høyt som det trengte. */ .feltrad { display: flex; flex-wrap: wrap; gap: 14px; } .feltrad .felt { flex: 1 1 220px; margin: 0; } .feltrad .felt.smal { flex: 0 1 190px; } /* EN FELTRAD MÅ HA PUST UNDER SEG «.feltrad .felt { margin: 0 }» over fjerner margen på feltene, fordi radens gap tar over INNENFOR raden. Men gap gjelder ikke UNDER raden. Regelen som ga den margen sto scopet til «.oppdragskjema», og invitasjonsskjemaet er ikke det. Resultatet var null piksler mellom telefonhintet og «Send invitasjon»-knappen. Målt til 0 px. Her gjelder den for alle feltrader. Den siste i en beholder trenger den ikke, for da tar beholderens egen bunn over. */ .feltrad { margin-bottom: var(--luft-3); } .feltrad:last-child { margin-bottom: 0; } /* --- bolker og tomme tilstander ------------------------------------------- En bolkoverskrift må leses som en ny del av siden, ikke som enda en linje tekst. Litt luft over, en tynn strek, og mindre skrift enn h1. Den tomme tilstanden lå løs mellom knappen og neste bolk, uten ramme rundt. Nå står den i en stiplet flate: den ser ut som en plass som venter på innhold, ikke som noe som falt ut av layouten. */ .innhold h2.bolk { margin: var(--luft-4) 0 var(--luft-2); padding-top: var(--luft-2); border-top: 1px solid var(--line); font-size: var(--t-5); letter-spacing: .01em; color: var(--ink-soft); text-transform: uppercase; } .innhold .tomstat { text-align: left; align-items: flex-start; padding: 30px 24px; max-width: none; border: 1px dashed var(--line-mork); border-radius: var(--r-3); background: var(--flate-svak); } .innhold .tomstat .ikon { margin-left: 0; } .innhold .tomstat p { max-width: 46ch; } /* --- lys modus: det som trengte en hånd ----------------------------------- Merkepillen og brukerchipen i topplinja hadde nok kontrast mot mørk flate, men ble nesten usynlige mot lys. */ :root[data-tema="lys"] .merkepille { background: var(--brand); color: #fff; border-color: transparent; } :root[data-tema="lys"] .brukerchip { border-color: var(--line-mork); } :root[data-tema="lys"] .sidemeny, :root[data-tema="lys"] .bunnmeny { box-shadow: var(--shadow-lav); } :root[data-tema="lys"] .topplinje { border-bottom-color: var(--line-mork); } /* Kortene trenger en synlig kant på lys flate — hvitt på nesten hvitt forsvinner, motsatt problem av det mørke temaet hadde. */ :root[data-tema="lys"] .innhold .kort, :root[data-tema="lys"] .innhold .klippkort { border-color: var(--line-mork); } /* ========================================================================== FORHÅNDSVISNINGEN ========================================================================== */ .visrute { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 28px; } /* Bakteppet demper flaten bak uten å svartlegge den — man skal fortsatt se at rutenettet ligger der, så det er tydelig at dette er et lag og ikke en ny side. Klikk her lukker. */ .visbakgrunn { position: absolute; inset: 0; background: rgba(3, 6, 18, .74); backdrop-filter: blur(3px); } .viskort { position: relative; display: flex; flex-direction: column; width: min(1000px, 100%); max-height: 100%; background: var(--card); border: 1px solid var(--line-mork); border-radius: var(--r-3); box-shadow: var(--shadow); overflow: hidden; } .vistopp { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .vistekst { flex: 1; min-width: 0; } .vistopp h2 { margin: 0 0 3px; font-size: var(--t-5); line-height: 1.35; } .vistopp h2::first-letter { text-transform: uppercase; } .vistopp .hint { margin: 0; font-size: var(--t-3); } .vislukk { flex: none; width: 34px; height: 34px; } /* Svart bak spilleren. Alt annet enn svart rundt et klipp forskyver hvordan man leser bildet — samme grunn som at redigeringsprogrammer er mørke. */ .visfilm { background: #000; aspect-ratio: 16 / 9; max-height: 62vh; display: flex; align-items: center; justify-content: center; } .visfilm iframe { width: 100%; height: 100%; border: 0; display: block; } /* Vaar egen spiller erstattet Drives innebygde. «contain» fordi katalogen har baade 16:9, 1:1 og staaende klipp, mens ruta er 16:9. Uten den ville et staaende klipp blitt beskaaret paa midten. */ .visfilm video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } .visfilm .hint { color: var(--ink-soft); margin: 0; padding: 20px; } .visbunn { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; } .visbunn .btn { padding: 10px 18px; font-size: var(--t-4); } .visbunn .btn:disabled { opacity: .4; cursor: default; } .visteller { margin: 0 auto 0 6px; font-variant-numeric: tabular-nums; } /* Ingen scrolling bak ruta. Uten dette ruller rutenettet under fingeren mens man ser på en video, og man mister plassen sin i lista. */ body.viser { overflow: hidden; } /* Kortet er en