Template:Data Table/Styles.css

/* [[Category:Template Styles]] */

.data-table__cell {
	text-align: center;
}
.data-table__cell ol {
	margin-left: 1.75rem;
	margin-top: 0;
}

.data-table__cell-content--amounts,
.data-table__cell-content--description,
.data-table__cell-content--icon-list,
.data-table__cell-content--list,
.data-table__cell-content--link-list,
.data-table__cell-content--plural-list,
.data-table__cell-content--term-list,
.data-table__cell-content--transcript {
	text-align: left;
}
.data-table__cell-content--defense,
.data-table__cell-content--effect,
.data-table__cell-content--mon,
.data-table__cell-content--rupees {
	text-align: left;
}
.data-table__cell-content--id,
.data-table__cell-content--image {
	font-weight: bold;
}
.data-table__cell-content--nowrap {
	white-space: nowrap;
}
.data-table__cell-content--not-applicable .tooltip {
	font-weight: bold;
	text-decoration: none;
}
.data-table__cell-content--transcript {
	font-style: italic;
}
.data-table__cell-content--transcript .tab {
	font-style: normal;
}

.data-table__cell .zw-tabs {
	display: block; /* zw-tabs is display: table by default but that causes improper alignment when used in data tables */
}

/* Mobile */
.data-table__separator {
	height: 1.5rem;
}
.data-table--mobile .data-table__cell {
	padding: 0.5rem;
	text-align: left;
}
.data-table--mobile .data-table__row-header {
	padding-left: 1rem;
	padding-right: 1rem;
	width: 1%;
}
.data-table--mobile .data-table__cell-content--image {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Forces the mobile version of the table to appear for all screen widths when viewing the wiki on the mobile skin, overriding the size-medium-down class.
 * On the desktop skin, two tables are loaded. The desktop version is hidden on small screen widths and the mobile one is hidden on large ones.
 * On mobile we load only the mobile version to reduce loading time and avoid eating up users' cell data unnecessarily. This means we have to override the above hiding behavior.
 * All of this is because we **can't** assume that all users using the mobile skin have small screens, and all desktop skin users have big screens.
 * That is, we have to account for situations like users shrinking their windows, or using the mobile skin on a larger tablet. */
body.mw-mf .data-table--mobile {
    display: block
}