openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: surface meal taxonomy chips

Browse Source
This commit is contained in:
OpenClaw Bot
2026-05-12 23:27:01 +02:00
parent 7b1bf5f249
commit 7d4bb7b4bd
5 changed files with 237 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/meals.css
+31
View File
@@ -208,10 +208,41 @@
display: flex;
align-items: center;
gap: var(--space-1);
flex-wrap: wrap;
align-self: stretch;
text-align: left;
}
.meal-card__taxonomy {
margin-top: var(--space-2);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
align-self: stretch;
}
.meal-taxonomy-chip {
display: inline-flex;
align-items: center;
max-width: 100%;
min-height: 22px;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
border: 1px solid color-mix(in srgb, var(--chip-color, var(--module-accent)) 32%, transparent);
background: color-mix(in srgb, var(--chip-color, var(--module-accent)) 14%, var(--color-surface));
color: color-mix(in srgb, var(--chip-color, var(--module-accent)) 76%, var(--color-text-primary));
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: 1.2;
white-space: nowrap;
}
.meal-taxonomy-chip--category { --chip-color: var(--module-meals); }
.meal-taxonomy-chip--protein { --chip-color: var(--module-recipes); }
.meal-taxonomy-chip--style { --chip-color: var(--color-accent); }
.meal-taxonomy-chip--leftovers { --chip-color: var(--color-warning, #f59e0b); }
.meal-card__ingredients-count {
font-size: var(--text-xs);
color: var(--color-text-secondary);
public/styles/recipes.css
+26
View File
@@ -67,6 +67,32 @@
white-space: pre-wrap;
}
.recipe-card__taxonomy {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
}
.recipe-taxonomy-chip {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
border: 1px solid color-mix(in srgb, var(--chip-color, var(--module-accent)) 32%, transparent);
background: color-mix(in srgb, var(--chip-color, var(--module-accent)) 14%, var(--color-surface));
color: color-mix(in srgb, var(--chip-color, var(--module-accent)) 76%, var(--color-text-primary));
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
line-height: 1.2;
white-space: nowrap;
}
.recipe-taxonomy-chip--category { --chip-color: var(--module-meals); }
.recipe-taxonomy-chip--protein { --chip-color: var(--module-recipes); }
.recipe-taxonomy-chip--style { --chip-color: var(--color-accent); }
.recipe-card__ingredients {
margin: 0;
padding: 0;