MediaWiki:Common.less/wikitables.less: Difference between revisions

:root {
	--wikitable-header-bg: @BODY_DARK;
	--wikitable-border: @BODY_MID;
	--wikitable-bg: @BODY_LIGHT;
	--wikitable-bg-lighter: #e9e3d6; // lighten(@wikitable-bg, 10%); Used on hover effect
	--wikitable-color: @TEXT_COLOR;

	--table-na-background: fade(@white, 30);
	--table-na-color: var(--subtle-color);
	--table-yes-background: @caper;
	--table-yes-color: @san-felix;
	--table-no-background: @apricot-peach;
	--table-no-color: @mocaccino;
	--table-maybe-background: @golden;
	--table-maybe-color: @cinnamon;
}

// Brighter Shores defaults
.wikitable {
	background: var(--wikitable-bg);
	color: var(--wikitable-color);
	border-color: var(--wikitable-border);
	box-shadow: @box-shadow;

	// All cells borders
	> tr > th,
	> tr > td,
	> * > tr > th,
	> * > tr > td {
		border-color: var(--wikitable-border);
		
		// Template:NoBorder
		&.table-noborder {
			border-left-style: hidden;
			border-right-style: hidden;
			padding-left: 0;
			padding-right: 0;
		}
	}

	// All header cells bg
	> tr > th,
	> * > tr > th {
		background-color: var(--wikitable-header-bg);
		color: @white;
		border-color: var(--body-darker);
		
		a {
			color: var(--table-link-color);
		}
	}

	// Already in a box
	.tabber & {
		box-shadow: none;
	}
}

// Metadata tables, allmessages, etc
.mw_metadata {
	td,
	th {
		border-color: var(--wikitable-border);
	}

	th {
		background-color: var(--wikitable-header-bg);
		color: @white;
		border-color: var(--body-darker);
	}

	td {
		background-color: var(--wikitable-bg);
	}
}

// Special:AllPages, BlockList, etc
.mw-datatable {
	border-color: var(--wikitable-border);

	td,
	th {
		border-color: var(--wikitable-border);
	}

	// cells
	th {
		background-color: var(--wikitable-header-bg);
		color: @white;
		border-color: var(--body-darker);
		
		a {
			color: var(--table-link-color);
		}
	}

	// headers
	td {
		background-color: var(--wikitable-bg);
	}

	// on hover on both cells 
	tr:hover td {
		background-color: var(--wikitable-bg);
	}
}

// alternating colours (similar to spreadsheets)
table.alternating-rows tr:nth-child(odd),
table.alternating-cols td:nth-child(odd) {
	background: var(--wikitable-alternating-bg);
}

// Template:NA
.table-na {
	background: var(--table-na-background);
	color: var(--table-na-color);
	vertical-align: middle;
	text-align: center;
}

// Template:Yes
.table-yes {
	background: var(--table-yes-background);
	color: var(--table-yes-color);
}

.table-positive {
	background: var(--table-yes-background);
}

// Template:No
.table-no {
	background: var(--table-no-background);
	color: var(--table-no-color);
}

.table-negative {
	background: var(--table-no-background);
}

// Template:Maybe
.table-maybe {
	background: var(--table-maybe-background);
	color: var(--table-maybe-color);
}

// Special:AllMessages
#mw-allmessagestable {
	.am_actual,
	.am_default {
		background-color: var(--wikitable-bg);
	}

	.am_default:hover,
	.am_actual:hover,
	tbody:hover td {
		background-color: var(--wikitable-bg-lighter);
	}
}

// For tables within tables, to make them take up the full space of a cell
table.wikitable td.no-cell-spacing {
	padding: 0;
	height: 0; // actual height is overridden by content height, but this allows height:100% to stretch to full td height
	
	table {
		margin: -1px; // collapse borders with parent td
		width: calc(100% + 2px);
		height: calc(100% + 2px);
	}
}

// used on mmg table and similar
// to hide bullet points
.plainlist {
	ol,
	ul {
		margin: 0;
	}

	li {
		margin-bottom: 0; // might make lists slightly clamped tho
		list-style: none;
	}
}

/* table alignment help */
/* nth td from the left is right-aligned - ths are ignored */
table.align-right-1 td:nth-of-type(1),
table.align-right-2 td:nth-of-type(2),
table.align-right-3 td:nth-of-type(3),
table.align-right-4 td:nth-of-type(4),
table.align-right-5 td:nth-of-type(5),
table.align-right-6 td:nth-of-type(6),
table.align-right-7 td:nth-of-type(7),
table.align-right-8 td:nth-of-type(8),
table.align-right-9 td:nth-of-type(9),
table.align-right-10 td:nth-of-type(10),
table.align-right-11 td:nth-of-type(11),
table.align-right-12 td:nth-of-type(12),
table.align-right-13 td:nth-of-type(13),
table.align-right-14 td:nth-of-type(14),
table.align-right-15 td:nth-of-type(15),
table.align-right-16 td:nth-of-type(16),
table.align-right-17 td:nth-of-type(17),
table.align-right-18 td:nth-of-type(18),
table.align-right-19 td:nth-of-type(19),
table.align-right-20 td:nth-of-type(20) {
    text-align: right;
}

/* center */
table.align-center-1 td:nth-of-type(1),
table.align-center-2 td:nth-of-type(2),
table.align-center-3 td:nth-of-type(3),
table.align-center-4 td:nth-of-type(4),
table.align-center-5 td:nth-of-type(5),
table.align-center-6 td:nth-of-type(6),
table.align-center-7 td:nth-of-type(7),
table.align-center-8 td:nth-of-type(8),
table.align-center-9 td:nth-of-type(9),
table.align-center-10 td:nth-of-type(10),
table.align-center-11 td:nth-of-type(11),
table.align-center-12 td:nth-of-type(12),
table.align-center-13 td:nth-of-type(13),
table.align-center-14 td:nth-of-type(14),
table.align-center-15 td:nth-of-type(15),
table.align-center-16 td:nth-of-type(16),
table.align-center-17 td:nth-of-type(17),
table.align-center-18 td:nth-of-type(18),
table.align-center-19 td:nth-of-type(19),
table.align-center-20 td:nth-of-type(20) {
    text-align: center;
}

/* left */
table.align-left-1 td:nth-of-type(1),
table.align-left-2 td:nth-of-type(2),
table.align-left-3 td:nth-of-type(3),
table.align-left-4 td:nth-of-type(4),
table.align-left-5 td:nth-of-type(5),
table.align-left-6 td:nth-of-type(6),
table.align-left-7 td:nth-of-type(7),
table.align-left-8 td:nth-of-type(8),
table.align-left-9 td:nth-of-type(9),
table.align-left-10 td:nth-of-type(10),
table.align-left-11 td:nth-of-type(11),
table.align-left-12 td:nth-of-type(12),
table.align-left-13 td:nth-of-type(13),
table.align-left-14 td:nth-of-type(14),
table.align-left-15 td:nth-of-type(15),
table.align-left-16 td:nth-of-type(16),
table.align-left-17 td:nth-of-type(17),
table.align-left-18 td:nth-of-type(18),
table.align-left-19 td:nth-of-type(19),
table.align-left-20 td:nth-of-type(20) {
    text-align: left;
}