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

Fixed some more UI with dark mode

Browse Source
This commit is contained in:
Alexis
2025-06-21 11:49:15 +02:00
parent 484fe3b031
commit ac6558392c
11 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@
&.btn-secondary {
&:not(:disabled) {
background-color: var(--slate-200);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
&:hover,
&:focus-visible {
@@ -29,14 +29,14 @@
}
&:disabled {
color: var(--slate-500);
background-color: var(--slate-100);
color: color-mix(in srgb, var(--foreground) 50%, var(--background));
background-color: color-mix(in srgb, var(--foreground) 10%, var(--background));
}
}
&.btn-info {
&:not(:disabled) {
background-color: var(--slate-200);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
&:hover,
&:focus-visible {
@@ -48,7 +48,7 @@
&.btn-danger {
&:not(:disabled) {
background-color: var(--slate-200);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
&:hover,
&:focus-visible {

1
src/assets/scss/_card.scss
View File

@@ -2,6 +2,7 @@
padding-block: 0.75rem;
padding-inline: .75rem;
border-radius: 8px;
color: var(--foreground);
background-color: var(--background);
border: 1px solid var(--border);
box-shadow: var(--shadow);

4
src/assets/scss/_forms.scss
View File

@@ -14,7 +14,7 @@
display: block;
width: 100%;
padding: .4rem .5rem;
border: 1px solid var(--slate-300);
border: 1px solid color-mix(in srgb, var(--foreground) 30%, var(--background));
font-size: .8em;
border-radius: var(--border-radius);
transition-property: box-shadow;
@@ -22,7 +22,7 @@
transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
&:focus-visible {
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--slate-300) 20%, transparent);
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent);
}
}
}

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

@@ -10,6 +10,8 @@
.leaflet-map-pane {
.leaflet-popup-pane {
.leaflet-popup-content-wrapper {
color: var(--foreground);
background-color: var(--background);
border-radius: var(--border-radius);
overflow: clip;
@@ -22,6 +24,7 @@
.leaflet-popup-tip {
width: .8rem;
height: .8rem;
background-color: var(--background);
}
}
@@ -29,7 +32,7 @@
.leaflet-tooltip {
&.capital-name {
padding: .2rem .4rem;
color: #EEE;
color: var(--foreground);
font-weight: bold;
background: none;
border: none;
@@ -37,7 +40,7 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
@include text.stroke(2, #18181b);
@include text.stroke(2, color-mix(in srgb, var(--foreground) 10%, var(--background)));
&::before {
display: none;

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

@@ -1,5 +1,5 @@
.dialog-overlay {
background-color: color-mix(in srgb, var(--black) 40%, transparent);
background-color: color-mix(in srgb, var(--black) 50%, transparent);
position: fixed;
inset: 0;
animation: show-overlay 150ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -19,6 +19,7 @@
padding: 25px;
display: grid;
grid-template-rows: auto 1fr;
color: var(--foreground);
border-radius: var(--border-radius);
background-color: var(--background);
border: 1px solid var(--border);
@@ -46,7 +47,7 @@
}
font-size: 1em;
color: var(--slate-800);
color: color-mix(in srgb, var(--foreground) 80%, var(--background));
line-height: 1.5;
> * + * {
@@ -71,6 +72,10 @@
}
}
.dark .dialog-description a::after {
filter: invert(1);
}
@keyframes show-overlay {
from {
opacity: 0;

4
src/components/global/CopyText.astro
View File

@@ -62,7 +62,7 @@ button {
display: inline-flex;
align-items: center;
gap: .5ch;
color: var(--slate-700);
color: color-mix(in srgb, var(--foreground) 70%, var(--background));
cursor: pointer;
text-underline-offset: 2px;
text-decoration: none;
@@ -75,7 +75,7 @@ button {
svg {
width: 1rem;
height: 1rem;
fill: var(--slate-700);
fill: color-mix(in srgb, var(--foreground) 70%, var(--background));
}
}
</style>

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

@@ -49,7 +49,7 @@ a {
&:hover,
&:focus-visible {
background-color: var(--slate-200);
background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
}
&[aria-current="page"] {

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

@@ -318,6 +318,7 @@ dialog {
max-width: calc(100% - 6rem);
padding: 1.5rem 2rem;
z-index: 9999;
color: var(--foreground);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: .75rem;

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

@@ -213,6 +213,10 @@ const menus: Menu[] = [
}
}
.dark .legal::before {
filter: invert(1);
}
.map-menu {
margin-top: .25rem;
margin-bottom: .5rem;
@@ -271,7 +275,7 @@ const menus: Menu[] = [
figcaption {
font-size: .75em;
text-align: center;
color: var(--slate-500);
color: color-mix(in srgb, var(--foreground) 80%, var(--background));
}
}
}

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

@@ -441,7 +441,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
}
&::-webkit-scrollbar-thumb {
background-color: var(--slate-300);
background-color: color-mix(in srgb, var(--foreground) 30%, var(--background));
}
> * + * {

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 class="">
<body class="dark">
<slot />
</body>
</html>