MediaWiki:Common.css: Difference between revisions

Revision as of 00:55, 13 May 2024

/* CSS placed here will be applied to all skins */
.center {
	text-align:center;
	margin:auto;
}

.compact {
	padding:0px;
}

.italic {
	font-style:italic;
}

.nodesktop {
    display: none;
}

.wide {
	white-space:nowrap;
	width:99%;
	margin:auto;
}

.nowrap {
	white-space:nowrap;
}

.float {
	float:left;
}

.notice {
	background-color:#FFDD0040;
}

.warning {
	background-color:#FF001040;
}

.important {
	background-color:#00FF0040;
}

.nav-center-top {
	width: fit-content;
	margin: auto;
	font-weight: bold;
	background-color: #00000033;
	border-radius: 5px;
	padding: 0px 15px;
	font-size: 22px;
}

.nav-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.nav-center p {
	background-color: #F8F9FA;
	border-bottom: 4px solid #C8CCD1;
	padding: 5px 15px;
	text-wrap: nowrap;
	margin: 0px;
	flex-grow: 1;
	flex-shrink: 0;
}

.nav-center p:hover {
	background-color: #D7DDE3;
	border-bottom: 4px solid #5D7DA4;
}

@media screen and (orientation:landscape) {
	.nav-center {
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	
	.nav-center p {
		flex-grow: 0;
	}
	.wide {
		width:100%;
	}
}

.mhnow-craftflex {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:90%;
	margin: auto;
}

.mhnow-craftflex .content-table-wrapper {
	flex-grow: 1;
}

.mhnow-carveflex {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	width:90%;
	margin: auto;
}

.mhnow-carveflex .content-table-wrapper {
	flex-grow: 1;
}

.mhnow-itemlistflex {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:90%;
	margin: auto;
}

.mhnow-itemlistflex .mhnow-itemtable {
	flex-grow: 1;
	flex-basis:50%;
}

.mhnow-rare1 {
	background-color: #92ABAB;
	color: white;
	font-weight: bold;
}

.mhnow-rare2 {
	background-color: #49B955;
	color: white;
	font-weight: bold;
}

.mhnow-rare3 {
	background-color: #4D8BCC;
	color: white;
	font-weight: bold;
}

.mhnow-rare4 {
	background-color: #C36AE2;
	color: white;
	font-weight: bold;
}

.mhnow-rare5 {
	background-color: #F1B83B;
	color: white;
	font-weight: bold;
}

.mhnow-rare6, .mhnow-rare7, .mhnow-rare8, .mhnow-rare9, .mhnow-rare10 {
	background-color: #FC6A6A;
	color: white;
	font-weight: bold;
}

.mw-collapsible .mw-collapsible-toggle {
    float:right;
    font-weight:bold;
    font-size:1.15rem;
}

/* Flex styles */
.threecol {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}

.threecol div {
	flex: 0 0 33%;
}

.twocol {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}

.twocol div {
	flex: 0 0 50%;
}

.iconpick {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.iconpick div {
	flex: 0 0 120px;
	text-align:center;
}

@media screen and (orientation:portrait) {
	.threecol div {
		flex: 0 0 100%;
	}
	
	.twocol div {
		flex: 0 0 100%;
	}
	
	.iconpick div {
		flex: 0 0 33%;
	}
}