MediaWiki:Common.css/src/template/infobox/item infobox.scss

/********* [[Template:Item infobox]] *********/

.item.infobox {
	width: 21em;

	.images {
		min-height: 50px;

		.auto, .stack {
			position: absolute;
			right: 3px;
		}

		.auto {
			top: 3px;
		}

		.stack {
			bottom: 3px;
		}

		ul.infobox-inline > li {
			display: inline-block;
			padding: 0 8px 0 9px;
			margin: 2px auto;
			position: relative;
			vertical-align: middle;
			line-height: 2px;

			&::before {
				content: "";
				display: block;
				width: 1px;
				background: var(--theme-box-border-color);
				height: 80%;
				position: absolute;
				left: 0;
				top: 10%;
			}

			&:first-child {
				padding: 0 8px;

				&::before {
					display: none;
				}
			}
		}

		ul.infobox-block > li {
			display: block;
			padding: 13px 0 0 0;
			margin: auto;
			position: relative;

			&::before {
				content: "";
				display: block;
				height: 1px;
				background: var(--theme-box-border-color);
				width: 80%;
				position: absolute;
				left: 10%;
				top: 6px;
			}

			&:first-child {
				padding-top: 0;

				&::before {
					display: none;
				}
			}
		}

		hr {
			background-color: var(--theme-box-border-color);
			margin: 0.5em 0;
		}
	}

	.section {
		overflow: hidden;

		&.projectile, &.mount {
			text-align: center;

			.name {
				font-size: 10.5px;
				margin-right: 0.5em;
				margin-left: 0.5em;
				margin-bottom: 0.25em;
			}

			.image {
				margin: 0.25em 0.5em 0.5em;
			}
		}

		&.projectile {
			img {
				max-width: 100%;
				height: auto;
			}

			.name {
				margin-top: 0.25em;
			}

			ul {
				margin-right: 0.5em;
				margin-left: 0.5em;

				&.infobox-inline li {
					display: inline-block;
					vertical-align: middle;
				}
			}
		}

		&.drop {
			table {
				/* drop info section in item infobox */
				margin-top: 6px;
				margin-bottom: 6px;
			}

			.headerSort * {
				/* Overwrite the background:inherit; from the generic ".infobox *"
				 * rule for the contents of the sortable column headers */
				background-image: unset;
			}

			td {
				border-top: 1px solid var(--theme-box-border-color);

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

			th {
				// background-color: var(--theme-accent-color);
				// color: var(--theme-accent-label-color);
				// border-bottom: 1px var(--theme-border-color) solid;
				// border-right: 0;
				// padding: 2px 5px;

				&:first-child.headerSort {
					padding-left: 21px;
					background-position-x: left;
				}

				&:nth-child(2).headerSort {
					padding-left: 21px;
					text-align: left;
					background-position-x: left;
				}

				&:last-child.headerSort {
					padding-right: 21px;
				}
			}

			th, td {
				&:first-child {
					text-align: left;
					width: 0;
				}

				&:nth-child(2) {
					text-align: center;
					width: 0;
					min-width: 3em;
				}

				&:last-child {
					text-align: right;
					width: 0;
					min-width: 4em;
				}
			}

			.entity-name {
				display: flex;
				align-items: center;
			}

			.entity-img img, .entity-name img {
				width: auto;
				height: auto;
				max-width: 90px;
				max-height: 90px;
			}

			.nodrop-note {
				text-align: center;
				padding-top: 6px;
			}

			> .mw-collapsible-toggle {
				background-color: unset;
				margin-right: 3px;

				&: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;
				}

				&.mw-collapsible-toggle-collapsed:before {
					border-left: 0;
					border-top: 0;
					border-right: 2px solid var(--theme-link-color);
					border-bottom: 2px solid var(--theme-link-color);
					top: -2px;
				}

				&:after {
					content: "";
				}
			}
		}
	}

	ul.toolpower {
		padding: 6px 0;
		cursor: help;

		li {
			display: inline-block;
			padding: 0 0.5em;

			> img {
				width: 16px;
				height: 16px;
				object-fit: cover;
				object-position: 0 0;
				filter: var(--ooui--icon-normal-filter);
			}
		}

		.zero {
			opacity: 0.5;
		}
	}

	td.tvm {
		/* ammo pages: Total Velocity Multiplier line */
		font-weight: bold;
		padding-left: 5px
	}

	th.tvm, td.tvm {
		border-color: var(--theme-box-border-color);
		border-style: solid;
		border-width: 0;
		border-top-width: 1px;
		border-bottom-width: 1px;
	}
}

.small-bold {
	/* Styling for damagetype and width/height. Use time and knockback use other
	 * classes (.usetime, .knockback) but those have the same styling. */
	font-size: 10.5px;
	font-weight: bold;
}