diff options
Diffstat (limited to 'src/routes/groceries/+page.svelte')
| -rw-r--r-- | src/routes/groceries/+page.svelte | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte index a159209..df1b97b 100644 --- a/src/routes/groceries/+page.svelte +++ b/src/routes/groceries/+page.svelte @@ -65,7 +65,7 @@ } </script> -<div class="add-bar"> +<div class="grocery-add-bar"> <FuzzyAutocomplete items={data.catalog} bind:value={name} @@ -123,7 +123,7 @@ </main> <style> - .add-bar { + .grocery-add-bar { display: flex; gap: 0.5rem; padding: 0.5rem 1rem; @@ -134,7 +134,7 @@ z-index: 10; } - .add-bar button { + .grocery-add-bar button { width: 3rem; height: 3rem; flex-shrink: 0; @@ -151,25 +151,25 @@ transition: all 0.2s ease; } - .add-bar > button:nth-of-type(1) { + .grocery-add-bar > button:nth-of-type(1) { background: var(--accent); color: var(--white); box-shadow: 0 1px 2px var(--shadow); } - .add-bar > button:nth-of-type(1):hover { + .grocery-add-bar > button:nth-of-type(1):hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 8px var(--shadow-accent-lg); } - .add-bar > button:nth-of-type(2) { + .grocery-add-bar > button:nth-of-type(2) { background: var(--surface); color: var(--text-secondary); border: 1.5px solid var(--border); } - .add-bar > button:nth-of-type(2):hover { + .grocery-add-bar > button:nth-of-type(2):hover { border-color: var(--accent); color: var(--text); } |