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

Fixed search results in dark mode

Browse Source
This commit is contained in:
Alexis
2025-06-21 11:33:20 +02:00
parent c88133a9a3
commit 484fe3b031
7 changed files with 69 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/scss/_buttons.scss
View File

@@ -5,8 +5,9 @@
gap: .5rem; gap: .5rem;
font-size: .9em; font-size: .9em;
font-weight: 500; font-weight: 500;
color: var(--foreground);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .2rem; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
transition-property: color, background-color, border-color; transition-property: color, background-color, border-color;
transition-duration: .2s; transition-duration: .2s;
@@ -23,7 +24,7 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
color: var(--background); color: var(--background);
background-color: var(--blue-500); background-color: var(--accent);
} }
} }
@@ -40,7 +41,7 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
color: var(--background); color: var(--background);
background-color: var(--blue-500); background-color: var(--accent);
} }
} }
} }
@@ -97,6 +98,7 @@
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
svg { svg {
fill: var(--foreground);
width: 1.15em; width: 1.15em;
transition-property: fill; transition-property: fill;
transition-duration: .15s; transition-duration: .15s;
@@ -105,18 +107,18 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
outline-color: color-mix(in srgb, var(--blue-500) 20%, transparent); outline-color: color-mix(in srgb, var(--accent) 20%, transparent);
border-color: var(--blue-500); border-color: var(--accent);
svg { svg {
fill: var(--blue-500); fill: var(--accent);
} }
} }
&.active { &.active {
color: var(--background); color: var(--background);
background-color: var(--blue-500); background-color: var(--accent);
border-color: var(--blue-700); border-color: color-mix(in srgb, var(--accent) 75%, var(--background));
svg { svg {
fill: var(--background); fill: var(--background);

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

@@ -41,10 +41,18 @@
--foreground: var(--black); --foreground: var(--black);
--background: var(--white); --background: var(--white);
--border: var(--slate-400); --border: var(--slate-400);
--accent: var(--blue-500);
--border-radius: .25rem; --border-radius: .25rem;
--shadow: color-mix(in srgb, var(--foreground) 10%, transparent) 0px 4px 12px; --shadow: color-mix(in srgb, var(--foreground) 10%, transparent) 0px 4px 12px;
} }
.dark {
--foreground: var(--slate-300);
--background: var(--slate-950);
--border: var(--slate-600);
}
html { html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--foreground); color: var(--foreground);

13
src/components/maps/MapOverlayBreadcrumbs.astro
View File

@@ -14,7 +14,7 @@ const { breadcrumbs = [] } = Astro.props
{breadcrumbs.map((breadcrumb, index) => ( {breadcrumbs.map((breadcrumb, index) => (
<li> <li>
{index === breadcrumbs.length - 1 && {index === breadcrumbs.length - 1 &&
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="icon folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>
<span class="breadcrumb" aria-current="page"> <span class="breadcrumb" aria-current="page">
<h1 class="label"> <h1 class="label">
@@ -23,7 +23,7 @@ const { breadcrumbs = [] } = Astro.props
</span> </span>
} }
{!(index === breadcrumbs.length - 1) && {!(index === breadcrumbs.length - 1) &&
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="icon folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
<a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }} data-astro-prefetch="hover"> <a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }} data-astro-prefetch="hover">
<span class="label"> <span class="label">
@@ -31,7 +31,7 @@ const { breadcrumbs = [] } = Astro.props
</span> </span>
</a> </a>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#0f172a" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#0f172a" viewBox="0 0 256 256" class="icon"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
} }
</li> </li>
))} ))}
@@ -48,6 +48,7 @@ menu {
margin-top: .5rem; margin-top: .5rem;
padding-block: .25rem; padding-block: .25rem;
padding-inline: .8rem; padding-inline: .8rem;
color: var(--foreground);
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--background); background: var(--background);
border-radius: 100vmax; border-radius: 100vmax;
@@ -59,6 +60,10 @@ menu {
align-items: center; align-items: center;
gap: .25ch; gap: .25ch;
svg {
fill: var(--foreground);
}
&:has(a:hover, a:focus-visible) { &:has(a:hover, a:focus-visible) {
svg.folder { svg.folder {
fill: var(--blue-500); fill: var(--blue-500);
@@ -83,7 +88,7 @@ menu {
} }
.icon { .icon {
width: 1.1em; fill: var(--foreground);
} }
.label { .label {

11
src/components/maps/overlay/MarkerCreator.vue
View File

@@ -275,6 +275,7 @@ menu {
padding-block: .25rem; padding-block: .25rem;
top: calc(var(--mouse-y) - .5rem); top: calc(var(--mouse-y) - .5rem);
left: calc(var(--mouse-x) + .75rem); left: calc(var(--mouse-x) + .75rem);
color: var(--foreground);
background-color: var(--background); background-color: var(--background);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: .3rem; border-radius: .3rem;
@@ -295,13 +296,17 @@ menu {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
svg {
fill: var(--foreground);
}
&:hover, &:hover,
&:focus-within { &:focus-within {
color: var(--blue-700); color: color-mix(in srgb, var(--accent) 90%, var(--background));
background-color: var(--slate-100); background-color: color-mix(in srgb, var(--accent) 10%, var(--background));
svg { svg {
fill: var(--blue-700); fill: color-mix(in srgb, var(--accent) 75%, var(--background));
} }
} }
} }

45
src/components/maps/overlay/SearchMarkers.vue
View File

@@ -308,6 +308,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
margin-left: calc(45px + .5rem); margin-left: calc(45px + .5rem);
padding: .5rem 1.2rem; padding: .5rem 1.2rem;
width: calc(100% - 3rem); width: calc(100% - 3rem);
color: var(--foreground);
background: var(--background); background: var(--background);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 25px; border-radius: 25px;
@@ -338,7 +339,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
flex-grow: 1; flex-grow: 1;
&::placeholder { &::placeholder {
color: var(--slate-400); color: color-mix(in srgb, var(--foreground) 75%, var(--background));
} }
} }
@@ -348,7 +349,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
transform: translateY(-50%); transform: translateY(-50%);
left: 0; left: 0;
width: $search-icon-size; width: $search-icon-size;
fill: var(--slate-400); fill: color-mix(in srgb, var(--foreground) 75%, var(--background));
pointer-events: none; pointer-events: none;
} }
@@ -375,16 +376,20 @@ function resetAllFields(actionAfter?: "focusAfter") {
} }
&:hover { &:hover {
.icon {
color: var(--foreground);
}
&::before { &::before {
background-color: var(--slate-300); background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
} }
} }
&:focus-visible { &:focus-visible {
&::before { &::before {
background-color: var(--slate-200); background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
outline: 1px dotted var(--slate-500); outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
outline: 4px auto var(--slate-900); outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
} }
} }
} }
@@ -399,22 +404,22 @@ function resetAllFields(actionAfter?: "focusAfter") {
&:hover { &:hover {
&::before { &::before {
background-color: var(--slate-300); background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
} }
} }
&:focus-visible { &:focus-visible {
&::before { &::before {
background-color: var(--slate-200); background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
outline: 1px dotted var(--slate-500); outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
outline: 4px auto var(--slate-900); outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
} }
} }
} }
.close-btn { .close-btn {
font-size: 1.1em; font-size: 1.1em;
color: var(--slate-500); color: color-mix(in srgb, var(--foreground) 75%, var(--background));
} }
} }
@@ -453,7 +458,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
} }
&:hover:not(:has(a:hover)) { &:hover:not(:has(a:hover)) {
background-color: var(--slate-100); background-color: color-mix(in srgb, var(--foreground) 10%, var(--background));
.title { .title {
text-decoration: underline; text-decoration: underline;
@@ -490,9 +495,14 @@ function resetAllFields(actionAfter?: "focusAfter") {
.title { .title {
font-weight: 500; font-weight: 500;
text-underline-offset: 2px; text-underline-offset: 2px;
& + .desc {
margin-top: .25rem;
}
} }
.desc { .desc {
color: var(--slate-500); color: color-mix(in srgb, var(--foreground) 50%, var(--background));
.map-link { .map-link {
margin-top: .5rem; margin-top: .5rem;
@@ -528,12 +538,12 @@ function resetAllFields(actionAfter?: "focusAfter") {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: .75rem; right: .75rem;
fill: var(--slate-400); fill: color-mix(in srgb, var(--foreground) 70%, var(--background));
} }
&:focus-visible { &:focus-visible {
outline: 1px dotted var(--slate-500); outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
outline: 4px auto var(--slate-900); outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
.title { .title {
text-decoration: underline; text-decoration: underline;
@@ -600,8 +610,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
&[data-focused="true"] { &[data-focused="true"] {
margin-bottom: 1em; margin-bottom: 1em;
.input-w { .input-w {
border-bottom: 1px solid var(--slate-200); border-bottom: 1px solid color-mix(in srgb, var(--foreground) 20%, var(--background));
margin-bottom: .5rem; margin-bottom: .5rem;
padding-bottom: .5rem; padding-bottom: .5rem;

5
src/components/maps/overlay/SearchMarkersTags.vue
View File

@@ -125,6 +125,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
padding-inline: .8rem; padding-inline: .8rem;
font-weight: 600; font-weight: 600;
font-size: .85em; font-size: .85em;
color: var(--foreground);
background: var(--background); background: var(--background);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 100vmax; border-radius: 100vmax;
@@ -145,6 +146,10 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
width: 1.1em; width: 1.1em;
} }
svg {
fill: var(--foreground);
}
.label { .label {
text-underline-offset: .15rem; text-underline-offset: .15rem;
} }

2
src/layouts/Layout.astro
View File

@@ -58,7 +58,7 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
<link rel="stylesheet" href="/leaflet-measure/leaflet-measure.css" rel="preload" /> <link rel="stylesheet" href="/leaflet-measure/leaflet-measure.css" rel="preload" />
<script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script> <script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script>
</head> </head>
<body> <body class="">
<slot /> <slot />
</body> </body>
</html> </html>