MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */

#footer { display: none; }
/* last modification stuff */
#footer-info { display: none; }

/* footer links */
#footer-places { display: none; }

/* powered by icon */
#footer-icon { display: none; }

.box-stato-archivio .citizen-card__body p{
  margin: 0 0 .75em 0;
}
.box-stato-archivio .citizen-card__body p:last-child{
  margin-bottom: 0;
}

/* === CSS per template IntestazionePagine === */

.namespace-label{
  display:block;
  font-size:0.85em;
  margin-top:-0.3em;
  margin-bottom:0.6em;
}
.namespace-label a,
.namespace-label a:visited{
  color:inherit;
}

/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
   Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
   come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
   Usa le variabili Citizen. Accent per-archivio via --ns-accent. */

.archivio-editoriale {
	color: var( --color-base, #fff );
	--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
}

/* Cineteca Sarda (ns 3004): accent giallo del brand — dalla testata del logo
   di cinetecasarda.it — al posto del rosso, solo in questo namespace. */
body.ns-3004 .archivio-editoriale {
	--ns-accent: #e7b142;
}

/* Griglia: articolo (1fr) + indice (colonna fissa) */
.archivio-editoriale .art-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 300px;
	gap: 3.5rem;
	align-items: start;
}
.archivio-editoriale .art-main {
	min-width: 0;
}

/* Occhiello / cappello identitario */
.archivio-editoriale .occhiello {
	margin: 0 0 .7rem;
	font-size: .9rem;
	letter-spacing: .04em;
	color: var( --color-base--subtle, #b8b8b8 );
	opacity: .85;
}

/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
	margin: 0 0 1.3rem;
	border: 0;
	font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
	line-height: 1.03;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #ffffff;
}

/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
	margin: 0;
	max-width: none;
}
.archivio-editoriale .lead p {
	margin: 0 0 1rem;
	font-size: 1.08rem;
	line-height: 1.6;
	color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .lead p:last-child {
	margin-bottom: 0;
}
.archivio-editoriale .lead strong {
	color: var( --color-base, #fff );
	font-weight: 600;
}

/* === Indice nella colonna destra === */
.archivio-editoriale .art-aside {
	min-width: 0;
}
.archivio-editoriale .art-aside-titolo {
	margin: 0 0 .4rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-sez {
	padding: .7rem 0;
	border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-editoriale .idx-sez:last-child {
	border-bottom: 0;
}
.archivio-editoriale .idx-eti {
	margin-bottom: .2rem;
	font-size: .98rem;
	font-weight: 600;
	color: #ffffff;
}
.archivio-editoriale .idx-voci {
	font-size: .9rem;
	line-height: 1.5;
	color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
	color: var( --ns-accent );
	font-weight: 500;
	text-decoration: none;
}
.archivio-editoriale .idx-voci a:hover {
	text-decoration: underline;
}

/* Sotto i 900px: indice sotto l'articolo */
@media ( max-width: 900px ) {
	.archivio-editoriale .art-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}
/* === [ARCHIVIO-EDITORIALE] fine === */

/* === [DASH-HERO] inizio === */
/* Dashboard come "articolo di prima pagina": nasconde il titolo standard di
   Citizen (firstHeading), perché l'headline editoriale vive nel contenuto.
   Resta il resto dell'header (nav/strumenti). Page-scoped (due varianti per
   l'escaping del ":"). */

body.page-CinetecaSarda_Dashboard #firstHeading,
body.page-CinetecaSarda-Dashboard #firstHeading,
body.page-CinetecaSarda_Dashboard .mw-first-heading,
body.page-CinetecaSarda-Dashboard .mw-first-heading,
body.page-CinetecaSarda_Dashboard .mw-page-title-main,
body.page-CinetecaSarda-Dashboard .mw-page-title-main {
	display: none !important;
}

/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
	--width-layout: min( 1180px, 94vw );
}
/* === [DASH-HERO] fine === */

/* === [NS-BRAND] inizio === */
/* ==========================================================
   Brand CinetecaSarda (namespace 3004) — vale su TUTTE le pagine
   ========================================================== */

/* Link gialli del brand (dalla testata di cinetecasarda.it) al posto del blu
   di Citizen. I link a pagine mancanti (.new) restano rossi: segnale utile. */
body.ns-3004 .mw-parser-output a:not( .new ),
body.ns-3004 .mw-parser-output a:not( .new ):visited {
	color: #e7b142;
}
body.ns-3004 .mw-parser-output a:not( .new ):hover {
	color: #f1c878;
}

/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
   sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
   (ha il suo hero), quindi questo occhiello lì non compare. */
body.ns-3004 #firstHeading {
	color: #ffffff;
}
body.ns-3004 #firstHeading::before {
	content: "Cineteca Sarda";
	display: block;
	margin-bottom: .35rem;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #e7b142;
}
/* L'etichetta "in: Cineteca Sarda" è sostituita dall'occhiello */
body.ns-3004 .namespace-label {
	display: none;
}
/* === [NS-BRAND] fine === */

/* === [INDICE] inizio === */
/* ==========================================================
   Indice d'archivio (sorgente unica {{Indice <NS>}}).
   Colonna destra: flottante dove non c'è rail, dentro il rail di Citizen
   (sopra la TOC nativa) dove c'è. Collassabile. Scala font allineata a
   Citizen (--font-size-*) per armonia con la TOC.
   ========================================================== */

.archivio-indice {
	font-size: var( --font-size-small, .875rem );
	line-height: 1.45;
}

/* Variante "rail": colonna destra flottante, sempre visibile (no dipendenza TOC) */
.archivio-indice.ai-rail {
	float: right;
	width: 280px;
	margin: .2rem 0 1.4rem 2rem;
	padding-left: 1.4rem;
	border-left: 1px solid var( --border-color-base, rgba( 255, 255, 255, .12 ) );
}
@media ( max-width: 900px ) {
	.archivio-indice.ai-rail {
		float: none;
		width: auto;
		margin: 0 0 1.6rem;
		padding-left: 0;
		border-left: 0;
	}
}
/* Quando il JS l'ha spostato DENTRO il rail di Citizen (sopra la TOC) */
.archivio-indice.ai-in-rail {
	float: none;
	width: auto;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

/* Testata = riga header: nome archivio (link Dashboard) + chevron toggle */
.archivio-indice .ai-testata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .5rem;
	padding-bottom: .45rem;
	border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .16 ) );
	font-size: var( --font-size-x-small, .8125rem );
	text-transform: uppercase;
	letter-spacing: .07em;
}
.archivio-indice .ai-testata a,
.archivio-indice .ai-testata a:visited {
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}
.archivio-indice .ai-testata a:hover {
	color: #e7b142;
}

