/* I am creating this here initially instead of in my user-space, because using the ?model=sanitized-css url parameter to ?action=edit is limited to admins on enwiki */
/* Test this both on firefox and chrome, they implement sticky a bit differently! */
#covid19-container {
float: right;
max-width: 100%;
max-height: 75vh;
height: 60em;
overflow: auto;
/* On some desktop browsers (firefox on linux at least), the scrollbar comes out of the element, and if we don't have some padding, it overlaps the ref column */
padding-right: 18px;
}
.covid-show-table {
float: right;
font-size: 75%;
}
#covid19-container:target .covid-show-table {
display: none;
}
#covid19-container:target {
max-width: none;
max-height: none;
height: auto;
overflow-y: visible;
padding-right: 0;
}
@media print {
#covid19-container {
max-width: none;
max-height: none;
height: auto;
overflow-y: visible;
padding-right: 0;
}
.covid-show-table {
display: none;
}
}
@media screen, handheld {
.covid-sticky th {
position: sticky;
/* firefox works best with 0.9px to show top border, chrome wants 0. or it will show stuff behind. */
top: 0;
/* hack for firefox */
background-clip: padding-box;
}
/* based on https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element */
.covid-sticky th:after,
.covid-sticky th:before {
content: '';
position: absolute;
left: 0;
width: 100%;
}
.covid-sticky th:before {
/* make it overlap with top border before scrolling */
top: -1px;
border-top: 1px solid #a2a9b1;
}
.covid-sticky th:after {
bottom: -1px;
border-bottom: 1px solid #a2a9b1;
}
}
/* Make country line wrap if on small screen */
@media only screen and (max-width: 500px) {
.covid-country-narrow-on-mobile {
max-width: 15ch;
}
}
/* For mobile app page content service - https://en.wikipedia.org/api/rest_v1/page/mobile-html/Template:2019%E2%80%9320_coronavirus_pandemic_data */
/* This is a bit evil */
#covid19-container-marker + .pcs-collapse-table-container .pcs-collapse-table-collapse-text {
display: none;
}
#covid19-container-marker + .pcs-collapse-table-container .pcs-table-other::after {
display: inline;
content: ": Coronavirus by country and territory";
font-weight: normal;
color: #72777d;
}
#covid19-container-marker + .pcs-collapse-table-container .pcs-collapse-table-collapsed + table {
display: table !important;
}
.pcs-collapse-table-container .covid-show-table {
display: none;
}