Template:COVID-19 pandemic data/styles2.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 simular 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: 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 <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://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" */
}