MediaWiki:Common.css/src/content/table.terraria.scss

@use "../lib";
/*** "terraria"-classed tables ***/

table.terraria {
	$border-radius: 3px;
	$padding: 3px;
	/* we don't want the bottom borders of <h2>s to be visible through floated tables  */
	background: var(--theme-background);
	border: 1px solid var(--theme-box-border-color);
	margin: 0;
	padding: $padding;
	border-spacing: 0;
	border-radius: $border-radius; /* max: padding + table.border-width + td.border-width */
	th,	td {
		border-style: solid;
		border-width: 1px;
		border-color: var(--theme-background);
	}
	th {
		background: var(--theme-heading-background);
		text-align: center;
	}

	&::before{
		/* cover those unwanted border lines */
		@include lib.pseudo-block;
		position: absolute;
		border: 2px solid var(--theme-background); //chrome and firefox render the border of cells in slightly different positions
		top: $padding;
		bottom: $padding;
		left: $padding;
		right: $padding;
	}

	caption {
		/* setting a border on a <table> element (like we do with "table.terraria"
		 * above) will not include its <caption> element, so we need to set an own
		 * border on the <caption> */
		font-weight: bold;
		font-size: var(--font-size-l);
		line-height: var(--line-height-l);
		background: linear-gradient(to right, var(--theme-background), var(--theme-background) 4px, transparent 4px),
		            linear-gradient(to left, var(--theme-background), var(--theme-background) 4px, transparent 4px),
					linear-gradient(to bottom, var(--theme-background), var(--theme-background) 4px, transparent 4px),
					linear-gradient(to top, var(--theme-background), var(--theme-background) 4px, var(--theme-heading-background) 4px),
					var(--theme-background);
		border-radius: $border-radius $border-radius 0 0;
		border: 1px solid var(--theme-box-border-color);
		border-bottom: 0;
		padding: 7px 10px; /* effectively: 3px 6px */
		margin-bottom: -5px;
		position: relative;
	}

	&.plaincaption caption, caption.plaincaption, caption.plain {
		background: none;
		border: 0;
		box-shadow: none;
		margin-bottom: auto;
		&::after{
			/* in .plaincaption tables, the "table.terraria::before" rule (see above)
			 * will make two 1px gaps on the top table border, so fill them */
			@include lib.pseudo-block;
			position: absolute;
			height: 1px;
			background: var(--theme-box-border-color);
			bottom: -1px;
			left: 4px;
			right: 4px;
			z-index: 1;
		}
	}

	&.lined {
		td {
			border-bottom-color: var(--theme-box-border-color);
		}
	}

	&.cellborder, &.cell-border, &.border {
		border-collapse: separate;
		td {
			border-left-color: var(--theme-box-border-color);
			border-bottom-color: var(--theme-box-border-color);
		}
	}

	td {
		&.cellborder-left {
			border-left: 1px solid var(--theme-box-border-color);
		}

		&.cellborder-right {
			border-right: 1px solid var(--theme-box-border-color);
		}
	}

	&.mw-collapsed {
		min-height: unset; /* override "min-height:1.5em" from ".terraria" rule */

		caption {
			+ tbody::after,
			+ thead + tbody::after {
				/* cover up the entire border of the table body (all the rows are invisible,
				 * but the border is around the <table> element, so it's still visible) */
				//@include cover-tbody-border(7px);
			}

			&.plaincaption + tbody::after,
			&.plaincaption + thead + tbody::after {
				/* plaincaption leaves a bit more space to be covered up */
				height: 12px;
			}
		}
	}
	
	.terraria + & {
		/* some space between subsequent tables */
		margin-top: var(--layout-gap);
	}
}

.terraria.lined.sortable.jquery-tablesorter {
	width: auto;
}