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

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

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

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

@@ -14,7 +14,7 @@
display: block; display: block;
width: 100%; width: 100%;
padding: .4rem .5rem; padding: .4rem .5rem;
border: 1px solid var(--slate-300); border: 1px solid color-mix(in srgb, var(--foreground) 30%, var(--background));
font-size: .8em; font-size: .8em;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition-property: box-shadow; transition-property: box-shadow;
@@ -22,7 +22,7 @@
transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
&:focus-visible { &: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-map-pane {
.leaflet-popup-pane { .leaflet-popup-pane {
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
color: var(--foreground);
background-color: var(--background);
border-radius: var(--border-radius); border-radius: var(--border-radius);
overflow: clip; overflow: clip;
@@ -22,6 +24,7 @@
.leaflet-popup-tip { .leaflet-popup-tip {
width: .8rem; width: .8rem;
height: .8rem; height: .8rem;
background-color: var(--background);
} }
} }
@@ -29,7 +32,7 @@
.leaflet-tooltip { .leaflet-tooltip {
&.capital-name { &.capital-name {
padding: .2rem .4rem; padding: .2rem .4rem;
color: #EEE; color: var(--foreground);
font-weight: bold; font-weight: bold;
background: none; background: none;
border: none; border: none;
@@ -37,7 +40,7 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-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 { &::before {
display: none; display: none;

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

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

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

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

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

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

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

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

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

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

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

@@ -441,7 +441,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
} }
&::-webkit-scrollbar-thumb { &::-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" /> <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 class=""> <body class="dark">
<slot /> <slot />
</body> </body>
</html> </html>