User:Jroberson108/Template:COVID-19 pandemic data/styles.css
Appearance
Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. This code will be executed when previewing this page. |
![]() | Documentation for this user script can be added at User:Jroberson108/Template:COVID-19 pandemic data/styles. |
/**
* 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.
*
* .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|Jroberson108/Template:COVID-19 pandemic data/styles.css|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; "sticky-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 "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;
}
/**
* 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-col2 tr.sticky-row > :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 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" */
}