MediaWiki:Gadget-zhDialMap.css
(Redirected from User:Fish bowl/zhDialMap.css)
Note – after saving, you may have to bypass your browser’s cache to see the changes.
- 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 style sheet lacks a documentation subpage. Please create it.
- This script is a part of the
zhDialMapgadget (edit definitions)- Description (edit): Add interactivity to Chinese dialectal maps on by default
- Other parts: zhDialMap.js
- Useful links: subpage list • links • redirects
.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 */
}