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

Moved some variables to root

Browse Source
This commit is contained in:
Alexis
2025-06-20 20:06:07 +02:00
parent 1cb77dd6f0
commit c88133a9a3
13 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
color: var(--white); color: var(--background);
background-color: var(--blue-500); background-color: var(--blue-500);
} }
} }
@@ -39,7 +39,7 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
color: var(--white); color: var(--background);
background-color: var(--blue-500); background-color: var(--blue-500);
} }
} }
@@ -51,7 +51,7 @@
&:hover, &:hover,
&:focus-visible { &:focus-visible {
color: var(--white); color: var(--background);
background-color: var(--red-500); background-color: var(--red-500);
} }
} }
@@ -76,7 +76,7 @@
} }
&.btn-shadow { &.btn-shadow {
box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0 .2rem .3rem; box-shadow: var(--shadow);
} }
} }
@@ -85,9 +85,9 @@
place-items: center; place-items: center;
height: 45px; height: 45px;
aspect-ratio: 1; aspect-ratio: 1;
background-color: var(--white); background-color: var(--background);
border: 1px solid var(--slate-400); border: 1px solid var(--border);
box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0px 4px 12px; box-shadow: var(--shadow);
border-radius: 100vmax; border-radius: 100vmax;
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
@@ -114,12 +114,12 @@
} }
&.active { &.active {
color: var(--white); color: var(--background);
background-color: var(--blue-500); background-color: var(--blue-500);
border-color: var(--blue-700); border-color: var(--blue-700);
svg { svg {
fill: var(--white); fill: var(--background);
} }
} }
} }

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

