Template:Static row numbers/styles.css
/* {{pp-template}} */
/**
* Add a static (unsortable) column of numbers to the left of a table.
* Optionally disable numbers on specific rows for headers (no borders) or data
* (borders). Optionally display column header text: "No." or hash ("#").
*
* Tested:
* - Windows 10: Chrome, Edge, and Firefox (all skins).
* - Android Galaxy S21: Chrome, Firefox (MinervaNeue skin).
* - Wikipedia Android app.
* - Sticky gadget in Windows browsers (default skin).
* - Dark Reader browser extention in Windows browsers (default skin).
*
* Notes:
* - Sortable moves to thead any header rows and (after sort) sorttop rows.
* - Sticky gadget (.mw-sticky-header) moves to thead any wikitable header rows.
*/
.static-row-numbers {
counter-reset: rowNumber;
}
.static-row-numbers tr::before {
content: "";
display: table-cell;
padding-right: 0.5em;
padding-left: 0.5em;
text-align: right;
vertical-align: inherit;
}
.static-row-numbers.wikitable tr::before {
background-color: #eaecf0;
}
/**
* Add count to all tbody rows except for two classes. If no thead, skip the
* first tbody row which may not have one of the two classes:
*/
.static-row-numbers.sortable tbody tr:not(.static-row-header):not(.static-row-numbers-norank)::before,
.static-row-numbers.mw-sticky-header tbody tr:not(.static-row-header):not(.static-row-numbers-norank)::before,
.static-row-numbers:not(.sortable) tbody tr:not(:first-child):not(.static-row-header):not(.static-row-numbers-norank)::before {
counter-increment: rowNumber;
content: counter(rowNumber);
}
/**
* Add column label to first row in thead or, if no thead, in tbody:
*/
.static-row-header-text.static-row-numbers thead tr:first-of-type::before,
.static-row-header-text.static-row-numbers.wikitable:not(.sortable):not(.mw-sticky-header) tbody tr:first-of-type::before,
.static-row-header-text.static-row-numbers:not(.wikitable):not(.sortable) tbody tr:first-of-type::before {
content: "No.";
font-weight: bold;
}
.static-row-header-hash.static-row-numbers thead tr:first-of-type::before,
.static-row-header-hash.static-row-numbers.wikitable:not(.sortable):not(.mw-sticky-header) tbody tr:first-of-type::before,
.static-row-header-hash.static-row-numbers:not(.wikitable):not(.sortable) tbody tr:first-of-type::before {
content: "#";
font-weight: bold;
}
/**
* Add borders in numbers column.
*
* Selectors with "body" need them.
* Windows Firefox tr::before doesn't inherit colors, so hard set.
* Plain table borders on Timeless {{row hover highlight}} mw-datatable.
*/
/* Wikitable. */
.static-row-numbers.wikitable.sortable tbody tr:not(.static-row-header)::before,
.static-row-numbers.wikitable.mw-sticky-header tbody tr:not(.static-row-header)::before,
.static-row-numbers.wikitable:not(.sortable):not(.mw-sticky-header) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px solid #a2a9b1;
}
body.skin-monobook .static-row-numbers.wikitable.sortable tbody tr:not(.static-row-header)::before,
body.skin-monobook .static-row-numbers.wikitable.mw-sticky-header tbody tr:not(.static-row-header)::before,
body.skin-monobook .static-row-numbers.wikitable:not(.sortable):not(.mw-sticky-header) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px solid #aaaaaa;
}
body.skin-timeless .static-row-numbers.wikitable.sortable tbody tr:not(.static-row-header)::before,
body.skin-timeless .static-row-numbers.wikitable.mw-sticky-header tbody tr:not(.static-row-header)::before,
body.skin-timeless .static-row-numbers.wikitable:not(.sortable):not(.mw-sticky-header) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px solid #c8ccd1;
}
body.skin-minerva .static-row-numbers.wikitable.sortable tbody tr:not(.static-row-header)::before,
body.skin-minerva .static-row-numbers.wikitable.mw-sticky-header tbody tr:not(.static-row-header)::before,
body.skin-minerva .static-row-numbers.wikitable:not(.sortable):not(.mw-sticky-header) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px solid rgba(84,89,93,0.3);
}
/* Plain with border. */
table[border].static-row-numbers.sortable:not(.wikitable) tbody tr:not(.static-row-header)::before,
table[border].static-row-numbers.mw-sticky-header:not(.wikitable) tbody tr:not(.static-row-header)::before,
table[border].static-row-numbers:not(.sortable):not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px inset #202122;
}
body.skin-monobook table[border].static-row-numbers.sortable:not(.wikitable) tbody tr:not(.static-row-header)::before,
body.skin-monobook table[border].static-row-numbers.mw-sticky-header:not(.wikitable) tbody tr:not(.static-row-header)::before,
body.skin-monobook table[border].static-row-numbers:not(.sortable):not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before,
body.skin-timeless table[border].static-row-numbers.sortable:not(.wikitable):not(.mw-datatable) tbody tr:not(.static-row-header)::before,
body.skin-timeless table[border].static-row-numbers.mw-sticky-header:not(.wikitable):not(.mw-datatable) tbody tr:not(.static-row-header)::before,
body.skin-timeless table[border].static-row-numbers:not(.sortable):not(.wikitable):not(.mw-datatable) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px inset #000000;
}
body.skin-minerva table[border].static-row-numbers.sortable:not(.wikitable) tbody tr:not(.static-row-header)::before,
body.skin-minerva table[border].static-row-numbers.mw-sticky-header:not(.wikitable) tbody tr:not(.static-row-header)::before,
body.skin-minerva table[border].static-row-numbers:not(.sortable):not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px inset gray;
}
/* Plain + .mw-datatable, optional border. */
body.skin-timeless .static-row-numbers.mw-datatable.sortable:not(.wikitable) tbody tr:not(.static-row-header)::before,
body.skin-timeless .static-row-numbers.mw-datatable.mw-sticky-header:not(.wikitable) tbody tr:not(.static-row-header)::before,
body.skin-timeless .static-row-numbers.mw-datatable:not(.sortable):not(.mw-sticky-header):not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before {
border: 1px solid #c8ccd1;
}
/* Minerva mobile */
@media all and (max-width: 720px) {
/* Wikitable. */
body.skin-minerva .static-row-numbers.wikitable tr::before {
border-left: 1px solid rgba(84,89,93,0.3);
}
body.skin-minerva .static-row-numbers.wikitable thead tr:first-child::before,
body.skin-minerva .static-row-numbers.wikitable:not(.sortable):not(.mw-sticky-header) tbody tr:first-child::before {
border-top: 1px solid rgba(84,89,93,0.3);
}
body.skin-minerva .static-row-numbers.wikitable tbody tr:last-child::before,
body.skin-minerva .static-row-numbers.wikitable tfoot tr:last-child::before {
border-bottom: 1px solid rgba(84,89,93,0.3);
}
/* Plain with border. */
body.skin-minerva table[border].static-row-numbers:not(.wikitable) tr::before {
border-left: 1px solid gray;
}
body.skin-minerva table[border].static-row-numbers:not(.wikitable) thead tr:first-child::before,
body.skin-minerva table[border].static-row-numbers:not(.wikitable):not(.sortable):not(.mw-sticky-header) tbody tr:first-child::before {
border-top: 1px solid gray;
}
body.skin-minerva table[border].static-row-numbers:not(.wikitable) tbody tr:last-child::before,
body.skin-minerva table[border].static-row-numbers:not(.wikitable) tfoot tr:last-child::before {
border-bottom: 1px solid gray;
}
}