/* ------------------------------------------------------------------ */ /* Leaflet dark/light theme for NetBox */ /* Detects NetBox theme via [data-bs-theme="dark"] on */ /* ------------------------------------------------------------------ */ :root { --pw-map-bg: #f8f9fa; --pw-map-border: rgba(0, 0, 0, 0.12); --pw-map-text: #212529; --pw-map-text-muted: #6c757d; --pw-map-panel-bg: #ffffff; --pw-map-control-bg: #ffffff; --pw-map-control-text: #333; --pw-map-control-border: rgba(0, 0, 0, 0.2); --pw-map-popup-bg: #ffffff; --pw-map-popup-text: #212529; --pw-map-popup-border: #ddd; --pw-map-popup-heading: #333; --pw-map-progress-bg: #f5f5f5; } [data-bs-theme="dark"] { --pw-map-bg: #1a1d2e; --pw-map-border: rgba(255, 255, 255, 0.1); --pw-map-text: #e0e0f0; --pw-map-text-muted: #a0a0b8; --pw-map-panel-bg: rgba(22, 25, 43, 0.97); --pw-map-control-bg: #212529; --pw-map-control-text: #dee2e6; --pw-map-control-border: #495057; --pw-map-popup-bg: #212529; --pw-map-popup-text: #dee2e6; --pw-map-popup-border: #495057; --pw-map-popup-heading: #e0e0f0; --pw-map-progress-bg: #2c3034; } /* --- Dark mode tile handling -------------------------------------- */ /* No CSS invert filter — Mapbox provides native dark/light styles. */ /* --- Leaflet controls --------------------------------------------- */ [data-bs-theme="dark"] .leaflet-control-zoom a { background: var(--pw-map-control-bg); color: var(--pw-map-control-text); border-color: var(--pw-map-control-border); } [data-bs-theme="dark"] .leaflet-control-zoom a:hover { background: #343a40; } [data-bs-theme="dark"] .leaflet-control-attribution { background: rgba(33, 37, 41, 0.8); color: var(--pw-map-text-muted); } [data-bs-theme="dark"] .leaflet-control-attribution a { color: var(--pw-map-text-muted); } [data-bs-theme="dark"] .leaflet-control-layers { background: var(--pw-map-control-bg); color: var(--pw-map-control-text); border-color: var(--pw-map-control-border); } /* --- Popups ------------------------------------------------------- */ [data-bs-theme="dark"] .leaflet-popup-content-wrapper { background: var(--pw-map-popup-bg); color: var(--pw-map-popup-text); border: 1px solid var(--pw-map-popup-border); } [data-bs-theme="dark"] .leaflet-popup-tip { background: var(--pw-map-popup-bg); } [data-bs-theme="dark"] .leaflet-popup-close-button { color: var(--pw-map-text-muted); } [data-bs-theme="dark"] .leaflet-popup-close-button:hover { color: var(--pw-map-popup-text); } /* --- Dim/focus transitions ---------------------------------------- */ .leaflet-marker-icon { transition: opacity 0.35s ease; } .leaflet-interactive { transition: stroke-opacity 0.35s ease, opacity 0.35s ease; } /* --- Structure marker icons --------------------------------------- */ .pw-marker { background: none !important; border: none !important; } .pw-marker-svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); stroke-width: 1.5; } /* Selected marker highlight — box-shadow on container for solid ring */ .pw-marker-selected { border-radius: 50%; box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.8), 0 0 10px rgba(32, 107, 196, 0.5); } [data-bs-theme="dark"] .pw-marker-selected { box-shadow: 0 0 0 3px rgba(99, 163, 230, 0.8), 0 0 12px rgba(99, 163, 230, 0.5); } /* Client-side cluster icons (MarkerCluster plugin) */ .marker-cluster div { border-radius: 50%; font-size: 12px; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; } /* Server-side cluster icons — matches MarkerCluster ring style */ .pw-server-cluster { background: none !important; border: none !important; } .pw-cluster-ring { border-radius: 50%; display: flex; align-items: center; justify-content: center; } .pw-cluster-inner { border-radius: 50%; width: 70%; height: 70%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; } /* Server-side clusters */ .pw-cluster-small { background: rgba(23, 162, 184, 0.3); } .pw-cluster-small .pw-cluster-inner { background: rgba(23, 162, 184, 0.85); } .pw-cluster-medium { background: rgba(0, 133, 125, 0.3); } .pw-cluster-medium .pw-cluster-inner { background: rgba(0, 133, 125, 0.85); } .pw-cluster-large { background: rgba(0, 100, 100, 0.3); } .pw-cluster-large .pw-cluster-inner { background: rgba(0, 100, 100, 0.85); } /* Client-side clusters (Leaflet.markercluster) */ .marker-cluster-small { background: rgba(23, 162, 184, 0.3); } .marker-cluster-small div { background: rgba(23, 162, 184, 0.85); } .marker-cluster-medium { background: rgba(0, 133, 125, 0.3); } .marker-cluster-medium div { background: rgba(0, 133, 125, 0.85); } .marker-cluster-large { background: rgba(0, 100, 100, 0.3); } .marker-cluster-large div { background: rgba(0, 100, 100, 0.85); } /* --- Reset home control ------------------------------------------- */ .leaflet-control-zoom a .mdi { display: block; text-align: center; } /* --- Form map widget ------------------------------------------------- */ .pathways-map-widget { border-radius: 4px; border: 1px solid var(--pw-map-border); margin-bottom: 0.5rem; } .pathways-map-widget .leaflet-container { width: 100% !important; max-width: 100%; } [data-bs-theme="dark"] .pathways-map-widget { background: var(--pw-map-bg); } /* Geoman toolbar dark mode */ [data-bs-theme="dark"] .leaflet-pm-toolbar .button-container { background-color: var(--pw-map-control-bg); border-color: var(--pw-map-control-border); } [data-bs-theme="dark"] .leaflet-pm-toolbar .button-container:hover { background-color: #343a40; } [data-bs-theme="dark"] .leaflet-pm-actions-container a { background: var(--pw-map-control-bg); color: var(--pw-map-control-text); } /* --- Hover Popover --- */ .pw-popover { position: absolute; z-index: 1100; padding: 6px 12px; border-radius: 6px; font-size: 12px; pointer-events: none; max-width: 280px; white-space: nowrap; background: var(--tblr-card-bg, #fff); color: var(--tblr-body-color, #212529); border: 1px solid var(--tblr-border-color, #dee2e6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .pw-popover-name { font-weight: 600; } .pw-popover-type { font-size: 11px; opacity: 0.6; margin-left: 6px; } [data-bs-theme="dark"] .pw-popover { background: #1e2433; color: #e6e7e9; border-color: #3a3f4b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* --- Pathway Line Labels --- */ .pw-line-label { background: none !important; border: none !important; box-shadow: none !important; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--tblr-body-color, #333); text-shadow: -1px -1px 0 var(--tblr-body-bg, #fff), 1px -1px 0 var(--tblr-body-bg, #fff), -1px 1px 0 var(--tblr-body-bg, #fff), 1px 1px 0 var(--tblr-body-bg, #fff), 0 -1px 0 var(--tblr-body-bg, #fff), 0 1px 0 var(--tblr-body-bg, #fff), -1px 0 0 var(--tblr-body-bg, #fff), 1px 0 0 var(--tblr-body-bg, #fff); pointer-events: none; } [data-bs-theme="dark"] .pw-line-label { color: #ccc; text-shadow: -1px -1px 0 #1e1e2e, 1px -1px 0 #1e1e2e, -1px 1px 0 #1e1e2e, 1px 1px 0 #1e1e2e; } /* --- Map Legend Control --- */ .pw-legend { background: var(--tblr-card-bg, #fff); color: var(--tblr-body-color, #212529); border: 1px solid var(--tblr-border-color, #dee2e6); border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); font-size: 11px; max-width: 180px; overflow: hidden; transition: max-height 0.2s ease; } .pw-legend-header { display: flex; align-items: center; gap: 4px; padding: 5px 10px; cursor: pointer; font-weight: 600; font-size: 11px; user-select: none; border-bottom: 1px solid var(--tblr-border-color, #dee2e6); } .pw-legend-header .mdi { font-size: 13px; transition: transform 0.2s; } .pw-legend-header.collapsed .mdi { transform: rotate(-90deg); } .pw-legend-header.collapsed { border-bottom: none; } .pw-legend-body { padding: 6px 10px; } .pw-legend-body.collapsed { display: none; } .pw-legend-section { margin-bottom: 6px; } .pw-legend-section:last-child { margin-bottom: 0; } .pw-legend-section-title { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tblr-muted-color, #667382); margin-bottom: 3px; } .pw-legend-item { display: flex; align-items: center; gap: 6px; padding: 1px 0; line-height: 1.3; } .pw-legend-swatch { flex-shrink: 0; } .pw-legend-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-bs-theme="dark"] .pw-legend { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } /* --- Locked Endpoint Markers (edit widget) --- */ /* Styles defined inline in endpoint-markers.ts via Leaflet options. CSS overrides for dark mode only. */ [data-bs-theme="dark"] .leaflet-interactive.pw-locked-endpoint { stroke: #ff8c5a; } /* --- In-map helper controls (edit widget) --- */ /* Two-button leaflet-bar inserted between the zoom control and the geoman draw toolbar. Paste button expands a small panel to the right of the bar. See widget-controls.ts. */ .pathways-helpers-wrapper { display: flex; align-items: flex-start; gap: 4px; } .pathways-helpers .pathways-helper-btn { display: flex; align-items: center; justify-content: center; font-size: 18px; } .pathways-helpers .pathways-helper-btn.is-active { background-color: #f4f4f4; color: #000; } .pathways-helpers .pathways-helper-btn.is-busy { opacity: 0.6; pointer-events: none; } .pathways-paste-panel { align-items: center; gap: 2px; background: #fff; border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 2px; margin-top: 26px; /* aligns with the second (paste) button in the bar */ } .leaflet-touch .pathways-paste-panel { margin-top: 30px; } .pathways-paste-panel .pathways-paste-input { width: 18ch; height: 24px; border: 1px solid #ccc; border-radius: 2px; padding: 0 6px; background: #fff; color: #333; font: inherit; font-size: 13px; outline: none; } .pathways-paste-panel .pathways-paste-input:focus { border-color: #4a90e2; box-shadow: 0 0 0 1px #4a90e2; } .pathways-paste-panel .pathways-helper-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; line-height: 1; font-size: 16px; background: #fff; border: 1px solid #ccc; border-radius: 2px; color: #333; text-decoration: none; } .pathways-paste-panel .pathways-helper-btn:hover { background: #f4f4f4; } .pathways-helper-status { align-self: flex-start; margin-top: 26px; padding: 4px 8px; background: rgba(0, 0, 0, 0.75); color: #fff; border-radius: 4px; font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; } .leaflet-touch .pathways-helper-status { margin-top: 30px; } .pathways-helper-status.is-error { background: rgba(180, 30, 30, 0.85); } [data-bs-theme="dark"] .pathways-paste-panel { background: #2a2a2a; border-color: rgba(255, 255, 255, 0.15); } [data-bs-theme="dark"] .pathways-paste-panel .pathways-paste-input { background: #1a1a1a; border-color: #444; color: #ddd; } [data-bs-theme="dark"] .pathways-paste-panel .pathways-helper-btn { background: #2a2a2a; border-color: #444; color: #ddd; } [data-bs-theme="dark"] .pathways-paste-panel .pathways-helper-btn:hover { background: #3a3a3a; }