MediaWiki:Common.css: differenze tra le versioni

Versione attuale delle 03:35, 7 ott 2026

/*
 * Tema della Wiki di ESN Milano Statale.
 *
 * Sorgente nel repo: wiki/bozze/MediaWiki_Common.css.wiki; scelte e prove in wiki/tema/README.md.
 * Vale per tutti i lettori e per tutte le skin (Vector 2022 su desktop, Minerva su mobile).
 *
 * Regole:
 * - i colori del testo, degli sfondi e dei bordi vengono dai token di Codex (var(--…)), che la
 *   skin ridefinisce in modalità notte; il secondo valore di var() è il colore chiaro, per una
 *   skin che non li definisce;
 * - i colori ESN sono fissi (manuale d'identità visiva) e qui decorano soltanto: nessuno porta
 *   testo, perché su sfondo chiaro solo il Blu scuro regge come testo e su sfondo scuro solo il
 *   Ciano;
 * - le classi dei template e della Pagina principale hanno il prefisso esn-;
 * - l'aspetto della skin (caratteri, titoli, strisce) riprende il template di Google Docs
 *   «Template ESN Milano Statale»: Oswald per i titoli, Lato per il testo, i cinque colori ESN;
 * - nei commenti i template si nominano senza graffe: MediaWiki registra le graffe anche
 *   in un foglio di stile, e la pagina finirebbe nella categoria del template.
 */

