Harmonize zoom buttons with other button and make all buttons border 2px. Move zoom under burger button

Author: SableRaf

pcd-website/src/components/LanguageSwitcher.vue

@@ -94,7 +94,7 @@ onUnmounted(() => document.removeEventListener('click', handleOutsideClick));
   height: 40px;
   padding: 0 0.625rem;
   background: var(--color-bg-popup);
-  border: 1px solid var(--color-border);
+  border: 2px solid var(--color-border);
   border-radius: 8px;
   cursor: pointer;
   color: var(--color-text);

pcd-website/src/components/MapView.vue

@@ -250,7 +250,7 @@ onMounted(async () => {
     for (let code = 48; code <= 57; code++) delete kb._zoomKeys[code];
   }
 
-  L.control.zoom({ position: 'bottomleft' }).addTo(map);
+  L.control.zoom({ position: 'topleft' }).addTo(map);
 
   // Manage tab order for Leaflet-injected elements:
   // - Zoom buttons stay in tab order (they are our primary map keyboard controls)
@@ -587,14 +587,14 @@ onUnmounted(() => {
 }
 
 #theme-toggle {
-  width: 75px;
+  width: 73px;
   height: 40px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: color-mix(in srgb, var(--color-bg-popup) 86%, transparent);
-  border: 1px solid var(--color-border);
+  border: 2px solid var(--color-border);
   border-radius: 999px;
   cursor: pointer;
   color: var(--color-text);
@@ -620,6 +620,7 @@ onUnmounted(() => {
   grid-template-columns: 1fr 1fr;
   align-items: center;
   padding: 4px;
+  transform: translate(0, -1px);
 }
 
 .theme-toggle__thumb {
@@ -667,7 +668,7 @@ onUnmounted(() => {
 }
 
 #theme-toggle[aria-checked="true"] .theme-toggle__thumb {
-  transform: translateX(37px);
+  transform: translateX(33px);
   background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 44%, #9d4edd 100%);
   box-shadow: 0 8px 18px rgba(88, 28, 135, 0.34);
 }

pcd-website/src/styles/global.css

@@ -176,7 +176,7 @@ html.theme-transition *::after {
   width: 40px;
   height: 40px;
   background: var(--color-bg-popup);
-  border: 1px solid var(--color-border);
+  border: 2px solid var(--color-border);
   border-radius: 8px;
   cursor: pointer;
   font-size: 1.25rem;
@@ -490,6 +490,50 @@ html.theme-transition *::after {
   color: #1a1a1a;
 }
 
+/* ─── Leaflet Zoom Controls ─────────────────────────────────── */
+.leaflet-top.leaflet-left {
+  top: calc(var(--spacing-md) + 40px + var(--spacing-sm));
+  left: var(--spacing-md);
+}
+
+.leaflet-top.leaflet-left .leaflet-control {
+  margin-left: 0;
+}
+
+.leaflet-bar {
+  border: 2px solid var(--color-border) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 10px 28px rgba(18, 19, 33, 0.18) !important;
+  backdrop-filter: blur(14px);
+}
+
+.leaflet-bar a {
+  width: 36px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  border-bottom-color: var(--color-border) !important;
+}
+
+.leaflet-bar a:first-child {
+  border-radius: 6px 6px 0 0 !important;
+}
+
+.leaflet-bar a:last-child {
+  border-radius: 0 0 6px 6px !important;
+  border-bottom: none !important;
+}
+
+/* ─── Leaflet Zoom Controls Dark Mode ───────────────────────── */
+[data-theme="dark"] .leaflet-bar a {
+  background-color: var(--color-bg-popup);
+  color: var(--color-text);
+}
+
+[data-theme="dark"] .leaflet-bar a:hover {
+  background-color: var(--color-bg-popup-hover);
+  color: var(--color-text);
+}
+
 /* ─── Leaflet Container Dark Mode ───────────────────────────── */
 [data-theme="dark"] .leaflet-container {
   background-color: var(--color-bg);