/* ========================================================================== styles.css – alt som har med UTSEENDE å gjøre i Familieradar. CSS (Cascading Style Sheets) består av «regler». En regel har en SELEKTOR (hvilke elementer regelen gjelder) og en BLOKK med egenskaper: .knapp { color: red; padding: 8px; } ^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ selektor egenskap: verdi; (flere skilles med semikolon) Kommentarer skrives mellom skråstrek-stjerne og stjerne-skråstrek, som denne. (To skråstreker, som i JavaScript, virker IKKE i CSS.) Vanlige selektorer du vil se: .navn klasse – alle elementer med class="navn" (kan brukes mange steder) #navn id – det ene elementet med id="navn" a b etterkommer – b som ligger et sted INNI a (mellomrom = «inni») a > b barn – b som ligger DIREKTE inni a (ikke dypere) a + b b som kommer rett ETTER a på samme nivå a.b ett element som har BÅDE a og b (uten mellomrom) a, b samme regel for både a og b [attr="x"] elementer der attributtet attr har verdien x :not(x) alt som IKKE matcher x :hover o.l. «pseudoklasser» = tilstander (fokus, avkrysset, deaktivert …) ::noe «pseudoelementer» = deler av et element (f.eks. rullefeltet) SPESIFISITET: Hvis to regler sier noe ulikt om samme element, vinner den mest spesifikke. Grovt sagt: id (#) slår klasse (.), og flere klasser slår færre. Er de like spesifikke, vinner den som står sist i filen. Derfor kan f.eks. «.dager .kort» (inne i @media lenger ned) overstyre «.kort». Rekkefølge i filen: farger/variabler → grunnstil → ramme og skall → faner → knapper → ukevisning → kort → lister → innboks → ark (dialoger) → skjema → innlogging → «Mer»-siden → toast og småting. ========================================================================== */ /* ---------- Farger og variabler ---------- :root er hele dokumentet (html-elementet). Egenskaper som starter med to bindestreker (--bg, --tekst …) er CSS-VARIABLER: vi gir en verdi et navn én gang her, og bruker den overalt med var(--bg). Vil du endre en farge i hele appen, endrer du den bare her. Navnene: bg = bakgrunn, flate = kort/bokser, dempet = grå hjelpetekst, linje = kantlinjer, aksent = appens hovedfarge (grønnblå), fare = rødt (feil/konflikt), varsel = gult/oransje, ok = grønt. Farger er skrevet som heksadesimal (#RRGGBB) eller rgba(r, g, b, gjennomsiktighet). */ :root { --bg: #F4F1EC; --flate: #FFFFFF; --flate-2: #FAF8F4; --tekst: #1D2125; --dempet: #6B7178; --linje: #E4DFD6; --aksent: #2F5D62; --aksent-tekst: #FFFFFF; --fare: #C2412D; --fare-bg: #FCEAE6; --varsel: #8A5A00; --varsel-bg: #FFF2D6; --ok: #2F7D4F; /* Skygge under kort: to lag (forskyvning x, y, uskarphet, farge), skilt med komma. */ --skygge: 0 1px 2px rgba(30, 25, 15, .06), 0 2px 8px rgba(30, 25, 15, .05); /* r = standard hjørneavrunding. px = piksler (på iPhone «logiske» piksler). */ --r: 14px; /* Skrift: bruk systemskriften (San Francisco på Apple, Segoe på Windows …). Nettleseren tar den første i lista som finnes på enheten. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; /* Sier til nettleseren at skjemafelt, rullefelt o.l. skal tegnes lyse. */ color-scheme: light; } /* ---------- Mørk modus ---------- @media (…) { … } = reglene inni gjelder bare når betingelsen er sann. prefers-color-scheme: dark = telefonen/PC-en står i mørk modus. Da byttes bare variablene – resten av filen bruker var(--…) og følger med. :root:not([data-theme="light"]) betyr: «:root, men IKKE hvis html-elementet har data-theme="light"». Det gjør det mulig å tvinge lys modus selv om telefonen er mørk. data-theme settes av valget «Utseende» på Mer-siden (brukTema() i app.js). Uten valg følger appen innstillingen på telefonen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16191C; --flate: #1F2327; --flate-2: #24292E; --tekst: #ECEDEE; --dempet: #9AA1A8; --linje: #30363C; --aksent: #8CC2BA; --aksent-tekst: #10201F; --fare: #F08A75; --fare-bg: #3A211C; --varsel: #F3C46B; --varsel-bg: #3A2F17; --ok: #7CC79A; --skygge: none; color-scheme: dark; } } /* Tvungen mørk modus (data-theme="dark"): samme mørke farger, uansett hva telefonen står på. Brukes når «Mørk» er valgt under Utseende på Mer-siden. [data-theme="dark"] er en attributt-selektor. */ :root[data-theme="dark"] { --bg: #16191C; --flate: #1F2327; --flate-2: #24292E; --tekst: #ECEDEE; --dempet: #9AA1A8; --linje: #30363C; --aksent: #8CC2BA; --aksent-tekst: #10201F; --fare: #F08A75; --fare-bg: #3A211C; --varsel: #F3C46B; --varsel-bg: #3A2F17; --ok: #7CC79A; --skygge: none; color-scheme: dark; } /* ---------- Grunnstil ---------- * = alle elementer. box-sizing: border-box gjør at bredde/høyde INKLUDERER innvendig luft (padding) og kantlinje – mye enklere å regne med. Egenskaper med -webkit- foran er Safari/Apple-spesifikke varianter. */ * { box-sizing: border-box; } /* Hindrer iPhone i å forstørre teksten på egen hånd når skjermen snus. */ html { -webkit-text-size-adjust: 100%; } /* margin = luft UTENFOR et element, padding = luft INNENFOR. font: 16px/1.4 = skriftstørrelse 16 px og linjehøyde 1,4 × skriftstørrelsen. tap-highlight transparent = fjerner den grå blinken når man trykker på iPhone. overscroll-behavior-y: none = ingen «sprett» når man drar forbi toppen/bunnen. */ body { margin: 0; background: var(--bg); color: var(--tekst); font: 16px/1.4 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } /* Knapper og skjemafelt har egen standardskrift i nettleseren; inherit = arv skrift og farge fra forelderen i stedet, så alt ser likt ut. */ button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3 { margin: 0; line-height: 1.2; } /* «Laster …»-teksten fra index.html. vh = prosent av skjermhøyden (40vh = 40 % ned), så teksten havner omtrent midt på. */ .laster { padding: 40vh 16px; text-align: center; color: var(--dempet); } /* ---------- Ramme ---------- */ /*.ramme er boksen rundt innholdet på hver side. max-width + margin: 0 auto = maks 1180 px bred og sentrert på store skjermer. padding med fire verdier: topp, høyre, bunn, venstre (med klokka); med to verdier: topp/bunn og høyre/venstre. calc(…) regner ut en verdi, og kan blande enheter: calc(96px + 10px). env(safe-area-inset-top) = hvor mye plass notchen/klokka øverst på iPhone tar; env(safe-area-inset-bottom) = plassen til hjemlinja nederst. Er 0 på enheter uten slike. Virker fordi index.html har viewport-fit=cover. */ .ramme { max-width: 1180px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 8px) 16px calc(96px + env(safe-area-inset-bottom)); } /* FLEXBOX: display: flex legger barna på en rad (eller kolonne med flex-direction: column). align-items = plassering på tvers (her: midtstilt i høyden) justify-content = fordeling langs raden (space-between: første helt til venstre, siste helt til høyre, luft imellom) gap = fast avstand mellom barna .topp er overskriftsraden: tittel til venstre, knapper til høyre. */ .topp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; } /* .topp h1 = h1-overskrifter som ligger inni .topp (etterkommer-selektor). em = relativ til skriftstørrelsen; -.02em = litt tettere bokstaver. */ .topp h1 { font-size: 28px; letter-spacing: -.02em; } /* Uke/Gjøremål: overskrift og filter blir liggende øverst ved scrolling. Dekker også området under klokka/notchen på iPhone. */ /*position: sticky = elementet scroller vanlig med siden til det når top: 0, så blir det «klistret» fast der mens resten scroller under. z-index = hva som ligger øverst når ting overlapper (høyere tall = nærmere deg). Fungerer bare på elementer med position satt. Negativ margin + like stor padding: boksen strekkes ut til skjermkanten og opp under notchen, mens innholdet blir stående der det var. color-mix(in srgb, var(--bg) 90%, transparent) = bakgrunnsfargen blandet med 10 % gjennomsiktig – litt gjennomsiktig, så innhold skimtes bak. backdrop-filter: blur(…) = gjør det som ligger BAK elementet uskarpt («frostet glass», som i iOS); saturate gir litt kraftigere farger. */ .klebrig { position: sticky; top: 0; z-index: 10; margin: calc(-1 * (env(safe-area-inset-top) + 8px)) -16px 0; padding: calc(env(safe-area-inset-top) + 8px) 16px 0; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); } .klebrig .topp { padding: 4px 0 8px; } .klebrig .filterrad { padding-bottom: 10px; } /* «I dag»-scrolling skal ikke havne under den klebrige toppen */ /* (scroll-margin-top = stopp så mye lenger opp når man scroller til elementet) */ .dag { scroll-margin-top: calc(env(safe-area-inset-top) + 120px); } .topp .under { color: var(--dempet); font-size: 14px; } /* Gul stripe med beskjed (f.eks. «frakoblet»), og merket for demomodus. border-radius = avrundede hjørner. */ .statuslinje { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 14px; background: var(--varsel-bg); color: var(--varsel); } .demo-merke { background: var(--flate-2); color: var(--dempet); border: 1px dashed var(--linje); } /* ---------- App-skall ---------- Selve siden scroller aldri, bare .rulle. Da kan ikke bunnmenyen flytte seg når Safari spretter i toppen/bunnen eller viser/skjuler verktøylinjen. */ /* #app.skall = elementet med id="app" SOM OGSÅ har klassen «skall» (app.js legger den på). Id + klasse gir høy spesifisitet, så disse reglene vinner over de vanlige .faner/.ramme-reglene lenger ned. position: fixed = låst til skjermen, scroller aldri. inset: 0 = kant i kant (topp, høyre, bunn og venstre = 0). Skallet er en flex-kolonne: .rulle (innholdet) øverst, .faner (menyen) nederst. overflow: hidden = det som stikker utenfor, kuttes bort og kan ikke scrolles. */ #app.skall { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; } /* .rulle er den eneste delen som scroller. flex: 1 = ta all ledig høyde. min-height: 0 er et kjent triks: ellers vil et flex-barn aldri bli lavere enn innholdet sitt, og da virker ikke scrolling. overflow-y: auto = vis rullefelt loddrett når innholdet er for høyt. overscroll-behavior-y: contain = sprett/scroll «lekker» ikke ut til siden bak. */ #app.skall .rulle { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } #app.skall .ramme { padding-bottom: 88px; } /* I skallet ligger menyen naturlig nederst i flex-kolonnen, så den trenger ikke position: fixed (relative = vanlig plassering). flex: none = ikke krymp eller voks. Heldekkende bakgrunn i stedet for frostet glass. */ #app.skall .faner { position: relative; flex: none; background: var(--flate); -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---------- Faner ---------- */ /*Bunnmenyen (Uke, Gjøremål, Innboks, Mer …). Grunnregelen legger den fast nederst på skjermen (position: fixed; bottom: 0) – i app-skallet over overstyres dette. padding-bottom: env(…) holder knappene over hjemlinja. */ .faner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; background: color-mix(in srgb, var(--flate) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--linje); padding-bottom: env(safe-area-inset-bottom); } /* Knappene samles i midten og blir ikke bredere enn 560 px totalt. Hver .fane har flex: 1 = alle fanene deler bredden likt. */ .faner-indre { display: flex; width: 100%; max-width: 560px; } .fane { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 0; background: none; color: var(--dempet); font-size: 11px; font-weight: 500; position: relative; } .fane svg { width: 24px; height: 24px; } /* Attributt-selektor: fanen med aria-current="page" er den du står på, og får aksentfarge. aria-attributter hjelper også skjermlesere. */ .fane[aria-current="page"] { color: var(--aksent); } /* Det røde tallmerket på en fane (f.eks. antall uleste). position: absolute = plasseres i forhold til nærmeste forelder med position satt – her .fane (position: relative). left: calc(50% + 6px) = litt til høyre for midten. */ .merke { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--fare); color: #fff; font-size: 11px; line-height: 18px; font-weight: 600; } /* Den runde pluss-knappen nede til høyre (legg til ny hendelse). max(16px, calc(50% - 574px)) = velg den største av to verdier: på mobil 16 px fra kanten, på store skjermer følger den høyrekanten av innholdet (1180 px / 2 = 590, minus litt). border-radius lik halve bredden = sirkel. display: grid + place-items: center = enkleste måte å midtstille ikonet. */ .pluss { position: fixed; right: max(16px, calc(50% - 574px)); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 21; width: 56px; height: 56px; border-radius: 28px; border: 0; background: var(--aksent); color: var(--aksent-tekst); box-shadow: 0 4px 14px rgba(0,0,0,.18); display: grid; place-items: center; } .pluss svg { width: 28px; height: 28px; } /* ---------- Knapper og brikker ---------- */ /*.knapp er grunnknappen. Varianter legges på som ekstra klasser: class="knapp primar" gir fylt aksentfarge, «fare» rød tekst, «liten» mindre, «full» full bredde. Selektoren .knapp.primar (uten mellomrom) betyr ett element med begge klassene. min-height: 44px = Apples anbefalte minste trykkflate for fingre. white-space: nowrap = teksten brytes ikke over flere linjer. */ .knapp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--linje); background: var(--flate); font-weight: 600; font-size: 15px; white-space: nowrap; } .knapp.primar { background: var(--aksent); border-color: var(--aksent); color: var(--aksent-tekst); } .knapp.fare { color: var(--fare); } .knapp.liten { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; } .knapp.full { width: 100%; } /* :disabled = knappen er slått av. opacity = synlighet (1 = helt, 0 = usynlig). */ .knapp:disabled { opacity: .5; } /* Knapp som ser ut som en lenke, og rund knapp med bare ikon. */ .lenke { border: 0; background: none; color: var(--aksent); font-weight: 600; padding: 8px 4px; font-size: 15px; } .ikonknapp { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--linje); background: var(--flate); display: grid; place-items: center; } .ikonknapp svg { width: 20px; height: 20px; } /* «Brikker» = små avrundede valgknapper, f.eks. filter per familiemedlem. flex-wrap: wrap = brikkene fortsetter på neste linje når raden er full. */ .brikker { display: flex; flex-wrap: wrap; gap: 8px; } .brikke { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--linje); background: var(--flate); font-size: 14px; font-weight: 500; white-space: nowrap; } /* var(--c, var(--dempet)): --c er personens farge, som app.js setter direkte på elementet (style="--c: …"). Verdien etter kommaet er reserveverdi hvis --c ikke finnes – her grå. Slik kan samme CSS gi hver person sin farge. */ .brikke .prikk { width: 10px; height: 10px; border-radius: 5px; background: var(--c, var(--dempet)); } /* Valgt brikke (aria-pressed="true"): bakgrunn med 16 % av personfargen blandet inn i den vanlige flatefargen, og kantlinje i personfargen. */ .brikke[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--aksent)) 16%, var(--flate)); border-color: var(--c, var(--aksent)); } /* Filterraden kan scrolles sidelengs (overflow-x: auto) i stedet for å bryte linjen. Negativ margin + padding lar den gå helt ut til skjermkanten. Rullefeltet skjules: scrollbar-width: none (Firefox o.l.) og ::-webkit-scrollbar (pseudoelement for rullefeltet i Safari/Chrome). */ .filterrad { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 12px; margin: 0 -16px; scrollbar-width: none; } .filterrad::-webkit-scrollbar { display: none; } /* Små statusmerker («etiketter») i fire varianter: nøytral, fare, varsel, ok. inline-flex = flex inni, men oppfører seg som tekst utad (ligger på linja). */ .etikett { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--flate-2); color: var(--dempet); } .etikett.fare { background: var(--fare-bg); color: var(--fare); } .etikett.varsel { background: var(--varsel-bg); color: var(--varsel); } .etikett.ok { color: var(--ok); } /* ---------- Uke ---------- */ /*Ukevisningen. Pilene og ukenummeret øverst (.ukenav), oppsummeringsbrikker, og .dager som inneholder ett .dag-kort per ukedag. */ .ukenav { display: flex; align-items: center; gap: 8px; } .ukenav .tekst { min-width: 120px; text-align: center; } .ukenav h1 { font-size: 24px; } /* Høyre side av ukeoverskriften: «I dag» og familiebildet ved siden av hverandre. */ .topp-hoyre { display: flex; align-items: center; gap: 10px; } /* Familiebildet: runde bilder. object-fit: cover fyller sirkelen uten å strekke bildet. flex: none hindrer at bildet blir klemt sammen når raden er trang. */ .familiebilde { border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--flate); box-shadow: 0 1px 4px rgba(0,0,0,.15); } .liten-bilde { width: 40px; height: 40px; } .stort-bilde { width: 88px; height: 88px; } /* Ingen bilde ennå: grå sirkel med et bildeikon i midten. */ .familiebilde.tomt { display: grid; place-items: center; background: var(--flate-2); color: var(--dempet); } .familiebilde.tomt svg { width: 32px; height: 32px; } .knapperad-liten { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .oppsummering { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } /* GRID: display: grid legger barna i et rutenett. Uten grid-template-columns blir det én kolonne – dagene står under hverandre (mobil). */ .dager { display: grid; gap: 12px; } /* Ukebytte: de nye dagene glir inn fra siden. Bare transform og opacity animeres (billig for telefonen), og will-change varsler nettleseren på forhånd. */ .dager.glid-neste, .dager.glid-forrige { will-change: transform, opacity; animation: glid-inn 240ms cubic-bezier(.2, .8, .2, 1); } .dager.glid-neste { --fra: 28px; } .dager.glid-forrige { --fra: -28px; } @keyframes glid-inn { from { transform: translateX(var(--fra)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dager.glid-neste, .dager.glid-forrige { animation: none; } } /* iPad og PC: hele uka på én rad, mandag–søndag. Kortene blir smale, så klokkeslett legges over tittelen og teksten strammes inn. */ /* @media (min-width: 760px) = reglene gjelder bare når skjermen er minst 760 px bred. Mobilen bruker reglene over; større skjermer får disse i tillegg (og de overstyrer fordi de står senere/er mer spesifikke). */ @media (min-width: 760px) { .ramme.bred { max-width: 1800px; } /* repeat(7, minmax(0, 1fr)) = sju kolonner. 1fr = «én andel» av ledig plass, så alle blir like brede. minmax(0, …) lar en kolonne krympe under bredden til innholdet sitt – ellers kunne ett langt ord gjort én dag bredere enn de andre. align-items: stretch = alle dagene blir like høye. */ .dager { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .dager .dag { padding: 8px; } .dager .dag-hode { flex-wrap: wrap; gap: 2px 6px; } .dager .dag-hode h2 { font-size: 15px; } /* Norsk orddeling i stedet for å kutte midt i ord */ /* (hyphens: auto deler ord med bindestrek etter språkets regler – språket hentes fra lang="nb" i index.html). */ .dager { -webkit-hyphens: auto; hyphens: auto; } /* overflow-wrap: break-word = bryt et ord bare hvis det ellers ikke får plass. min-width: 0 trengs av samme grunn som i .rulle: flex/grid-barn krymper ellers ikke under innholdsbredden sin. */ .dager .kort .tittel, .dager .kort .meta, .dager .oppgave .tittel, .dager .konflikt, .dager .banner span { overflow-wrap: break-word; min-width: 0; } /* Banner (heldagshendelser) som lite rutenett: 8 px kolonne til prikken, resten til teksten. grid-column: 2 = legg elementet i andre kolonne. */ .dager .banner { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: 2px 6px; padding: 6px 8px; font-size: 12px; } .dager .banner .prikk { margin-top: 4px; } .dager .banner small { grid-column: 2; margin-left: 0; white-space: normal; font-size: 11px; } .dager .konflikt { font-size: 12px; padding: 6px 8px; } /* Kompakte kort: fargestripa i en 4 px kolonne, klokkeslett og innhold under hverandre i den andre. grid-row: 1 / span 2 = stripa strekker seg over to rader. Negativ margin får stripa helt ut i kortets topp og bunn. */ .dager .kort { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 2px 8px; padding: 8px 8px 8px 0; } .dager .striper { grid-row: 1 / span 2; width: 4px; margin: -8px 0; } .dager .kort .tid { width: auto; padding: 0; font-size: 12px; } .dager .kort .tid small { display: inline; font-size: 12px; } .dager .kort .tittel { font-size: 13px; line-height: 1.3; } .dager .kort .meta { font-size: 12px; } .dager .kort.voksen .tittel { font-size: 12px; } .dager .ansvar-brikke { font-size: 11px; padding: 2px 6px; } .dager .oppgave .tittel { font-size: 13px; } .dager .tom { font-size: 12px; } } /* iPad stående: smale kolonner, så luft og ikoner strammes inn ytterligere */ /* (and = begge betingelsene må være sanne: mellom 760 og 1099 px bred). */ @media (min-width: 760px) and (max-width: 1099px) { .ramme.bred { padding-left: 10px; padding-right: 10px; } .ramme.bred .klebrig { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; } .ramme.bred .filterrad { margin: 0 -10px; padding-left: 10px; padding-right: 10px; } .dager { gap: 5px; } .dager .dag { padding: 6px; } .dager .dag-hode h2 { font-size: 14px; } .dager .kort { gap: 2px 6px; padding: 6px 6px 6px 0; } .dager .striper { margin: -6px 0; } .dager .kort .tittel { font-size: 12px; } .dager .kort .meta, .dager .kort .tid, .dager .kort .tid small { font-size: 11px; } /* display: none = skjul elementet helt (tar ingen plass). */ .dager .ansvar-brikke svg { display: none; } .dager .hake { width: 20px; height: 20px; } } /* Ett dagkort. Grunnutseendet gjelder alle skjermstørrelser; @media-reglene over justerer bare. Usynlig kantlinje (transparent) så kortet ikke «hopper» når dagens dato får farget kant (.dag.idag). Passerte dager (.dag.forbi) tones litt ned. */ .dag { background: var(--flate); border-radius: var(--r); box-shadow: var(--skygge); padding: 12px; border: 1px solid transparent; } .dag.idag { border-color: var(--aksent); } .dag.forbi { opacity: .72; } /* align-items: baseline = ukedag og dato står på samme skrift-grunnlinje. */ .dag-hode { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .dag-hode h2 { font-size: 17px; } .dag-hode .dato { color: var(--dempet); font-weight: 500; } .tom { color: var(--dempet); font-size: 14px; margin: 4px 0; } /* Banner = heldagshendelse eller periode (ferie, planleggingsdag …) øverst i dagen, farget svakt med personens farge. margin-left: auto på skyver den teksten helt til høyre i flex-raden. */ .banner { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin-bottom: 6px; padding: 7px 10px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--c, var(--dempet)) 14%, var(--flate)); font-size: 14px; font-weight: 600; } .banner .prikk { width: 8px; height: 8px; border-radius: 4px; background: var(--c, var(--dempet)); flex: none; } .banner small { color: var(--dempet); font-weight: 500; margin-left: auto; white-space: nowrap; } /* Rød advarsel når to hendelser kolliderer (f.eks. ingen kan kjøre). */ .konflikt { display: flex; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--fare-bg); color: var(--fare); font-size: 14px; font-weight: 500; } .konflikt svg { flex: none; width: 18px; height: 18px; margin-top: 1px; } /* ---------- Kort (én hendelse) ---------- Rad med: fargestriper (én per person) | klokkeslett | innhold. overflow: hidden + border-radius = stripene kuttes av de runde hjørnene. position: relative gjør kortet til referansepunkt for ting som plasseres absolutt inni det. */ .kort { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 10px 10px 0; margin: 0 0 6px; border-radius: 12px; border: 1px solid var(--linje); background: var(--flate-2); position: relative; overflow: hidden; } /* Stripene stables loddrett og deler høyden likt (flex: 1 på hver span). align-self: stretch = full høyde; margin: -10px 0 oppveier kortets padding. */ .striper { display: flex; flex-direction: column; width: 5px; flex: none; align-self: stretch; margin: -10px 0; } .striper span { flex: 1; background: var(--c); } /* tabular-nums = alle sifre like brede, så klokkeslett står pent under hverandre. overflow-wrap: anywhere = lange ord/adresser kan brytes hvor som helst. */ .kort .tid { flex: none; width: 58px; padding-left: 2px; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; } .kort .tid small { display: block; color: var(--dempet); font-weight: 500; font-size: 12px; } .kort .innhold { flex: 1; min-width: 0; } .kort .tittel { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; } .kort .meta { color: var(--dempet); font-size: 13px; margin-top: 1px; overflow-wrap: anywhere; } .kort .ansvar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* Varianter: rød kant ved konflikt; «voksen» = de voksnes egne avtaler, vist diskret med stiplet kant og uten bakgrunn. */ .kort.har-konflikt { border-color: var(--fare); } .kort.voksen { background: transparent; border-style: dashed; padding-top: 7px; padding-bottom: 7px; } .kort.voksen .tittel { font-weight: 500; font-size: 14px; } /* Hvem som har ansvar (levere/hente). «mangler» = ingen ansvarlig (rød), «delvis» = bare delvis dekket (gul). */ .ansvar-brikke { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--flate); border: 1px solid var(--linje); } .ansvar-brikke.mangler { background: var(--fare-bg); color: var(--fare); border-color: transparent; } .ansvar-brikke.delvis { background: var(--varsel-bg); color: var(--varsel); border-color: transparent; } .ansvar-brikke svg { width: 12px; height: 12px; } /* ---------- Oppgaver (gjøremål) ---------- .hake er den runde avkrysningsknappen. Ikonet inni er usynlig (color: transparent) til den er krysset av: [aria-checked="true"] gir grønn fyll og hvit hake. Fullførte oppgaver (.ferdig) får gjennomstreket tittel. */ .oppgave { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; } .dag .oppgave { padding: 6px 2px; border-top: 1px solid var(--linje); } .hake { flex: none; width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--dempet); background: none; padding: 0; display: grid; place-items: center; color: transparent; } .hake svg { width: 14px; height: 14px; } .hake[aria-checked="true"] { background: var(--ok); border-color: var(--ok); color: #fff; } .oppgave .tekst { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 0; } .oppgave .tittel { font-weight: 500; font-size: 15px; } .oppgave.ferdig .tittel { text-decoration: line-through; color: var(--dempet); } .oppgave .meta { color: var(--dempet); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; } /* Et navn skrevet i personens egen farge. */ .navn-c { color: var(--c); font-weight: 600; } /* ---------- Lister / seksjoner ---------- */ /*.seksjon = hvit boks med overskrift. «.seksjon > h2» treffer bare h2 som ligger DIREKTE i seksjonen (ikke h2 dypere inne). «.oppgave + .oppgave» = hver oppgave som kommer rett etter en annen: gir skillelinje mellom oppgavene, men ikke over den første. */ .seksjon { background: var(--flate); border-radius: var(--r); box-shadow: var(--skygge); padding: 4px 14px; margin-bottom: 14px; } .seksjon > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--dempet); padding: 12px 0 4px; } .seksjon .oppgave + .oppgave { border-top: 1px solid var(--linje); } .seksjon.fare > h2 { color: var(--fare); } .innhold-smal { max-width: 720px; margin: 0 auto; } /*
/ = innebygd «vis mer»-element som kan åpnes og lukkes. Standard-trekanten fjernes (list-style: none og ::-webkit-details-marker). */ details > summary { cursor: pointer; color: var(--aksent); font-weight: 600; font-size: 14px; padding: 8px 0; list-style: none; } details > summary::-webkit-details-marker { display: none; } /* Originalteksten fra en melding. pre-wrap = behold linjeskift fra teksten, men bryt lange linjer. max-height + overflow: auto = scroll inni boksen. */ pre.original { white-space: pre-wrap; font: 13px/1.45 var(--font); background: var(--flate-2); padding: 10px; border-radius: 10px; margin: 0 0 8px; max-height: 320px; overflow: auto; } /* ---------- Innboks ---------- */ /*Innkomne meldinger (f.eks. fra skole/barnehage). Hver .melding har et hode, et sammendrag og ett eller flere .forslag (hendelser/oppgaver appen foreslår å legge inn) med knapper for å godta eller avvise. .dup = gul beskjed om mulig duplikat. */ .melding { background: var(--flate); border-radius: var(--r); box-shadow: var(--skygge); padding: 14px; margin-bottom: 14px; } .melding-hode { display: flex; gap: 10px; align-items: flex-start; } .melding-hode .ikon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--flate-2); display: grid; place-items: center; color: var(--dempet); } .melding-hode .ikon svg { width: 20px; height: 20px; } .melding-hode .tittel { font-weight: 600; overflow-wrap: anywhere; } .melding-hode .meta { color: var(--dempet); font-size: 13px; } .melding .sammendrag { margin: 10px 0 4px; font-size: 15px; } .forslag { border: 1px solid var(--linje); border-radius: 12px; padding: 12px; margin-top: 10px; background: var(--flate-2); } .forslag .type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dempet); } .forslag .tittel { font-weight: 600; font-size: 16px; margin: 2px 0; } .forslag .naar { font-size: 14px; } .forslag .sitat { font-size: 13px; color: var(--dempet); margin-top: 6px; font-style: italic; } .forslag .handlinger { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* Knappene deler bredden likt, men blir aldri smalere enn 90 px (da brytes de til ny linje i stedet, takket være flex-wrap over). */ .forslag .handlinger .knapp { flex: 1; min-width: 90px; } .dup { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--varsel-bg); color: var(--varsel); font-size: 13px; font-weight: 500; } .melding-fot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 12px; } /* Stor «her er det tomt»-melding midt på siden. */ .tom-stor { text-align: center; padding: 48px 16px; color: var(--dempet); } .tom-stor h2 { color: var(--tekst); font-size: 18px; margin-bottom: 6px; } /* Snurrende «vent litt»-hjul: en sirkel (border-radius: 50%) der bare toppkanten er farget. animation: snurr .8s linear infinite = kjør animasjonen «snurr» på 0,8 sekunder, jevn fart, i det uendelige. @keyframes snurr beskriver selve bevegelsen: fra start til en hel runde (rotate(360deg) = 360 grader). Er bare sluttpunktet («to») oppgitt, starter nettleseren fra elementets vanlige tilstand. */ .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linje); border-top-color: var(--aksent); animation: snurr .8s linear infinite; display: inline-block; vertical-align: -3px; } @keyframes snurr { to { transform: rotate(360deg); } } /* «Dra ned for å oppdatere»: en rund knapp med en snurrende sirkel øverst på skjermen. Den ligger skjult over toppen (translate -100 %) og trekkes ned av lyttDraOppdater i app.js. transition gir myk bevegelse tilbake når du slipper. pointer-events: none gjør at den aldri stjeler trykk. Sirkelen snurrer bare når den er «klar» eller «henter». */ .dra-oppdater { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); z-index: 30; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--flate); box-shadow: 0 2px 10px rgba(0,0,0,.18); transform: translate(-50%, -120%); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s; } .dra-oppdater.drar { transition: none; } .dra-oppdater .spinner { width: 20px; height: 20px; animation-play-state: paused; } .dra-oppdater.klar .spinner, .dra-oppdater.henter .spinner { animation-play-state: running; } .dra-oppdater.henter { transform: translate(-50%, 30px) !important; opacity: 1 !important; } /* ---------- Ark (bunnark / dialog) ---------- */ /*Når noe åpnes (detaljer om en hendelse, nytt skjema …), legger app.js et ark i #ark-rot. .ark-bak er den mørke, halvgjennomsiktige bakgrunnen som dekker resten av appen. z-index 40/41 = over menyen (20) og pluss-knappen (21). z-index-skalaen i filen: klebrig topp 10, faner 20, pluss 21, ark 40–41, toast 60. */ .ark-bak { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; animation: inn .15s ease-out; } /* Mobil: arket glir opp nedenfra og fyller bredden. dvh = «dynamisk» skjermhøyde, som tar hensyn til at Safaris verktøylinje kommer og går (vanlig vh gjør ikke det på iPhone). Maks høyde = skjermen minus notchen minus 24 px, så litt av appen bak alltid skimtes. Arket kan scrolles selv (overflow-y: auto) uten at siden bak scroller med. */ .ark { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: calc(100dvh - env(safe-area-inset-top) - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg); border-radius: 18px 18px 0 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); animation: opp .2s ease-out; } /* iPad/PC: arket blir en dialog midt på skjermen i stedet. left/top: 50% setter øverste venstre hjørne midt på; transform: translate(-50%, -50%) flytter det tilbake halve sin egen bredde/høyde, så midten havner midt på. min(620px, calc(100vw - 48px)) = 620 px, men aldri bredere enn skjermen minus 48 px. vw = prosent av skjermbredden. */ @media (min-width: 760px) { .ark { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 48px)); max-height: 86vh; border-radius: 18px; animation: inn .15s ease-out; } } /* Animasjonene: «opp» = start 40 px lenger ned og usynlig, gli opp og tones inn; «inn» = bare tones inn. «from» = startpunkt; slutten er vanlig tilstand. */ @keyframes opp { from { transform: translateY(40px); opacity: 0; } } @keyframes inn { from { opacity: 0; } } /* Arkets toppstripe (tittel + lukk-knapp) blir liggende når arket scrolles. */ .ark-topp { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0 10px; background: var(--bg); } .ark-topp h2 { font-size: 20px; overflow-wrap: anywhere; } .ark h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--dempet); margin: 18px 0 8px; } .ark .blokk { background: var(--flate); border-radius: var(--r); padding: 12px 14px; } .ark .info-linje { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-size: 15px; } .ark .info-linje svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--dempet); } .ark ul.husk { margin: 0; padding-left: 20px; } /* Rad med knapper nederst i arket (f.eks. Avbryt / Lagre), og store menyvalg (.meny-valg) med ikon, tittel og forklaring. */ .knapperad { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .knapperad .knapp { flex: 1; } .meny-valg { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; margin-bottom: 8px; border-radius: var(--r); border: 0; background: var(--flate); text-align: left; } .meny-valg svg { width: 24px; height: 24px; color: var(--aksent); flex: none; } .meny-valg .tittel { font-weight: 600; } .meny-valg .meta { color: var(--dempet); font-size: 13px; } /* ---------- Skjema ---------- */ /*.felt er en