User:Kritixilithos/monobook.css

.ar-dial-map__container { margin: auto; max-width: 1100px; position: relative; } .ar-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 */ } .ar-dial-map__inputContainer:hover { opacity: 1; transition: opacity 0.2s; /* take 0.2 seconds to be non-opaque */ } .ar-dial-map__inputContainer input { vertical-align: middle; } .ar-dial-map__zoomContainer:before { content: "10% "; } .ar-dial-map__zoomContainer:after { content: " 400%"; } .ar-dial-map__zoomController { width: 120px; }

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

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

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

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

/* https://stackoverflow.com/q/471510 */ text-indent: 100%; overflow: hidden; } .ar-dial-map__legend-row-dot { display: inline-block; margin-right: 0.5em; } .ar-dial-map__dot { position: absolute; transform: translate(-50%,-50%); /* https://stackoverflow.com/q/33683602 */ cursor: help; } .ar-dial-map__dot:hover, .ar-dial-map__dot--hover { opacity: 0.75; height: 20px; width: 20px; z-index: 1; border: 5px solid white; } .ar-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; } }

.ar-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; }

.ar-dial-map__legend-row--hover, .ar-dial-map__legend-row .oo-ui-popupWidget-popup li:hover { background: rgba(128, 255, 0, 0.25); } .ar-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 */ .ar-dial-map__legend-row .oo-ui-popupWidget:before, .ar-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; } .ar-dial-map__legend-row .oo-ui-popupWidget:before { top: -1.2em; background: rgba(255, 0, 0, 0.05); background: transparent; } .ar-dial-map__legend-row .oo-ui-popupWidget:after { bottom: -1.2em; background: rgba(0, 0, 255, 0.05); background: transparent; } .ar-dial-map__legend-row .oo-ui-popupWidget-popup { z-index: 3; /* the "hitbox" can block pointer events to s */ }

/*generalised*/

.dial-map__container { margin: auto; max-width: 1100px; position: relative; } .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 */ } .dial-map__inputContainer:hover { opacity: 1; transition: opacity 0.2s; /* take 0.2 seconds to be non-opaque */ } .dial-map__inputContainer input { vertical-align: middle; } .dial-map__zoomContainer:before { content: "10% "; } .dial-map__zoomContainer:after { content: " 400%"; } .dial-map__zoomController { width: 120px; }

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

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

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

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

/* https://stackoverflow.com/q/471510 */ text-indent: 100%; overflow: hidden; } .dial-map__legend-row-dot { display: inline-block; margin-right: 0.5em; } .dial-map__dot { position: absolute; transform: translate(-50%,-50%); /* https://stackoverflow.com/q/33683602 */ cursor: help; } .dial-map__dot:hover, .dial-map__dot--hover { opacity: 0.75; height: 20px; width: 20px; z-index: 1; border: 5px solid white; } .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; } }

.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; }

.dial-map__legend-row--hover, .dial-map__legend-row .oo-ui-popupWidget-popup li:hover { background: rgba(128, 255, 0, 0.25); } .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 */ .dial-map__legend-row .oo-ui-popupWidget:before, .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; } .dial-map__legend-row .oo-ui-popupWidget:before { top: -1.2em; background: rgba(255, 0, 0, 0.05); background: transparent; } .dial-map__legend-row .oo-ui-popupWidget:after { bottom: -1.2em; background: rgba(0, 0, 255, 0.05); background: transparent; } .dial-map__legend-row .oo-ui-popupWidget-popup { z-index: 3; /* the "hitbox" can block pointer events to s */ }