/* ============================================================================ * L-api 皮肤 v2 · 「仪表台」科技风 · 组件层 * ---------------------------------------------------------------------------- * 依赖：l-api-skin.css（令牌层，必须先加载） * 注入顺序必须是：skin.css → visual.css → effects.css * * ▍为什么这一层能存在 * 实测线上 CSS 产物，New API 前端用的是 shadcn 的 data-slot 约定， * 全站有 **55 种 data-slot**（table / card / input-group / status-badge / * dialog-content / tooltip-content / kbd / progress-indicator …）。 * 这是稳定的语义钩子 —— 比 Tailwind 工具类（bg-* / text-*，会随构建变） * 可靠得多，所以本层全部基于它重绘，不去猜类名。 * * ▍为什么不用 !important * Tailwind 4 把全部工具类包在 @layer theme/base/components/utilities 里， * 而**未分层（unlayered）的样式在层叠中优先于任何分层样式**。 * 我们注入的 CSS 是未分层的，同特异性下天然赢 —— 所以不需要 !important。 * （唯一例外是令牌覆盖，那里用 :root:root 提特异性而不是 !important。） * * ▍科技感从哪来（不是靠发光） * ① 细线优先：1px 描边做层次，阴影只留给浮层 * ② 金属边：面板顶部 1px 内高光 * ③ 点阵底纹：极淡的网格，给面板「仪表」质感 * ④ 等宽数字：所有数值/ID/Key/时间 * ⑤ 仪器标签：表头/字段名小号、加字距、弱色 * ⑥ 单一强调色：电光薄荷绿只出现在焦点、选中、关键数值上 * ⑦ 消灭渐变：应用的 glass-* 材质系统改成纯色 + 描边 * ========================================================================= */ /* ============================ 0 · 派生令牌 ============================ */ :root:root { --tech-radius-sm: calc(var(--radius) * 0.6); --tech-radius-xs: calc(var(--radius) * 0.45); --tech-hover: color-mix(in oklab, var(--foreground) 5%, transparent); --tech-active: color-mix(in oklab, var(--primary) 10%, transparent); --tech-sel: color-mix(in oklab, var(--primary) 22%, transparent); } /* ============================ 1 · 全局基底 ============================ */ /* ① 背景点阵：4.5~5% 透明度，几乎看不见，但让大面积留白不再死板。 固定 22px 网格，随主题自动换色（--tech-grid）。 */ html:root:root body { background-image: radial-gradient(var(--tech-grid) 1px, transparent 1px); background-size: 22px 22px; background-attachment: fixed; } /* ② 选中文字：主色 22%，不要用系统蓝 */ ::selection { background: var(--tech-sel); color: var(--foreground); } /* ③ 滚动条：细、方、悬停变主色 */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--foreground) 18%, transparent); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ④ 焦点环：2px 实线 + 2px 偏移。科技感要「精确」，不要发光。 ⚠️ 这里不要写 border-radius —— outline 会自动贴合元素自身的圆角， 再写一条 border-radius 等于「一聚焦就改形状」。 */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ⑤ 等宽数字：所有表格与数值区。这是最便宜也最有效的「技术感」来源。 */ [data-slot="table"], [data-table-text], [data-slot="status-badge"], [data-slot="progress-indicator"], [data-slot="kbd"] { font-variant-numeric: tabular-nums; } /* ⑥ 标题：收紧字距（大字号下默认字距会显松） */ [data-slot="card-title"], [data-slot="dialog-title"], [data-slot="drawer-title"], [data-slot="sheet-title"], [data-slot="alert-dialog-title"] { letter-spacing: -0.012em; font-weight: 600; } /* ============================ 2 · 面板与卡片 ============================ */ /* 应用自带的 glass-1..5 是一套渐变玻璃材质（linear-gradient + --card 透明混合）。 科技风要**纯色 + 细线 + 顶部高光**，所以把渐变全部打平。 */ .glass-1, .glass-2, .glass-3, .glass-4, .glass-5 { background-image: none; background-color: var(--card); border: 1px solid var(--tech-hairline); box-shadow: inset 0 1px 0 0 var(--tech-edge); } [data-slot="card"] { background-color: var(--card); border: 1px solid var(--tech-hairline); border-radius: var(--radius); box-shadow: inset 0 1px 0 0 var(--tech-edge); /* ⚠️ 这里刻意**不写 overflow: hidden** —— 卡片里可能有非 portal 的 绝对定位内容（下拉、悬浮层），加了会被裁掉。圆角靠下面那条渐变细线 两端自然透明来解决，不需要裁切。 */ } /* 卡片顶部一条 1px 主色细线：只在 hover 时亮起，作为「这块可交互」的暗示。 用 ::before 而不是 border-top，避免改动盒模型导致布局位移。 */ [data-slot="card"] { position: relative; } [data-slot="card"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient( 90deg, transparent, color-mix(in oklab, var(--primary) 55%, transparent), transparent ); opacity: 0; transition: opacity 200ms var(--mo-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); pointer-events: none; } [data-slot="card"]:hover::before { opacity: 1; } [data-slot="card-header"], [data-slot="card-footer"] { border-color: var(--tech-hairline); } [data-slot="card-description"], [data-slot="item-description"] { color: var(--muted-foreground); } /* ============================ 3 · 表格 ============================ */ /* 科技感的关键：表头做成「仪器标签」—— 小号、加字距、弱色、底部一条细线。 行本身不加背景色，只靠 hover 的左侧指示条（由动效层负责）。 */ [data-slot="table-container"] { border: 1px solid var(--tech-hairline); border-radius: var(--radius); background-color: var(--card); box-shadow: inset 0 1px 0 0 var(--tech-edge); /* ⚠️ 刻意**不写 overflow: hidden** —— 渠道/日志表的列多，应用很可能 靠这个容器的 overflow-x 做横向滚动；一旦被我们改成 hidden， 宽表会被直接裁掉（功能性回归，不是审美问题）。 代价只是表头 4% 的淡色在圆角处有 8px 的方角，肉眼几乎看不出。 表头底色本身很淡，这个取舍值得。 */ } [data-slot="table-header"], [data-slot="table"] thead { background-color: color-mix(in oklab, var(--foreground) 3%, transparent); } [data-slot="table-header"] th, [data-slot="table"] thead th { font-size: 0.78em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--tech-hairline); white-space: nowrap; } [data-slot="table"] td, [data-slot="table"] th { border-color: var(--tech-hairline); } [data-slot="table"] td { font-variant-numeric: tabular-nums; } /* 表格里的等宽内容（模型名 / Key / ID）—— 由动效层打标或应用自带 */ [data-slot="table"] code, [data-slot="table"] .font-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; } /* ============================ 4 · 徽章与状态 ============================ */ /* 统一成「仪器铭牌」：小圆角（不是胶囊）、加字距、等宽、1px 描边。 颜色不写死 —— 应用自己按语义给（text-success 等），我们的调色板会带过去。 */ [data-slot="status-badge"], [data-slot="provider-badge"], [data-slot="badge-cell"] > * { border-radius: var(--tech-radius-xs); border: 1px solid color-mix(in oklab, currentColor 32%, transparent); background-color: color-mix(in oklab, currentColor 12%, transparent); font-size: 0.75em; font-weight: 600; letter-spacing: 0.03em; padding: 0.1rem 0.45rem; line-height: 1.5; } /* ============================ 5 · 表单控件 ============================ */ /* 输入框做成「凹槽」：inset 高光在上、实线描边、焦点时主色描边 + 极淡外环。 */ [data-slot="input-group"], [data-slot="input-group-control"] { background-color: var(--card); border: 1px solid var(--input); border-radius: var(--tech-radius-sm); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--foreground) 6%, transparent); transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1); } [data-slot="input-group"]:focus-within, [data-slot="input-group-control"]:focus-within, [data-slot="input-group-control"]:focus { border-color: var(--primary); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--foreground) 6%, transparent), 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent); } [data-slot="input-group-addon"] { background-color: var(--muted); color: var(--muted-foreground); border-color: var(--tech-hairline); } /* 字段标签：仪器标签风格 */ [data-slot="field-label"], [data-slot="field-content"] > label { font-size: 0.82em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); } [data-slot="select-trigger"] { border: 1px solid var(--input); border-radius: var(--tech-radius-sm); background-color: var(--card); } [data-slot="select-trigger"]:focus, [data-slot="select-trigger"][data-state="open"] { border-color: var(--primary); } /* 开关：轨道用 --tech-track，滑块纯色，去掉圆润感。 ⚠️ data-checked 有 true/false 两种取值，必须排除 ="false"， 否则关掉的开关也会被画成选中态。 */ [data-slot="switch"] { border-radius: 999px; background-color: var(--tech-track); border: 1px solid var(--tech-hairline); } [data-slot="switch"]:is( [data-state="checked"], [data-checked]:not([data-checked="false"]) ) { background-color: var(--primary); border-color: color-mix(in oklab, var(--primary) 70%, transparent); } /* ============================ 6 · 按钮 ============================ */ /* ⚠️⚠️ 必须写成 button[data-variant=...]，不能只写 [data-variant=...]。 实测 data-variant 同时挂在多种组件上： outline → field-group、toggle-group line → tabs-list label/legend → field inset/floating → sidebar 容器 裸属性选择器会把它们全当成按钮重绘（实测踩到，已修）。 [data-slot="button"] 不存在（全站 0 次），也别写。 科技风：一律细线 + 小圆角 + 无阴影，只有主按钮是实心填充。 */ button[data-variant] { border-radius: var(--tech-radius-sm); font-weight: 550; letter-spacing: 0.01em; box-shadow: none; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* 描边型：细线 + hover 填充 */ button[data-variant="outline"] { border: 1px solid var(--tech-hairline); background-color: var(--card); } button[data-variant="outline"]:hover { background-color: var(--tech-hover); border-color: color-mix(in oklab, var(--foreground) 26%, transparent); } /* 危险型：描边为主，不要满屏红。 注意菜单项也有 data-variant=destructive，但它不是