/**
* Use on large tables so column and/or row headers are sticky while scrolling.
* Especially useful on small devices (mobile). For Safari, v13+ required.
*
* .covid19-container: Div class contains all other classes and content.
*
* .scroll-container: Div class makes its content scrollable.
*
* .plainrowheadersbg: Table class makes row headers' background color plain.
*
* .sortunder: Table class moves "sortable" buttons below column header text.
* Note: If table w/ sticky column and row headers uses "sortunder", add inline
* "padding-bottom: 1em;" style to sort row's headers to fix borders missing
* between random row headers on Windows Chrome and Edge (Chromium).
*
* .sticky-row: (use once) Row class makes top-sticky while scrolling.
*
* .sticky-col1 | .sticky-col2: (use one) Table class makes first or second
* column respectively left-sticky while scrolling.
*
* .expand | .collapse: (use both) Div class for expand/collapse behavior to
* remove/add respectively height and scrollbar restrictions on
* "scroll-container" div. Add a unique "id" to the "covid19-container" div
* (e.g. "unique-id") and also add to "href" of expand link (e.g. "#unique-id").
* <div class="covid19-container" id="unique-id">
* {{navbar|Jroberson108/Template:COVID-19 pandemic data/styles.css|brackets=1|mini=1}}
* <div class="expand" title="Unrestricted table height">[[#unique-id|[expand]]]</div>
* <div class="collapse" title="Restricted table height">[[#0|[collapse]]]</div>
* <div class="scroll-container">
* <!-- table goes here -->
* </div>
* </div>
*
* Notes:
* - Expand disables sticky and scroll behaviors.
* - Firefox sticky with collapsed borders work different than other browsers.
*/
/**
* Add margin similar to "wikitable".
*/
.covid19-container {
margin-bottom: 1em;
margin-top: 1em;
}
/**
* Inherit background color from table. "plainrowheadersbg" adjusts row headers.
* "wikitable" styles other <th>.
*/
.covid19-container thead, /* sortable: column headers and (after sort) sorttop */
.covid19-container tbody,
.covid19-container tfoot, /* sortable: (after sort) sortbottom */
.covid19-container tr,
.covid19-container td,
.covid19-container .plainrowheadersbg th[scope=row],
.covid19-container .plainrowheadersbg th[scope=rowgroup],
.covid19-container table:not(.wikitable) th {
background-color: inherit;
}
/**
* Fix short centered caption hidden on collapsed wide table.
*/
.covid19-container caption {
text-align: left;
}
@media screen {
/**
* Behavior for scroll.
*/
.covid19-container .scroll-container {
max-height: 75vh;
max-width: max-content; /* Move vertical scroll next to div */
min-width: 300px; /* In case another element floats right */
overflow-y: auto;
}
/**
* Row class is top-sticky; "sticky-row". Don't use on row that spans or is
* spanned by another row (rowspan). "sortable" moves column headers and
* (after sort) "sorttop" to <thead>. Because "sorttop" moved, don't make
* <thead> sticky. Some tables may be using <td> instead of <th>.
*/
.covid19-container tr.sticky-row > *,
.covid19-container .static-row-numbers.wikitable tr.sticky-row::before {
position: sticky;
top: -1px;
z-index: 10;
}
/**
* Table with "sticky-col1" or "sticky-col2" class have left-sticky column 1
* or 2 respectively. Don't use on column that spans or is spanned by
* another column (colspan). Some tables may be using <td> instead of <th>.
*/
.covid19-container table.sticky-col1 tr > :nth-child(1),
.covid19-container table.sticky-col2 tr > :nth-child(2) {
left: -1px;
position: sticky;
}
/**
* Move left-sticky column header above top-sticky column headers.
*/
.covid19-container table.sticky-col1 tr.sticky-row > :nth-child(1),
.covid19-container table.sticky-col2 tr.sticky-row > :nth-child(2) {
z-index: 11;
}
/**
* Style expand/collapse links like VTE.
*/
.covid19-container .expand,
.covid19-container .collapse {
font-size: 88%;
}
/**
* Behavior for expand/collapse links.
* - "expand" href is "#unique-id" to target id="unique-id".
* - "collapse" href is "#0".
*/
.covid19-container:target .scroll-container {
max-height: none;
}
.covid19-container:target .expand,
.covid19-container .collapse {
display: none;
}
.covid19-container .navbar,
.covid19-container .expand,
.covid19-container:target .collapse {
display: inline-block;
}
.covid19-container:target tr.sticky-row > *,
.covid19-container:target .static-row-numbers.wikitable tr.sticky-row::before,
.covid19-container:target table.sticky-col1 tr > :nth-child(1),
.covid19-container:target table.sticky-col2 tr > :nth-child(2) {
position: static;
}
/**
* Fix Firefox missing borders due to position sticky and "wikitable"
* collapsed borders.
*/
.covid19-container .wikitable {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
}
.covid19-container .wikitable td,
.covid19-container .wikitable th,
.covid19-container .static-row-numbers.wikitable tbody tr:not(.static-row-header)::before {
border-width: 0 1px 1px 0;
}
.covid19-container .static-row-numbers.wikitable tr::before {
border-color: #a2a9b1;
border-style: solid;
border-width: 0 1px 1px 0;
}
/**
* Table with "sortunder" class moves "sortable" sort buttons below header
* text. "sortable" requires <th> and adds buttons to bottom-most column
* header. Use on wide tables due to column header wider than its data.
*
* Note, selector parts with ".client-js" are untested.
*/
.client-js .covid19-container .sortunder.sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.covid19-container .sortunder.jquery-tablesorter th.headerSort {
background-position: bottom 0.2em right;
padding-bottom: 1em;
padding-right: 0.4em;
}
.client-js .covid19-container .sortunder.sortable:not(.jquery-tablesorter) > * > tr:first-child > th.unsortable,
.covid19-container .sortunder.jquery-tablesorter th.unsortable {
padding-bottom: 1em;
}
}
@media print {
/**
* Hide expand/collapse links. VTE links already hidden.
*/
.covid19-container .expand,
.covid19-container .collapse {
display: none;
}
}
/**
* Reset Wikipedia styles causing sticky and float issues on mobile.
* - Table "overflow: auto;" fixes sticky on iOS browsers.
*/
@media all and (max-width: 720px) {
.covid19-container table {
display: table; /* Was "block" */
overflow: auto; /* We already have an overflow context 'higher up' */
}
.covid19-container caption {
display: table-caption; /* Was "block" */
}
}
/**
* Reset Sticky Table Headers gadget styles causing sticky issues if enabled.
*
* Unsure if "position: -webkit-sticky;" reset, so reset "bottom" and "top".
*
* @see https://wiki.riteme.site/wiki/MediaWiki:Gadget-StickyTableHeaders.css
* @see https://wiki.riteme.site/wiki/MediaWiki:Gadget-StickyTableHeaders.js
*/
.covid19-container .jquery-tablesorter > thead,
.covid19-container .jquery-tablesorter > tfoot,
.covid19-container .mw-sticky-header > thead,
.covid19-container .mw-sticky-header > tfoot {
bottom: auto; /* Was "0" */
position: static; /* Was "sticky" */
top: auto; /* Was "0" */
}
