MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:10, 11 June 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:98%;
	margin:auto;
	overflow-x:auto;
}

.numtable {
	font-size:0.8rem;
	width:98%;
	margin:auto;
	text-align:center;
	overflow-x:auto;
}

.itemtable {
	width:98%;
	margin:auto;
	overflow-x: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 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%;
}

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

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

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

.iconlist div {
	flex: 0 0 250px;
}

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

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

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

.mlistcol .left {
	flex: 0 0 30%;
}

.mlistcol .right {
	flex: 0 0 70%;
}

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

.fivecol div {
	flex: 0 0 20%;
}

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

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

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

.thumbpick div {
	flex: 0 0 210px;
	text-align:center;
	margin: 10px;
}

@media screen and (orientation:portrait) {
	.threecol div {
		flex: 1 0 max-content;
	}
	
	.threecen div {
		flex: 0 0 100%;
	}
	
	.twocol div {
		flex: 0 0 100%;
	}
	
	.fivecol div {
		flex: 0 0 50%;
	}
	
	.mlistcol .left, .mlistcol .right {
		flex: 0 0 100%;
	}

	.thumbpick div {
		flex: 0 0 150px;
		text-align:center;
	}
}

/* Horizontal Tree Stuff */

.hortree {
	white-space: nowrap;
	overflow-x:scroll;
	font-size: 12px;
}

.horrow {
	display: flex;
	white-space: nowrap;
	flex-wrap: nowrap;
	align-content: flex-start;
	text-align: center;
	margin-bottom: 5px;
}

.horspace {
	flex-basis:160px;
	min-width:160px;
}

.horitem {
	background-color:white;
	flex-basis:160px;
	border: 1px solid gray;
	display:flex;
	flex-direction:column;
	align-items: center;
	box-sizing: border-box;
	min-width:160px;
}

.hortree div p {
	align-content:center;
}