MediaWiki:Vector-2022.css

Nota: Dopo aver salvato le preferenze, perché i cambi abbiano effetto, devi bypassare la cache del tuo browser. Mozilla / Firefox / Safari: tieni premuto Shift mentre clicchi Reload, o premi Ctrl-Shift-R (Cmd-Shift-R per Apple Mac); Google Chrome: premi Ctrl o Shift mentre clicchi F5; IE: premi Ctrl mentre clicchi Refresh, o premi Ctrl-F5; Konqueror:: clicca semplicemente il pulsante di Reload, o premi F5; se usi Opera devi cancellare completamente la chache nel menu Tools→Preferences.

	/* ============================================================
   Cathopedia — Vector 2022 customization
   ============================================================ */

/* ============================================================
   LOGO HEADER
   ============================================================ */

/* Desktop: layout verticale (logo sopra, scritte sotto, centrati) */
.mw-logo {
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 0;
	min-height: auto;
	text-align: center;
}

.mw-logo-icon {
	width: 140px !important;
	height: auto !important;
	max-height: 92px !important;
}

.mw-logo-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.mw-logo-wordmark,
.mw-logo-tagline {
	display: block;
	margin: 0 auto;
}

#mw-content-subtitle img.button, #mw-content-subtitle .btn-o {
	padding: 0 .2em;
}

.mw-portlet-skin-client-prefs-vector-feature-custom-font-size {
	display: none;
}

/* Mobile: layout Wikipedia-style, icona piccola a sinistra, wordmark inline */
@media (max-width: 640px) {
	.mw-logo {
		flex-direction: row !important;
		align-items: center !important;
		gap: 10px !important;
		padding: 4px 0 !important;
	}

	.mw-logo-icon {
		width: 60px !important;
		height: 40px !important;
		max-height: none !important;
		object-fit: contain !important;
	}

	.mw-logo-container {
		flex-direction: row !important;
		align-items: center !important;
	}

	.mw-logo-wordmark {
		width: auto !important;
		height: 22px !important;
		max-height: 22px !important;
	}

	.mw-logo-tagline {
		display: none !important;
	}
}

/* ============================================================
   PAGINA PRINCIPALE: layout mobile responsive (<= 768px)
   Su desktop tutto rimane identico.
   ============================================================ */

