MediaWiki:Gadget-zhDialMap.css

Note: You may have to bypass your browser’s cache to see the changes. In addition, after saving a sitewide CSS file such as MediaWiki:Common.css, it will take 5-10 minutes before the changes take effect, even if you clear your cache.

Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
Konqueror and Chrome: click Reload or press F5;
Opera: clear the cache in Tools → Preferences;
Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.

This gadget stylesheet lacks a documentation subpage. Please create it.

This script is a part of the zhDialMap gadget (edit definitions)

Description (edit): Add interactivity to Chinese dialectal maps on by default

Other parts: zhDialMap.js

Useful links: subpage list • links • redirects • transclusions

.zh-dial-map__container {
	margin: auto;
	max-width: 1100px;
	position: relative;
}
.zh-dial-map__inputContainer {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.5);
	z-index: 1;
	margin: 1em;
	padding: 0.5em;
	font-size: 1em;
	opacity: 0.5;
	transition: opacity 1s; /* take 1 second to fade */
}
.zh-dial-map__inputContainer:hover {
	opacity: 1;
	transition: opacity 0.2s; /* take 0.2 seconds to be non-opaque */
}
.zh-dial-map__inputContainer input {
	vertical-align: middle;
}
.zh-dial-map__zoomContainer:before {
	content: "10% ";
}
.zh-dial-map__zoomContainer:after {
	content: " 400%";
}
.zh-dial-map__zoomController {
	width: 120px;
}


.zh-dial-map__frame {
	max-height: 80vh;
	width: 100%;
	box-sizing: border-box; /* ... */
}


.zh-dial-map__map {
	position: relative; /* dots relative to the map */
	margin: auto; /* center in frame */
}


.zh-dial-map__map img {
	pointer-events: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


.zh-dial-map__dot, .zh-dial-map__legend-row-dot {
	height: 10px;
	width: 10px;
	border-radius: 100%;

	/* https://stackoverflow.com/q/471510 */
	text-indent: 100%;
	overflow: hidden;
}
.zh-dial-map__legend-row-dot {
	display: inline-block;
	margin-right: 0.5em;
}
.zh-dial-map__dot {
	position: absolute;
	transform: translate(-50%,-50%); /* https://stackoverflow.com/q/33683602 */
	cursor: help;
}
.zh-dial-map__dot:hover, .zh-dial-map__dot--hover {
	opacity: 0.75;
	height: 20px;
	width: 20px;
	z-index: 1;
	border: 5px solid white;
}
.zh-dial-map__dot--superHover {
	opacity: 1;
	height: 30px;
	width: 30px;
	z-index: 2;
	animation: .4s infinite alternate dotPulse;

	/* for when your mouse is inside the popup && over the dot */
	pointer-events: none;
}
@keyframes dotPulse {
	from {
		opacity: 0.75;
		height: 20px;
		width: 20px;
	}
	to {
		opacity: 1;
		height: 30px;
		width: 30px;
	}
}


.zh-dial-map__legend {
	-ms-column-count: 5;
	-moz-column-count: 5;
	-webkit-column-count: 5;
	column-count: 5;
	line-height: 1.4;
	padding: 0.5em;
}


.zh-dial-map__legend-row--hover,
.zh-dial-map__legend-row .oo-ui-popupWidget-popup li:hover {
	background: rgba(128, 255, 0, 0.25);
}
.zh-dial-map__legend-row .oo-ui-popupWidget-popup {
	background-color: rgba(255, 255, 255, 0.75);
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}


/* vertically increase the "hitbox" of the popup */
/* so that it is easier to get the cursor inside */
.zh-dial-map__legend-row .oo-ui-popupWidget:before,
.zh-dial-map__legend-row .oo-ui-popupWidget:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	/*left: 30%;*/ /* if it fully extends horizontally, getting from ... */
	/*right: 30%;*/ /* ... a row to the one above/below gets annoying */
	left: 0;
	right: 0;
	z-index: 2;
}
.zh-dial-map__legend-row .oo-ui-popupWidget:before {
	top: -1.2em;
	background: rgba(255, 0, 0, 0.05);
	background: transparent;
}
.zh-dial-map__legend-row .oo-ui-popupWidget:after {
	bottom: -1.2em;
	background: rgba(0, 0, 255, 0.05);
	background: transparent;
}
.zh-dial-map__legend-row .oo-ui-popupWidget-popup {
	z-index: 3; /* the "hitbox" can block pointer events to <li>s */
}