Files
formulation/src/styles/components/recipe-edit.css
T

864 lines
26 KiB
CSS

/* Actions group on the far right: Delete (RemoveCircle) followed by Drag (6-dot) */
.application-body .unified-recipe-editor .row-actions-group {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 3px;
}
.application-body .unified-recipe-editor .remove-row-btn,
.application-body .unified-recipe-editor .drag-handle {
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: #a5a9c1;
background: transparent;
border: 0;
border-radius: 50%;
padding: 0;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.application-body .unified-recipe-editor .drag-handle {
cursor: grab;
}
.application-body .unified-recipe-editor .drag-handle:active {
cursor: grabbing;
}
.application-body .unified-recipe-editor .remove-row-btn svg,
.application-body .unified-recipe-editor .drag-handle svg {
display: block;
}
.application-body .unified-recipe-editor .editor-items tbody tr:hover .remove-row-btn,
.application-body .unified-recipe-editor .editor-items tbody tr:focus-within .remove-row-btn,
.application-body .unified-recipe-editor .editor-items tbody tr:hover .drag-handle,
.application-body .unified-recipe-editor .editor-items tbody tr:focus-within .drag-handle {
opacity: 1;
}
.application-body .unified-recipe-editor .remove-row-btn:hover {
color: #f63d48;
background-color: #fff1f2;
transform: scale(1.08);
}
.application-body .unified-recipe-editor .drag-handle:hover {
color: #050841;
background-color: #eef1f8;
transform: scale(1.08);
}
/* Row inputs: 15px font, borderless with Meez blue underline on hover & focus */
.application-body .unified-recipe-editor .editor-items .quantity-column input,
.application-body .unified-recipe-editor .editor-items .unit-column select,
.application-body .unified-recipe-editor .editor-items .entity-column input,
.application-body .unified-recipe-editor .editor-items .notes-column input,
.application-body .unified-recipe-editor .editor-items .percent-column input {
width: 100%;
min-height: 38px;
height: 38px;
padding: 4px 6px;
color: #050841;
background: transparent;
border: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
font-family: var(--meez-font-sans);
font-size: 15px;
font-weight: 400;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: border-bottom-color 0.12s ease;
}
.application-body .unified-recipe-editor .editor-items .unit-column select {
appearance: none;
-webkit-appearance: none;
background-image: none;
cursor: pointer;
}
.application-body .unified-recipe-editor .editor-items .notes-column input {
font-style: italic;
font-weight: 300;
color: #050841;
}
.application-body .unified-recipe-editor .editor-items .notes-column input::placeholder {
font-style: italic;
color: #a5a9c1;
opacity: 0.85;
}
/* Hover: crisp Meez blue underline */
.application-body .unified-recipe-editor .editor-items tbody tr input:hover,
.application-body .unified-recipe-editor .editor-items tbody tr select:hover {
background: transparent;
border: 0;
border-bottom: 1px solid #3d5df6;
}
/* Focus: thicker 2px blue underline */
.application-body .unified-recipe-editor .editor-items tbody tr input:focus,
.application-body .unified-recipe-editor .editor-items tbody tr select:focus {
background: transparent !important;
border: 0 !important;
border-bottom: 2px solid #3d5df6 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* Sub-recipe styling in entity input */
.application-body .unified-recipe-editor .row-entity-combobox.is-subrecipe input {
color: #3d5df6;
font-weight: 500;
}
/* Autocomplete Combobox Dropdown */
.application-body .unified-recipe-editor .row-entity-combobox {
position: relative;
width: 100%;
}
.application-body .unified-recipe-editor .row-entity-results {
position: absolute;
z-index: 100;
top: calc(100% + 4px);
left: 0;
min-width: 300px;
width: max-content;
max-width: 440px;
max-height: 280px;
overflow-y: auto;
background: #fff;
border: 1px solid #dfe3ec;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(5, 8, 41, 0.14);
padding: 6px;
}
.application-body .unified-recipe-editor .row-entity-results button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 6px;
color: #050841;
font-family: var(--meez-font-sans);
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background-color 0.1s ease, color 0.1s ease;
}
.application-body .unified-recipe-editor .row-entity-results button:hover,
.application-body .unified-recipe-editor .row-entity-results button:focus {
background: #f1f5fe;
color: #3d5df6;
outline: 0;
}
.application-body .unified-recipe-editor .row-entity-results .badge-recipe {
background: #f1f5fe;
color: #3d5df6;
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
}
.application-body .unified-recipe-editor .row-entity-results .badge-ingredient {
background: #eaf8f4;
color: #23856d;
font-size: 11px;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
}
.application-body .unified-recipe-editor .row-create-actions {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid #f3f3f3;
}
.application-body .unified-recipe-editor .row-create-actions button {
color: #3d5df6;
font-weight: 600;
}
.application-body .unified-recipe-editor .remove-row-btn {
width:22px;
height:22px;
padding:0;
display:inline-grid;
place-items:center;
color:#a5a9c1;
background:transparent;
border:0;
border-radius:4px;
font-size:12px;
cursor:pointer;
opacity: 0;
transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.application-body .unified-recipe-editor .editor-items tbody tr:hover .remove-row-btn,
.application-body .unified-recipe-editor .editor-items tbody tr:focus-within .remove-row-btn {
opacity: 1;
}
.application-body .unified-recipe-editor .remove-row-btn:hover {
color:#f63d48;
background:#fff1f2;
}
.application-body .unified-recipe-editor .add-line-row {
margin:6px 0 0;
}
.application-body .unified-recipe-editor .quick-add-search {
position:relative;
}
.application-body .unified-recipe-editor .quick-add-search input {
width:100%;
min-height:36px;
padding:6px 12px;
color:#050841;
background:#fff;
border:1px dashed #cfd5fa;
border-radius:6px;
font-family:var(--meez-font-sans);
font-size:13px;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.application-body .unified-recipe-editor .quick-add-search input::placeholder {
color: #8283a0;
}
.application-body .unified-recipe-editor .quick-add-search input:focus {
border-style:solid;
border-color:#3d5df6;
outline:0;
box-shadow:0 0 0 2px rgba(61,93,246,0.12);
}
.application-body .unified-recipe-editor .recipe-item-results {
position: absolute;
z-index: 100;
top: calc(100% + 4px);
left: 0;
min-width: 300px;
width: 100%;
max-height: 280px;
overflow-y: auto;
background: #fff;
border: 1px solid #dfe3ec;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(5, 8, 41, 0.14);
padding: 6px;
}
.application-body .unified-recipe-editor .recipe-item-results button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 6px;
color: #050841;
font-family: var(--meez-font-sans);
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.application-body .unified-recipe-editor .recipe-item-results button:hover {
background: #f1f5fe;
color: #3d5df6;
}
.application-body .unified-recipe-editor .recipe-item-results small {
color: #8283a0;
font-size: 11px;
}
.application-body .unified-recipe-editor .recipe-item-results .create-ingredient-result {
color: #3d5df6;
border-top: 1px solid #f3f3f3;
margin-top: 4px;
padding-top: 8px;
}
/* Method editor: modern compact step cards matching Meez */
.application-body .method-editor {
min-width: 0;
padding: 0;
border-left: 0;
}
.application-body .method-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.application-body .method-header-row h2 {
margin: 0;
font-family: var(--meez-font-sans);
font-size: 20px;
font-weight: 500;
color: #050841;
}
.application-body .method-header-row h2 small {
font-size: 14px;
font-weight: 400;
color: #8b93a7;
margin-left: 6px;
}
.application-body .bulk-prep-btn {
min-height: 28px;
padding: 4px 12px;
color: #3d5df6;
background: #fff;
border: 1px solid #3d5df6;
border-radius: 100px;
font-family: var(--meez-font-sans);
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.application-body .bulk-prep-btn:hover {
background: #f1f5fe;
}
.application-body .method-steps-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.application-body .method-step-card {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) 52px;
gap: 6px;
align-items: start;
min-height: 36px;
padding: 4px 8px;
background: #fff;
border: 1px solid #edf0f5;
border-radius: 4px;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
.application-body .method-step-card:hover {
border-color: #dfe3ec;
background-color: #fafbfe;
}
.application-body .method-step-card:focus-within {
border-color: #dfe3ec;
background-color: #fafbfe;
}
.application-body .step-badge {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f1f5fe;
color: #3d5df6;
font-size: 11px;
font-weight: 700;
margin-top: 2px;
}
.application-body .step-body {
min-width: 0;
}
.application-body .method-step-card .step-num {
font-size: 14px;
font-weight: 700;
color: #050841;
padding-top: 4px;
}
.application-body .method-step-card .step-textarea {
width: 100%;
min-height: 28px;
padding: 3px 0 3px;
border: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
outline: 0;
background: transparent;
font-family: var(--meez-font-sans);
font-size: 14px;
line-height: 20px;
color: #050841;
resize: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition: border-bottom-color 0.12s ease;
}
.application-body .method-step-card .step-textarea:hover {
border-bottom: 1px solid #3d5df6;
}
.application-body .method-step-card .step-textarea:focus {
border-bottom: 2px solid #3d5df6;
}
.application-body .method-step-card.prep-heading .step-textarea {
font-weight: 700;
}
.application-body .method-step-card.prep-note .step-textarea {
font-style: italic;
font-weight: 300;
color: #4d5481;
}
.application-body .method-step-card .step-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
}
.application-body .method-step-card .remove-step-btn,
.application-body .method-step-card .drag-handle {
display: grid;
place-items: center;
width: 24px;
height: 24px;
color: #a5a9c1;
background: transparent;
border: 0;
border-radius: 50%;
padding: 0;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.application-body .method-step-card .drag-handle {
cursor: grab;
}
.application-body .method-step-card .drag-handle:active {
cursor: grabbing;
}
.application-body .method-step-card .remove-step-btn svg,
.application-body .method-step-card .drag-handle svg {
display: block;
}
.application-body .method-step-card:hover .remove-step-btn,
.application-body .method-step-card:focus-within .remove-step-btn,
.application-body .method-step-card:hover .drag-handle,
.application-body .method-step-card:focus-within .drag-handle {
opacity: 1;
}
.application-body .method-step-card .remove-step-btn:hover {
color: #f63d48;
background-color: #fff1f2;
transform: scale(1.08);
}
.application-body .method-step-card .drag-handle:hover {
color: #050841;
background-color: #eef1f8;
transform: scale(1.08);
}
/* Prep Method View Mode - Compact Meez Parity */
.application-body .recipe-view-method h2 {
margin: 0 0 16px 0 !important;
font-family: var(--meez-font-sans) !important;
font-size: 20px !important;
font-weight: 500 !important;
color: #050841 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.application-body .recipe-view-method h2 small {
font-size: 14px !important;
font-weight: 400 !important;
color: #8b93a7 !important;
}
.application-body .recipe-view-method .method-steps-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.application-body .recipe-view-method .method-step-item {
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
color: #050841 !important;
font-family: var(--meez-font-sans) !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
.application-body .recipe-view-method .method-step-item strong {
min-width: 20px !important;
flex-shrink: 0 !important;
font-family: var(--meez-font-sans) !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #050841 !important;
line-height: 1.45 !important;
}
.application-body .recipe-view-method .method-step-item span {
flex: 1 !important;
font-family: var(--meez-font-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #050841 !important;
line-height: 1.45 !important;
}
.application-body .recipe-view-method .method-step-item.prep-heading {
margin-top: 14px !important;
margin-bottom: 2px !important;
}
.application-body .recipe-view-method .method-heading-text {
margin: 0 !important;
font-family: var(--meez-font-sans) !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #050841 !important;
line-height: 1.45 !important;
}
.application-body .recipe-view-method .method-step-item.prep-note {
margin: 2px 0 6px 0 !important;
}
.application-body .recipe-view-method .method-note-text {
margin: 0 !important;
font-family: var(--meez-font-sans) !important;
font-size: 13px !important;
font-style: italic !important;
color: #737c91 !important;
line-height: 1.4 !important;
}
.application-body .method-footer-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #f3f3f3;
}
/* Smart Quick Add Bar */
.application-body .unified-recipe-editor .quick-add-bar {
display: grid;
grid-template-columns: 64% 36%;
gap: 10px;
margin: 10px 0 16px;
}
.application-body .unified-recipe-editor .quick-add-search,
.application-body .unified-recipe-editor .quick-add-notes {
position: relative;
}
.application-body .unified-recipe-editor .quick-add-bar input {
width: 100%;
height: 42px;
padding: 6px 12px;
background: #fff;
border: 1px solid #dfe3ec;
border-radius: 4px;
font-family: var(--meez-font-sans);
font-size: 15px;
font-weight: 400;
color: #050841;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.application-body .unified-recipe-editor .quick-add-bar input::placeholder {
color: #a5a9c1;
}
.application-body .unified-recipe-editor .quick-add-bar input:focus {
border-color: #3d5df6;
outline: 0;
box-shadow: 0 0 0 2.5px rgba(61, 93, 246, 0.18);
}
/* Bottom Bar & Actions */
.application-body .unified-recipe-editor .structure-bottom-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
min-height: 48px;
margin: 16px 0 28px;
padding: 4px 0;
}
.application-body .editor-keyboard-hint {
display: flex;
align-items: center;
gap: 14px;
color: #a5a9c1;
font-size: 13px;
font-weight: 300;
}
.application-body .editor-keyboard-hint kbd {
display: inline-block;
padding: 2px 6px;
background: #f1f3f8;
border-radius: 4px;
color: #4d5481;
font-family: inherit;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.application-body .unified-recipe-editor .structure-add-actions {
display: flex;
align-items: center;
gap: 18px;
}
.application-body .action-link-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
color: #3d5df6;
background: transparent;
border: 0;
font-family: var(--meez-font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: color 0.12s ease;
}
.application-body .action-link-btn svg {
display: block;
}
.application-body .action-link-btn:hover {
color: #202962;
text-decoration: underline;
}
.application-body .bulk-add-trigger,
.application-body .bulk-prep-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
height: 36px;
padding: 0 18px;
color: #050841;
background: #ffffff;
border: 1px solid #050841;
border-radius: 999px;
font-family: var(--meez-font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 0.12s ease;
}
.application-body .bulk-add-trigger:hover,
.application-body .bulk-prep-btn:hover {
color: #3d5df6;
border-color: #3d5df6;
background: #f1f5fe;
text-decoration: none;
}
.application-body .unified-recipe-editor .add-line {
display:grid;
grid-template-columns:minmax(0,2fr) minmax(130px,1fr);
gap:0;
}
.application-body .unified-recipe-editor .add-line-notes {
width:100%;
min-height:58px;
padding:12px 14px;
color:#050841;
background:#fff;
border:1px solid #f3f3f3;
border-left:0;
border-radius:0;
font:italic 14px var(--sans);
}
.application-body .unified-recipe-editor .add-line-notes::placeholder { color:#a5a9c1; }
.bulk-ingredient-backdrop {
position:fixed;
z-index:1000;
inset:0;
display:grid;
place-items:center;
padding:24px;
background:rgba(5,8,31,.52);
}
.bulk-ingredient-dialog {
position:relative;
display:flex;
width:min(780px,100%);
max-height:calc(100vh - 48px);
padding:52px 68px 48px;
overflow:auto;
flex-direction:column;
color:#050841;
background:#fff;
border-radius:10px;
box-shadow:0 24px 70px rgba(5,8,31,.28);
}
.bulk-ingredient-dialog h2 { margin:0 0 24px; font-size:30px; font-weight:700; }
.bulk-ingredient-dialog > p:not(.bulk-dialog-error) { margin:0 0 8px; color:#8b8d99; font-size:15px; font-weight:500; }
.bulk-ingredient-dialog textarea {
width:100%;
min-height:330px;
padding:18px 14px;
resize:vertical;
color:#050841;
background:#fff;
border:1px solid #eeeef3;
border-bottom:1px solid #647df8;
border-radius:0;
font:15px/1.55 var(--sans);
}
.bulk-ingredient-dialog textarea::placeholder { color:#a5a9c1; opacity:1; }
.bulk-dialog-close {
position:absolute;
top:28px;
right:36px;
width:38px;
height:38px;
padding:0;
color:#050841;
background:transparent;
border:0;
cursor:pointer;
font-size:34px;
font-weight:300;
line-height:1;
}
.bulk-dialog-error { margin:7px 0 0; color:#ef3d4d; font-size:13px; font-weight:600; }
.bulk-entry-help { display:flex; margin:18px 0 34px; flex-direction:column; gap:12px; font-size:14px; }
.bulk-entry-help small { color:#a5a9c1; font-size:inherit; }
.bulk-ingredient-dialog footer { display:flex; align-items:center; justify-content:flex-end; gap:44px; }
.bulk-ingredient-dialog footer button { min-height:48px; padding:10px 24px; cursor:pointer; border:0; font-weight:700; }
.bulk-ingredient-dialog .bulk-cancel { color:#3d5df6; background:transparent; }
.bulk-ingredient-dialog .bulk-submit { min-width:250px; color:#fff; background:#647df8; border-radius:28px; }
.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:#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:#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;
padding: 0 0 4px;
background: transparent;
border: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
color: #050841;
font-family: var(--meez-font-sans);
font-size: 28px;
font-weight: 900;
line-height: 38px;
width: 100%;
}
.application-body .editable-entity-title:focus {
outline: 0;
border-bottom-color: #3d5df6;
}
/* 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:#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 #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; }
.application-body .detail-breadcrumbs { display:flex; align-items:center; min-width:0; gap:0; margin:0; padding:0; list-style:none; }
.application-body .detail-breadcrumbs li { display:flex; align-items:center; min-width:0; }
.application-body .detail-breadcrumbs li+li::before { content:"/"; margin:0 8px; color:#a5a9c1; }
.application-body .detail-breadcrumbs a { overflow:hidden; color:#202962; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:400; }
.application-body .detail-breadcrumbs a:hover { color:#3d5df6; text-decoration:underline; }
.application-body .entity-breadcrumb { display:none; }
.application-body .recipe-detail-shell > .entity-detail-header > div:first-child > p { display:none; }
.application-body .tag-chip-editor { min-height:42px; padding:6px 10px; background:#fff; border:1px solid #dfe3ec; border-radius:4px; }
.application-body .tag-chip-list { display:flex; flex-wrap:wrap; gap:6px; }
.application-body .tag-chip-list span { display:inline-flex; align-items:center; gap:5px; min-height:26px; padding:2px 7px 2px 10px; color:#202962; background:#f1f5fe; border-radius:16px; font-size:12px; }
.application-body .tag-chip-list b { font-weight:500; }
.application-body .tag-chip-list button { display:grid; place-items:center; width:18px; height:18px; padding:0; color:#7d86a0; background:transparent; border:0; border-radius:50%; cursor:pointer; font-size:14px; }
.application-body .tag-chip-list button:hover { color:#050841; background:#e1e7fa; }
.application-body input.tag-chip-entry { width:100%; min-height:28px !important; padding:2px !important; background:transparent !important; border:0 !important; outline:0; }
.application-body .recipe-additional-editor {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #f3f3f3;
}
.application-body .recipe-additional-editor h2 {
margin: 0 0 20px;
color: #050841;
font-size: 18px;
font-weight: 700;
}
.application-body .recipe-additional-editor > form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 24px;
}
.application-body .recipe-additional-editor fieldset {
grid-template-columns: 1fr 1fr;
padding: 0;
border: 0;
}
.application-body .recipe-additional-editor fieldset input[name="storage_condition"] {
grid-column: 1/-1;
}
.application-body .recipe-additional-editor input,
.application-body .recipe-additional-editor select {
min-height: 40px;
padding: 6px 10px;
background: #fff;
border: 1px solid #dfe3ec;
border-radius: 4px;
font-family: var(--meez-font-sans);
font-size: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.application-body .recipe-additional-editor input:hover,
.application-body .recipe-additional-editor select:hover {
border-color: #3d5df6;
}
.application-body .recipe-additional-editor input:focus,
.application-body .recipe-additional-editor select:focus {
border-color: #3d5df6;
outline: 0;
box-shadow: 0 0 0 2.5px rgba(61, 93, 246, 0.18);
}
.application-body .recipe-additional-editor label {
display: flex;
flex-direction: column;
gap: 6px;
}
.application-body .recipe-additional-editor label span {
font-size: 13px;
font-weight: 500;
color: #4d5481;
}
.application-body .recipe-edit-tab-panel {
width: 100%;
padding: 16px 0;
}
.application-body .recipe-edit-tab-panel h2 {
margin: 0 0 16px;
color: #050841;
font-size: 20px;
font-weight: 700;
}
.application-body .recipe-edit-tab-panel .recipe-cost-ledger { width:100%; }
.application-body .recipe-edit-tab-panel .cost-ledger-lines { border-top:1px solid #eeeef3; }
.application-body .recipe-history { display:none; }