မီႇတီႇယႃႇဝီႇၶီႇ:Gadget-zhDialMap.css
မၢႆတွင်း: ဝၢႆးသေသိမ်းပၼ်ယဝ်ႉ၊ တွၼ်ႈတႃႇ ၸဝ်ႈၵဝ်ႇ တေႁၼ်လႆႈ လွင်ႈလႅၵ်ႈလၢႆႈၼၼ်ႉ ၸဝ်ႈၵဝ်ႇတေၸၢင်ႈလႆႈလတ်းၶၢမ်ႈ ၶႅတ်ႉၶျ် တူဝ်ပိုတ်ႇဝႅပ်ႉၸဝ်ႈၵဝ်ႇယဝ်ႉ။
- ၽွင်းမိူဝ်ႈတိုၵ်ႉၼဵၵ်း Reload တီႈ Firefox / Safari: ၼၼ်ႉ ၼဵၵ်းဝႆႉပႃး Shift ၊ဢမ်ႇၼၼ် ၼဵၵ်းပၼ် Ctrl-F5 ဢမ်ႇၼၼ် Ctrl-R (တီႈၼႂ်း Mac ၼႆ ၼဵၵ်းပၼ်⌘-R)
- တီႈၼႂ်း Google Chrome: ၼဵၵ်းပၼ် Ctrl-Shift-R (တီႈၼႂ်း Mac ၼႆႉ ၼဵၵ်းပၼ်⌘-Shift-R )
- ၽွင်းမိူဝ်ႈ တိုၵ်ႉၼဵၵ်း Refreshတီႈ Internet Explorer/ Edge: ၼဵၵ်းဝႆႉပၼ် Ctrl ဢမ်ႇၼၼ် ၼဵၵ်းပၼ် Ctrl-F5
- တီႈၼႂ်း Opera: ၵႂႃႇၸူးတီႈ Menu → Settings (ပေႃးပဵၼ်တီႈၼႂ်း Mac ၸိုင် Opera → Preferences ) သေ သိုပ်ႇၵႂႃႇ Privacy & security → Clear browsing data → Cached images and files ၼၼ်ႉလႄႈ။
.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 */
}