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;