Template:Main Page Template/styles.css: Difference between revisions

Latest revision as of 06:13, 22 November 2022

/* Overall style */
.mainpage {
	max-width: 1240px;
	margin: 0 auto;
}

/* Heading */
.mainpage-heading {
	width: 100%;
	margin: 0 1em 0 0;
	border-collapse: collapse;
	border-spacing: 0;
}
.mainpage-welcome {
	padding: .5em 1.6em 1em;
}
.mainpage-welcome-sitename {
	font-size: 220%;
	color: #484848;
}
.mainpage-welcome-slogan {
	color: #666;
}
.mainpage-actions {
	white-space: nowrap;
	text-align: right;
}
.mainpage-actions ul {
	margin: 0;
	padding: 0;
}
.mainpage-actions li {
	display: inline-block;
	margin: 0;
	padding: .5em;
	font-weight: bold;
}
@media screen and (max-width: 599px) {
	.mainpage-heading,
	.mainpage-heading tbody,
	.mainpage-heading tr,
	.mainpage-heading td {
		display: block;
	}
	.mainpage-heading td {
		padding-left: 1.6em;
		padding-right: 1.6em;
	}
	.mainpage-actions {
		text-align: center;
		white-space: normal;
	}
}

/* Main table */
.mainpage-maintable {
	width: 100%;
	margin: 1em 0;
	border: none;
	background: transparent;
	border-spacing: 0;
}
.mainpage-maintable td {
	padding: 0;
	vertical-align: top;
}
.mainpage-maintable td.mainpage-column-left {
	width: 60%;
	padding-right: .5em;
}
.mainpage-maintable td.mainpage-column-right {
	width: 40%;
	padding-left: .5em;
}
@media screen and (max-width: 999px) {
	.mainpage-maintable,
	.mainpage-maintable tbody,
	.mainpage-maintable tr,
	.mainpage-maintable td {
		display: block;
	}
	.mainpage-maintable td.mainpage-column-left {
		width: auto;
		padding: 0 0 .75em;
	}
	.mainpage-maintable td.mainpage-column-right {
		width: auto;
		padding: .75em 0 0;
	}
}

/* Boxes */
.mainpage-box {
	border: 1px solid;
}
.mainpage-box:not(:first-child) {
	margin-top: 1.5em;
}
.mainpage-box .mainpage-box-title {
	padding: .2em .5em;
	font-size: 125%;
	font-weight: bold;
}
.mainpage-box .mainpage-box-content {
	padding: .4em 1em .3em;
}
.mainpage-box .mainpage-box-seealso {
	clear: both;
	border-style: solid;
	border-width: 1px 0 0;
	padding-top: .4em;
	margin-top: .8em;
	text-align: end;
	font-size: 95%;
	font-weight: bold;
}
.mainpage-box-green,
.mainpage-box-green.mainpage-box-seealso {border-color: #dd5867;}
.mainpage-box-green.mainpage-box-title {background-color: #dd5867;}
.mainpage-box-yellow,
.mainpage-box-yellow .mainpage-box-seealso {border-color: #f2ca50;}
.mainpage-box-yellow .mainpage-box-title {background-color: #f2ca50;}
.mainpage-box-blue,
.mainpage-box-blue .mainpage-box-seealso { border-color: #5862dd; }
.mainpage-box-blue .mainpage-box-title { background-color: #5862dd; }
.mainpage-box-red,
.mainpage-box-red .mainpage-box-seealso { border-color: #dd5867; }
.mainpage-box-red .mainpage-box-title { background-color: #dd5867; }
/* Languages bar */
.mainpage-languages {
	padding: 2em;
	text-align: center;
}

/* keep wikitext div not exceed room available, it doesn’t have any identifier yet :( */
#mf-vid-vid > div,
/* keep Kaltura not exceed room available */
#mf-vid-vid .mediaContainer,
#mf-vid-vid .mwPlayerContainer,
#mf-vid-vid .PopUpMediaTransform,
/* keep VideoJS not exceed room available */
#mf-vid-vid .video-js,
#mf-vid-vid img {
	max-width: 100%;
}