Järjestelmäviesti:Common.css
Huomautus: Selaimen välimuisti pitää tyhjentää asetusten tallentamisen jälkeen, jotta muutokset tulisivat voimaan.
- Firefox ja Safari: Napsauta Shift-näppäin pohjassa Päivitä, tai paina Ctrl-F5 tai Ctrl-R (⌘-R Macilla)
- Google Chrome: Paina Ctrl-Shift-R (⌘-Shift-R Macilla)
- Edge: Napsauta Ctrl-näppäin pohjassa Päivitä tai paina Ctrl-F5
/* ==========================================================================
M&A wiki — visual identity
Skin: Vector 2022. No TemplateStyles available, so the whole design
system lives in this file. Custom properties are namespaced --ko-* so
they never collide with MediaWiki's own tokens.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;500;600&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap');
:root {
--ko-ink: #1b1f24;
--ko-text: #24292f;
--ko-muted: #5b646d;
--ko-faint: #7d868e;
--ko-rule: #e0e4e8;
--ko-rule-firm: #c6ccd2;
--ko-paper: #ffffff;
--ko-canvas: #f6f7f8;
--ko-link: #1b3a5c;
--ko-link-hover: #2f6096;
--ko-gold: #93601f;
--ko-gold-soft: #f9f5ec;
--ko-gold-rule: #e3d3b0;
--ko-green: #1c6046;
--ko-green-soft: #ecf4f0;
--ko-red: #8a2b2b;
--ko-red-soft: #f8eeee;
--ko-serif: Spectral, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
--ko-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--ko-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Night mode — explicit choice */
html.skin-theme-clientpref-night {
--ko-ink: #e9edf1;
--ko-text: #dce2e8;
--ko-muted: #a3adb6;
--ko-faint: #828c95;
--ko-rule: #2b333a;
--ko-rule-firm: #3d4750;
--ko-paper: #1a1f24;
--ko-canvas: #14181c;
--ko-link: #8fb6de;
--ko-link-hover: #b3d0ee;
--ko-gold: #d9ae62;
--ko-gold-soft: #241d10;
--ko-gold-rule: #4a3a1c;
--ko-green: #6bbf99;
--ko-green-soft: #14231d;
--ko-red: #d98a8a;
--ko-red-soft: #251616;
}
/* Night mode — following the operating system */
@media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
--ko-ink: #e9edf1;
--ko-text: #dce2e8;
--ko-muted: #a3adb6;
--ko-faint: #828c95;
--ko-rule: #2b333a;
--ko-rule-firm: #3d4750;
--ko-paper: #1a1f24;
--ko-canvas: #14181c;
--ko-link: #8fb6de;
--ko-link-hover: #b3d0ee;
--ko-gold: #d9ae62;
--ko-gold-soft: #241d10;
--ko-gold-rule: #4a3a1c;
--ko-green: #6bbf99;
--ko-green-soft: #14231d;
--ko-red: #d98a8a;
--ko-red-soft: #251616;
}
}
/* --------------------------------------------------------------- type --- */
.mw-body,
.mw-body-content {
font-family: var(--ko-sans);
font-size: 0.95rem;
line-height: 1.65;
color: var(--ko-text);
}
.mw-body-content p,
.mw-body-content li {
max-width: 42em;
}
.mw-body-content p {
margin: 0 0 0.85em;
}
.mw-heading1 h1,
.mw-body h1.firstHeading,
.mw-heading2 h2,
.mw-heading3 h3,
.mw-heading4 h4 {
font-family: var(--ko-serif);
font-weight: 600;
color: var(--ko-ink);
letter-spacing: -0.012em;
text-wrap: balance;
}
.mw-body h1.firstHeading {
font-size: 2.1rem;
line-height: 1.15;
padding-bottom: 0.3em;
}
.mw-heading2 {
border-bottom: 1px solid var(--ko-rule);
margin-top: 2.1em;
padding-bottom: 0.22em;
}
.mw-heading2 h2 {
font-size: 1.42rem;
line-height: 1.25;
border: 0;
position: relative;
}
.mw-heading2 h2::before {
content: '';
position: absolute;
left: -14px;
top: 0.28em;
bottom: 0.28em;
width: 3px;
background: var(--ko-gold);
border-radius: 2px;
}
.mw-heading3 h3 { font-size: 1.13rem; margin-top: 1.5em; }
.mw-heading4 h4 { font-size: 1rem; font-family: var(--ko-sans); font-weight: 600; }
/* Lead paragraph of an article */
.mw-parser-output > p:first-of-type {
font-family: var(--ko-serif);
font-size: 1.1rem;
line-height: 1.55;
color: var(--ko-ink);
}
/* -------------------------------------------------------------- links --- */
.mw-body-content a:not(.new):not(.external) { color: var(--ko-link); }
.mw-body-content a:not(.new):not(.external):hover { color: var(--ko-link-hover); }
.mw-body-content a.external { color: var(--ko-link); }
/* ------------------------------------------------------ statute chips --- */
/* Inline citation to a statute or case: <span class="pykala">OYL 13:10 §</span> */
.pykala,
.pykala a {
font-family: var(--ko-mono);
font-size: 0.86em;
white-space: nowrap;
color: var(--ko-gold);
border-bottom: 1px solid var(--ko-gold-rule);
}
/* ------------------------------------------------------------- boxes --- */
.ko-box {
background: var(--ko-paper);
border: 1px solid var(--ko-rule);
border-left: 3px solid var(--ko-rule-firm);
border-radius: 0 4px 4px 0;
padding: 0.85em 1.15em;
margin: 1.3em 0;
}
.ko-box .ko-box-label {
display: block;
font-family: var(--ko-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ko-muted);
margin-bottom: 0.4em;
}
.ko-box p:last-child,
.ko-box ul:last-child { margin-bottom: 0; }
/* Ytimessä — the three-line orientation box at the top of every article */
.ko-ytimessa {
background: var(--ko-gold-soft);
border-color: var(--ko-gold-rule);
border-left-color: var(--ko-gold);
}
.ko-ytimessa .ko-box-label { color: var(--ko-gold); }
.ko-ytimessa ul { margin: 0; padding-left: 1.1em; }
.ko-ytimessa li { margin-bottom: 0.3em; max-width: 44em; }
/* Käytännön huomio — practice point */
.ko-huomio {
background: var(--ko-green-soft);
border-color: var(--ko-rule);
border-left-color: var(--ko-green);
}
.ko-huomio .ko-box-label { color: var(--ko-green); }
/* Epäselvä oikeustila — the law is genuinely unsettled here */
.ko-epaselva {
background: var(--ko-red-soft);
border-color: var(--ko-rule);
border-left-color: var(--ko-red);
}
.ko-epaselva .ko-box-label { color: var(--ko-red); }
/* Tarkistuslista — actionable checklist */
.ko-tarkistuslista {
background: var(--ko-canvas);
border-color: var(--ko-rule);
border-left-color: var(--ko-link);
}
.ko-tarkistuslista .ko-box-label { color: var(--ko-link); }
.ko-tarkistuslista ul { list-style: none; margin: 0; padding-left: 0.2em; }
.ko-tarkistuslista li {
position: relative;
padding-left: 1.6em;
margin-bottom: 0.5em;
max-width: none;
}
.ko-tarkistuslista li::before {
content: "\2610";
position: absolute;
left: 0;
top: 0;
color: var(--ko-link);
font-size: 1.05em;
line-height: 1.3;
}
/* Tarkistettu — verification stamp, sits at the foot of an article */
.ko-tarkistettu {
font-family: var(--ko-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--ko-muted);
border-top: 1px solid var(--ko-rule);
margin-top: 2.2em;
padding-top: 0.7em;
}
/* ---------------------------------------------------------- clauses --- */
.ko-lauseke {
border: 1px solid var(--ko-rule);
border-radius: 5px;
margin: 1.4em 0;
overflow: hidden;
background: var(--ko-paper);
}
.ko-lauseke-otsikko {
background: var(--ko-canvas);
border-bottom: 1px solid var(--ko-rule);
padding: 0.55em 1em;
font-weight: 600;
font-size: 0.95rem;
color: var(--ko-ink);
}
.ko-lauseke-teksti {
padding: 0.9em 1.1em;
font-family: var(--ko-serif);
font-size: 0.95rem;
line-height: 1.6;
}
.ko-lauseke-teksti + .ko-lauseke-teksti { border-top: 1px dashed var(--ko-rule); }
.ko-kanta {
display: inline-block;
font-family: var(--ko-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.15em 0.5em;
border-radius: 3px;
margin-right: 0.5em;
vertical-align: 0.12em;
}
.ko-kanta-ostaja { background: var(--ko-green-soft); color: var(--ko-green); }
.ko-kanta-neutraali { background: var(--ko-canvas); color: var(--ko-muted); }
.ko-kanta-myyja { background: var(--ko-gold-soft); color: var(--ko-gold); }
/* ---------------------------------------------------------- tables --- */
.mw-body-content .wikitable {
border: 1px solid var(--ko-rule);
border-collapse: collapse;
background: var(--ko-paper);
font-size: 0.9rem;
margin: 1.3em 0;
}
.mw-body-content .wikitable > * > tr > th {
background: var(--ko-canvas);
border: 1px solid var(--ko-rule);
font-family: var(--ko-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ko-muted);
text-align: left;
padding: 0.6em 0.85em;
}
.mw-body-content .wikitable > * > tr > td {
border: 1px solid var(--ko-rule);
padding: 0.6em 0.85em;
vertical-align: top;
}
/* ------------------------------------------------------ references --- */
.mw-parser-output .references {
font-size: 0.82rem;
line-height: 1.55;
color: var(--ko-muted);
}
.mw-parser-output .references li { max-width: 52em; }
.mw-parser-output .reference a { color: var(--ko-gold); }
/* -------------------------------------------------------- frontpage --- */
.ko-hero {
border-bottom: 2px solid var(--ko-ink);
padding-bottom: 1.4em;
margin-bottom: 1.8em;
}
.ko-hero-teksti {
font-family: var(--ko-serif);
font-size: 1.28rem;
line-height: 1.45;
color: var(--ko-ink);
max-width: 34em;
margin: 0;
}
.ko-hero-meta {
font-family: var(--ko-mono);
font-size: 0.7rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ko-faint);
margin-top: 1em;
}
.ko-polut {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 220px, 100% ), 1fr ) );
gap: 14px;
margin: 1.5em 0;
}
.ko-polku {
border: 1px solid var(--ko-rule);
border-top: 3px solid var(--ko-gold);
border-radius: 0 0 5px 5px;
background: var(--ko-paper);
padding: 1em 1.1em;
}
.ko-polku-h {
font-family: var(--ko-serif);
font-size: 1.08rem;
font-weight: 600;
line-height: 1.25;
margin: 0 0 0.35em;
color: var(--ko-ink);
}
.ko-polku h3 {
font-family: var(--ko-serif);
font-size: 1.08rem;
margin: 0 0 0.35em;
color: var(--ko-ink);
}
.ko-polku p {
font-size: 0.88rem;
color: var(--ko-muted);
margin: 0 0 0.6em;
}
.ko-polku ul { margin: 0; padding-left: 1.05em; font-size: 0.9rem; }
.ko-polku li { margin-bottom: 0.22em; max-width: none; }
.ko-polku {
transition: box-shadow 0.15s ease, border-top-color 0.15s ease;
}
.ko-polku:hover {
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
border-top-color: var(--ko-green);
}
.ko-polku-lisaa {
display: inline-block;
margin-top: 0.15em;
font-family: var(--ko-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--ko-gold);
}
/* Aloita tästä — new-reader starting path, sits above the topic-path cards */
.ko-aloita {
background: var(--ko-green-soft);
border: 1px solid var(--ko-green);
border-radius: 6px;
padding: 1em 1.3em;
margin: 1.5em 0 0;
}
.ko-aloita-h {
font-family: var(--ko-serif);
font-weight: 700;
font-size: 1.05rem;
color: var(--ko-green);
margin: 0 0 0.4em;
}
.ko-aloita p { margin: 0 0 0.6em; font-size: 0.9rem; color: var(--ko-text); max-width: none; }
.ko-aloita ol { margin: 0; padding-left: 1.3em; font-size: 0.92rem; }
.ko-aloita li { margin-bottom: 0.3em; max-width: none; }
/* ----------------------------------------------------- disclaimer --- */
.ko-huomautus {
background: var(--ko-gold-soft);
border: 1px solid var(--ko-gold-rule);
border-radius: 6px;
padding: 0.9em 1.2em;
margin: 0 0 1.6em;
font-size: 0.9rem;
line-height: 1.6;
color: var(--ko-text);
}
.ko-huomautus strong,
.ko-huomautus b { color: var(--ko-gold); }
.ko-huomautus p { margin: 0; max-width: none; }
/* ----------------------------------------------------------- mobile --- */
@media screen and ( max-width: 720px ) {
.mw-body h1.firstHeading { font-size: 1.7rem; }
.mw-heading2 h2 { font-size: 1.24rem; }
.mw-heading2 h2::before { display: none; }
.ko-hero-teksti { font-size: 1.1rem; }
.mw-parser-output > p:first-of-type { font-size: 1.02rem; }
}
/* ============================================================
Kaaviot — vektorikuvat ja niiden selitteet
============================================================ */
.ko-kaavio {
margin: 2em 0;
border: 1px solid var( --ko-rule-firm );
border-radius: 7px;
background: #ffffff;
padding: 14px 14px 12px;
box-sizing: border-box;
overflow: hidden;
}
.ko-kaavio a,
.ko-kaavio figure,
.ko-kaavio p {
margin: 0;
display: block;
}
.ko-kaavio img,
.ko-kaavio .mw-file-element {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border-radius: 4px;
}
.ko-kaavio-selite {
font-family: var( --ko-sans );
font-size: 0.82rem;
line-height: 1.55;
color: #5b646d;
margin-top: 0.85em;
padding-top: 0.7em;
border-top: 1px solid #e6e9ec;
}
.ko-kaavio-selite .ko-kaavio-nro {
font-family: var( --ko-mono );
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #93601f;
display: block;
margin-bottom: 0.25em;
}
.ko-kaavio-selite strong {
color: #1b1f24;
font-weight: 600;
}
/* Muut SVG-kuvat pysyvät responsiivisina */
.mw-parser-output img.mw-file-element[src$=".svg"] {
max-width: 100%;
height: auto;
}
/* ---------------------------------------------------- pikavalinnat --- */
/* Kolme työkalua (Sanasto, Lausekekirjasto, Oikeustapaukset) nostettu
omaksi painikeriviksi heti hero-alueen alle, pois aihepiiri-laatikoista. */
.ko-pikavalinnat {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 1.3em 0 0;
}
.ko-pikanappi {
display: inline-flex;
align-items: center;
font-family: var(--ko-sans);
font-weight: 600;
font-size: 0.93rem;
background: var(--ko-canvas);
border: 1px solid var(--ko-rule-firm);
border-radius: 6px;
padding: 0.55em 1.2em;
transition: background 0.12s ease, border-color 0.12s ease;
}
.ko-pikanappi a,
.ko-pikanappi a:visited,
.ko-pikanappi strong.selflink {
color: var(--ko-link) !important;
text-decoration: none;
}
.ko-pikanappi:hover {
background: var(--ko-link);
border-color: var(--ko-link);
}
.ko-pikanappi:hover a,
.ko-pikanappi:hover a:visited,
.ko-pikanappi:hover strong.selflink {
color: var(--ko-paper) !important;
}
/* ------------------------------------------------------ kieli-vaihto --- */
.ko-kieli-vaihto {
display: inline-block;
padding: 0.5em 1.25em;
margin: 0 0 0.9em;
border: 2px solid var(--ko-gold);
border-radius: 6px;
font-size: 1.05em;
font-weight: 600;
background: var(--ko-gold-soft);
}
.ko-kieli-vaihto a,
.ko-kieli-vaihto a:visited {
color: var(--ko-gold) !important;
text-decoration: none;
}
/* Kieli-mallineen lippukuvakkeet (SVG upotettu base64:na - ei vaadi tiedostolatausta) */
.ko-lippu {
display: inline-block;
width: 20px;
height: 14px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-right: 6px;
}
.ko-lippu-gb {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzNiIgd2lkdGg9IjYwIiBoZWlnaHQ9IjM2Ij4KICA8cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iMzYiIGZpbGw9IiMwMDI0N2QiLz4KICA8cGF0aCBkPSJNMCwwIEw2MCwzNiBNNjAsMCBMMCwzNiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjciLz4KICA8cGF0aCBkPSJNMCwwIEw2MCwzNiBNNjAsMCBMMCwzNiIgc3Ryb2tlPSIjY2YxNDJiIiBzdHJva2Utd2lkdGg9IjIuNCIvPgogIDxwYXRoIGQ9Ik0zMCwwIEwzMCwzNiBNMCwxOCBMNjAsMTgiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxMiIvPgogIDxwYXRoIGQ9Ik0zMCwwIEwzMCwzNiBNMCwxOCBMNjAsMTgiIHN0cm9rZT0iI2NmMTQyYiIgc3Ryb2tlLXdpZHRoPSI3LjIiLz4KPC9zdmc+Cg==");
}
.ko-lippu-fi {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzNiIgd2lkdGg9IjYwIiBoZWlnaHQ9IjM2Ij4KICA8cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iMzYiIGZpbGw9IiNmZmZmZmYiLz4KICA8cmVjdCB4PSIxOCIgd2lkdGg9IjgiIGhlaWdodD0iMzYiIGZpbGw9IiMwMDJmNmMiLz4KICA8cmVjdCB5PSIxNCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjgiIGZpbGw9IiMwMDJmNmMiLz4KPC9zdmc+Cg==");
}
/* Käsitehakemisto (etusivu) */
.ko-kasitteet {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min( 240px, 100% ), 1fr ) );
gap: 1.4em;
margin: 1.6em 0;
border-top: 1px solid var(--ko-rule);
padding-top: 1.2em;
}
.ko-kasitteet-h {
font-family: var(--ko-mono);
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ko-gold);
margin-bottom: 0.5em;
}
.ko-kasitteet ul {
margin: 0;
padding-left: 1.05em;
font-size: 0.9rem;
}
.ko-kasitteet li {
margin-bottom: 0.18em;
max-width: none;
}
/* ------------------------------------------------------------- logo --- */
/* Väliaikainen ratkaisu oman tunnuksen saamiseksi ilman $wgLogos-asetusta.
Kun palvelimelle on lisätty oma logotiedosto ja $wgLogos, poista tämä lohko. */
.mw-logo-icon {
display: none;
}
.mw-logo::before {
content: "§";
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ko-serif);
font-size: 1.2rem;
line-height: 1;
color: var(--ko-gold);
border: 2px solid var(--ko-gold);
border-radius: 5px;
width: 1.85em;
height: 1.85em;
margin-right: 0.5em;
}
.mw-logo-wordmark {
font-family: var(--ko-serif);
font-weight: 600;
font-size: 1.28rem;
letter-spacing: -0.01em;
color: var(--ko-ink);
text-decoration: none;
}
.mw-logo:hover .mw-logo-wordmark,
.mw-logo:hover::before {
color: var(--ko-gold);
}