/* Lynux shadcn-style 组件（移植自 Hermes 0.14 web dashboard ui/components/*） * * 0.14 用 Tailwind v4 + shadcn/ui，所有类名是 Tailwind utility。 * 这里 1:1 翻成原生 CSS，保留 0.14 的视觉与语义。 * * 文件对应关系（0.14 → lynux）： * ui/components/card.tsx → .card .card-title .card-description .card-content .card-header * ui/components/badge.tsx → .badge .badge--outline / success / warning / destructive / secondary * ui/components/input.tsx → .input * ui/components/label.tsx → .label + .badge 类名复用 * ui/components/separator.tsx → .separator .separator--vertical * * Token 已对齐到 base.css 的 LENS_0。 */ /* ============================================================== */ /* Card */ /* 0.14: border border-border bg-card/80 text-card-foreground */ /* clip-path: polygon(切角) */ /* ============================================================== */ .card { background: color-mix(in srgb, var(--color-card) 80%, transparent); border: 1px solid var(--color-border); color: var(--color-card-foreground); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* 0.14 切角（10px 等腰直角） */ clip-path: polygon( 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px ); } .card-header { display: flex; flex-direction: column; gap: 0.375rem; /* gap-1.5 */ padding: 1rem; /* p-4 */ border-bottom: 1px solid var(--color-border); } .card-title { font-family: var(--font-rules-expanded); font-size: 0.875rem; /* text-sm */ font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-card-foreground); margin: 0; mix-blend-mode: plus-lighter; } .card-description { font-family: var(--font-mondwest); font-size: 0.75rem; /* text-xs */ color: var(--color-muted-foreground); margin: 0; } .card-content { padding: 1rem; } /* ============================================================== */ /* Badge（标签） */ /* 0.14: inline-flex items-center font-compressed text-display */ /* px-2 py-1 leading-none tracking-[0.2em] */ /* 5 个 tone：default / outline / secondary / success / warning / */ /* destructive */ /* ============================================================== */ .badge { display: inline-flex; align-items: center; font-family: var(--font-rules-compressed); font-size: 0.75rem; /* text-xs；Rules Compressed 字面看起来更大 */ line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5rem 0.75rem; /* py-1 px-2（Rules Compressed 视觉需要更大 padding） */ border-radius: var(--radius); white-space: nowrap; } /* default：BlendMode + --midground-alpha（移植 0.14 的 Lens-aware 默认） */ .badge--default { background: color-mix(in srgb, var(--color-midground, var(--color-card-foreground)) 7.5%, transparent); color: var(--color-midground, var(--color-card-foreground)); border: 1px solid color-mix(in srgb, var(--color-midground, var(--color-card-foreground)) 30%, transparent); } .badge--outline { background: transparent; color: color-mix(in srgb, var(--color-midground, var(--color-card-foreground)) 80%, transparent); border: 1px solid color-mix(in srgb, var(--color-midground, var(--color-card-foreground)) 30%, transparent); } .badge--secondary { background: color-mix(in srgb, var(--color-midground, var(--color-card-foreground)) 8%, transparent); color: var(--color-midground, var(--color-card-foreground)); border: 1px solid color-mix(in srgb, var(--color-midground, var(--color-card-foreground)) 15%, transparent); } .badge--success { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); } .badge--warning { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); } .badge--destructive { background: color-mix(in srgb, var(--color-destructive) 15%, transparent); color: var(--color-destructive); border: 1px solid color-mix(in srgb, var(--color-destructive) 30%, transparent); } /* ============================================================== */ /* Label */ /* 0.14: font-mondwest text-xs tracking-[0.1em] uppercase */ /* ============================================================== */ .label { display: block; font-family: var(--font-mondwest); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: var(--color-muted-foreground); } /* 标签可见三态（S17 · 内容 M4 · C9）：`.label` 本身是块级，所以「与值同行」要显式退回行内。 * 两个修饰类由 `views/fields/*.php` 按大脑给的 `labelMode` 挂上 —— 三态版式只有这一处定义。 */ .label--above { display: block; margin-bottom: 0.25rem; } .label--inline { display: inline; margin-right: 0.25rem; } /* ============================================================== */ /* Input */ /* 0.14: h-9 px-3 py-1 border border-border bg-background/40 */ /* font-courier text-sm */ /* focus-visible:ring-1 ring-foreground/30 border-foreground/25 */ /* ============================================================== */ .input { display: flex; height: 2.25rem; /* h-9 */ width: 100%; padding: 0.25rem 0.75rem; /* py-1 px-3 */ font-family: var(--font-mono); font-size: 0.875rem; /* text-sm */ color: var(--color-text); background: color-mix(in srgb, var(--color-bg) 40%, transparent); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s; } .input::placeholder { color: var(--color-muted-foreground); } .input:focus-visible { outline: none; border-color: color-mix(in srgb, var(--color-text) 25%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 30%, transparent); } .input:disabled { cursor: not-allowed; opacity: 0.5; } /* ============================================================== */ /* Separator */ /* 0.14: bg-border h-px w-full / h-full w-px */ /* ============================================================== */ .separator { flex-shrink: 0; background: var(--color-border); } .separator--horizontal { height: 1px; width: 100%; } .separator--vertical { height: 100%; width: 1px; }