/* * Compaknee: popup'en. Samme stil som compaknee.com, som er maalt paa * kernel.ai: hvid flade, koksgraa tekst, graa broedtekst, lysegraa paneler * med 8 px hjoerner, een accent (navy), rav kun til det fundne nummer. * Skriften er Chakra Petch, lagt i pakken. * Ingen tankestreger nogen steder, heller ikke i kommentarer. */ @font-face { font-family: 'Chakra Petch'; font-weight: 400; src: url('chakra-petch-400.woff2') format('woff2'); } @font-face { font-family: 'Chakra Petch'; font-weight: 500; src: url('chakra-petch-500.woff2') format('woff2'); } @font-face { font-family: 'Chakra Petch'; font-weight: 600; src: url('chakra-petch-600.woff2') format('woff2'); } /* * Farverne i to saet, som paa compaknee.com. Lys tilstand er cremefarvet, * ikke hvid, og den er standard for alle. Moerk tilstand er et VALG, som * paa hjemmesiden: knappen i hovedet saetter data-tema paa . * * --flade popup'ens baggrund * --kort flader ovenpaa (sektioner, felter, chips) * --panel den daempede flade * --paa-accent tekst ovenpaa accentfarven */ :root { color-scheme: light; --flade: #F4EEDD; --kort: #FFFCF5; --panel: #EFE7D2; --panel-2: #E7DCC1; --linje: #E0D5B9; --ink: #2C2E33; --ink-2: #32343A; --graa: #6B7280; --graa-lys: #76705F; --accent: #17395B; --accent-hover: #244B73; --accent-svag: #E4E9F0; --paa-accent: #FFFFFF; --rav: #D9941B; --rav-svag: #F6E3BE; --advarsel: #B4564A; --r: 8px; --r-lille: 6px; } :root[data-tema="moerk"] { color-scheme: dark; --flade: #0F2A44; --kort: #173A5C; --panel: #143552; --panel-2: #1B4569; --linje: rgba(244, 238, 221, .16); --ink: #F4EEDD; --ink-2: #DCE6F0; --graa: #BFCBD9; --graa-lys: #8FA2B6; --accent: #9CC2E8; --accent-hover: #C3DBF4; --accent-svag: rgba(156, 194, 232, .14); --paa-accent: #0F2A44; --rav: #F2B84B; --rav-svag: rgba(242, 184, 75, .2); --advarsel: #E0897C; } *, *::before, *::after { box-sizing: border-box; } html { width: 400px; } body { margin: 0; width: 400px; min-height: 200px; font-family: 'Chakra Petch', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--graa); background: var(--flade); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 500; } p { margin: 0; } a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent); } button { font: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .eti { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--accent); } .note { font-size: 12.5px; color: var(--graa); } .knap { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: var(--r-lille); background: var(--accent); color: var(--paa-accent); font-size: 13.5px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; } .knap:hover { background: var(--accent-hover); color: var(--paa-accent); } .knap:disabled { opacity: .6; cursor: default; } .tekstknap { background: none; border: 0; padding: 4px 6px; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 4px; } .tekstknap:hover { color: var(--accent); background: var(--panel); } /* Top */ .top { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--linje); } .mark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); } .mark svg { width: 24px; height: 24px; } .mark .navn { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .mark .del { color: var(--accent); } .top-knapper { display: flex; gap: 6px; align-items: center; } .ikon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--linje); border-radius: var(--r-lille); background: var(--kort); color: var(--ink); cursor: pointer; } .ikon svg { width: 16px; height: 16px; } .ikon:hover { border-color: var(--ink); } .ikon .sol { display: none; } :root[data-tema="moerk"] .ikon .maane { display: none; } :root[data-tema="moerk"] .ikon .sol { display: block; } main { padding: 16px; } /* Start */ .start { display: grid; gap: 16px; } .fundet { display: grid; gap: 8px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--linje); border-radius: var(--r-lille); background: var(--kort); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; font-family: ui-monospace, Menlo, Consolas, monospace; } .chip:hover { border-color: var(--ink); } .chip .prik { width: 7px; height: 7px; border-radius: 50%; background: var(--rav); } .tomt { display: grid; gap: 6px; padding: 14px 16px; background: var(--panel); border-radius: var(--r); } .tomt h2 { font-size: 15px; } .skriv { display: flex; gap: 8px; } .skriv input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--linje); border-radius: var(--r-lille); font: inherit; font-size: 14px; color: var(--ink); background: var(--kort); font-family: ui-monospace, Menlo, Consolas, monospace; } .skriv input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .fejl-linje { font-size: 12.5px; color: var(--advarsel); } /* Henter */ .henter { display: grid; gap: 6px; padding: 28px 8px; text-align: center; justify-items: center; } .henter h2 { font-size: 16px; } .prik-raekke { display: flex; gap: 6px; margin-bottom: 10px; } .prik-raekke span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .3; animation: blink 1.2s infinite; } .prik-raekke span:nth-child(2) { animation-delay: .2s; } .prik-raekke span:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } } /* Fejl */ .fejlboks { display: grid; gap: 10px; padding: 16px; background: var(--panel); border-radius: var(--r); } .fejlboks h2 { font-size: 15px; } .fejlboks .knapper { margin-top: 4px; } /* Resultat */ .resultat { display: grid; gap: 14px; } .hoved { display: grid; gap: 6px; } .hoved h1 { font-size: 20px; line-height: 1.2; text-wrap: balance; } .linje { font-size: 13px; color: var(--ink-2); } .linje .nr { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--rav-svag); padding: 1px 5px; border-radius: 4px; color: var(--ink); } .piller { display: flex; flex-wrap: wrap; gap: 6px; } .pille { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--graa); border: 1px solid var(--linje); border-radius: 999px; padding: 2px 8px; } .pille .prik { width: 6px; height: 6px; border-radius: 50%; background: var(--rav); } .sektioner { display: grid; gap: 8px; } .sektion { border: 1px solid var(--linje); border-radius: var(--r); background: var(--kort); } .sektion summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; } .sektion summary::-webkit-details-marker { display: none; } .sektion .titel { font-size: 14px; font-weight: 500; color: var(--ink); flex: none; } .sektion .resume { flex: 1; min-width: 0; font-size: 12.5px; color: var(--graa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .sektion .resume.mangler { color: var(--graa-lys); } .sektion .pil { width: 16px; height: 16px; color: var(--graa-lys); flex: none; transition: transform .2s; } .sektion[open] .pil { transform: rotate(180deg); } .sektion .krop { padding: 2px 14px 12px; display: grid; gap: 10px; border-top: 1px solid var(--linje); padding-top: 12px; } .sektion .kilde { padding: 0 14px 12px; font-size: 11.5px; color: var(--graa-lys); } .sektion .kilde a { color: var(--graa); } .raekke { display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: baseline; font-size: 13px; } .raekke .k { color: var(--graa); font-size: 12px; } .raekke .v { color: var(--ink); font-weight: 500; } .raekke .v small { display: block; font-weight: 400; color: var(--graa); font-size: 12px; } .raekke .v.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 400; } .liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .liste li { font-size: 13px; color: var(--ink); } .liste li small { color: var(--graa); font-size: 12px; } .boks { background: var(--panel); border-radius: var(--r-lille); padding: 10px 12px; font-size: 12.5px; color: var(--graa); } .boks b { color: var(--ink); font-weight: 500; display: block; margin-bottom: 2px; } .udsagn { font-size: 14px; font-weight: 500; color: var(--ink); } /* Oversigten: det vigtigste foerst, i et graat panel */ .oversigt { background: var(--panel); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; } .oversigt .tal-gitter { gap: 6px; } .oversigt .tal { background: var(--kort); border: 1px solid var(--linje); } .oversigt .tal .v { font-size: 13.5px; } .oversigt .tal .v small { display: block; font-weight: 400; color: var(--graa); font-size: 11px; } .oversigt .eti { margin-top: 2px; } .noegletal { display: flex; flex-wrap: wrap; gap: 6px; } .noegletal .chip { padding: 6px 10px; font-family: inherit; font-size: 12.5px; gap: 6px; cursor: help; } .noegletal .chip b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .noegletal .chip span { color: var(--graa); font-weight: 400; } /* Grafer: rene SVG'er tegnet i popup.js. Ingen biblioteker. */ .grafer { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .graf { background: var(--kort); border: 1px solid var(--linje); border-radius: var(--r-lille); padding: 8px 10px 6px; display: grid; gap: 4px; } .graf .k { font-size: 11px; color: var(--graa); } .graf svg { width: 100%; height: 72px; display: block; overflow: visible; } .graf .soejle { fill: var(--accent); } .graf .soejle.neg { fill: var(--advarsel); } .graf .nul { stroke: var(--linje); stroke-width: 1; } .graf text { font-size: 9px; fill: var(--graa-lys); font-family: inherit; } .graf text.vaerdi { fill: var(--graa); } @media (max-width: 380px) { .grafer { grid-template-columns: 1fr; } } /* Noegletal: etiket over vaerdi, to kolonner */ .tal-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tal { padding: 8px 10px; background: var(--panel); border-radius: var(--r-lille); display: grid; gap: 1px; } .tal .k { font-size: 11px; color: var(--graa); } .tal .v { font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .tal .v.neg { color: var(--advarsel); } table.aar { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.aar th { text-align: left; font-weight: 500; color: var(--graa); font-size: 11px; padding: 4px 6px 6px 0; border-bottom: 1px solid var(--linje); } table.aar td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--linje); color: var(--ink); font-variant-numeric: tabular-nums; vertical-align: top; } table.aar tr:last-child td { border-bottom: 0; } table.aar th.num, table.aar td.num { text-align: right; padding: 6px 0 6px 6px; } table.aar td.num small { display: block; font-size: 11px; color: var(--graa); } table.aar td.neg { color: var(--advarsel); } table.aar td.tom { color: var(--graa-lys); } table.aar a { font-size: 12px; } .links-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .links-liste li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--linje); } .links-liste li:last-child { border-bottom: 0; } .links-liste a { font-size: 13px; font-weight: 500; text-decoration: none; } .links-liste small { display: block; font-size: 12px; color: var(--graa); } .links-liste .tast { font-size: 11.5px; color: var(--graa-lys); white-space: nowrap; } .licens { font-size: 11.5px; color: var(--graa-lys); } /* Historik */ .historik { display: grid; gap: 10px; } .hist-hoved { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hist-hoved h2 { font-size: 15px; } .hist-liste { display: grid; gap: 6px; } .hist-post { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--linje); border-radius: var(--r-lille); background: var(--kort); cursor: pointer; text-align: left; color: var(--ink); } .hist-post:hover { border-color: var(--ink); } .hist-post .n { font-size: 13.5px; font-weight: 500; } .hist-post .n small { display: block; font-weight: 400; color: var(--graa); font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; } .hist-post .d { font-size: 11.5px; color: var(--graa-lys); white-space: nowrap; } /* Bund */ .bund { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid var(--linje); font-size: 11.5px; color: var(--graa-lys); } .bund-links { display: flex; gap: 10px; } .bund a { color: var(--graa); text-decoration: none; } .bund a:hover { color: var(--accent); } /* =============================================================== LOGOET FOELGER FLADEN. Navy firkant paa den lyse creme, cremefarvet firkant paa den moerke navy. Begge staar i HTML; CSS viser det ene. =============================================================== */ .mark .moerkt { display: none; } :root[data-tema="moerk"] .mark .lyst { display: none; } :root[data-tema="moerk"] .mark .moerkt { display: block; }