Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
Nasconde la TOC automatica sulla Dashboard (indice unico al centro)
Titolo editoriale leggero per le pagine di contenuto del namespace
(6 intermediate revisions by the same user not shown)
Line 33: Line 33:
/* === [ARCHIVIO-EDITORIALE] inizio === */
/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
/* Stile editoriale per le Dashboard dei namespace-archivio.
   Wrapper .archivio-editoriale (colonna principale) + card di stato nel rail
   Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
   destro di Citizen (via convenzione data-stato-archivio="1" + Citizen.js).
   come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
   Usa le variabili Citizen. Accent per-archivio via --ns-accent. */
   Usa le variabili Citizen. Accent per-archivio via --ns-accent. */


Line 40: Line 40:
color: var( --color-base, #fff );
color: var( --color-base, #fff );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
--ns-accent: var( --color-link-red, var( --color-destructive, #d33 ) );
counter-reset: sez;
}
 
/* 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;
}
}


Line 52: Line 68:
}
}


/* Riga di lancio (prosa: misura controllata) */
/* 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 {
.archivio-editoriale .lead {
margin: 0 0 2.2rem;
margin: 0;
max-width: 60ch;
max-width: none;
font-size: 1.18rem;
}
line-height: 1.55;
.archivio-editoriale .lead p {
margin: 0 0 1rem;
font-size: 1.08rem;
line-height: 1.6;
color: var( --color-base--subtle, #b8b8b8 );
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 editoriale stretto, su intestazioni vere (h2) === */
/* === Indice nella colonna destra === */
/* La TOC che ne deriva fa anche esistere il rail destro. */
.archivio-editoriale .art-aside {
.archivio-editoriale .mw-heading2 {
min-width: 0;
counter-increment: sez;
}
display: flex;
.archivio-editoriale .art-aside-titolo {
align-items: baseline;
margin: 0 0 .4rem;
gap: .8rem;
padding-bottom: .55rem;
margin: 1.5rem 0 .3rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
padding-top: 1.1rem;
font-size: .76rem;
border: 0;
text-transform: uppercase;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
}
}
.archivio-editoriale .mw-heading2:first-of-type {
.archivio-editoriale .idx-sez {
border-top: 0;
padding: .7rem 0;
padding-top: .2rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
}
.archivio-editoriale .mw-heading2::before {
.archivio-editoriale .idx-sez:last-child {
content: counter( sez, decimal-leading-zero );
border-bottom: 0;
color: var( --color-base--subtle, #b8b8b8 );
font-size: .8rem;
font-weight: 500;
letter-spacing: .03em;
}
}
.archivio-editoriale .mw-heading2 h2 {
.archivio-editoriale .idx-eti {
margin: 0;
margin-bottom: .2rem;
padding: 0;
font-size: .98rem;
border: 0;
font-size: 1.1rem;
font-weight: 600;
font-weight: 600;
color: #ffffff;
}
}
.archivio-editoriale .mw-heading2 .mw-editsection {
.archivio-editoriale .idx-voci {
display: none;
font-size: .9rem;
}
line-height: 1.5;
/* Riga di link sotto ogni sezione */
.archivio-editoriale .mw-heading2 + p {
margin: .1rem 0 .2rem;
color: var( --color-base--subtle, #b8b8b8 );
color: var( --color-base--subtle, #b8b8b8 );
line-height: 1.55;
font-size: .98rem;
}
}
.archivio-editoriale .mw-heading2 + p a {
.archivio-editoriale .idx-voci a,
.archivio-editoriale .idx-voci a:visited {
color: var( --ns-accent );
color: var( --ns-accent );
font-weight: 500;
font-weight: 500;
text-decoration: none;
text-decoration: none;
}
}
.archivio-editoriale .mw-heading2 + p a:hover {
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
text-decoration: underline;
}
}


/* === Card "Stato" nel rail destro (fuori dal wrapper: la sposta il JS) === */
/* Sotto i 900px: indice sotto l'articolo */
/* Righe metrica: etichetta a sinistra, valore a destra. */
@media ( max-width: 900px ) {
.box-stato-archivio .ce-metrica {
.archivio-editoriale .art-layout {
display: flex;
grid-template-columns: 1fr;
justify-content: space-between;
gap: 2.5rem;
align-items: baseline;
}
gap: .6rem;
padding: .25rem 0;
font-size: .9rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
}
}
.box-stato-archivio .ce-metrica:last-of-type {
/* === [ARCHIVIO-EDITORIALE] fine === */
border-bottom: 0;
 
/* === [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;
}
}
.box-stato-archivio .ce-metrica .l {
 
color: var( --color-base--subtle, #b8b8b8 );
/* Spazio per le due colonne (articolo + indice), moderato. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1180px, 94vw );
}
}
.box-stato-archivio .ce-metrica .n {
/* === [DASH-HERO] fine === */
font-weight: 600;
 
font-variant-numeric: tabular-nums;
/* === [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;
}
}
.box-stato-archivio .ce-agg {
body.ns-3004 .mw-parser-output a:not( .new ):hover {
margin: .7rem 0 0;
color: #f1c878;
font-size: .76rem;
opacity: .7;
font-style: italic;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */


/* === [DASH-NOTOC] inizio === */
/* Titolo "editoriale leggero" per le pagine di contenuto: occhiello giallo
/* Sulla Dashboard l'indice "vero" è quello editoriale nella colonna centrale.
  sopra, titolo bianco pulito. Sulla Dashboard #firstHeading è nascosto
   Le intestazioni servono solo a far esistere il rail destro: nascondiamo la
   (ha il suo hero), quindi questo occhiello lì non compare. */
  TOC automatica di Citizen nel rail (resta solo la card "Stato"), così non si
body.ns-3004 #firstHeading {
  hanno due indici. Page-scoped (due varianti per l'escaping del ":"). */
color: #ffffff;
 
}
body.page-CinetecaSarda_Dashboard .citizen-toc,
body.ns-3004 #firstHeading::before {
body.page-CinetecaSarda-Dashboard .citizen-toc,
content: "Cineteca Sarda";
body.page-CinetecaSarda_Dashboard #toc,
display: block;
body.page-CinetecaSarda-Dashboard #toc {
margin-bottom: .35rem;
display: none !important;
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;
}
}
/* === [DASH-NOTOC] fine === */
/* === [NS-BRAND] fine === */

Revision as of 19:48, 15 June 2026

/* 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 === */