Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added dark mode ui for leaflet controls

Browse Source
This commit is contained in:
Alexis
2025-06-21 14:32:23 +02:00
parent ac6558392c
commit bfdd433a5f
9 changed files with 59 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/icon/question-mark-dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="#FFF"><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

1
public/icon/ruler-dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFF" viewBox="0 0 256 256"><path d="M235.32,73.37,182.63,20.69a16,16,0,0,0-22.63,0L20.68,160a16,16,0,0,0,0,22.63l52.69,52.68a16,16,0,0,0,22.63,0L235.32,96A16,16,0,0,0,235.32,73.37ZM84.68,224,32,171.31l32-32,26.34,26.35a8,8,0,0,0,11.32-11.32L75.31,128,96,107.31l26.34,26.35a8,8,0,0,0,11.32-11.32L107.31,96,128,75.31l26.34,26.35a8,8,0,0,0,11.32-11.32L139.31,64l32-32L224,84.69Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 461 B

1
public/icon/ruler.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#020617" viewBox="0 0 256 256"><path d="M235.32,73.37,182.63,20.69a16,16,0,0,0-22.63,0L20.68,160a16,16,0,0,0,0,22.63l52.69,52.68a16,16,0,0,0,22.63,0L235.32,96A16,16,0,0,0,235.32,73.37ZM84.68,224,32,171.31l32-32,26.34,26.35a8,8,0,0,0,11.32-11.32L75.31,128,96,107.31l26.34,26.35a8,8,0,0,0,11.32-11.32L107.31,96,128,75.31l26.34,26.35a8,8,0,0,0,11.32-11.32L139.31,64l32-32L224,84.69Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 464 B

1
public/icon/square-arrow-out-dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M224,104a8,8,0,0,1-13.66,5.66L184,83.31l-42.34,42.35a8,8,0,0,1-11.32-11.32L172.69,72,146.34,45.66A8,8,0,0,1,152,32h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z" fill="#FFF" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 405 B

44
src/assets/scss/_leaflet.scss
View File

@@ -50,3 +50,47 @@
}
}
}
.leaflet-touch .leaflet-bar {
border-color: var(--border);
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
color: var(--foreground);
background-color: var(--background);
border-color: var(--border);
&:hover,
&:focus-visible {
color: var(--background);
background-color: var(--accent);
}
}
}
.leaflet-touch .leaflet-control-measure {
color: var(--foreground);
background-color: var(--background);
.leaflet-control-measure-toggle {
color: var(--foreground);
background-color: var(--background);
border-color: var(--border);
background-image: url('/icon/ruler.svg');
background-size: 66%;
&:hover,
&:focus-visible {
color: var(--background);
background-color: var(--accent);
}
}
}
.dark {
.leaflet-touch .leaflet-control-measure {
.leaflet-control-measure-toggle {
background-image: url('/icon/ruler-dark.svg');
}
}
}

9
src/assets/scss/radix/_dialog.scss
View File

@@ -64,16 +64,7 @@
text-decoration: none;
color: var(--green-500);
}
&::after {
top: 50%;
transform: translateY(-70%);
}
}
}
.dark .dialog-description a::after {
filter: invert(1);
}
@keyframes show-overlay {

10
src/assets/scss/theme.scss
View File

@@ -59,11 +59,11 @@ html {
}
a[href^='http'] {
padding-right: 1.25em;
white-space: nowrap;
orphans: 2;
}
a[href^='http']::after {
position: absolute;
content: url('/icon/square-arrow-out.svg');
display: inline-block;
width: 1em;
@@ -71,6 +71,12 @@ a[href^='http']::after {
margin-left: .25em;
}
.dark {
a[href^='http']::after {
content: url('/icon/square-arrow-out-dark.svg');
}
}
strong {
font-weight: 600;
}

4
src/components/maps/MarkerContent.astro
View File

@@ -101,7 +101,7 @@ const seeMapText = t('maps.go-to-map', lang)
font-weight: 600;
bottom: .5rem;
right: 1rem;
color: var(--background);
color: var(--white);
z-index: 20;
opacity: .6;
transition-property: opacity;
@@ -110,7 +110,7 @@ const seeMapText = t('maps.go-to-map', lang)
a {
padding-right: 0;
color: var(--background);
color: var(--white);
text-decoration: underline;
text-underline-offset: .15rem;

2
src/components/maps/overlay/SearchMapSwitch.vue
View File

@@ -214,7 +214,7 @@ const menus: Menu[] = [
}
.dark .legal::before {
filter: invert(1);
content: url('/icon/question-mark-dark.svg');
}
.map-menu {