Padron:2019–20 coronavirus pandemic data/style.css

/* 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: grey;
}

#covid19-container-marker + .pcs-collapse-table-container .pcs-collapse-table-collapsed + table { display:table !important;}

.pcs-collapse-table-container .covid-show-table {
	display:none;
}