MediaWiki:Common.css/src/page/Terraria Wiki.scss

/********* [[Terraria Wiki]] *********/

/* Wiki main page.
 * The responsive layout relies on [[MediaWiki:Common.js]] to adapt to different skins. */

#box-wikiheader,
#box-game,
#box-news,
#box-items,
#box-biomes,
#box-mechanics,
#box-npcs,
#box-bosses,
#box-events,
#box-software,
#box-wiki {
	border: 1px solid;
	border-color: var(--theme-widget-border-color);
	border-radius: 8px;
}

body.rootpage-Terraria_Wiki {
	&.action-view {
		h1.firstHeading,
		.mw-body .mw-indicators,
		#mw-content-text::before {
			/* Hide page title on main page */
			display: none;
		}
	}

	#mw-indicator-translation-project {
		/* Hide the translation project flag */
		display: none;
	}

	#mainpage-wrapper {
		/* main wrapper min width */
		min-width: 300px;

		.section {
			margin: 0;

			.infocard {
				width: auto;
				margin: 2px;
			}
		}
	}

	.infocard {
		/* boxes */
		min-width: 200px;

		.outro {
			padding-top: 2px;
		}

		&.compact {
			--infocard-main-heading-font-size: 1.5em;

			.heading {
				margin-top: 0;
			}
		}
	}

	.mclist {
		column-gap: 0.5em;

		@media (max-width: 360px) {
			column-gap: 0;
		}

		ul {
			list-style: none;
			margin: 0;
		}
	}

	#box-wikiheader {
		/* header box */
		background: var(--theme-highlight-background);
		margin-bottom: 2px;
		padding: 7px;
		position: relative;
		border: 1px solid;
		border-color: var(--theme-widget-border-color);

		> div {
			background: var(--theme-content-background);
			width: 100%;

			> div {
				margin: auto;
				padding: 8px 5px;
			}
		}

		&-toggle-link {
			position: absolute;
			bottom: 7px;
			left: 50%;
			line-height: 1;
			cursor: pointer;
			font-size: 10px;
			display: none;
			width: 16em;
			margin-left: -8em;
			text-align: center;

			span {
				display: none;
				width: 6em;
				text-align: center;
				padding: 3px 0;

				&:first-child::before {
					content: "";
					vertical-align: middle;
					display: inline-block;
					width: 4px;
					height: 4px;
					transform: rotate(45deg);
					position: relative;
					left: -3px;
					border-left: 0;
					border-top: 0;
					border-right: 2px solid var(--theme-link-color);
					border-bottom: 2px solid var(--theme-link-color);
					top: -2px;
				}

				&:last-child::before {
					content: "";
					vertical-align: middle;
					display: inline-block;
					width: 4px;
					height: 4px;
					transform: rotate(45deg);
					position: relative;
					left: -3px;
					border-left: 2px solid var(--theme-link-color);
					border-top: 2px solid var(--theme-link-color);
					border-right: 0;
					border-bottom: 0;
					top: 1px;
				}
			}
		}

		.main-title {
			flex: 1 1 404px;
			text-align: center;
			position: relative;
			//z-index: 10;
			margin: 3px 0;
			font-size: 12px;

			> span {
				font-size: 200%;
				line-height: 1;
				margin-bottom: 4px;
				color: var(--theme-text-color-highlight);

				> span {
					display: inline-block;
				}

				+ div {
					margin: auto 0.25em;
				}
			}

			.statistics {
				margin: 0.5em auto;
			}
		}

		.related-info {
			flex: 1 1 1230px;
			position: relative;
			//z-index: 100;
			/*background: var(--theme-page-background-color);*/
			overflow: hidden;
			margin: 2px 0;

			.ii {
				margin: 5px 1em;
				text-align: center;

				li {
					margin: 0;
				}
			}
		}
	}

	#latest-version {
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 0.5em 0;
		font-size: 12px;

		* {
			vertical-align: middle;
		}

		a {
			&:hover {
				text-decoration: none;
			}

			&.external {
				padding: 0;
				background: none;
				color: var(--theme-link-color);
			}
		}

		ul {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin: 0 2px;

			li {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: auto 4px;

				> div {
					margin: auto auto auto 3px;
					text-align: left;

					> * {
						display: block;
					}

					&.pic > * {
						display: inline;
					}

					> span {
						font-size: 9px;
					}

					> strong {
						font-size: 15px;
						padding: 2px 0;
					}

					> small {
						font-size: 9px;
						color: var(--theme-text-color-note);
					}
				}
			}

			&:first-child li:first-child {
				margin-left: auto;
			}

			&:last-child li:last-child {
				margin-right: auto;
			}
		}

		div.pic {
			text-align: center;
		}
	}

	#box-wikiheader.collapsable {
		#latest-version {
			margin: 0.25em auto 0;

			ul {
				&:first-child li:first-child {
					margin-left: 4px;
				}

				&:last-child li:last-child {
					margin-right: 4px;
				}

				li {
					margin: 0.25em 0.5em;
				}
			}
		}

		.main-title > span {
			display: block;
		}

		.related-info {
			margin: 0.25em auto 0;

			.ii {
				margin: 0.25em 1em;
			}
		}

		> div {
			padding-bottom: 15px;
		}

		#box-wikiheader-toggle-link {
			display: inline-block;

			span {
				display: inline-block;

				&:first-child {
					display: none;
				}
			}
		}

		&.collapsed {
			.related-info {
				display: none !important;
			}

			.main-title .statistics {
				display: none;
			}

			#box-wikiheader-toggle-link span {
				&:first-child {
					display: inline-block;
				}

				&:last-child {
					display: none;
				}
			}
		}
	}

	#main-section {
		.sep {
			display: none;
			width: 100%;
			height: 0;
		}

		li {
			margin-bottom: 1px;
		}
	}

	.box-row-l #main-section #sep-D {
		display: block;
	}

	.box-row-m #main-section {
		#sep-B, #sep-E {
			display: block;
		}
	}

	.box-row-s #main-section {
		#sep-B, #sep-D, #sep-F {
			display: block;
		}
	}


	#box-game {
		flex: 3 0 960px;

		.i {
			line-height: 60px;
		}

		.intro {
			margin-right: 1em;
		}

		.mclist {
			columns: 5;

			li {
				height: 60px;
			}
		}
	}

	.width-a#box-game {
		flex: 2 0 640px;

		.mclist {
			columns: 4;
		}
	}

	.width-b#box-game {
		flex: 3 0 840px;
	}

	.width-c#box-game {
		flex: 19 0 640px;

		.mclist {
			columns: 4;
			margin: auto;
		}
	}

	.width-d#box-game {
		flex: 1 1 1000px;

		.mclist {
			columns: 5;
		}
	}

	.width-e#box-game .mclist {
		columns: 4;
	}

	.width-f#box-game .mclist {
		columns: 3;
	}

	.width-g#box-game .mclist {
		columns: 2;
	}

	#box-news {
		flex: 1 0 480px;
		display: flex;
		flex-direction: column;

		.main-heading {
			flex: none;
		}

		.news ul {
			margin-top: 0;
		}

		.outro {
			flex: 1 0 auto;
			display: flex;
			flex-direction: column;
		}

		.more {
			display: block;
			font-style: italic;
			font-size: 85%;
			margin-left: 2em;
			margin-top: 0.5em;
			flex: 1 0 auto;
		}

		.links {
			margin-top: 0.25em;
			margin-bottom: 0.25em;
			text-align: center;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around; /*fallback*/
			justify-content: space-evenly;

			span {
				margin: 0.75em 0.25em 0;
				display: inline-block;
			}
		}
	}

	.width-a#box-news {
		flex: 1 0 320px;
	}

	.width-b#box-news {
		flex: 1 0 280px;
	}

	#box-items {
		flex: 2 0 auto;

		.i {
			line-height: 28px;

			> a:first-child {
				display: inline-block;
				width: 20px;
				text-align: center;
			}
		}

		.mclist {
			columns: 3;

			li {
				height: 28px;
			}
		}
	}

	.width-a#box-items .mclist {
		columns: 2;
	}

	.width-b#box-items .mclist {
		columns: 2;
	}

	.width-c#box-items .mclist {
		columns: 3;
	}

	.width-d#box-items .mclist {
		columns: 2;
	}

	.width-e#box-items {
		flex: 1 1 320px;

		.mclist {
			columns: 2;
		}
	}

	.width-f#box-items {
		flex: 1 1 720px;

		.mclist {
			columns: 4;
		}
	}

	.width-g#box-items .mclist {
		columns: 6;
	}

	.width-h#box-items .mclist {
		columns: 4;
	}

	.width-i#box-items .mclist {
		columns: 3;
	}

	.width-j#box-items .mclist {
		columns: 2;
	}

	#box-biomes {
		flex: 2 0 auto;

		.i {
			line-height: 28px;

			> a:first-child {
				display: inline-block;
				width: 22px;
				text-align: center;
			}
		}

		.mclist {
			columns: 3;

			li {
				height: 28px;
			}
		}
	}

	.width-a#box-biomes .mclist {
		columns: 3;
	}

	.width-b#box-biomes .mclist {
		columns: 2;
	}

	.width-c#box-biomes .mclist {
		columns: 3;
	}

	.width-d#box-biomes .mclist {
		columns: 2;
	}

	.width-e#box-biomes {
		flex: 1 1 430px;

		.mclist {
			columns: 2;
		}
	}

	.width-f#box-biomes {
		flex: 1 1 720px;

		.mclist {
			columns: 3;
		}
	}

	.width-g#box-biomes .mclist {
		columns: 4;
	}

	.width-h#box-biomes .mclist {
		columns: 3;
	}

	.width-i#box-biomes .mclist {
		columns: 2;
	}

	.width-j#box-biomes .mclist {
		columns: 1;
	}

	#box-mechanics {
		flex: 2 0 auto;

		.i {
			line-height: 28px;

			> a:first-child {
				display: inline-block;
				width: 20px;
				text-align: center;
			}
		}

		.mclist {
			columns: 3;

			li {
				height: 28px;
			}
		}
	}

	.width-a#box-mechanics .mclist {
		columns: 2;
	}

	.width-b#box-mechanics .mclist {
		columns: 2;
	}

	.width-c#box-mechanics {
		flex: 1 1 720px;

		.mclist {
			columns: 4;
		}
	}

	.width-d#box-mechanics .mclist {
		columns: 3;
	}

	.width-e#box-mechanics .mclist {
		columns: 2;
	}

	.width-f#box-mechanics .mclist {
		columns: 1;
	}

	#box-npcs {
		flex: 3 0 720px;

		.i {
			line-height: 32px;

			> a:first-child {
				display: inline-block;
				width: 32px;
				text-align: center;
			}
		}

		.mclist li {
			height: 32px;
		}

		.prehardmode {
			padding-right: 40px;
			flex: 1 0 auto;

			.mclist {
				columns: 3;
			}
		}

		.hardmode {
			flex: 1 0 150px;
		}
	}

	.width-a#box-npcs {
		flex: 2 0 460px;

		.prehardmode {
			padding-right: 0;

			.mclist {
				columns: 2;
			}
		}

		.hardmode {
			flex: 1 0 auto;
		}
	}

	.width-b#box-npcs {
		flex: 2 0 auto;

		.prehardmode {
			padding-right: 20px;
		}

		.hardmode {
			flex: 1 0 auto;
		}
	}

	.width-c#box-npcs {
		flex: 2 0 auto;

		.prehardmode {
			padding-right: 1em;
			flex: 2 0 auto;

			.mclist {
				columns: 2;
			}
		}

		.hardmode {
			flex: 1 0 auto;
		}
	}

	.width-d#box-npcs {
		flex: 1 1 720px;

		.prehardmode .mclist {
			columns: 3;
		}
	}

	.width-e#box-npcs {
		flex: 1 1 720px;

		.prehardmode {
			width: 100%;
			padding-right: 0;

			.mclist {
				columns: 3;
			}
		}

		.hardmode {
			width: 100%;

			.mclist {
				columns: 3;
			}
		}
	}

	.width-f#box-npcs {
		.prehardmode .mclist {
			columns: 2;
		}

		.hardmode .mclist {
			columns: 2;
		}
	}

	.width-g#box-npcs {
		.prehardmode .mclist {
			columns: 1;
		}

		.hardmode .mclist {
			columns: 1;
		}
	}

	#box-bosses {
		flex: 2 0 360px;

		.i {
			line-height: 32px;

			> a:first-child {
				display: inline-block;
				width: 24px;
				text-align: center;
			}
		}

		.mclist li {
			height: 32px;
		}

		.content > div {
			flex: 1 0 auto;
		}
	}

	.width-a#box-bosses {
		flex: 2 0 310px;
	}

	.width-b#box-bosses {
		flex: 3 0 600px;

		.mclist {
			columns: 2;
		}
	}

	.width-c#box-bosses .mclist {
		columns: 2;
		column-gap: 0.25em;
	}

	.width-d#box-bosses .mclist {
		columns: 1;
	}

	.width-e#box-bosses {
		flex: 1 1 720px;

		.mclist {
			columns: 2;
		}
	}

	.width-f#box-bosses {
		.prehardmode,
		.hardmode {
			width: 100%;
		}

		.mclist {
			columns: 3;
		}
	}

	.width-g#box-bosses .mclist {
		columns: 2;
	}

	#box-events {
		flex: 2 0 360px;

		.i {
			line-height: 32px;

			> a:first-child {
				display: inline-block;
				width: 24px;
				text-align: center;
			}
		}

		.mclist li {
			height: 32px;
		}

		.content > div {
			flex: 1 0 auto;
		}
	}

	.width-a#box-events {
		flex: 2 0 310px;
	}

	.width-b#box-events .mclist {
		columns: 2;
		column-gap: 0.25em;
	}

	.width-c#box-events .mclist {
		columns: 1;
	}

	.width-d#box-events {
		flex: 1 1 720px;

		.mclist {
			columns: 2;
		}
	}

	.width-e#box-events {
		.prehardmode,
		.hardmode {
			width: 100%;
		}

		.mclist {
			columns: 4;
		}
	}

	.width-f#box-events .mclist {
		columns: 3;
	}

	.width-g#box-events .mclist {
		columns: 2;
	}

	#sect-ext dd {
		margin-left: 1em;
	}

	#box-software {
		flex: 1 0 auto;
	}

	#box-wiki {
		flex: 3 0 auto;
	}

	.width-a#sect-ext .outro {
		display: flex;

		dl {
			flex: 1 0 auto;
		}
	}

	.width-a#box-software {
		flex-basis: 220px;

		.outro dl {
			display: inline-block;
			width: 100%;
		}
	}

	.width-a#box-wiki {
		flex-basis: 900px;

		.outro dl {
			display: inline-block;
			width: 33.33333333%;
		}
	}

	.width-b#box-wiki {
		flex-basis: 620px;

		.outro dl {
			width: 50%;
		}
	}

	.width-b#box-software {
		flex-basis: 620px;

		.outro dl {
			width: 50%;
		}
	}

	.width-c#box-software {
		flex-shrink: 1;

		.outro dl {
			width: 100%;
		}
	}

	.width-c#box-wiki {
		flex-shrink: 1;

		.outro dl {
			width: 100%;
		}
	}

	#mainpage-wrapper .footer {
		text-align: center;
		margin: 0.75em 2px 0;

		> div {
			border: 1px solid var(--theme-box-border-color);
			-moz-border-radius: 5px;
			border-radius: 5px;
			background: var(--theme-highlight-background);
			padding: 0.5em;
			max-width: 25em;
			margin: auto;
			a:hover{
				text-decoration: none;
			}
			span {
				display: inline-block;
			}
		}
	}
}