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

feat(home): meez-style home page skin

Browse Source 
- Header app bar: full-bleed #FBFBFB h80 with #F3F3F3 border, 1120px content column
- Search: borderless-underline MUI textbox (16px, focus #3D5DF6 underline), placeholder 'Search '
- Nav chips: h40 r999 label 16px/400 rgba(0,0,0,.87), active #DBE4FF, inline count, no leading icon
- Filter + item-type chips: h44 r20 white
- New button: 16px/500 blue pill
- Directory: head row 57px #FBFBFB with Type/Name labels + select-all, rows 57px 36|112|1fr|36,
  flat 24x24 type glyphs, blue 16/300 name links, kebab 24x24 r50 revealed on row hover,
  no row hover bg, meez-menu-in entry animation
- Mobile <=760px: kebab always visible, row grid fits 390px, head row hidden
This commit is contained in:
nicholas
2026-08-14 21:42:29 -05:00
parent f0e82ff19f
commit 272642f372
3 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/application/pages/app/index.astro
+2 -3
View File
@@ -57,8 +57,7 @@ const purchaseRows=purchases.map(item=>({id:item.id,name:item.name,href:`/app/in
<form class="workspace-global-search" method="get" action="/app/" role="search"> <form class="workspace-global-search" method="get" action="/app/" role="search">
<input type="hidden" name="type" value={type}/> <input type="hidden" name="type" value={type}/>
{selectedSearchTypes.map((selectedType)=><input type="hidden" name="item_type" value={selectedType}/>)} {selectedSearchTypes.map((selectedType)=><input type="hidden" name="item_type" value={selectedType}/>)}
<span aria-hidden="true">⌕</span> <input type="search" name="q" value={query} placeholder="Search " aria-label="Search all items" autofocus={Boolean(query)}/>
<input type="search" name="q" value={query} placeholder="Search recipes, ingredients, recipe books, and purchase items" aria-label="Search all items" autofocus={Boolean(query)}/>
{query&&<a href={`/app/?type=${type}`} aria-label="Clear search">×</a>} {query&&<a href={`/app/?type=${type}`} aria-label="Clear search">×</a>}
</form> </form>
<details class="search-type-filter" open={filteringSearchTypes}> <details class="search-type-filter" open={filteringSearchTypes}>
@@ -80,7 +79,7 @@ const purchaseRows=purchases.map(item=>({id:item.id,name:item.name,href:`/app/in
</details>} </details>}
</div> </div>
<nav class="workspace-pills" aria-label="Workspaces"> <nav class="workspace-pills" aria-label="Workspaces">
{tabs.map((tab)=><a class:list={{active:type===tab.type}} href={`/app/?type=${tab.type}`}><span class={`workspace-pill-icon ${tab.kind}`}>{tab.icon}</span>{tab.label} <small>{tab.count}</small></a>)} {tabs.map((tab)=><a class:list={{active:type===tab.type}} href={`/app/?type=${tab.type}`}>{tab.label} <small>{tab.count}</small></a>)}
{type==="ingredient"&&<details class="filter-menu" open={filtering}><summary>☷ &nbsp; Filter{filtering?` · ${filteredIngredients.length}`:""}</summary><form method="get"><input type="hidden" name="type" value="ingredient"/><label><input type="checkbox" name="attention" value="1" checked={attention}/> Needs attention</label><fieldset><legend>Attention reasons</legend><label><input type="checkbox" name="missing_cost" value="1" checked={missingCost}/> Missing cost</label><label><input type="checkbox" name="no_usda" value="1" checked={noUsda}/> No USDA map</label><label><input type="checkbox" name="unused" value="1" checked={unused}/> Unused ingredient</label></fieldset><div><button>Apply filter</button>{filtering&&<a href="/app/?type=ingredient">Clear</a>}</div></form></details>} {type==="ingredient"&&<details class="filter-menu" open={filtering}><summary>☷ &nbsp; Filter{filtering?` · ${filteredIngredients.length}`:""}</summary><form method="get"><input type="hidden" name="type" value="ingredient"/><label><input type="checkbox" name="attention" value="1" checked={attention}/> Needs attention</label><fieldset><legend>Attention reasons</legend><label><input type="checkbox" name="missing_cost" value="1" checked={missingCost}/> Missing cost</label><label><input type="checkbox" name="no_usda" value="1" checked={noUsda}/> No USDA map</label><label><input type="checkbox" name="unused" value="1" checked={unused}/> Unused ingredient</label></fieldset><div><button>Apply filter</button>{filtering&&<a href="/app/?type=ingredient">Clear</a>}</div></form></details>}
{type==="recipe"&&<details class="filter-menu" open={filtering}><summary>☷ &nbsp; Filter{filtering?` · ${filteredRecipes.length}`:""}</summary><form method="get"><input type="hidden" name="type" value="recipe"/><label><input type="checkbox" name="attention" value="1" checked={attention}/> Needs attention</label><fieldset><legend>Attention reasons</legend><label><input type="checkbox" name="empty_recipe" value="1" checked={emptyRecipe}/> Empty recipe</label><label><input type="checkbox" name="placeholder_steps" value="1" checked={placeholderSteps}/> Placeholder instructions</label></fieldset><div><button>Apply filter</button>{filtering&&<a href="/app/?type=recipe">Clear</a>}</div></form></details>} {type==="recipe"&&<details class="filter-menu" open={filtering}><summary>☷ &nbsp; Filter{filtering?` · ${filteredRecipes.length}`:""}</summary><form method="get"><input type="hidden" name="type" value="recipe"/><label><input type="checkbox" name="attention" value="1" checked={attention}/> Needs attention</label><fieldset><legend>Attention reasons</legend><label><input type="checkbox" name="empty_recipe" value="1" checked={emptyRecipe}/> Empty recipe</label><label><input type="checkbox" name="placeholder_steps" value="1" checked={placeholderSteps}/> Placeholder instructions</label></fieldset><div><button>Apply filter</button>{filtering&&<a href="/app/?type=recipe">Clear</a>}</div></form></details>}
{!readOnlyMode&&<a class="archive-link" href="/app/archive/">Archive</a>} {!readOnlyMode&&<a class="archive-link" href="/app/archive/">Archive</a>}
src/components/EntityDirectory.tsx
+4 -3
View File
@@ -22,10 +22,11 @@ export default function EntityDirectory({rows,entityType,emptyMessage,readOnly=f
location.reload(); location.reload();
}; };
return <section class={`entity-directory-table${readOnly?" read-only":""}`}> return <section class={`entity-directory-table${readOnly?" read-only":""}`}>
{!readOnly&&<div class="entity-directory-toolbar"> {!readOnly&&<div class="entity-directory-toolbar entity-directory-head">
<input aria-label={`Select all ${entityType} items`} type="checkbox" checked={allSelected} ref={input=>{if(input)input.indeterminate=selected.length>0&&!allSelected;}} onChange={()=>setSelected(allSelected?[]:rows.map(row=>row.id))}/> <input aria-label={`Select all ${entityType} items`} type="checkbox" checked={allSelected} ref={input=>{if(input)input.indeterminate=selected.length>0&&!allSelected;}} onChange={()=>setSelected(allSelected?[]:rows.map(row=>row.id))}/>
<strong>{selected.length?`${selected.length} selected`:""}</strong> <span>Type</span>
{selected.length>0&&<><button class="bulk-delete" type="button" disabled={deleting} onClick={()=>requestDelete(selected)}>⌫ Delete</button><button type="button" onClick={()=>setSelected([])}>Clear</button></>} <span>Name</span>
<div class="entity-directory-toolbar-actions">{selected.length>0&&<><strong>{selected.length} selected</strong><button class="bulk-delete" type="button" disabled={deleting} onClick={()=>requestDelete(selected)}>⌫ Delete</button><button type="button" onClick={()=>setSelected([])}>Clear</button></>}</div>
</div>} </div>}
{error&&<p class="directory-error">{error}</p>} {error&&<p class="directory-error">{error}</p>}
<div>{rows.map(row=><div class={`entity-directory-row${selected.includes(row.id)?" selected":""}`}> <div>{rows.map(row=><div class={`entity-directory-row${selected.includes(row.id)?" selected":""}`}>
src/styles/global.css
+32 -22
View File
@@ -255,7 +255,7 @@ th { font-size:.7rem; letter-spacing:.06em; }
.bakers-base-summary input,.bakers-base-summary select { min-width:0; padding:3px 2px; color:#26346d; background:transparent; border:0; font:inherit; } .bakers-base-summary input,.bakers-base-summary select { min-width:0; padding:3px 2px; color:#26346d; background:transparent; border:0; font:inherit; }
.bakers-base-summary input { width:100%; text-align:right; } .bakers-base-summary input { width:100%; text-align:right; }
.bakers-base-summary select { max-width:48px; color:#3d5df6; } .bakers-base-summary select { max-width:48px; color:#3d5df6; }
.entity-directory-table { background:#fff; border:1px solid #eef0f5; }.entity-directory-toolbar { display:grid; grid-template-columns:24px minmax(12rem,1fr) auto auto; align-items:center; gap:14px; min-height:58px; padding:0 20px; border-bottom:1px solid #eef0f5; }.entity-directory-toolbar input,.entity-directory-row > input { width:17px; height:17px; margin:0; accent-color:#3d5df6; }.entity-directory-toolbar strong { color:#5366fa; font-size:.88rem; }.entity-directory-toolbar button { padding:7px 10px; color:#64748b; background:transparent; border:0; cursor:pointer; }.entity-directory-toolbar .bulk-delete { color:#a73838; }.directory-error { margin:0; padding:11px 20px; color:#8d2e2e; background:#fff1f1; border-bottom:1px solid #f5cece; }.entity-directory-head,.entity-directory-row { display:grid; align-items:center; gap:14px; padding:0 20px; }.entity-directory-head { grid-template-columns:24px 28px minmax(14rem,1fr) repeat(var(--directory-columns),minmax(7rem,10rem)) 28px; min-height:38px; color:#8b93a7; border-bottom:1px solid #eef0f5; font-size:.7rem; text-transform:uppercase; }.entity-directory-head > span:first-child { grid-column:1/3; }.entity-directory-row { grid-template-columns:24px 28px minmax(14rem,1fr) repeat(var(--directory-columns),minmax(7rem,10rem)) 28px; min-height:62px; border-bottom:1px solid #eef0f5; }.entity-directory-row:last-child { border-bottom:0; }.entity-directory-row:hover { background:#f8faff; }.entity-directory-row.selected { background:#edf2ff; }.entity-directory-head.columns-1,.entity-directory-row.columns-1 { --directory-columns:1; }.entity-directory-head.columns-2,.entity-directory-row.columns-2 { --directory-columns:2; }.entity-directory-head.columns-3,.entity-directory-row.columns-3 { --directory-columns:3; }.entity-directory-name { display:flex; flex-direction:column; min-width:0; }.entity-directory-name a { overflow:hidden; color:#111a49; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }.entity-directory-name small { color:#8b93a7; }.directory-attention { display:flex; gap:5px; }.directory-attention em { padding:2px 5px; color:#9a3412; background:#fff0e8; border-radius:3px; font-size:.62rem; font-style:normal; font-weight:700; text-transform:uppercase; }.entity-directory-value { overflow:hidden; color:#687086; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }.entity-row-actions { position:relative; }.entity-row-actions > summary { color:#a0a7ba; cursor:pointer; font-size:1.4rem; list-style:none; text-align:center; }.entity-row-actions > summary::-webkit-details-marker { display:none; }.entity-row-actions > div { position:absolute; z-index:5; top:28px; right:0; width:130px; padding:5px; background:#fff; border:1px solid #dfe3ec; border-radius:5px; box-shadow:0 8px 22px rgba(20,30,60,.14); }.entity-row-actions a,.entity-row-actions button { display:block; width:100%; padding:8px 10px; color:#26346d; background:transparent; border:0; text-align:left; text-decoration:none; cursor:pointer; }.entity-row-actions button { color:#a73838; }.entity-row-actions a:hover,.entity-row-actions button:hover { background:#f7f8fc; } .entity-directory-table { background:#fff; border:1px solid #eef0f5; }.entity-directory-toolbar { display:grid; grid-template-columns:24px minmax(12rem,1fr) auto auto; align-items:center; gap:14px; min-height:58px; padding:0 20px; border-bottom:1px solid #eef0f5; }.entity-directory-toolbar input,.entity-directory-row > input { width:20px; height:20px; margin:0; accent-color:#3d5df6; }.entity-directory-toolbar strong { color:#5366fa; font-size:.88rem; }.entity-directory-toolbar button { padding:7px 10px; color:#64748b; background:transparent; border:0; cursor:pointer; }.entity-directory-toolbar .bulk-delete { color:#a73838; }.directory-error { margin:0; padding:11px 20px; color:#8d2e2e; background:#fff1f1; border-bottom:1px solid #f5cece; }.entity-directory-head,.entity-directory-row { display:grid; align-items:center; gap:14px; padding:0 20px; }.entity-directory-head { grid-template-columns:24px 28px minmax(14rem,1fr) repeat(var(--directory-columns),minmax(7rem,10rem)) 28px; min-height:38px; color:#8b93a7; border-bottom:1px solid #eef0f5; font-size:.7rem; text-transform:uppercase; }.entity-directory-head > span:first-child { grid-column:1/3; }.entity-directory-row { grid-template-columns:24px 28px minmax(14rem,1fr) repeat(var(--directory-columns),minmax(7rem,10rem)) 28px; min-height:62px; border-bottom:1px solid #eef0f5; }.entity-directory-row:last-child { border-bottom:0; }.entity-directory-row.selected { background:#edf2ff; }.entity-directory-head.columns-1,.entity-directory-row.columns-1 { --directory-columns:1; }.entity-directory-head.columns-2,.entity-directory-row.columns-2 { --directory-columns:2; }.entity-directory-head.columns-3,.entity-directory-row.columns-3 { --directory-columns:3; }.entity-directory-name { display:flex; flex-direction:column; min-width:0; }.entity-directory-name a { overflow:hidden; color:#111a49; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }.entity-directory-name small { color:#8b93a7; }.directory-attention { display:flex; gap:5px; }.directory-attention em { padding:2px 5px; color:#9a3412; background:#fff0e8; border-radius:3px; font-size:.62rem; font-style:normal; font-weight:700; text-transform:uppercase; }.entity-directory-value { overflow:hidden; color:#687086; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }.entity-row-actions { position:relative; }.entity-row-actions > summary { color:#a0a7ba; cursor:pointer; font-size:1.4rem; list-style:none; text-align:center; }.entity-row-actions > summary::-webkit-details-marker { display:none; }.entity-row-actions > div { position:absolute; z-index:5; top:28px; right:0; width:130px; padding:5px; background:#fff; border:1px solid #dfe3ec; border-radius:5px; box-shadow:0 8px 22px rgba(20,30,60,.14); }.entity-row-actions a,.entity-row-actions button { display:block; width:100%; padding:8px 10px; color:#26346d; background:transparent; border:0; text-align:left; text-decoration:none; cursor:pointer; }.entity-row-actions button { color:#a73838; }.entity-row-actions a:hover,.entity-row-actions button:hover { background:#f7f8fc; }
@media (max-width:760px) { .entity-directory-table { border-inline:0; }.entity-directory-head { display:none; }.entity-directory-row,.entity-directory-row.columns-1,.entity-directory-row.columns-2,.entity-directory-row.columns-3 { grid-template-columns:24px 28px minmax(0,1fr) 28px; padding-inline:14px; }.entity-directory-value { display:none; }.entity-directory-toolbar { padding-inline:14px; }.entity-directory-toolbar strong { min-width:0; }.entity-directory-toolbar button { padding-inline:4px; } } @media (max-width:760px) { .entity-directory-table { border-inline:0; }.entity-directory-head { display:none; }.entity-directory-row,.entity-directory-row.columns-1,.entity-directory-row.columns-2,.entity-directory-row.columns-3 { grid-template-columns:24px 28px minmax(0,1fr) 28px; padding-inline:14px; }.entity-directory-value { display:none; }.entity-directory-toolbar { padding-inline:14px; }.entity-directory-toolbar strong { min-width:0; }.entity-directory-toolbar button { padding-inline:4px; } }
.delete-confirmation { width:min(430px,calc(100% - 32px)); padding:24px; color:#172033; background:#fff; border:0; border-radius:10px; box-shadow:0 20px 60px rgba(15,23,42,.25); }.delete-confirmation::backdrop { background:rgba(0,0,0,0.5); }.delete-confirmation h2 { margin:0 30px 10px 0; font:700 1.35rem var(--sans); }.delete-confirmation p { margin:0 0 24px; color:#64748b; }.delete-confirmation > div { display:flex; justify-content:flex-end; gap:10px; }.delete-confirmation button { padding:9px 14px; background:#fff; border:1px solid #d6dbe5; border-radius:5px; cursor:pointer; font-weight:700; }.delete-confirmation .confirm-delete { color:#fff; background:#b93838; border-color:#b93838; }.delete-confirmation .dialog-close { position:absolute; top:14px; right:14px; padding:2px 7px; color:#788197; border:0; font-size:1.25rem; } .delete-confirmation { width:min(430px,calc(100% - 32px)); padding:24px; color:#172033; background:#fff; border:0; border-radius:10px; box-shadow:0 20px 60px rgba(15,23,42,.25); }.delete-confirmation::backdrop { background:rgba(0,0,0,0.5); }.delete-confirmation h2 { margin:0 30px 10px 0; font:700 1.35rem var(--sans); }.delete-confirmation p { margin:0 0 24px; color:#64748b; }.delete-confirmation > div { display:flex; justify-content:flex-end; gap:10px; }.delete-confirmation button { padding:9px 14px; background:#fff; border:1px solid #d6dbe5; border-radius:5px; cursor:pointer; font-weight:700; }.delete-confirmation .confirm-delete { color:#fff; background:#b93838; border-color:#b93838; }.delete-confirmation .dialog-close { position:absolute; top:14px; right:14px; padding:2px 7px; color:#788197; border:0; font-size:1.25rem; }
.entity-directory-head,.entity-directory-row,.entity-directory-head.columns-1,.entity-directory-head.columns-2,.entity-directory-head.columns-3,.entity-directory-row.columns-1,.entity-directory-row.columns-2,.entity-directory-row.columns-3 { grid-template-columns:24px 28px minmax(14rem,1fr) 28px; }.entity-directory-head > span:first-child { grid-column:auto; }.entity-directory-head > span:nth-child(2) { text-align:center; }.entity-directory-name { justify-content:center; }.entity-directory-toolbar { min-height:52px; } .entity-directory-head,.entity-directory-row,.entity-directory-head.columns-1,.entity-directory-head.columns-2,.entity-directory-head.columns-3,.entity-directory-row.columns-1,.entity-directory-row.columns-2,.entity-directory-row.columns-3 { grid-template-columns:24px 28px minmax(14rem,1fr) 28px; }.entity-directory-head > span:first-child { grid-column:auto; }.entity-directory-head > span:nth-child(2) { text-align:center; }.entity-directory-name { justify-content:center; }.entity-directory-toolbar { min-height:52px; }
@@ -283,14 +283,16 @@ th { font-size:.7rem; letter-spacing:.06em; }
.application-body p { line-height:1.5; } .application-body p { line-height:1.5; }
/* Home workspace */ /* Home workspace */
.application-body .directory-workspace { width:min(1280px,calc(100% - 48px)); padding:18px 0 64px; } .application-body .directory-workspace { width:min(1120px,calc(100% - 48px)); padding:0 0 64px; }
.application-body .workspace-search-tools { align-items:center; justify-content:flex-end; gap:12px; min-height:46px; margin:0 0 34px; } .application-body .workspace-search-tools { align-items:center; justify-content:flex-end; gap:12px; min-height:80px; margin-block:0 34px; margin-inline:calc(50% - 50vw); padding-inline:calc((100vw - min(1120px, calc(100vw - 48px)))/2); background:#fbfbfb; border-bottom:1px solid #f3f3f3; }
.application-body .workspace-global-search { flex:0 1 610px; min-height:40px; padding:0 13px; border:1px solid #e4e5ed; border-radius:4px; box-shadow:none; } .application-body .workspace-global-search { flex:0 1 610px; min-height:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.application-body .workspace-global-search:focus-within { border-color:#647df8; box-shadow:0 0 0 1px #647df8; } .application-body .workspace-global-search:focus-within { box-shadow:none; }
.application-body .workspace-global-search > span { color:#a5a9c1; font-size:20px; } .application-body form.workspace-global-search input[type="search"] { padding:8px 0 6px; color:#050841; background:transparent; border:0; border-bottom:1px solid #e4e5ed; border-radius:0; font-size:16px; }
.application-body .workspace-global-search input[type="search"] { padding:8px 0; color:#050841; font-size:14px; } .application-body .workspace-global-search:focus-within input[type="search"] { border-bottom:2px solid #3d5df6; }
.application-body .workspace-global-search input::placeholder { color:#a5a9c1; } .application-body .workspace-global-search input::placeholder { color:#a5a9c1; }
.application-body .search-type-filter summary { min-height:40px; padding:10px 13px; color:#202962; border-color:#e4e5ed; border-radius:4px; font-size:13px; font-weight:500; } .application-body .search-type-filter summary { min-height:44px; padding:10px 16px; color:rgba(0,0,0,0.87); background:#fff; border:1px solid #e4e5ed; border-radius:20px; font-size:16px; font-weight:400; }
@keyframes meez-menu-in { from { opacity:0; transform:translateY(4px) scale(.98); } to { opacity:1; transform:none; } }
.application-body .workspace-new-menu[open] > nav,.application-body .filter-menu[open] > form,.application-body .search-type-filter[open] > form,.application-body .entity-row-actions[open] > div { animation:meez-menu-in .2s cubic-bezier(0.4,0,0.2,1); }
.application-body .search-type-filter form,.application-body .filter-menu form,.application-body .workspace-new-menu nav { border:1px solid #eeeef3; border-radius:4px; box-shadow:0 8px 25px rgba(5,8,65,.12); } .application-body .search-type-filter form,.application-body .filter-menu form,.application-body .workspace-new-menu nav { border:1px solid #eeeef3; border-radius:4px; box-shadow:0 8px 25px rgba(5,8,65,.12); }
.application-body .workspace-new-menu > summary,.application-body .detail-new-menu > summary { padding:10px 17px; color:#fff; background:#3d5df6; border-radius:20px; font-size:14px; font-weight:600; } .application-body .workspace-new-menu > summary,.application-body .detail-new-menu > summary { padding:10px 17px; color:#fff; background:#3d5df6; border-radius:20px; font-size:14px; font-weight:600; }
.application-body .workspace-new-menu,.application-body .detail-new-menu { position:relative; flex:none; } .application-body .workspace-new-menu,.application-body .detail-new-menu { position:relative; flex:none; }
@@ -311,18 +313,18 @@ th { font-size:.7rem; letter-spacing:.06em; }
.application-body .workspace-new-menu small,.application-body .detail-new-menu small { overflow:hidden; color:#8b93a7; font-size:12px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; } .application-body .workspace-new-menu small,.application-body .detail-new-menu small { overflow:hidden; color:#8b93a7; font-size:12px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
/* Menu treatment: quiet white surfaces, navy text, roomy rows. */ /* Menu treatment: quiet white surfaces, navy text, roomy rows. */
.application-body .workspace-new-menu > summary,.application-body .detail-new-menu > summary { grid-template-columns:18px auto; gap:6px; min-height:40px; padding:7px 15px 7px 11px; border-radius:999px; box-shadow:none; } .application-body .workspace-new-menu > summary,.application-body .detail-new-menu > summary { grid-template-columns:18px auto; gap:6px; min-height:36px; padding:7px 15px 7px 11px; border-radius:999px; box-shadow:none; font-size:16px; font-weight:500; }
.application-body .new-trigger-plus { font-size:20px; } .application-body .new-trigger-plus { font-size:20px; }
.application-body .workspace-new-menu > nav,.application-body .detail-new-menu > div { width:340px; padding:16px 0; border-color:#e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); } .application-body .workspace-new-menu > nav,.application-body .detail-new-menu > div { width:340px; padding:16px 0; border-color:#e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); }
.application-body .workspace-new-menu > nav a,.application-body .detail-new-menu > div a { grid-template-columns:32px minmax(0,1fr); gap:14px; min-height:50px; padding:8px 28px; border-radius:0; } .application-body .workspace-new-menu > nav a,.application-body .detail-new-menu > div a { grid-template-columns:32px minmax(0,1fr); gap:14px; min-height:50px; padding:8px 28px; border-radius:0; }
.application-body .workspace-new-menu > nav a + a,.application-body .detail-new-menu > div a + a { border-top:0; } .application-body .workspace-new-menu > nav a + a,.application-body .detail-new-menu > div a + a { border-top:0; }
.application-body .new-menu-icon { display:grid; place-items:center; width:24px; height:24px; color:#a5a9c1; font-size:19px; } .application-body .new-menu-icon { display:grid; place-items:center; width:24px; height:24px; color:#a5a9c1; font-size:19px; }
.application-body .workspace-new-menu strong,.application-body .detail-new-menu strong { color:#202962; font-size:14px; font-weight:600; } .application-body .workspace-new-menu strong,.application-body .detail-new-menu strong { color:#202962; font-size:14px; font-weight:600; }
.application-body .workspace-new-menu > nav a:hover,.application-body .detail-new-menu > div a:hover { background:#f1f5fe; } .application-body .workspace-new-menu > nav a:hover,.application-body .detail-new-menu > div a:hover { background:#f1f5fe; transition:background-color .15s cubic-bezier(0.4,0,0.2,1); }
.application-body .search-type-filter form,.application-body .filter-menu form { width:300px; padding:14px 0; color:#202962; background:#fff; border:1px solid #e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); } .application-body .search-type-filter form,.application-body .filter-menu form { width:300px; padding:14px 0; color:#202962; background:#fff; border:1px solid #e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); }
.application-body .search-type-filter label,.application-body .filter-menu label { min-height:42px; padding:8px 20px; font-size:14px; } .application-body .search-type-filter label,.application-body .filter-menu label { min-height:42px; padding:8px 20px; font-size:14px; }
.application-body .search-type-filter label:hover,.application-body .filter-menu label:hover { background:#f1f5fe; } .application-body .search-type-filter label:hover,.application-body .filter-menu label:hover { background:#f1f5fe; transition:background-color .15s cubic-bezier(0.4,0,0.2,1); }
.application-body .filter-menu fieldset { margin:6px 14px; padding:6px 0; border:0; border-top:1px solid #eeeef3; } .application-body .filter-menu fieldset { margin:6px 14px; padding:6px 0; border:0; border-top:1px solid #eeeef3; }
.application-body .filter-menu legend { padding:12px 6px 4px; color:#a5a9c1; font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:none; } .application-body .filter-menu legend { padding:12px 6px 4px; color:#a5a9c1; font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:none; }
.application-body .search-type-filter form > div,.application-body .filter-menu form > div { justify-content:flex-end; margin:8px 14px 0; padding-top:12px; border-top:1px solid #eeeef3; } .application-body .search-type-filter form > div,.application-body .filter-menu form > div { justify-content:flex-end; margin:8px 14px 0; padding-top:12px; border-top:1px solid #eeeef3; }
@@ -332,29 +334,35 @@ th { font-size:.7rem; letter-spacing:.06em; }
.application-body .entity-row-actions > div { width:150px; padding:6px 0; border:1px solid #e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); } .application-body .entity-row-actions > div { width:150px; padding:6px 0; border:1px solid #e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); }
.application-body .entity-row-actions a,.application-body .entity-row-actions button { min-height:42px; padding:10px 18px; color:#202962; font-size:14px; } .application-body .entity-row-actions a,.application-body .entity-row-actions button { min-height:42px; padding:10px 18px; color:#202962; font-size:14px; }
.application-body .entity-row-actions button { color:#f63d48; } .application-body .entity-row-actions button { color:#f63d48; }
.application-body .entity-row-actions a:hover,.application-body .entity-row-actions button:hover { background:#f1f5fe; } .application-body .entity-row-actions a:hover,.application-body .entity-row-actions button:hover { background:#f1f5fe; transition:background-color .15s cubic-bezier(0.4,0,0.2,1); }
.application-body .identity-edit > form { border-color:#e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); } .application-body .identity-edit > form { border-color:#e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); }
.application-body .workspace-pills { gap:8px; padding:0 0 38px; } .application-body .workspace-pills { gap:8px; padding:0 0 38px; }
.application-body .workspace-pills > a { min-height:38px; padding:6px 13px 6px 8px; color:rgba(0,0,0,0.87); border:1px solid #ededf2; border-radius:999px; box-shadow:none; font-size:14px; font-weight:400; } .application-body .workspace-pills > a { min-height:40px; padding:8px 16px 8px 12px; color:rgba(0,0,0,0.87); border:1px solid #ededf2; border-radius:999px; box-shadow:none; font-size:16px; font-weight:400; transition:background-color .15s cubic-bezier(0.4,0,0.2,1),border-color .15s cubic-bezier(0.4,0,0.2,1); }
.application-body .workspace-pills > a:hover { border-color:#cfd5fa; background:#f8f9ff; } .application-body .workspace-pills > a:hover { background:rgba(0,0,0,0.04); border-color:#ededf2; }
.application-body .workspace-pills > a.active { background:#DBE4FF; border-color:#DBE4FF; } .application-body .workspace-pills > a.active { background:#DBE4FF; border-color:#DBE4FF; }
.application-body .workspace-pills > a small { color:#a5a9c1; font-size:12px; } .application-body .workspace-pills > a small { color:inherit; font-size:inherit; font-weight:inherit; }
.application-body .workspace-pill-icon { width:25px; height:25px; background:#647df8; font-size:10px; font-weight:700; } .application-body .workspace-pill-icon { width:25px; height:25px; background:#647df8; font-size:10px; font-weight:700; }
.application-body .workspace-pill-icon.ingredient,.application-body .workspace-pill-icon.purchase { background:#40b49a; } .application-body .workspace-pill-icon.ingredient,.application-body .workspace-pill-icon.purchase { background:#40b49a; }
.application-body .workspace-pill-icon.book { background:#6234f2; } .application-body .workspace-pill-icon.book { background:#6234f2; }
.application-body .workspace-pills > a .workspace-pill-icon { width:18px; height:18px; color:inherit; background:transparent; } .application-body .workspace-pills .filter-menu summary { min-height:44px; padding:10px 16px; color:rgba(0,0,0,0.87); background:#fff; border:1px solid #e4e5ed; border-radius:20px; font-size:16px; font-weight:400; }
.application-body .workspace-pills .filter-menu summary { min-height:38px; padding:9px 12px; color:#202962; font-size:13px; font-weight:500; }
.application-body .entity-directory-table,.application-body .workspace-search-results > div { overflow:visible; border:0; background:#fff; } .application-body .entity-directory-table,.application-body .workspace-search-results > div { overflow:visible; border:0; background:#fff; }
.application-body .entity-directory-toolbar { grid-template-columns:24px minmax(12rem,1fr) auto auto; min-height:60px; padding:0 20px; border-bottom:1px solid #f3f3f3; } .application-body .entity-directory-toolbar { grid-template-columns:36px 112px minmax(0,1fr) auto; gap:8px; min-height:57px; padding:0 20px; background:#fbfbfb; border-bottom:1px solid #f3f3f3; }
.application-body .entity-directory-head > span { font-size:14px; font-weight:500; color:#3c4679; text-transform:none; }
.application-body .entity-directory-toolbar-actions { display:flex; align-items:center; gap:12px; justify-self:end; }
.application-body .entity-directory-toolbar strong { color:#3d5df6; font-size:13px; font-weight:600; } .application-body .entity-directory-toolbar strong { color:#3d5df6; font-size:13px; font-weight:600; }
.application-body .entity-directory-toolbar button { color:#647df8; font-size:13px; } .application-body .entity-directory-toolbar button { color:#647df8; font-size:13px; }
.application-body .entity-directory-toolbar .bulk-delete { color:#f63d48; } .application-body .entity-directory-toolbar .bulk-delete { color:#f63d48; }
.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:24px 30px minmax(14rem,1fr) 28px; gap:14px; min-height:57px; padding:0 20px; 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 112px minmax(14rem,1fr) 36px; gap:8px; min-height:57px; padding:0 20px; border-bottom:1px solid #f3f3f3; }
.application-body .entity-directory-table.read-only .entity-directory-row { grid-template-columns:30px minmax(0,1fr); } .application-body .entity-directory-table.read-only .entity-directory-row { grid-template-columns:30px minmax(0,1fr); }
.application-body .entity-directory-row:hover { background:#f8faff; }
.application-body .entity-directory-row.selected { background:#f1f5fe; } .application-body .entity-directory-row.selected { background:#f1f5fe; }
.application-body .entity-directory-name a,.application-body .entity-directory-name strong { color:#050841; font-size:14px; font-weight:500; } .application-body .entity-directory-name a,.application-body .entity-directory-name strong { color:#3d5df6; font-size:16px; font-weight:300; }
.application-body .entity-row-actions > summary { color:#a5a9c1; font-size:20px; } .application-body .entity-directory-row .workspace-pill-icon { width:24px; height:24px; justify-self:center; background:transparent; border-radius:0; color:#647df8; font-size:14px; }
.application-body .entity-directory-row .workspace-pill-icon.ingredient,.application-body .entity-directory-row .workspace-pill-icon.purchase { color:#40b49a; }
.application-body .entity-directory-row .workspace-pill-icon.book { color:#6234f2; }
.application-body .entity-row-actions { opacity:0; transition:opacity .15s cubic-bezier(0.4,0,0.2,1); }
.application-body .entity-directory-row:hover .entity-row-actions,.application-body .entity-directory-row:focus-within .entity-row-actions,.application-body .entity-row-actions[open] { opacity:1; }
.application-body .entity-row-actions > summary { display:grid; place-items:center; width:24px; height:24px; color:#a5a9c1; background:transparent; border-radius:50%; font-size:18px; }
.application-body .entity-row-actions > summary:hover { background:rgba(0,0,0,0.04); }
.application-body .entity-row-actions > div { border-color:#eeeef3; border-radius:4px; box-shadow:0 8px 25px rgba(5,8,65,.12); } .application-body .entity-row-actions > div { border-color:#eeeef3; border-radius:4px; box-shadow:0 8px 25px rgba(5,8,65,.12); }
.application-body .entity-row-actions button { color:#f63d48; } .application-body .entity-row-actions button { color:#f63d48; }
.application-body input[type="checkbox"] { accent-color:#3d5df6; } .application-body input[type="checkbox"] { accent-color:#3d5df6; }
@@ -581,6 +589,8 @@ th { font-size:.7rem; letter-spacing:.06em; }
.application-body .workspace-global-search { flex:1 1 100%; max-width:none; } .application-body .workspace-global-search { flex:1 1 100%; max-width:none; }
.application-body .workspace-pills { padding-inline:12px; padding-bottom:24px; } .application-body .workspace-pills { padding-inline:12px; padding-bottom:24px; }
.application-body .entity-directory-row { padding-inline:14px; } .application-body .entity-directory-row { padding-inline:14px; }
.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 112px minmax(0,1fr) 36px; }
.application-body .entity-row-actions { opacity:1; }
.application-body .recipe-edit-nutrition { width:100%; margin-left:0; padding:28px 18px; border-left:0; } .application-body .recipe-edit-nutrition { width:100%; margin-left:0; padding:28px 18px; border-left:0; }
.application-body .auto-yield-action { width:100%; margin-left:0; padding:18px; border-left:0; } .application-body .auto-yield-action { width:100%; margin-left:0; padding:18px; border-left:0; }
.application-body .book-details-form { grid-template-columns:1fr; } .application-body .book-details-form { grid-template-columns:1fr; }