Template:COVID-19 pandemic data/sandbox/styles2.css

/** * 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"). * *    *   [expand] *  [collapse] *   *      *    *  * * Notes: * - Expand disables sticky and scroll behaviors. * - Firefox sticky with collapsed borders work different than other browsers. */

/** * Add margin simular to "wikitable". */ .covid19-container { margin-bottom: 1em; margin-top: 1em; }

/** * 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 .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 * . Because "sorttop" moved, don't make 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" */ }