/* ============================================================ nikkobeat.no — felles designsystem (Sage & Oker) PL-NL1 (variabler) · PL-NL17 (komponentklasser) · Pakke 7.1 Bruk: ENESTE kilde for palett OG komponentstiler (topplinje, knapper, pill, kort, input, wordmark). Definerer det standarden seksjon 1 beskriver. Apper legger app-spesifikke variabler/klasser TIL lokalt — felles redefineres ALDRI. ============================================================ */ :root { /* Flater */ --bg: #F2F5F0; /* sidebakgrunn */ --surface: #FFFFFF; /* kort og paneler */ --surface2: #E8EFE4; /* sekundær flate (chips, input-bakgrunn) */ --border: #C9D9C4; /* kantlinjer */ /* Identitet */ --primary: #4A7A58; /* sage grønn — hovedfarge */ --primary-d: #3A6448; /* mørk sage — hover/aktiv */ --accent: #C8973A; /* oker — CTA og fremheving */ --accent-d: #A67B2A; /* mørk oker — hover på CTA */ /* Tekst */ --text: #243020; /* brødtekst */ --muted: #6B8066; /* sekundærtekst */ /* Status */ --red: #C0392B; /* feil / destruktive handlinger */ /* Form */ --radius: 10px; /* knapper og input */ --radius-lg: 16px; /* kort og paneler */ --shadow: 0 4px 24px rgba(36,48,32,.08); /* kort/panel */ --shadow-sm: 0 4px 16px rgba(36,48,32,.12); /* app-ikon */ } /* ── Komponentklasser (implementerer standard seksjon 1) ───────────────────── Bruk .nk-*-klassene i stedet for å kopiere stilene per side. */ /* Topplinje — ALLTID sage grønn, ingen unntak */ .nk-topbar { background: var(--primary); min-height: 50px; padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem; } .nk-topbar-logo { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; } .nk-topbar-name { font-weight: 700; font-size: 1.05rem; color: #fff; } .nk-topbar-spacer { flex: 1; } /* Brukernavn-pill */ .nk-user-pill { background: rgba(255,255,255,.15); color: #fff; border-radius: 20px; padding: .2rem .7rem; font-size: .8rem; font-weight: 600; } /* Knapper */ .nk-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: .55rem 1rem; font-weight: 700; font-size: .9rem; cursor: pointer; } .nk-btn:hover { background: var(--accent-d); } .nk-btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem 1rem; font-weight: 600; font-size: .9rem; cursor: pointer; } .nk-btn-ghost:hover { background: var(--surface2); } .nk-btn-danger { background: var(--red); color: #fff; border: none; border-radius: var(--radius); padding: .55rem 1rem; font-weight: 700; font-size: .9rem; cursor: pointer; } /* Handlingsknapper på mørk topplinje (ghost-variant) — inkl. Logg ut */ .nk-topbar .nk-btn-ghost, .nk-btn-ghost-dark { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: .3rem .65rem; font-size: .85rem; min-width: 34px; min-height: 34px; font-weight: 600; } .nk-topbar .nk-btn-ghost:hover, .nk-btn-ghost-dark:hover { background: rgba(255,255,255,.12); } /* Kort / panel */ .nk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1rem 1.2rem; } /* Input */ .nk-input { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: .7rem .9rem; font-size: .95rem; color: var(--text); } .nk-input:focus { outline: none; border-color: var(--primary); } /* Wordmark — kun i topplinje (nikkobeat / nikkobeta osv.) */ .nk-wordmark { font-weight: 700; } .nk-wordmark .wm-a { color: var(--muted); } .nk-wordmark .wm-b { color: var(--primary); } /* ── Samkjørt topplinje (ALL-NL4) ────────────────────────────────────────── Delt komponent: ← tilbake (venstre) | app-logo (sentrert) | brukerpill- dropdown (høyre). Ingen egen Logg ut-knapp — den ligger i dropdownen sammen med «Min side» (senere, PL-NL42) og versjon nederst. Én linje, desktop+mobil. Rendres av assets/nk-appbar.php; dropdown styres av nikkobeat.js. */ .nk-appbar { background: var(--primary); color: #fff; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: .5rem 1rem; min-height: 48px; width: 100%; box-sizing: border-box; position: sticky; top: 0; z-index: 1200; } /* sticky: topplinjen (og tilbakeknappen) forblir synlig ved scroll — løser ND-NL8/E6 (måtte scrolle opp for å nå tilbake). */ /* z-index 1200: over Leaflet/Google-kartlag (~700-1000) så pill- dropdownen ikke gjemmer seg bak kartet (ALL-NL4, funn 2026-07-13). */ /* ── LAGSKALA (z-index) — WP-NL51-funn 2026-07-19 ────────────────────────── Da topplinja ble hevet til 1200 for kart-dropdownen, havnet den samtidig OVER alle modaler i økosystemet (de lå på 60-400). Sjekk inn-modalen i WhatPub ble delvis skjult bak topplinja. Topplinja MÅ ligge over kartet (ellers gjemmer dropdownen seg), og modaler MÅ ligge over topplinja — derfor denne skalaen. Hold nye lag innenfor den; ikke improviser tall. 0 – 99 sideinnhold, paneler, sticky lister 100 – 1000 kartlag (Leaflet/Google setter sine egne i dette spennet) 1200 .nk-appbar (over kart, under modaler) 1300 – 1399 modaler og fullskjerm-overlegg 1400 – 1499 lag OVER modaler (tooltip/popover som åpnes fra en modal) 9999 toast/varsel (alltid øverst) ------------------------------------------------------------------------ */ :root { --z-appbar: 1200; --z-modal: 1300; --z-popover: 1400; --z-toast: 9999; } .nk-appbar-back { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; color: #fff; text-decoration: none; font-size: .85rem; opacity: .95; } .nk-appbar-back:hover { opacity: 1; } .nk-appbar-arrow { font-size: 1.05rem; line-height: 1; } .nk-appbar-brand { display: inline-flex; align-items: center; gap: .5rem; justify-self: center; } .nk-appbar-logo { width: 26px; height: 26px; border-radius: 7px; } .nk-appbar-appname { font-weight: 600; font-size: 1rem; color: #fff; } .nk-appbar-user { justify-self: end; position: relative; } .nk-appbar-pill { display: inline-flex; align-items: center; gap: .3rem; background: rgba(255,255,255,.16); color: #fff; border: none; border-radius: 20px; padding: .28rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer; font-family: inherit; } .nk-appbar-pill:hover { background: rgba(255,255,255,.24); } button.nk-appbar-back { background: none; border: none; cursor: pointer; font-family: inherit; } .nk-appbar-slot { justify-self: start; } .nk-appbar-login { justify-self: end; display: inline-flex; align-items: center; background: rgba(255,255,255,.16); color: #fff; text-decoration: none; border-radius: 20px; padding: .28rem .9rem; font-size: .82rem; font-weight: 600; } .nk-appbar-login:hover { background: rgba(255,255,255,.24); } .nk-appbar-access { font-size: .68rem; font-weight: 500; opacity: .8; } .nk-appbar-caret { font-size: .7rem; opacity: .9; } .nk-appbar-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; } .nk-appbar-menu[hidden]{ display: none; } .nk-appbar-mi { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: none; padding: .6rem .9rem; font-size: .9rem; color: var(--text); cursor: pointer; font-family: inherit; text-decoration: none; } .nk-appbar-mi:hover { background: var(--surface2); } .nk-appbar-mi + .nk-appbar-mi { border-top: 1px solid var(--border); } .nk-appbar-mi--soon { color: var(--muted); cursor: default; } .nk-appbar-mi--soon:hover { background: none; } .nk-appbar-soon { margin-left: auto; font-size: .62rem; background: var(--surface2); color: var(--primary); padding: .05rem .45rem; border-radius: 20px; } .nk-appbar-ver { padding: .4rem .9rem; font-size: .7rem; color: var(--muted); background: var(--surface2); border-top: 1px solid var(--border); text-align: center; } @media (max-width: 600px) { .nk-appbar { padding: .45rem .7rem; } .nk-appbar-appname { font-size: .9rem; } .nk-appbar-back { font-size: .8rem; } .nk-appbar-logo { width: 22px; height: 22px; } }