hyl.st
A wayfinder inspired map plugin for obisidian
1/* Map Viewer - styles.css */
2/* All colors use Obsidian CSS variables for theme compatibility. */
3/* No fixed widths/heights — responsive to sidebar resize. */
4/* All Leaflet overrides scoped under .map-viewer-container to avoid */
5/* bleeding into other plugins that use Leaflet. */
6
7/* ── Map container ── */
8
9.map-viewer-container {
10 display: flex;
11 flex-direction: column;
12 width: 100%;
13 height: 100%;
14 overflow: hidden;
15}
16
17/* ── Map element ── */
18
19.map-viewer-map {
20 flex: 1;
21 min-height: 0;
22 overflow: hidden;
23}
24
25/* ── SVG teardrop pin markers ── */
26
27.map-viewer-pin {
28 background: none !important;
29 border: none !important;
30 filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
31}
32
33/* ── Marker highlight pulse ── */
34
35@keyframes map-pulse {
36 0% {
37 stroke-opacity: 0.8;
38 }
39 100% {
40 stroke-opacity: 0.3;
41 }
42}
43
44.map-marker-highlight {
45 animation: map-pulse 1.5s ease-in-out infinite alternate;
46}
47
48/* ── Popup styles (Obsidian theme integration) ── */
49/* Scoped under .map-viewer-container so we don't affect other plugins. */
50
51.map-viewer-container .leaflet-popup-content-wrapper {
52 background: var(--background-primary);
53 color: var(--text-normal);
54 border-radius: 6px;
55 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
56 font-family: var(--font-interface);
57 font-size: 12px;
58}
59
60.map-viewer-container .leaflet-popup-tip {
61 background: var(--background-primary);
62 box-shadow: none;
63}
64
65.map-viewer-container .leaflet-popup-content {
66 margin: 8px 12px;
67 line-height: 1.5;
68}
69
70.map-viewer-container .leaflet-popup-content p {
71 margin: 4px 0;
72}
73
74.map-viewer-container .leaflet-popup-content a {
75 color: var(--text-accent);
76 text-decoration: none;
77}
78
79.map-viewer-container .leaflet-popup-content a:hover {
80 text-decoration: underline;
81}
82
83.map-viewer-container .leaflet-popup-close-button {
84 color: var(--text-muted);
85}
86
87.map-viewer-container .leaflet-popup-close-button:hover,
88.map-viewer-container .leaflet-popup-close-button:focus {
89 color: var(--text-normal);
90}
91
92/* ── Zoom control styles (theme-aware) ── */
93
94.map-viewer-container .leaflet-control-zoom {
95 border: 2px solid var(--background-modifier-border);
96 border-radius: 4px;
97 margin-top: 6px;
98 margin-right: 6px;
99}
100
101.map-viewer-container .leaflet-control-zoom a {
102 background-color: var(--background-primary);
103 border-bottom: 1px solid var(--background-modifier-border);
104 color: var(--text-normal);
105}
106
107.map-viewer-container .leaflet-control-zoom a:hover {
108 background-color: var(--background-modifier-hover);
109}
110
111/* ── Attribution styles ── */
112
113.map-viewer-container .leaflet-control-attribution {
114 font-size: 9px;
115 background: var(--background-primary-alt) !important;
116 color: var(--text-faint);
117}
118
119.map-viewer-container .leaflet-control-attribution a {
120 color: var(--text-muted);
121}
122
123/* ── Leaflet container background for dark themes ── */
124
125.map-viewer-container .leaflet-container {
126 background: var(--background-primary-alt);
127}