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
Occhiello/titolo + pagina più larga + lead a piena larghezza
Indice a destra (griglia articolo+indice); via metriche e TOC-hide
Line 30: Line 30:
   color:inherit;
   color:inherit;
}
}
/* === [DASH-NOTOC] inizio === */
/* Sulla Dashboard l'indice "vero" è quello editoriale nella colonna centrale.
  Le intestazioni servono solo a far esistere il rail destro: nascondiamo la
  TOC automatica di Citizen nel rail (resta solo la card "Stato"), così non si
  hanno due indici. Page-scoped (due varianti per l'escaping del ":"). */
body.page-CinetecaSarda_Dashboard .citizen-toc,
body.page-CinetecaSarda-Dashboard .citizen-toc,
body.page-CinetecaSarda_Dashboard #toc,
body.page-CinetecaSarda-Dashboard #toc {
display: none !important;
}
/* === [DASH-NOTOC] fine === */


/* === [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 54: 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;
}
 
/* 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 66: Line 62:
}
}


/* Headline editoriale: titolo da articolo di prima pagina */
/* Headline da articolo di prima pagina */
.archivio-editoriale .ce-headline {
.archivio-editoriale .ce-headline {
margin: 0 0 1.3rem;
margin: 0 0 1.3rem;
max-width: 20ch;
border: 0;
border: 0;
font-size: clamp( 2.2rem, 4.4vw, 3.4rem );
font-size: clamp( 2.4rem, 4.6vw, 3.6rem );
line-height: 1.03;
line-height: 1.03;
font-weight: 700;
font-weight: 700;
Line 78: Line 73:
}
}


/* Lead: racconto d'apertura. Occupa lo spazio disponibile (niente colonnina). */
/* Lead: il racconto. Riempie la colonna dell'articolo. */
.archivio-editoriale .lead {
.archivio-editoriale .lead {
margin: 0 0 2.2rem;
margin: 0;
max-width: none;
max-width: none;
}
}
Line 97: Line 92:
}
}


/* === 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;
counter-reset: idx;
display: flex;
}
align-items: baseline;
.archivio-editoriale .art-aside-titolo {
gap: .8rem;
margin: 0 0 .4rem;
margin: 1.5rem 0 .3rem;
padding-bottom: .55rem;
padding-top: 1.1rem;
border-bottom: 1px solid var( --border-color-base, rgba( 255, 255, 255, .14 ) );
border: 0;
font-size: .76rem;
border-top: 1px solid var( --border-color-base, rgba( 255, 255, 255, .09 ) );
text-transform: uppercase;
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;
}
}
.archivio-editoriale .mw-heading2 .mw-editsection {
.archivio-editoriale .idx-eti::before {
display: none;
counter-increment: idx;
content: counter( idx, decimal-leading-zero ) "  ";
color: var( --color-base--subtle, #b8b8b8 );
font-weight: 500;
font-size: .78em;
}
}
/* Riga di link sotto ogni sezione */
.archivio-editoriale .idx-voci {
.archivio-editoriale .mw-heading2 + p {
font-size: .9rem;
margin: .1rem 0 .2rem;
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 .mw-heading2 + p a {
.archivio-editoriale .idx-voci a {
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 {
border-bottom: 0;
}
.box-stato-archivio .ce-metrica .l {
color: var( --color-base--subtle, #b8b8b8 );
}
.box-stato-archivio .ce-metrica .n {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.box-stato-archivio .ce-agg {
margin: .7rem 0 0;
font-size: .76rem;
opacity: .7;
font-style: italic;
}
}
/* === [ARCHIVIO-EDITORIALE] fine === */
/* === [ARCHIVIO-EDITORIALE] fine === */
Line 190: Line 163:
}
}


/* Più respiro: allarga la larghezza di Citizen su questa pagina (moderato,
/* Spazio per le due colonne (articolo + indice), moderato. */
  non edge-to-edge), così testo e card a destra usano davvero lo spazio. */
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda_Dashboard,
body.page-CinetecaSarda-Dashboard {
body.page-CinetecaSarda-Dashboard {
--width-layout: min( 1500px, 92vw );
--width-layout: min( 1180px, 94vw );
}
}
/* === [DASH-HERO] fine === */
/* === [DASH-HERO] fine === */

Revision as of 19:26, 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 ) );
}

/* 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: var( --color-base, #fff );
}

/* 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;
	counter-reset: idx;
}
.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;
}
.archivio-editoriale .idx-eti::before {
	counter-increment: idx;
	content: counter( idx, decimal-leading-zero ) "  ";
	color: var( --color-base--subtle, #b8b8b8 );
	font-weight: 500;
	font-size: .78em;
}
.archivio-editoriale .idx-voci {
	font-size: .9rem;
	line-height: 1.5;
	color: var( --color-base--subtle, #b8b8b8 );
}
.archivio-editoriale .idx-voci a {
	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 === */