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

Added theme switcher

Browse Source
This commit is contained in:
Alexis
2025-06-21 21:33:25 +02:00
parent bfdd433a5f
commit 712d408736
12 changed files with 129 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scss/_animations.scss
View File

@@ -1,7 +1,7 @@
// Animations on load
@media screen and (prefers-reduced-motion: no-preference) {
.appear-from-top {
animation: fadeIn .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation: fadeIn .2s var(--timing-function);
}
@keyframes fadeIn {

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

@@ -11,7 +11,7 @@
cursor: pointer;
transition-property: color, background-color, border-color;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-timing-function: var(--timing-function);
&:disabled {
cursor: not-allowed;
@@ -95,14 +95,14 @@
outline: .2rem solid transparent;
transition-property: color, background-color, border-color, outline-color;
transition-duration: .15s;
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition-timing-function: var(--timing-function);
svg {
fill: var(--foreground);
width: 1.15em;
transition-property: fill;
transition-duration: .15s;
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition-timing-function: var(--timing-function);
}
&:hover,

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

@@ -19,7 +19,7 @@
border-radius: var(--border-radius);
transition-property: box-shadow;
transition-duration: .2s;
transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-timing-function: var(--timing-function);
&:focus-visible {
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent);

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

@@ -39,8 +39,11 @@
box-shadow: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition-property: color, text-shadow;
transition-duration: .15s;
transition-timing-function: var(--timing-function);
@include text.stroke(2, color-mix(in srgb, var(--foreground) 10%, var(--background)));
@include text.stroke(2, var(--background));
&::before {
display: none;
@@ -59,6 +62,9 @@
color: var(--foreground);
background-color: var(--background);
border-color: var(--border);
transition-property: color, background-color, border-color, outline-color;
transition-duration: .15s;
transition-timing-function: var(--timing-function);
&:hover,
&:focus-visible {
@@ -71,6 +77,9 @@
.leaflet-touch .leaflet-control-measure {
color: var(--foreground);
background-color: var(--background);
transition-property: color, background-color, border-color, outline-color;
transition-duration: .15s;
transition-timing-function: var(--timing-function);
.leaflet-control-measure-toggle {
color: var(--foreground);
@@ -78,6 +87,9 @@
border-color: var(--border);
background-image: url('/icon/ruler.svg');
background-size: 66%;
transition-property: color, background-color, border-color, outline-color;
transition-duration: .15s;
transition-timing-function: var(--timing-function);
&:hover,
&:focus-visible {

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

@@ -2,7 +2,7 @@
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);
animation: show-overlay 150ms var(--timing-function);
z-index: 100;
}
@@ -24,7 +24,7 @@
background-color: var(--background);
border: 1px solid var(--border);
box-shadow: var(--shadow);
animation: show-content 150ms cubic-bezier(0.16, 1, 0.3, 1);
animation: show-content 150ms var(--timing-function);
&:focus {
outline: none;

8
src/assets/scss/radix/_toast.scss
View File

@@ -51,20 +51,20 @@
}
}
.toast-root[data-state='open'] {
animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
animation: slideIn 150ms var(--timing-function);
}
.toast-root[data-state='closed'] {
animation: hide 100ms ease-in;
animation: hide 100ms var(--timing-function);
}
.toast-root[data-swipe='move'] {
transform: translateX(var(--radix-toast-swipe-move-x));
}
.toast-root[data-swipe='cancel'] {
transform: translateX(0);
transition: transform 200ms ease-out;
transition: transform 200ms var(--timing-function);
}
.toast-root[data-swipe='end'] {
animation: swipeOut 100ms ease-out;
animation: swipeOut 100ms var(--timing-function);
}
@keyframes hide {

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

@@ -45,6 +45,7 @@
--border-radius: .25rem;
--shadow: color-mix(in srgb, var(--foreground) 10%, transparent) 0px 4px 12px;
--timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.dark {