/* css/perusta.css — muotoilun perusarvot, nollaus ja yhteiset osaset. Kolme pintaa, ja ne ovat koko ilme: kehys ja palsta syvä petroli työtila kerma chat kerma Petroli on kehys, kerma on se mitä luetaan. Kerma eikä valkoinen: valkoinen paneeli syvän petrolin vieressä on paperi, kerma on pinta — ja tätä ruutua katsotaan koko työpäivän. Muste kääntyy pinnan mukana: kehyksellä valkoinen, paneeleilla lähes musta ruskea. Toiminto on lämmin oranssi, ja se on ainoa lämmin väri kehyksessä — juuri siksi se on se johon katse menee. Kaksi sääntöä: - **Väri kantaa merkitystä.** Neutraali sisältö, kuusi tilaväriä, ei koristetta. - **Erotus tehdään tyhjällä tilalla, ei viivalla.** Viiva vedetään vain kun tyhjä tila ei riitä. */ :root{ /* ---- kehys ja palsta ---- Syvä petroli, ja muste sen päällä valkoinen. Vaalea taivas kokeiltiin ensin, ja se kaatui yhteen asiaan: vaalealla kehyksellä kaikki sen päällä oli myös vaaleaa, eikä mikään erottunut. Syvällä pinnalla jokainen paneeli, kortti ja valittu välilehti nousee esiin itsestään — ja lohkojen värit ovat kylläisiä vasta tätä vasten. Petroli eikä musta: musta kehys kerman ympärillä on toimisto, petroli on väri. */ --frame:#12596B; --frame-2:#0C4152; --frame-3:#17697E; --kehys:linear-gradient(168deg, var(--frame-3) 0%, var(--frame) 46%, var(--frame-2) 100%); --frame-ink:#F2FAFC; --frame-ink-2:rgba(233,248,252,.72); --frame-line:rgba(255,255,255,.16); --ruudukko:rgba(255,255,255,.05); /* ---- paneelit ---- Kerma eikä valkoinen. Ero on pieni mutta se on koko päivän mittainen: valkoinen paneeli kirkkaan sinisen vieressä hohtaa, kerma ei. */ --surface:#FBF6EA; --surface-2:#F4EDDE; --surface-3:#EDE4D2; --line:#E7DDCA; --line-2:#D6C8AE; --ink:#2A2419; --ink-2:#544B3C; --ink-3:#6E6556; /* Toiminto on lämmin oranssi — ainoa lämmin väri kehyksessä, ja siksi se erottuu sinisestä ilman että sitä tarvitsee korostaa muuten. */ --signaali:#C4661A; /* Ensisijainen painike on vihreä eikä oranssi. Oranssi on tunnusväri, ja tunnusvärinen painike kertoo *tämä on meidän ohjelmamme* eikä sitä mitä painike tekee — kermalla se luettiin punaruskeana, eli varoituksena. Vihreä sanoo saman kuin teko: tästä eteenpäin. */ --nappi:#3F7A22; --nappi-ink:#FFFFFF; --nappi-hover:#33641B; --accent:#A85510; --punainen:#C24A38; --punainen-pehmea:#FBE3DE; --keltainen:#B06F0A; --keltainen-pehmea:#FBF0D8; --vihrea:#55832A; --vihrea-pehmea:#EAF3DC; --sininen:#2E7F96; --sininen-pehmea:#DFEDF2; /* Tilavärit ovat luonnon värejä: savi, olki, ruoho, vesi, puu ja kivi. Ne ovat kylläisiä tarpeeksi erottuakseen toisistaan mutta eivät kirkkaita — kirkas tilaväri kermalla huutaa, ja kuusi huutavaa väriä yhdellä ruudulla ei kerro mikä on kiireellisin. myohassa savenpunainen — kiireellisin tanaan olki tulossa ruoho odottaa vesi — odottaa jotakuta koeajo syreeni — sovittu asiakkaan kanssa muistiinpano puu — ei tehtävä lainkaan valmis kivi Yksi arvo per tila, ja se on **kirkas versio väristä**. Kaikki paikat joissa tilaväri näkyy — lohkon kaista ja otsikko, piste, kortin vasen reuna — ovat syvällä petrolilla, ja kermalle tehty tumma savenpunainen katoaa siihen. Aiemmin arvoja oli neljä: kylläinen, tumma, lohkon pinta ja kortin pinta. Ne olivat kermanvärisen työtilan ajalta, jolloin lohko oli väripinta ja kortti sen vaaleampi versio. Kun koko työtila muuttui petroliksi, kolme neljästä jäi käyttämättä: pinnat ovat nyt läpikuultavaa valkoista, ja tila kerrotaan värillä eikä taustalla. */ --r-myohassa:#F58B72; --r-tanaan:#EFB84F; --r-tulossa:#A6D46A; --r-odottaa:#66C6E0; --r-koeajo:#C79BE6; --r-muistio:#C9BFA8; --r-valmis:#ADB5A5; /* Näkymien omat värit palstassa. Nämä ovat syvän petrolin päällä, joten ne ovat kirkkaita: tumma piste tummalla pohjalla ei ole piste. */ --v-paiva:#E8862E; --v-omat:#E4614B; --v-taulu:#3FAFD0; --v-tiedotus:#B693E0; --v-chat:#7FBE43; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Pyöristys on hillitty. Aiemmin se oli 9/12/16 px: kolme sädettä joita ei erottanut toisistaan, ja niin pyöreä nurkka että se pehmensi juuri sen reunan jonka tehtävä on erottaa kaksi pintaa. Nyt pyöristyksen huomaa mutta se ei ole muoto. */ --r1:5px; --r2:7px; --r3:10px; /* Lohkon korkeuskatto: sen jälkeen lohko vierittyy itse. Mitta on noin viisi korttia. */ --lohkon-korkeus:420px; /* Chatin keskustelurivin katto: kolme riviä, sen jälkeen luettelo vierittyy pystysuuntaan. */ --kanavarivit:96px; /* Varjot. Varjo on lämmin eikä musta: musta varjo kerman päällä on likaa, lämmin on valoa. Korttien oma varjo poistui kun kortit muuttuivat läpikuultaviksi — syvällä pinnalla korkeus tehdään kirkkaudella eikä varjolla. */ --varjo-nappi:0 1px 2px rgba(74,54,26,.16); --varjo-nappi-yla:0 3px 8px rgba(74,54,26,.20); --paneeli:0 1px 2px rgba(40,52,60,.08), 0 18px 44px rgba(40,52,60,.16); --hehku:0 0 0 3px rgba(196,102,26,.26); } *{box-sizing:border-box} html,body{margin:0} body{background:var(--frame);color:var(--ink);font-family:var(--sans);font-size:14px; line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums} h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.014em} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .piiloon{display:none !important} /* Fokus on hehku jolla on terävä ydin: sumea kehä yksin ei kerro mikä kenttä on valittu. */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* ---------- painikkeet ---------- Painike on esine: sillä on pinta, reuna ja varjo, ja painettaessa se painuu. Ennen se oli litteä suorakaide — se toimi mutta ei näyttänyt siltä että siihen voisi koskea. Ylävalo (`inset 0 1px 0`) on se yksi yksityiskohta joka tekee pinnasta pinnan: valo tulee ylhäältä, joten painikkeen yläreuna on kirkkaampi kuin alareuna. */ .nappi{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:36px;padding:0 16px;border:1px solid transparent;border-radius:var(--r1); background:var(--nappi);color:var(--nappi-ink);font-size:13px;font-weight:600; letter-spacing:-.004em;line-height:1;cursor:pointer; box-shadow:var(--varjo-nappi), inset 0 1px 0 rgba(255,255,255,.20); transition:background .12s,border-color .12s,box-shadow .12s,transform .09s} .nappi:hover{background:var(--nappi-hover); box-shadow:var(--varjo-nappi-yla), inset 0 1px 0 rgba(255,255,255,.22)} .nappi:active{transform:translateY(1px); box-shadow:0 1px 1px rgba(74,54,26,.18), inset 0 1px 2px rgba(0,0,0,.14)} .nappi:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none} /* Toissijainen on vaalea pinta ja ääriviiva: kaksi täytettyä painiketta vierekkäin ovat kaksi ensisijaista, eikä kumpikaan ole silloin ensimmäinen. Pinta on `--surface` eikä läpinäkyvä, jotta painike erottuu myös värillisen kortin päällä. */ .nappi.kevyt{background:var(--surface);border-color:var(--line-2);color:var(--ink); box-shadow:0 1px 1px rgba(74,54,26,.05)} .nappi.kevyt:hover{background:var(--surface);border-color:var(--ink-3); box-shadow:0 2px 6px rgba(74,54,26,.10)} .nappi.kevyt:active{box-shadow:inset 0 1px 2px rgba(74,54,26,.12)} /* `.pieni` on **koko, ei ulkoasu**. Aiemmin se nollasi taustan ja reunan, jolloin `.kevyt.pieni` — eli jokainen rivin toiminto, *Merkitse valmiiksi*, *Osoita toiselle*, *Palauta yhteisiin* — oli pelkkää tekstiä. Painike jota ei erota tekstistä on painike jota ei löydetä. */ .nappi.pieni{min-height:30px;padding:0 12px;font-size:12px;font-weight:600; border-radius:5px} /* ---------- painikkeen sävy ---------- **Väri kertoo onko teko myönteinen vai kielteinen.** Se on ensimmäinen kysymys johon painikkeen väriltä haetaan vastausta, ja se on siksi se johon väri vastaa: vihreä vie eteenpäin Lisää · Tallenna · Lähetä · Otan tämän · Kuittaa vastaan · Merkitse valmiiksi punainen peruu tai poistaa Peruuta · Poista · Poista käytöstä sininen siirtää toiselle Osoita · Siirrä yhteisiin · Tee ylläpitäjäksi keltainen palauttaa jonoon Palauta yhteisiin · Vapauta · Palauta kesken Ensin sävy kertoi *mitä teko tekee* ja ensisijainen painike oli oranssi eli tunnusvärinen. Se oli väärä malli kahdesti: tunnusvärinen painike kertoo kenen ohjelma tämä on eikä sitä mitä painike tekee, ja kermalla oranssi luettiin punaruskeana — eli varoituksena. Väritön painike on väritön tarkoituksella: *Muokkaa*, *Kiinnitä* ja *Näytä arkisto* eivät vie eteenpäin eivätkä peru mitään. Jos jokainen painike on värillinen, väri lakkaa olemasta tieto. Muoto on sama kaikilla — vain reuna, teksti ja pinta värittyvät. Osoittimen alla pinta täyttyy, jolloin painike vastaa ennen kuin siihen on koskettu. */ .nappi.savy-vihrea{color:var(--vihrea);border-color:var(--vihrea); background:var(--vihrea-pehmea)} .nappi.savy-vihrea:hover{background:var(--vihrea);color:#FFFFFF;border-color:var(--vihrea)} .nappi.savy-sininen{color:var(--sininen);border-color:var(--sininen); background:var(--sininen-pehmea)} .nappi.savy-sininen:hover{background:var(--sininen);color:#FFFFFF;border-color:var(--sininen)} .nappi.savy-keltainen{color:var(--keltainen);border-color:var(--keltainen); background:var(--keltainen-pehmea)} .nappi.savy-keltainen:hover{background:var(--keltainen);color:#FFFFFF; border-color:var(--keltainen)} .nappi.savy-punainen,.nappi.vaarallinen{color:var(--punainen);border-color:var(--punainen); background:var(--punainen-pehmea)} .nappi.savy-punainen:hover,.nappi.vaarallinen:hover{background:var(--punainen);color:#FFFFFF; border-color:var(--punainen)} /* Täytetty värillinen: rivin ensisijainen teko, yksi rivillä kerrallaan. */ .nappi.taytetty.savy-vihrea{background:var(--vihrea);color:#FFFFFF} .nappi.taytetty.savy-vihrea:hover{filter:brightness(1.10)} /* ---------- kentät ---------- */ /* Kenttä on syvennys: sisävarjo yläreunassa kertoo että siihen kirjoitetaan. Painike on koholla, kenttä on painunut — sama valo molemmissa, eri suuntaan. */ .kentta{width:100%;min-height:38px;padding:9px 12px;border:1px solid var(--line-2); border-radius:var(--r1);background:var(--surface);color:var(--ink);font-size:14px; box-shadow:inset 0 1px 2px rgba(74,54,26,.06); transition:border-color .12s,box-shadow .12s} .kentta:hover{border-color:var(--ink-3)} .kentta::placeholder{color:var(--ink-3)} .kentta:focus{outline:none;border-color:var(--accent); box-shadow:var(--hehku), inset 0 1px 2px rgba(74,54,26,.05)} textarea.kentta{min-height:74px;resize:vertical;line-height:1.5} select.kentta{cursor:pointer} /* Kosketuslaitteella kenttä on 16 px: pienempi zoomaa iOS:llä kun siihen napauttaa. */ @media (pointer:coarse){ .kentta{font-size:16px;min-height:42px} } /* Pituuslaskuri kentän vieressä. Näkyy vasta kun rajaa lähestyy, ja on siihen asti tyhjä: tyhjä laskuri piilotetaan kokonaan, jottei sen väli jää riville näkymättömäksi aukoksi. */ .pituus{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink-3); align-self:flex-end;padding-bottom:9px} .pituus:empty{display:none} .pituus.loppuu{color:var(--punainen);font-weight:700} /* ---------- merkkilappu ---------- */ .lappu{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px; font-weight:600;letter-spacing:.01em;white-space:nowrap; background:var(--surface-3);color:var(--ink-2)} .lappu.punainen{background:var(--punainen-pehmea);color:var(--punainen)} .lappu.keltainen{background:var(--keltainen-pehmea);color:var(--keltainen)} .lappu.vihrea{background:var(--vihrea-pehmea);color:var(--vihrea)} .lappu.sininen{background:var(--sininen-pehmea);color:var(--sininen)} /* Tarkennerivi otsikon alla. Vain merkitsevä osa saa värin. */ .meta{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4} .meta .osa+.osa::before{content:'·';margin:0 5px;color:var(--line-2)} .meta .kiireinen,.meta .myohassa{color:var(--punainen);font-weight:600} /* ---------- myyjän väri ---------- Nämä eivät ole tilavärejä vaan henkilön tunnisteita, ja siksi ne ovat ainoa kohta jossa sävyjä on kaksitoista. Pimeällä pohjalla ne ovat kylläisempiä kuin vaalealla: sävy joka erottui valkoisella katoaa tummalla. */ .v-blue{--v:#3B72D9} .v-teal{--v:#1B9184} .v-violet{--v:#7B57C9} .v-cyan{--v:#1188A8} .v-green{--v:#1F9660} .v-indigo{--v:#4B5FBF} .v-pink{--v:#C0417F} .v-sky{--v:#2A8FCB} .v-amber{--v:#B47A16} .v-orange{--v:#D3591F} .v-rose{--v:#CE3B47} .v-slate{--v:#6B6560} /* Nimikirjaimet ovat monospacella: kaksi kirjainta ympyrässä on tunniste eikä sana, ja tasalevyisenä ne asettuvat keskelle itsestään. */ .merkki{display:inline-flex;align-items:center;justify-content:center;flex:none; width:26px;height:26px;border-radius:50%;background:var(--v,#6B6560);color:#FFFFFF; box-shadow:0 1px 2px rgba(74,54,26,.20), inset 0 1px 0 rgba(255,255,255,.24); font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.02em} .piste{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%; background:var(--v,#6B6560);margin-right:6px;vertical-align:middle} .tyhja{padding:16px 4px;color:var(--ink-3);font-size:13px;line-height:1.5} /* ---------- kirjautumattomien sivujen palkki ---------- */ .palkki{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px; color:var(--frame-ink)} .palkki .nimi{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--frame-ink)} .palkki a{color:var(--frame-ink)} .palkki .oikea{margin-left:auto;display:flex;align-items:center;gap:14px} /* ---------- virhepalkki ---------- Virhe on ainoa asia joka saa punaisen pinnan koko ruudun levyisenä. Ennen se oli sama melkein musta kuin ensisijainen painike; nyt painike on kirkas signaali, ja virhe olisi sillä pinnalla lukenut kutsuna eikä varoituksena. */ #virhe{position:fixed;left:14px;right:14px;top:14px;z-index:90; background:var(--punainen-pehmea);border:1px solid var(--punainen); color:var(--punainen);padding:11px 14px;border-radius:var(--r2);display:none;gap:12px; align-items:center;box-shadow:var(--paneeli);font-size:13px} #virhe.nakyy{display:flex} #virhe button{margin-left:auto;background:transparent;border:1px solid var(--punainen); color:var(--punainen);border-radius:4px;min-height:28px;padding:0 11px;cursor:pointer; font-size:12px} #virhe button:hover{background:var(--punainen);color:#FFFFFF}