@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Noto+Serif+SC:wght@400;500;600&display=swap'); /* ============================================================ 主题皮:暖色(warm theme)「精品提案」 纸 #faf9f5 · 墨 #141413 · 陶土橙 #d97757 仅当 时生效;NetSuite 为默认底。 标题 Poppins · 正文宋体 Noto Serif CJK ============================================================ */ /* ---------- 暖色 token 覆盖(组件凡引用 var(--*) 即自动换肤)---------- */ html[data-theme^="warm"] { --bg: #faf9f5; --card: #ffffff; --ink: #141413; --clay: #d97757; --clay-deep: #c25d3a; --sky: #4f7e96; /* 方案 B 青蓝 */ --text: #141413; --text-soft: #5d5b52; --text-mute: #9a9588; --border: #e7e1d4; --border-soft: #efeade; --head-strip: #f4efe4; --link: #c25d3a; --accent: #d97757; --accent-deep: #c25d3a; --row-zebra: #fcfbf7; --row-hover: #f7f0e9; --ok: #5f7d4f; --ok-bg: #eef2e6; --warn:#b9802f; --warn-bg:#f7eedb; --bad: #b5483a; --bad-bg: #f8e7e1; --info:#4f7e96; --info-bg:#e8f0f3; } /* ---------- 字体:UI 用 Poppins,正文/数据用宋体 ---------- */ html[data-theme^="warm"] body { font-family: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif; } html[data-theme^="warm"] .ns-brand, html[data-theme^="warm"] .ns-pagehead h1, html[data-theme^="warm"] .portlet > .head h2, html[data-theme^="warm"] .ns-kpi .value, html[data-theme^="warm"] .ns-kpi .label, html[data-theme^="warm"] .ns-table thead th, html[data-theme^="warm"] .ns-btn, html[data-theme^="warm"] .pill, html[data-theme^="warm"] .ns-tabs a, html[data-theme^="warm"] .ns-field label, html[data-theme^="warm"] .ns-nav-item, html[data-theme^="warm"] .ns-nav-section > .label, html[data-theme^="warm"] .ns-env, html[data-theme^="warm"] .ns-pager, html[data-theme^="warm"] .section-title { font-family: "Poppins", "PingFang SC", "Microsoft YaHei", sans-serif; } html[data-theme^="warm"] .ns-pagehead h1 { font-weight: 600; letter-spacing: -.2px; } html[data-theme^="warm"] .portlet > .head h2 { letter-spacing: .6px; } /* ---------- 顶栏:浅纸 + 墨字(编辑感)---------- */ html[data-theme^="warm"] .ns-topbar { background: #f6f2e9; border-bottom: 1px solid var(--border); color: var(--ink); } html[data-theme^="warm"] .ns-brand { color: var(--ink); } html[data-theme^="warm"] .ns-brand small { color: var(--text-soft); } html[data-theme^="warm"] .ns-brand .logo { background: var(--clay); color: #fff; } html[data-theme^="warm"] .ns-search { background: #fffdf8; border-color: #e2dbcb; color: var(--text-soft); } html[data-theme^="warm"] .ns-search input { color: var(--ink); } html[data-theme^="warm"] .ns-search input::placeholder { color: #a59f90; } html[data-theme^="warm"] .ns-env { color: #7a3f29; background: #f6e6dd; border-color: #e9cdbf; } html[data-theme^="warm"] .ns-user { color: var(--ink); } html[data-theme^="warm"] .ns-user .avatar { background: var(--clay); color: #fff; } html[data-theme^="warm"] .ns-top-link { color: var(--text-soft); } html[data-theme^="warm"] .ns-top-link:hover { color: var(--ink); } /* ---------- 页头 / 按钮 ---------- */ html[data-theme^="warm"] .ns-pagehead { background: #fffdf9; border-bottom-color: var(--border); } html[data-theme^="warm"] .ns-pagehead h1 { color: var(--ink); } html[data-theme^="warm"] .ns-btn { background: #fffdf9; color: #3c372e; border-color: #ddd5c4; } html[data-theme^="warm"] .ns-btn:hover { background: #f4efe3; } html[data-theme^="warm"] .ns-btn--primary { background: var(--clay); border-color: var(--clay-deep); color: #fff; } html[data-theme^="warm"] .ns-btn--primary:hover { background: var(--clay-deep); } html[data-theme^="warm"] .ns-btn--danger { color: #a83f30; border-color: #e0b3a8; } /* ---------- 卡片 / portlet / 字段 / 标签页 / 分页 ---------- */ html[data-theme^="warm"] .portlet, html[data-theme^="warm"] .ns-kpi, html[data-theme^="warm"] .ns-filters, html[data-theme^="warm"] .ns-fieldgroup { border-color: var(--border); } html[data-theme^="warm"] .portlet > .head { background: var(--head-strip); border-bottom-color: var(--border); } html[data-theme^="warm"] .portlet > .head h2 { color: var(--ink); } html[data-theme^="warm"] .ns-kpi { border-top-color: var(--clay); } html[data-theme^="warm"] .ns-kpi .value { color: var(--ink); } html[data-theme^="warm"] .ns-tabs a { background: #efe8db; border-color: var(--border); color: var(--text-soft); } html[data-theme^="warm"] .ns-tabs a.active { background: #fffdf9; color: var(--ink); } html[data-theme^="warm"] .ns-fieldgroup .v { color: var(--ink); } html[data-theme^="warm"] .ns-field input, html[data-theme^="warm"] .ns-field select { border-color: #ded6c5; background: #fffdf9; } html[data-theme^="warm"] .ns-pager { background: #f8f4ec; border-top-color: var(--border); } html[data-theme^="warm"] .ns-pager a { background: #fffdf9; border-color: var(--border); } html[data-theme^="warm"] .ns-pager a.active { background: var(--clay); border-color: var(--clay-deep); color: #fff; } /* ---------- 数据表:Poppins 表头小字 + 宋体数据 ---------- */ html[data-theme^="warm"] .ns-table thead th { background: #f1eadb; color: #6a6354; border-bottom-color: #e2dac8; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; } html[data-theme^="warm"] .ns-table tbody td { color: #36322b; border-bottom-color: var(--border-soft); } html[data-theme^="warm"] .ns-table tfoot td { background: #f6f1e6; border-top-color: #e2dac8; } html[data-theme^="warm"] .ns-table .mono { color: #6a6051; } /* ---------- 状态徽章(暖化)---------- */ html[data-theme^="warm"] .pill { letter-spacing: .3px; } html[data-theme^="warm"] .pill.ok { color: var(--ok); background: var(--ok-bg); border-color: #cfe0bd; } html[data-theme^="warm"] .pill.warn { color: var(--warn); background: var(--warn-bg); border-color: #e8d2a8; } html[data-theme^="warm"] .pill.bad { color: var(--bad); background: var(--bad-bg); border-color: #ecc3ba; } html[data-theme^="warm"] .pill.info { color: var(--info); background: var(--info-bg); border-color: #c2d8e0; } html[data-theme^="warm"] .pill.muted { color: var(--text-soft); background: #f0ebe0; border-color: #e2dac9; } /* ---------- note / 骨架 / 伪图表 ---------- */ html[data-theme^="warm"] .note { background: #fbf3ec; border-color: #eccdbb; border-left-color: var(--clay); color: #5a3f30; } html[data-theme^="warm"] .skel { background: linear-gradient(90deg, #efe9dd 25%, #f7f2e8 37%, #efe9dd 63%); background-size: 400% 100%; } html[data-theme^="warm"] .bars .bar { background: linear-gradient(180deg, #e79a7e, var(--clay)); } /* ============================================================ 方案 A:深色卡突出 —— 侧栏 + KPI 用墨色,陶土点亮 ============================================================ */ html[data-theme="warm-a"] .ns-sidebar { background: #1d1b18; border-right-color: #000; } html[data-theme="warm-a"] .ns-nav-section > .label { color: #8a7f6c; } html[data-theme="warm-a"] .ns-nav-item { color: #c9bfac; } html[data-theme="warm-a"] .ns-nav-item:hover { background: #272420; color: #fff; } html[data-theme="warm-a"] .ns-nav-item.active { background: #2a2622; color: #fff; border-left-color: var(--clay); } html[data-theme="warm-a"] .ns-nav-item .badge { background: var(--clay); } html[data-theme="warm-a"] .ns-kpi { background: #1c1b18; border-color: #2b2723; border-top-color: var(--clay); } html[data-theme="warm-a"] .ns-kpi .label { color: #a89d89; } html[data-theme="warm-a"] .ns-kpi .value { color: #f8f4ea; } html[data-theme="warm-a"] .ns-kpi .delta.up { color: #9cc08a; } html[data-theme="warm-a"] .ns-kpi .delta.down { color: #e79a7e; } /* 强调态 KPI 整块陶土 */ html[data-theme="warm-a"] .ns-kpi.ok { background: #1c1b18; border-top-color: #9cc08a; } html[data-theme="warm-a"] .ns-kpi.warn { background: #2a2118; border-top-color: var(--warn); } html[data-theme="warm-a"] .ns-kpi.bad { background: #2a1b18; border-top-color: var(--bad); } /* ============================================================ 方案 B:浅色通栏 + 青蓝标签 ============================================================ */ html[data-theme="warm-b"] { --link: #3f7a96; } html[data-theme="warm-b"] .ns-sidebar { background: #f1ece0; border-right-color: var(--border); } html[data-theme="warm-b"] .ns-nav-section > .label { color: #9a8f79; } html[data-theme="warm-b"] .ns-nav-item { color: #57544a; border-left-color: transparent; } html[data-theme="warm-b"] .ns-nav-item:hover { background: #e9e2d3; color: var(--ink); } html[data-theme="warm-b"] .ns-nav-item.active { background: #fffdf9; color: var(--ink); border-left-color: var(--sky); font-weight: 600; } html[data-theme="warm-b"] .ns-nav-item .badge { background: var(--sky); } /* 青蓝标签:中性/信息态 pill、环境徽章、KPI 顶条交替 */ html[data-theme="warm-b"] .pill.info { color: #35657d; background: #e6f0f4; border-color: #c2d9e1; } html[data-theme="warm-b"] .pill.muted { color: #3f6f86; background: #e9f1f4; border-color: #c8dde4; } html[data-theme="warm-b"] .ns-env { color: #35657d; background: #e6f0f4; border-color: #c2d9e1; } html[data-theme="warm-b"] .ns-kpi:nth-child(3n+2) { border-top-color: var(--sky); } html[data-theme="warm-b"] .ns-table thead th { color: #5e6b72; } html[data-theme="warm-b"] .bars .bar { background: linear-gradient(180deg, #7faec4, var(--sky)); } html[data-theme="warm-b"] .ns-btn--primary { background: var(--clay); border-color: var(--clay-deep); } /* 主操作仍陶土 */ /* ============================================================ 暗色模式(NetSuite 暗色变体) ============================================================ */ html[data-theme="dark"] { --topbar: #10141a; --topbar-2: #161c24; --sidebar: #10141a; --sidebar-hover: #1a212a; --sidebar-active: #1f2730; --accent: #3a9bdc; --accent-deep: #2d7fb8; --link: #5cb3e6; --bg: #15191f; --card: #1e242c; --border: #2c333d; --border-soft: #262c34; --head-strip: #232a33; --text: #e4e7ec; --text-soft: #9aa4b0; --text-mute: #69727d; --ok: #5fb87a; --ok-bg: #1d3326; --warn: #d6a23f; --warn-bg: #33291a; --bad: #e26f5d; --bad-bg: #3a201d; --info: #5cb3e6; --info-bg: #16293a; --row-zebra: #1b2128; --row-hover: #222a33; } html[data-theme="dark"] .ns-pagehead h1, html[data-theme="dark"] .portlet > .head h2, html[data-theme="dark"] .ns-kpi .value { color: var(--text); } html[data-theme="dark"] .ns-table thead th { background: #232a33; color: #9aa4b0; border-bottom-color: #2c333d; } html[data-theme="dark"] .ns-table tbody td { color: #c9d0d8; } html[data-theme="dark"] .ns-table tfoot td { background: #1b2128; } html[data-theme="dark"] .ns-btn { background: #252c35; color: #cdd4dc; border-color: #39424d; } html[data-theme="dark"] .ns-btn:hover { background: #2c343e; } html[data-theme="dark"] .ns-tabs a { background: #1a2028; border-color: var(--border); color: var(--text-soft); } html[data-theme="dark"] .ns-tabs a.active { background: var(--card); color: var(--text); } html[data-theme="dark"] .ns-filters input, html[data-theme="dark"] .ns-filters select, html[data-theme="dark"] .ns-field input, html[data-theme="dark"] .ns-field select { background: #161b21; border-color: #323a44; color: var(--text); } html[data-theme="dark"] .note { background: #172230; border-color: #2a3a4a; color: #bcd0e0; } html[data-theme="dark"] .pill.ok { border-color: #2f5a3c; } html[data-theme="dark"] .pill.warn { border-color: #5a4824; } html[data-theme="dark"] .pill.bad { border-color: #5a312a; } html[data-theme="dark"] .pill.info { border-color: #2a4a5e; } html[data-theme="dark"] .pill.muted { background: #262c34; border-color: #363d47; color: var(--text-soft); } html[data-theme="dark"] .ns-pager { background: #1a2028; } html[data-theme="dark"] .ns-pager a { background: #252c35; border-color: var(--border); color: var(--text-soft); } html[data-theme="dark"] .ns-search { background: #10141a; border-color: #2c333d; }