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;
font-size: .9em;
font-weight: 500;
color: var(--foreground);
border: 1px solid transparent;
border-radius: .2rem;
border-radius: var(--border-radius);
cursor: pointer;
transition-property: color, background-color, border-color;
transition-duration: .2s;
@@ -23,7 +24,7 @@
&:hover,
&:focus-visible {
color: var(--background);
background-color: var(--blue-500);
background-color: var(--accent);
}
}
@@ -40,7 +41,7 @@
&:hover,
&:focus-visible {
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);
svg {
fill: var(--foreground);
width: 1.15em;
transition-property: fill;
transition-duration: .15s;
@@ -105,18 +107,18 @@
&:hover,
&:focus-visible {
outline-color: color-mix(in srgb, var(--blue-500) 20%, transparent);
border-color: var(--blue-500);
outline-color: color-mix(in srgb, var(--accent) 20%, transparent);
border-color: var(--accent);
svg {
fill: var(--blue-500);
fill: var(--accent);
}
}
&.active {
color: var(--background);
background-color: var(--blue-500);
border-color: var(--blue-700);
background-color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 75%, var(--background));
svg {
fill: var(--background);

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

@@ -41,10 +41,18 @@
--foreground: var(--black);
--background: var(--white);
--border: var(--slate-400);
--accent: var(--blue-500);
--border-radius: .25rem;
--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 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--foreground);

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

@@ -14,7 +14,7 @@ const { breadcrumbs = [] } = Astro.props
{breadcrumbs.map((breadcrumb, index) => (
<li>
{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">
<h1 class="label">
@@ -23,7 +23,7 @@ const { breadcrumbs = [] } = Astro.props
</span>
}
{!(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">
<span class="label">
@@ -31,7 +31,7 @@ const { breadcrumbs = [] } = Astro.props
</span>
</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>
))}
@@ -48,6 +48,7 @@ menu {
margin-top: .5rem;
padding-block: .25rem;
padding-inline: .8rem;
color: var(--foreground);
border: 1px solid var(--border);
background: var(--background);
border-radius: 100vmax;
@@ -59,6 +60,10 @@ menu {
align-items: center;
gap: .25ch;
svg {
fill: var(--foreground);
}
&:has(a:hover, a:focus-visible) {
svg.folder {
fill: var(--blue-500);
@@ -83,7 +88,7 @@ menu {
}
.icon {
width: 1.1em;
fill: var(--foreground);
}
.label {

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

@@ -275,6 +275,7 @@ menu {
padding-block: .25rem;
top: calc(var(--mouse-y) - .5rem);
left: calc(var(--mouse-x) + .75rem);
color: var(--foreground);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: .3rem;
@@ -295,13 +296,17 @@ menu {
cursor: pointer;
width: 100%;
svg {
fill: var(--foreground);
}
&:hover,
&:focus-within {
color: var(--blue-700);
background-color: var(--slate-100);
color: color-mix(in srgb, var(--accent) 90%, var(--background));
background-color: color-mix(in srgb, var(--accent) 10%, var(--background));
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);
padding: .5rem 1.2rem;
width: calc(100% - 3rem);
color: var(--foreground);
background: var(--background);
border: 1px solid var(--border);
border-radius: 25px;
@@ -338,7 +339,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
flex-grow: 1;
&::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%);
left: 0;
width: $search-icon-size;
fill: var(--slate-400);
fill: color-mix(in srgb, var(--foreground) 75%, var(--background));
pointer-events: none;
}
@@ -375,16 +376,20 @@ function resetAllFields(actionAfter?: "focusAfter") {
}
&:hover {
.icon {
color: var(--foreground);
}
&::before {
background-color: var(--slate-300);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
}
}
&:focus-visible {
&::before {
background-color: var(--slate-200);
outline: 1px dotted var(--slate-500);
outline: 4px auto var(--slate-900);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
}
}
}
@@ -399,22 +404,22 @@ function resetAllFields(actionAfter?: "focusAfter") {
&:hover {
&::before {
background-color: var(--slate-300);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
}
}
&:focus-visible {
&::before {
background-color: var(--slate-200);
outline: 1px dotted var(--slate-500);
outline: 4px auto var(--slate-900);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
}
}
}
.close-btn {
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)) {
background-color: var(--slate-100);
background-color: color-mix(in srgb, var(--foreground) 10%, var(--background));
.title {
text-decoration: underline;
@@ -490,9 +495,14 @@ function resetAllFields(actionAfter?: "focusAfter") {
.title {
font-weight: 500;
text-underline-offset: 2px;
& + .desc {
margin-top: .25rem;
}
}
.desc {
color: var(--slate-500);
color: color-mix(in srgb, var(--foreground) 50%, var(--background));
.map-link {
margin-top: .5rem;
@@ -528,12 +538,12 @@ function resetAllFields(actionAfter?: "focusAfter") {
top: 50%;
transform: translateY(-50%);
right: .75rem;
fill: var(--slate-400);
fill: color-mix(in srgb, var(--foreground) 70%, var(--background));
}
&:focus-visible {
outline: 1px dotted var(--slate-500);
outline: 4px auto var(--slate-900);
outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
.title {
text-decoration: underline;
@@ -600,8 +610,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
&[data-focused="true"] {
margin-bottom: 1em;
.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;
padding-bottom: .5rem;

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

@@ -125,6 +125,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
padding-inline: .8rem;
font-weight: 600;
font-size: .85em;
color: var(--foreground);
background: var(--background);
border: 1px solid var(--border);
border-radius: 100vmax;
@@ -145,6 +146,10 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
width: 1.1em;
}
svg {
fill: var(--foreground);
}
.label {
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" />
<script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script>
</head>
<body>
<body class="">
<slot />
</body>
</html>