1294 lines
46 KiB
CSS
1294 lines
46 KiB
CSS
/* Application interface skin. */
|
|
.application-body {
|
|
--ink:#050841;
|
|
--muted:#a5a9c1;
|
|
--paper:#ffffff;
|
|
--card:#fff;
|
|
--line:#edf0f5;
|
|
--green:#3d5df6;
|
|
--orange:#647df8;
|
|
color:#050841;
|
|
background:#ffffff;
|
|
font-family:var(--meez-font-sans);
|
|
font-size:16px;
|
|
font-weight:300;
|
|
line-height:20px;
|
|
letter-spacing:0;
|
|
}
|
|
.application-body main:not(.immersive-main) { min-height:100vh; }
|
|
.application-body button,.application-body input,.application-body select,.application-body textarea { font:inherit; }
|
|
.application-body button,.application-body summary,.application-body a { -webkit-tap-highlight-color:transparent; }
|
|
.application-body h1,.application-body h2,.application-body h3 { color:#050841; font-family:inherit; letter-spacing:-.015em; }
|
|
.application-body p { line-height:1.5; }
|
|
|
|
/* 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:#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 #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; }
|
|
input[type="search"]::-webkit-search-decoration,
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-results-button,
|
|
input[type="search"]::-webkit-search-results-decoration,
|
|
.application-body input[type="search"]::-webkit-search-decoration,
|
|
.application-body input[type="search"]::-webkit-search-cancel-button,
|
|
.application-body input[type="search"]::-webkit-search-results-button,
|
|
.application-body input[type="search"]::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
display: none;
|
|
}
|
|
.application-body .workspace-global-search input::placeholder { color:#a5a9c1; }
|
|
.application-body .workspace-global-search > a { flex:none; padding:0 2px; color:#a5a9c1; font-size:20px; line-height:1; text-decoration:none; cursor:pointer; }
|
|
.application-body .workspace-global-search > a:hover { color:#050841; }
|
|
.application-body .search-type-filter 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; list-style:none; cursor:pointer; }
|
|
.application-body .search-type-filter summary::-webkit-details-marker { display:none; }
|
|
.application-body .filter-icon { flex: none; width: 16px; height: 19px; color: #3d5df6; fill: #3d5df6; }
|
|
@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 .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 > summary,.application-body .detail-new-menu > summary { display:grid; grid-template-columns:18px auto 12px; align-items:center; gap:7px; min-height:40px; padding:6px 12px 6px 9px; color:#fff; background:#3d5df6; border:1px solid #3d5df6; border-radius:6px; box-shadow:0 1px 2px rgba(5,8,65,.12); cursor:pointer; font-size:14px; font-weight:600; line-height:1; list-style:none; transition:background .15s,border-color .15s,box-shadow .15s; }
|
|
.application-body .workspace-new-menu > summary:hover,.application-body .detail-new-menu > summary:hover { background:#304fdf; border-color:#304fdf; }
|
|
.application-body .workspace-new-menu > summary:focus-visible,.application-body .detail-new-menu > summary:focus-visible { outline:3px solid rgba(61,93,246,.22); outline-offset:2px; }
|
|
.application-body .workspace-new-menu[open] > summary,.application-body .detail-new-menu[open] > summary { background:#304fdf; border-color:#304fdf; box-shadow:0 0 0 3px rgba(61,93,246,.14); }
|
|
.application-body .new-trigger-plus { display:grid; place-items:center; width:18px; height:18px; font-size:18px; font-weight:400; line-height:1; }
|
|
.application-body .new-trigger-chevron { color:#dce2ff; font-size:14px; transform:translateY(-1px); transition:transform .15s; }
|
|
.application-body details[open] > summary .new-trigger-chevron { transform:rotate(180deg) translateY(1px); }
|
|
.application-body .workspace-new-menu > nav,.application-body .detail-new-menu > div { display:block; position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:272px; padding:6px; background:#fff; border:1px solid #e4e5ed; border-radius:7px; box-shadow:0 12px 34px rgba(5,8,65,.16); }
|
|
.application-body .workspace-new-menu > nav a,.application-body .detail-new-menu > div a { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:11px; min-height:58px; padding:8px 10px; color:#050841; border-radius:5px; text-decoration:none; }
|
|
.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:focus-visible,.application-body .detail-new-menu > div a:focus-visible { outline:2px solid #647df8; outline-offset:-2px; }
|
|
.application-body .workspace-new-menu > nav a + a,.application-body .detail-new-menu > div a + a { border-top:1px solid #f1f1f5; }
|
|
.application-body .workspace-new-menu > nav a > span:last-child,.application-body .detail-new-menu > div a > span:last-child { display:flex; min-width:0; flex-direction:column; gap:3px; }
|
|
.application-body .workspace-new-menu strong,.application-body .detail-new-menu strong { font-size:14px; font-weight:600; }
|
|
.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. */
|
|
.application-body .workspace-new-menu > summary,.application-body .detail-new-menu > summary { grid-template-columns:18px auto; gap:8px; min-height:32px; padding:0 12px; border-radius:100px; box-shadow:none; font-size:16px; font-weight:500; }
|
|
.application-body .new-trigger-plus { font-size:20px; }
|
|
.application-body .new-trigger-plus svg { display:block; width:18px; height:18px; }
|
|
.application-body .workspace-new-menu > nav,.application-body .detail-new-menu > div { width:375px; padding:22px 0; border:0; border-radius:4px; box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12); }
|
|
.application-body .workspace-new-menu > nav a,.application-body .detail-new-menu > div a { grid-template-columns:24px minmax(0,1fr); gap:16px; min-height:43px; padding:8px 25px; border-radius: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; }
|
|
.application-body .new-menu-icon svg { display:block; width:24px; height:24px; }
|
|
.application-body .workspace-new-menu strong,.application-body .detail-new-menu strong { color:#050841; font-size:16px; font-weight:500; }
|
|
.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 .filter-menu form {
|
|
width: 280px;
|
|
padding: 12px 0 8px;
|
|
color: #050841;
|
|
background: #ffffff;
|
|
border: 1px solid #edf0f5;
|
|
border-radius: 6px;
|
|
box-shadow: 0 10px 30px rgba(5, 8, 65, 0.12);
|
|
}
|
|
|
|
.application-body .filter-menu label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 38px;
|
|
padding: 6px 18px;
|
|
color: #050841;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease;
|
|
}
|
|
|
|
.application-body .filter-menu label:hover {
|
|
background: #f8faff;
|
|
}
|
|
|
|
.application-body .filter-menu fieldset {
|
|
margin: 0;
|
|
padding: 4px 0 6px;
|
|
border: 0;
|
|
}
|
|
|
|
.application-body .filter-menu legend {
|
|
padding: 6px 18px 4px;
|
|
color: #8b93a7;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.application-body .filter-menu .filter-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 14px;
|
|
margin: 8px 0 0;
|
|
padding: 10px 18px 4px;
|
|
border-top: 1px solid #edf0f5;
|
|
}
|
|
|
|
.application-body .filter-menu .filter-actions button {
|
|
min-height: 32px;
|
|
padding: 0 16px;
|
|
color: #fff;
|
|
background: #3d5df6;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.application-body .filter-menu .filter-actions button:hover {
|
|
background: #2b49db;
|
|
}
|
|
|
|
.application-body .filter-menu .filter-actions a {
|
|
color: #8b93a7;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.application-body .filter-menu .filter-actions a:hover {
|
|
color: #050841;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.application-body .entity-row-actions > div {
|
|
position: absolute;
|
|
z-index: 50;
|
|
top: calc(100% + 4px);
|
|
right: 0;
|
|
width: 140px;
|
|
padding: 4px 0;
|
|
background: #ffffff;
|
|
border: 1px solid #edf0f5;
|
|
border-radius: 6px;
|
|
box-shadow: 0 8px 24px rgba(5, 8, 65, 0.12);
|
|
}
|
|
|
|
.application-body .entity-row-actions a,
|
|
.application-body .entity-row-actions button {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 34px;
|
|
padding: 6px 14px;
|
|
color: #050841;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease;
|
|
}
|
|
|
|
.application-body .entity-row-actions button {
|
|
color: #f63d48;
|
|
}
|
|
|
|
.application-body .entity-row-actions a:hover,
|
|
.application-body .entity-row-actions button:hover {
|
|
background: #fef2f2;
|
|
}
|
|
.application-body .identity-edit > form { border-color:#e6e7ee; border-radius:4px; box-shadow:0 2px 5px rgba(5,8,65,.18); }
|
|
.application-body .workspace-nav-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 0 0 36px;
|
|
}
|
|
|
|
.application-body .workspace-pills {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 0;
|
|
}
|
|
|
|
.application-body .workspace-pills > a {
|
|
min-height: 38px;
|
|
padding: 6px 14px 6px 10px;
|
|
color: rgba(0,0,0,0.87);
|
|
background: #fff;
|
|
border: 1px solid #ececec;
|
|
border-radius: 999px;
|
|
box-shadow: none;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
flex: 0 0 auto;
|
|
transition: background-color .15s cubic-bezier(0.4,0,0.2,1), border-color .15s cubic-bezier(0.4,0,0.2,1), color .15s ease, box-shadow .15s ease;
|
|
}
|
|
|
|
.application-body .workspace-pills > a:hover {
|
|
background: #f1f4fe;
|
|
border-color: #dbe4ff;
|
|
color: #050841;
|
|
box-shadow: 0 1px 3px rgba(61, 93, 246, 0.08);
|
|
}
|
|
|
|
.application-body .workspace-pills > a.active {
|
|
background: #DBE4FF;
|
|
border-color: #DBE4FF;
|
|
color: #111a49;
|
|
}
|
|
|
|
.application-body .workspace-pills > a.active:hover {
|
|
background: #cbd8ff;
|
|
border-color: #cbd8ff;
|
|
color: #050841;
|
|
}
|
|
|
|
.application-body .workspace-pills > a small {
|
|
margin-left: 8px;
|
|
color: #a5a9c1;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: color .15s ease;
|
|
}
|
|
|
|
.application-body .workspace-pills > a:hover small {
|
|
color: #8b93a7;
|
|
}
|
|
|
|
.application-body .workspace-pills > a .workspace-pill-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex: none;
|
|
}
|
|
|
|
.application-body .workspace-utility-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.application-body .workspace-utility-link {
|
|
color: #8b93a7;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.application-body .workspace-utility-link:hover {
|
|
color: #050841;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.application-body .workspace-pill-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #3c4679;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.application-body .workspace-pill-icon.ingredient,
|
|
.application-body .workspace-pill-icon.purchase {
|
|
background: #3f908a;
|
|
}
|
|
|
|
.application-body .workspace-pill-icon.book {
|
|
background: #f3a642;
|
|
}
|
|
|
|
.application-body .workspace-filter-system {
|
|
display: contents;
|
|
}
|
|
|
|
.application-body .workspace-filter-trigger-wrapper {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: none;
|
|
}
|
|
|
|
.application-body .workspace-filter-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 40px;
|
|
padding: 8px 14px;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 999px;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.application-body .workspace-filter-btn:hover {
|
|
background: #f1f4fe;
|
|
border-color: #dbe4ff;
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.application-body .workspace-filter-btn.active {
|
|
background: #edf2ff;
|
|
color: #3d5df6;
|
|
border-color: #dbe4ff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.application-body .workspace-filter-btn.active:hover {
|
|
background: #dbe4ff;
|
|
border-color: #c4d4ff;
|
|
color: #2b4cd6;
|
|
}
|
|
|
|
.application-body .workspace-filter-menu-popover {
|
|
position: absolute;
|
|
z-index: 60;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
right: auto;
|
|
width: 280px;
|
|
max-width: min(280px, calc(100vw - 32px));
|
|
max-height: calc(100vh - 120px);
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border: 1px solid #edf0f5;
|
|
border-radius: 6px;
|
|
box-shadow: 0 10px 30px rgba(5, 8, 65, 0.12);
|
|
padding: 12px 0 8px;
|
|
animation: meez-menu-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.application-body .workspace-filter-menu-popover.align-right {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
.application-body .workspace-filter-menu-popover.align-left {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
.application-body .filter-menu-header {
|
|
padding: 4px 18px 8px;
|
|
}
|
|
|
|
.application-body .filter-menu-header h4 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #050841;
|
|
text-align: center;
|
|
}
|
|
|
|
.application-body .filter-menu-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.application-body .filter-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
min-height: 42px;
|
|
padding: 8px 18px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #050841;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease, color 0.12s ease;
|
|
}
|
|
|
|
.application-body .filter-menu-item:hover {
|
|
background: #f1f4fe;
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.application-body .filter-menu-item:hover .filter-item-plus {
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.application-body .filter-menu-item.active {
|
|
color: #3d5df6;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.application-body .filter-item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.application-body .filter-item-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.application-body .filter-item-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.application-body .filter-item-plus {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: #a5a9c1;
|
|
transition: color 0.12s ease;
|
|
}
|
|
|
|
.application-body .filter-item-plus svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.application-body .filter-menu-footer {
|
|
padding: 8px 18px 4px;
|
|
border-top: 1px solid #f4f5f8;
|
|
text-align: left;
|
|
}
|
|
|
|
.application-body .filter-clear-all-btn {
|
|
border: 0;
|
|
background: transparent;
|
|
color: #3d5df6;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
padding: 4px 0;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.application-body .filter-clear-all-btn:hover:not(:disabled) {
|
|
color: #1e3bb8;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.application-body .filter-clear-all-btn:disabled {
|
|
color: #a5a9c1;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Secondary Filter Rule Chips Row */
|
|
.application-body .filter-rules-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
padding: 4px 0 0;
|
|
}
|
|
|
|
.application-body .filter-rule-item-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: relative;
|
|
}
|
|
|
|
.application-body .filter-connector-and {
|
|
color: #050841;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.application-body .filter-rule-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
border: 1px solid #3d5df6;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 2px rgba(61, 93, 246, 0.06);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.application-body .filter-rule-chip:hover {
|
|
border-color: #2b4cd6;
|
|
box-shadow: 0 2px 6px rgba(61, 93, 246, 0.12);
|
|
}
|
|
|
|
.application-body .filter-rule-chip.open {
|
|
background: #edf2ff;
|
|
border-color: #3d5df6;
|
|
box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.18);
|
|
}
|
|
|
|
.application-body .filter-rule-chip-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 32px;
|
|
padding: 0 8px 0 12px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #3d5df6;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease;
|
|
}
|
|
|
|
.application-body .filter-rule-chip-main:hover {
|
|
background: #f4f7fe;
|
|
}
|
|
|
|
.application-body .filter-rule-chip.open .filter-rule-chip-main:hover {
|
|
background: #e2ebff;
|
|
}
|
|
|
|
.application-body .filter-chip-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.application-body .filter-chip-icon svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.application-body .filter-chip-label {
|
|
color: #3d5df6;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.application-body .filter-chip-arrow {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.application-body .filter-chip-arrow svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.application-body .filter-rule-chip-close {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 28px;
|
|
height: 32px;
|
|
padding: 0 8px 0 4px;
|
|
border: 0;
|
|
border-left: 1px solid #dbe4ff;
|
|
background: transparent;
|
|
color: #3d5df6;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease, color 0.12s ease;
|
|
}
|
|
|
|
.application-body .filter-rule-chip-close:hover {
|
|
background: #edf2ff;
|
|
color: #1e3bb8;
|
|
}
|
|
|
|
.application-body .filter-rule-chip.open .filter-rule-chip-close:hover {
|
|
background: #dbe4ff;
|
|
}
|
|
|
|
.application-body .filter-rule-chip-close svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.application-body .filter-chip-popover {
|
|
position: absolute;
|
|
z-index: 70;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
right: auto;
|
|
min-width: 260px;
|
|
max-width: min(340px, calc(100vw - 32px));
|
|
max-height: calc(100vh - 120px);
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border: 1px solid #edf0f5;
|
|
border-radius: 6px;
|
|
box-shadow: 0 10px 30px rgba(5, 8, 65, 0.12);
|
|
padding: 12px;
|
|
animation: meez-menu-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.application-body .filter-chip-popover.align-right {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
.application-body .filter-chip-popover.align-left {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
.application-body .filter-chip-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
background: #f8faff;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.application-body .filter-chip-search svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #8b93a7;
|
|
flex: none;
|
|
}
|
|
|
|
.application-body .filter-chip-search input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 13px;
|
|
color: #050841;
|
|
outline: none;
|
|
}
|
|
|
|
.application-body .filter-chip-options-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.application-body .filter-chip-option-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 34px;
|
|
padding: 4px 6px;
|
|
border-radius: 4px;
|
|
color: #050841;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease, color 0.12s ease;
|
|
}
|
|
|
|
.application-body .filter-chip-option-label:hover {
|
|
background: #f1f4fe;
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.application-body .filter-chip-option-label input[type="checkbox"] {
|
|
width: 15px;
|
|
height: 15px;
|
|
accent-color: #3d5df6;
|
|
margin: 0;
|
|
}
|
|
|
|
.application-body .option-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.application-body .option-count {
|
|
color: #8b93a7;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.application-body .filter-chip-empty-message {
|
|
padding: 16px 12px;
|
|
color: #050841;
|
|
font-size: 13px;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
.application-body .filter-chip-empty {
|
|
padding: 12px 8px;
|
|
color: #8b93a7;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
list-style: none;
|
|
}
|
|
|
|
/* Mobile Filter & Sort Modal (Meez Parity) */
|
|
.mobile-filter-backdrop {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.desktop-only-filter-popover {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-filter-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 999999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
background: rgba(5, 8, 65, 0.45);
|
|
backdrop-filter: blur(2px);
|
|
animation: meez-fade-in 0.2s ease;
|
|
}
|
|
|
|
@keyframes meez-fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.mobile-filter-sheet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-height: 85vh;
|
|
background: #ffffff !important;
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow: 0 -8px 32px rgba(5, 8, 65, 0.18);
|
|
animation: meez-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1000000;
|
|
}
|
|
|
|
@keyframes meez-slide-up {
|
|
from { transform: translateY(100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
|
|
.mobile-filter-header {
|
|
display: grid;
|
|
grid-template-columns: 44px 1fr 44px;
|
|
align-items: center;
|
|
min-height: 56px;
|
|
padding: 0 8px;
|
|
background: #ffffff !important;
|
|
border-bottom: 1px solid #edf0f5;
|
|
}
|
|
|
|
.mobile-filter-header h3 {
|
|
margin: 0;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: #050841;
|
|
text-align: center;
|
|
}
|
|
|
|
.mobile-filter-back-btn,
|
|
.mobile-filter-close-btn {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #050841;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.mobile-filter-back-btn svg,
|
|
.mobile-filter-close-btn svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.mobile-filter-body {
|
|
padding: 16px;
|
|
background: #ffffff !important;
|
|
overflow-y: auto;
|
|
max-height: calc(85vh - 56px);
|
|
}
|
|
|
|
.mobile-filter-main-view,
|
|
.mobile-filter-category-view {
|
|
background: #ffffff !important;
|
|
}
|
|
|
|
.mobile-filter-section-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
color: #050841;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mobile-section-icon {
|
|
width: 16px;
|
|
height: 18px;
|
|
color: #3d5df6;
|
|
}
|
|
|
|
.mobile-filter-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #ffffff;
|
|
border: 1px solid #edf0f5;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.mobile-filter-card-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
min-height: 52px;
|
|
padding: 12px 16px;
|
|
border: 0;
|
|
border-bottom: 1px solid #edf0f5;
|
|
background: #ffffff;
|
|
color: #050841;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mobile-filter-card-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.mobile-filter-card-item.active {
|
|
color: #3d5df6;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mobile-active-badge {
|
|
margin-left: 6px;
|
|
color: #3d5df6;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mobile-item-chevron {
|
|
color: #a5a9c1;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.mobile-item-chevron svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.mobile-clear-card {
|
|
background: #ffffff;
|
|
border: 1px solid #edf0f5;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mobile-clear-btn {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 48px;
|
|
padding: 12px 16px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #3d5df6;
|
|
font-family: var(--meez-font-sans);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mobile-clear-btn:disabled {
|
|
color: #a5a9c1;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.mobile-options-list {
|
|
max-height: calc(85vh - 160px);
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.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:#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; }
|
|
.application-body .entity-directory-toolbar-actions { display:flex; align-items:center; gap:8px; justify-self:end; }
|
|
.application-body .bulk-action-btn { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 14px; background:#fff; border:1px solid #dfe3ec; border-radius:6px; color:#050841; font-size:13px; font-weight:500; cursor:pointer; box-shadow:0 1px 2px rgba(5,8,65,0.04); transition:all .15s ease; }
|
|
.application-body .bulk-action-btn:hover { background:#f7f9fd; border-color:#bcc6e5; color:#3d5df6; }
|
|
.application-body .bulk-action-btn.bulk-delete { color:#f63d48; border-color:#fbd3d6; background:#fff; }
|
|
.application-body .bulk-action-btn.bulk-delete:hover { background:#fef2f2; border-color:#f63d48; color:#d32f2f; }
|
|
.application-body .bulk-action-btn.bulk-clear { color:#687086; border-color:#e4e7ed; }
|
|
.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 #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-row-actions > summary {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: #a5a9c1;
|
|
background: transparent;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.application-body .entity-row-actions > summary::-webkit-details-marker { display: none; }
|
|
.application-body .entity-row-actions > summary:hover {
|
|
color: #050841;
|
|
background: rgba(5, 8, 65, 0.05);
|
|
}
|
|
.application-body .entity-directory-row .workspace-pill-icon { width:24px; height:24px; display:flex; align-items:center; justify-content:center; justify-self:start; margin-left:2px; background:#3c4679; border-radius:50%; color:#fff; }
|
|
.application-body .entity-directory-row .workspace-pill-icon.ingredient { background:#3f908a; }
|
|
.application-body .entity-directory-row .workspace-pill-icon.book { background:#f3a642; }
|
|
.application-body .entity-directory-row .workspace-pill-icon.purchase { background:#3f908a; }
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
.application-body input[type="checkbox"] { accent-color:#3d5df6; }
|
|
.application-body .entity-directory-toolbar input[type="checkbox"],.application-body .entity-directory-row > input[type="checkbox"] { appearance:none; width:20px; height:20px; margin:0 0 0 8px; background:transparent; border:2px solid #ececec; border-radius:2px; cursor:pointer; }
|
|
.application-body .entity-directory-toolbar input[type="checkbox"]:checked,.application-body .entity-directory-row > input[type="checkbox"]:checked { background:#3d5df6; border-color:#3d5df6; }
|
|
.application-body .entity-directory-toolbar input[type="checkbox"]:checked::after,.application-body .entity-directory-row > input[type="checkbox"]:checked::after { content:""; display:block; width:5px; height:9px; margin:1px 0 0 5px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
|
|
.application-body .entity-directory-toolbar input[type="checkbox"]:indeterminate,.application-body .entity-directory-row > input[type="checkbox"]:indeterminate { background:#3d5df6; border-color:#3d5df6; }
|
|
.application-body .entity-directory-toolbar input[type="checkbox"]:indeterminate::after,.application-body .entity-directory-row > input[type="checkbox"]:indeterminate::after { content:""; display:block; width:10px; height:2px; margin:7px 0 0 3px; background:#fff; }
|
|
.application-body .entity-row-actions > summary svg { display:block; width:16px; height:16px; }
|
|
.application-body .workspace-pill-icon svg { display:block; width:20px; height:20px; }
|
|
.application-body .workspace-pills > a .workspace-pill-icon svg { width:20px; height:20px; padding:1.5px; }
|
|
.application-body .directory-error { padding:11px 20px; color:#f63d48; background:#fff1f2; border-bottom:1px solid #ffd7d9; }
|
|
.application-body .entity-directory-table .empty-state,.application-body .workspace-search-results .empty-state { padding:40px 20px; color:#a5a9c1; font-size:14px; font-weight:400; }
|
|
.application-body .workspace-search-results > p { margin:0; padding:0 20px 12px; color:#a5a9c1; font-size:14px; font-weight:400; }
|
|
.application-body .workspace-search-results > p strong { color:#050841; font-weight:500; }
|
|
/* Search results reuse EntityDirectory: detail line sits under the name. */
|
|
.application-body .entity-directory-name small { display:block; margin-top:2px; color:#a5a9c1; font-size:12px; font-weight:400; line-height:1.4; }
|
|
.application-body .delete-confirmation h2 { color:#202962; }
|
|
.application-body .delete-confirmation > div button { padding:0; background:transparent; border:0; cursor:pointer; color:#050841; font-size:15px; font-weight:500; }
|
|
.application-body .workspace-new-menu > nav a,.application-body .detail-new-menu > div a { font-size:16px; font-weight:400; }
|
|
.application-body .entity-row-actions a,.application-body .entity-row-actions button { border-radius:0; }
|
|
|
|
/* Full-width entity workspaces */
|
|
.application-body .immersive-main { color:#050841; background:#fff; }
|
|
.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; }
|
|
.application-body .entity-detail-header h1 { margin:9px 0 4px; color:#050841; font-size:28px; font-weight:600; line-height:1.18; letter-spacing:-.025em; }
|
|
.application-body .entity-detail-header p { color:#a5a9c1; font-size:13px; }
|
|
.application-body .entity-breadcrumb a { color:#647df8; font-size:13px; }
|
|
.application-body .identity-edit > summary { padding:7px 15px; color:#3d5df6; border-color:#3d5df6; border-radius:999px; font-size:13px; font-weight:600; }
|
|
.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-tab-panel { padding-top:38px; }
|
|
.application-body .entity-section { margin-bottom:48px; }
|
|
.application-body .entity-section h2,.application-body .entity-tab-panel h2,.application-body .recipe-view-method h2 { font-size:20px; font-weight:600; }
|
|
.application-body .panel-intro,.application-body .empty-copy { color:#a5a9c1; font-size:13px; }
|
|
.application-body .prep-action-table th,.application-body .prep-action-table td { padding:12px 8px; border-color:#eeeef3; }
|
|
.application-body .prep-action-table th { color:#a5a9c1; font-size:11px; font-weight:500; letter-spacing:.03em; text-transform:none; }
|
|
.application-body .additional-card { padding:25px 0; border:0; border-top:1px solid #eeeef3; }
|
|
.application-body .additional-card > details { border-bottom:1px solid #eeeef3; }
|
|
|
|
/* Recipe workspace and controls */
|
|
.application-body .immersive-main .recipe-detail-shell .entity-detail-header { min-height:116px; padding:20px 38px; }
|
|
.application-body .immersive-main .recipe-workspace-tabs { border-color:#f3f3f3; }
|
|
.application-body .recipe-overview-strip { border-color:#eeeef3; }
|
|
.application-body .recipe-yield-summary { border-color:#eeeef3; border-radius:2px; }
|
|
.application-body .recipe-yield-summary span,.application-body .recipe-yield-summary small { color:#a5a9c1; }
|
|
.application-body .recipe-structure-workspace .component-editor,.application-body .recipe-structure-workspace .method-editor,.application-body .recipe-structure-workspace .method-editor li { border-color:#eeeef3; }
|
|
.application-body .recipe-structure-workspace .component-editor { border-radius:0; box-shadow:none; }
|
|
.application-body .recipe-structure-workspace .section-heading h2 { color:#050841; font-size:20px; font-weight:600; }
|
|
.application-body table th { color:#a5a9c1; font-size:11px; font-weight:500; letter-spacing:.02em; text-transform:none; }
|
|
.application-body table td { color:#202962; }
|
|
.application-body th,.application-body td { border-color:#eeeef3; }
|
|
.application-body input:not([type="checkbox"]):not([type="radio"]),.application-body select,.application-body textarea { color:#050841; border-color:#e4e5ed; border-radius:3px; }
|
|
.application-body .detail-utility input[type="search"] { min-height:40px; color:#050841; background:transparent; border:0; border-bottom:1px solid #e4e5ed; border-radius:0; }
|
|
.application-body button { border-radius:3px; }
|
|
.application-body .primary-command,.application-body .editor-actions button,.application-body .inline-form button { background:#3d5df6; }
|
|
.application-body .recipe-view-method li { border-color:#eeeef3; }
|
|
.application-body .recipe-view-method li > strong { color:#647df8; }
|
|
.application-body .detail-utility .detail-new { background:#3d5df6; border-radius:999px; }
|
|
.application-body .edit-command { color:#3d5df6; border-color:#3d5df6; border-radius:999px; }
|
|
.application-body .ingredient-purchase-form .purchase-form-actions button { border-radius:999px; }
|
|
.application-body .nutrition-source,.application-body .muted { color:#a5a9c1; }
|
|
.application-body .recipe-edit-nutrition { width:48%; margin-left:52%; padding:38px 32px 56px; border-top:1px solid #eeeef3; border-left:1px solid #eeeef3; }
|
|
.application-body .nutrition-readiness { max-width:560px; margin-bottom:28px; }
|
|
.application-body .nutrition-readiness > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
|
|
.application-body .nutrition-readiness h2 { margin:0 0 3px; font-size:20px; font-weight:600; }
|
|
.application-body .nutrition-readiness p { margin:0; color:#a5a9c1; font-size:13px; }
|
|
.application-body .nutrition-readiness > header button { padding:8px 15px; color:#fff; background:#3d5df6; border:0; border-radius:18px; font-weight:600; cursor:pointer; }
|
|
.application-body .nutrition-readiness > header button:disabled { color:#a5a9c1; background:#f1f1f4; cursor:not-allowed; }
|
|
.application-body .nutrition-check { display:grid; grid-template-columns:26px 1fr; align-items:center; gap:10px; min-height:58px; padding:8px 12px; background:#fff8f2; border:1px solid #f6e2d2; }
|
|
.application-body .nutrition-check.complete { background:#f3faf8; border-color:#d9eee9; }
|
|
.application-body .nutrition-check > span,.application-body .nutrition-status-dot { display:grid; place-items:center; width:22px; height:22px; color:#fff; background:#e19351; border-radius:50%; font-size:11px; font-weight:700; }
|
|
.application-body .nutrition-check.complete > span,.application-body .nutrition-status-dot.mapped { background:#40b49a; }
|
|
.application-body .nutrition-check strong,.application-body .nutrition-check small { display:block; }
|
|
.application-body .nutrition-check small { margin-top:2px; color:#8b93a7; }
|
|
.application-body .nutrition-serving-form { display:flex; align-items:center; gap:7px; margin-top:9px; }
|
|
.application-body .nutrition-serving-form input { width:110px; min-height:34px; padding:6px 8px; background:#fff; }
|
|
.application-body .nutrition-serving-form button { min-height:34px; padding:6px 12px; color:#fff; background:#3d5df6; border:0; font-weight:600; }
|
|
.application-body .retention-input { display:flex; align-items:center; gap:4px; }.application-body .retention-input input { width:68px; }
|
|
.application-body .auto-yield-action { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; width:48%; margin-left:52%; padding:18px 32px; border-left:1px solid #eeeef3; border-top:1px solid #eeeef3; }.application-body .auto-yield-action button { padding:8px 12px; color:#fff; background:#3d5df6; border:0; }.application-body .auto-yield-action small { grid-column:1/-1; color:#a5a9c1; }
|
|
.application-body .cost-diagnostics { margin-top:18px; padding:12px; color:#8a4b25; background:#fff8f2; }.application-body .cost-diagnostics summary { cursor:pointer; font-weight:600; }.application-body .cost-diagnostics ul { padding-left:20px; }
|
|
.recipe-cost-ledger { color:#050841; }
|
|
.recipe-cost-ledger > header { margin-bottom:26px; }
|
|
.recipe-cost-ledger > header h2 { margin:0 0 6px !important; font-size:24px; }
|
|
.recipe-cost-ledger > header p { margin:0; color:#8d92a2; font-size:14px; line-height:1.5; }
|
|
.cost-ledger-heading {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
align-items: center !important;
|
|
padding: 10px 18px !important;
|
|
color: #8b93a7 !important;
|
|
border-bottom: 1px solid #eeeef3 !important;
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
.cost-ledger-heading .head-subject {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
flex-wrap: nowrap !important;
|
|
white-space: nowrap !important;
|
|
gap: 2px !important;
|
|
color: #8b93a7 !important;
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
.cost-ledger-heading .head-cost {
|
|
color: #8b93a7 !important;
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
text-align: right !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
.cost-ledger-heading button {
|
|
padding: 0 2px !important;
|
|
color: #3d5df6 !important;
|
|
background: transparent !important;
|
|
border: 0 !important;
|
|
font: inherit !important;
|
|
cursor: pointer !important;
|
|
font-size: 13px !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
.cost-ledger-heading button:hover {
|
|
color: #2b44c2 !important;
|
|
}
|
|
.cost-ledger-heading i {
|
|
color: #8b93a7 !important;
|
|
font-style: normal !important;
|
|
margin: 0 4px !important;
|
|
}
|
|
.cost-ledger-line {
|
|
border-bottom: 1px solid #eeeef3;
|
|
background: #fff;
|
|
}
|
|
.cost-ledger-line > summary {
|
|
display: grid;
|
|
grid-template-columns: 24px 30px minmax(0, 1fr) 24px 140px;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: 56px;
|
|
padding: 10px 18px;
|
|
list-style: none;
|
|
background: #fff;
|
|
transition: background 0.12s ease;
|
|
}
|
|
.cost-ledger-line > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.cost-ledger-line.has-children > summary {
|
|
cursor: pointer;
|
|
}
|
|
.cost-ledger-line.has-children > summary:hover {
|
|
background: #f8faff;
|
|
}
|
|
.cost-ledger-line.flat > summary {
|
|
cursor: default;
|
|
}
|
|
.cost-toggle-marker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: #8b93a7;
|
|
}
|
|
.cost-toggle-marker .chevron-icon {
|
|
transition: transform 0.15s ease;
|
|
}
|
|
.cost-ledger-line[open] > summary .cost-toggle-marker .chevron-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
.cost-subject-icon {
|
|
display: grid;
|
|
grid-column: 2;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: #fff;
|
|
background: #3f908a;
|
|
border-radius: 50%;
|
|
flex: none;
|
|
}
|
|
.cost-subject-icon.recipe {
|
|
background: #3c4679;
|
|
}
|
|
.cost-subject-icon svg {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.cost-subject-name {
|
|
grid-column: 3;
|
|
color: #050841;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
text-decoration: none;
|
|
}
|
|
.cost-subject-name:hover {
|
|
color: #3d5df6;
|
|
text-decoration: underline;
|
|
}
|
|
.cost-attention-slot {
|
|
grid-column: 4;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.cost-attention-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: #f3a642;
|
|
background: #fff8eb;
|
|
border-radius: 50%;
|
|
cursor: help;
|
|
position: relative;
|
|
}
|
|
.cost-attention-badge svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.cost-line-value {
|
|
grid-column: 5;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #050841;
|
|
}
|
|
.cost-editable-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
justify-content: flex-end;
|
|
color: #3d5df6;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.cost-editable-link:hover {
|
|
background: #f1f5fe;
|
|
color: #202962;
|
|
}
|
|
.cost-edit-icon {
|
|
font-size: 12px;
|
|
color: #8b93a7;
|
|
}
|
|
.cost-editable-link:hover .cost-edit-icon {
|
|
color: #3d5df6;
|
|
}
|
|
.cost-line-detail {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(120px, .4fr);
|
|
gap: 20px 40px;
|
|
padding: 16px 54px 24px;
|
|
background: #fbfbfd;
|
|
border-top: 1px solid #f0f2f6;
|
|
}
|
|
.cost-line-detail > div:not(.cost-child-lines) {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
.cost-line-detail small {
|
|
color: #8b93a7;
|
|
font-size: 12px;
|
|
}
|
|
.cost-line-detail strong {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
.cost-child-lines {
|
|
grid-column: 1 / -1;
|
|
border-top: 1px solid #eeeef3;
|
|
}
|
|
.cost-summary { width:min(520px,100%); margin:52px 0 0 auto; }
|
|
.cost-summary > div { display:grid; gap:8px; margin-bottom:18px; }
|
|
.cost-summary > div > strong { font-size:14px; }
|
|
.cost-summary > div > span { display:flex; justify-content:space-between; min-height:58px; padding:18px 20px; background:#f7f7f8; font-size:16px; }
|
|
.cost-summary small { font:inherit; }
|
|
.application-body .entity-header-actions { display:flex; align-items:center; gap:8px; }
|
|
.application-body .detail-actions-menu { position:relative; z-index:12; }
|
|
.application-body .detail-actions-menu > summary { display:grid; place-items:center; width:36px; height:36px; color:#a5a9c1; border-radius:50%; cursor:pointer; font-size:22px; line-height:1; list-style:none; }
|
|
.application-body .detail-actions-menu > summary::-webkit-details-marker { display:none; }
|
|
.application-body .detail-actions-menu > summary:hover,.application-body .detail-actions-menu[open] > summary { color:#202962; background:#f1f5fe; }
|
|
.application-body .detail-actions-menu > div { position:absolute; top:42px; right:0; width:200px; padding:6px 0; background:#fff; border:0; border-radius:4px; box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12); overflow:hidden; }
|
|
.application-body .detail-actions-menu form { width:100% !important; max-width:100% !important; flex:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; }
|
|
.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; }
|