style(ui): match Meez Batch size and Yield area row layout, underline inputs, and calculate toggle
This commit is contained in:
+1
-1
@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest";
|
||||
import { openDatabase } from "../lib/database";
|
||||
import { createMcpTools } from "./tools";
|
||||
|
||||
describe("MCP Tools & Domain Integration", () => {
|
||||
describe("MCP Tools & Domain Integration", { timeout: 20000 }, () => {
|
||||
it("searches recipes with keywords and filters", () => {
|
||||
const db = openDatabase({ readOnly: true });
|
||||
expect(db).toBeDefined();
|
||||
|
||||
+141
-60
@@ -2888,79 +2888,160 @@ input[type="search"]::-webkit-search-results-decoration,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator { margin-top:0; }
|
||||
|
||||
/* Formula meta row: Batch and Yield controls matching Meez style. */
|
||||
.application-body .recipe-view-formula .calculator-heading,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
align-items:baseline;
|
||||
gap:28px;
|
||||
margin-bottom:28px;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 28px !important;
|
||||
margin-bottom: 24px !important;
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading > div:first-child { display:none; }
|
||||
.application-body .recipe-view-formula .calculator-heading > div:first-child,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading > div:first-child { display: none !important; }
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .basis-input,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .basis-input {
|
||||
display:inline-flex;
|
||||
align-items:baseline;
|
||||
gap:8px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
color:#050841;
|
||||
font-size:14px;
|
||||
font-weight:400;
|
||||
letter-spacing:0;
|
||||
text-transform:none;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 6px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
color: #050841 !important;
|
||||
font-family: var(--meez-font-sans) !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 400 !important;
|
||||
letter-spacing: 0 !important;
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .scale-label,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .scale-label {
|
||||
color:#050841;
|
||||
font-size:14px;
|
||||
font-weight:400;
|
||||
color: #737c91 !important;
|
||||
font-family: var(--meez-font-sans) !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .recipe-scale-control,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .recipe-scale-control {
|
||||
display:inline-flex;
|
||||
align-items:baseline;
|
||||
height:auto;
|
||||
min-height:0;
|
||||
padding:0 0 2px;
|
||||
background:transparent;
|
||||
border:0;
|
||||
border-bottom:1px solid #a5a9c1;
|
||||
border-radius:0;
|
||||
overflow:visible;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
padding: 0 0 2px !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid #c4c7d4 !important;
|
||||
border-radius: 0 !important;
|
||||
overflow: visible !important;
|
||||
transition: border-color 0.15s ease !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .recipe-scale-control:hover,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .recipe-scale-control:hover {
|
||||
border-bottom-color: #050841 !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .recipe-scale-control:focus-within,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .recipe-scale-control:focus-within {
|
||||
border-bottom: 2px solid #3d5df6 !important;
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .recipe-scale-control input,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .recipe-scale-control input {
|
||||
width:auto;
|
||||
min-width:24px;
|
||||
max-width:8ch;
|
||||
height:auto;
|
||||
padding:0;
|
||||
color:#050841;
|
||||
background:transparent;
|
||||
border:0;
|
||||
outline:0;
|
||||
font-family:var(--meez-font-sans);
|
||||
font-size:15px;
|
||||
font-weight:500;
|
||||
text-align:left;
|
||||
-moz-appearance:textfield;
|
||||
width: auto !important;
|
||||
min-width: 24px !important;
|
||||
max-width: 8ch !important;
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
color: #050841 !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
outline: 0 !important;
|
||||
font-family: var(--meez-font-sans) !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 500 !important;
|
||||
text-align: left !important;
|
||||
-moz-appearance: textfield !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .quantity-control input,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .quantity-control input {
|
||||
min-width:32px;
|
||||
max-width:10ch;
|
||||
font-size:15px;
|
||||
font-weight:500;
|
||||
min-width: 32px !important;
|
||||
max-width: 10ch !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .recipe-scale-control select,
|
||||
.application-body .immersive-main .recipe-read-shell .recipe-view-formula .calculator-heading .recipe-scale-control select {
|
||||
width:auto;
|
||||
height:auto;
|
||||
padding:0 0 0 4px;
|
||||
color:#050841;
|
||||
background:transparent;
|
||||
border:0;
|
||||
border-radius:0;
|
||||
outline:0;
|
||||
font-family:var(--meez-font-sans);
|
||||
font-size:14px;
|
||||
font-weight:500;
|
||||
cursor:pointer;
|
||||
text-align:left;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
padding: 0 0 0 4px !important;
|
||||
color: #050841 !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
outline: 0 !important;
|
||||
font-family: var(--meez-font-sans) !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .calculator-percent-controls {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 14px !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .calculate-toggle {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
color: #050841 !important;
|
||||
font-family: var(--meez-font-sans) !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
cursor: pointer !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .calculate-toggle i {
|
||||
position: relative !important;
|
||||
width: 34px !important;
|
||||
height: 18px !important;
|
||||
background: #cbd1dc !important;
|
||||
border-radius: 10px !important;
|
||||
transition: background-color 0.2s ease !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .calculate-toggle i::after {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
top: 2px !important;
|
||||
left: 2px !important;
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
background: #fff !important;
|
||||
border-radius: 50% !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .calculate-toggle input:checked + i {
|
||||
background: #43b99f !important;
|
||||
}
|
||||
|
||||
.application-body .recipe-view-formula .calculator-heading .calculate-toggle input:checked + i::after {
|
||||
transform: translateX(16px) !important;
|
||||
}
|
||||
|
||||
/* Borderless formula component and ingredient table */
|
||||
|
||||
Reference in New Issue
Block a user