/* ===================================================================== SMOOTH · små endringer på nordvo.no (forsøk D, ikke publisert) --------------------------------------------------------------------- Utseende, oppsett, skrifter, farger og innhold er som på siden som ligger ute. Dette arket gjør bare det man merker når man klikker seg rundt: knapper, menyer, vinduer og lenker føles jevne. Ligger sist i hver side. Slik tar du det bort igjen: - hele laget: fjern fra sidene (eller slett fila) - én del: slett delen under (hver har eget nummer og navn) 1 Knapper (alle sider) 4 Overganger mellom sider 2 Vinduer: søk og chat 5 Berøring på telefon 3 Lenker 6 Én rettelse: «Om oss» brekker ikke Regler fra: emil-design-eng (trykk, ingen «transition: all», ease-out), transitions-dev (varighet og kurve), mobile-native (berøring). ===================================================================== */ :root { /* Én kilde for kurver og tider i dette laget (transitions.dev) */ --s-kurve: cubic-bezier(0.22, 1, 0.36, 1); /* rolig ease-out */ --s-rask: 160ms; /* trykk */ --s-vanlig: 250ms; /* farger, åpning av vinduer */ } /* ---------- 1 Knapper ---------- Samme utseende som før. Det som er nytt: - fargeskiftet ved pek er jevnt og litt roligere (250 ms) - knappen trykkes litt inn når man klikker (som en fysisk knapp) - alle de små knappene (søk, meny, chat, valg) trykkes inn på samme måte - hover-effekter slås av på telefon, så de ikke blir hengende etter et trykk */ .knapp { transition: background-color var(--s-vanlig) var(--s-kurve), border-color var(--s-vanlig) var(--s-kurve), color var(--s-vanlig) var(--s-kurve), box-shadow var(--s-vanlig) var(--s-kurve), transform var(--s-rask) var(--s-kurve); } .knapp:active { transform: scale(0.97); } .sok-knapp, .meny-knapp, .sok-lukk, .chat-send, .chat-lukk, .sosiale a, .valg label { transition: background-color var(--s-vanlig) var(--s-kurve), border-color var(--s-vanlig) var(--s-kurve), color var(--s-vanlig) var(--s-kurve), transform var(--s-rask) var(--s-kurve); } .sok-knapp:active, .meny-knapp:active, .sok-lukk:active, .chat-send:active, .chat-lukk:active, .sosiale a:active { transform: scale(0.96); } .valg label:active { transform: scale(0.98); } .status-piller a:active { transform: scale(0.97); } .chat-forslag button, .sok-forslag button { transition: background-color var(--s-vanlig) var(--s-kurve), border-color var(--s-vanlig) var(--s-kurve), transform var(--s-rask) var(--s-kurve); } .chat-forslag button:active, .sok-forslag button:active { transform: scale(0.97); } /* Chatknappen: samme løft som før med mus, trykkes inn ved klikk, og løftet blir ikke hengende på telefon */ .chat-knapp { transition: transform var(--s-rask) var(--s-kurve), box-shadow var(--s-vanlig) var(--s-kurve); } .chat-knapp:hover { transform: none; } @media (hover: hover) and (pointer: fine) { .chat-knapp:hover:not(:active) { transform: translateY(-2px); } } .chat-knapp:active { transform: scale(0.95); } /* ---------- 2 Vinduer: søk og chat ---------- Søkevinduet kom før uten bevegelse; nå tones det inn på 220 ms sammen med bakgrunnen. Chatvinduet åpnes på 250 ms (var 450). Nye meldinger i chatten glir opp en tanke. */ .sok-dialog[open] { animation: s-dialog 220ms var(--s-kurve); } .sok-dialog[open]::backdrop { animation: s-bakgrunn 220ms ease-out; } @keyframes s-dialog { from { opacity: 0; transform: translateY(8px) scale(0.98); } } @keyframes s-bakgrunn { from { opacity: 0; } } .chat-panel { animation-duration: var(--s-vanlig); animation-timing-function: var(--s-kurve); transform-origin: bottom right; } .chat-melding { animation: s-melding 260ms var(--s-kurve); } @keyframes s-melding { from { opacity: 0; transform: translateY(6px); } } /* ---------- 3 Lenker ---------- Understreken i tekstlenker glir litt lenger ned ved pek (bare med mus). */ .tekstlenke { transition: text-decoration-color var(--s-vanlig) var(--s-kurve), text-underline-offset var(--s-vanlig) var(--s-kurve), color var(--s-vanlig) var(--s-kurve); } @media (hover: hover) and (pointer: fine) { .tekstlenke:hover { text-underline-offset: 0.34em; } } .hovedmeny a, .meny-utvid, .bunn a, .brodsmuler a { transition: color var(--s-vanlig) var(--s-kurve); } /* ---------- 4 Overganger mellom sider ---------- En rolig toning når man går fra side til side (Chrome, Edge og nyere Safari). Nettlesere som ikke kan det, bytter side som før. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--s-kurve); } /* ---------- 5 Berøring på telefon ---------- */ html { -webkit-tap-highlight-color: transparent; } a, button, summary, label, [role="button"] { touch-action: manipulation; } .knapp, .sok-knapp, .meny-knapp, .meny-utvid, .chat-knapp, .chat-send, .chat-lukk, .sok-lukk, .chat-forslag button, .sok-forslag button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .mobilmeny { max-height: calc(100dvh - var(--topp-hoyde)); overscroll-behavior: contain; } /* ---------- 6 Én rettelse: «Om oss» brekker ikke over to linjer ---------- På vinduer mellom 961 og 990 px brøt «Om oss» i toppmenyen (feilen er også på siden som ligger ute). */ .hovedmeny a, .meny-utvid { white-space: nowrap; } /* ---------- Redusert bevegelse: alt står stille ---------- */ @media (prefers-reduced-motion: reduce) { .knapp:active, .sok-knapp:active, .meny-knapp:active, .sok-lukk:active, .chat-send:active, .chat-lukk:active, .chat-knapp:active, .valg label:active, .status-piller a:active, .sosiale a:active, .chat-forslag button:active, .sok-forslag button:active { transform: none; } .sok-dialog[open], .sok-dialog[open]::backdrop, .chat-panel, .chat-melding { animation: none; } @view-transition { navigation: none; } }