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

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;
}