/* Bas-reset och iOS-nära defaultstil. Stoffe är primärmodell. Vi siktar på native känsla utan att bygga ett eget designsystem. CSS-variabler så feature-komponenter kan luta sig mot samma tokens. */ /* Modulära globala stilark (samma mapp som app.css så man inte blir vilsen). */ @import './markdown.css?v=1e5a23373e'; @import './detalj.css?v=1e5a23373e'; * { box-sizing: border-box; } /* A11y (WCAG 2.4.7): synlig fokusring, men BARA vid tangentbordsnavigering. :focus-visible är en webbläsar-heuristik som ibland matchar vid tap på element med tabindex (t.ex. puls-puffen) och ger en "slumpmässig" blå ring. Vi gör det deterministiskt: klassen .input-keyboard sätts på vid Tab/pilar och tas bort vid pekar-input (se lib/utils/focusModality.ts). Default är ingen ring; i tangentbordsläge ritas accent-ringen. !important vinner över komponenternas scoped `outline: none`. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: none; } html.input-keyboard :focus-visible { outline: 2px solid var(--color-accent) !important; outline-offset: 2px; border-radius: 4px; } /* A11y (A11Y-4): respektera prefers-reduced-motion. Neutraliserar CSS- animationer/transitions globalt (TabBar-slider, drawer/sheet-slide-in, backdrop-fade m.m.). Svelte JS-transitions (fly i drawer-subpages) hanteras separat i komponenterna via prefersReducedMotion-storen. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html, body { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } /* iOS Mobile Safari (verktygsfält i botten): body är min-height:100dvh = bara det DYNAMISKA fönstret ovanför verktygsfältet. Safari målar däremot ROT-elementets (html) bakgrund över HELA skärmen, inkl. safe-area-bandet bakom det nedre verktygsfältet / home-indicatorn. Utan bakgrund på html syns där webbläsarens vita default-canvas → ett ljust band "i safe area". Måla html med samma grupperade bakgrund så sidan går edge-to-edge ända ner (adapterar ljus/mörk via :root-varianten). */ html { background: var(--color-grouped-bg); } /* Lås all scroll OCH pointer-events bakom öppen Sheet (iOS-paritet med native modals). Sheet.svelte togglar body.sheet-open när open=true. - overflow: hidden + touch-action: none → ingen scroll/rubber-band- effekt på listan bakom, och touch-start på sheet/handle missförstås inte som scroll-gest. - pointer-events: none på .shell → iOS Safari kan inte ge "ghost- click" till element bakom efter att backdrop unmountat (300ms- delay i synthetic click efter touchend). Backdrop + sheet får explicit pointer-events: auto i Sheet.svelte. */ body.sheet-open { overflow: hidden; touch-action: none; } body.sheet-open main { overflow: hidden !important; touch-action: none; } body.sheet-open .shell { pointer-events: none; } /* Drawers (Drawer.svelte registrerar i overlay-räknaren → body.overlay-open): lås bakgrundens SCROLL så den inte "stjäl" scrollen från drawern. Vi rör INTE pointer-events här. Loggbok-drawern renderas INNE i shell och skulle bli oklickbar; drawerns egen backdrop fångar klick ändå. overflow:hidden behåller scrollTop (inget hopp när drawern öppnas/stängs). */ body.overlay-open .feed-scroll, body.overlay-open .list-scroll, body.overlay-open .master, body.overlay-open main { overflow: hidden !important; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.4; color: var(--color-text); background: var(--color-grouped-bg); /* dvh = dynamic viewport height. Räknar live med Safari/Chrome address- bar collapse/expand. vh-fallback för äldre browsers (iOS <15.4). */ min-height: 100vh; min-height: 100dvh; } :root { --color-text: #000000; --color-text-secondary: rgba(60, 60, 67, 0.6); --color-bg: #ffffff; --color-grouped-bg: #f2f2f7; --color-surface: #ffffff; --color-border: rgba(60, 60, 67, 0.18); --color-accent: #007aff; --color-destructive: #ff3b30; --color-success: #34c759; --color-warning: #ff9500; --safe-top: env(safe-area-inset-top, 0); --safe-bottom: env(safe-area-inset-bottom, 0); /* Råa horisontella insets (notch i iPhone-landscape). UI använder nästan alltid de "tunnade" varianterna nedan eftersom 12pt av safe-zonen redan absorberas av baseline-paddingen på chrome och listor. Vi vill respektera notchen utan att lägga dubbel buffer. */ --safe-left: env(safe-area-inset-left, 0); --safe-right: env(safe-area-inset-right, 0); --safe-left-eff: max(0px, calc(env(safe-area-inset-left, 0) - 12px)); --safe-right-eff: max(0px, calc(env(safe-area-inset-right, 0) - 12px)); /* Höjd på drawer-headerns titelyta (close/back + titel). EN källa (MNT-4). About- och UserDrawer delar den men har annars olika layout (flex vs grid), så bara höjden centraliseras. 56 ger luft mot kanten i iPhone-landscape-PWA där --safe-top ≈ 0. */ --drawer-header-h: 56px; } @media (prefers-color-scheme: dark) { :root { --color-text: #ffffff; --color-text-secondary: rgba(235, 235, 245, 0.6); --color-bg: #000000; --color-grouped-bg: #000000; --color-surface: #1c1c1e; --color-border: rgba(84, 84, 88, 0.65); } } button { font: inherit; color: inherit; background: transparent; border: none; padding: 0; cursor: pointer; } a { color: var(--color-accent); text-decoration: none; }