@@ -2,13 +2,13 @@
padding-block: 0.75rem; padding-block: 0.75rem;
padding-inline: .75rem; padding-inline: .75rem;
border-radius: 8px; border-radius: 8px;
background-color: var(--white); background-color: var(--background);
border: 1px solid var(--slate-100); border: 1px solid var(--border);
box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0px 4px 12px; box-shadow: var(--shadow);
min-width: 15rem; min-width: 15rem;
.card-arrow { .card-arrow {
fill: var(--white); fill: var(--background);
} }
&.p-sm { &.p-sm {

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

@@ -16,7 +16,7 @@
padding: .4rem .5rem; padding: .4rem .5rem;
border: 1px solid var(--slate-300); border: 1px solid var(--slate-300);
font-size: .8em; font-size: .8em;
border-radius: .2rem; border-radius: var(--border-radius);
transition-property: box-shadow; transition-property: box-shadow;
transition-duration: .2s; transition-duration: .2s;
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);

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

@@ -10,7 +10,7 @@
.leaflet-map-pane { .leaflet-map-pane {
.leaflet-popup-pane { .leaflet-popup-pane {
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
border-radius: .25rem; border-radius: var(--border-radius);
overflow: clip; overflow: clip;
.leaflet-popup-content { .leaflet-popup-content {

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

@@ -19,10 +19,10 @@
padding: 25px; padding: 25px;
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
border-radius: 8px; border-radius: var(--border-radius);
background-color: var(--white); background-color: var(--background);
border: 1px solid var(--slate-100); border: 1px solid var(--border);
box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0px 4px 12px; box-shadow: var(--shadow);
animation: show-content 150ms cubic-bezier(0.16, 1, 0.3, 1); animation: show-content 150ms cubic-bezier(0.16, 1, 0.3, 1);
&:focus { &:focus {

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

@@ -23,16 +23,16 @@
grid-template-columns: auto max-content; grid-template-columns: auto max-content;
column-gap: 15px; column-gap: 15px;
align-items: center; align-items: center;
color: var(--slate-800); color: var(--foreground);
border: 1px solid var(--slate-400); border: 1px solid var(--border);
background-color: var(--white); background-color: var(--background);
border-radius: 6px; border-radius: var(--border-radius);
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
&.toast-success { &.toast-success {
color: var(--green-700); color: var(--green-700);
border: 1px solid var(--green-700); border: 1px solid var(--green-700);
background-color: color-mix(in srgb, var(--green-500) 17.5%, var(--white)); background-color: color-mix(in srgb, var(--green-500) 17.5%, var(--background));
.toast-icon svg { .toast-icon svg {
fill: var(--green-700); fill: var(--green-700);

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

@@ -37,11 +37,17 @@
--orange-700: #c2410c; --orange-700: #c2410c;
--purple-500: #8b5cf6; --purple-500: #8b5cf6;
--purple-700: #6d28d9; --purple-700: #6d28d9;
--foreground: var(--black);
--background: var(--white);
--border: var(--slate-400);
--border-radius: .25rem;
--shadow: color-mix(in srgb, var(--foreground) 10%, transparent) 0px 4px 12px;
} }
html { html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--slate-900); color: var(--foreground);
} }
a[href^='http'] { a[href^='http'] {

4
src/components/maps/MapOverlayBreadcrumbs.astro
View File

@@ -48,8 +48,8 @@ menu {
margin-top: .5rem; margin-top: .5rem;
padding-block: .25rem; padding-block: .25rem;
padding-inline: .8rem; padding-inline: .8rem;
border: 1px solid var(--slate-400); border: 1px solid var(--border);
background: var(--white); background: var(--background);
border-radius: 100vmax; border-radius: 100vmax;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
pointer-events: all; pointer-events: all;

4
src/components/maps/MarkerContent.astro
View File

@@ -101,7 +101,7 @@ const seeMapText = t('maps.go-to-map', lang)
font-weight: 600; font-weight: 600;
bottom: .5rem; bottom: .5rem;
right: 1rem; right: 1rem;
color: var(--white); color: var(--background);
z-index: 20; z-index: 20;
opacity: .6; opacity: .6;
transition-property: opacity; transition-property: opacity;
@@ -110,7 +110,7 @@ const seeMapText = t('maps.go-to-map', lang)
a { a {
padding-right: 0; padding-right: 0;
color: var(--white); color: var(--background);
text-decoration: underline; text-decoration: underline;
text-underline-offset: .15rem; text-underline-offset: .15rem;

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

@@ -275,10 +275,10 @@ menu {
padding-block: .25rem; padding-block: .25rem;
top: calc(var(--mouse-y) - .5rem); top: calc(var(--mouse-y) - .5rem);
left: calc(var(--mouse-x) + .75rem); left: calc(var(--mouse-x) + .75rem);
background-color: var(--white); background-color: var(--background);
border: 1px solid var(--slate-400); border: 1px solid var(--border);
border-radius: .3rem; border-radius: .3rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; box-shadow: var(--shadow);
z-index: 1000; z-index: 1000;
transition-property: top, left; transition-property: top, left;
transition-duration: .16s; transition-duration: .16s;
@@ -313,10 +313,10 @@ 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;
background-color: var(--white); background-color: var(--background);
border: 1px solid var(--slate-400); border: 1px solid var(--border);
border-radius: .75rem; border-radius: .75rem;
box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; box-shadow: var(--shadow);
overflow: visible; overflow: visible;
transform: translateY(1rem); transform: translateY(1rem);
transition: visibility 0s ease-out .3s, opacity .3s ease-out, transform .3s ease-out; transition: visibility 0s ease-out .3s, opacity .3s ease-out, transform .3s ease-out;

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

@@ -251,7 +251,7 @@ const menus: Menu[] = [
img { img {
display: block; display: block;
border-radius: .3rem; border-radius: .3rem;
border: .1rem solid var(--white); border: .1rem solid var(--background);
outline: .15rem solid transparent; outline: .15rem solid transparent;
} }
@@ -264,7 +264,7 @@ const menus: Menu[] = [
pointer-events: none; pointer-events: none;
.fill { fill: var(--orange-500); } .fill { fill: var(--orange-500); }
.stroke { fill: var(--white); } .stroke { fill: var(--background); }
} }
} }

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

@@ -308,10 +308,10 @@ function resetAllFields(actionAfter?: "focusAfter") {
margin-left: calc(45px + .5rem); margin-left: calc(45px + .5rem);
padding: .5rem 1.2rem; padding: .5rem 1.2rem;
width: calc(100% - 3rem); width: calc(100% - 3rem);
background: var(--white); background: var(--background);
border: 1px solid var(--slate-400); border: 1px solid var(--border);
border-radius: 25px; border-radius: 25px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; box-shadow: var(--shadow);
pointer-events: all; pointer-events: all;
@media screen and (width >= 900px) { @media screen and (width >= 900px) {

10
src/components/maps/overlay/SearchMarkersTags.vue
View File

@@ -125,10 +125,10 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
padding-inline: .8rem; padding-inline: .8rem;
font-weight: 600; font-weight: 600;
font-size: .85em; font-size: .85em;
background: var(--white); background: var(--background);
border: 1px solid var(--slate-400); border: 1px solid var(--border);
border-radius: 100vmax; border-radius: 100vmax;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; box-shadow: var(--shadow);
white-space: nowrap; white-space: nowrap;
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
@@ -154,12 +154,12 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
@each $c in $colors { @each $c in $colors {
&.#{$c} { &.#{$c} {
&.active { &.active {
color: var(--white); color: var(--background);
background-color: var(--#{$c}-500); background-color: var(--#{$c}-500);
border-color: var(--#{$c}-700); border-color: var(--#{$c}-700);
.icon { .icon {
fill: var(--white); fill: var(--background);
} }
} }