/* Chevron apri/chiudi */
.archivio-indice .ai-toggle {
	cursor: pointer;
	user-select: none;
	line-height: 1;
	padding: .1rem .25rem;
	color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-toggle::before {
	content: "▾";
	display: inline-block;
	font-size: .9em;
	transition: transform .15s ease;
}
.archivio-indice.ai-collapsed .ai-toggle::before {
	transform: rotate( -90deg );
}
.archivio-indice.ai-collapsed .ai-body {
	display: none;
}
.archivio-indice .ai-toggle:hover {
	color: #ffffff;
}

/* Sezioni curate */
.archivio-indice .ai-sez {
	padding: .5rem 0;
	border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
.archivio-indice .ai-body .ai-sez:last-child {
	border-bottom: 0;
}
.archivio-indice .ai-eti {
	margin-bottom: .12rem;
	font-size: var( --font-size-small, .875rem );
	font-weight: 600;
	color: #ffffff;
}
.archivio-indice .ai-voci {
	font-size: var( --font-size-small, .875rem );
	color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-indice .ai-voci a,
.archivio-indice .ai-voci a:visited {
	color: #e7b142;
	font-weight: 500;
	text-decoration: none;
}
.archivio-indice .ai-voci a:hover {
	text-decoration: underline;
}

/* Il rail di Citizen ha `contain: strict` → dimensione calcolata senza il
   contenuto + clip dell'eccedenza. Con l'indice in più, chiudendo una sezione
   il rail si accorcia e taglia l'indice. Togliamo size+paint (teniamo
   layout+style) così il rail cresce col contenuto e non clippa. Solo ns 3004. */
body.ns-3004 .citizen-page-sidebar {
	contain: layout style;
}

/* === TOC nativa di Citizen: giallo SOLO sulla voce attiva (orientamento) === */
body.ns-3004 .citizen-toc-list-item--active > a,
body.ns-3004 .citizen-toc-list-item--active > a .citizen-toc-text,
body.ns-3004 .citizen-toc-list-item--active .citizen-toc-link {
	color: #e7b142;
	font-weight: 600;
}
/* === [INDICE] fine === */