/**
* 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-wrapper: Div class wraps table.
*
* .image: Cell class centers content (e.g. flag).
*
* .plainrowheaders: Table class makes <th scope="row"> background color plain.
*
* .sortunder: Row class moves "sortable" buttons below column header text.
*
* .sticky-row: (one use max) Row class makes top-sticky while scrolling. No
* restriction on height/nowrap.
*
* .sticky-row1 | .sticky-row2: (use both) Row class makes top-sticky while
* scrolling. Use one on each row instead of "sticky-row" class. Second sticks
* under first and restricts first's height/nowrap.
*
* .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 restriction on div wrapper. Add
* inside "covid19-wrapper", preferably above table to allow longer caption. Add
* an "id" that is unique to this table to the wrapper div (e.g. "unique-id")
* and also add to "href" of expand link (e.g. "#unique-id").
* <div class="covid19-wrapper" id="unique-id">
* {{navbar|{{subst:PAGENAME}}|brackets=1|mini=1}}
* <div class="expand" title="Unrestricted table height">[[#unique-id|[expand]]]</div>
* <div class="collapse" title="Restricted table height">[[#void|[collapse]]]</div>
* <!-- table goes here -->
* </div>
*
* Note: Firefox and Chrome borders different with sticky, so test.
* Note: Sortable doesn't work on mobile, so test.
*/
/**
* Inherit background color from table. Adjust "plainrowheaders". "wikitable"
* styles other <th>.
*/
.covid19-wrapper thead, /* sortable: column headers and (after sort) sorttop */
.covid19-wrapper tbody,
.covid19-wrapper tfoot, /* sortable: (after sort) sortbottom */
.covid19-wrapper tr,
.covid19-wrapper td,
.covid19-wrapper .plainrowheaders th[scope=row] {
background-color: inherit;
}
/**
* Short caption out of view if wide table collapsed and caption centered.
*/
.covid19-wrapper caption {
text-align: left;
}
/**
* Center cells with image (e.g. flag).
*/
.covid19-wrapper .image {
text-align: center;
}
@media screen {
/**
* Set max height to 80% viewport and add vertical scroll next to div.
*/
.covid19-wrapper {
max-height: 80vh;
max-width: max-content;
overflow-y: auto;
}
/**
* Row with "sticky-row" class is top sticky; can have one unrestricted or
* two with height/nowrap restictions on first 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
* "sortable" doesn't work on mobile and the "sorttop" move, don't make
* <thead> sticky. Some tables may be using <td> instead of <th>.
*/
.covid19-wrapper tr.sticky-row > *,
.covid19-wrapper .static-row-numbers tr.sticky-row::before {
position: sticky;
top: -1px;
}
.covid19-wrapper tr.sticky-row1 > *,
.covid19-wrapper tr.sticky-row1::before {
position: sticky;
top: -1px;
height: 1.61em;
white-space: nowrap;
}
.covid19-wrapper tr.sticky-row2 > *,
.covid19-wrapper tr.sticky-row2::before {
position: sticky;
top: 1.96em;
}
/**
* Table with "sticky-col1" or "sticky-col2" class have column 1 or 2 left
* sticky respectively; one allowed or overlap. Don't use on column that
* spans or is spanned by another column (colspan). Some tables may be using
* <td> instead of <th>.
*/
.covid19-wrapper table.sticky-col1 tr > :nth-child(1),
.covid19-wrapper table.sticky-col2 tr > :nth-child(2) {
left: -1px;
position: sticky;
}
/**
* Move left sticky column header above top sticky column headers.
*/
.covid19-wrapper table.sticky-col1 tr.sticky-row > :nth-child(1),
.covid19-wrapper table.sticky-col1 tr.sticky-row1 > :nth-child(1),
.covid19-wrapper table.sticky-col1 tr.sticky-row2 > :nth-child(1),
.covid19-wrapper table.sticky-col2 tr.sticky-row > :nth-child(2),
.covid19-wrapper table.sticky-col2 tr.sticky-row1 > :nth-child(2),
.covid19-wrapper table.sticky-col2 tr.sticky-row2 > :nth-child(2) {
z-index: 10;
}
/**
* Style expand/collapse links like VTE links.
*/
.covid19-wrapper .expand,
.covid19-wrapper .collapse {
font-size: 85%;
}
/**
* Behavior for expand/collapse links.
* "expand" href is "#[id]" to target wrapper id="".
* "collapse" href is "#void".
* Note: column is still left sticky in expanded state.
*/
.covid19-wrapper:target {
max-height: none;
}
.covid19-wrapper:target .expand,
.covid19-wrapper .collapse {
display: none;
}
.covid19-wrapper .navbar,
.covid19-wrapper .expand,
.covid19-wrapper:target .collapse {
display: inline-block;
}
/**
* For mobile app page content service.
* @see https://en.wikipedia.org/api/rest_v1/page/mobile-html/Template:2019%E2%80%9320_coronavirus_pandemic_data
*/
.pcs-collapse-table-container .expand {
display: none;
}
/**
* Fix Firefox missing borders due to position sticky and "wikitable"
* collapsed borders.
*/
.covid19-wrapper .wikitable {
border-width: 1px 0 0 1px;
}
.covid19-wrapper .wikitable td,
.covid19-wrapper .wikitable th {
border-width: 0;
box-shadow: inset -1px -1px #a2a9b1;
}
.covid19-wrapper .static-row-numbers tr::before {
box-shadow: inset -1px -1px #a2a9b1;
}
.covid19-wrapper table.static-row-numbers.wikitable tbody tr:not(.static-row-header)::before {
border-width: 0;
}
/**
* Row with "sortunder" class moves "sortable" sort buttons below header text.
* "sortable" requires <th> and adds buttons to last top-consecutive row. Use
* for really wide tables due to column header wider than its data. Restricted
* to "headerSort" in case sortable "rowspan" column after left sticky column.
*/
.covid19-wrapper .client-js .sortable:not(.jquery-tablesorter) > * > tr.sortunder > th.headerSort,
.covid19-wrapper .jquery-tablesorter tr.sortunder > th.headerSort {
background-position: bottom 0.2em right;
padding-bottom: 1em;
padding-right: 0.4em;
vertical-align: top;
}
}
@media print {
/**
* Hide expand/collapse links. VTE links already hidden.
*/
.covid19-wrapper .expand,
.covid19-wrapper .collapse {
display: none;
}
}
/**
* Reverse Wikipedia styles causing sticky and float issues on mobile.
*/
@media all and (max-width: 720px) {
.covid19-wrapper table {
display: table; /* Was "block" */
}
.covid19-wrapper caption {
display: table-caption; /* Was "block" */
}
}