/* Caratteri: Oswald e Lato (SIL Open Font License), serviti dal server della wiki in /fonts/,
   non da Google Fonts, che manderebbe a Google l'indirizzo IP di ogni lettore. File e licenze nel
   repo in wiki/tema/fonts/. Finché i file non ci sono, valgono i caratteri di riserva. */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '/fonts/lato-400-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '/fonts/lato-400-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url( '/fonts/lato-400i-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url( '/fonts/lato-400i-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( '/fonts/lato-700-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( '/fonts/lato-700-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url( '/fonts/oswald-var-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url( '/fonts/oswald-var-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Colori ESN (Visual Identity Manual 2023, p9): non si alterano. In modalità notte il Blu scuro su
   fondo scuro non si vedrebbe: dove decora, al suo posto c'è il colore del testo. */
:root {
	--esn-cyan: #00aeef;
	--esn-magenta: #ec008c;
	--esn-green: #7ac143;
	--esn-orange: #f47b20;
	--esn-darkblue: #2e3192;
	--esn-darkblue-filetto: var( --esn-darkblue );
	--esn-titoli: 'Oswald', 'Arial Narrow', sans-serif;
	--esn-testo: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}

html.skin-theme-clientpref-night {
	--esn-darkblue-filetto: var( --color-base, #eaecf0 );
}

@media ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		--esn-darkblue-filetto: var( --color-base, #eaecf0 );
	}
}

/* Template:Da verificare: riquadro di avviso. Il filetto a sinistra è l'Arancione ESN: decorativo,
   si vede in entrambi i temi (5,7:1 sul fondo notte del riquadro, 2,5:1 su quello chiaro): a dire
   che cos'è il riquadro è il testo «Da verificare.» in grassetto, non il colore. */
.esn-da-verificare {
	margin: 0.5em 0;
	padding: 0.6em 1em;
	border: 1px solid var( --border-color-subtle, #c8ccd1 );
	border-left: 4px solid var( --esn-orange );
	background-color: var( --background-color-warning-subtle, #fdf2d5 );
	color: var( --color-base, #202122 );
}

/* Template:Fonte: la riga della fonte, un po' più piccola del testo. */
.esn-fonte {
	font-size: 95%;
}

/* La data di consultazione dentro Template:Fonte. */
.esn-fonte-data {
	color: var( --color-subtle, #54595d );
}

/* Template:Ultimo aggiornamento: riga discreta in fondo alla pagina, sotto un filetto. */
.esn-aggiornamento {
	clear: both;
	margin-top: 1.5em;
	padding-top: 0.4em;
	border-top: 1px solid var( --border-color-muted, #dadde3 );
	font-size: 90%;
	color: var( --color-subtle, #54595d );
}

/* Parametro obbligatorio mancante («fonte non indicata», «data non indicata»): rosso d'errore,
   così salta all'occhio di chi rilegge. */
.esn-mancante {
	color: var( --color-error, #bf3c2c );
}

/* ---- Aspetto: titoli, testo, strisce ---- */

/* Testo. */
.mw-body-content,
.mw-body-content p,
.mw-body-content li {
	font-family: var( --esn-testo );
}

/* Titolo della pagina. */
.mw-body h1.firstHeading,
.mw-body .mw-first-heading,
#firstHeading.firstHeading {
	font-family: var( --esn-titoli );
	font-weight: 500;
	letter-spacing: 0.01em;
}

.vector-body-before-content,
.mw-body-header {
	border-bottom-color: var( --color-base, #202122 );
}

/* Titoli di sezione. Con :is( … ) il selettore pesa quanto quello di Minerva
   (.content .mw-parser-output > .mw-heading2), e vince perché Common.css si carica dopo la skin. */
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
	font-family: var( --esn-titoli );
	font-weight: 400;
}

:is( .mw-body-content, .content ) .mw-parser-output .mw-heading2 {
	border-bottom: 2px solid var( --esn-cyan );
}

:is( .mw-body-content, .content ) .mw-parser-output .mw-heading2 h2 {
	border-bottom: 0;
}

:is( .mw-body-content, .content ) .mw-parser-output .mw-heading2:nth-child( 5n + 2 of .mw-heading2 ) { border-bottom-color: var( --esn-green ); }
:is( .mw-body-content, .content ) .mw-parser-output .mw-heading2:nth-child( 5n + 3 of .mw-heading2 ) { border-bottom-color: var( --esn-orange ); }
:is( .mw-body-content, .content ) .mw-parser-output .mw-heading2:nth-child( 5n + 4 of .mw-heading2 ) { border-bottom-color: var( --esn-magenta ); }
:is( .mw-body-content, .content ) .mw-parser-output .mw-heading2:nth-child( 5n + 5 of .mw-heading2 ) { border-bottom-color: var( --esn-darkblue-filetto ); }

:is( .mw-body-content, .content ) .mw-parser-output .mw-heading3 {
	border-bottom: 1px solid var( --border-color-muted, #dadde3 );
	padding-bottom: 0.1em;
}

/* La striscia dei cinque colori, con le estremità grigie come nel template: sopra il piè di
   pagina (Vector) e in fondo alla pagina (Minerva). */
.mw-footer::before,
.minerva-footer::before {
	content: '';
	display: block;
	height: 6px;
	margin-bottom: 1em;
	border-radius: 3px;
	background: linear-gradient( to right,
		var( --border-color-muted, #dadde3 ) 0 10%,
		var( --esn-orange ) 10% 26%,
		var( --esn-green ) 26% 42%,
		var( --esn-cyan ) 42% 58%,
		var( --esn-magenta ) 58% 74%,
		var( --esn-darkblue-filetto ) 74% 90%,
		var( --border-color-muted, #dadde3 ) 90% 100% );
}

/* Striscia in cima, sopra tutto, in entrambe le skin. */
body::before {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient( to right,
		var( --esn-orange ) 0 20%,
		var( --esn-green ) 20% 40%,
		var( --esn-cyan ) 40% 60%,
		var( --esn-magenta ) 60% 80%,
		var( --esn-darkblue-filetto ) 80% 100% );
}

/* Pagina principale: un riquadro per gruppo di collegamenti, ognuno con il suo colore ESN in
   alto (esn-portale-ciano, -verde, -arancione, -magenta, -blu). */
.esn-benvenuto {
	font-size: 1.1em;
	margin: 0.5em 0 1.2em;
}

.esn-portali {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 20em ), 1fr ) );
	gap: 1em;
	margin: 1em 0;
}

.esn-portale {
	border: 1px solid var( --border-color-subtle, #c8ccd1 );
	border-top: 4px solid var( --esn-portale, var( --esn-cyan ) );
	border-radius: 2px;
	padding: 0.4em 1em 0.8em;
	background-color: var( --background-color-base, #fff );
	min-width: 0;
}

.esn-portale-ciano { --esn-portale: var( --esn-cyan ); }
.esn-portale-verde { --esn-portale: var( --esn-green ); }
.esn-portale-arancione { --esn-portale: var( --esn-orange ); }
.esn-portale-magenta { --esn-portale: var( --esn-magenta ); }
.esn-portale-blu { --esn-portale: var( --esn-darkblue-filetto ); }

.esn-portale-titolo {
	font-family: var( --esn-titoli );
	font-size: 1.3em;
	margin: 0.2em 0 0.4em;
}

.esn-portale ul {
	margin: 0 0 0 1.2em;
}

.esn-portale li {
	margin-bottom: 0.2em;
}

/* Minerva (telefono), da 640 px in su (foldable aperti, tablet): la skin mostra la barra di
   ricerca intera, larga 23,4375em e senza potersi restringere, e il nome del sito si comprimeva
   sotto la barra («Wiki di ESN Milano Stata|Cerca…»). Il nome tiene la sua larghezza; la barra
   arriva fino alla larghezza della skin e si restringe quando lo spazio non basta. */
@media screen and ( min-width: 640px ) {
	.minerva-header .branding-box {
		flex: 0 0 auto;
	}

	.minerva-header .search-box {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}