MediaWiki:Common.less/wikitables.less

:root {
	--wikitable-header-bg: #eee;
	--wikitable-border: @BODY_BORDER;
	--wikitable-header-border: @BODY_HEADER_BORDER;
	--wikitable-bg: @BODY_LIGHT;
	--wikitable-bg-lighter: #f7f7f7; // darken(@wikitable-bg, 3%); Used on hover effect
	--wikitable-color: @TEXT_COLOR;
	--wikitable-header-color: @TEXT_COLOR;

	--table-na-background: #f9f9f9;
	--table-na-color: grey;
	--table-yes-background: @san-felix;
	--table-yes-color: @caper;
	--table-no-background: @apricot-peach;
	--table-no-color: @mocaccino;
	--table-maybe-background: @golden;
	--table-maybe-color: @cinnamon;
	--table-hist-background: @mystic;
	--table-hist-color: @river-bed;
	--table-hist-link-color: @shuttle-gray;
}

// Blue-ify 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);
		border-color: var(--wikitable-header-border);
		color: var(--wikitable-header-color);
	}

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

	// i forget what this is for
    .header-top {
        background: #448fba;
    }
}

.table-bg-color(@cell-background, @cell-text, @cell-link) {
    background: @cell-background;
    color: @cell-text;

    a:not(.mw-selflink) {
        color: @cell-link;
        text-decoration: underline;
    }

}

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

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

	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: var(--wikitable-header-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 !important; // override align-x class on wikitables
    //cursor: default;
    //.user-select( none );

    // for [[MediaWiki:Gadget-highlightTable.js]]
    table.lighttable .highlight-over & {
        color: fade( @la-palma, 40% );
    }

    table.lighttable .highlight-on & {
        color: fade( @la-palma, 55% );
    }

}

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

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

@wikitable-background: @white;
@wikitable-header-background: @gallery;

/* --------------------------
      column and row stuff
   -------------------------- */

@table-align-list: left right center;

.table-align(@list, @i: 1) when (@i <= length(@list)) {
    @align-dir: extract(@list, @i);

	// nth td from the left is right-aligned - ths are ignored
    table.align-@{align-dir}-1 td:nth-of-type(1),
    table.align-@{align-dir}-2 td:nth-of-type(2),
    table.align-@{align-dir}-3 td:nth-of-type(3),
    table.align-@{align-dir}-4 td:nth-of-type(4),
    table.align-@{align-dir}-5 td:nth-of-type(5),
    table.align-@{align-dir}-6 td:nth-of-type(6),
    table.align-@{align-dir}-7 td:nth-of-type(7),
    table.align-@{align-dir}-8 td:nth-of-type(8),
    table.align-@{align-dir}-9 td:nth-of-type(9),
    table.align-@{align-dir}-10 td:nth-of-type(10),
    table.align-@{align-dir}-11 td:nth-of-type(11),
    table.align-@{align-dir}-12 td:nth-of-type(12),
    table.align-@{align-dir}-13 td:nth-of-type(13) {
        text-align: @align-dir;
    }

    .table-align(@list, @i + 1);
}

.table-align(@table-align-list);

/* -----------------------
      table backgrounds
   ----------------------- */

.table-bg-purple {
    .table-bg-color(@perfume, @honey-flower, @seance);
}

/* Livestream page */
.livestream-table td > .media-logo {
	filter: grayscale(0.8);
	opacity: 0.5;
}