aboutsummaryrefslogtreecommitdiff
path: root/src/lib/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/components')
-rw-r--r--src/lib/components/Button.svelte21
-rw-r--r--src/lib/components/FuzzyAutocomplete.svelte11
-rw-r--r--src/lib/components/GroceryRow.svelte18
-rw-r--r--src/lib/components/Nav.svelte52
-rw-r--r--src/lib/components/Row.svelte19
-rw-r--r--src/lib/components/ScoreBadge.svelte3
-rw-r--r--src/lib/components/SectionTitle.svelte7
-rw-r--r--src/lib/components/StatusBadge.svelte7
8 files changed, 53 insertions, 85 deletions
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 27b9b7f..cfd24f7 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -53,32 +53,25 @@
button {
cursor: pointer;
font-family: inherit;
- transition: all 0.2s ease;
border: none;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
- transform: none;
- box-shadow: none;
}
.primary {
padding: 0.75rem 1.5rem;
- border-radius: 0.75rem;
background: var(--accent);
color: var(--white);
font-size: 0.9375rem;
font-weight: 500;
align-self: flex-start;
- box-shadow: 0 1px 2px var(--shadow);
}
.primary:hover:not(:disabled) {
background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px var(--shadow-accent-lg);
}
.accent {
@@ -86,7 +79,6 @@
height: 3rem;
flex-shrink: 0;
padding: 0;
- border-radius: 0.75rem;
background: var(--accent);
color: var(--white);
font-size: 1.25rem;
@@ -94,13 +86,10 @@
display: flex;
align-items: center;
justify-content: center;
- box-shadow: 0 1px 2px var(--shadow);
}
.accent:hover:not(:disabled) {
background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px var(--shadow-accent-lg);
}
.ghost {
@@ -108,7 +97,6 @@
width: 2rem;
aspect-ratio: 1;
padding: 0;
- border-radius: 0.625rem;
background: transparent;
color: var(--text-secondary);
font-size: 1.25rem;
@@ -118,14 +106,12 @@
}
.ghost:hover:not(:disabled) {
- background: var(--danger-hover-bg);
color: var(--danger);
}
.done {
flex-shrink: 0;
padding: 0.5rem 0.875rem;
- border-radius: 0.625rem;
background: var(--success);
color: var(--white);
font-size: 0.875rem;
@@ -133,13 +119,11 @@
}
.done:hover:not(:disabled) {
- filter: brightness(1.05);
- transform: translateY(-1px);
+ background: oklch(from var(--success) calc(l - 0.05) c h);
}
.done.lg {
padding: 0.75rem 1.25rem;
- border-radius: 0.75rem;
font-size: 0.9375rem;
}
@@ -148,10 +132,9 @@
height: 3rem;
flex-shrink: 0;
padding: 0;
- border-radius: 0.75rem;
background: var(--surface);
color: var(--text-secondary);
- border: 1.5px solid var(--border);
+ border: 1px solid var(--border);
font-size: 1.25rem;
font-weight: 500;
display: flex;
diff --git a/src/lib/components/FuzzyAutocomplete.svelte b/src/lib/components/FuzzyAutocomplete.svelte
index f5bef94..da7327e 100644
--- a/src/lib/components/FuzzyAutocomplete.svelte
+++ b/src/lib/components/FuzzyAutocomplete.svelte
@@ -129,8 +129,6 @@
padding: 0.25rem;
background: var(--surface);
border: 1px solid var(--border);
- border-radius: 0.75rem;
- box-shadow: 0 4px 12px var(--shadow-accent);
z-index: 20;
max-height: 16rem;
overflow-y: auto;
@@ -138,7 +136,6 @@
.dropdown li {
padding: 0.5rem 0.625rem;
- border-radius: 0.5rem;
cursor: pointer;
display: flex;
align-items: center;
@@ -146,9 +143,13 @@
gap: 0.5rem;
}
- .dropdown li:hover,
+ .dropdown li:hover {
+ color: var(--accent);
+ }
+
.dropdown li.active {
- background: var(--surface-hover);
+ color: var(--accent);
+ font-weight: 700;
}
.name :global(mark) {
diff --git a/src/lib/components/GroceryRow.svelte b/src/lib/components/GroceryRow.svelte
index 9a88e90..8dc3f76 100644
--- a/src/lib/components/GroceryRow.svelte
+++ b/src/lib/components/GroceryRow.svelte
@@ -61,20 +61,11 @@
padding: 0 0.875rem;
height: 100%;
border: none;
- border-radius: 0.75rem;
- background: var(--surface);
+ background: transparent;
font-size: 1rem;
font-weight: 500;
display: flex;
align-items: center;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .toggle:hover {
- background: var(--surface-hover);
- box-shadow: 0 2px 6px var(--shadow-accent);
- transform: translateY(-1px);
}
.label {
@@ -94,19 +85,12 @@
display: flex;
align-items: center;
justify-content: center;
- border-radius: 0.75rem;
- background: var(--surface);
color: var(--text-secondary);
text-decoration: none;
font-size: 1rem;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
}
.open:hover {
- background: var(--surface-hover);
color: var(--accent);
- box-shadow: 0 2px 6px var(--shadow-accent);
- transform: translateY(-1px);
}
</style>
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index aa42ace..c5fcc60 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -1,19 +1,27 @@
-<script lang="ts">
+<script>
import { page } from '$app/stores';
</script>
<nav class="navbar">
- <a href="/" class:active={$page.url.pathname === '/'}>Projets</a>
- <a href="/groceries" class:active={$page.url.pathname === '/groceries'}
- >Liste</a
+ <a href="/" data-label="Projets" class:active={$page.url.pathname === '/'}
+ ><span>Projets</span></a
+ >
+ <a
+ href="/groceries"
+ data-label="Liste"
+ class:active={$page.url.pathname === '/groceries'}><span>Liste</span></a
>
<a
href="/groceries/catalog"
- class:active={$page.url.pathname === '/groceries/catalog'}>Catalogue</a
+ data-label="Catalogue"
+ class:active={$page.url.pathname === '/groceries/catalog'}
+ ><span>Catalogue</span></a
>
<a
href="/groceries/categories"
- class:active={$page.url.pathname === '/groceries/categories'}>Catégories</a
+ data-label="Catégories"
+ class:active={$page.url.pathname === '/groceries/categories'}
+ ><span>Catégories</span></a
>
</nav>
@@ -32,23 +40,37 @@
}
.navbar a {
- padding: 0.5rem 1rem;
- border-radius: 9999px;
+ height: 100%;
+ display: inline-grid;
+ align-content: center;
+ padding: 0 0.625rem;
+ font-size: 0.875rem;
color: var(--text-secondary);
text-decoration: none;
- font-size: 0.875rem;
- font-weight: 500;
- transition: all 0.2s ease;
+ }
+
+ /* Bold ghost reserves the bold advance width in the same grid cell, so the
+ active tab's font-weight change never moves its siblings. */
+ .navbar a::before {
+ content: attr(data-label);
+ grid-area: 1 / 1;
+ visibility: hidden;
+ font-weight: 700;
+ }
+
+ .navbar a span {
+ grid-area: 1 / 1;
}
.navbar a:hover {
color: var(--text);
- background: var(--surface);
}
.navbar a.active {
- background: var(--accent);
- color: var(--white);
- box-shadow: 0 1px 2px var(--shadow);
+ color: var(--text);
+ }
+
+ .navbar a.active span {
+ font-weight: 700;
}
</style>
diff --git a/src/lib/components/Row.svelte b/src/lib/components/Row.svelte
index e388392..91c86a5 100644
--- a/src/lib/components/Row.svelte
+++ b/src/lib/components/Row.svelte
@@ -23,32 +23,15 @@
display: flex;
align-items: center;
gap: 0.5rem;
+ border-bottom: 1px solid var(--border);
}
.card {
padding: 0.5rem 0.75rem;
- background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
- transition: all 0.2s ease;
- }
-
- .card:hover {
- box-shadow: 0 2px 6px var(--shadow);
- transform: translateY(-1px);
}
.ref {
padding: 0.875rem 1rem;
gap: 0.75rem;
- background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
- transition: all 0.2s ease;
- }
-
- .ref:hover {
- box-shadow: 0 2px 6px var(--shadow);
- transform: translateY(-1px);
}
</style>
diff --git a/src/lib/components/ScoreBadge.svelte b/src/lib/components/ScoreBadge.svelte
index ae11918..13205c2 100644
--- a/src/lib/components/ScoreBadge.svelte
+++ b/src/lib/components/ScoreBadge.svelte
@@ -11,7 +11,6 @@
flex-shrink: 0;
min-width: 2.75rem;
padding: 0.25rem 0.5rem;
- border-radius: 9999px;
text-align: center;
font-size: 0.875rem;
font-weight: 700;
@@ -23,7 +22,7 @@
}
.mid {
- background: var(--accent);
+ background: var(--warn);
}
.low {
diff --git a/src/lib/components/SectionTitle.svelte b/src/lib/components/SectionTitle.svelte
index be77a46..518b74a 100644
--- a/src/lib/components/SectionTitle.svelte
+++ b/src/lib/components/SectionTitle.svelte
@@ -11,13 +11,10 @@
<style>
h2,
h3 {
- font-size: 0.75rem;
+ font-size: 0.875rem;
font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.08em;
- color: var(--accent);
+ color: var(--text-secondary);
margin: 1.25rem 0 0.5rem;
padding-left: 0.5rem;
- border-left: 3px solid var(--accent);
}
</style>
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
index 2bbdf5a..ffa976b 100644
--- a/src/lib/components/StatusBadge.svelte
+++ b/src/lib/components/StatusBadge.svelte
@@ -38,7 +38,6 @@
justify-content: center;
width: 1.5rem;
height: 1.5rem;
- border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
@@ -50,12 +49,12 @@
}
.due {
- background: var(--shadow-accent);
- color: var(--accent);
+ background: var(--warn-bg);
+ color: var(--warn);
}
.late {
- background: var(--accent);
+ background: var(--warn);
color: var(--white);
}
generated by cgit v1.3 (git 2.53.0) at 2026-10-18 11:38:03 +0000