/* ============================================================ 聚力工具业务系统 · 样式（旧页面的公共组件） 🔴 设计依据是 docs/规范06_UI设计规范.md：一切照原版 Dreams Core（tw.css，源码 ui-src/）。 这里的旧名字（--card、--border、--primary…）全部「指向」原版参数，不再自己定色值； 深浅切换由原版参数自己完成，所以这里没有深色段（登录页参数除外，它只有一种风格）。 ⚠️ 不要在这里定义原版已有的名字（--radius-*、--shadow-*、--sidebar-*），会把原版的值盖掉。 ============================================================ */ :root { --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --heading: var(--sans); --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --background: var(--surface-canvas); --card: var(--surface-raised); --muted: var(--surface-sunken); --secondary: var(--surface-sunken); --secondary-foreground: var(--text-primary); --border: var(--border-subtle); --input: var(--border-default); --track: var(--surface-sunken); --foreground: var(--text-primary); --text: var(--text-secondary); --muted-foreground: var(--text-tertiary); --primary: var(--color-primary-600); --primary-hover: var(--color-primary-700); --primary-foreground: var(--color-neutral-0); --accent: var(--color-primary-600); --accent-soft: color-mix(in oklab, var(--color-primary-500) 10%, transparent); --ring: var(--color-primary-500); /* 实色：聚焦边框用它，光圈由各处 color-mix 调淡 */ --success: var(--color-success-600); --success-soft: var(--color-success-50); --warning: var(--color-warning-600); --warning-soft: var(--color-warning-50); --destructive: var(--color-danger-600); --destructive-soft: var(--color-danger-50); --info: var(--color-info-600); --info-soft: var(--color-info-50); --radius: 5px; --card-shadow: var(--shadow-sm); --primary-glow: var(--shadow-glow-primary); --overlay: rgb(15 18 17 / 0.5); /* 弹窗遮罩 */ /* 登录页只有一种风格：这组参数没有深色段（规范06：登录页不改） */ --login-bg-1: #021A18; --login-bg-2: #07403A; --login-bg-3: #0D6B63; --login-glow: rgba(45,212,191,.22); --login-ink: #F2FBF9; --login-ink-dim: rgba(242,251,249,.62); --login-frame: rgba(255,255,255,.09); --login-btn-1: #F4FBF9; --login-btn-2: #D6EFE9; --login-btn-ink: #073B35; --login-glow-2: rgba(5,150,105,.30); --login-vignette: rgba(0,0,0,.35); --login-cn: #DDF3EE; --login-rule: rgba(94,234,212,.8); --login-mark: linear-gradient(100deg,#CFEDE7 0%,#FFFFFF 30%,#FFFFFF 42%,#9ADCCF 58%,#E8F7F4 100%); --login-err-bg: rgba(248,113,113,.14); --login-err-line: rgba(248,113,113,.3); --login-err-ink: #FECACA; --login-focus: rgba(45,212,191,.55); } /* 图表：分类色板（规范06）。--chart-2 橙色同时是「标出最值得看的那一个」的高亮色 */ :root { --chart-1: var(--color-primary-600); --chart-2: var(--color-warning-500); --chart-3: #CC25B0; --chart-4: var(--color-info-500); --chart-5: var(--color-purple-600); /* 原版柔和薰衣草紫 #9E74C2（原深紫 #6A1B9A 大片出现时太突兀，老板 2026-09-28） */ --chart-6: #303F9F; --chart-7: var(--color-danger-400); /* 珊瑚红：美客多固定色 */ --chart-8: var(--color-neutral-400); /* 中性灰：「其他」固定色 */ } /* 深色：原版在深色下把整套色阶倒过来（50 变深、900 变亮），浅底 -50 自动变成深色浅底，不用改； 文字色取 -900（深色下最亮的一档），否则红/绿字在深底上看不清 */ :root[data-theme="dark"] { color-scheme: dark; --chart-2: var(--color-warning-900); --chart-4: var(--color-info-900); --chart-5: var(--color-purple-800); --chart-7: var(--color-danger-900); /* 深色下原版色阶倒过来，图表色取亮的一档 */ --accent: var(--color-primary-400); --accent-soft: color-mix(in oklab, var(--color-primary-500) 18%, transparent); --success: var(--color-success-900); --warning: var(--color-warning-900); --destructive: var(--color-danger-hover); --info: var(--color-info-900); /* 红色在深色下单独处理：原版 danger-50 是 #33130F，当底色发闷、红字看不清（老板 2026-09-28 指出负数环比）→ 亮红 + 半透明红底 */ --destructive-soft: color-mix(in oklab, var(--color-danger-hover) 16%, transparent); } /* 🔴 下面全部放进原版的 components 层：这样页面上写的 Tailwind 工具类（bg-[#fff]、text-[13px]…） 能盖过这里的组件样式，跟原版的优先级规则一致。不放进层里的话，这里的 .btn{background:transparent} 会把工具类写的背景色吃掉（2026-09-28 首页横幅按钮踩过） */ @layer components { * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--foreground); font-variant-numeric: tabular-nums; background: var(--background); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } svg { flex: none; } /* ---------- 外壳 ---------- 侧栏、顶栏、内容区的样式全部来自原版（tw.css，源码 ui-src/）；浅色侧栏在 ui-src/juli.css。这里不再写外壳样式。 */ /* ---------- 区块标题 ---------- */ .section-head { margin-bottom: 16px; } .section-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; font-family: var(--font-display, var(--heading)); } .section-head p { margin: 0; font-size: 12px; color: var(--muted-foreground); } /* ---------- 卡片 ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--card-shadow); margin-bottom: 20px; overflow: hidden; } .card-body { padding: 20px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .card-head .t { font-size: 15px; font-weight: 700; font-family: var(--font-display, var(--heading)); } .card-head .d { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; } .sale-clocks { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 3px; justify-content: start; } .sale-clocks .clock-label { display: flex; align-items: center; gap: 6px; } .sale-clocks .clock-value { text-align: right; font-variant-numeric: tabular-nums; } .clock-flag { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; font-size: 11px; line-height: 1; flex: none; } /* 统计块 */ /* 最小 140px：数字 22px 后卡片不用那么宽，一排能放下 6 张（国内仓库顶部 6 张卡曾掉 1 张到第二排，2026-09-28） */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--card-shadow); } .stat .l { font-size: 12px; font-weight: 600; color: var(--muted-foreground); } .stat .n { font-size: 22px; font-weight: 800; font-family: var(--font-display, var(--heading)); line-height: 1.3; margin-top: 2px; } .stat .s { font-size: 11.5px; color: var(--muted-foreground); } .stat .s.up { color: var(--success); } .stat .s.down { color: var(--destructive); } /* 可点的统计块（点了筛下面的列表）：悬停描边，选中加深描边 */ button.stat { text-align: left; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .15s, transform .15s; } button.stat:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); } button.stat:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); } button.stat.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--card-shadow); } /* 一行几张图表卡，窄屏自动换行 */ .chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; } .chart-row > .card { margin-bottom: 0; } .chart-card { position: relative; } .chart-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .chart-toolbar .t { font-size: 15px; font-weight: 700; font-family: var(--font-display, var(--heading)); } .chart-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; font-size: 12px; color: var(--muted-foreground); } .chart-legend-item { display: flex; align-items: center; gap: 6px; } .chart-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; } .chart-svg { width: 100%; height: auto; display: block; overflow: visible; } .chart-axis-line { stroke: var(--border); stroke-width: 1; } .chart-axis-label { fill: var(--muted-foreground); font-size: 11px; } .chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-dot { stroke: var(--card); stroke-width: 1; } .chart-bar-seg { cursor: pointer; } /* 图表提示卡：照原版 ApexCharts 浅色提示——白底圆角卡片 + 细边 + 阴影，日期灰字、数值粗体（2026-09-28） */ .chart-tooltip { position: absolute; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .1s; background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; box-shadow: var(--shadow-lg); min-width: 150px; } .chart-tooltip.show { opacity: 1; } .chart-tooltip .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 3px 0; } .chart-tooltip .row .k { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); } .chart-tooltip .row > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; } .chart-tooltip .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; } .chart-tooltip .date { color: var(--text-tertiary); font-weight: 500; margin-bottom: 6px; } .donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 4px 0; } .donut-center-label { fill: var(--muted-foreground); font-size: 12px; } .donut-center-value { fill: var(--foreground); font-size: 18px; font-weight: 700; } /* 外部标注环形图（ui.js donutCallout，2026-10-09）：引线 + 环外两行标签；悬停聚焦由 donutHover 调透明度 */ .donut-callout-svg { max-width: 440px; margin: 0 auto; } .donut-callout { transition: opacity .15s; cursor: pointer; } .donut-callout-name { fill: var(--foreground); font-size: 12px; font-weight: 600; } .donut-callout-value { fill: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; } .donut-zero-note { text-align: center; font-size: 12px; margin-top: 4px; } /* flex:0 是关键——不让这块跟着卡片宽度一起被拉宽，名字和金额/占比才能挨得近， 不会因为卡片很宽就被从中间硬拽开一大截空隙 */ .donut-list { flex: 0 1 auto; min-width: 240px; max-width: 420px; display: flex; flex-direction: column; gap: 10px; } .donut-list-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 2px 0; } .donut-list-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-list-row .val { color: var(--muted-foreground); font-size: 12px; min-width: 44px; text-align: right; } .dim-tabs { display: flex; gap: 4px; } .dim-tabs button { font-size: 13px; } .dim-tabs button.active { background: var(--secondary); } .filter-clear-group { position: relative; display: inline-flex; align-items: center; } .filter-clear-btn { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: none; border-radius: 50%; padding: 0; cursor: pointer; align-items: center; justify-content: center; background: var(--muted-foreground); color: var(--card); } .filter-clear-group.has-value select, .filter-clear-group.has-value input { padding-right: 26px; } .filter-clear-group.has-value .filter-clear-btn { display: flex; } .rank-bar-list { display: flex; flex-direction: column; gap: 10px; } .rank-bar-row { display: grid; grid-template-columns: 140px 1fr 90px; align-items: center; gap: 10px; font-size: 13px; } .rank-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--foreground); } .rank-bar-track { height: 10px; border-radius: 5px; background: var(--muted); overflow: hidden; } .rank-bar-fill { height: 100%; border-radius: 5px; transition: width .2s; } .rank-bar-value { text-align: right; color: var(--muted-foreground); font-family: var(--mono); font-size: 12px; } /* 产品资料三张图表卡（views/products.js 的 .prod-charts，老板 2026-10-19 要矮 25%）：行距、间距收紧，环形图缩到 150px；别的页面的排行条不变 */ .prod-charts .rank-bar-list { gap: 4px; } .prod-charts .rank-bar-row { line-height: 1.35; } .prod-charts .rank-bar-track { height: 8px; } .prod-charts svg[data-chart="donut"] { width: 150px; height: 150px; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s; outline: none; background: transparent; color: inherit; } .btn:active { transform: scale(.97); } .btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 45%, transparent); } .btn:disabled { pointer-events: none; opacity: .5; } .btn svg { width: 16px; height: 16px; } .btn-default { background: linear-gradient(180deg, var(--color-primary-500), var(--color-primary-700)); color: var(--primary-foreground); box-shadow: var(--primary-glow); } .btn-default:hover { background: linear-gradient(180deg, var(--color-primary-400), var(--color-primary-600)); } .btn-outline { border-color: var(--input); background: var(--card); color: var(--foreground); } .btn-outline:hover { background: var(--muted); } .btn-ghost { color: var(--text); } .btn-ghost:hover { background: var(--muted); color: var(--foreground); } .btn-destructive { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); } .btn-destructive:hover { background: color-mix(in oklab, var(--destructive) 20%, transparent); } .btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--radius-sm); } .btn-xs { height: 24px; padding: 0 8px; font-size: 11.5px; font-weight: 500; border-radius: var(--radius-xs); } .btn-lg { height: 42px; padding: 0 24px; font-size: 14px; } /* ---------- 表单 ---------- */ .input, select.input, textarea.input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--card); color: var(--foreground); font-family: inherit; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; } .input::placeholder { color: var(--muted-foreground); } .input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 45%, transparent); } textarea.input { height: auto; min-height: 76px; padding: 10px 14px; line-height: 1.6; resize: vertical; } select.input { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } .input.sm { height: 34px; padding: 0 10px; font-size: 12.5px; } /* 小号下拉框：.input.sm 的 padding 会盖掉上面 select.input 给箭头留的位置， 不补这一行，箭头会压在文字上（如「按全期 GMV」的 V）。2026-09-23 修 */ select.input.sm { padding-right: 30px; } /* ============================================================ M5 达人复盘专用外观（2026-09-23 建，2026-09-28 按老板决定统一成规范05） 🔴 只在 .kol-page 里生效，只放排版；颜色全部来自 :root，不再有第二套配色。 保留：表头吸顶、数字右对齐、文字列左对齐、三角展开、达人信息六宫格。 三种渠道色：直播 = 图表蓝 --chart-4、竞拍 = 图表橙 --chart-2、视频 = 图表墨绿 --chart-1（原模板蓝/橙/青的对应色） ============================================================ */ .kol-page { --kol-live: var(--chart-4); --kol-auction: var(--chart-2); --kol-video: var(--chart-1); } :root[data-theme="dark"] .kol-page { --kol-video: var(--accent); } /* 墨绿在深底上偏暗，深色模式用亮青 */ /* 表格：规范05 表头（浅底小号灰字）+ 吸顶；渠道分组表头用渠道色字 + 下划线。 框高走全站默认（随屏幕，最少 420px，见「表格」一节）；原来固定 640px，2026-10-14 统一 */ .kol-page table.tbl thead th { position: sticky; top: 0; z-index: 1; text-align: right; } .kol-page table.tbl thead th.ch-live { color: var(--kol-live); box-shadow: inset 0 -2px 0 var(--kol-live); } .kol-page table.tbl thead th.ch-auction { color: var(--kol-auction); box-shadow: inset 0 -2px 0 var(--kol-auction); } .kol-page table.tbl thead th.ch-video { color: var(--kol-video); box-shadow: inset 0 -2px 0 var(--kol-video); } .kol-page table.tbl tbody td { text-align: right; font-variant-numeric: tabular-nums; } .kol-page table.tbl thead th:first-child, .kol-page table.tbl tbody td:first-child { text-align: left; } .kol-page table.tbl td.total { font-weight: 700; color: var(--foreground); } /* SKU 复盘：直播／竞拍／视频三组列各铺一层很浅的渠道色底，一眼分出列组、减轻读数疲劳（2026-10-09）。 用 background-image 叠一层，不占 background-color，行悬停的底色照常生效；机构、合计不铺 */ .kol-page table.tbl .ch-bg-live { background-image: linear-gradient(color-mix(in oklab, var(--kol-live) 7%, transparent), color-mix(in oklab, var(--kol-live) 7%, transparent)); } .kol-page table.tbl .ch-bg-auction { background-image: linear-gradient(color-mix(in oklab, var(--kol-auction) 8%, transparent), color-mix(in oklab, var(--kol-auction) 8%, transparent)); } .kol-page table.tbl .ch-bg-video { background-image: linear-gradient(color-mix(in oklab, var(--kol-video) 7%, transparent), color-mix(in oklab, var(--kol-video) 7%, transparent)); } /* 表格里的文字列（达人 ID、店铺、SKU、团长）保持左对齐 */ .kol-page table.tbl td.text-cell, .kol-page table.tbl th.text-cell { text-align: left; } /* KPI 卡：用全站统计卡样式，不再加顶部彩条 */ .kol-page .stat .n { color: var(--foreground); } /* 分段控件：浅灰底胶囊，选中为浅主色底 + 主色字（同规范05 标签页） */ .kol-page .dim-tabs, .kol-tabs-seg { background: var(--secondary); padding: 3px; border-radius: var(--radius); gap: 3px; } .kol-page .dim-tabs > button, .kol-tabs-seg > button { border: 0; background: transparent; color: var(--text); font-weight: 600; border-radius: var(--radius-sm); box-shadow: none; /* 分段按钮等宽：字数不同也不会一大一小（如「全部订单」和「按周」） */ min-width: 88px; justify-content: center; text-align: center; } .kol-page .dim-tabs > button.active, .kol-tabs-seg > button.btn-default { background: var(--card); color: var(--accent); box-shadow: 0 0 0 1px var(--border), var(--card-shadow); } .kol-page .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--muted-foreground); margin-bottom: 4px; } /* 三角展开：达人名前的 ▸/▾ 和它展开的内联明细 */ .kol-page .detail-toggle { border: 0; background: transparent; color: var(--accent); font-weight: 700; padding: 0 6px 0 0; cursor: pointer; font-size: 13px; } .kol-page .creator-name { border: 0; background: transparent; color: var(--foreground); font: inherit; font-weight: 600; padding: 0; cursor: pointer; } .kol-page .creator-name:hover { text-decoration: underline; color: var(--accent); } /* 达人头像（089 资料表，本机抓 TikTok 后导入）：圆形，图没有或加载失败时露出底下的首字母 */ .kol-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; vertical-align: middle; } .kol-avatar { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; width: 28px; height: 28px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 600; text-transform: uppercase; } .kol-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kol-avatar.lg { width: 64px; height: 64px; font-size: 24px; } /* 信息卡顶部：头像 + 昵称 / @达人 ID + 关注·粉丝·获赞 + 简介（照 TikTok 主页的排法） */ .kol-profile { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 4px; } .kol-profile .who { min-width: 0; } .kol-profile .name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .kol-profile .name strong { color: var(--foreground); font-size: 17px; } .kol-profile .nums { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 13px; color: var(--muted-foreground); } .kol-profile .nums b { color: var(--foreground); font-size: 15px; margin-right: 4px; font-variant-numeric: tabular-nums; } .kol-profile .bio { margin-top: 8px; white-space: pre-line; word-break: break-word; color: var(--foreground); font-size: 13px; } .kol-profile .meta { margin-top: 8px; font-size: 12px; } .kol-page table.tbl tr.detail-row > td { background: var(--muted); text-align: left; } .kol-page .detail-card { max-width: 640px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); } .kol-page .detail-card .table-wrap { border: 0; border-radius: 0; max-height: none; } /* 达人信息卡：六宫格 + 销量最高的 SKU */ .kol-page .profile-grid, .profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; } .profile-stat { padding: 12px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); } .profile-stat .label { font-size: 12px; color: var(--muted-foreground); font-weight: 500; } .profile-stat .value { display: block; color: var(--foreground); font-size: 17px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; } .top-skus { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .top-skus li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--border); font-size: 13px; } .top-skus li:first-child { border-top: 0; } .top-skus strong { color: var(--foreground); } @media (max-width: 860px) { .profile-grid, .kol-page .profile-grid { grid-template-columns: repeat(2, 1fr); } } /* 带上 .kol-page：否则压不过上面的 .kol-page .profile-grid，窄屏一直三列（2026-10-09 修） */ /* 达人信息卡分块（2026-10-09 重排，原来各块首尾相接太挤）：块间 28px 留白＋一条分隔线； 标题按规范06 卡片标题 15px；「销量最高的 SKU」和「各店业绩」并排，窄屏上下排 */ .modal.wide.kol-card { width: min(1000px, calc(100vw - 32px)); } /* 比 .modal.wide（写在后面）多一个类，才盖得住 */ .kol-card .kc-sec { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); } .kol-card .kc-sec.kc-first { padding-top: 0; margin-top: 0; border-top: 0; } .kol-card .kc-sec .section-head { margin-bottom: 12px; } .kol-card .kc-sec .section-head h2 { font-size: 15px; } .kol-card .kc-meta { margin: 12px 0 0; } .kol-card .kc-sec .profile-grid { margin: 0; } .kol-card .kc-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; } .kol-card .kc-actions { margin-top: 12px; } .kol-card .kc-two table.tbl { min-width: 520px; } /* 用户管理（views/users.js）：角色不写宽度、吃掉剩余空间；表至少 980px，屏幕窄时左右滑，角色列不会被挤没（老板 10-20） */ .users-list table.tbl { min-width: 980px; } .kol-card .top-skus span { font-variant-numeric: tabular-nums; } /* 重点数字：同全站 font-semibold＋深色（生意参谋等页面的写法）；次要数字用 .muted 弱化，一深一浅才看得出重点 */ .kol-card .kc-amt { font-weight: 600; color: var(--foreground); } /* 各店业绩：其余列定宽，窄屏时店铺列会被挤没；给底线宽度，放不下就横向滚 */ .kol-card .kc-actions:empty { display: none; } @media (max-width: 860px) { .kol-card .kc-two { grid-template-columns: minmax(0, 1fr); } } /* minmax(0,…)：表格过宽时在自己框里横向滚，不撑破卡片 */ /* 上传区（导入向导）：点、拖都行，替掉原生 的默认样子。2026-09-24 加 */ .dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); background: var(--muted); color: var(--foreground); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--ring); background: var(--card); outline: none; } .dropzone.over { border-color: var(--ring); background: var(--card); border-style: solid; } .dropzone .dz-icon { color: var(--muted-foreground); display: flex; } .dropzone .dz-main { font-size: 14px; } .dropzone .dz-sub { font-size: 12px; color: var(--muted-foreground); } /* 编辑联系方式里的自定义字段：名称 + 内容 + 删除 一行（2026-09-24） */ .extra-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; } @media (max-width: 860px) { .extra-row { grid-template-columns: 1fr; } } /* 底部对账脚注 */ .kol-page .footnote { padding: 12px 0 0; color: var(--muted-foreground); font-size: 12px; border-top: 1px solid var(--kol-line); margin-top: 12px; } /* 达人复盘总览两栏：左趋势宽、右渠道结构窄；窄屏堆叠（照固定模板的两栏布局）2026-09-23 加 */ .kol-overview { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; } .kol-overview > .card { margin-bottom: 0; } @media (max-width: 860px) { .kol-overview { grid-template-columns: 1fr; } } /* 渠道固定语义色（直播蓝 / 竞拍橙 / 视频青），图表、表头分组统一用这三个， 取自设计系统的 chart token，不新造颜色。2026-09-23 加 */ /* 直播 / 竞拍 / 视频三种渠道色（2026-09-28 统一成规范05 图表色：蓝 / 橙 / 墨绿） */ .ch-live { color: var(--chart-4); } .ch-auction { color: var(--chart-2); } .ch-video { color: var(--chart-1); } :root[data-theme="dark"] .ch-video { color: var(--accent); } /* 字段管理面板（ui.js columnManager）：挂在 body 上、position:fixed —— 和日期选择器同理， 放进 .card 会被 overflow:hidden 裁掉。2026-09-23 加 */ .colman { position: fixed; z-index: 60; width: 240px; max-height: 60vh; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; } .colman-row { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; border-radius: var(--radius-lg); font-size: 13px; cursor: default; } .colman-row:hover { background: var(--muted); } .colman-row .grip { color: var(--muted-foreground); cursor: grab; display: flex; } .colman-row.locked .grip { cursor: default; } .colman-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .colman-row.off .name { color: var(--muted-foreground); text-decoration: line-through; } .colman-row .eye { background: none; border: 0; padding: 2px; color: var(--muted-foreground); cursor: pointer; display: flex; } .colman-row .eye:disabled { opacity: .35; cursor: default; } .colman-row.dragging { opacity: .4; } .colman-row.over { box-shadow: inset 0 2px 0 var(--ring); } .colman-foot { display: flex; align-items: center; gap: 8px; padding: 6px; border-top: 1px solid var(--border); margin-top: 4px; font-size: 12px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field-label { font-size: 12.5px; font-weight: 500; color: var(--foreground); } .field-hint { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.5; } .checks { display: flex; flex-wrap: wrap; gap: 8px 16px; } .checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .toolbar .grow { flex: 1; } .toolbar .input { width: auto; } /* ---------- 徽章 ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-xs); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; } /* 有语义的浅底徽章前面带一个状态圆点（原版 badge-soft 同款） */ .badge-success::before, .badge-info::before, .badge-warning::before, .badge-destructive::before, .badge-accent::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; } .badge:has(svg)::before { content: none; } .badge-lv::before { content: none; } /* 达人等级标签：只靠颜色分档，不带状态圆点 */ .badge-default { background: var(--primary); color: var(--primary-foreground); } .badge-secondary { background: var(--secondary); color: var(--secondary-foreground); } .badge-outline { border-color: var(--input); color: var(--text); } .badge-ghost { color: var(--muted-foreground); } .badge-success { background: var(--success-soft); color: var(--color-success-700); } .badge-info { background: var(--info-soft); color: var(--color-info-700); } .badge-warning { background: var(--warning-soft); color: var(--color-warning-700); } .badge-destructive { background: var(--destructive-soft); color: var(--color-danger-700); } :root[data-theme="dark"] .badge-success { color: var(--success); } :root[data-theme="dark"] .badge-info { color: var(--info); } :root[data-theme="dark"] .badge-warning { color: var(--warning); } :root[data-theme="dark"] .badge-destructive { color: var(--destructive); } .badge-accent { background: var(--color-primary-50); color: var(--color-primary-700); } :root[data-theme="dark"] .badge-accent { background: var(--accent-soft); color: var(--color-primary-300); } /* 紫色标签（达人 L7 用，2026-10-09）。🔴 原版紫色阶在 @theme 里，Tailwind 只编译用到的档：白天只有 -600/-800， -100、-hover 只在深色块里有。所以底色用图表紫 --chart-5 调淡（同 .xl-l1 的写法），字色白天 -800、深色 -hover */ .badge-purple { background: color-mix(in oklab, var(--chart-5) 18%, transparent); color: var(--color-purple-800); } :root[data-theme="dark"] .badge-purple { background: color-mix(in oklab, var(--chart-5) 28%, transparent); color: var(--color-purple-hover); } /* ---------- 表格 ---------- */ .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: auto; background: var(--card); } .card-body > .table-wrap:only-child { border: 0; border-radius: 0; margin: -20px; } table.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; } table.tbl thead th { height: 38px; padding: 0 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--muted-foreground); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--card); } table.tbl tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); } .aplus-task-list table.tbl th, .aplus-task-list table.tbl td { padding-left: 8px; padding-right: 8px; } .aplus-task-list table.tbl tbody td:nth-child(9) { white-space: normal; overflow-wrap: anywhere; } .aplus-plan-counts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; } .aplus-plan-count { padding: 12px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); display: flex; align-items: center; gap: 12px; } .aplus-plan-count b { font-size: 22px; } .aplus-plan-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; } .aplus-plan-group { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 16px; align-items: start; } .aplus-plan-group > .toolbar { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; } .aplus-plan-skus { display: grid; grid-template-columns: repeat(auto-fill,96px); gap: 6px; } .aplus-plan-sku { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; font: inherit; line-height: 1.35; min-width: 0; } .aplus-plan-sku span, .aplus-plan-sku small { font-size: 11px; } .aplus-plan-sku:hover { outline: 1px solid var(--text-secondary); } .aplus-plan-not_started { background: var(--surface-raised); color: var(--text-primary); } .aplus-plan-opened { background: var(--info-soft); color: var(--color-info-700); } .aplus-plan-needs_scene { background: var(--warning-soft); color: var(--color-warning-700); } .aplus-plan-completed { background: var(--success-soft); color: var(--color-success-700); } :root[data-theme="dark"] .aplus-plan-opened { color: var(--info); } :root[data-theme="dark"] .aplus-plan-needs_scene { color: var(--warning); } :root[data-theme="dark"] .aplus-plan-completed { color: var(--success); } @media (max-width:640px) { .aplus-plan-counts { grid-template-columns: repeat(2,minmax(0,1fr)); } .aplus-plan-group { grid-template-columns: minmax(0,1fr); gap: 10px; } .aplus-plan-group > .toolbar { flex-direction: row; gap: 8px; } } /* 省略号靠 table-layout:fixed + overflow 实现。 ⚠️ 不要加 max-width:1px —— 它会盖住列上设置的 width，列宽变得不可控 */ table.tbl th, table.tbl td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl tbody tr { transition: background .15s; } table.tbl tbody tr:hover { background: var(--muted); } /* 数字列：列定义里写 num: true，表头和单元格一起右对齐、等宽（规范05 7.9） */ table.tbl th.num, table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } /* 全渠道库存（views/inventory.js，lai 2026-10-14）：列按组加底色——inv-pool 海外仓池（在途 / 海外仓 / FBT），inv-sum 合计与结论。 用 background-image 叠一层半透明：底下 tr:hover 的整行变色照样透得出来；颜色取原版参数，深浅色自动跟着变 */ table.tbl th.inv-pool, table.tbl td.inv-pool { background-image: linear-gradient(color-mix(in oklab, var(--color-info-500) 8%, transparent), color-mix(in oklab, var(--color-info-500) 8%, transparent)); } table.tbl th.inv-sum, table.tbl td.inv-sum { background-image: linear-gradient(color-mix(in oklab, var(--text-primary) 5%, transparent), color-mix(in oklab, var(--text-primary) 5%, transparent)); } table.tbl th.inv-sum-first, table.tbl td.inv-sum-first { border-left: 1px solid var(--border); } /* 框内上下滑、表头吸顶（规范06 5.2，lai 2026-10-14 定，同日改成全站默认）：页面上的表比框高时在自己的框里上下滑， 框高随屏幕（最少 420px），表头一直在最上面；分页列表也一样，页面不用另写。表比框矮时看不出任何变化。 弹窗、抽屉、展开行里的表不限高，照旧跟外面一起滚（要它们也框内滑，外面包一层 .tbl-scroll）；K1 包着的 .tbl-scroll 效果同默认。 打印不限高、表头不吸顶，否则长表只印出第一框 */ .table-wrap { max-height: max(420px, calc(100vh - 230px)); } .modal .table-wrap, .drawer-panel .table-wrap, table.tbl tr.detail-row .table-wrap { max-height: none; } .tbl-scroll .table-wrap { max-height: max(420px, calc(100vh - 230px)); } table.tbl thead th { position: sticky; top: 0; z-index: 2; } @media print { .table-wrap { max-height: none; overflow: visible; } table.tbl thead th { position: static; } } /* 手机上弹窗里的小表（外面包一层 .tbl-compact）：格子左右留白 12 → 6px、字 12px，日期 / 数量这类不能截断的列才放得下 （老板 2026-10-14，国内仓库 SKU 详情的出入库记录）。电脑上不变 */ @media (max-width: 640px) { .tbl-compact table.tbl th, .tbl-compact table.tbl td { padding-left: 6px; padding-right: 6px; } .tbl-compact table.tbl td { font-size: 12px; } } /* K1 分组表头下面一条色线 */ table.tbl th.inv-pool { box-shadow: inset 0 -2px 0 var(--color-info-500); } table.tbl th.inv-sum { box-shadow: inset 0 -2px 0 var(--text-tertiary); } /* K1 顶部流水线（views/inventory.js，老板 2026-10-19）：在产 → 国内仓 → 在途 → 在平台仓/海外仓，段与段之间一个箭头；下面月数条、再下面各渠道一格。 中等宽度四段两两一排、不画箭头；颜色全取原版参数 */ /* 10-19 lai：每段一个图标块。10-19 晚改版（同事反映乱）：四段一样大、一样高；渠道明细从最后一张卡里拿出来，在月数条下面一排格子（.inv-chs），不再收起 / 展开 */ .inv-flow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 8px; align-items: stretch; } .inv-flow-arrow { display: grid; place-items: center; color: var(--text-tertiary); } .inv-stage { min-width: 0; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color .15s, background .15s; } .inv-stage[data-stage="wip"] { --node-c: var(--text-secondary); } .inv-stage[data-stage="domestic"] { --node-c: var(--chart-6); } .inv-stage[data-stage="transit"] { --node-c: var(--chart-4); } .inv-stage[data-stage="landed"] { --node-c: var(--chart-1); } .inv-node-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--radius-md); color: var(--node-c); background: color-mix(in oklab, var(--node-c) 14%, transparent); } /* 在产不算进 6 个月合理线：图标块用跟月数条一样的灰色斜线底 */ .inv-stage[data-stage="wip"] .inv-node-ic { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--text-tertiary) 22%, transparent) 0 3px, transparent 3px 6px), var(--surface-sunken); } .inv-node-mon { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: color-mix(in oklab, var(--node-c) 70%, var(--text-primary)); background: color-mix(in oklab, var(--node-c) 12%, transparent); } /* 字往主文字色靠：深色下靛蓝不发暗 */ .inv-stage[data-stage="wip"] .inv-node-mon { background: var(--surface-sunken); } .inv-stage.is-click, .inv-ch { cursor: pointer; } .inv-stage.is-click:hover, .inv-ch:hover { background: var(--surface-sunken); } .inv-stage.is-on, .inv-ch.is-on { border-color: var(--color-primary-600); box-shadow: 0 0 0 1px var(--color-primary-600); } .inv-chs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .inv-ch { min-width: 0; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color .15s, background .15s; } .inv-ch-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-top: 8px; font-size: 11.5px; color: var(--text-secondary); } .inv-ch-kv b { text-align: right; font-weight: 600; color: var(--text-primary); } .inv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; } .inv-low { color: var(--chart-2); font-weight: 700; } .inv-bar-wrap { position: relative; padding-top: 20px; } .inv-bar { display: flex; justify-content: flex-end; height: 14px; overflow: hidden; border-radius: 4px; background: var(--surface-sunken); } .inv-bar > span { height: 100%; } .inv-bar .is-wip, .inv-dot.is-wip { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--text-tertiary) 45%, transparent) 0 4px, transparent 4px 8px); } .inv-bar-line { position: absolute; top: 14px; bottom: -4px; border-left: 2px dashed var(--text-secondary); } /* 用 right 定位：从右端往左量 */ .inv-bar-line > span { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); margin-bottom: 1px; white-space: nowrap; font-size: 11px; color: var(--text-secondary); } .inv-bar-line.is-start > span { transform: none; } @media (max-width: 1023px) { .inv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inv-flow-arrow { display: none; } .inv-chs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .inv-chs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 新品开发流水线（views/npd.js，william 10-26 照上面的库存流水线）：① → ⑤ + 本月结束六格，格子、图标块、条、圆点都用上面的 .inv-*； 各步颜色在页面里用 --node-c 传原版图表色。中等宽度三格一排、手机两格一排，都不画箭头 */ .npd-pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr) 16px) minmax(0, 1fr); gap: 6px; align-items: stretch; } @media (max-width: 1279px) { .npd-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .npd-pipe .inv-flow-arrow { display: none; } } @media (max-width: 640px) { .npd-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 「未填」≠ 0：ui.js 的 missing() 输出 */ .miss { display: inline-block; padding: 0 5px; border: 1px dashed var(--input); border-radius: var(--radius-xs); font-size: 11px; line-height: 16px; color: var(--muted-foreground); } .tbl .ops { display: flex; gap: 6px; } table.tbl tfoot td { padding: 10px 12px; border-top: 2px solid var(--border); font-weight: 600; background: var(--muted); } .cell-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .cell-main img { width: 24px; height: 24px; border-radius: 999px; flex: none; } .cell-main .sub { color: var(--muted-foreground); font-size: 12px; } .indent { display: inline-block; } /* ---------- 空状态 ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; padding: 28px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--muted) 28%, transparent); text-align: center; color: var(--muted-foreground); } .empty-state .state-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--background); box-shadow: 0 0 0 1px var(--border); } .empty-state .state-icon svg { width: 20px; height: 20px; } .empty-state strong { font-size: 13.5px; color: var(--foreground); font-weight: 600; } .empty-state p { margin: 0; max-width: 380px; font-size: 12px; line-height: 1.6; } .empty-state .actions { display: flex; gap: 8px; margin-top: 4px; } .empty-state.error .state-icon { border-radius: 50%; background: var(--destructive-soft); color: var(--destructive); box-shadow: none; } /* 国内仓库·新增单据弹窗的货品/调拨明细：空状态用的是全局 .empty-state（min-height 180px）， 放在弹窗里太占地方，这里单独收窄（陈民超 2026-09-29 反馈），不改全局，别的空状态列表页不受影响 */ #items-table .empty-state { min-height: 90px; padding: 14px; } .skeleton { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; } .skeleton-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; padding: 14px 12px; border-bottom: 1px solid var(--border); } .skeleton-row:last-child { border-bottom: 0; } .skeleton-bar { height: 10px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--track) 25%, var(--muted) 50%, var(--track) 75%); background-size: 200% 100%; animation: skeleton 1.2s linear infinite; } @keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } } /* ---------- 日期范围选择器 ---------- */ .drp { position: relative; display: inline-block; } .drp-trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; height: 32px; padding: 0 23px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--card); color: var(--foreground); font-family: inherit; font-size: 13px; } .drp-panel { display: none; position: fixed; z-index: 500; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); padding: 14px; } .drp-panel.open { display: flex; gap: 16px; } .drp-presets { display: flex; flex-direction: column; gap: 4px; width: 100px; flex: none; border-right: 1px solid var(--border); padding-right: 14px; } .drp-presets button { text-align: left; padding: 7px 10px; border-radius: var(--radius-md); border: none; background: none; font-size: 13px; cursor: pointer; color: var(--foreground); } .drp-presets button:hover { background: var(--muted); } .drp-calendars { display: flex; gap: 18px; } .drp-month { width: 220px; } .drp-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .drp-month-head .t { font-size: 13px; font-weight: 600; } .drp-month-head button { border: none; background: none; cursor: pointer; color: var(--muted-foreground); padding: 2px 4px; border-radius: var(--radius-sm); } .drp-month-head button:hover { background: var(--muted); color: var(--foreground); } .drp-month-head .nav-l, .drp-month-head .nav-r { display: flex; gap: 2px; } .drp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .drp-days .dow { font-size: 11px; color: var(--muted-foreground); text-align: center; padding: 4px 0; } .drp-day { font-size: 12px; text-align: center; padding: 6px 0; border-radius: var(--radius-sm); cursor: pointer; } .drp-day:hover { background: var(--muted); } .drp-day.other-month { color: var(--muted-foreground); opacity: .4; } .drp-day.in-range { background: var(--accent-soft); border-radius: 0; } .drp-day.range-start, .drp-day.range-end { background: var(--primary); color: var(--primary-foreground); } .drp-day.range-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .drp-day.range-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .drp-day.range-start.range-end { border-radius: var(--radius-sm); } /* 单个日期 datePicker（2026-10-23）：触发框同 .input 宽高；面板比弹窗（9000）高，弹窗里也能用 */ .dp { display: block; } .dp .drp-trigger { display: flex; width: 100%; height: 38px; padding: 0 12px; } .dp-panel { z-index: 9500; } .dp-panel .drp-month { width: 236px; } .drp-day.dp-today { font-weight: 700; color: var(--primary); } .drp-day.dp-today.range-start { color: var(--primary-foreground); } .drp-day.dp-off { opacity: .3; cursor: not-allowed; } .drp-day.dp-off:hover { background: none; } .dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .dp-foot button { border: none; background: none; cursor: pointer; font-size: 12.5px; color: var(--primary); padding: 2px 6px; border-radius: var(--radius-sm); } .dp-foot button:hover { background: var(--muted); } /* ---------- 新品开发 · 流程图（views/npd_drawer.js，2026-10-23）：左边竖线 + 圆点，右边每一步一张可收可展的卡片 ---------- */ .npd-flow { list-style: none; margin: 6px 0 0; padding: 0; } .npd-step { position: relative; padding: 0 0 10px 34px; } .npd-step::before { content: ''; position: absolute; left: 11px; top: 28px; bottom: -4px; width: 2px; background: var(--border); } .npd-step:last-child::before { display: none; } .npd-step.is-done::before { background: var(--success); } .npd-dot { position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--muted); color: var(--muted-foreground); } .npd-step.is-done .npd-dot { background: var(--success); color: var(--primary-foreground); } .npd-step.is-current .npd-dot { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent); } .npd-step.is-dropped .npd-dot { background: var(--muted-foreground); color: var(--card); } .npd-card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .npd-step.is-current .npd-card { border-color: var(--primary); } .npd-step.is-mine .npd-card { border-color: var(--warning); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warning) 16%, transparent); } .npd-step.is-todo .npd-card { background: var(--muted); border-style: dashed; } .npd-card-h { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px 2px; border: none; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--foreground); cursor: pointer; } .npd-card-h:disabled { cursor: default; } .npd-step.is-todo .npd-card-h { color: var(--muted-foreground); } .npd-card-who { padding: 0 12px 10px; font-size: 12px; color: var(--muted-foreground); } .npd-card-b { display: none; padding: 0 12px 12px; } .npd-card.is-open .npd-card-b { display: block; } .npd-chev { display: inline-flex; color: var(--muted-foreground); transition: transform .15s; } .npd-card.is-open .npd-chev { transform: rotate(90deg); } /* 手机上步骤名不折行，右边「已完成 · 10-25（用了 0 天）」放不下就换到下一行（william 10-26：「指定采购·选包装」被挤成两行） */ @media (max-width: 640px) { .npd-card-h { flex-wrap: wrap; } .npd-card-h > span:first-child { white-space: nowrap; } } /* ---------- 分页 ---------- */ .pager { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin-top: 14px; font-size: 12px; color: var(--muted-foreground); } .pager .info { margin-right: 8px; } .pager .pg { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: 500 12px var(--sans); cursor: pointer; } .pager .pg:hover { border-color: var(--input); background: var(--muted); } .pager .pg.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); font-weight: 600; cursor: default; } .pager .pg:disabled { opacity: .4; cursor: default; } .pager .gap { padding: 0 2px; } /* ---------- 弹窗 ---------- */ .modal-mask { position: fixed; inset: 0; z-index: 9000; background: var(--overlay); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; } .modal { width: 560px; max-width: 100%; max-height: 84vh; display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; } .modal.wide { width: 860px; } .modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-h .t { font-size: 16px; font-weight: 700; font-family: var(--font-display, var(--heading)); } .modal-h .x { cursor: pointer; color: var(--muted-foreground); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); } .modal-h .x:hover { background: var(--muted); } .modal-b { padding: 20px; overflow: auto; } .modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 50%, transparent); } /* ---------- 提示 ---------- */ #toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-2xl); background: var(--card); color: var(--foreground); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); font-size: 14px; animation: rise .18s ease-out; } .toast.ok { color: var(--success); } .toast.err { color: var(--destructive); } @keyframes rise { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } } /* ---------- 树（权限勾选） ---------- */ .tree { list-style: none; margin: 0; padding-left: 20px; } .tree > li { margin: 3px 0; } .tree label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .perm-code { font-family: var(--mono); font-size: 12px; color: var(--muted-foreground); } .mono { font-family: var(--mono); font-size: 12px; } .muted { color: var(--muted-foreground); } .link { color: var(--accent); cursor: pointer; } .link:hover { text-decoration: underline; } /* 键值对网格：详情里的「字段名 · 值」，按宽度自动排 1–4 列；.full 占满一整行 */ .kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 24px; margin-bottom: 20px; } .kv-grid .kv { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.6; min-width: 0; } .kv-grid .kv .k { width: 84px; flex-shrink: 0; color: var(--muted-foreground); } .kv-grid .kv .v { min-width: 0; word-break: break-word; } .kv-grid .kv.full { grid-column: 1 / -1; } /* 商品图：列表/表格里的缩略图、详情顶部大图、点开放大；没图时显示同尺寸的灰色占位 */ .thumb { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-sm); background: var(--muted); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); vertical-align: middle; } img.thumb, img.thumb-lg { cursor: zoom-in; } .thumb-lg { width: 200px; height: 200px; flex-shrink: 0; object-fit: contain; border-radius: var(--radius-md); background: var(--muted); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 13px; } .img-full { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; } /* 详情顶部：左图右信息，窄屏上下排 */ .detail-hero { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 4px; } .detail-hero > .kv-grid { flex: 1; min-width: 280px; } /* 保留原文换行的长文本（规格明细、正唛、侧唛） */ .pre-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--sans); font-size: 13px; line-height: 1.6; } /* table() 的 opts.detail 展开行：通用底色，允许换行（达人复盘页有自己更具体的样式，不受影响） */ /* 只给展开行本身那一格灰底：写成 > td，不然展开行里嵌的小表格（如上架店铺）也全被刷成灰底，看不清（2026-09-28） */ table.tbl tr.detail-row > td { background: var(--muted); white-space: normal; } table.tbl tr.detail-row .table-wrap { background: var(--card); } pre.json { margin: 0; padding: 12px; border-radius: var(--radius-md); background: var(--muted); font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; max-height: 360px; overflow: auto; } /* ---------- 登录页 ---------- */ /* ---------- 登录页（规范05 7.14「无图整板版」）：只有一种风格，颜色全部来自 --login-* 参数，深色段不重定义 ---------- */ .login-body { position: relative; min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 40px 24px; color: var(--login-ink); overflow-x: hidden; background: radial-gradient(45% 55% at 50% 38%, var(--login-glow) 0%, transparent 70%), radial-gradient(40% 50% at 85% 90%, var(--login-glow-2) 0%, transparent 70%), radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--login-vignette) 100%), linear-gradient(160deg, var(--login-bg-1) 0%, var(--login-bg-2) 45%, var(--login-bg-3) 100%); } .login-body::before { content: ""; position: fixed; inset: 0; background-image: var(--grain); opacity: .10; mix-blend-mode: overlay; pointer-events: none; } .login-body::after { content: ""; position: fixed; inset: 24px; border: 1px solid var(--login-frame); border-radius: 4px; pointer-events: none; } .login-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 560px; text-align: center; } .login-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; } .login-mark .fx { font-size: clamp(30px, 4.4vw, 60px); line-height: 1; font-weight: 600; letter-spacing: .07em; white-space: nowrap; background: var(--login-mark); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .login-mark .cn { font-size: clamp(16px, 1.6vw, 20px); font-weight: 500; letter-spacing: .5em; margin-right: -.5em; color: var(--login-cn); } .login-mark .rule { width: 56px; height: 1px; margin: 2px 0; background: linear-gradient(90deg, transparent, var(--login-rule), transparent); } .login-mark .os { font-size: 12px; letter-spacing: .5em; margin-right: -.5em; color: var(--login-ink-dim); } .login-panel { width: min(340px, 100%); display: flex; flex-direction: column; gap: 12px; } .login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 999px; background: linear-gradient(180deg, var(--login-btn-1), var(--login-btn-2)); color: var(--login-btn-ink); font-size: 14.5px; font-weight: 600; letter-spacing: .12em; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(0,0,0,.55), inset 0 1px 0 #fff; transition: transform .15s, box-shadow .15s; } .login-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(0,0,0,.6), inset 0 1px 0 #fff; } .login-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--login-focus); } .login-err[hidden] { display: none; } .login-err { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; text-align: left; font-size: 12.5px; background: var(--login-err-bg); border: 1px solid var(--login-err-line); } .login-err b { color: var(--login-err-ink); font-weight: 600; } .login-err span { color: var(--login-ink-dim); } @media (prefers-reduced-motion: no-preference) { .login-mark .fx { animation: login-sheen 9s ease-in-out infinite; } @keyframes login-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } } } @media (max-width: 860px) { .login-body::after { inset: 12px; } .login-wrap { gap: 28px; } } /* ---------- 问题反馈中心（顶栏反馈按钮 + 停靠面板 + 裁剪框 + 工作台详情抽屉，迁移 051） ---------- 面板样式照原版 .cmdk-panel（raised 底 + 边线 + xl 阴影），抽屉用原版 .drawer-panel，时间线用原版 .timeline-rail。 只写排版尺寸，颜色全用原版参数。层级：按钮/面板 80 < 抽屉 95/96 < 裁剪框 9500 < 弹窗之上的提示 9999 */ .fb-top { /* 顶栏里的小按钮（2026-10-12）：浅主色底 + 主色字，高 32 同顶栏图标按钮 */ display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; border: 0; cursor: pointer; flex-shrink: 0; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; background: color-mix(in oklab, var(--color-primary-600) 12%, transparent); color: var(--color-primary-600); transition: background .15s; } .fb-top:hover { background: color-mix(in oklab, var(--color-primary-600) 20%, transparent); } @media (max-width: 640px) { .fb-top { padding: 0; width: 32px; justify-content: center; } .fb-top span { display: none; } } .fb-panel[hidden] { display: none; } .fb-panel { position: fixed; right: 16px; top: 56px; z-index: 80; width: 420px; max-width: calc(100vw - 32px); /* 从顶栏按钮下方弹出 */ height: min(640px, calc(100vh - 72px)); display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: var(--shadow-xl); } .fb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); } .fb-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--surface-sunken); font-size: 12.5px; font-weight: 600; } .fb-tabs button { border: 0; background: none; font: inherit; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: var(--text-tertiary); } .fb-tabs button.on { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); } .fb-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px 16px; } .fb-source { display: flex; align-items: center; gap: 6px; padding: 7px 10px; margin-bottom: 12px; border-radius: 6px; background: var(--surface-sunken); font-size: 12.5px; color: var(--text-secondary); } .fb-source b { color: var(--text-primary); } .fb-source .muted { margin-left: auto; font-size: 11.5px; } .fb-form .field { margin-bottom: 12px; } .fb-form textarea, .fb-supplement textarea, .fb-handle textarea { resize: vertical; min-height: 0; } .fb-form-foot { display: flex; justify-content: flex-end; margin-top: 14px; } .fb-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .fb-picker-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); } .fb-picker-label .muted { font-weight: 400; font-size: 11.5px; } .fb-picker-btns { display: flex; gap: 6px; } .fb-picker-hint { margin-top: 6px; font-size: 11.5px; color: var(--text-tertiary); } .fb-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .fb-shots:empty, .fb-files:empty { display: none; } .fb-shot { position: relative; width: 92px; height: 68px; padding: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-default); background: var(--surface-sunken); cursor: pointer; } .fb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .fb-shot.is-busy img, .fb-file.is-busy { opacity: .5; } .fb-thumb-miss { display: grid; place-items: center; height: 100%; font-size: 11px; color: var(--text-tertiary); } .fb-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .fb-file { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; text-align: left; border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-primary); } button.fb-file { cursor: pointer; } button.fb-file:hover { border-color: var(--color-primary-600); } .fb-file .truncate { flex: 1; min-width: 0; } .fb-x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--surface-sunken); color: var(--text-secondary); } .fb-shot .fb-x { position: absolute; top: 3px; right: 3px; background: rgb(10 12 11 / .6); color: #fff; } .fb-empty { padding: 48px 12px; text-align: center; } .fb-empty p { margin: 6px 0 0; font-size: 12.5px; } .fb-mine { display: flex; flex-direction: column; gap: 8px; } .fb-mine-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--surface-raised); font: inherit; text-align: left; cursor: pointer; color: var(--text-primary); } .fb-mine-item:hover { border-color: var(--color-primary-600); } .fb-mine-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .fb-mine-desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fb-mine-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: 12.5px; } .fb-detail .fb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; margin-bottom: 12px; } .fb-block { margin-top: 14px; } .fb-block-t { font-size: 12px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 6px; } .fb-text { margin: 0; font-size: 13px; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); } .fb-resolution { padding: 10px 12px; border-radius: 8px; background: var(--success-soft); font-size: 12.5px; } .fb-resolution p { margin: 4px 0; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); } .fb-timeline { list-style: none; margin: 0; padding: 0; } .fb-timeline li { position: relative; padding: 0 0 14px 28px; } .fb-timeline li:last-child { padding-bottom: 0; } .fb-timeline .timeline-dot { background: var(--color-neutral-400); } .fb-timeline .fb-dot-assigned { background: var(--color-info-500); } .fb-timeline .fb-dot-need_info { background: var(--color-warning-500); } .fb-timeline .fb-dot-interview { background: var(--color-primary-500); } .fb-timeline .fb-dot-repaired { background: var(--color-success-500); } .fb-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; margin-bottom: 2px; } .fb-supplement, .fb-handle { padding-top: 14px; border-top: 1px solid var(--border-default); } .fb-handle .field { margin-bottom: 10px; } .fb-cell-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fb-drawer { max-width: 560px; display: flex; flex-direction: column; } .fb-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-default); font-size: 15px; } .fb-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; } .fb-crop-mask { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgb(10 12 11 / .6); backdrop-filter: blur(2px); } .fb-crop { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; background: var(--surface-raised); border-radius: 10px; box-shadow: var(--shadow-xl); overflow: hidden; } .fb-crop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border-default); } .fb-crop-stage { position: relative; padding: 12px; background: var(--surface-sunken); touch-action: none; user-select: none; cursor: crosshair; } .fb-crop-stage img { display: block; max-width: min(90vw, 1400px); max-height: calc(100vh - 170px); pointer-events: none; } .fb-crop-sel { position: absolute; border: 2px solid var(--color-primary-500); box-shadow: 0 0 0 9999px rgb(10 12 11 / .45); cursor: move; } .fb-crop-stage { overflow: hidden; } .fb-crop-sel i { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--color-primary-500); border-radius: 2px; } .fb-crop-sel i[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; } .fb-crop-sel i[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; } .fb-crop-sel i[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; } .fb-crop-sel i[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; } .fb-crop-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-default); } @media (max-width: 640px) { .fb-panel { right: 8px; left: 8px; top: 56px; width: auto; max-width: none; height: calc(100vh - 64px); } } @media (max-width: 860px) { .modal { width: 100%; } } /* ---------- 工具箱 → 业务系统搭建（views/build_progress.js）：只放排版，颜色全用 :root 参数 ---------- 一页全览：宽屏两栏（按板块往下排，一个板块不拆到两栏），一行「模块名 | 进度条 | 阶段」，进度条列宽固定好对比 */ .bld-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; } .bld-steps > i { height: 8px; border-radius: 2px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); } .bld-steps > i.on { background: var(--chart-1); box-shadow: none; } .bld-steps.lg > i { height: 10px; } .bld-steps > i.cur { opacity: .45; } /* AI 访谈答题页：正在问的那一段（interview_chat.js） */ .bld-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bld-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--surface-raised); font: inherit; font-size: 12px; cursor: pointer; color: var(--text-secondary); } .bld-chip b { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); } .bld-chip:hover, .bld-chip.is-on { border-color: var(--color-primary-600); } .bld-chip.is-on { color: var(--color-primary-600); } .bld-cols { columns: 2; column-gap: 32px; } .bld-sec { break-inside: avoid; margin-bottom: 16px; } .bld-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; margin-bottom: 4px; border-radius: 6px; background: var(--surface-sunken); } .bld-sec-h b { font-family: var(--font-display, inherit); font-size: 14.5px; font-weight: 800; color: var(--text-primary); } .bld-sec-h span { font-size: 11.5px; color: var(--text-secondary); } .bld-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px 76px; gap: 12px; padding: 0 10px; align-items: center; height: 26px; } .bld-row + .bld-row { border-top: 1px dashed var(--border-subtle); } .bld-name { min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; text-align: left; color: var(--text-primary); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bld-name:hover { color: var(--color-primary-600); text-decoration: underline; } .bld-stage { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; } .bld-stage.is-zero { color: var(--text-tertiary); } .bld-detail .bld-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 8px 0 16px; font-size: 12.5px; } .bld-detail .bld-meta span { color: var(--text-tertiary); font-size: 12px; } .bld-block-t { font-size: 12px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 6px; } .bld-text { margin: 0; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); } .bld-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-default); } .bld-pick { display: grid; gap: 6px; } .bld-pick label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-default); cursor: pointer; font-size: 13px; } .bld-pick label:has(input:checked) { border-color: var(--color-primary-600); } .bld-pick .n { font-family: var(--font-mono, monospace); color: var(--text-tertiary); width: 14px; } .bld-pick .bld-steps { width: 120px; } @media (max-width: 1100px) { .bld-cols { columns: 1; } } @media (max-width: 480px) { .bld-row { grid-template-columns: 26px minmax(0, 1fr) 96px 64px; gap: 8px; } } /* 模块编号（迁移 061）：等宽灰字，排在模块名前面 */ .bld-code { font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); } /* 模块使用热力图（老板 2026-10-15）：板块名 | 模块名 | 一列一天（近 30 天）| 右边「30 天」人数。 格子颜色沿用小力同学热力图的 .xl-l0~4（下面小力同学那段），这里只放排版；虚框 = 还没开始记录。 列多屏幕窄时在自己的框里左右滑，板块名、模块名两列钉在左边 */ .bld-heat-wrap { position: relative; overflow-x: auto; padding-bottom: 2px; } .bld-heat { display: grid; grid-template-columns: 68px 100px repeat(30, minmax(14px, 1fr)) 56px; gap: 3px; min-width: 744px; align-items: center; } .bld-heat i { height: 18px; border-radius: 3px; cursor: default; } .bld-heat-na { box-sizing: border-box; border: 1px dashed var(--border-default); background: transparent; } /* 左边两列（老板 2026-10-15 第三版：不要灰色横条、板块要明显、整块要整齐）： 板块名竖着跨本板块的几行（页面上写 grid-row: span N），上下居中、靠右贴一条浅绿竖线（同热力图格子的 --chart-1 色系，表示「这几行归它」）； 模块名靠左贴着竖线、字浅一档，让板块名压得住。两列 sticky，手机上左右滑不跟着走；板块名列补 3px 底色遮住两列之间的缝 */ .bld-heat-g { align-self: stretch; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; padding-right: 9px; border-right: 2px solid color-mix(in oklab, var(--chart-1) 45%, transparent); background: var(--surface-raised); box-shadow: 3px 0 0 var(--surface-raised); font-family: var(--font-display, inherit); font-size: 12.5px; font-weight: 800; line-height: 1.25; color: var(--text-primary); white-space: nowrap; } .bld-heat-sep { grid-column: 1 / -1; height: 8px; } .bld-heat-hh { font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; } .bld-heat-hh.is-sum { text-align: right; } .bld-heat-name { position: sticky; left: 71px; z-index: 1; padding: 0 6px 0 8px; background: var(--surface-raised); font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bld-heat-sum { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .bld-heat-sum.is-zero { color: var(--text-tertiary); } /* ---------- 工具箱 → 小力同学（views/xiaoli.js）：只放排版，颜色全用 :root 参数 ---------- 版面对照原版 chatbot-conversations（统计卡）/ ai-chat（建议卡）/ analytics-ecommerce 活跃热力图 */ .xl-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface-sunken); } .xl-title { font-size: 20px; line-height: 1.2; } /* 头部：头像 | 名字 + 说明 + 例子 | 右侧三个小数字（原版 customer-profile：右侧放操作区，竖线分隔，11px 灰字标签 + 17px 数字） */ .xl-hero { display: flex; align-items: center; gap: 16px; } /* 右侧一列：「使用说明」在最上面靠右（老板 10-25），三个小数字在下面 */ .xl-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; flex-shrink: 0; align-self: stretch; } .xl-nums { display: flex; flex-shrink: 0; align-items: center; } .xl-nums > div { padding: 4px 18px; cursor: default; } .xl-nums > div + div { border-left: 1px solid var(--border-subtle); } .xl-nums > div:last-child { padding-right: 0; } .xl-nums p { margin: 0; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; } .xl-nums b { display: block; margin-top: 2px; font-family: var(--font-display, inherit); font-size: 17px; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .xl-nums small { font-size: 11.5px; font-weight: 400; color: var(--text-tertiary); } /* 例子小标签：只显示要发的内容，解释放悬停，点一下复制 */ .xl-ex { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-raised); font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-primary); } .xl-ex:hover { border-color: var(--color-primary-600); } @media (max-width: 900px) { .xl-hero { flex-wrap: wrap; } .xl-side { width: 100%; align-items: stretch; } .xl-help { position: absolute; top: 20px; right: 20px; } .xl-head { padding-right: 112px; } .xl-nums { width: 100%; align-self: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); } .xl-nums > div:first-child { padding-left: 0; } } /* 能力地图：三组并排，一项一行 */ .xl-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .xl-grp { display: flex; flex-direction: column; gap: 6px; } .xl-grp-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-sunken); color: var(--text-secondary); } .xl-grp-h b { font-family: var(--font-display, inherit); font-size: 14px; font-weight: 800; color: var(--text-primary); } .xl-grp-h span { margin-left: auto; font-size: 11.5px; color: var(--text-tertiary); } .xl-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--surface-raised); font: inherit; text-align: left; cursor: pointer; color: var(--text-primary); } .xl-item:hover { border-color: var(--color-primary-600); } .xl-item b { display: block; font-size: 13px; } .xl-item em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 只占一行，放不下省略（老板 2026-10-07：多一行格子高度就不齐）；全文悬停看、点开看 */ /* 推送规则：按板块分组（2026-10-07），每组一个灰底标题条（同能力地图）+ 下面一排规则卡 */ .xl-rg + .xl-rg { margin-top: 16px; } .xl-rg .xl-grp-h { margin-bottom: 10px; } .xl-mg { border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; } .xl-mg + .xl-mg { margin-top: 12px; } .xl-mg .xl-grp-h { border-radius: 0; border-bottom: 1px solid var(--border-default); } .xl-mg-b { padding: 4px 14px; } .xl-mg-r { padding: 8px 0; } .xl-mg-r + .xl-mg-r { border-top: 1px dashed var(--border-subtle); } .xl-mg-r p { margin: 0 !important; } .xl-mg-r p + p { margin-top: 2px !important; line-height: 1.6; } .xl-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } /* 规则卡固定高度（陈民超 10-23：接收人多了卡片拉得很长）：什么时候 1 行、发什么 / 发给谁各 2 行（页面上 line-clamp-1/2）， 「查看全部」钉在底部，点卡片弹窗看全文。没有接收人那一段的（非管理员看不到接收人）矮一截 */ .xl-rule { display: flex; flex-direction: column; height: 192px; overflow: hidden; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--surface-raised); font-size: 12.5px; cursor: pointer; } .xl-rule.no-users { height: 146px; } .xl-rule:hover, .xl-rule:focus-visible { border-color: var(--color-primary-600); outline: none; } .xl-rule p { margin: 6px 0 0; line-height: 1.6; } .xl-more { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; color: var(--color-primary-600); } .xl-k { display: inline-block; min-width: 60px; margin-right: 6px; font-size: 12px; font-weight: 700; color: var(--text-tertiary); } /* 详细说明弹窗 */ .xl-detail { font-size: 13px; line-height: 1.75; color: var(--text-primary); } .xl-detail p { margin: 0 0 8px; } .xl-ul { margin: 0 0 8px; padding: 0; list-style: none; } .xl-ul li { position: relative; margin: 4px 0; padding-left: 14px; } .xl-ul li::before { content: ''; position: absolute; left: 2px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); } .xl-muted { color: var(--text-tertiary); font-size: 12px; } .xl-pre { white-space: pre-wrap; padding: 10px 12px; border-radius: 8px; background: var(--surface-sunken); font-size: 12.5px; } /* 使用热力图（行 = 周一…周日，列 = 0…23 点）；0 = 空格子，1–3 = 墨绿由浅到深，4 = 最多那一格用 --chart-2 橙色 */ .xl-heat-wrap { position: relative; overflow-x: auto; } .xl-heat { display: grid; grid-template-columns: 36px repeat(24, minmax(16px, 1fr)); gap: 3px; min-width: 560px; align-items: center; } .xl-heat i { height: 22px; border-radius: 3px; cursor: default; } .xl-hh { font-size: 10.5px; color: var(--text-tertiary); text-align: left; } .xl-hd { font-size: 11px; color: var(--text-secondary); } .xl-l0 { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border-subtle); } .xl-l1 { background: color-mix(in oklab, var(--chart-1) 30%, transparent); } .xl-l2 { background: color-mix(in oklab, var(--chart-1) 62%, transparent); } .xl-l3 { background: var(--chart-1); } .xl-l4 { background: var(--chart-2); } .xl-legend { display: inline-flex; align-items: center; gap: 4px; } .xl-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; } @media (max-width: 1024px) { .xl-map, .xl-rules { grid-template-columns: minmax(0, 1fr); } } /* ---------- 角色管理 → 授权弹窗（views/roles.js）：照原版 role-add「Module Permissions」，只放排版，颜色全用 :root 参数 ---------- 板块 = 灰底标题条；页面 = 缩进一行；操作 = 横排在页面同一行右边 */ .rp { display: flex; flex-direction: column; gap: 10px; } .rp-grp { border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; } .rp-grp .rp-grp { margin: 6px 10px 10px 28px; } .rp-grp-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-sunken); cursor: pointer; } .rp-grp-h b { font-family: var(--font-display, inherit); font-size: 13.5px; font-weight: 800; color: var(--text-primary); } .rp-tag { margin-left: auto; font-size: 11px; color: var(--text-tertiary); } .rp-page { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 12px 8px 36px; border-top: 1px solid var(--border-subtle); } .rp-grp-h + .rp-page { border-top: 0; } .rp-solo .rp-page { padding-left: 12px; border-top: 0; } .rp-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; } .rp-code { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 400; color: var(--text-tertiary); } .rp-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-left: auto; font-size: 12px; color: var(--text-secondary); } .rp-ops label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .rp-ops-t { font-size: 11px; color: var(--text-tertiary); } .rp-cb { width: 14px; height: 14px; flex-shrink: 0; accent-color: var(--color-primary-600); cursor: pointer; } .rp-empty { color: var(--text-tertiary); font-size: 12px; } @media (max-width: 640px) { .rp-page { padding-left: 24px; } .rp-ops { margin-left: 22px; } } /* ---------- 主体管理 → 营业执照自动识别（views/entities.js）：自动填入的格子绿框提示核对 ---------- */ .ocr-note { font-size: 12px; color: var(--text-secondary); margin-top: 8px; } .ocr-note:empty { display: none; } .ocr-note p { margin: 4px 0; line-height: 1.6; } .ocr-note .btn { margin-left: 6px; } .input.ocr-filled { border-color: var(--color-success-500); box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-success-500) 18%, transparent); } /* ---------- 基础数据 → 知识产权管理（views/ip.js）：商标 × 国家一览，照原版 analytics-ecommerce 矩阵格（小圆角格子 + 图例）；颜色全用 :root 语义参数 ---------- */ .ip-mx-wrap { overflow-x: auto; } /* 2026-10-06 老板嫌小：整体放大一档，并铺满卡片宽度 */ .ip-mx { border-collapse: separate; border-spacing: 4px; font-size: 13px; width: 100%; min-width: 680px; } .ip-mx th { font-weight: 500; font-size: 13px; color: var(--text-tertiary); text-align: center; padding: 0 2px 6px; white-space: nowrap; } .ip-mx th:first-child { text-align: left; } .ip-mx-name { font-weight: 700; font-size: 14px; color: var(--text-primary); padding: 0 16px 0 8px; white-space: nowrap; border-radius: 6px; } /* 防串行（老板 2026-10-07）：商标名一列只占名字本身的宽度（width:1%），多出来的宽度分给国家格子； 鼠标所在那一行整行浅底 + 商标名变主色 */ .ip-mx th:first-child, .ip-mx-name { width: 1%; } .ip-mx tbody tr:hover td { background: color-mix(in oklab, var(--color-primary-600) 7%, transparent); } .ip-mx tbody tr:hover .ip-mx-name { color: var(--color-primary-600); } .ip-mx tbody td { border-radius: 6px; transition: background .12s; } .ip-cell { display: grid; place-items: center; width: 100%; min-width: 76px; height: 34px; padding: 0 8px; border: 0; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; } button.ip-cell { cursor: pointer; } button.ip-cell:hover { outline: 2px solid var(--color-primary-600); outline-offset: 1px; } .ip-c-ok { background: color-mix(in oklab, var(--success) 20%, transparent); color: var(--success); } .ip-c-wait { background: color-mix(in oklab, var(--info) 18%, transparent); color: var(--info); } .ip-c-todo { background: color-mix(in oklab, var(--warning) 20%, transparent); color: var(--warning); } .ip-c-bad { background: color-mix(in oklab, var(--destructive) 16%, transparent); color: var(--destructive); } .ip-c-dead { background: var(--surface-sunken); color: var(--text-tertiary); text-decoration: line-through; } .ip-c-none { background: var(--surface-sunken); color: var(--text-tertiary); opacity: .55; } /* 主体详情「名下知识产权」里的国家小块（entities.js，2026-10-07）：颜色同一览表 ip-c-* */ .ip-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; } .ip-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-secondary); } .ip-legend span { display: inline-flex; align-items: center; gap: 5px; } .ip-legend i { display: inline-block; width: 16px; height: 12px; border-radius: 3px; } /* 表格分组标题行（ui.js table 的 opts.group，店铺管理按品牌分组） */ .tbl tr.group-row td { padding: 7px 12px; background: var(--surface-sunken); font-size: 12px; font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border-default); } .tbl tr.group-row td .muted { font-weight: 400; margin-left: 6px; } .tbl tbody tr.group-row:hover td { background: var(--surface-sunken); } /* 整页编辑底部固定的保存条（主体管理、知识产权、公司资产）。 左右留白写在这里、不用 px-5：Tailwind 的 px-5 优先级更高，会把这里的 padding-right 盖掉 */ .savebar { padding-left: 20px; padding-right: 20px; } /* 「反馈问题」已挪到顶栏（2026-10-12），右边不用再让位 */ /* 顶栏页签（老板 2026-10-03）：打开过的页面，放在面包屑右边，顶栏不加高；当前页 = 主色浅底 + 主色字（同原版选中态） */ .page-tabs { flex: 1; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; } .page-tabs::-webkit-scrollbar { display: none; } .page-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 6px 0 9px; border-radius: 8px; border: 1px solid transparent; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; transition: background .15s, color .15s; } .page-tab:first-child { padding-right: 9px; } .page-tab:hover { background: var(--surface-sunken); color: var(--text-primary); } .page-tab.is-active { background: var(--color-primary-50); color: var(--color-primary-600); border-color: color-mix(in oklab, var(--color-primary-600) 22%, transparent); font-weight: 600; } .page-tab svg { flex-shrink: 0; } .page-tab-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: var(--text-tertiary); } .page-tab-x:hover { background: var(--border-default); color: var(--text-primary); } .page-tabs-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 130px; padding: 4px; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md, 0 8px 24px rgb(0 0 0 / .08)); } .page-tabs-menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-primary); } .page-tabs-menu button:hover { background: var(--surface-sunken); } /* ---------- 字段说明 ⓘ 与模块使用说明（ui.js infoTip / helpDrawer，2026-10-12） ---------- ⓘ 跟在表头、指标名、卡片标题后面；气泡全页只有一个、fixed 定位，深色底（取主文字色反过来用，深浅模式自动跟着反）。 z-index 比弹窗（9000）高，达人信息卡里的 ⓘ 也能弹出来；比 toast（9999）低。 */ .info-tip { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 4px; color: var(--text-tertiary); cursor: help; border-radius: 999px; outline: none; font-weight: 400; } .info-tip:hover, .info-tip:focus-visible { color: var(--color-primary-600); } .info-tip:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 45%, transparent); } .tip-bubble { position: fixed; left: -9999px; top: 0; z-index: 9500; max-width: min(340px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 8px; background: var(--text-primary); color: var(--surface-raised); box-shadow: var(--shadow-lg); font-size: 12.5px; line-height: 1.65; font-weight: 400; text-align: left; white-space: normal; letter-spacing: 0; pointer-events: none; opacity: 0; transition: opacity .12s; } .tip-bubble.show { opacity: 1; } /* 「使用说明」按钮：浅灰底 + 主色字（能点），放在模块页签那一行最右边 */ .help-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--surface-sunken); color: var(--color-primary-600); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .help-btn:hover { background: color-mix(in oklab, var(--color-primary-600) 12%, var(--surface-sunken)); } /* 使用说明抽屉：比反馈详情宽，正文是一篇文档（.doc） */ .help-drawer { max-width: 720px; display: flex; flex-direction: column; } .help-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border-default); font-size: 15px; } .help-close { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; } .help-drawer-body { position: relative; flex: 1; overflow-y: auto; padding: 18px 28px 48px; } .doc { font-size: 14px; line-height: 1.75; color: var(--text-primary); } .doc-meta { margin: 0 0 10px; font-size: 12.5px; color: var(--text-tertiary); } .doc-meta .sep { margin: 0 8px; } .doc h1 { margin: 0 0 6px; font-family: var(--font-display, var(--heading)); font-size: 22px; font-weight: 700; } .doc .lead { margin: 0 0 4px; color: var(--text-secondary); } .doc section { padding: 20px 0 8px; margin-top: 12px; border-top: 1px solid var(--border-default); scroll-margin-top: 16px; } .doc h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; font-weight: 700; } .doc h3 { margin: 14px 0 4px; font-size: 14px; font-weight: 700; } .doc p { margin: 0 0 8px; } .doc ul, .doc ol { margin: 0 0 10px; padding-left: 20px; } .doc ul { list-style: disc; } .doc ol { list-style: decimal; } .doc li { margin: 3px 0; } .doc b { font-weight: 700; } .doc code { padding: 1px 6px; border-radius: 4px; background: var(--surface-sunken); font-family: var(--mono); font-size: 12px; } .doc .muted { color: var(--text-tertiary); } .doc .doc-table { width: 100%; table-layout: fixed; margin: 4px 0 12px; border-collapse: collapse; font-size: 13px; line-height: 1.6; } .doc .doc-table th, .doc .doc-table td { padding: 7px 10px; border: 1px solid var(--border-default); text-align: left; vertical-align: top; } .doc .doc-table td { white-space: normal; word-break: break-word; } /* 全局 td 不换行，说明文字要换行，否则撑出抽屉 */ .doc .doc-table th { width: 118px; background: var(--surface-sunken); font-weight: 600; white-space: normal; } /* 打开时所在的那个页签：标题后面带一个「当前页签」小标签 */ .doc section.is-current h2::after { content: '当前页签'; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: color-mix(in oklab, var(--color-primary-600) 12%, transparent); color: var(--color-primary-600); } /* 使用说明最上面的讲解视频（规范07）：16:9、细边框、凹陷底；下面一行小字（谁讲的、多长、点播放才加载） */ .help-video { margin: 0 0 14px; } .help-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--surface-sunken); } .help-video-cap { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12px; color: var(--text-tertiary); } .help-video-cap b { color: var(--color-primary-600); font-weight: 600; } .help-video-cap span { margin-left: auto; } @media (max-width: 640px) { .help-drawer-head { padding: 12px 16px; } .help-drawer-body { padding: 14px 16px 40px; } } /* ---- 表格列宽拖动把手（ui.js table()，2026-10-13 lai 定，规范06 5.2） ---- 把手贴在表头右边缘、平时看不见；鼠标移到表头上显出一条细线，移到把手上 / 拖动中变主色（主色 = 能点）。 把手要 th 是定位元素才放得住：th 已是 sticky（表头吸顶，见「表格」一节），sticky 一样能放，这里不再另设 relative—— 另设会盖掉吸顶（2026-10-14） */ .tbl .col-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; z-index: 2; } .tbl .col-resize::after { content: ""; position: absolute; top: 28%; bottom: 28%; right: 3px; width: 1px; background: transparent; transition: background .15s; } .tbl thead th:hover > .col-resize::after { background: var(--border-default); } .tbl .col-resize:hover::after, .tbl .col-resize.on::after { top: 0; bottom: 0; width: 2px; right: 3px; background: var(--color-primary-500); } html.col-resizing, html.col-resizing * { cursor: col-resize !important; user-select: none !important; } @media (pointer: coarse) { .tbl .col-resize { display: none; } } /* ---- 写死上限的列表被截断时的提示（ui.js limitNote，规范06 5.2） ---- */ .limit-note { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 10px; border-radius: var(--radius-md); font-size: 12.5px; color: var(--color-warning-700); background: var(--color-warning-50); } /* ---- 复选下拉框（ui.js multiSelect，规范06 5.2，2026-10-14 lai 定）---- 触发框和 select.input 一个样（同一个下箭头）；选了值后右边显示 ×（同 .filter-clear-group），箭头让位。 面板照原版 .ui-popover：卡片底、默认边线、5px 圆角、shadow-lg；复选框用原版打钩样式（dreams-core.css 已全局处理） */ .ms-trigger { display: inline-flex; align-items: center; text-align: left; cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } .ms-trigger .ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-clear-group.has-value .ms-trigger { background-image: none; padding-right: 26px; } .ms-panel { display: none; position: fixed; z-index: 500; max-width: calc(100vw - 16px); padding: 8px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .ms-panel.open { display: block; } .ms-search { margin-bottom: 6px; } .ms-actions { display: flex; align-items: center; gap: 2px; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); font-size: 12px; } .ms-actions button { border: none; background: none; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--color-primary-600); } .ms-actions button:hover { background: var(--surface-sunken); } .ms-count { margin-left: auto; padding-right: 4px; color: var(--text-tertiary); } .ms-list { max-height: 300px; overflow-y: auto; } .ms-group { padding: 6px 6px 2px; font-size: 11px; color: var(--text-tertiary); } .ms-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-primary); cursor: pointer; } .ms-opt:hover { background: var(--surface-sunken); } .ms-opt input { flex: none; } .ms-opt .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-empty { padding: 10px 6px; font-size: 12px; color: var(--text-tertiary); } } /* @layer components */