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
Indice editoriale stretto (v2)
Titolo editoriale leggero per le pagine di contenuto del namespace
(10 intermediate revisions by the same user not shown)
Line 31: Line 31:
}
}


/* === [ARCHIVIO-EDITORIALE] inizio — prototipo staging === */
/* === [ARCHIVIO-EDITORIALE] inizio === */
/* Stile editoriale per le Dashboard dei namespace-archivio.
/* Stile editoriale per le Dashboard dei namespace-archivio.
   Agganciato al wrapper .archivio-editoriale (in MediaWiki:Common.css).
   Layout "articolo di prima pagina": corpo a sinistra, indice a destra,
   Usa le variabili Citizen → coerente col tema dark e con ogni skin.
  come griglia interna al contenuto (niente dipendenza dal rail di Citizen).
  Accent per-archivio via --ns-accent sul wrapper. */
   Usa le variabili Citizen. Accent per-archivio via --ns-accent. */


.archivio-editoriale {
.archivio-editoriale {
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 ) );
}
/* 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 51: Line 68:
}
}


/* Riga di lancio (prosa: misura controllata ~60ch) */
/* 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 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 {
/* Striscia di metriche (sostituisce la wikitable di stato) */
margin-bottom: 0;
.archivio-editoriale .metriche {
display: flex;
flex-wrap: wrap;
gap: 2.4rem;
margin: 0 0 1.4rem;
padding: 0;
}
}
.archivio-editoriale .metrica-num {
.archivio-editoriale .lead strong {
font-size: 2.1rem;
color: var( --color-base, #fff );
line-height: 1;
font-weight: 600;
font-weight: 600;
letter-spacing: -.02em;
}
}
.archivio-editoriale .metrica-label {
 
margin-top: .4rem;
/* === 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;
font-size: .76rem;
text-transform: uppercase;
text-transform: uppercase;
letter-spacing: .06em;
letter-spacing: .08em;
color: var( --color-base--subtle, #b8b8b8 );
color: var( --color-base--subtle, #b8b8b8 );
}
}
 
.archivio-editoriale .idx-sez {
/* Nota di stato sotto le metriche (prosa: misura controllata) */
padding: .7rem 0;
.archivio-editoriale .stato-nota {
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .07 ) );
margin: 0 0 2.4rem;
max-width: 62ch;
font-size: .96rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
}
}
.archivio-editoriale .stato-data {
.archivio-editoriale .idx-sez:last-child {
opacity: .7;
border-bottom: 0;
font-style: italic;
}
}
 
.archivio-editoriale .idx-eti {
/* === Indice editoriale stretto === */
margin-bottom: .2rem;
/* Voci numerate automaticamente (01, 02…), separate dallo spazio e da una
font-size: .98rem;
  hairline, non da scatole. Ritmo compatto. */
.archivio-editoriale .indice-editoriale {
counter-reset: voce;
display: grid;
gap: 0;
margin-top: .5rem;
}
.archivio-editoriale .voce {
display: grid;
grid-template-columns: 2.6rem minmax( 0, 1fr );
gap: 1rem;
align-items: baseline;
padding: .85rem 0;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
}
.archivio-editoriale .voce:first-child {
border-top: 0;
padding-top: .2rem;
}
.archivio-editoriale .voce::before {
counter-increment: voce;
content: counter( voce, decimal-leading-zero );
color: var( --color-base--subtle, #b8b8b8 );
font-size: .8rem;
font-weight: 500;
letter-spacing: .03em;
}
.archivio-editoriale .eti {
font-size: 1.05rem;
font-weight: 600;
font-weight: 600;
margin-bottom: .12rem;
color: #ffffff;
}
}
.archivio-editoriale .voci {
.archivio-editoriale .idx-voci {
font-size: .9rem;
line-height: 1.5;
color: var( --color-base--subtle, #b8b8b8 );
color: var( --color-base--subtle, #b8b8b8 );
line-height: 1.55;
font-size: .98rem;
}
}
.archivio-editoriale .voci 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 .voci a:hover {
.archivio-editoriale .idx-voci a:hover {
text-decoration: underline;
text-decoration: underline;
}
}


@media ( max-width: 720px ) {
/* Sotto i 900px: indice sotto l'articolo */
.archivio-editoriale .metriche {
@media ( max-width: 900px ) {
gap: 1.4rem 2rem;
.archivio-editoriale .art-layout {
}
grid-template-columns: 1fr;
.archivio-editoriale .metrica-num {
gap: 2.5rem;
font-size: 1.75rem;
}
.archivio-editoriale .voce {
grid-template-columns: 2rem minmax( 0, 1fr );
gap: .8rem;
}
}
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */
/* === [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 === */

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