fix shadow on dark mode

ToastHawaii · Jul 21, 2024 · a1eb951 · a1eb951
1 parent b1ff736
commit a1eb951
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 24 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "/static/css/main.ac836a4f.css",
-    "main.js": "/static/js/main.b9658a40.js",
+    "main.css": "/static/css/main.ba3405f8.css",
+    "main.js": "/static/js/main.a977804a.js",
     "index.html": "/index.html",
-    "main.ac836a4f.css.map": "/static/css/main.ac836a4f.css.map",
-    "main.b9658a40.js.map": "/static/js/main.b9658a40.js.map"
+    "main.ba3405f8.css.map": "/static/css/main.ba3405f8.css.map",
+    "main.a977804a.js.map": "/static/js/main.a977804a.js.map"
   },
   "entrypoints": [
-    "static/css/main.ac836a4f.css",
-    "static/js/main.b9658a40.js"
+    "static/css/main.ba3405f8.css",
+    "static/js/main.a977804a.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html class="help" lang="en"><head><title></title><meta charset="utf-8"/><meta name="description" content=""/><link rel="manifest" href="/manifest.json"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="application-name" content=""/><meta name="apple-mobile-web-app-title" content=""/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="theme-color" content="#228b22"/><meta name="msapplication-navbutton-color" content="#228b22"/><meta name="msapplication-starturl" content="/"/><link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"/><link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#228b22"/><link rel="shortcut icon" href="/icons/favicon.ico"/><meta name="msapplication-TileColor" content="#228b22"/><meta name="msapplication-config" content="/icons/browserconfig.xml"/><link rel="stylesheet" href="/lib/leaflet.css"/><link rel="stylesheet" href="/lib/OverPassLayer.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/><meta name="monetization" content="$ilp.uphold.com/BwpBDr48YqPi"/><script src="/serviceWorkerRegister.js"></script><script defer="defer" src="/static/js/main.b9658a40.js"></script><link href="/static/css/main.ac836a4f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script><script async type="text/javascript" src="https://taginfo.openstreetmap.org/js/taglists.js"></script></body></html>
+<!doctype html><html class="help" lang="en"><head><title></title><meta charset="utf-8"/><meta name="description" content=""/><link rel="manifest" href="/manifest.json"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="application-name" content=""/><meta name="apple-mobile-web-app-title" content=""/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="theme-color" content="#228b22"/><meta name="msapplication-navbutton-color" content="#228b22"/><meta name="msapplication-starturl" content="/"/><link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"/><link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#228b22"/><link rel="shortcut icon" href="/icons/favicon.ico"/><meta name="msapplication-TileColor" content="#228b22"/><meta name="msapplication-config" content="/icons/browserconfig.xml"/><link rel="stylesheet" href="/lib/leaflet.css"/><link rel="stylesheet" href="/lib/OverPassLayer.css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/><meta name="monetization" content="$ilp.uphold.com/BwpBDr48YqPi"/><script src="/serviceWorkerRegister.js"></script><script defer="defer" src="/static/js/main.a977804a.js"></script><link href="/static/css/main.ba3405f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script><script async type="text/javascript" src="https://taginfo.openstreetmap.org/js/taglists.js"></script></body></html>
diff --git a/docs/static/css/main.ac836a4f.css → docs/static/css/main.ba3405f8.css b/docs/static/css/main.ac836a4f.css → docs/static/css/main.ba3405f8.css
diff --git a/docs/static/css/main.ac836a4f.css.map → docs/static/css/main.ba3405f8.css.map b/docs/static/css/main.ac836a4f.css.map → docs/static/css/main.ba3405f8.css.map
diff --git a/docs/static/js/main.b9658a40.js → docs/static/js/main.a977804a.js b/docs/static/js/main.b9658a40.js → docs/static/js/main.a977804a.js
diff --git a/docs/static/js/main.b9658a40.js.LICENSE.txt → docs/static/js/main.a977804a.js.LICENSE.txt b/docs/static/js/main.b9658a40.js.LICENSE.txt → docs/static/js/main.a977804a.js.LICENSE.txt
diff --git a/docs/static/js/main.b9658a40.js.map → docs/static/js/main.a977804a.js.map b/docs/static/js/main.b9658a40.js.map → docs/static/js/main.a977804a.js.map
diff --git a/src/osm-app-component/initMap.ts b/src/osm-app-component/initMap.ts
@@ -306,10 +306,13 @@ export async function initMap(
     if (!marker) return;
 
     marker.style.animation = "0.4s ease-in-out 0s forwards alternate pin-top";
+
     (marker.nextElementSibling as any).style.animation =
-      "0.4s ease-in-out 0s forwards alternate pin-top";
-    (marker.nextElementSibling as any).firstChild.style.animation =
-      "0.4s ease-in-out 0s forwards alternate pin-top-shadow";
+    "0.4s ease-in-out 0s forwards alternate pin-top";
+    if (!document.documentElement.className.includes("theme-mode-dark")) {
+      (marker.nextElementSibling as any).firstChild.style.animation =
+        "0.4s ease-in-out 0s forwards alternate pin-top-shadow";
+    }
 
     await delay(400);
 

diff --git a/src/osm-app-component/style.scss b/src/osm-app-component/style.scss
@@ -759,13 +759,16 @@ a.menu .title,
 .custom-div-icon-shadow {
   pointer-events: none;
   animation: pin-down 0.4s ease-in-out;
-  > .marker-pin {
-    box-shadow: -5px -5px 10px #ffffffab, 5px -10px 10px #ffffffba,
-      5px 5px 10px #0009, 2px 3px 4px #000000bf;
-    animation: pin-down-shadow 0.4s ease-in-out;
-  }
+
   z-index: -100000 !important;
 }
+
+html:not(.theme-mode-dark) .custom-div-icon-shadow > .marker-pin {
+  box-shadow: -5px -5px 10px #ffffffab, 5px -10px 10px #ffffffba,
+    5px 5px 10px #0009, 2px 3px 4px #000000bf;
+  animation: pin-down-shadow 0.4s ease-in-out;
+}
+
 @keyframes pin-down-shadow {
   0% {
     box-shadow: -3px -3px 15px #ffffffab, 7px -8px 15px #ffffffba,
@@ -792,9 +795,13 @@ a.menu .title,
 
 .custom-div-icon-pin:hover + .custom-div-icon-shadow {
   animation: 0.4s ease-in-out 0s infinite alternate pin-top;
+}
+
+html:not(.theme-mode-dark)
+  .custom-div-icon-pin:hover
+  + .custom-div-icon-shadow
   > .marker-pin {
-    animation: 0.4s ease-in-out 0s infinite alternate pin-top-shadow;
-  }
+  animation: 0.4s ease-in-out 0s infinite alternate pin-top-shadow;
 }
 
 @keyframes pin-top-shadow {