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

From Terraria Wiki
Jump to navigation Jump to search

This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.

/********* [[Template:Drop infobox]] *********/

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

	table {
		margin-top: 6px;
		margin-bottom: 6px;
	}

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

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

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

	thead > tr {
		/* This should actually be part of the following ".drop.infobox th" rule,
		 * but that would overwrite the background-image rule for "th.headerSort" from
		 * jquery-tablesorter, which displays the arrows for sorting. */
		background: var(--modetabs-background);
	}

	th {
		/* background: var(--modetabs-background); */
		/* see note above */
		color: var(--modetabs-text-color);
		border-bottom: 1px var(--modetabs-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;
		}
	}

	.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: "";
		}
	}
}