/* ============================================================================ Kobolt — redesignet (REDESIGN.md) Designretningen er Morakels (skillen morakel-design, og kitet i Morakelet/docs/design/kobolt-designkit): lyst varmt lerret, en litt varmere sidemeny, hvite arbeidsflater, kobolt brukt sparsomt til handlinger og aktiv tilstand, Manrope til overskrifter og hovedtall, Inter til resten, og tabeller med lyseblått kolonnehode. Laget ligger over style.css. Husets gamle tokens (--primary-600, --bg, --surface-tint …) pekes om til kobolt-verdiene her, så sider som ikke er bygget om ennå, får fargene og skriften med en gang. Komponentene under overstyrer husets oppskrifter der kobolt er annerledes: kort uten farget hode, innrammede felt med etikett over i stedet for understrek, lettere ikoner og ingen skygge på det som ligger i ro. ============================================================================ */ /* ----- Skriftene (static/webfonts, OFL) ----- */ @font-face { font-family: 'Inter'; src: url('/static/webfonts/inter-latin-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/static/webfonts/manrope-latin-var.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; } /* ----- Kobolt-tokenene (Morakelet/src/app/globals.css, --kb-*) ----- */ :root { /* Dyp kobolt fra toppen på grids.no: bakgrunnen på innloggingssidene (auth_base.html, Lars 09.10.2026). Den er lik i lyst og mørkt tema. */ --kb-natt-1: #121D63; --kb-natt: #0A1240; --kb-natt-3: #110C46; --kb-natt-tekst: #EEF1FF; --kb-natt-tekst-2: rgba(225, 230, 255, 0.72); --kb-natt-flate: rgba(255, 255, 255, 0.08); --kb-natt-flate-2: rgba(255, 255, 255, 0.16); --kb-natt-fokus: #9FB3FF; --kb-natt-feil: #FFB4B4; /* Lerretet og sidemenyen er kjølige og nesten nøytrale, med et svakt snev av havgrønn (Lars 04.10.2026; før de varme gråtonene fra Morakel, #F8F8F6 og #F5F4F1, som leste som et grått filter mot kobolt). */ --kb-canvas: #F7F8F9; /* arbeidslerretet bak de hvite flatene */ --kb-paper: #F3F5F5; /* sidemenyen, litt mørkere enn lerretet */ --kb-surface: #FFFFFF; --kb-panel: #FCFCFA; /* innsikt og merknad på lerretet */ --kb-ink: #202323; --kb-ink-2: #59605F; --kb-ink-3: #8A908E; --kb-line: #E3E1DB; /* bærende kant */ --kb-line-2: #EDEBE6; /* svak skillelinje */ --kb-line-hover: #CFCBC2; --kb-soft: #ECEAE4; /* nøytral hover i rammen */ --kb-hover: #F7F6F3; --kb-band: #F0EFEA; /* interne grupperader */ /* Det lyseblå er litt klarere i samme tone (Lars 04.10.2026; metningen ×2, før #EEF1F8 / #D8E0EE / #E6EBF8 / #E9EDF9, som leste gråblått). */ --kb-head: #EBF1FF; /* tabellens kolonnehode */ --kb-head-line: #D1E0FC; --kb-primary: #3659C9; /* kobolt: handlinger og aktiv tilstand */ --kb-primary-hover: #2C4AAE; --kb-accent: #2F4FB8; /* lenker og aktiv tekst */ --kb-accent-hover: #2C4AAE; /* lenker under pekeren; fyllet over er for knapper */ --kb-accent-soft: #E1EBFF; --kb-accent-faint: #F2F5FC; --kb-accent-line: #C3CEEC; --kb-accent-fill: #E5EDFF; --kb-danger: #B3261E; --kb-danger-soft: #FBEDEC; --kb-danger-line: #E3B9B5; --kb-warning: #8A6A12; --kb-notice-soft: #FBF7EA; --kb-notice-line: #E4D8B4; --kb-done: #E9EDE9; --kb-done-ink: #4A5B4E; --kb-done-line: #CFD8CF; --kb-done-dot: #3E8A57; /* prikken for betalt og oppgjort: grønn, ikke svart */ /* Grafene (Morakel): det bokførte i mørk blekk (søylene for inntekter og linjen for en saldo), kostnadene i en varm grå (runde 6a). */ --kb-graf-inntekt: #1F2A44; --kb-graf-kostnad: #9A8F7A; --kb-on-primary: #FFFFFF; /* Sidemenyen: mørk og halvfet tekst og tykkere ikoner (Lars 04.10.2026; før middels grå tekst og ikoner med strek 300). Mørkt tema setter dem tilbake. */ --kb-nav-ink: #202323; --kb-nav-vekt: 500; --kb-nav-ikonvekt: 500; /* Understreken under en lenke med ikon (DESIGN.md, «Lenker med ikon»): én strek under ikon, mellomrom og tekst, i lenkens egen farge. */ --kb-understrek: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; --kb-scrim: rgba(32, 35, 35, 0.32); --kb-skuff-scrim: rgba(32, 35, 35, 0.22); /* bak en skuff: lettere, siden står */ --kb-skuff-skygge: -18px 0 44px rgba(32, 35, 35, 0.14); --kb-shadow-pop: 0 18px 46px rgba(32, 35, 35, 0.18); --kb-shadow-dialog: 0 24px 60px rgba(32, 35, 35, 0.26); --kb-display: 'Manrope', 'Inter', system-ui, sans-serif; --kb-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --kb-sidebar-w: 236px; /* Et obligatorisk felt som er tomt (feltene, REDESIGN.md). */ --kb-fyll: #E8EEFC; --kb-fyll-hover: #DFE7FB; /* Hjørnene (Lars 29.09.2026: skarpere, som feltene). Felt, knapper, kort og striper har --kb-r; det som flyter over siden (nedtrekkslister, menyer, vinduer) litt mer; dialogene mest. */ --kb-r: 4px; --kb-r-flyt: 6px; --kb-r-dialog: 8px; /* Størrelsen (Lars 30.09.2026: «rundt 103 % blir bra», etter å ha prøvd 105). Skrift, felt, etiketter, kort og tabeller regnes fra den; knappene, sidemenyen, toppstripen og kontrollene i verktøylinjer står. */ --kb-skala: 1.03; /* Bredden av en 16:9-skjerm med samme høyde som denne. base.html setter den fra skjermen; 1920 px er reserven. */ --kb-skjerm-16-9: 1920px; } /* Mørkt tema. Morakel har ikke tegnet et; dette er et forslag med samme rolle for hver farge, til vi har bestemt oss (REDESIGN.md, åpne spørsmål). color-scheme gir nettleserens egne kontroller (avkrysning, radioknapper, rullefelt) i mørkt (runde 1). */ .theme-dark { color-scheme: dark; --kb-canvas: #121416; --kb-paper: #16191C; --kb-surface: #1C1F23; --kb-panel: #1A1D20; --kb-ink: #E7E9E7; --kb-ink-2: #A6ACA9; --kb-ink-3: #7B817E; --kb-line: #2E3237; --kb-line-2: #262A2E; --kb-line-hover: #3C4147; --kb-soft: #262A2F; --kb-hover: #202428; --kb-band: #22262A; --kb-head: #1F2533; --kb-head-line: #2C3446; /* Hvit tekst på knappen holder 4,5:1 (#5A76D8 ga 4,2:1). Pekeren gjør den mørkere, ikke lysere, av samme grunn (runde 4b). */ --kb-primary: #4A67CF; --kb-primary-hover: #3F5CC4; --kb-accent: #93A7EC; --kb-accent-hover: #6F88E0; --kb-accent-soft: #232D48; --kb-accent-faint: #1D2335; --kb-accent-line: #34406A; --kb-accent-fill: #26304C; --kb-danger: #F2A09A; --kb-danger-soft: #3A1E1C; --kb-danger-line: #5C2E2A; --kb-warning: #E3C877; --kb-notice-soft: #2D2717; --kb-notice-line: #4A3F20; --kb-done: #1F2A22; --kb-done-ink: #A9C2AF; --kb-done-line: #2E3D33; --kb-done-dot: #6FBF86; --kb-graf-inntekt: #C5CDE2; --kb-graf-kostnad: #8C8374; --kb-nav-ink: #A6ACA9; /* som før: menyen er ikke vurdert i mørkt */ --kb-nav-vekt: 400; --kb-nav-ikonvekt: 300; --kb-scrim: rgba(0, 0, 0, 0.55); --kb-skuff-scrim: rgba(0, 0, 0, 0.45); --kb-skuff-skygge: -18px 0 44px rgba(0, 0, 0, 0.45); --kb-shadow-pop: 0 18px 46px rgba(0, 0, 0, 0.45); --kb-shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.55); --kb-fyll: #1F2848; --kb-fyll-hover: #252F55; } /* Husets tokens pekt om til kobolt. Deklarert både på :root og .theme-dark: temaklassen sitter på , og en variabel som bare var satt på , ville da allerede vært løst med de lyse verdiene. */ :root, .theme-dark { --primary-50: var(--kb-accent-soft); --primary-100: var(--kb-accent-line); --primary-300: #7D93DA; --primary-500: var(--kb-accent); --primary-600: var(--kb-primary); --primary-700: var(--kb-accent-hover); --primary-800: #243E93; --primary-on: var(--kb-on-primary); --info-50: var(--kb-accent-faint); --info-200: var(--kb-accent-line); --info-500: var(--kb-primary); --info-700: var(--kb-accent); --info-800: var(--kb-accent-hover); --warning-50: var(--kb-notice-soft); --warning-100: var(--kb-notice-soft); --warning-200: var(--kb-notice-line); --warning-700: var(--kb-warning); --warning-800: var(--kb-warning); --danger-50: var(--kb-danger-soft); --danger-200: var(--kb-danger-line); --danger-600: var(--kb-danger); --danger-700: var(--kb-danger); --bg: var(--kb-canvas); --surface: var(--kb-surface); --surface-alt: var(--kb-hover); --surface-tint: var(--kb-head); --surface-tint-strong: var(--kb-accent-fill); --border: var(--kb-line); --border-strong: var(--kb-line-hover); --text: var(--kb-ink); --text-muted: var(--kb-ink-2); --text-subtle: var(--kb-ink-3); --overlay: var(--kb-scrim); --shadow-sm: none; --shadow-md: var(--kb-shadow-pop); --shadow-lg: var(--kb-shadow-dialog); --radius-sm: var(--kb-r); --radius-md: var(--kb-r); --focus-ring: 0 0 0 3px var(--kb-accent-soft); --ambient-intensity: 0; /* ingen glød i hjørnene: lerretet er rolig */ --top-bar-height: 0px; /* toppstripen står ikke fast; hodene kleber mot toppen */ /* Innholdet bruker bredden, men blir aldri bredere enn en 16:9-skjerm minus menyen: på en ultrabred skjerm står det i midten (Lars 29.09.2026). */ --content-max-width: max(1024px, calc(var(--kb-skjerm-16-9) - var(--kb-sidebar-w))); } /* ----- Grunnlaget ----- */ body { font-family: var(--kb-sans); font-feature-settings: 'cv11', 'ss03'; font-size: calc(13.5px * var(--kb-skala)); background-color: var(--kb-canvas); color: var(--kb-ink); } h1, h2, h3, h4 { font-family: var(--kb-display); font-weight: 600; color: var(--kb-ink); letter-spacing: -0.015em; } h5, h6 { font-family: var(--kb-sans); } /* Avkrysning og radioknapp i kobolt, ikke Chromes egen blå. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--kb-primary); } a { color: var(--kb-accent); } a:hover { color: var(--kb-accent-hover); } :focus-visible, .btn:focus-visible, button:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; } /* Bare for skjermleseren, som Bootstraps .sr-only, også der Bootstrap ikke lastes (portalen og innloggingen, runde 15b). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lette linjeikoner: Material Symbols uten fyll og med tynn strek, som linjeikonene i kitet. Samme ikoner i markupen, bare tegnet lettere. */ .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; } /* ============================================================================ Rammen: sidemenyen og toppstripen ============================================================================ */ .kb-shell { display: flex; flex-direction: row; min-height: 100vh; } .kb-sidebar { position: sticky; top: 0; height: 100vh; width: var(--kb-sidebar-w); flex: none; display: flex; flex-direction: column; background: var(--kb-paper); border-right: 1px solid var(--kb-line); z-index: 1040; font-family: var(--kb-sans); } .kb-sidebar__brand { flex: none; padding: 16px 18px 12px; } .kb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--kb-ink); } .kb-brand:hover { color: var(--kb-ink); } .kb-brand__tile { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--kb-primary); color: var(--kb-on-primary); font-family: var(--kb-display); font-size: 14px; font-weight: 600; } .kb-brand__name { font-family: var(--kb-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } /* Ordmerket Grids (templates/_grids_merke.html): bokstavene i tekstfargen, bølgen og prikken i logoens lilla. */ .kb-brand .grids-merke { display: block; height: 24px; width: auto; } /* Øktene (static/js/okter.js): en IPv6-adresse brytes i stedet for å skyve knappen ut av kortet på telefon (runde 15a rettet). «Denne nettleseren» er en status med grønn prikk, ikke husets gamle pille (runde 15c rettet). */ .okt-rad__meta > .okt-rad__ip { white-space: normal; overflow-wrap: anywhere; } .okt-rad__denne { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 0; border-radius: 0; background: none; color: var(--kb-done-ink); font-size: calc(12px * var(--kb-skala)); font-weight: 500; letter-spacing: 0; text-transform: none; vertical-align: 0; } .okt-rad__denne::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--kb-done-dot); flex: none; } /* «Vis passord» (window.kbVisPassord i kobolt.js, og innloggingssidene): knappen står i feltets høyre kant. */ .fields-underline .form-group:has(> .kb-vis-passord) { position: relative; } .fields-underline .form-group:has(> .kb-vis-passord) > input { padding-right: 42px !important; } .kb-vis-passord { position: absolute; right: 2px; top: calc(var(--etikett-lh) + var(--etikett-mb) + (var(--felt-h) - 32px) / 2); display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: var(--kb-r); background: transparent; color: var(--kb-ink-2); cursor: pointer; } .kb-vis-passord:hover { color: var(--kb-ink); } .kb-vis-passord .material-symbols-rounded { font-size: 20px; } /* Selskapsvelgeren: to linjer med plass til lange navn, og org.nr. under. */ .kb-sidebar__company { flex: none; padding: 0 12px 10px; position: relative; } .kb-company { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--kb-line); border-radius: var(--kb-r); /* som kortene (Lars 03.10.2026; var 8 px) */ background: var(--kb-surface); color: var(--kb-ink); text-align: left; cursor: pointer; font: inherit; transition: border-color var(--transition-fast); } .kb-company:hover { border-color: var(--kb-line-hover); } .kb-company.is-static { cursor: default; } .kb-company.is-static:hover { border-color: var(--kb-line); } .kb-company__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .kb-company__name { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kb-company__meta { font-size: 11.5px; color: var(--kb-ink-2); font-variant-numeric: tabular-nums; } .kb-company__chev { flex: none; font-size: 16px; color: var(--kb-ink-3); } /* Velgerens liste er bredere enn menyen, og klippes ikke av den. */ .kb-company-menu.dropdown-menu { width: 360px; max-width: calc(100vw - 24px); max-height: min(520px, calc(100vh - 140px)); overflow: auto; margin-top: 6px; padding: 6px; border-color: var(--kb-line); box-shadow: var(--kb-shadow-pop); } .kb-company-option { align-items: center; gap: 10px; white-space: normal; } .kb-company-option__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .kb-company-option__name { font-size: 13px; line-height: 1.3; } .kb-company-option__meta { font-size: 11.5px; color: var(--kb-ink-2); font-variant-numeric: tabular-nums; } .kb-company-option.active { background: var(--kb-accent-faint); color: var(--kb-ink); font-weight: 500; } .kb-company-option__check { color: var(--kb-accent) !important; margin: 0 !important; font-size: 18px !important; } .kb-company-add .material-symbols-rounded { color: var(--kb-accent); } /* Menylisten ruller alene; logo, velger og bruker står fast. */ .kb-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; scrollbar-color: var(--kb-line) transparent; } /* Skriften i menyen: 14 px for gruppene og 13 px under (Lars 03.10.2026, «fonten er litt for liten»; var 13 og 12,5). Luften rundt punktene under er strammet, så de lengste navnene («Pensjon og sykepenger») får plass i samme bredde. */ .kb-nav__item, .kb-nav__parent { display: flex; align-items: center; gap: 10px; height: 34px; flex: none; padding: 0 10px; border-radius: 7px; font-size: 14px; font-weight: var(--kb-nav-vekt); color: var(--kb-nav-ink); background: transparent; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; transition: background-color 150ms, color 150ms; } .kb-nav__item:hover, .kb-nav__parent:hover { background: var(--kb-soft); color: var(--kb-ink); text-decoration: none; } .kb-nav__item .material-symbols-rounded, .kb-nav__parent .material-symbols-rounded { font-size: 19px; flex: none; } /* Ikonene i menyen: tykkere strek, og én farge per gruppe (Lars 04.10.2026, som Tripletex). Punktene i en gruppe får gruppens farge; Oversikt er kobolt. Fargene holder minst 3,5:1 mot lerretet (3:1 kreves for ikoner). I mørkt tema står ikonene som før, grå og tynne. */ .kb-nav .material-symbols-rounded:not(.kb-nav__chev) { font-variation-settings: 'FILL' 0, 'wght' var(--kb-nav-ikonvekt), 'GRAD' 0, 'opsz' 20; color: var(--nav-farge, var(--kb-primary)); } .theme-dark .kb-nav .material-symbols-rounded:not(.kb-nav__chev) { color: inherit; } .kb-nav__group[data-gruppe="faktura"] { --nav-farge: #D9602A; } .kb-nav__group[data-gruppe="prosjekt"] { --nav-farge: #2E7BB0; } .kb-nav__group[data-gruppe="bilag"] { --nav-farge: #6A4FD6; } .kb-nav__group[data-gruppe="bank"] { --nav-farge: #0B8A8F; } .kb-nav__group[data-gruppe="lonn"] { --nav-farge: #2E8F55; } .kb-nav__group[data-gruppe="rapporter"] { --nav-farge: #A97A00; } .kb-nav__group[data-gruppe="selskap"] { --nav-farge: #B0478A; } .kb-nav__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Barnet får koboltpillen; forelderen bare tyngre skrift — aldri to like sterke aktive flater (kitet, «Sidemeny»). */ .kb-nav__item.is-active { background: var(--kb-accent-soft); color: var(--kb-accent); font-weight: 600; } .kb-nav__group.has-active > .kb-nav__parent { color: var(--kb-ink); font-weight: 600; } .kb-nav__chev { font-size: 16px !important; color: var(--kb-ink-3); transition: transform 150ms; } .kb-nav__group.is-open > .kb-nav__parent .kb-nav__chev { transform: rotate(90deg); } .kb-nav__children { display: none; margin: 1px 0 4px 17px; padding-left: 4px; border-left: 1px solid var(--kb-line); flex-direction: column; gap: 1px; } .kb-nav__group.is-open > .kb-nav__children { display: flex; } .kb-nav__children .kb-nav__item { height: 32px; font-size: 13px; gap: 7px; padding: 0 6px; } .kb-nav__children .kb-nav__item .material-symbols-rounded { font-size: 17px; } .kb-nav__section { padding: 10px 8px 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-ink-3); user-select: none; } .kb-nav__count { flex: none; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--kb-primary); color: var(--kb-on-primary); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .kb-nav__group.is-open > .kb-nav__parent .kb-nav__count { display: none; } /* telleren står på punktet under */ /* Brukeren og språket nederst. */ .kb-sidebar__user { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-top: 1px solid var(--kb-line); background: var(--kb-paper); } .kb-lang { align-self: flex-start; margin: 0 2px; } .kb-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--kb-ink); text-align: left; font: inherit; cursor: pointer; } .kb-user:hover, .kb-user[aria-expanded="true"] { background: var(--kb-surface); } .kb-user__avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--kb-soft); font-size: 11px; font-weight: 600; } .kb-user__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .kb-user__name { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-user__meta { font-size: 11px; color: var(--kb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-user__chev { font-size: 15px; color: var(--kb-ink-3); flex: none; } .kb-user-menu.dropdown-menu { width: 240px; margin-bottom: 6px; } /* Innholdet til høyre for menyen. */ .kb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .kb-topbar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; flex: none; } .kb-topbar__menu { display: none; } .kb-topbar__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; } .kb-topbar .btn-icon { color: var(--kb-ink-2); } .kb-topbar .btn-icon:hover { background: var(--kb-soft); color: var(--kb-ink); } /* Margen er den samme på alle sidene: 40 px (Lars 03.10.2026: Bokføring, med 24 + 15 i Bootstrap-beholderen, er den smaleste; Oversikt og Fakturaer hadde 24). Beholderen på Bokføring mister sine 15, så siden står der den sto. */ .kb-main .main-content { padding: 4px 40px 48px; max-width: var(--content-max-width); margin: 0 auto; width: 100%; } .kb-main .main-content > .container-fluid:not(.has-floating-bar) { padding-left: 0; padding-right: 0; } /* Smal skjerm: menyen ligger bak menyknappen, over en mørk flate. */ .kb-scrim { position: fixed; inset: 0; background: var(--kb-scrim); z-index: 1039; } @media (max-width: 1023px) { .kb-sidebar { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform 200ms ease; box-shadow: none; } body.kb-nav-open .kb-sidebar { transform: translateX(0); box-shadow: var(--kb-shadow-pop); } .kb-topbar__menu { display: inline-flex; } .kb-main .main-content { padding: 4px 16px 40px; } } @media (prefers-reduced-motion: reduce) { .kb-sidebar, .kb-nav__chev { transition: none; } } /* Språkvelgeren (husets komponent) i menyens farger. */ .kb-lang.lang-toggle { background: var(--kb-soft); border: 0; } .kb-lang .lang-toggle__btn.is-active { background: var(--kb-surface); color: var(--kb-ink); box-shadow: none; } /* ============================================================================ Sidehodet ============================================================================ */ .page-header { align-items: flex-end; flex-wrap: wrap; gap: 16px 24px; padding-bottom: 0; margin: 8px 0 28px; border-bottom: 0; } /* Handlingene brytes på smal skjerm; husets flex: 0 0 auto lot dem aldri krympe, så de skjøv siden bredere enn skjermen. */ .page-header__actions { flex-wrap: wrap; flex: 0 1 auto; min-width: 0; max-width: 100%; } .page-header__title { font-family: var(--kb-display); font-size: calc(28px * var(--kb-skala)); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .page-header__title .material-symbols-rounded { display: none; } /* tittelen står uten ikon */ .page-header__subtitle { color: var(--kb-ink-2); font-size: calc(13px * var(--kb-skala)); margin-top: 4px; } .page-header__actions { gap: 8px; } /* Øyebrynet over tittelen på en underside (Innstillinger, Kontoutdrag). */ .kb-eyebrow { display: block; font-size: calc(11.5px * var(--kb-skala)); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kb-ink-2); margin-bottom: 6px; } /* ============================================================================ Knappene: én sterk handling, myk aksent for gjentatt arbeid, ellers nøytral ============================================================================ */ .btn { height: 36px; padding: 0 14px; border-radius: var(--kb-r); font-size: 13px; font-weight: 500; border-color: var(--kb-line); background-color: var(--kb-surface); color: var(--kb-ink); } .btn:hover { background-color: var(--kb-hover); border-color: var(--kb-line-hover); color: var(--kb-ink); } .btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; } .btn-primary { background-color: var(--kb-primary); border-color: var(--kb-primary); color: var(--kb-on-primary); } .btn-primary:hover { background-color: var(--kb-primary-hover); border-color: var(--kb-primary-hover); color: var(--kb-on-primary); } .btn-primary .material-symbols-rounded { color: inherit; } .btn-secondary, .btn-outline-secondary { background-color: var(--kb-surface); border-color: var(--kb-line); color: var(--kb-ink); } .btn-secondary:hover, .btn-outline-secondary:hover { background-color: var(--kb-hover); border-color: var(--kb-line-hover); color: var(--kb-ink); } /* Ikonene i nøytrale knapper er nøytrale; bare handlingen selv er kobolt. */ .btn-secondary .material-symbols-rounded, .btn-outline-secondary .material-symbols-rounded { color: var(--kb-ink-2); } /* Bootstrap 4 farger en fokusert eller trykket knapp (mørkegrå for secondary). Fokus vises med ringen fra :focus-visible, ikke med en ny farge, så knappen beholder fargen sin. */ .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active { background-color: var(--kb-surface); border-color: var(--kb-line); color: var(--kb-ink); box-shadow: none; } .btn-secondary:focus:hover, .btn-outline-secondary:focus:hover { background-color: var(--kb-hover); border-color: var(--kb-line-hover); } .btn-primary:focus, .btn-primary.focus { background-color: var(--kb-primary); border-color: var(--kb-primary); color: var(--kb-on-primary); box-shadow: none; } .btn-primary:focus:hover, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--kb-primary-hover); border-color: var(--kb-primary-hover); color: var(--kb-on-primary); box-shadow: none; } /* Deaktivert: samme farger, bare svakere. Bootstraps :disabled-regler er sterkere enn .btn-primary alene og ga #007BFF, #6C757D og #FFC107 (runde 1). */ .btn-primary:disabled, .btn-primary.disabled { background-color: var(--kb-primary); border-color: var(--kb-primary); color: var(--kb-on-primary); opacity: 0.45; } .btn-secondary:disabled, .btn-secondary.disabled, .btn-outline-secondary:disabled { background-color: var(--kb-surface); border-color: var(--kb-line); color: var(--kb-ink); opacity: 0.45; } .btn-soft:disabled, .btn-soft.disabled { background-color: var(--kb-accent-soft); border-color: transparent; color: var(--kb-accent); opacity: 0.45; } .btn-warning:disabled, .btn-warning.disabled { background-color: var(--kb-surface); border-color: var(--kb-notice-line); color: var(--kb-warning); opacity: 0.45; } .btn-danger:disabled, .btn-danger.disabled { background-color: var(--kb-surface); border-color: var(--kb-danger-line); color: var(--kb-danger); opacity: 0.45; } .btn-ghost:disabled, .btn-icon:disabled { background-color: transparent; border-color: transparent; opacity: 0.45; } /* Myk aksent: meningsfullt, gjentatt arbeid (kitet, «Actions»). */ .btn-soft { background-color: var(--kb-accent-soft); border-color: transparent; color: var(--kb-accent); } .btn-soft:hover { background-color: var(--kb-accent-line); border-color: transparent; color: var(--kb-accent-hover); } .btn-soft .material-symbols-rounded { color: inherit; } .btn-quiet { background-color: var(--kb-soft); border-color: transparent; color: var(--kb-ink); } .btn-quiet:hover { background-color: var(--kb-line); border-color: transparent; } .btn-danger { color: var(--kb-danger); border-color: var(--kb-danger-line); } .btn-danger:hover { background-color: var(--kb-danger-soft); border-color: var(--kb-danger); color: var(--kb-danger); } .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active { background-color: var(--kb-danger-soft); border-color: var(--kb-danger); color: var(--kb-danger); box-shadow: none; } /* Farlig, men reverserbart (Reverser bilag): varm tekst på hvitt, ikke gult. */ .btn-warning { background-color: var(--kb-surface); border-color: var(--kb-notice-line); color: var(--kb-warning); } .btn-warning:hover, .btn-warning:focus, .btn-warning:not(:disabled):not(.disabled):active { background-color: var(--kb-notice-soft); border-color: var(--kb-warning); color: var(--kb-warning); box-shadow: none; } .btn-warning .material-symbols-rounded { color: inherit; } /* Spøkelse: sjeldne verktøy (Importer) ved siden av de viktige. */ .btn-ghost { background-color: transparent; border-color: transparent; color: var(--kb-ink-2); } .btn-ghost:hover { background-color: var(--kb-soft); border-color: transparent; color: var(--kb-ink); } .btn-ghost .material-symbols-rounded { color: inherit; } .btn-icon { border-color: transparent; background-color: transparent; color: var(--kb-ink-2); border-radius: var(--kb-r); } .btn-icon:hover { background-color: var(--kb-soft); color: var(--kb-ink); border-color: transparent; } .btn .material-symbols-rounded { font-size: 18px; } .btn-sm .material-symbols-rounded { font-size: 16px; } /* En innebygd handling i kobolt, uten ramme. */ .kb-link { display: inline-flex; align-items: center; gap: 4px; padding: 0 0 1px; border: 0; background: none; color: var(--kb-accent); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; } /* Ikke text-decoration: i en inline-flex tegner ikonet og teksten hver sin strek på hver sin grunnlinje, og streken brytes (DESIGN.md). */ .kb-link:hover { color: var(--kb-accent-hover); background: var(--kb-understrek); } .kb-link .material-symbols-rounded { font-size: calc(16px * var(--kb-skala)); } /* Segmentert valg (Enkel | Avansert). */ .kb-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--kb-soft); border-radius: calc(var(--kb-r) + 2px); } .kb-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--kb-r); background: transparent; color: var(--kb-ink-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; } .kb-seg button[aria-pressed="true"] { background: var(--kb-surface); color: var(--kb-ink); box-shadow: 0 0 0 1px var(--kb-line); } /* Hodet over et skjema som er åpent på en listeside (Fakturaer, runde 4a): ikonet i en kobolt flis, hva som er åpent («Ny faktura», «Redigerer kladd KLADD-0003»), og handlingene til høyre. Bokføring har sitt eget med typevalget, med de samme målene. */ .kb-skjemahode { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 16px; } .kb-skjemahode > .kb-skjemahode__ikon { width: calc(32px * var(--kb-skala)); height: calc(32px * var(--kb-skala)); flex: none; display: grid; place-items: center; border-radius: var(--kb-r); background: var(--kb-accent-soft); color: var(--kb-accent); font-size: calc(18px * var(--kb-skala)); } .kb-skjemahode > .kb-skjemahode__tittel { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--kb-display); font-size: calc(18px * var(--kb-skala)); font-weight: 600; letter-spacing: -0.01em; color: var(--kb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-skjemahode > .kb-skjemahode__tittel:focus { outline: none; } /* Legg til en linje: en stiplet rad under linjene (Bokføring og Fakturaer). */ .kb-legg-til { margin-top: 12px; width: 100%; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--kb-line-hover); border-radius: var(--kb-r); background: transparent; color: var(--kb-ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; } .kb-legg-til:hover { border-color: var(--kb-accent); color: var(--kb-accent); background: var(--kb-accent-faint); } .kb-legg-til .material-symbols-rounded { font-size: 17px; } .kb-legg-til[hidden] { display: none; } /* ============================================================================ Kortene: hvite, tynn kant, ingen skygge; hodet er hvitt, ikke farget ============================================================================ */ .card { border-color: var(--kb-line); border-radius: var(--kb-r); background: var(--kb-surface); } .card-header { background-color: var(--kb-surface); border-bottom: 1px solid var(--kb-line-2); padding: calc(14px * var(--kb-skala)) calc(18px * var(--kb-skala)); font-family: var(--kb-display); font-size: calc(15.5px * var(--kb-skala)); font-weight: 600; border-radius: calc(var(--kb-r) - 1px) calc(var(--kb-r) - 1px) 0 0; } .card-footer { background-color: var(--kb-surface); border-top: 1px solid var(--kb-line-2); } .card-body { padding: calc(18px * var(--kb-skala)); } /* Hodet og foten har kortets hjørner innenfor kanten (radien minus kanten). Bootstrap gir dem sine egne med høyere spesifisitet (:first-child); med 8 px kort ble hodets hvite flate nesten firkantet og malte over kanten i de øvre hjørnene. */ .card > .card-header:first-child { border-radius: calc(var(--kb-r) - 1px) calc(var(--kb-r) - 1px) 0 0; } .card > .card-footer:last-child { border-radius: 0 0 calc(var(--kb-r) - 1px) calc(var(--kb-r) - 1px); } /* ============================================================================ Tabellene: lyseblått kolonnehode med fin regel under, hvite rader, hvit sluttsum med regel over (kitet, «Tabellfarger») ============================================================================ */ .table { font-size: calc(13px * var(--kb-skala)); } .table th { background-color: var(--kb-head); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--kb-ink-2); font-size: calc(12px * var(--kb-skala)); font-weight: 600; text-transform: none; letter-spacing: 0; padding: calc(9px * var(--kb-skala)) calc(12px * var(--kb-skala)); border-bottom: 1px solid var(--kb-head-line); } /* Bootstrap 4 gir .table thead th en 2 px lys grå linje under og en over (spesifisitet 0,1,2, så den slo regelen over); hodet har kitets fine regel i stedet, også i mørkt tema. */ .table thead th { border-top: 0; border-bottom: 1px solid var(--kb-head-line); } /* Tabelltall gjelder tallkolonnene: i Inter gjør de bindestrekene i et hode brede («Kontakt - e - post»), så de andre hodene har vanlige tall (runde 14a rettet). */ .table th:not(.num):not(.number):not(.amount):not(.text-right) { font-variant-numeric: normal; } .thead-light th, thead.thead-light th { background-color: var(--kb-head) !important; color: var(--kb-ink-2) !important; } .table td { padding: calc(11px * var(--kb-skala)) calc(12px * var(--kb-skala)); border-bottom: 1px solid var(--kb-line-2); } .table tbody tr:hover { background-color: var(--kb-hover); } .table-data thead th { padding: calc(9px * var(--kb-skala)) calc(14px * var(--kb-skala)); color: var(--kb-ink-2); border-top: 0; } .table-data thead th:first-child, .table-data thead th:last-child { border-radius: 0; } .table-data tbody td { padding: calc(11px * var(--kb-skala)) calc(14px * var(--kb-skala)); border-bottom: 1px solid var(--kb-line-2); } /* Summene står under kolonnene sine: foten har radenes luft (runde 10b; før 12 px mot radenes 14, så «Totalt» og summen sto skjevt). */ .table-data tfoot td { padding: calc(11px * var(--kb-skala)) calc(14px * var(--kb-skala)); } .table-data tbody tr:hover { background-color: var(--kb-hover); } .table-data tbody tr.is-expanded, .table-data tbody tr.is-expanded + tr.detail-row { background-color: var(--kb-accent-faint); } .table-sticky thead th { background-color: var(--kb-head); box-shadow: inset 0 -1px 0 var(--kb-head-line); } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--kb-hover); } /* Sluttsummen: hvit, halvfet, med hodets regel over. */ .table tr.kb-total td, .table tfoot tr:last-child td { background: var(--kb-surface); font-weight: 600; border-top: 1px solid var(--kb-head-line); } /* En intern grupperad er grå; tabellens topp og sluttsum er det ikke. */ .table tr.kb-band td { background: var(--kb-band); color: var(--kb-ink-2); font-size: calc(12px * var(--kb-skala)); font-weight: 600; padding-top: calc(7px * var(--kb-skala)); padding-bottom: calc(7px * var(--kb-skala)); } .cell-badge { background-color: var(--kb-soft); color: var(--kb-ink-2); } .cell-badge--blue { background-color: var(--kb-accent-soft); color: var(--kb-accent); } /* ============================================================================ Feltene (REDESIGN.md, «Feltene») Et felt er en boks, og formen styres av variablene under. De settes på .fields-underline, så en annen feltstil er et annet sett verdier, ikke nye regler: · høyde, luft og tekst --felt-h, --felt-pad, --felt-str · flate og kant, i ro, hover og fokus --felt-bg*, --felt-kant*, --felt-bw · fokusringen --felt-ring · hvor etiketten står i bruk og tom --etikett-hevet, --etikett-tom Standarden er «Flytende, fylt», valgt av Lars 29.09.2026 i feltlaben: etiketten står inne i boksen når feltet er tomt og over boksen når det er i bruk (kobolt ved fokus), hjørnene er 4 px, og et obligatorisk felt som er tomt, har kobolt-fyllet (--kb-fyll). Alt annet er hvitt med lys kant: et valgfritt felt, et felt med data, et nedtrekk med et valg og et forhåndsutfylt felt. En feil beholder fyllet og får rød kant. Obligatorisk er required eller aria-required="true" på feltet; et valgfritt felt sier «(valgfri)» i etiketten (.kb-valgfri). Feltlaben i forhåndsvisningen (static/css/felt-lab.css, /felt-lab) har de andre variantene og bytter bare verdiene. Etiketten flyttes med transform, som i style.css: den beholder plassen sin i flyten, så skjemaet ikke hopper når et felt fylles ut. Hvilke felt som kan ha etiketten inni seg når de er tomme, er de samme som i style.css (ikke nedtrekk, dato og etiketter som omslutter sin egen kontroll). ============================================================================ */ /* Felt utenfor skjemaene (søk og filtre i verktøylinjer, redigering i tabeller) er kompakte bokser. */ .form-control, .form-select, select.form-control, input.form-control, textarea.form-control, input[type="text"]:not(.form-control-plaintext):not(.no-style), input[type="email"]:not(.no-style), input[type="password"]:not(.no-style), input[type="number"]:not(.no-style), input[type="tel"]:not(.no-style), input[type="url"]:not(.no-style), input[type="search"]:not(.no-style), input[type="date"]:not(.no-style), input[type="datetime-local"]:not(.no-style), input[type="time"]:not(.no-style), input[type="month"]:not(.no-style), select:not([multiple]):not(.no-style), textarea:not(.no-style) { height: 34px; padding: 0 10px; font-size: 13px; color: var(--kb-ink); caret-color: var(--kb-accent); background-color: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-r); } textarea.form-control, textarea:not(.no-style) { height: auto; padding: 7px 10px; } /* Søkefeltet med ikonet foran (infotavle-skuffen og sidene som ikke er bygget om ennå): regelen over satte venstre luft til 10 px, så ikonet sto oppå teksten (runde 6b). */ .toolbar-search input.form-control:not(.no-style) { padding-left: 36px; } .form-control:focus, .form-select:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.no-style):focus, select:not([multiple]):not(.no-style):focus, textarea:not(.no-style):focus { border-color: var(--kb-accent); box-shadow: var(--focus-ring); } .form-control:disabled, .form-control[readonly] { background-color: var(--kb-hover); color: var(--kb-ink-2); } .form-group label, label.form-label { font-size: calc(12px * var(--kb-skala)); font-weight: 500; color: var(--kb-ink-2); letter-spacing: 0; margin-bottom: 5px; } /* ----- Skjemaene (.fields-underline): variablene, med Morakels verdier ----- */ .fields-underline { --felt-h: calc(36px * var(--kb-skala)); --felt-pad: 0 calc(12px * var(--kb-skala)); --felt-textarea-pad: calc(8px * var(--kb-skala)) calc(12px * var(--kb-skala)); --felt-str: calc(13.5px * var(--kb-skala)); --felt-bg: var(--kb-surface); --felt-bg-hover: var(--kb-surface); --felt-bg-fokus: var(--kb-surface); --felt-bw: 1px; --felt-kant: var(--kb-line); --felt-kant-hover: var(--kb-line-hover); --felt-kant-fokus: var(--kb-accent); --felt-radius: var(--kb-r); --felt-ring: 0 0 0 3px var(--kb-accent-soft); /* Et tomt felt er hvitt som et utfylt; bare et obligatorisk felt som er tomt, har fyllet (--felt-bg-mangler). En feil beholder fyllet, og et forhåndsutfylt felt er hvitt med en svak kobolt kant og ✦. */ --felt-bg-tom: var(--felt-bg); --felt-bg-tom-hover: var(--felt-bg-hover); --felt-kant-tom: var(--felt-kant); --felt-kant-tom-hover: var(--felt-kant-hover); --felt-bg-mangler: var(--kb-fyll); --felt-bg-mangler-hover: var(--kb-fyll-hover); --felt-kant-mangler: transparent; --felt-bg-feil: var(--kb-fyll); --felt-bg-forslag: var(--kb-surface); --felt-kant-forslag: var(--kb-accent-line); --felt-pil: right calc(12px * var(--kb-skala)) center; /* Pilen i et nedtrekk; lysere i mørkt tema (under). */ --felt-pil-bilde: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%2359605F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='1 1 5 5 9 1'%3e%3c/polyline%3e%3c/svg%3e"); --felt-enhet-h: calc(12px * var(--kb-skala)); --felt-tekst-dy: 0px; --etikett-str: calc(12px * var(--kb-skala)); --etikett-lh: calc(16px * var(--kb-skala)); --etikett-farge: var(--kb-ink-2); --etikett-case: none; --etikett-sperr: 0; --etikett-mb: 5px; --etikett-ml: 0px; --etikett-pad: 0; --etikett-flate: none; --etikett-maks: 100%; --etikett-hevet: none; --etikett-hevet-pe: auto; /* Tom: inne i boksen. Etiketten (linja L = 16 px) står L + 5 px over boksens topp, så midten av boksen (høyden H = 36 px) er L + 5 + H/2 ned, og etiketten flyttes dit minus L/2: 26 px + 5 px med skalaen 1. Teksten i boksen begynner 12 px + kanten inn. I et tekstområde står etiketten på første linje: L + 5 + 8 px luft. */ --etikett-tom: translate(calc(12px * var(--kb-skala) + 1px), calc(26px * var(--kb-skala) + 5px)); --etikett-tom-ta: translate(calc(12px * var(--kb-skala) + 1px), calc(24px * var(--kb-skala) + 5px)); --etikett-tom-str: calc(13.5px * var(--kb-skala)); --etikett-tom-farge: var(--kb-ink-2); --etikett-tom-pe: none; --etikett-tom-maks: calc(100% - 26px); --plassholder-hvile: transparent; } /* iPhone forstørrer siden når et felt under 16 px får fokus: på telefon har feltene 16 px i hele appen (runde 15b og 15c rettet; innloggingen og portalen gjør det også ved berøringsskjerm). */ @media (max-width: 640px) { .fields-underline { --felt-str: 16px; --etikett-tom-str: 16px; } } .fields-underline .form-control, .fields-underline input:not([type]):not(.no-style), .fields-underline input[type="text"]:not(.no-style), .fields-underline input[type="email"]:not(.no-style), .fields-underline input[type="password"]:not(.no-style), .fields-underline input[type="number"]:not(.no-style), .fields-underline input[type="date"]:not(.no-style), .fields-underline input[type="month"]:not(.no-style), .fields-underline input[type="datetime-local"]:not(.no-style), .fields-underline input[type="time"]:not(.no-style), .fields-underline input[type="search"]:not(.no-style), .fields-underline input[type="tel"]:not(.no-style), .fields-underline input[type="url"]:not(.no-style), .fields-underline select:not([multiple]):not(.no-style), .fields-underline textarea:not(.no-style) { height: var(--felt-h); padding: var(--felt-pad); font-size: var(--felt-str); color: var(--kb-ink); caret-color: var(--kb-accent); background-color: var(--felt-bg) !important; border-style: solid !important; border-width: var(--felt-bw) !important; border-color: var(--felt-kant) !important; border-radius: var(--felt-radius) !important; box-shadow: none !important; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } .fields-underline textarea:not(.no-style) { height: auto; min-height: 72px; padding: var(--felt-textarea-pad); line-height: 1.45; } .fields-underline input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.no-style):not(:focus):not(:disabled):not([readonly]):hover, .fields-underline textarea:not(.no-style):not(:focus):not(:disabled):not([readonly]):hover, .fields-underline select:not([multiple]):not(.no-style):not(:focus):not(:disabled):hover { border-color: var(--felt-kant-hover) !important; background-color: var(--felt-bg-hover) !important; } .fields-underline .form-control:focus, .fields-underline input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.no-style):focus, .fields-underline select:not(.no-style):focus, .fields-underline textarea:not(.no-style):focus { padding: var(--felt-pad); border-style: solid !important; border-width: var(--felt-bw) !important; border-color: var(--felt-kant-fokus) !important; background-color: var(--felt-bg-fokus) !important; box-shadow: var(--felt-ring) !important; outline: none; } .fields-underline textarea:not(.no-style):focus { padding: var(--felt-textarea-pad); } .fields-underline select:not([multiple]):not(.no-style) { background-image: var(--felt-pil-bilde) !important; background-repeat: no-repeat !important; background-position: var(--felt-pil) !important; background-size: 10px 6px !important; padding-right: 30px !important; } .theme-dark .fields-underline, .fields-underline.theme-dark { --felt-pil-bilde: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23A6ACA9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='1 1 5 5 9 1'%3e%3c/polyline%3e%3c/svg%3e"); } /* Pilene i tallfeltene er støy i et regnskap; piltastene virker fortsatt. */ .fields-underline input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .fields-underline input[type="number"]::-webkit-inner-spin-button, .fields-underline input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Etikettene. Den generelle regelen gjelder også etiketter rundt en avkrysning; plasseringen gjelder bare etiketten som står over sitt eget felt. */ .fields-underline label, .fields-underline .form-group label { font-size: var(--etikett-str); line-height: var(--etikett-lh); font-weight: 500; color: var(--etikett-farge); text-transform: var(--etikett-case); letter-spacing: var(--etikett-sperr); margin-bottom: 5px; } .fields-underline .form-group:has(> label):not(:has(> label :is(input, select, textarea))) > label { display: block; width: fit-content; max-width: var(--etikett-maks); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; /* over boksen til Tom Select, som har z-index 1 */ margin-bottom: var(--etikett-mb); margin-left: var(--etikett-ml); padding: var(--etikett-pad); background: var(--etikett-flate); transform: var(--etikett-hevet); transform-origin: left top; pointer-events: var(--etikett-hevet-pe); transition: transform 150ms ease, font-size 150ms ease, color 150ms ease; } /* Tomt og uten fokus: der varianten vil ha etiketten (i standarden: der den står). Et nedtrekk er tomt når det tomme valget er valgt, og ikke åpent. */ .fields-underline .form-group:has(> label):not(:has(> label :is(input, select, textarea))):has(> input:placeholder-shown:not(:focus)) > label, .fields-underline .form-group:has(> label):not(:has(> label :is(input, select, textarea))):has(> .kb-unit > input:placeholder-shown:not(:focus)) > label, .fields-underline .form-group:has(> label):not(:has(> label :is(input, select, textarea))):not(:focus-within):has(> select:not([multiple]) option[value=""]:checked) > label { transform: var(--etikett-tom); font-size: var(--etikett-tom-str); color: var(--etikett-tom-farge); text-transform: none; letter-spacing: 0; background: none; max-width: var(--etikett-tom-maks); pointer-events: var(--etikett-tom-pe); } .fields-underline .form-group:has(> label):not(:has(> label :is(input, select, textarea))):has(> textarea:placeholder-shown:not(:focus)) > label { transform: var(--etikett-tom-ta); font-size: var(--etikett-tom-str); color: var(--etikett-tom-farge); text-transform: none; letter-spacing: 0; background: none; max-width: var(--etikett-tom-maks); pointer-events: var(--etikett-tom-pe); } /* Dato, måned og klokkeslett viser alltid dd.mm.åååå: etiketten står i bruk. */ .fields-underline .form-group:has(> label):has(> input[type="date"]) > label, .fields-underline .form-group:has(> label):has(> input[type="month"]) > label, .fields-underline .form-group:has(> label):has(> input[type="time"]) > label, .fields-underline .form-group:has(> label):has(> input[type="datetime-local"]) > label { transform: var(--etikett-hevet); font-size: var(--etikett-str); color: var(--etikett-farge); text-transform: var(--etikett-case); letter-spacing: var(--etikett-sperr); background: var(--etikett-flate); max-width: var(--etikett-maks); pointer-events: var(--etikett-hevet-pe); } /* Fokus: etiketten blir kobolt. Feil: rød. */ .fields-underline .form-group:has(> label):not(:has(> label :is(input, select, textarea))):focus-within > label { color: var(--kb-accent); } .fields-underline .form-group:has(> label):has(> .is-invalid) > label, .fields-underline .form-group:has(> label):has(> .kb-unit > .is-invalid) > label { color: var(--kb-danger); } /* Hintet i feltet: synlig når etiketten står over (standarden), ellers først når man skriver. */ .fields-underline .form-group:has(> label) > input:not(:focus)::placeholder, .fields-underline .form-group:has(> label) > textarea:not(:focus)::placeholder, .fields-underline .form-group:has(> label) > .kb-unit > input:not(:focus)::placeholder { color: var(--plassholder-hvile); } /* Enheten inne i feltet (kr, mnd, %), og tallet høyrestilt. */ .kb-unit { position: relative; display: block; } .kb-unit > input { padding-right: 40px !important; text-align: right; font-variant-numeric: tabular-nums; } /* Beløpsfeltene (static/js/belop.js): tekstfelt med tallformat. */ input[data-belop] { font-variant-numeric: tabular-nums; } /* Et beløp med feil har rød kant og meldingen, ikke Bootstraps ikon: det lå over det siste sifferet i det høyrestilte beløpet (runde 10b). */ .form-control[data-belop].is-invalid { background-image: none; padding-right: 10px; } .kb-unit::after { content: attr(data-unit); position: absolute; right: var(--felt-enhet-h, 12px); top: 50%; transform: translateY(calc(-50% + var(--felt-tekst-dy, 0px))); font-size: calc(12px * var(--kb-skala)); color: var(--kb-ink-2); pointer-events: none; } /* Tomt og uten fokus: flaten og kanten for et tomt felt. Settes på gruppa, så feltet, et nedtrekk og hover følger med uten egne regler. I standarden er de de samme som ellers; en variant kan gi tomme felt en egen farge, så man ser hva som mangler (feltlaben, «Flytende, fylt»). Et datofelt merkes data-tom av skript, fordi CSS ikke ser om det er tomt. Et ugyldig felt har sin egen regel under. */ .fields-underline .form-group:has(> input:placeholder-shown:not(:focus):not(.is-invalid)), .fields-underline .form-group:has(> .kb-unit > input:placeholder-shown:not(:focus):not(.is-invalid)), .fields-underline .form-group:has(> textarea:placeholder-shown:not(:focus):not(.is-invalid)), .fields-underline .form-group:has(> input[data-tom]:not(:focus):not(.is-invalid)), .fields-underline .form-group:not(:focus-within):has(> select:not([multiple]):not(.is-invalid) option[value=""]:checked) { --felt-bg: var(--felt-bg-tom); --felt-bg-hover: var(--felt-bg-tom-hover); --felt-kant: var(--felt-kant-tom); --felt-kant-hover: var(--felt-kant-tom-hover); } /* Obligatorisk og tomt: fyllet som viser hva som mangler. */ .fields-underline .form-group:has(> input:is([required], [aria-required="true"]):placeholder-shown:not(:focus):not(.is-invalid)), .fields-underline .form-group:has(> .kb-unit > input:is([required], [aria-required="true"]):placeholder-shown:not(:focus):not(.is-invalid)), .fields-underline .form-group:has(> textarea:is([required], [aria-required="true"]):placeholder-shown:not(:focus):not(.is-invalid)), .fields-underline .form-group:has(> input:is([required], [aria-required="true"])[data-tom]:not(:focus):not(.is-invalid)), .fields-underline .form-group:not(:focus-within):has(> select:is([required], [aria-required="true"]):not([multiple]):not(.is-invalid) option[value=""]:checked) { --felt-bg: var(--felt-bg-mangler); --felt-bg-hover: var(--felt-bg-mangler-hover); --felt-kant: var(--felt-kant-mangler); --felt-kant-hover: var(--felt-kant-mangler); } /* Forhåndsutfylt (window.markAutofilled): hvitt med en svak kobolt kant og ✦ til brukeren endrer feltet selv. Settes på gruppa, så en etikett i kanten får samme flate bak seg. */ .fields-underline .form-group:has(> .is-autofilled), .fields-underline .form-group:has(> .kb-unit > .is-autofilled) { --felt-bg: var(--felt-bg-forslag); --felt-bg-hover: var(--felt-bg-forslag); --felt-kant: var(--felt-kant-forslag); --felt-kant-hover: var(--felt-kant-forslag); } .fields-underline input.is-autofilled:not(.no-style), .fields-underline textarea.is-autofilled:not(.no-style) { box-shadow: none !important; } /* Et forhåndsutfylt -et). Tom Selects egen CSS har lav spesifisitet og nesten ingen !important; høyre luft er variabelen --ts-pr-min. Skriptet er static/js/nedtrekk.js. ---------------------------------------------------------------------------- */ .fields-underline .ts-wrapper { width: 100%; --ts-pr-min: 30px; } .fields-underline .ts-wrapper .ts-control { min-height: var(--felt-h); height: var(--felt-h); padding: var(--felt-pad); align-items: center; flex-wrap: nowrap; font-size: var(--felt-str); line-height: 20px; color: var(--kb-ink); background-color: var(--felt-bg); background-image: var(--felt-pil-bilde); background-repeat: no-repeat; background-position: var(--felt-pil); background-size: 10px 6px; border-style: solid; border-width: var(--felt-bw); border-color: var(--felt-kant); border-radius: var(--felt-radius); box-shadow: none; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } .fields-underline .ts-wrapper:not(.focus):not(.disabled) .ts-control:hover { border-color: var(--felt-kant-hover); background-color: var(--felt-bg-hover); } .fields-underline .ts-wrapper.focus .ts-control { border-color: var(--felt-kant-fokus); background-color: var(--felt-bg-fokus); box-shadow: var(--felt-ring); } /* Tom Selects egen `.ts-wrapper.single.input-active .ts-control { background: #fff }` er sterkere enn regelen over, og nullstilte pilen når feltet hadde fokus med skrivefeltet aktivt, som rett etter et valg (Lars 30.09.2026). Et forhåndsutfylt nedtrekk har sin egen regel med ✦ under. */ .fields-underline select:not(.is-autofilled) + .ts-wrapper.single.input-active .ts-control { background-color: var(--felt-bg-fokus); background-image: var(--felt-pil-bilde); background-repeat: no-repeat; background-position: var(--felt-pil); background-size: 10px 6px; } .fields-underline .ts-wrapper.disabled .ts-control { opacity: 1; background-color: var(--kb-hover); background-image: none; color: var(--kb-ink-2); cursor: not-allowed; } /* Forhåndsutfylt (window.markAutofilled på