Template:Static row numbers

/**

* Add a static (unsortable) column of numbers to the left of a table.
*
* Table classes:
* - static-row-numbers: Display column of right-aligned numbers.
* - static-row-numbers-center: Center align numbers.
* - static-row-numbers-left: Left align numbers.
* - static-row-header-text: Display "No." text column label.
* - static-row-header-hash: Display hash ("#") symbol column label.
*
* Row classes:
* - static-row-header: Disable number and borders.
* - static-row-numbers-norank: Disable number and keep borders.
*
* Table data attributes:
* - data-srn-limit="#": (#=10) Remove numbers beyond row #.
*
* Tested:
* - Windows 10: (all skins) Chrome, Firefox, Edge.
* - Android Galaxy S21 (MinervaNeue): Chrome, Firefox.
* - Wikipedia Android app.
* - Print.
* - No JavaScript.
* - 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.static-row-numbers-center tr::before {

 text-align: center;

} .static-row-numbers.static-row-numbers-left tr::before {

 text-align: left;

} .static-row-numbers.wikitable tr::before {

 background-color: var(--background-color-neutral, #eaecf0);

}

/**

* Add count to all tbody rows without the "static-row-numbers-norank" or
* "static-row-header" classes. If no thead, then skip the first tbody row.
*/

.static-row-numbers thead + tbody tr:first-child:not(.static-row-header):not(.static-row-numbers-norank)::before, .static-row-numbers tbody tr:not(:first-child):not(.static-row-header):not(.static-row-numbers-norank)::before {

 counter-increment: rowNumber;
 content: counter(rowNumber);

}

/**

* Remove count on tbody rows beyond the limit.
* Note, nth-child cannot be combined with not() to exclude headers and the
* "static-row-header" and "static-row-numbers-norank" classes:
* - Table must be sortable to move headers pre-sort to thead.
* - No sorttop (static-row-header) above sortable data; moved post-sort.
* - No static-row-numbers-norank in sortable data.
*/

.static-row-numbers.sortable[data-srn-limit="10"] tbody tr:nth-child(n+11)::before {

 content: "";

}

/**

* Add column label to first row in thead or, if no thead, in tbody.
*/

.static-row-header-text.static-row-numbers thead tr:first-child::before, .static-row-header-text.static-row-numbers caption + tbody tr:first-child::before, .static-row-header-text.static-row-numbers tbody:first-child tr:first-child::before {

 content: "No.";
 font-weight: bold;

} .static-row-header-hash.static-row-numbers thead tr:first-child::before, .static-row-header-hash.static-row-numbers caption + tbody tr:first-child::before, .static-row-header-hash.static-row-numbers tbody:first-child tr:first-child::before {

 content: "#";
 font-weight: bold;

}

/**

* Add borders in numbers column.
*
* Windows Firefox tr::before doesn't inherit color, so hard set.
* Plain table borders on Timeless Template:Row hover highlight mw-datatable.
*/

/* Wikitable. */ .static-row-numbers.wikitable tr::before {

 border: 0 solid var(--border-color-base, #a2a9b1);

} .static-row-numbers.wikitable thead + tbody tr:first-child:not(.static-row-header)::before, .static-row-numbers.wikitable tbody tr:not(:first-child):not(.static-row-header)::before {

 border-width: 1px;

} body.skin-monobook .static-row-numbers.wikitable tr::before {

 border-color: #aaa;

} body.skin-timeless .static-row-numbers.wikitable tr::before {

 border-color: #c8ccd1;

}

/* Plain with border. */ table[border].static-row-numbers:not(.wikitable) tr::before {

 border: 0 inset var(--color-base, #202122);

} table[border].static-row-numbers:not(.wikitable) thead + tbody tr:first-child:not(.static-row-header)::before, table[border].static-row-numbers:not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before {

 border-width: 1px;

} /* Dark mode border colors calc differ for table and tr::before, per engine. */ html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable), html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable) tr::before, html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable) th, html.skin-theme-clientpref-night table[border].static-row-numbers:not(.wikitable) td {

 /* Accessibility: Wikipedia dark mode. */
 border-color: gray;

} @media (prefers-color-scheme: dark) {

 html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable),
 html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable) tr::before,
 html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable) th,
 html.skin-theme-clientpref-os table[border].static-row-numbers:not(.wikitable) td {
   /* Accessibility: OS dark mode, Wikidedia automatic mode. */
   border-color: gray;
 }

}

/* Plain with optional border + .mw-datatable. */ body.skin-timeless .static-row-numbers.mw-datatable:not(.wikitable) tr::before {

 border: 0 solid #c8ccd1;

} body.skin-timeless .static-row-numbers.mw-datatable:not(.wikitable) thead + tbody tr:first-child:not(.static-row-header)::before, body.skin-timeless .static-row-numbers.mw-datatable:not(.wikitable) tbody tr:not(:first-child):not(.static-row-header)::before {

 border-width: 1px;

}