MediaWiki:Mobile.less/table.less

// Table styles must be very specific to override MediaWiki defaults
.content {
    table.wikitable.wikitable { // same class twice makes it more specific
        border: 0;
        color: @TEXT_COLOR;
    }

    table.wikitable > tbody > tr > th {
        background-color: @BODY_MID;
        border-color: @BODY_BORDER;
    }

    table.wikitable > tbody > tr > td {
        background-color: @BODY_LIGHT;
        border-color: @BODY_BORDER;
    }
}

//For DropsLine, ItemDropsLine
.table-bg-always, .table-bg-blue {
    background: #AFEEEE;
    color: #000;
}

.table-bg-common, .table-bg-green {
    background: #56E156;
    color: #000;
}

.table-bg-uncommon, .table-bg-yellow {
    background: #FFED4C;
    color: #000;
}

.table-bg-rare, .table-bg-orange {
    background: #FF863C;
    color: #000;
}

.table-bg-veryrare, .table-bg-red {
    background: #FF6262;
    color: #000;
}

.table-bg-random, .table-bg-pink {
    background: #FFA3FF;
    color: #000;
}

// For skill calculators
.table-bg-calc-grey {
	opacity: 0.6;
	background: #565E66;
}

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

// For growth stage tables, mainly used in [[Template:Growth stages]].
.growth-table {
	// default max-width/max-height; can be overwritten by inline style
	--maxwidth: 150px;
	--maxheight: 150px;
	text-align: center;
	
	img {
		// actual width/height specification
	    max-width: var(--maxwidth);
	    max-height: var(--maxheight);
	    // prevent stretching images
	    width: auto !important;
	    height: auto !important;
	}
}

// Lighttables are not currently supported on mobile. Do not show broken underpasstable
table.underpasstable {
	tbody, thead, tfoot {
		display: none;
	}
	&::before {
		content: attr('data-fallback');
		font-style: italic;
	}
}

/* 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) {
    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) {
    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) {
    text-align: left;
}