diff --git a/lib/aprsme_web/live/map_live/index.ex b/lib/aprsme_web/live/map_live/index.ex index b7ded2a..f074785 100644 --- a/lib/aprsme_web/live/map_live/index.ex +++ b/lib/aprsme_web/live/map_live/index.ex @@ -1062,10 +1062,28 @@ defmodule AprsmeWeb.MapLive.Index do cursor: pointer; } + @media (prefers-color-scheme: dark) { + .locate-button { + background: rgb(30 41 59); /* slate-800 */ + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + } + + .locate-button svg { + fill: #e2e8f0; /* slate-200 */ + } + } + .locate-button:hover { background: #f4f4f4; } + @media (prefers-color-scheme: dark) { + .locate-button:hover { + background: rgb(51 65 85); /* slate-700 */ + } + } + .aprs-marker { background: transparent !important; border: none !important; @@ -1149,6 +1167,13 @@ defmodule AprsmeWeb.MapLive.Index do box-sizing: border-box; } + @media (prefers-color-scheme: dark) { + .slideover-panel { + background: rgb(15 23 42); /* slate-900 */ + box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3); + } + } + /* Ensure proper box-sizing for all children */ .slideover-panel * { box-sizing: border-box; @@ -1197,6 +1222,14 @@ defmodule AprsmeWeb.MapLive.Index do box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); } + @media (prefers-color-scheme: dark) { + .slideover-toggle { + background: rgb(30 41 59); /* slate-800 */ + border-color: rgba(255, 255, 255, 0.1); + box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3); + } + } + .slideover-toggle.slideover-open { right: 352px; } @@ -1215,6 +1248,12 @@ defmodule AprsmeWeb.MapLive.Index do .slideover-toggle:hover { background: #f3f4f6; } + + @media (prefers-color-scheme: dark) { + .slideover-toggle:hover { + background: rgb(51 65 85); /* slate-700 */ + } + } <.error_boundary id="map-error-boundary"> @@ -1308,7 +1347,7 @@ defmodule AprsmeWeb.MapLive.Index do phx-hook="ResponsiveSlideoverHook" > -