/* Työkalupakin yhteinen ulkoasu. * * Peleillä on kullakin oma teemansa, koska peli saa yllättää. Työkalu ei: * kaikki neljä sivua näyttävät samalta, jotta napin paikkaa ei tarvitse * etsiä käsi puussa tai märissä hanskoissa. * * Vaalea päiväteema, koska näitä katsotaan verstaassa ja metsässä. * Tumma teema seuraa laitteen asetusta — pimeällä lenkillä valkoinen ruutu * sokaisee. */ :root { --pohja: #f2eee6; --pohja2: #e7e1d5; --kortti: #fffdf9; --teksti: #22201c; --himmea: #6d675d; --raja: #d9d2c4; --korostus: #b1541c; --korostus-pehmea: #f6e4d6; --vihrea: #2f6b4a; --varoitus: #a3341f; --varjo: 0 1px 2px rgba(40, 32, 20, .06), 0 6px 18px rgba(40, 32, 20, .05); } @media (prefers-color-scheme: dark) { :root { --pohja: #16150f; --pohja2: #1e1c15; --kortti: #24211a; --teksti: #ece6da; --himmea: #9c9488; --raja: #3a352b; --korostus: #e08a4e; --korostus-pehmea: #38291d; --vihrea: #6fbb8f; --varoitus: #e58b74; --varjo: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); } } /* ---------- tekstikoko ---------- * Yksi kerroin, jota `pakki.js` asettaa attribuutilla . * Koko kokoelma jakaa tämän tiedoston, joten säätö vaikuttaa kaikkiin * työkaluihin kerralla. Kerroin koskee TEKSTIÄ ja kosketusalueita, ei * asettelua — leveydet ja välit pysyvät, jotta mikään ei valu ruudun yli. * Savutestin nappitesti ajetaan myös suurimmalla koolla. * * HUOM NIMI: tämä on `--tekstikoko`, EI `--teksti`. `--teksti` on jo tekstin * VÄRI, ja jos kerroin nimettäisiin samoin, `:root { --teksti: 1 }` korvaisi * värin luvulla 1 ja koko kokoelman teksti menisi mustaksi oletusväriksi. * Kirjoitin sen ensin näin ja huomasin vasta tiedostoa lukiessa. */ :root { --tekstikoko: 1; } :root[data-teksti="iso"] { --tekstikoko: 1.18; } :root[data-teksti="isoin"] { --tekstikoko: 1.38; } * { box-sizing: border-box; } /* Tausta myös html-elementille: iOS:n kotivalikkosovelluksessa bodyn alle * jäävä kangas piirtyisi muuten valkoisena. Väri on gradientin VIIMEINEN * pysäkki, ei theme-color. */ html, body { height: 100%; margin: 0; background: var(--pohja2); color: var(--teksti); } body { background: linear-gradient(178deg, var(--pohja) 0%, var(--pohja2) 100%); font: calc(16px * var(--tekstikoko))/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow: hidden; -webkit-text-size-adjust: 100%; } /* Turva-alue on jo bodyn täytteenä. Jos tässä olisi 100dvh, iPhonessa * vaadittaisiin koko näkymä täytteen SISÄLLÄ ja alin nappi jäisi ruudun alle. */ .app { height: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; min-height: 0; } /* ---------- ylapalkki ---------- */ .ylapalkki { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--raja); } .ylapalkki h1 { font-size: calc(clamp(15px, 4.4vw, 19px) * var(--tekstikoko)); margin: 0; letter-spacing: -.2px; font-weight: 700; } .ylapalkki .alaotsikko { display: block; font-size: calc(11.5px * var(--tekstikoko)); font-weight: 500; color: var(--himmea); letter-spacing: .3px; } .ylapalkki .tila { margin-left: auto; display: flex; gap: 8px; align-items: center; } a.tk-back { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: calc(22px * var(--tekstikoko)); line-height: 1; color: inherit; /* toimii sekä vaaleassa että tummassa */ background: var(--kortti); border: 1px solid var(--raja); box-shadow: var(--varjo); } a.tk-back:active { transform: scale(.94); } /* ---------- vierivä sisältö ---------- */ /* min-height:0 on pakollinen: flex-lapsen oletus on min-height:auto, jolloin * säiliö ei kutistu sisältöään pienemmäksi ja työntää alapalkin ruudun alle. */ .sisalto { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 20px; } .kortti { background: var(--kortti); border: 1px solid var(--raja); border-radius: 14px; padding: 14px; margin: 0 0 12px; box-shadow: var(--varjo); } .kortti > h2 { margin: 0 0 10px; font-size: calc(13px * var(--tekstikoko)); text-transform: uppercase; letter-spacing: 1.2px; color: var(--himmea); font-weight: 800; } /* ---------- lomake ---------- */ label { display: block; font-size: calc(12.5px * var(--tekstikoko)); color: var(--himmea); font-weight: 600; margin: 0 0 4px; } input[type=text], input[type=number], input[type=date], input[type=time], select, textarea { width: 100%; font: inherit; font-size: calc(16px * var(--tekstikoko)); /* alle 16px saa iOS:n zoomaamaan kenttään */ padding: 9px 11px; border: 1px solid var(--raja); border-radius: 10px; background: var(--pohja); color: var(--teksti); -webkit-appearance: none; appearance: none; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--korostus); outline-offset: -1px; } .rivi { display: flex; gap: 8px; align-items: flex-end; margin: 0 0 10px; } .rivi > * { flex: 1; min-width: 0; } .rivi > .kapea { flex: 0 0 84px; } button, .nappi { font: inherit; font-weight: 700; /* Korkeus lukee myös ruudun korkeutta: pelkkä pikseliarvo työnsi napit * ruudun alle 580 px korkeassa selainikkunassa. */ min-height: calc(min(44px, 7vh) * var(--tekstikoko)); padding: 0 16px; border-radius: 10px; border: 1px solid var(--raja); background: var(--kortti); color: var(--teksti); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } button:active, .nappi:active { transform: scale(.97); } button.paa { background: var(--korostus); border-color: transparent; color: #fff; } button.pieni { min-height: calc(min(34px, 5.5vh) * var(--tekstikoko)); padding: 0 11px; font-size: calc(13px * var(--tekstikoko)); } button:disabled { opacity: .45; cursor: default; } /* ---------- yleiset ---------- */ .iso { font-size: calc(clamp(30px, 11vw, 52px) * var(--tekstikoko)); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; } .himmea { color: var(--himmea); } .pieniteksti { font-size: calc(12.5px * var(--tekstikoko)); color: var(--himmea); } .virhe { color: var(--varoitus); font-weight: 600; } table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--raja); font-size: calc(14px * var(--tekstikoko)); } th { font-size: calc(11px * var(--tekstikoko)); text-transform: uppercase; letter-spacing: .8px; color: var(--himmea); } td.luku, th.luku { text-align: right; font-variant-numeric: tabular-nums; } /* Leveä sisältö vierii omassa laatikossaan — sivu itse ei koskaan vaakavieri. */ .vieritin { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } /* .hide tulee CSS:ssä viimeisenä JA on !important: samalla spesifisyydellä * myöhempi display-sääntö voittaisi sen ja peittopaneeli jäisi näkyviin. */ .hide { display: none !important; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }