MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 177: | Line 177: | ||
importScript("https://adaris.wiki/MediaWiki:Familytree.js"); | importScript("https://adaris.wiki/MediaWiki:Familytree.js"); | ||
/* ============================================================ | |||
Interactive deep-zoom map — styles | |||
Paste this block at the bottom of MediaWiki:Common.css | |||
============================================================ */ | |||
.interactive-map { | |||
position: relative; | |||
width: 100%; | |||
height: 600px; /* override per page with | height = 700 */ | |||
max-height: 85vh; | |||
background: #11131a; /* shows briefly while the first tiles load */ | |||
border-radius: 8px; | |||
overflow: hidden; | |||
} | |||
/* ---- Pins (an <a> when they link to an article) ---- */ | |||
.imap-pin { | |||
--pin-color: #2f6fed; | |||
position: absolute; | |||
display: block; | |||
width: 22px; | |||
height: 31px; | |||
color: var( --pin-color ); | |||
cursor: pointer; | |||
transform-origin: bottom center; | |||
transition: transform 0.12s ease, opacity 0.3s ease; | |||
filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.5 ) ); | |||
z-index: 2; | |||
} | |||
.imap-pin:hover, | |||
.imap-pin:focus { | |||
transform: scale( 1.18 ); | |||
outline: none; | |||
z-index: 5; | |||
} | |||
.imap-pin svg { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
/* Name shown on hover / keyboard focus. */ | |||
.imap-pin-label { | |||
position: absolute; | |||
left: 50%; | |||
bottom: calc( 100% + 4px ); | |||
transform: translateX( -50% ); | |||
white-space: nowrap; | |||
padding: 3px 8px; | |||
border-radius: 5px; | |||
background: rgba( 17, 19, 26, 0.95 ); | |||
color: #fff; | |||
font-family: sans-serif; | |||
font-size: 12px; | |||
line-height: 1.3; | |||
opacity: 0; | |||
pointer-events: none; | |||
transition: opacity 0.12s ease; | |||
} | |||
.imap-pin:hover .imap-pin-label, | |||
.imap-pin:focus .imap-pin-label { | |||
opacity: 1; | |||
} | |||
/* ---- Text labels (region / area names) ---- */ | |||
.imap-label { | |||
position: absolute; | |||
white-space: nowrap; | |||
color: #fff; | |||
font-family: sans-serif; | |||
font-weight: 600; | |||
font-size: 15px; | |||
letter-spacing: 0.04em; | |||
text-decoration: none; | |||
text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.9 ), 0 0 4px rgba( 0, 0, 0, 0.7 ); | |||
cursor: default; | |||
transition: opacity 0.3s ease; | |||
z-index: 1; | |||
} | |||
a.imap-label { cursor: pointer; } | |||
a.imap-label:hover { text-decoration: underline; } | |||
/* ---- Shared: fade out when outside a marker's zoom range ---- */ | |||
.imap-hidden { | |||
opacity: 0 !important; | |||
pointer-events: none !important; | |||
} | |||
/* ---- Coordinate / zoom helper box ---- */ | |||
.imap-coords { | |||
position: absolute; | |||
left: 10px; | |||
bottom: 10px; | |||
z-index: 6; | |||
max-width: 90%; | |||
padding: 6px 9px; | |||
border-radius: 5px; | |||
background: rgba( 17, 19, 26, 0.9 ); | |||
color: #cfefff; | |||
font-family: monospace; | |||
font-size: 12px; | |||
pointer-events: none; | |||
} | |||
.imap-coords div { white-space: nowrap; } | |||
.imap-coords div + div { margin-top: 3px; } | |||
@media ( prefers-reduced-motion: reduce ) { | |||
.imap-pin, | |||
.imap-pin-label, | |||
.imap-label { transition: none; } | |||
} | |||