Template:COVID-19 pandemic data/styles2.css
From Wikipedia, the free encyclopedia
.covid19-container { margin-bottom: 1em; margin-top: 1em; }
/**
* 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").
*
* Lua error in Module:Navbar at line 58: Invalid title {{subst:PAGENAME}}.
*
*
* **
* * Notes: * - Sortable doesn't work on mobile. * - Expand disables sticky and scroll behaviors. * - Firefox sticky with collapsed borders work different than other browsers. */
/**
* Add margin simular to "wikitable". */
/**
* Inherit background color from table. "plainrowheadersbg" adjusts row headers.
* "wikitable" styles other .
*/
.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 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; /* vertical scroll next to div */ min-width: 300px; /* if 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 "sortable" doesn't work on mobile and "sorttop" moved,
* don't make <thead> sticky. Some tables may be using instead of .
*/ .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: 1.96em; 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 instead of .
*/ .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 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://en.wikipedia.org/wiki/MediaWiki:Gadget-StickyTableHeaders.css * @see https://en.wikipedia.org/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" */ }