nicholas/formulation
1
0
Fork 0
Code Pull Requests Actions Activity

fix(ui): normalize background colors to Meez white and render section headings in view mode

Browse Source
This commit is contained in:
nicholas
2026-08-17 11:04:37 -05:00
parent 685cf86819
commit f3d81d598c
7 changed files with 164 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/application/pages/app/inventory/[id].astro
+1 -1
View File
@@ -540,7 +540,7 @@ const isCompleted = count.status === "completed";
text-align: left;
}
.count-items-table th {
background: #fbfbfb;
background: #ffffff;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
src/application/pages/app/inventory/index.astro
+2 -2
View File
@@ -317,7 +317,7 @@ database.close();
gap: 16px;
}
.inventory-table-head {
background: #fbfbfb;
background: #ffffff;
border-bottom: 1px solid var(--line);
font-size: 11px;
text-transform: uppercase;
@@ -465,7 +465,7 @@ database.close();
display: flex;
justify-content: flex-end;
gap: 10px;
background: #fbfbfb;
background: #ffffff;
}
.cancel-btn {
height: 36px;
src/application/pages/app/recipes/[id].astro
+27 -3
View File
@@ -278,9 +278,33 @@ const recipeTabIcon=(name:string)=>`<span class="recipe-tab-icon"><svg viewBox="
</section>
) : (
<section class="recipe-view-method recipe-tab-panel active" data-recipe-panel="method">
<h2>Prep Method <small>{domainRecipe.steps.length}</small></h2>
<ol>
{domainRecipe.steps.map(step=><li class:list={{placeholder:step.instruction.startsWith("TODO:")}}><strong>{step.order}.</strong><span>{step.instruction}</span></li>)}
<h2>Prep Method <small>{domainRecipe.steps.filter(s => !s.instruction.trim().endsWith(":") && !/^\(.+\)$/.test(s.instruction.trim())).length || domainRecipe.steps.length}</small></h2>
<ol class="method-steps-list">
{(() => {
let stepCount = 0;
return domainRecipe.steps.map((step) => {
const text = step.instruction.trim();
const isHeading = text.endsWith(":");
const isNote = /^\(.+\)$/.test(text);
if (!isHeading && !isNote) {
stepCount += 1;
}
return (
<li class:list={["method-step-item", { "prep-heading": isHeading, "prep-note": isNote, placeholder: text.startsWith("TODO:") }]}>
{isHeading ? (
<h3 class="method-heading-text">{text}</h3>
) : isNote ? (
<p class="method-note-text">{text}</p>
) : (
<>
<strong>{stepCount}.</strong>
<span>{step.instruction}</span>
</>
)}
</li>
);
});
})()}
</ol>
</section>
)}
src/components/RecipeCalculator.tsx
+4 -1
View File
@@ -127,7 +127,10 @@ export default function RecipeCalculator({ components, units, basisUnitId, yield
{calculatePercent&&percentMode==="bakers"&&baseItems.length>0&&<section class="bakers-base-summary"><strong>Base</strong><div>{baseItems.map(item=>{const displayUnitId=lineUnits[item.id]??item.amount.unit_id;const displayQuantity=convertItem(item.amount.quantity*validFactor,item.amount.unit_id,displayUnitId,item,units);return <p><span><input aria-label={`${item.label} base quantity`} type="number" min="0" step="any" value={roundForDisplay(displayQuantity)} onInput={(event)=>{const canonicalQuantity=convertItem(Number(event.currentTarget.value),displayUnitId,item.amount.unit_id,item,units);setFactor(item.amount.quantity>0?canonicalQuantity/item.amount.quantity:1)}}/><select aria-label={`${item.label} base unit`} value={displayUnitId} onChange={(event)=>setLineUnits((current)=>({...current,[item.id]:event.currentTarget.value}))}>{itemUnits(item,units).map(unit=><option value={unit.id}>{unit.symbol}</option>)}</select></span><a href={item.href}>{item.label}</a></p>})}</div></section>}
{components.map((component) => (
<div class="formula-component" key={component.id}>
{components.length > 1 && <h3>{component.name}</h3>}
{Boolean(component.name?.trim()) && <h3 class="formula-component-heading">{component.name}</h3>}
{(component.notes ?? []).filter(Boolean).map((note, noteIdx) => (
<p key={noteIdx} class="formula-component-note">{note}</p>
))}
<div class="table-wrap">
<table class="recipe-ingredients">
<thead><tr><th>Amount</th><th>Ingredient</th>{calculatePercent&&<th>{percentMode==="standard"?"Standard %":"Baker's %"}</th>}</tr></thead>
src/styles/base.css
+6 -7
View File
@@ -41,14 +41,13 @@
--ink-secondary: #3C4679;
--muted: #8283a0;
--muted-light: #a5a9c1;
--muted-subtle: #757677;
--paper: #f3f3f3;
--paper: #ffffff;
--card: #ffffff;
--card-alt: #fbfbfb;
--card-alt: #fafbfd;
--card-paper: #f1f5fe;
--line: #ececec;
--line-subtle: #f3f3f3;
--line-focus: #dadada;
--line: #edf0f5;
--line-subtle: #f4f5f8;
--line-focus: #3d5df6;
--blue: #3d5df6;
--blue-hover: #1236e1;
--blue-active: #001992;
@@ -152,7 +151,7 @@ a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em;
display: flex;
align-items: center;
gap: 8px;
background: #fbfbfb;
background: #ffffff;
border: 1px solid #ececec;
border-radius: 4px;
padding: 4px 10px;
src/styles/global.css
+120 -69
View File
@@ -43,14 +43,13 @@
--ink-secondary: #3C4679;
--muted: #8283a0;
--muted-light: #a5a9c1;
--muted-subtle: #757677;
--paper: #f3f3f3;
--paper: #ffffff;
--card: #ffffff;
--card-alt: #fbfbfb;
--card-alt: #fafbfd;
--card-paper: #f1f5fe;
--line: #ececec;
--line-subtle: #f3f3f3;
--line-focus: #dadada;
--line: #edf0f5;
--line-subtle: #f4f5f8;
--line-focus: #3d5df6;
--blue: #3d5df6;
--blue-hover: #1236e1;
--blue-active: #001992;
@@ -252,28 +251,28 @@ th { font-size:.7rem; letter-spacing:.06em; }
.ingredient-purchase-form > header button { padding:5px 7px; color:#f63d48; background:transparent; border:0; cursor:pointer; font-size:11px; }
.ingredient-purchase-form .purchase-item-form { margin:0; padding:0; background:#fff; border:0; border-radius:0; }
.ingredient-purchase-form .purchase-item-form label { color:#3c4679; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; }
.ingredient-purchase-form .purchase-item-form input,.ingredient-purchase-form .purchase-item-form select { min-height:44px; padding:9px 10px; background:#fbfbfb; border-color:#ececec; border-radius:0; }
.ingredient-purchase-form .purchase-item-form input,.ingredient-purchase-form .purchase-item-form select { min-height:44px; padding:9px 10px; background:#ffffff; border-color:#ececec; border-radius:0; }
.ingredient-purchase-form .purchase-form-actions button { padding:9px 16px; background:#3d5df6; border-color:#3d5df6; border-radius:20px; }
.ingredient-cost-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:12px 0; border-bottom:1px solid #f3f3f3; }
.ingredient-cost-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding:12px 0; border-bottom:1px solid #edf0f5; }
.ingredient-cost-row > span:last-child { text-align:right; }
.ingredient-cost-row strong,.ingredient-cost-row small { display:block; }
.ingredient-cost-row small { margin-top:3px; color:#a5a9c1; font-size:11px; }
.detail-actions-menu label { display:grid; gap:6px; padding:9px 14px; color:#a5a9c1; font-size:11px; }
.detail-actions-menu select { width:250px; padding:9px; }
.application-body .ingredient-actions-menu > div { width:290px; }
@media (min-width:981px) { .application-body .entity-detail-shell .entity-primary { background:#fbfbfb; } }
.application-body .entity-detail-shell .entity-detail-header { background:#fbfbfb; }
@media (min-width:981px) { .application-body .entity-detail-shell .entity-primary { background:#ffffff; } }
.application-body .entity-detail-shell .entity-detail-header { background:#ffffff; }
.application-body .entity-detail-shell .entity-primary { padding-top:35px; }
.application-body .entity-detail-shell .entity-section { margin-bottom:35px; }
.application-body .entity-detail-shell .entity-section h2,.application-body .entity-detail-shell .entity-tab-panel h2 { color:#050841; font-size:22px; font-weight:700; line-height:1.25; }
.application-body .entity-detail-shell .panel-intro { max-width:640px; margin:5px 0 20px; color:#95969c; font-size:14px; line-height:1.5; }
.application-body .entity-detail-shell .entity-tabs { position:relative; min-height:58px; background:#fff; border-color:#f3f3f3; }
.application-body .entity-detail-shell .entity-tabs { position:relative; min-height:58px; background:#fff; border-color:#edf0f5; }
.application-body .entity-detail-shell .entity-tabs button { min-height:58px; padding:8px 12px; color:#050841; font-size:15px; font-weight:400; }
.application-body .entity-detail-shell .entity-tabs button.active { color:#050841; background:#f1f5fe; border-bottom:2px solid #3d5df6; }
.application-body .entity-detail-shell .entity-tab-panel { padding:35px 2px 60px; }
.application-body .entity-detail-shell .prep-action-table { width:100%; margin-top:26px; table-layout:fixed; }
.application-body .entity-detail-shell .prep-action-table th { height:40px; padding:8px 10px; color:#757677; background:#fbfbfb; border-color:#f3f3f3; font-size:12px; }
.application-body .entity-detail-shell .prep-action-table td { height:58px; padding:10px; color:#050841; background:#fff; border:1px solid #f3f3f3; font-size:14px; }
.application-body .entity-detail-shell .prep-action-table th { height:40px; padding:8px 10px; color:#757677; background:#ffffff; border-color:#edf0f5; font-size:12px; }
.application-body .entity-detail-shell .prep-action-table td { height:58px; padding:10px; color:#050841; background:#fff; border:1px solid #edf0f5; font-size:14px; }
.application-body .entity-detail-shell .inline-editor > summary,.application-body .entity-detail-shell .add-purchase > summary { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; color:#202962; background:#fff; border:1px solid #202962; border-radius:22px; font-size:14px; font-weight:600; list-style:none; }
.application-body .entity-detail-shell .inline-editor > summary::-webkit-details-marker,.application-body .entity-detail-shell .add-purchase > summary::-webkit-details-marker { display:none; }
.application-body .entity-detail-shell .inline-form { gap:10px; margin-top:18px; padding-top:18px; border-color:#f3f3f3; }
@@ -375,13 +374,13 @@ th { font-size:.7rem; letter-spacing:.06em; }
.application-body {
--ink:#050841;
--muted:#a5a9c1;
--paper:#f3f3f3;
--paper:#ffffff;
--card:#fff;
--line:#eeeeF3;
--line:#edf0f5;
--green:#3d5df6;
--orange:#647df8;
color:#050841;
background:#f3f3f3;
background:#ffffff;
font-family:var(--meez-font-sans);
font-size:16px;
font-weight:300;
@@ -396,10 +395,10 @@ th { font-size:.7rem; letter-spacing:.06em; }
/* Home workspace */
.application-body .directory-workspace { width:min(1120px,calc(100% - 48px)); padding:26px 0 32px; }
.application-body .workspace-search-tools { position:sticky; top:0; z-index:20; display:flex; align-items:center; min-height:80px; margin:0; background:#fbfbfb; }
.application-body .workspace-search-tools { position:sticky; top:0; z-index:20; display:flex; align-items:center; min-height:80px; margin:0; background:#ffffff; }
.application-body .workspace-search-tools-inner { width:min(1120px,calc(100% - 48px)); margin-inline:auto; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.application-body .workspace-search-tools-inner .workspace-new-menu { margin-left:0; }
.application-body .workspace-global-search { flex:0 1 504px; min-height:40px; padding:0 12px; display:flex; align-items:center; gap:5px; background:#fff; border:1px solid #f3f3f3; border-radius:4px; box-shadow:none; }
.application-body .workspace-global-search { flex:0 1 504px; min-height:40px; padding:0 12px; display:flex; align-items:center; gap:5px; background:#fff; border:1px solid #edf0f5; border-radius:4px; box-shadow:none; }
.application-body .workspace-global-search .search-icon { flex:none; color:#8283a0; }
.application-body .workspace-global-search:focus-within { box-shadow:none; }
.application-body form.workspace-global-search input[type="search"] { flex:1; min-width:0; padding:8px 0 6px; color:rgba(0,0,0,0.87); background:transparent; border:0; border-radius:0; font-size:16px; font-weight:400; }
@@ -478,7 +477,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .workspace-pill-icon.book { background:#f3a642; }
.application-body .workspace-pills .filter-menu summary { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; color:rgba(0,0,0,0.87); background:transparent; border:0; border-radius:20px; font-size:16px; font-weight:400; }
.application-body .entity-directory-table { overflow:visible; border:0; background:#fff; }
.application-body .entity-directory-toolbar { grid-template-columns:36px 64px minmax(0,1fr) auto; gap:8px; min-height:57px; padding:0; background:#fbfbfb; border-bottom:1px solid #f3f3f3; }
.application-body .entity-directory-toolbar { grid-template-columns:36px 64px minmax(0,1fr) auto; gap:8px; min-height:57px; padding:0; background:#ffffff; border-bottom:1px solid #edf0f5; }
.application-body .entity-directory-toolbar.has-selection { grid-template-columns:36px minmax(0,1fr); }
.application-body .entity-directory-selection-bar { display:flex; align-items:center; justify-content:space-between; width:100%; padding-right:8px; }
.application-body .selection-count { color:#3d5df6; font-size:15px; font-weight:600; }
@@ -491,7 +490,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .bulk-action-btn.bulk-clear:hover { background:#f4f6fa; border-color:#a5a9c1; color:#050841; }
.application-body .entity-directory-head > span { font-size:14px; font-weight:400; color:#a5a9c1; text-transform:none; }
.application-body .entity-directory-head > span:nth-child(2) { text-align:left; padding-left:2px; }
.application-body .entity-directory-row,.application-body .entity-directory-row.columns-1,.application-body .entity-directory-row.columns-2,.application-body .entity-directory-row.columns-3 { grid-template-columns:36px 64px minmax(14rem,1fr) 36px; gap:8px; min-height:57px; padding:0; border-bottom:1px solid #f3f3f3; }
.application-body .entity-directory-row,.application-body .entity-directory-row.columns-1,.application-body .entity-directory-row.columns-2,.application-body .entity-directory-row.columns-3 { grid-template-columns:36px 64px minmax(14rem,1fr) 36px; gap:8px; min-height:57px; padding:0; border-bottom:1px solid #edf0f5; }
.application-body .entity-directory-table.read-only .entity-directory-row { grid-template-columns:30px minmax(0,1fr); }
.application-body .entity-directory-row.selected { background:#f1f5fe; }
.application-body .entity-directory-name a,.application-body .entity-directory-name strong { color:#050841; font-size:15px; font-weight:500; }
@@ -536,7 +535,7 @@ input[type="search"]::-webkit-search-results-decoration,
/* Full-width entity workspaces */
.application-body .immersive-main { color:#050841; background:#fff; }
.application-body .detail-utility { min-height:58px; padding:8px 28px; background:#fbfbfb; border-color:#f3f3f3; }
.application-body .detail-utility { min-height:58px; padding:8px 28px; background:#ffffff; border-color:#edf0f5; }
.application-body .detail-utility input::placeholder { color:#a5a9c1; }
.application-body .detail-utility > a { color:#202962; font-size:13px; font-weight:500; }
.application-body .immersive-main .entity-detail-header { min-height:164px; padding:25px 38px; border-color:#eeeef3; }
@@ -547,7 +546,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .immersive-main .entity-detail-grid,.application-body .immersive-main .recipe-structure-workspace .structure-editor { border-color:#eeeef3; }
.application-body .immersive-main .entity-primary { padding:42px 38px; border-color:#eeeef3; }
.application-body .immersive-main .entity-secondary { padding:0 32px; }
.application-body .entity-tabs { min-height:58px; border-color:#f3f3f3; }
.application-body .entity-tabs { min-height:58px; border-color:#edf0f5; }
.application-body .entity-tabs button,.application-body .recipe-workspace-tabs button { padding:17px 10px; color:#202962; font-size:15px; font-weight:400; }
.application-body .entity-tabs button.active,.application-body .recipe-workspace-tabs button.active { color:#050841; background:#f1f5fe; border-bottom:2px solid #3d5df6; }
.application-body .entity-tab-panel { padding-top:38px; }
@@ -798,7 +797,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .detail-actions-menu button { display:block; width:100% !important; max-width:100% !important; min-height:44px; padding:10px 20px; color:#050841; background:transparent; border:0; border-radius:0; cursor:pointer; font-size:15px; font-weight:500; text-align:left; white-space:nowrap; box-sizing:border-box; }
.application-body .detail-actions-menu button:hover { background:#f1f5fe; }
/* Recipe Books */
.application-body .recipe-book-page { min-height: 100vh; background: #f3f3f3; padding-top: 48px; }
.application-body .recipe-book-page { min-height: 100vh; background: #ffffff; padding-top: 48px; }
.application-body .recipe-book-workspace { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 64px; }
.application-body .recipe-book-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.application-body .recipe-book-breadcrumbs { margin-bottom: 8px; }
@@ -815,13 +814,13 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .book-action-btn.active { color: #687086; }
.application-body .book-notice { margin-bottom: 20px; padding: 12px 16px; background: #fff1f1; border: 1px solid #f5cece; border-radius: 6px; color: #8d2e2e; font-size: 14px; }
.application-body .book-directory-table { background: #fff; border: 1px solid #eef0f5; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.application-body .book-directory-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; background: #fbfbfb; border-bottom: 1px solid #f3f3f3; }
.application-body .book-directory-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; background: #ffffff; border-bottom: 1px solid #edf0f5; }
.application-body .book-toolbar-title { color: #050841; font-size: 14px; font-weight: 600; }
.application-body .book-toolbar-count { color: #8b93a7; font-size: 13px; font-weight: 400; }
.application-body .book-recipe-list { display: flex; flex-direction: column; }
.application-body .book-recipe-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #f3f3f3; transition: background-color 0.12s ease; }
.application-body .book-recipe-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #edf0f5; transition: background-color 0.12s ease; }
.application-body .book-recipe-row:last-child { border-bottom: 0; }
.application-body .book-recipe-row:hover { background: #fbfbfb; }
.application-body .book-recipe-row:hover { background: #f8faff; }
.application-body .book-recipe-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #3c4679; border-radius: 50%; color: #fff; }
.application-body .book-recipe-title { color: #050841; font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.12s ease; }
.application-body .book-recipe-title:hover { color: #3d5df6; }
@@ -846,7 +845,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .book-input, .application-body .book-textarea { width: 100%; padding: 10px 14px; background: #fff; border: 1px solid #dfe3ec; border-radius: 4px; color: #050841; font-family: var(--meez-font-sans); font-size: 15px; font-weight: 400; outline: none; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.application-body .book-input:focus, .application-body .book-textarea:focus { border-color: #3d5df6; box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.15); }
.application-body .book-recipe-checklist { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.application-body .book-checklist-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: #fff; border: 1px solid #f3f3f3; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.application-body .book-checklist-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: #fff; border: 1px solid #edf0f5; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.application-body .book-checklist-item:hover { background: #f7f9fd; border-color: #e4e7ed; }
.application-body .book-checklist-item:has(.book-checkbox:checked) { background: #f1f5fe; border-color: #cfd5fa; }
.application-body .book-checkbox { width: 18px; height: 18px; margin: 0; accent-color: #3d5df6; cursor: pointer; }
@@ -880,7 +879,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .workspace-pills > a.archive-link { margin-left:auto; color:#a5a9c1; background:transparent; border-color:transparent; }
/* Archive Workspace */
.application-body .archive-page { min-height: 100vh; background: #f3f3f3; padding-top: 48px; }
.application-body .archive-page { min-height: 100vh; background: #ffffff; padding-top: 48px; }
.application-body .archive-workspace { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 64px; }
.application-body .archive-header { margin-bottom: 24px; }
.application-body .archive-breadcrumbs { margin-bottom: 8px; }
@@ -894,10 +893,10 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .archive-chip.active { background: #DBE4FF; border-color: #DBE4FF; }
.application-body .archive-chip .chip-count { color: #8b93a7; font-size: 12px; font-weight: 500; }
.application-body .archive-table { background: #fff; border: 1px solid #eef0f5; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.application-body .archive-table-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 48px; padding: 0 20px; background: #fbfbfb; border-bottom: 1px solid #f3f3f3; color: #8b93a7; font-size: 13px; font-weight: 500; }
.application-body .archive-table-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #f3f3f3; transition: background-color 0.12s ease; }
.application-body .archive-table-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 48px; padding: 0 20px; background: #ffffff; border-bottom: 1px solid #edf0f5; color: #8b93a7; font-size: 13px; font-weight: 500; }
.application-body .archive-table-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 180px 120px; align-items: center; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #edf0f5; transition: background-color 0.12s ease; }
.application-body .archive-table-row:last-child { border-bottom: 0; }
.application-body .archive-table-row:hover { background: #fbfbfb; }
.application-body .archive-table-row:hover { background: #f8faff; }
.application-body .archive-type-cell { display: flex; align-items: center; }
.application-body .archive-name-cell { display: flex; flex-direction: column; min-width: 0; }
.application-body .archive-item-title { color: #050841; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -908,7 +907,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .empty-icon-circle { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; background: #f1f5fe; border-radius: 50%; color: #3d5df6; }
/* Purchasing Review Tool */
.application-body .purchasing-review-page { min-height: 100vh; background: #f3f3f3; padding-top: 48px; }
.application-body .purchasing-review-page { min-height: 100vh; background: #ffffff; padding-top: 48px; }
.application-body .purchasing-review-workspace { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 64px; }
.application-body .purchasing-review-header { margin-bottom: 24px; }
.application-body .purchasing-breadcrumbs { margin-bottom: 8px; }
@@ -922,7 +921,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .stats-label { color: #050841; font-size: 14px; font-weight: 500; }
.application-body .stats-hint { color: #8b93a7; font-size: 12px; }
.application-body .purchasing-review-actions { display: flex; align-items: center; gap: 12px; }
.application-body .purchasing-search-box { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; background: #fbfbfb; border: 1px solid #dfe3ec; border-radius: 4px; }
.application-body .purchasing-search-box { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; background: #ffffff; border: 1px solid #dfe3ec; border-radius: 4px; }
.application-body .purchasing-search-box .search-icon { color: #8283a0; flex: none; }
.application-body .purchasing-search-box input { border: 0; background: transparent; outline: none; font-family: var(--meez-font-sans); font-size: 14px; color: #050841; min-width: 180px; }
.application-body .search-clear-btn { background: transparent; border: 0; color: #a5a9c1; font-size: 18px; cursor: pointer; padding: 0 2px; }
@@ -1163,8 +1162,13 @@ input[type="search"]::-webkit-search-results-decoration,
color: #050841;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.application-body .unified-recipe-editor .editor-items tr.component-header-row,
.application-body .unified-recipe-editor .editor-items tr.component-header-row:hover,
.application-body .unified-recipe-editor .editor-items tr.component-header-row:focus-within {
background: transparent !important;
}
.application-body .unified-recipe-editor .editor-items tr.component-header-row td {
padding: 16px 0 6px;
padding: 18px 0 6px;
border-bottom: 0;
background: transparent;
}
@@ -1173,15 +1177,17 @@ input[type="search"]::-webkit-search-results-decoration,
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
padding: 4px 12px;
background: #f3f3f3;
border-radius: 8px;
transition: background-color 0.15s ease;
min-height: 38px;
padding: 4px 0;
background: transparent;
border-bottom: 1px solid #edf0f5;
border-radius: 0;
transition: border-color 0.15s ease;
}
.application-body .unified-recipe-editor .component-header-content:hover,
.application-body .unified-recipe-editor .component-header-content:focus-within {
background: #ebedf2;
background: transparent;
border-bottom-color: #3d5df6;
}
.application-body .unified-recipe-editor .component-name-input {
width: 100%;
@@ -1933,9 +1939,9 @@ input[type="search"]::-webkit-search-results-decoration,
.bulk-ingredient-dialog .bulk-submit:disabled { background:#aeb9f8; cursor:not-allowed; }
.bulk-prep-dialog { width:min(860px,100%); }
.bulk-prep-dialog textarea { min-height:390px; }
.application-body .unified-recipe-editor .method-editor li.prep-heading { min-height:70px; padding-block:18px; background:#fbfbfd; }
.application-body .unified-recipe-editor .method-editor li.prep-heading { min-height:70px; padding-block:18px; background:#ffffff; }
.application-body .unified-recipe-editor .method-editor li.prep-heading textarea { min-height:34px; font-weight:700; }
.application-body .unified-recipe-editor .method-editor li.prep-note { min-height:76px; background:#fafbfe; }
.application-body .unified-recipe-editor .method-editor li.prep-note { min-height:76px; background:#ffffff; }
.application-body .unified-recipe-editor .method-editor li.prep-note textarea { min-height:44px; color:#727a91; font-style:italic; }/* Recipe edit title and breadcrumb refinements. */
.application-body .editable-entity-title {
margin: 0;
@@ -1957,10 +1963,10 @@ input[type="search"]::-webkit-search-results-decoration,
}
/* Persistent detail breadcrumbs. */
.application-body .immersive-main .detail-utility { position:absolute; z-index:30; top:0; left:0; right:0; width:100%; height:48px; min-height:48px; display:grid; grid-template-columns:50% 50%; gap:0; padding:0; background:#fbfbfb; border-bottom:1px solid #f3f3f3; }
.application-body .immersive-main .detail-utility { position:absolute; z-index:30; top:0; left:0; right:0; width:100%; height:48px; min-height:48px; display:grid; grid-template-columns:50% 50%; gap:0; padding:0; background:#ffffff; border-bottom:1px solid #edf0f5; }
.application-body .detail-context,.application-body .detail-tools { display:flex; align-items:center; min-width:0; height:48px; }
.application-body .detail-context { gap:14px; padding:0 36px; }
.application-body .detail-tools { gap:18px; padding:0 32px; border-left:1px solid #f3f3f3; }
.application-body .detail-tools { gap:18px; padding:0 32px; border-left:1px solid #edf0f5; }
.application-body .detail-tools form { flex:1; width:auto; }
.application-body .detail-back { display:grid; place-items:center; width:30px; height:30px; color:#202962; text-decoration:none; font-size:30px; font-weight:400; line-height:1; }
.application-body .detail-back:hover { color:#3d5df6; }
@@ -2054,7 +2060,7 @@ input[type="search"]::-webkit-search-results-decoration,
/* Recipe read view — meez skin (measured live 2026-08-14). */
.application-body .immersive-main { background:#f3f3f3; }
.application-body .immersive-main { background:#ffffff; }
.application-body .recipe-detail-shell.recipe-read-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -2064,7 +2070,7 @@ input[type="search"]::-webkit-search-results-decoration,
min-height: auto;
margin: 0;
padding: 0;
background: #fbfbfb;
background: #ffffff;
}
.application-body .recipe-read-left {
width: 100%;
@@ -2099,13 +2105,13 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .recipe-read-right {
width: 100%;
max-width: 100%;
background: #fbfbfb;
background: #ffffff;
box-sizing: border-box;
}
.application-body .recipe-read-right .recipe-workspace-tabs {
min-height: 48px;
padding: 0 16px;
background: #fbfbfb;
background: #ffffff;
border-bottom: 1px solid #edf0f5;
}
.application-body .recipe-read-right .recipe-view-details {
@@ -2113,7 +2119,7 @@ input[type="search"]::-webkit-search-results-decoration,
background: transparent;
border-left: 0;
}
.application-body .recipe-detail-shell .entity-detail-header { background:#fbfbfb; }
.application-body .recipe-detail-shell .entity-detail-header { background:#ffffff; }
.application-body .recipe-detail-shell > .entity-detail-header > div:first-child > p { display:block; }
.application-body .recipe-detail-shell .entity-breadcrumb a { color:#202962; font-size:12px; font-weight:400; text-decoration:none; }
.application-body .recipe-detail-shell .entity-detail-header h1 { font-size:28px; font-weight:900; line-height:42px; }
@@ -2125,8 +2131,8 @@ input[type="search"]::-webkit-search-results-decoration,
/* Tab row: 48px, icon + 15px label, active = #f1f5fe with blue underline. */
.application-body .recipe-workspace-tabs {
min-height: 48px;
background: #fbfbfb;
border-bottom: 1px solid #f3f3f3;
background: #ffffff;
border-bottom: 1px solid #edf0f5;
justify-content: flex-start;
}
.application-body .recipe-workspace-tabs button {
@@ -2257,10 +2263,10 @@ input[type="search"]::-webkit-search-results-decoration,
display: grid;
}
/* Two-column workspace: #fbfbfb cards on #f3f3f3. */
.application-body .recipe-view-workspace { grid-template-columns:1fr 1fr; border-top:0; background:#fbfbfb; }
.application-body .recipe-view-formula { padding:26px 36px 35px; border-right:0; background:#fbfbfb; }
.application-body .recipe-view-details { padding:26px 32px 60px; border-left:1px solid #f3f3f3; background:#fbfbfb; }
/* Two-column workspace: clean pure white on white. */
.application-body .recipe-view-workspace { grid-template-columns:1fr 1fr; border-top:0; background:#ffffff; }
.application-body .recipe-view-formula { padding:26px 36px 35px; border-right:0; background:#ffffff; }
.application-body .recipe-view-details { padding:26px 32px 60px; border-left:1px solid #edf0f5; background:#ffffff; }
/* Formula heading: label + value text controls, no input boxes. */
.application-body .recipe-view-formula .calculator-heading { display:flex; align-items:center; gap:36px; margin-bottom:26px; }
@@ -2274,7 +2280,26 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .recipe-view-formula .calculator-heading .input-with-unit > span { border-left:0; color:#050841; font-size:14px; font-weight:400; }
/* Formula table: borderless rows, meez typography. */
.application-body .recipe-view-formula .formula-component { margin:0 0 16px 0; border:0; background:transparent; font:inherit; }
.application-body .recipe-view-formula .formula-component { margin:0 0 20px 0; border:0; background:transparent; font:inherit; }
.application-body .recipe-view-formula .formula-component h3,
.application-body .recipe-view-formula .formula-component-heading {
margin: 18px 0 8px 0;
padding: 0 0 6px 0;
color: #050841;
font-family: var(--meez-font-sans);
font-size: 18px;
font-weight: 700;
line-height: 24px;
border-bottom: 1px solid #edf0f5;
letter-spacing: 0;
}
.application-body .recipe-view-formula .formula-component-note {
margin: 4px 0 8px;
color: #757677;
font-size: 13px;
font-style: italic;
line-height: 1.4;
}
.application-body .recipe-view-formula .recipe-ingredients thead { display:none; }
.application-body .recipe-view-formula .recipe-ingredients td { padding:8px 0; border:0; border-bottom:0; background:transparent; }
.application-body .recipe-view-formula .recipe-ingredients td:first-child { padding-right:10px; }
@@ -2288,12 +2313,38 @@ input[type="search"]::-webkit-search-results-decoration,
/* Prep method panel. */
.application-body .recipe-view-method h2 { margin:0 0 34px; font-size:22px; font-weight:700; line-height:33px; }
.application-body .recipe-view-method h2 small { margin-left:8px; color:#a5a9c1; font-size:16px; font-weight:700; }
.application-body .recipe-view-method ol { padding:0; list-style:none; }
.application-body .recipe-view-method li { grid-template-columns:28px minmax(0,1fr); gap:16px; min-height:0; padding:16px 0; background:transparent; border:0; border-bottom:1px solid #f3f3f3; }
.application-body .recipe-view-method ol { padding:0; list-style:none; margin:0; }
.application-body .recipe-view-method li { grid-template-columns:28px minmax(0,1fr); gap:16px; min-height:0; padding:16px 0; background:transparent; border:0; border-bottom:1px solid #edf0f5; }
.application-body .recipe-view-method li:last-child { border-bottom:0; }
.application-body .recipe-view-method li > strong { color:#050841; font-size:16px; font-weight:700; }
.application-body .recipe-view-method li > span { color:#050841; font-size:16px; font-weight:300; line-height:20px; }
.application-body .recipe-view-method li.placeholder > span { color:#a5a9c1; }
.application-body .recipe-view-method li.prep-heading {
display: block;
padding: 20px 0 6px;
border-bottom: 1px solid #edf0f5;
}
.application-body .recipe-view-method li.prep-heading h3,
.application-body .recipe-view-method .method-heading-text {
margin: 0;
color: #050841;
font-family: var(--meez-font-sans);
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.application-body .recipe-view-method li.prep-note {
display: block;
padding: 8px 0;
}
.application-body .recipe-view-method li.prep-note p,
.application-body .recipe-view-method .method-note-text {
margin: 0;
color: #757677;
font-size: 14px;
font-style: italic;
line-height: 1.4;
}
/* Secondary panels: meez panel headings and copy. */
/* U of M Equivalency: Meez Style */
.application-body .recipe-view-equivalencies {
@@ -2574,7 +2625,7 @@ input[type="search"]::-webkit-search-results-decoration,
}
/* Recipe read view — meez steps clone (measured live 2026-08-15). */
.application-body .immersive-main:has(.recipe-read-shell) { background:#fbfbfb; }
.application-body .immersive-main:has(.recipe-read-shell) { background:#ffffff; }
.application-body .immersive-main .recipe-read-shell {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
@@ -2586,7 +2637,7 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .recipe-read-shell .recipe-view-formula-pane,
.application-body .recipe-read-shell .recipe-view-details-pane { flex:none; min-width:0; }
/* App bar: 48px #fbfbfb, no bottom border. */
/* App bar: 48px #ffffff, no bottom border. */
.application-body .recipe-read-shell .detail-utility {
position:sticky;
top:0;
@@ -2594,7 +2645,7 @@ input[type="search"]::-webkit-search-results-decoration,
height:48px;
min-height:48px;
padding:0;
background:#fbfbfb;
background:#ffffff;
border-bottom:0;
}
.application-body .recipe-read-shell .detail-context,
@@ -2674,8 +2725,8 @@ input[type="search"]::-webkit-search-results-decoration,
min-height:48px;
margin:0;
padding:0;
background:#fbfbfb;
border-bottom:2px solid #f3f3f3;
background:#ffffff;
border-bottom:2px solid #edf0f5;
}
.application-body .immersive-main .recipe-read-shell .recipe-workspace-tabs button,
.application-body .recipe-read-shell .recipe-workspace-tabs button,
@@ -2814,8 +2865,8 @@ input[type="search"]::-webkit-search-results-decoration,
.application-body .immersive-main .recipe-read-shell .recipe-view-details {
padding:0 32px 32px;
border-top:0;
border-left:1px solid #f3f3f3;
background:#fbfbfb;
border-left:1px solid #edf0f5;
background:#ffffff;
}
/* Tab panel switching: clean active state with no layout reflow or margin leakage */
.application-body .recipe-view-details > .recipe-tab-panel,
@@ -3135,7 +3186,7 @@ input[type="search"]::-webkit-search-results-decoration,
min-height: auto;
margin: 0;
padding: 0;
background: #fbfbfb;
background: #ffffff;
}
.application-body .ingredient-read-left {
@@ -3470,7 +3521,7 @@ input[type="search"]::-webkit-search-results-decoration,
align-items: stretch;
width: 100%;
max-width: 100%;
background: #fbfbfb;
background: #ffffff;
box-sizing: border-box;
}
@@ -3775,9 +3826,9 @@ input[type="search"]::-webkit-search-results-decoration,
height: 48px !important;
margin: 0 !important;
padding: 0 !important;
background: #fbfbfb !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #f3f3f3 !important;
border-bottom: 1px solid #edf0f5 !important;
box-sizing: border-box !important;
}
src/styles/tokens.css
+4 -4
View File
@@ -4,10 +4,10 @@
*/
:root {
/* Surface Colors */
--meez-bg-page: #f3f3f3;
--meez-bg-card: #fbfbfb;
--meez-bg-card-alt: #f1f5fe;
--meez-bg-card-hover: #f1f5fe;
--meez-bg-page: #ffffff;
--meez-bg-card: #ffffff;
--meez-bg-card-alt: #fafbfd;
--meez-bg-card-hover: #f8faff;
--meez-bg-white: #ffffff;
--meez-bg-active-pill: #dbe4ff;