MediaWiki:Common.css/src/template/infocard.scss

/********* [[Template:Infocard]] *********/

.infocard {
	box-sizing: border-box;
	*{
		box-sizing: border-box;
	}
	@mixin narrow-mode {
		// for narrow screens
		@media screen and (max-width: 450px) {
			@content;
		}
	}

	--infocard-padding: 1em;
	--infocard-padding-negative: calc(var(--infocard-padding) * -1);
	--infocard-padding-half: calc(var(--infocard-padding) * 0.5);
	--infocard-padding-half-negative: calc(var(--infocard-padding-negative) * 0.5);
	--infocard-icon-right-offset: -2em;
	--infocard-box-title-font-size: 1.5em;
	--infocard-box-title-font-weight: lighter;
	--infocard-main-heading-font-size: 2em;
	padding: var(--infocard-padding);
	border: 1px solid var(--theme-box-border-color);
	border-radius: 6px;
	width: max-content;
	max-width: 100%;
	overflow: hidden;
	min-width: 300px;
	position: relative;
	background: var(--theme-content-background);

	& + & {
		/* gap between subsequent infocard elements */
		margin-top: 0.5em;
	}

	&.compact {
		--infocard-padding: 0.5em;
		--infocard-icon-right-offset: -2.5em;
		--infocard-box-title-font-size: 100%;
		--infocard-box-title-font-weight: bold;
		--infocard-main-heading-font-size: 1.25em;
		min-width: 240px;
	}

	> .intro {
		margin: 1em 0;
		min-width: 200px;
	}

	@media screen and (max-width: 720px) {
		.outro .content {
			overflow-x: auto;
		}
	}

	.heading {
		margin: 1em 0 var(--infocard-padding-half);
		font-weight: bold;
	}

	.main-heading {
		border-right: 3em solid transparent;
		position: relative;
		line-height: 1;
		padding-left: var(--infocard-padding);
		margin: var(--infocard-padding) var(--infocard-padding-negative);
		background: var(--theme-highlight-background);

		@include narrow-mode {
			padding-right: 0 !important;
		}

		.hgroup {
			display: inline-block;
			margin-left: 4px;
			padding: 0 var(--infocard-padding);
			background: var(--theme-content-background);

			> .main {
				font-size: var(--infocard-main-heading-font-size);
				color: var(--theme-text-color-highlight);

				> .namenote {
					font-size: 62.5%;
					color: var(--theme-text-color-note);
				}
			}
		}

		.icon {
			position: absolute;
			right: var(--infocard-icon-right-offset);
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			align-content: center;
			justify-content: center;
			width: var(--iconsize);
			height: var(--iconsize);

			&.frame {
				border: 1px solid var(--theme-box-border-color);
				border-radius: 4px;
				background: var(--theme-page-background-color);

				&.round {
					border-radius: 100%;
				}
			}

		}
	}

	> .card {
		float: right;
		margin: -1em 1em 0.75em 0.75em;

		@include narrow-mode {
			float: none;
			margin: 0;
		}

		box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 5;

		.image {
			background: var(--theme-box-border-color);
			border-left: 1px solid var(--theme-box-border-color);
			border-right: 1px solid var(--theme-box-border-color);
			box-shadow: var(--theme-widget-shadow);

			@include narrow-mode {
				width: 100% !important;
				text-align: center;
			}
		}

		.content {
			border: 1px solid var(--theme-box-border-color);
			border-top: 0;
			background: var(--theme-content-background);
			border-radius: 0 0 4px 4px;
			padding: 0 0.75em;
			box-shadow: var(--theme-widget-shadow);

			@include narrow-mode {
				width: 100% !important;
			}

			> .intro {
				margin-top: 0.75em;
			}

			> dl {
				margin: 0.75em 0;
			}

			dt {
				font-weight: bold;
				margin-top: 0.75em;
			}

			dd {
				margin: 0;
			}

			> .outro {
				margin-bottom: 0.75em;
			}
		}
	}

	.box {
		padding: var(--infocard-padding);
		margin: 1em 0;
		background-color: var(--theme-box-background);
		border: 1px solid var(--theme-widget-border-color);
		border-radius: 4px;

		> .title {
			line-height: 1;
			display: inline-block;
			margin-left: var(--infocard-padding-negative);
			padding: 0 1em 0 var(--infocard-padding-half);
			min-width: 5em;
			border-left: var(--infocard-padding-half) solid transparent;
			border-left-color: transparent;

			> span {
				font-weight: var(--infocard-box-title-font-weight);
				font-size: var(--infocard-box-title-font-size);
			}
		}

		> .content {
			margin-top: 4px;
		}
	}

	&.biome {
		.main-heading + div {
			display: flex;
			flex-wrap: wrap;
			margin: 0 var(--infocard-padding-half-negative) var(--infocard-padding-negative);

			> .box {
				margin: 0 var(--infocard-padding-half) var(--infocard-padding);
				flex: 1 1 auto;

				&:last-child,
				&.last {
					flex: 10 10 auto;
				}

				.dotlist {
					margin-top: -2px;
					li {
						margin-top: 2px;
					}
				}
			}
		}
	}
}