MediaWiki:Gadget-zhDialMap.css
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer / Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:按 Ctrl-F5。
- 此樣式清單缺少說明文檔。請協助創建。
- 該腳本/樣式清單是小工具
zhDialMap
的一部分(編輯定義)- 描述(編輯):為漢語方言地圖添加交互支持
- 其他部分:morebits.js、morebits.css和zhDialMap.js
- 相關-{zh-hans:链接; zh-hant:連接}-:子頁面列表 • -{zh-hans:链入; zh-hant:連入}- • -{zh-hans:重定向; zh-hant:重新導向}-
/* From [[en:MediaWiki:Gadget-zhDialMap.css]] */
.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 */
}