@media (max-width: 768px) {

	/* --- Box benvenuto: nascondi data, conteggio voci, 5 caratteristiche --- */
	.page-Cathopedia_Pagina_principale .datapaginaprincipale,
	.page-Cathopedia_Pagina_principale .conteggiopaginaprincipale {
		display: none !important;
	}

	.page-Cathopedia_Pagina_principale .caratteristichepaginaprincipale {
		display: none !important;
	}

	/* --- Titolo "Benvenuti su Cathopedia": centrato, dimensione media --- */
	.page-Cathopedia_Pagina_principale .BGYellow h1 {
		font-size: 100% !important;
		line-height: 1.3 !important;
		text-align: center !important;
	}

	.page-Cathopedia_Pagina_principale .BGYellow h1 span[style*="font-size:210%"] {
		font-size: 165% !important;
		line-height: 1.3 !important;
	}

	/* --- Riduce spazio sopra il banner Facebook (sitenotice).
	   Vector 2022 nidifica:
	     .vector-sitenotice-container > #siteNotice > #localNotice > .sitenotice > <p>
	   Annulliamo padding/margin a TUTTI i livelli, lasciando solo il padding del <p>. */
	.vector-sitenotice-container,
	.vector-sitenotice-container #siteNotice,
	.vector-sitenotice-container #localNotice,
	.vector-sitenotice-container .sitenotice {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* --- Decorazioni "ombra sfumata" (5 div per box): nascoste su mobile --- */
	.page-Cathopedia_Pagina_principale .mw-parser-output div[style*="background:#B2B2B2"],
	.page-Cathopedia_Pagina_principale .mw-parser-output div[style*="background:#C7C7C7"],
	.page-Cathopedia_Pagina_principale .mw-parser-output div[style*="background:#DFDFE0"],
	.page-Cathopedia_Pagina_principale .mw-parser-output div[style*="background:#F2F2F3"],
	.page-Cathopedia_Pagina_principale .mw-parser-output div[style*="background:#FCFCFC"] {
		display: none !important;
	}

	/* --- Riga link "Chiedi la registrazione · ...": font ridotto --- */
	.page-Cathopedia_Pagina_principale .mw-parser-output div[style*="text-align:center"][style*="background-color:#ffffff"] {
		font-size: 70% !important;
		line-height: 1.4 !important;
		padding: 0.2em 0 !important;
	}

	/* --- Tab "Rito Romano / Rito Ambrosiano": piu' stretti.
	   Common.css imposta 'padding: 3px 2em'; uso specificita' alta per battere. */
	body.skin-vector-2022 #mw-content-text #selettoreriti ul {
		padding-left: 0.3em !important;
	}

	body.skin-vector-2022 #mw-content-text #selettoreriti li.BottoneSelettoreRitoSelezionato,
	body.skin-vector-2022 #mw-content-text #selettoreriti li.BottoneSelettoreRitoNonSelezionato {
		padding: 3px 0.5em !important;
		margin-left: 1px !important;
		font-size: 95% !important;
	}

	/* --- Layout colonne: impilate, destra prima, sinistra dopo --- */
	#colonnadestra,
	#colonnasinistra {
		float: none !important;
		width: 100% !important;
		margin: 0 0 1em 0 !important;
		padding: 0 !important;
	}

	.page-Cathopedia_Pagina_principale > .mw-parser-output > div {
		display: flex;
		flex-direction: column;
	}

	#colonnadestra {
		order: 2;
	}

	#colonnasinistra {
		order: 3;
	}

	/* --- Colonna destra: nascondi "Tempo liturgico" e "Data della Pasqua" --- */
	#romano > div:nth-of-type(1),
	#romano > div:nth-of-type(3),
	#ambrosiano > div:nth-of-type(1),
	#ambrosiano > div:nth-of-type(3) {
		display: none !important;
	}

	/* --- Colonna sinistra: mostra solo 4° e 5° box (Progetto, Profili contributori) --- */
	#colonnasinistra > div {
		display: none !important;
	}

	#colonnasinistra > div:nth-of-type(4),
	#colonnasinistra > div:nth-of-type(5) {
		display: block !important;
	}

	/* --- Fix immagini float-right che strabordano su mobile --- */
	#colonnadestra figure.mw-halign-right,
	#colonnasinistra figure.mw-halign-right {
		float: none !important;
		display: block !important;
		margin: 0.5em auto !important;
		text-align: center;
	}

	/* --- Fix tabelle con larghezza fissa --- */
	#colonnadestra table,
	#colonnasinistra table {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* --- Toolbar mobile: tab namespace e dropdown strumenti
	   sulla stessa riga, allineati orizzontalmente.
	   Azzeriamo padding/margin verticali per evitare disallineamenti. --- */
	.vector-page-toolbar-container {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		min-height: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.vector-page-toolbar-container > #left-navigation,
	.vector-page-toolbar-container > #right-navigation {
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.vector-page-toolbar-container > #right-navigation {
		margin-left: auto !important;
	}

	/* Annulla padding di nav e portlet interni */
	.vector-page-toolbar-container nav,
	.vector-page-toolbar-container .mw-portlet,
	.vector-page-toolbar-container .vector-page-tools-landmark,
	.vector-page-toolbar-container .vector-dropdown {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Riduce padding sopra il toolbar se imposto da Vector 2022 */
	.vector-page-toolbar {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	table.TabellaLateralePersona, table.infobox {
		width: 100% !important;
		margin-bottom: 1em !important;
		display: table;
	}



	#mw-content-subtitle {
		line-height: 2.5em;
	}

	#mw-content-subtitle img.button, #mw-content-subtitle .btn-o {
		padding: 0 .4em;
	}
}