Template:COVID-19 pandemic data/styles.css

/** * {{pp-template}} * * 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. Use * instead of "sticky-row1" and "sticky-row2". * * .sticky-row1 | .sticky-row2: (use both once) Row classes make top-sticky * while scrolling. First restricts height/nowrap and second sticks under first. * Use instead of "sticky-row". * * .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|{{subst:PAGENAME}}|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; one "sticky-row" or both "sticky-row1" and * "sticky-row2". Latter sticks second under first with first height/nowrap * restriction. 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;}.covid19-container tr.sticky-row1 > *,.covid19-container .static-row-numbers.wikitable tr.sticky-row1::before {height: 1.61em;position: sticky;top: -1px;white-space: nowrap;z-index: 10;}.covid19-container tr.sticky-row2 > *,.covid19-container .static-row-numbers.wikitable tr.sticky-row2::before {position: sticky;top: 2.02em;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-col1 tr.sticky-row1 > :nth-child(1),.covid19-container table.sticky-col1 tr.sticky-row2 > :nth-child(1),.covid19-container table.sticky-col2 tr.sticky-row > :nth-child(2),.covid19-container table.sticky-col2 tr.sticky-row1 > :nth-child(2),.covid19-container table.sticky-col2 tr.sticky-row2 > :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 tr.sticky-row1 > *,.covid19-container:target .static-row-numbers.wikitable tr.sticky-row1::before,.covid19-container:target tr.sticky-row2 > *,.covid19-container:target .static-row-numbers.wikitable tr.sticky-row2::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://www.search.com.vn/wiki/en/MediaWiki:Gadget-StickyTableHeaders.css * @see https://www.search.com.vn/wiki/en/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" */}