/* ============================================================================ odin-theme.css — D-420 (2026-06-19) ---------------------------------------------------------------------------- Tre sammenhængende UI-bredde features. Loades SIDST i base.html så den vinder på app.css/odin-tokens.css/odin-base.css ved kolliderende navne. B) Light/Dark theme — switches via ved at override de variabler som chrome'et (app.css legacy + odin-tokens system-B) allerede forbruger. Dark = default (uændret look når data-theme≠light). C) Sticky overmenu — .odin-topbar (position:sticky) i toppen af .main. D) Sprog-toggle — bor i topbaren; ren CSS her, logik i base.html/app.py. ============================================================================ */ /* ────────────────────────────────────────────────────────────────────────── C) STICKY TOPBAR Topbaren ligger som første barn i
. .main' padding er flyttet til .main-inner (se nedenfor) så baren kan bleede i fuld bredde og sticke flush til toppen. Eksisterende in-page sticky-headers (.page-header- sticky / .tab-nav-sticky) tucker UNDER baren via --sticky-top-justeringen. ────────────────────────────────────────────────────────────────────────── */ :root { --topbar-h: 52px; } /* Padding flyttes fra .main til .main-inner så topbaren kan bleede i fuld bredde og sticke flush til toppen. Scroll forbliver body-scroll (robust, standard) — topbaren bliver IKKE væk ved scroll via position:sticky. NB: ægte container-scroll-isolation (.main { overflow-y:auto }) er bevidst IKKE slået til her — overflow-y:auto tvinger overflow-x:auto og kan klippe in-page dropdowns / give vandret scrollbar. Udskudt til visuel review. */ .layout > .main { padding: 0; } .main-inner { padding: 32px 40px; max-width: 1280px; width: 100%; } .odin-topbar { position: sticky; top: 0; z-index: 150; /* over indhold; under flyout(1001)/modal(1000)/drawer(1200) */ display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-h); padding: 0 24px 0 40px; background: var(--bg-elev); border-bottom: 1px solid var(--border); /* opaque baggrund så indhold ikke skinner igennem ved scroll */ } /* View-as: fixed banner (44px) dækker top:0 → skub topbaren ned under den */ body.view-as-active .odin-topbar { top: 44px; } /* In-page sticky-headers skal tucke UNDER topbaren (+banner i view-as) */ body.has-topbar { --sticky-top: var(--topbar-h); } body.has-topbar.view-as-active { --sticky-top: calc(44px + var(--topbar-h)); } .topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .topbar-context { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-context .topbar-context-sub { color: var(--text-muted); font-weight: 500; margin-left: 8px; font-size: 12px; } /* — D-685 (Model C): permanent kunde-badge — Aktiv kunde skal kunne læses uden at man scanner sidebaren. Prikkens farve er inline og deterministisk pr. aftale_nr (kunde_scope.active_kunde), så samme kunde altid ser ens ud; resten arver tokens og virker derfor i både lyst og mørkt tema. */ .kunde-badge-wrap { display: inline-flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; } .kunde-badge { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; padding: 4px 10px 4px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.6; cursor: pointer; transition: background .15s, border-color .15s; } .kunde-badge:hover { background: var(--accent-soft); border-color: var(--accent); } /* Konsolideret visning: ren indikator (ingen kunde at skifte til) → ikke klikbar. */ .kunde-badge-static { cursor: default; } .kunde-badge-static:hover { background: var(--bg-soft); border-color: var(--border); } .kunde-badge-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .kunde-badge-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .kunde-badge-aftale { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 11px; padding-left: 6px; border-left: 1px solid var(--border); } /* D-929: ryd aktivt kunde-scope uden at åbne vælgeren */ .kunde-badge-clear { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; flex: 0 0 auto; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .kunde-badge-clear:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border); } .kunde-badge-clear:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* — Sprog-toggle (segmented DA/EN) — */ .topbar-lang { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-soft); } .topbar-lang button { border: 0; background: transparent; cursor: pointer; padding: 5px 9px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-dim); transition: background .15s, color .15s; } .topbar-lang button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); } .topbar-lang button:hover:not([aria-pressed="true"]) { color: var(--text); } /* — Theme-toggle (sun/moon ikon) — */ .topbar-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text-dim); cursor: pointer; transition: background .15s, color .15s; } .topbar-theme:hover { background: var(--accent-soft); color: var(--accent); } .topbar-theme svg { width: 17px; height: 17px; } /* vis kun det relevante ikon for aktivt tema */ .topbar-theme .icon-sun { display: none; } .topbar-theme .icon-moon { display: inline-flex; } html[data-theme="light"] .topbar-theme .icon-sun { display: inline-flex; } html[data-theme="light"] .topbar-theme .icon-moon { display: none; } /* — Bruger-chip — */ .topbar-user { display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar-user .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; } .topbar-user .topbar-email { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } @media (max-width: 900px) { .odin-topbar { padding: 0 14px 0 62px; } /* plads til fixed hamburger (top-left) */ .main-inner { padding: 20px; } .topbar-user .topbar-email { display: none; } .topbar-context .topbar-context-sub { display: none; } /* D-685: badge beholdes på mobil (den er hele pointen) — kun aftale-nummeret og navne-bredden skæres, så den ikke skubber topbarens højre side ud. */ .kunde-badge-aftale { display: none; } .kunde-badge-navn { max-width: 120px; } } @media (max-width: 560px) { .topbar-lang button { padding: 5px 7px; } } /* low-viewport / 400% zoom (WCAG reflow): drop sticky så baren ikke æder skærmen */ @media (max-height: 480px) { .odin-topbar { position: static; } } /* ────────────────────────────────────────────────────────────────────────── B) LIGHT THEME — varm cream/beige + rust-accents (Odins Skjold-stil) Override af BÅDE app.css legacy-navne (chrome + ~110 sider) OG odin-tokens system-B-navne (~17 nyere sider + komponenter). html[data-theme] vinder på :root via specificitet. Dark = default (ingen regler her → uændret). ────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"] { /* — app.css legacy-navne (chrome: sidebar/main/nav/btn/widget/login) — */ --bg: #F2EBDD; /* varm cream side-baggrund */ --bg-elev: #FBF6EC; /* lysere — sidebar, topbar, kort, widgets */ --bg-soft: #EAE0CD; /* bløde paneler, pills, inputs */ --border: #DBCEB4; /* varm tan kant */ --border-soft: #E6DBC6; --text: #2B2620; /* varm næsten-sort blæk */ --text-dim: #6A6052; --text-muted: #93876F; --accent: #A85A1A; /* rust */ --accent-soft: rgba(168, 90, 26, 0.13); --danger: #B23A2E; --ok: #2E8B6F; --shadow: 0 10px 30px rgba(90, 65, 25, 0.14); /* — odin-tokens.css system-B-navne — */ --bg-base: #F2EBDD; --surface-1: #FBF6EC; --surface-2: #F1E7D5; --surface-3: #EAE0CD; --surface-hover: #E2D6BF; --border-strong: #C9B999; --border-focus: rgba(168, 90, 26, 0.5); --text-primary: #2B2620; --text-secondary: #6A6052; --text-muted: #93876F; --text-on-accent: #FFFFFF; --accent-hover: #C06A22; --accent-text: #8A4A14; /* mørkere rust til AA-tekst på cream */ --accent-glow: rgba(168, 90, 26, 0.35); --pos: #1F7A5C; --pos-soft: rgba(31,122,92,0.14); --neg: #B23A2E; --neg-soft: rgba(178,58,46,0.14); --warn: #B07700; --warn-soft: rgba(176,119,0,0.15); --info: #2E6FB0; --info-soft: rgba(46,111,176,0.14); --focus-ring: #C06A22; --focus-ring-halo: rgba(120, 70, 20, 0.35); --shadow-sm: 0 1px 2px rgba(90,65,25,0.12); --shadow-md: 0 4px 12px rgba(90,65,25,0.14); --shadow-lg: 0 12px 32px rgba(90,65,25,0.18); color-scheme: light; } /* Sidebar-scrollbar bliver mørk-på-cream i light-mode (default-reglen er hvid-på-mørk) */ html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: rgba(43, 38, 32, 0.14); } html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(43, 38, 32, 0.28); } html[data-theme="light"] .sidebar { scrollbar-color: rgba(43,38,32,0.2) transparent; } /* Brand-mark gradient (bruger ikke var) — gør rust i light */ html[data-theme="light"] .brand-mark { background: linear-gradient(135deg, var(--accent), #7a3e10); }