107 lines
2.1 KiB
CSS
107 lines
2.1 KiB
CSS
/* ── MiniMap ── */
|
|
|
|
.minimap-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
/* toolbar */
|
|
.minimap-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.minimap-toggle-btn,
|
|
.minimap-clear-btn {
|
|
background: var(--tv-surface);
|
|
color: var(--tv-muted);
|
|
border: 1px solid var(--tv-line-bright);
|
|
border-radius: var(--tv-r-sm);
|
|
padding: 5px 14px;
|
|
font: 11px var(--tv-mono);
|
|
letter-spacing: 0.04em;
|
|
cursor: pointer;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.minimap-toggle-btn:hover,
|
|
.minimap-clear-btn:hover {
|
|
color: var(--tv-text);
|
|
border-color: var(--tv-accent);
|
|
}
|
|
|
|
/* container */
|
|
.minimap-container {
|
|
position: relative;
|
|
height: var(--minimap-h, 200px);
|
|
border-radius: var(--tv-r-lg);
|
|
border: 1px solid var(--tv-line-bright);
|
|
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
|
|
overflow: hidden;
|
|
transition: height 0.35s ease, opacity 0.35s ease;
|
|
opacity: 1;
|
|
}
|
|
|
|
.minimap-collapsed {
|
|
height: 0 !important;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* leaflet overrides */
|
|
.minimap-leaflet {
|
|
background: var(--tv-bg);
|
|
}
|
|
|
|
.minimap-leaflet .leaflet-tile-pane {
|
|
filter: brightness(0.7) saturate(0.4);
|
|
}
|
|
|
|
/* hint overlay */
|
|
.minimap-hint {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 800;
|
|
font: 10px var(--tv-mono);
|
|
letter-spacing: 0.18em;
|
|
color: var(--tv-dim);
|
|
background: rgba(15, 12, 9, 0.65);
|
|
padding: 4px 14px;
|
|
border-radius: var(--tv-r-sm);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* tooltip */
|
|
.minimap-tooltip {
|
|
background: var(--tv-surface) !important;
|
|
color: var(--tv-text) !important;
|
|
border: 1px solid var(--tv-line-bright) !important;
|
|
border-radius: var(--tv-r-sm) !important;
|
|
font: 11px var(--tv-mono) !important;
|
|
padding: 3px 10px !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.minimap-tooltip::before {
|
|
border-top-color: var(--tv-surface) !important;
|
|
}
|
|
|
|
/* mobile */
|
|
@media (max-width: 768px) {
|
|
.minimap-container {
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
/* reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.minimap-container {
|
|
transition: none;
|
|
}
|
|
}
|