@import "tailwindcss" source(none); @source "../css"; @source "../js"; @source "../../lib/aprsme_web"; /* Import mobile-specific styles */ @import "./mobile.css"; /* * Z-Index Hierarchy (keep in sync across all CSS files): * 1 - Map container (#aprs-map) * 10-15 - Markers (.leaflet-marker-icon, .historical-dot-marker) * 50 - Slideover panel (.slideover-panel) — set to 1000 in component * 999 - Slideover toggle (.slideover-toggle) * 1000 - Slideover panel, marker hover states, Leaflet controls */ /* Vendor CSS files are imported via JavaScript/ESBuild */ /* A Tailwind plugin that makes "hero-#{ICON}" classes available. The heroicons installation itself is managed by your mix.exs */ @plugin "../vendor/heroicons"; /* Dark mode uses data-theme="dark" attribute on , set via localStorage */ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); /* Add variants based on LiveView classes */ @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &); @custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &); @custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &); /* Make LiveView wrapper divs transparent for layout */ [data-phx-session] { display: contents } /* This file is for your main application CSS */ /* Marker cluster styles */ .marker-cluster-small { background-color: rgba(16, 185, 129, 0.8); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .marker-cluster-small div { background-color: rgba(16, 185, 129, 0.9); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); } .marker-cluster-medium { background-color: rgba(59, 130, 246, 0.8); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .marker-cluster-medium div { background-color: rgba(59, 130, 246, 0.9); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); } .marker-cluster-large { background-color: rgba(239, 68, 68, 0.8); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .marker-cluster-large div { background-color: rgba(239, 68, 68, 0.9); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); } /* Custom cluster icon styles */ .marker-cluster { background-clip: padding-box; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); } .marker-cluster div { width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; text-align: center; border-radius: 50%; font: 13px "Helvetica Neue", Arial, Helvetica, sans-serif; color: white; font-weight: bold; line-height: 30px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .marker-cluster span { line-height: 30px; } /* Cluster animations */ .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform 0.3s ease-out, opacity 0.3s ease-out; } /* Hover effect for clusters */ .marker-cluster:hover { transform: scale(1.1); z-index: 1000 !important; } /* APRS marker styles */ .aprs-marker { transition: transform 0.2s ease-out; } .aprs-marker:hover { transform: scale(1.2); z-index: 1000 !important; } /* High-DPI support for APRS symbols */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .aprs-marker div[style*="aprs-symbols-24-0.png"] { background-image: url("/aprs-symbols/aprs-symbols-24-0@2x.png") !important; background-size: 384px 144px !important; } .aprs-marker div[style*="aprs-symbols-24-1.png"] { background-image: url("/aprs-symbols/aprs-symbols-24-1@2x.png") !important; background-size: 384px 144px !important; } .aprs-marker div[style*="aprs-symbols-24-2.png"] { background-image: url("/aprs-symbols/aprs-symbols-24-2@2x.png") !important; background-size: 384px 144px !important; } } /* Trail visualization styles */ .trail-tooltip { background-color: rgba(0, 0, 0, 0.8); border: 1px solid #1e90ff; color: white; font-size: 11px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; } /* Trail polyline hover effect */ .leaflet-interactive:hover { stroke-width: 5; stroke-opacity: 1 !important; } /* Historical trail lines */ .leaflet-interactive[stroke="#1E90FF"] { stroke-width: 3; stroke-opacity: 0.8; stroke-linecap: round; stroke-linejoin: round; } .leaflet-interactive[stroke="#1E90FF"]:hover { stroke-width: 5; stroke-opacity: 1; filter: drop-shadow(0 0 4px #1e90ff); } /* Position dot hover effect */ .leaflet-marker-icon.leaflet-interactive:hover { transform: scale(1.5); transition: transform 0.2s ease-out; } /* Trail controls styling */ .trail-toggle-control { background-color: white; border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 5px 10px; font-size: 14px; cursor: pointer; transition: background-color 0.2s ease; } .trail-toggle-control:hover { background-color: #f0f0f0; } .trail-toggle-control.active { background-color: #1e90ff; color: white; } /* Historical dot marker styles */ .historical-dot-marker { cursor: pointer; transition: transform 0.2s ease-out; } .historical-dot-marker:hover { transform: scale(1.5); z-index: 1000 !important; } .historical-dot-marker div { box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); transition: all 0.2s ease-out; } .historical-dot-marker:hover div { box-shadow: 0 0 8px rgba(255, 107, 107, 0.8); border-color: #ff6b6b !important; } /* Historical trail line styling */ .historical-trail-line { stroke-width: 3; stroke-opacity: 0.8; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: all 0.2s ease-out; z-index: 1; } .historical-trail-line:hover { stroke-width: 5; stroke-opacity: 1; filter: drop-shadow(0 0 4px currentColor); z-index: 2; } /* Ensure markers are above trail lines */ .leaflet-marker-icon { z-index: 10 !important; } .historical-dot-marker { z-index: 15 !important; }