Template:Welcome/styles.css

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
/* sandbox style sheet for testing */

.welcomeBox-ltr {
	direction: ltr;
}
.welcomeBox-rtl {
	direction: rtl;
}

.welcomeheader {
	font-size: 110%;
	font-weight: bold;
}

.welcomebody {
	margin: 0 0 1em;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}
.welcomebody td {
	padding: 0;
	vertical-align: top;
	border-style: solid;
	border-width: 1px;
}
.welcomebody-column-1 {
	width: 45%;
	background-color: #faf6ed;
}
.welcomebody-column-2 {
	width: 55%;
	background: #f1f5fc;
}
.welcomebody td.welcomebody-column-separator {
	padding: 0 0.5em;
	border: none;
}
.welcomebody-column-1,
.welcomebody-column-1 div {
	border-color: #fad67d;
}
.welcomebody-column-2,
.welcomebody-column-2 div {
	border-color: #abd5f5;
}

.welcome-subheader {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 0.2em 0.5em;
	font-size: 110%;
	font-weight: bold;
}
.welcomebody-column-1 .welcome-subheader {
	background-color: #faecc8;
}
.welcomebody-column-2 .welcome-subheader {
	background-color: #d0e5f5;
}
.welcome-bodytext {
	padding: 0.4em 1em 0.3em;
}
.welcome-bodytext:not(:last-child) {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

/* dark mode fixes */
html.skin-theme-clientpref-night .welcomebody-column-1 {
	background-color: #261e0b;
}
html.skin-theme-clientpref-night .welcomebody-column-2 {
	background: #091E2A;
}
html.skin-theme-clientpref-night .welcomebody-column-1,
.welcomebody-column-1 div {
	border-color: #5F4504;
}
html.skin-theme-clientpref-night .welcomebody-column-2,
.welcomebody-column-2 div {
	border-color: #0B3B60;
}
html.skin-theme-clientpref-night .welcomebody-column-1 .welcome-subheader {
	background-color: #3C2D05;
}
html.skin-theme-clientpref-night .welcomebody-column-2 .welcome-subheader {
	background-color: #123B59;
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .welcomebody-column-1 {
		background-color: #261e0b;
	}
	html.skin-theme-clientpref-os .welcomebody-column-2 {
		background: #091E2A;
	}
	html.skin-theme-clientpref-os .welcomebody-column-1,
	.welcomebody-column-1 div {
		border-color: #5F4504;
	}
	html.skin-theme-clientpref-os .welcomebody-column-2,
	.welcomebody-column-2 div {
		border-color: #0B3B60;
	}
	html.skin-theme-clientpref-os .welcomebody-column-1 .welcome-subheader {
		background-color: #3C2D05;
	}
	html.skin-theme-clientpref-os .welcomebody-column-2 .welcome-subheader {
		background-color: #123B59;
	}
}

@media screen and (max-width: 719px) {
	.welcomebody,
	.welcomebody > tbody,
	.welcomebody > tbody > tr,
	.welcomebody > tbody > tr > td {
		display: block;
	}
	.welcomebody-column-1,
	.welcomebody-column-2 {
		width: 100%;
	}
	.welcomebody td.welcomebody-column-separator {
		padding: 0.5em 0;
	}
}