feat: 落地 Warm Kitchen Ledger 原型,宽屏左导航 + 双栏布局
新增 ledger.css 设计令牌与桌面端布局,AppRail 左导航、PageHead 桌面页头、ResultsColumn 常驻结果栏;做菜/菜谱/发现/我的/设置/帮助/关于各页做桌面窄屏双形态适配,窄屏仍走原有底部标签栏与弹层交互。
This commit is contained in:
@@ -66,6 +66,33 @@ defineProps<{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
/* 桌面端用原型的白底描边 chip */
|
||||
.ingredient-chip {
|
||||
min-height: 38px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--ledger-border);
|
||||
border-radius: var(--ledger-r-pill);
|
||||
background: var(--ledger-surface);
|
||||
color: var(--ledger-text);
|
||||
font: 400 var(--ledger-t-15) / 1 var(--ledger-font-body);
|
||||
}
|
||||
.ingredient-chip:hover {
|
||||
border-color: var(--ledger-border-strong);
|
||||
}
|
||||
.ingredient-chip[aria-pressed='true'] {
|
||||
border-color: var(--ledger-primary);
|
||||
background: var(--ledger-primary);
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
.ingredient-chip:focus-visible {
|
||||
outline: 2px solid var(--ledger-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ingredient-chip {
|
||||
transition: none;
|
||||
|
||||
Reference in New Issue
Block a user