Template:Box argomento/styles.css

/* stili per [[Template:Box argomento]] */
/* [[Categoria:Fogli di stile TemplateStyles]] */

.box-argomento {
	text-align: center; 
	font-size: .9em; 
	clear: both;  
	border-radius: .5em;
	margin: 0.5em 0;
}
.box-argomento-header {
	font-weight: bolder;
	font-size: 1.2em;
	padding: 2px;
	border-radius: .5em .5em 0 0;
}
.box-argomento-content {
	padding: 2px;
	margin: 0;
}
.box-argomento-footer {
	padding: 2px;
	margin: 0;
}

/* dimensioni e margini del box su schermi grandi */

@media screen and (min-width: 700px) {
	.box-argomento {
		margin: 0.5em 20%;
	}
}

/* classi per i diversi colori */

.box-argomento-viola { /* tonalità del viola, colore di default */
	background: #f8f9fa;
	border: 1px solid #9999ff; 
}
.box-argomento-viola .box-argomento-header {
	background: #ccccff;
	border-bottom: 1px solid #9999ff;
}
.box-argomento-viola .box-argomento-footer {
	border-top: 1px dotted #9999ff;
}

.box-argomento-giallo { /* tonalità del giallo */
	background: #fff7e6;
	border: 1px solid #ffcc66; 
}
.box-argomento-giallo .box-argomento-header {
	background: #ffe6b3;
	border-bottom: 1px solid #ffcc66;
}
.box-argomento-giallo .box-argomento-footer {
	border-top: 1px dotted #ffcc66;
}

.box-argomento-wtl { /* tonalità speciale per contenuti da wtl */
	background: #fff7e6;
	border: 1px solid #bb3611;
}
.box-argomento-wtl .box-argomento-header {
	background: #f07c5c;
	border-bottom: 1px solid #bb3611;
}
.box-argomento-wtl .box-argomento-footer {
	border-top: 1px dotted #bb3611;
}

/* classi per tema scuro */

@media screen {
	html.skin-theme-clientpref-night .box-argomento-viola, html.skin-theme-clientpref-night .box-argomento-giallo, html.skin-theme-clientpref-night .box-argomento-wtl { 
		background: transparent;
		border: 1px solid #fff;
	}
	html.skin-theme-clientpref-night .box-argomento-header {
		background: #202122;
		border-bottom: 1px solid #fff;
	}
	html.skin-theme-clientpref-night .box-argomento-footer {
		border-top: 1px dotted #fff;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .box-argomento-viola, html.skin-theme-clientpref-os .box-argomento-giallo, html.skin-theme-clientpref-os .box-argomento-wtl { 
		background: transparent;
		border: 1px solid #fff;
	}
	html.skin-theme-clientpref-os .box-argomento-header {
		background: #202122;
		border-bottom: 1px solid #fff;
	}
	html.skin-theme-clientpref-os .box-argomento-footer {
		border-top: 1px dotted #fff;
	}
}