Template:Data Table/Styles.css
Jump to navigation
Jump to search
/* [[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
}