https://linguifex.com/w/index.php?action=history&feed=atom&title=MediaWiki%3AGadget-zhDialMap.css
MediaWiki:Gadget-zhDialMap.css - Revision history
2026-04-06T14:20:52Z
Revision history for this page on the wiki
MediaWiki 1.43.6
https://linguifex.com/w/index.php?title=MediaWiki:Gadget-zhDialMap.css&diff=475125&oldid=prev
Sware: 1 revision imported
2025-11-04T17:54:08Z
<p>1 revision imported</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 17:54, 4 November 2025</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Sware
https://linguifex.com/w/index.php?title=MediaWiki:Gadget-zhDialMap.css&diff=475124&oldid=prev
wikt>Surjection at 09:20, 12 September 2025
2025-09-12T09:20:44Z
<p></p>
<p><b>New page</b></p><div>.zh-dial-map__container {<br />
margin: auto;<br />
max-width: 1100px;<br />
position: relative;<br />
}<br />
.zh-dial-map__inputContainer {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
background: rgba(255, 255, 255, 0.5);<br />
z-index: 1;<br />
margin: 1em;<br />
padding: 0.5em;<br />
font-size: 1em;<br />
opacity: 0.5;<br />
transition: opacity 1s; /* take 1 second to fade */<br />
}<br />
.zh-dial-map__inputContainer:hover {<br />
opacity: 1;<br />
transition: opacity 0.2s; /* take 0.2 seconds to be non-opaque */<br />
}<br />
.zh-dial-map__inputContainer input {<br />
vertical-align: middle;<br />
}<br />
.zh-dial-map__zoomContainer:before {<br />
content: "10% ";<br />
}<br />
.zh-dial-map__zoomContainer:after {<br />
content: " 400%";<br />
}<br />
.zh-dial-map__zoomController {<br />
width: 120px;<br />
}<br />
<br />
<br />
.zh-dial-map__frame {<br />
max-height: 80vh;<br />
width: 100%;<br />
box-sizing: border-box; /* ... */<br />
}<br />
<br />
<br />
.zh-dial-map__map {<br />
position: relative; /* dots relative to the map */<br />
margin: auto; /* center in frame */<br />
}<br />
<br />
<br />
.zh-dial-map__map img {<br />
pointer-events: none;<br />
user-select: none;<br />
-moz-user-select: none;<br />
-webkit-user-select: none;<br />
-ms-user-select: none;<br />
}<br />
<br />
<br />
.zh-dial-map__dot, .zh-dial-map__legend-row-dot {<br />
height: 10px;<br />
width: 10px;<br />
border-radius: 100%;<br />
<br />
/* https://stackoverflow.com/q/471510 */<br />
text-indent: 100%;<br />
overflow: hidden;<br />
}<br />
.zh-dial-map__legend-row-dot {<br />
display: inline-block;<br />
margin-right: 0.5em;<br />
}<br />
.zh-dial-map__dot {<br />
position: absolute;<br />
transform: translate(-50%,-50%); /* https://stackoverflow.com/q/33683602 */<br />
cursor: help;<br />
}<br />
.zh-dial-map__dot:hover, .zh-dial-map__dot--hover {<br />
opacity: 0.75;<br />
height: 20px;<br />
width: 20px;<br />
z-index: 1;<br />
border: 5px solid white;<br />
}<br />
.zh-dial-map__dot--superHover {<br />
opacity: 1;<br />
height: 30px;<br />
width: 30px;<br />
z-index: 2;<br />
animation: .4s infinite alternate dotPulse;<br />
<br />
/* for when your mouse is inside the popup && over the dot */<br />
pointer-events: none;<br />
}<br />
@keyframes dotPulse {<br />
from {<br />
opacity: 0.75;<br />
height: 20px;<br />
width: 20px;<br />
}<br />
to {<br />
opacity: 1;<br />
height: 30px;<br />
width: 30px;<br />
}<br />
}<br />
<br />
<br />
.zh-dial-map__legend {<br />
-ms-column-count: 5;<br />
-moz-column-count: 5;<br />
-webkit-column-count: 5;<br />
column-count: 5;<br />
line-height: 1.4;<br />
padding: 0.5em;<br />
}<br />
<br />
<br />
.zh-dial-map__legend-row--hover,<br />
.zh-dial-map__legend-row .oo-ui-popupWidget-popup li:hover {<br />
background: rgba(128, 255, 0, 0.25);<br />
}<br />
.zh-dial-map__legend-row .oo-ui-popupWidget-popup {<br />
background-color: rgba(255, 255, 255, 0.75);<br />
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);<br />
}<br />
<br />
/* dark mode colors; styles need to be duplicated exactly between these two media blocks */<br />
@media screen {<br />
html.skin-theme-clientpref-night .zh-dial-map__legend-row .oo-ui-popupWidget-popup {<br />
background-color: rgba(32, 32, 32, 0.75);<br />
text-shadow: 1px 1px 0 rgba(32, 32, 32, 0.5);<br />
}<br />
}<br />
@media screen and (prefers-color-scheme: dark) {<br />
html.skin-theme-clientpref-os .zh-dial-map__legend-row .oo-ui-popupWidget-popup {<br />
background-color: rgba(32, 32, 32, 0.75);<br />
text-shadow: 1px 1px 0 rgba(32, 32, 32, 0.5);<br />
}<br />
}<br />
<br />
<br />
/* vertically increase the "hitbox" of the popup */<br />
/* so that it is easier to get the cursor inside */<br />
.zh-dial-map__legend-row .oo-ui-popupWidget:before,<br />
.zh-dial-map__legend-row .oo-ui-popupWidget:after {<br />
content: "";<br />
position: absolute;<br />
top: 0;<br />
bottom: 0;<br />
/*left: 30%;*/ /* if it fully extends horizontally, getting from ... */<br />
/*right: 30%;*/ /* ... a row to the one above/below gets annoying */<br />
left: 0;<br />
right: 0;<br />
z-index: 2;<br />
}<br />
.zh-dial-map__legend-row .oo-ui-popupWidget:before {<br />
top: -1.2em;<br />
background: rgba(255, 0, 0, 0.05);<br />
background: transparent;<br />
}<br />
.zh-dial-map__legend-row .oo-ui-popupWidget:after {<br />
bottom: -1.2em;<br />
background: rgba(0, 0, 255, 0.05);<br />
background: transparent;<br />
}<br />
.zh-dial-map__legend-row .oo-ui-popupWidget-popup {<br />
z-index: 3; /* the "hitbox" can block pointer events to <li>s */<br />
}</div>
wikt>Surjection