/* ===================================================================== style-ocean.css — CP v2「Ocean」皮肤：浅色主内容 + 深藏蓝侧栏/顶栏在 index.htm 中于 style-v2.css 之后加载，覆盖其 :root token。触发（媒体查询双触发，显式 dark 永远压过系统浅色）： - 显式 Light ： :root[data-theme-mode="light"] .main-panel - 跟随系统： @media (prefers-color-scheme: light) 下 [data-theme-mode="system"] .main-panel - 显式 Dark ：两条都不命中 → 保持 style-v2.css 的深色 ★ 作用域限定在 .main-panel（主内容区 = #permanent-page-container/#rootPanel + #page-container： main/members/games/shop/pos/shift/logs/boot，以及设置/Analysis/Events/Reports 等）。 .content-wrapper 是 .main-panel 的后代 → 卡片/表格等浅色化，但背板自身保持深藏蓝渐变（--oc-chrome + 主色光晕），与深色侧栏/顶栏呼应。顶栏 #top-nav-container、侧栏 #sidebar-container 在 .main-panel 之外，浅色 token 不下发，保持 v2 深色。针对 body/.navbar/.brand-logo/顶栏搜索等外层元素的规则会自然失配（.main-panel 的后代里没有它们）→ 那些区域维持深色；本皮肤再由文件末尾的 --oc-* 规则把 #sidebar / #topNavPanel 覆写成 Ocean 深藏蓝，主色统一为 --ui-accent #1a73e8。 ★ 例外：PC 布局页（layout.htm / #layoutPanel）整页不做浅色化，保持 v2 原样 —— 该页由 layout.css 按深色底设计。实现见两个触发块末尾的「#layoutPanel 还原」段：在 #layoutPanel 上把浅色 token 还原成 v2 深色默认值，右击菜单（所有页面）保持深色，配色跟随皮肤的 --oc-chrome-*。模式由顶栏「主题色调整器」写入。浅色调色值集中在 :root 的 --L-* 单一真源；两个触发块由脚本生成、结构相同，如需改色只改 --L-*，改规则改 payload 后重跑生成脚本。 ===================================================================== */ :root { --L-bg-app: #f2f5fa; /* app 底（近白微绿） */ --L-bg-card: #ffffff; /* 卡片/表面（纯白） */ --L-bg-hover: #eef2f9; /* 行/卡片 hover */ --L-bg-elevated: #eef1f7; /* 输入框/工具条 */ --L-border: #d3ddec; /* 边框（浅绿灰，仍可见） */ --L-ink: #15202f; /* 正文墨（深绿黑） */ --L-ink-2: #48566a; /* 次要文字 */ --L-ink-3: #67748a; /* muted 文字 */ --L-btn-neutral: #eef1f7; /* 普通/默认按钮浅底（= elevated，浅色页上浅底深字） */ --L-btn-neutral-hover: #e2e9f3; /* 普通按钮 hover 压深一档 */ --L-btn-neutral-ink: #15202f; /* 普通按钮深字 */ } /* ========== 1) 显式 Light ========== */ :root[data-theme-mode="light"] .main-panel { color-scheme: light; /* 给面板铺一层浅底做兜底（.content-wrapper 已随 --ui-surface 变浅，此处防边缘/空隙透深） */ background-color: var(--bg-darkest); /* 背景色阶：浅绿 slate，保留 v2 的 tint color-mix */ --bg-darkest: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-dark: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-bg: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface-2: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card: color-mix(in srgb, var(--L-bg-card), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface: color-mix(in srgb, var(--L-bg-card), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card-hover: color-mix(in srgb, var(--L-bg-hover), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-elevated: color-mix(in srgb, var(--L-bg-elevated), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --border-default: color-mix(in srgb, var(--L-border), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-border: color-mix(in srgb, var(--L-border), var(--ui-bg-tint) var(--ui-bg-tint-strength)); /* 文字：深绿墨。--ui-text-base 仍可被字体色调整器 inline style 覆盖 */ --ui-text-base: var(--L-ink); --text-primary: var(--ui-text-base); --ui-text: var(--ui-text-base); --text-secondary: var(--L-ink-2); --ui-muted: var(--L-ink-2); --text-muted: var(--L-ink-3); /* 语义蓝在浅底作文字太浅 → 压深（tint/描边随之更实，可读性更好） */ --info: #0969da; --ui-info: #0969da; --ui-info-bright: #0550ae; /* 白 alpha 助手翻深绿 alpha */ --white-16: color-mix(in srgb, var(--L-ink) 16%, transparent); --white-10: color-mix(in srgb, var(--L-ink) 10%, transparent); /* 条纹表格奇数行：深色主题用 14% 纯黑叠加，浅底会发浑浊灰 → 降为 5% 深绿墨叠加（仅 .table-striped odd 行引用此变量） */ --gray-900-a14: color-mix(in srgb, var(--L-ink) 5%, transparent); /* 阴影调浅 */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--L-ink) 8%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--L-ink) 12%, transparent); --shadow-lg: 0 18px 50px color-mix(in srgb, var(--L-ink) 18%, transparent); --shadow-35: color-mix(in srgb, var(--L-ink) 18%, transparent); /* 压在半透明染色上的可读墨（success 供 days 芯片、neutral 供徽章基座兜底；实心化后 info/danger/warning 已不再需要） */ --on-tint-success: color-mix(in srgb, var(--ui-accent) 62%, var(--L-ink)); --on-tint-neutral: var(--text-primary); /* 浅底上的实心主色：白字压在 --ui-accent 原色上只有 3.37，不足 AA。压深 22% 后达 5.1，且仍由 --ui-accent 派生 —— 顶栏调色器换主色时自动跟随，不写死绿色字面量 */ --ui-accent-solid: color-mix(in srgb, var(--ui-accent) 78%, #000); } /* ── 对比硬化：覆盖 theme-dark.css 里为深色写死的浅灰/白/深渐变 ── */ /* body 正文字面量 #b1b1b5（浅灰）在浅底几乎看不清 → 深墨 */ :root[data-theme-mode="light"] .main-panel body { color: var(--text-primary); } /* 标题在浅底也要深字 */ :root[data-theme-mode="light"] .main-panel h1, :root[data-theme-mode="light"] .main-panel h2, :root[data-theme-mode="light"] .main-panel h3, :root[data-theme-mode="light"] .main-panel h4, :root[data-theme-mode="light"] .main-panel h5, :root[data-theme-mode="light"] .main-panel h6 { color: var(--text-primary); } /* content-wrapper 背景：沿用 Blue(v2) 的「三层主色径向光晕 + 一层竖向压暗」结构，底色改深藏蓝（--oc-chrome，与侧栏/顶栏同一套 chrome 色）→ 白卡片浮在深蓝背板上，与 Ocean 的深 chrome 呼应。光晕用 --oc-accent / --oc-accent-bright 派生（比例调高，让蓝调渐变明显可见），不写死字面量 */ :root[data-theme-mode="light"] .main-panel .content-wrapper { background-color: var(--oc-chrome) !important; background-image: radial-gradient(900px 620px at 18% 12%, color-mix(in srgb, var(--oc-chrome) 52%, transparent) 0%, transparent 62%), radial-gradient(1100px 760px at 84% 18%, color-mix(in srgb, var(--oc-accent-bright) 26%, transparent) 0%, transparent 64%), radial-gradient(1200px 900px at 32% 110%, color-mix(in srgb, var(--oc-accent) 34%, transparent) 0%, transparent 66%), linear-gradient(180deg, rgba(3, 10, 20, 0.24) 0%, rgba(3, 10, 20, 0.02) 38%, rgba(3, 10, 20, 0.34) 100%) !important; } :root[data-theme-mode="light"] .main-panel .brand-logo img { content: url("../images/logo-dark.png"); } :root[data-theme-mode="light"] .main-panel .navbar .shortcuts a i.mdi, :root[data-theme-mode="light"] .main-panel .navbar .shortcuts a i.fa { color: #4f6356 !important; } :root[data-theme-mode="light"] .main-panel .navbar .shortcuts a img[src*="icon-icafecloud"] { content: url("../images/icon-icafecloud-dark.png"); } :root[data-theme-mode="light"] .main-panel .navbar .shortcuts a img[src*="icon-ccbootcloud"] { content: url("../images/icon-ccbootcloud-dark.png"); } /* 右击菜单（含 layout PC 菜单）保持深色，但跟随当前皮肤的深色 chrome：菜单挂在上， .main-panel 的浅色 token 不下发，故直接在 context-menu-root 上按 --oc-chrome-* 重声明它/子菜单/ 条目消费的 token（与 #sidebar / #topNavPanel 同一族色），换皮肤时自动跟着变 */ :root[data-theme-mode="light"] .context-menu-list.context-menu-root { color-scheme: dark; /* 底/边框：用顶栏那一档 chrome-2，比侧栏略亮，浮层压在浅色页面上更分明 */ --bg-card: var(--oc-chrome-2); --ui-surface: var(--oc-chrome-2); --bg-elevated: var(--oc-chrome-2-elevated); --bg-card-hover: var(--oc-chrome-hover); --ui-border: var(--oc-chrome-line); --border-default: var(--oc-chrome-line); /* 文字：chrome 浅墨三档 */ --ui-text-base: var(--oc-chrome-ink); --ui-text: var(--oc-chrome-ink); --text-primary: var(--oc-chrome-ink); --text-secondary: var(--oc-chrome-ink-2); --ui-muted: var(--oc-chrome-ink-2); --text-muted: var(--oc-chrome-ink-3); /* hover：深底上主色压太暗 → 用亮一档的 --oc-accent-bright，底色用侧栏选中同款 */ --ui-accent: var(--oc-accent-bright); --ui-green-bg: var(--oc-nav-on-bg); --accent-primary: var(--oc-accent-bright); --accent-primary-light: var(--oc-nav-on-bg); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); } /* 设置搜索框 #ss-search-input：浅底深字 */ :root[data-theme-mode="light"] .main-panel .ss-search-box { background: var(--bg-card); color: var(--text-primary); } :root[data-theme-mode="light"] .main-panel .ss-result-item:hover, :root[data-theme-mode="light"] .main-panel .ss-result-item.ss-item-active { background: var(--ui-green-bg); color: var(--ui-accent); } :root[data-theme-mode="light"] .main-panel .ss-badge { background: color-mix(in srgb, var(--L-ink) 6%, transparent); } :root[data-theme-mode="light"] .main-panel .ss-search-wrap .ss-search-icon-btn { color: #4f6356; } :root[data-theme-mode="light"] .main-panel .ss-search-wrap .ss-search-icon-btn:hover, :root[data-theme-mode="light"] .main-panel .ss-search-wrap .ss-search-icon-btn.ss-active { color: var(--ui-accent); background: var(--ui-green-bg); } :root[data-theme-mode="light"] .main-panel .nav-tabs .nav-link.active, :root[data-theme-mode="light"] .main-panel .nav-tabs .nav-item.show .nav-link { background: var(--ui-accent-solid) !important; border-color: var(--L-accent-deep) !important; color: #fff !important; border-radius: var(--radius-sm); font-weight: 600; } /* nav-tabs 在浅底无边框显得漂浮 → 给 tab 条加一道底边线做分隔 */ :root[data-theme-mode="light"] .main-panel .nav-tabs { border-bottom: 1px solid var(--ui-border) !important; } :root[data-theme-mode="light"] .main-panel .dropdown .dropdown-menu { background-color: var(--bg-card) !important; border-color: var(--ui-border) !important; color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel .dropdown .dropdown-menu .dropdown-item { color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel .dropdown .dropdown-menu .dropdown-item:hover, :root[data-theme-mode="light"] .main-panel .dropdown .dropdown-menu .dropdown-item:focus { background-color: var(--ui-green-bg) !important; color: var(--ui-text) !important; } /* PC/Boot 计数图标：offline/disabled 原为近白，浅底不可见 → 改深色（保留状态层次） */ :root[data-theme-mode="light"] .main-panel #bootPanel #boot_pcs_offline, :root[data-theme-mode="light"] .main-panel #pcs_off.pc-status-offline { color: var(--text-secondary) !important; } :root[data-theme-mode="light"] .main-panel #bootPanel #boot_pcs_disabled { color: var(--text-secondary) !important; } :root[data-theme-mode="light"] .main-panel .table-hover tbody tr:hover, :root[data-theme-mode="light"] .main-panel .table-hover tbody tr:hover > td, :root[data-theme-mode="light"] .main-panel .table-hover tbody tr:hover > th { background-color: var(--ui-green-bg) !important; color: var(--ui-text) !important; } /* input-group 里的 .text-white 图标坐在浅色 elevated 底上不可见 → 深字 */ :root[data-theme-mode="light"] .container-scroller .main-panel .input-group-text .text-white, :root[data-theme-mode="light"] .container-scroller .main-panel .input-group-text i.text-white { color: var(--text-secondary) !important; } /* posTopup / posRefund 面板内的 .text-white 图标（input-group + 卡片内独立图标）坐在浅底不可见 → 深字 */ :root[data-theme-mode="light"] .main-panel #posTopupPanel .text-white, :root[data-theme-mode="light"] .main-panel #posRefundPanel .text-white { color: var(--text-secondary) !important; } /* 用户指定：以下选择器在浅色下统一为黑色 */ :root[data-theme-mode="light"] .main-panel { --ui-green-text: #000000; } :root[data-theme-mode="light"] .main-panel h1, :root[data-theme-mode="light"] .main-panel h2, :root[data-theme-mode="light"] .main-panel h3, :root[data-theme-mode="light"] .main-panel h4, :root[data-theme-mode="light"] .main-panel h5, :root[data-theme-mode="light"] .main-panel h6, :root[data-theme-mode="light"] .main-panel .h1, :root[data-theme-mode="light"] .main-panel .h2, :root[data-theme-mode="light"] .main-panel .h3, :root[data-theme-mode="light"] .main-panel .h4, :root[data-theme-mode="light"] .main-panel .h5, :root[data-theme-mode="light"] .main-panel .h6, :root[data-theme-mode="light"] .main-panel .card .card-title, :root[data-theme-mode="light"] .main-panel .card-title, :root[data-theme-mode="light"] .main-panel .nav-tabs.tab-transparent .nav-item .nav-link, :root[data-theme-mode="light"] .main-panel .text-muted, :root[data-theme-mode="light"] .main-panel .text-light { color: #000000 !important; } :root[data-theme-mode="light"] .main-panel #member-page-container h2, :root[data-theme-mode="light"] .main-panel #events h2 { color: #fff !important;} :root[data-theme-mode="light"] .main-panel .nav-tabs .nav-link { color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success { color: var(--on-tint-success) !important; } :root[data-theme-mode="light"] .main-panel #shopPanel .order-info-pay-type-lg { color: #0d6e6e !important; border-color: #0d6e6e !important; box-shadow: 4px 7px rgba(13, 110, 110, 0.5) !important; } /* 用户指定：三色按钮 hover → 深色背景 + 浅色字 */ :root[data-theme-mode="light"] .main-panel .btn-info:hover { background-color: color-mix(in srgb, var(--ui-info) 58%, #000) !important; border-color: color-mix(in srgb, var(--ui-info) 58%, #000) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel .btn-success:hover { background-color: color-mix(in srgb, var(--ui-accent) 60%, #000) !important; border-color: color-mix(in srgb, var(--ui-accent) 60%, #000) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel .btn-danger:hover { background-color: color-mix(in srgb, var(--ui-danger) 60%, #000) !important; border-color: color-mix(in srgb, var(--ui-danger) 60%, #000) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel .btn-warning:hover { background-color: color-mix(in srgb, var(--ui-warning) 55%, #000) !important; border-color: color-mix(in srgb, var(--ui-warning) 55%, #000) !important; color: #fff !important; } /* 普通/默认按钮（无语义色）：浅色页用浅底 + 深字 + 可见描边，hover 压深一档 */ :root[data-theme-mode="light"] .main-panel .btn-default, :root[data-theme-mode="light"] .main-panel .btn-secondary, :root[data-theme-mode="light"] .main-panel .btn-light { background-color: var(--L-btn-neutral) !important; border-color: var(--ui-border) !important; color: var(--L-btn-neutral-ink) !important; } :root[data-theme-mode="light"] .main-panel .btn-default:hover, :root[data-theme-mode="light"] .main-panel .btn-default:focus, :root[data-theme-mode="light"] .main-panel .btn-default:active, :root[data-theme-mode="light"] .main-panel .btn-secondary:hover, :root[data-theme-mode="light"] .main-panel .btn-secondary:focus, :root[data-theme-mode="light"] .main-panel .btn-secondary:active, :root[data-theme-mode="light"] .main-panel .btn-light:hover, :root[data-theme-mode="light"] .main-panel .btn-light:focus, :root[data-theme-mode="light"] .main-panel .btn-light:active { background-color: var(--L-btn-neutral-hover) !important; border-color: var(--ui-border) !important; color: var(--L-btn-neutral-ink) !important; } /* 用户指定：analysis 页容器内字体深色 */ :root[data-theme-mode="light"] .main-panel #analysis-page-container { color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel #analysis-page-container .text-muted{ color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel #analysis-page-container .analysis-menus p a { color: var(--text-secondary) !important; } :root[data-theme-mode="light"] .main-panel #analysis-page-container .analysis-menus p.active a, :root[data-theme-mode="light"] .main-panel #analysis-page-container .analysis-menus p a:hover { color: var(--ui-accent) !important; } /* 用户指定：timePanel 里的 .text-light / .text-muted 在浅底深字 */ :root[data-theme-mode="light"] .main-panel #timePanel .text-light, :root[data-theme-mode="light"] .main-panel #timePanel .text-muted { color: var(--text-primary) !important; } /* ── 语义按钮：浅色下回到实心色，最大化区分度。改写为覆盖组件消费的语义变量（而非硬编码最终属性），让 bg/border/text 顺着 style-v2.css 里 .btn-* 已有的 var() 链走；success 的底色在 theme-dark.css 里是字面量 #23af47（无对应 token），只能显式 background-color。hover 见 L139-142 加深一档 ── */ :root[data-theme-mode="light"] .main-panel .btn-success, :root[data-theme-mode="light"] .main-panel .btn-primary { background-color: var(--ui-accent-solid); border-color: var(--ui-accent-solid); color: #fff; } :root[data-theme-mode="light"] .main-panel .btn-info { --v2-info-color: var(--ui-info); --ui-border: var(--ui-info); --ui-text: #fff; } :root[data-theme-mode="light"] .main-panel .btn-danger { --ui-danger-bg: #cf222e; --ui-border: #cf222e; --ui-text: #fff; } :root[data-theme-mode="light"] .main-panel .btn-warning { --v2-warning-color: #e0a100; --ui-gold: #e0a100; --ui-text: #fff; } /* page-header-tab 里的按钮底色被强制为浅 elevated，文字须深；显式压过上面语义按钮把 --ui-text 设成 #fff 的元素级覆盖 */ :root[data-theme-mode="light"] .main-panel .page-header-tab .btn { color: var(--text-primary) !important; } /* Ocean: page-header-tab 语义按钮 hover 底色转深 → 图标/文字改浅色（覆盖上一条把 .btn 压深墨的规则，specificity 更高） */ :root[data-theme-mode="light"] .main-panel .page-header-tab .btn-info:hover, :root[data-theme-mode="light"] .main-panel .page-header-tab .btn-success:hover, :root[data-theme-mode="light"] .main-panel .page-header-tab .btn-danger:hover, :root[data-theme-mode="light"] .main-panel .page-header-tab .btn-warning:hover { color: #fff !important; } /* POS 主色按钮静息态：base #posPanel .btn.btn-success 用 var(--ui-green-bg) 淡绿 + 深字，浅底显弱； #posPanel id 压过 .main-panel .btn-success 的实心绿 → 这里补足实心绿深底 + 浅字（.btn-success 全局态已由 .main-panel .btn-success 实心化） */ :root[data-theme-mode="light"] .main-panel #posPanel .btn.btn-success, :root[data-theme-mode="light"] .main-panel #posPanel .btn.btn-success:focus { background-color: var(--ui-accent-solid) !important; color: #fff !important; } /* POS/Shop 主色按钮 hover：底色变实心绿，深字读不清 → 浅字（仅浅色，深色下 --ui-text 本就是浅色） */ :root[data-theme-mode="light"] .main-panel #posPanel .btn.btn-success:hover, :root[data-theme-mode="light"] .main-panel #shopPanel .btn.btn-success:hover, :root[data-theme-mode="light"] .main-panel #shopPanel .btn.btn-warning:hover, :root[data-theme-mode="light"] .main-panel #shopPanel .btn.btn-primary:hover { color: #fff !important; } /* POS/Shop 禁用的 danger 按钮：浅色下改深底浅字（默认走 --bg-elevated 浅底会跟卡片糊在一起，不易看出禁用态）。底走深墨 --text-primary、字走浅卡片色 --bg-card，配合基础 opacity:0.6 呈灰化禁用态 */ :root[data-theme-mode="light"] .main-panel #posPanel .btn.btn-danger:disabled, :root[data-theme-mode="light"] .main-panel #posPanel .btn.btn-danger.disabled, :root[data-theme-mode="light"] .main-panel #shopPanel .btn.btn-danger:disabled, :root[data-theme-mode="light"] .main-panel #shopPanel .btn.btn-danger.disabled, :root[data-theme-mode="light"] .main-panel #posPanel .btn.btn-danger:disabled:hover, :root[data-theme-mode="light"] .main-panel #posPanel .btn.btn-danger.disabled:hover, :root[data-theme-mode="light"] .main-panel #shopPanel .btn.btn-danger:disabled:hover, :root[data-theme-mode="light"] .main-panel #shopPanel .btn.btn-danger.disabled:hover { background-color: var(--text-primary) !important; border-color: var(--text-primary) !important; color: var(--bg-card) !important; } /* 顶栏 days 芯片是状态指示、非 action → 保持淡染色（此规则 specificity 更高，压过上面的实心 btn-success），文字仍走 L136 深墨 */ :root[data-theme-mode="light"] .main-panel .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success { background-color: color-mix(in srgb, var(--ui-accent) 22%, transparent); } /* ── 语义徽章：浅色下实心语义色（success/primary 绿、danger 红、warning 琥珀深字、info 蓝）；未知变体留中性底 ── */ :root[data-theme-mode="light"] .container-scroller .main-panel span.badge, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge { background-color: color-mix(in srgb, var(--L-ink) 8%, transparent) !important; color: var(--on-tint-neutral) !important; } :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-success, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-success, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-primary, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-primary { background-color: var(--ui-accent-solid) !important; color: #fff !important; } :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-danger, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-danger { background-color: #cf222e !important; color: #fff !important; } :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-warning, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-warning { background-color: #e0a100 !important; color: #17231b !important; } :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-info, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-info, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.bg-info, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.bg-info { background-color: var(--ui-info) !important; color: #fff !important; } /* members 表 Login/Enable 列的 Yes/No 状态徽章：浅色底 + 深字（Yes 淡绿、No 淡中性），不用实心色 */ :root[data-theme-mode="light"] .main-panel #membersIndexPanel .badge-pill.badge-success { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="light"] .main-panel #membersIndexPanel .badge-pill.badge-light { background-color: color-mix(in srgb, var(--L-ink) 6%, transparent) !important; color: var(--text-secondary) !important; } :root[data-theme-mode="light"] .main-panel #shopPanel span.badge[class*="badge-order-"], :root[data-theme-mode="light"] .main-panel #posPanel span.badge[class*="badge-order-"], :root[data-theme-mode="light"] .main-panel #memberOrderPanel span.badge[class*="badge-order-"] { background-color: color-mix(in srgb, var(--L-ink) 8%, transparent) !important; color: var(--on-tint-neutral) !important; } :root[data-theme-mode="light"] .main-panel #shopPanel span.badge.badge-order-paid, :root[data-theme-mode="light"] .main-panel #posPanel span.badge.badge-order-paid, :root[data-theme-mode="light"] .main-panel #memberOrderPanel span.badge.badge-order-paid, :root[data-theme-mode="light"] .main-panel #shopPanel #orderlist-items .table-row .order-status-2 span, :root[data-theme-mode="light"] .main-panel #posPanel .order-status-2 span { background-color: var(--ui-accent-solid) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel #shopPanel span.badge.badge-order-cancelled, :root[data-theme-mode="light"] .main-panel #posPanel span.badge.badge-order-cancelled, :root[data-theme-mode="light"] .main-panel #memberOrderPanel span.badge.badge-order-cancelled { background-color: #cf222e !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel #shopPanel span.badge.badge-order-in-process, :root[data-theme-mode="light"] .main-panel #posPanel span.badge.badge-order-in-process, :root[data-theme-mode="light"] .main-panel #memberOrderPanel span.badge.badge-order-in-process { background-color: var(--ui-info) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel #shopPanel span.badge.badge-order-partial-refund, :root[data-theme-mode="light"] .main-panel #posPanel span.badge.badge-order-partial-refund, :root[data-theme-mode="light"] .main-panel #shopPanel #orderlist-items .table-row .order-status-1 span, :root[data-theme-mode="light"] .main-panel #posPanel .order-status-1 span { background-color: #e0a100 !important; color: #17231b !important; } :root[data-theme-mode="light"] .main-panel .badge-pc-Disable, :root[data-theme-mode="light"] .main-panel .badge-pc-Maintenance { background-color: color-mix(in srgb, var(--L-ink) 10%, transparent) !important; color: var(--text-secondary) !important; } /* boot PC 状态徽章：浅色下用淡语义染底 + 深字（否则被上面中性 badge 基座抹平成灰底；这里 specificity 更高压回语义色）。 Offline/Enable/Disable/Maintenance 保持中性；其余带色状态深字，符合「浅底徽章用深字」 */ :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-pc-Online, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-pc-Write, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-pc-Online, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-pc-Write { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-pc-Standby, :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-pc-Paused, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-pc-Standby, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-pc-Paused { background-color: color-mix(in srgb, var(--ui-warning) 20%, transparent) !important; color: #17231b !important; } :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-pc-Disconnected, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-pc-Disconnected { background-color: color-mix(in srgb, var(--ui-info) 18%, transparent) !important; color: var(--ui-info-bright) !important; } :root[data-theme-mode="light"] .container-scroller .main-panel label.badge.badge-pc-Booking, :root[data-theme-mode="light"] .container-scroller .main-panel span.badge.badge-pc-Booking { background-color: color-mix(in srgb, mediumpurple 22%, transparent) !important; color: #5b3d9e !important; } /* PC/Console 布局视图徽章：#pcLayoutPanel/#consolesLayoutPanel 有 id 级 base 规则（默认 color:--ui-on-accent=白），压过上面 .container-scroller 徽章规则 → 浅底上白字不可见。以同等 id specificity 重映射为浅染底 + 深字（同 container-scroller） */ :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Online, :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Write, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Online, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Write { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Standby, :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Paused, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Standby, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Paused { background-color: color-mix(in srgb, var(--ui-warning) 20%, transparent) !important; color: #17231b !important; } :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Disconnected, :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Disconected, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Disconnected, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Disconected { background-color: color-mix(in srgb, var(--ui-info) 18%, transparent) !important; color: var(--ui-info-bright) !important; } :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Booking, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Booking { background-color: color-mix(in srgb, mediumpurple 22%, transparent) !important; color: #5b3d9e !important; } :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Maintenance, :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Maintence, :root[data-theme-mode="light"] .main-panel #pcLayoutPanel .badge.badge-pc-Disable, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Maintenance, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Maintence, :root[data-theme-mode="light"] .main-panel #consolesLayoutPanel .badge.badge-pc-Disable { background-color: color-mix(in srgb, var(--L-ink) 10%, transparent) !important; color: var(--text-secondary) !important; } :root[data-theme-mode="light"] .main-panel tr[data-pc_status_text=Online] td, :root[data-theme-mode="light"] .main-panel tr[data-pc_status_text=Write] td, :root[data-theme-mode="light"] .main-panel tr[data-pc_status_text=Enable] td, :root[data-theme-mode="light"] .main-panel tr[data-pc_status_text=Disconnected] td { color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel .sidebar .nav.sub-menu .nav-item .nav-link.active { color: var(--ui-accent) !important; } :root[data-theme-mode="light"] .main-panel .sidebar .nav.sub-menu .nav-item .nav-link:hover { background: color-mix(in srgb, var(--L-ink) 5%, transparent) !important; } :root[data-theme-mode="light"] .main-panel .table td, :root[data-theme-mode="light"] .main-panel .jsgrid .jsgrid-table td { color: color-mix(in srgb, var(--L-ink) 85%, transparent); } /* ── daterangepicker 弹层：库 CSS 把外框写死深色 #1c2c42，且弹层挂在上（在 .main-panel 之外，拿不到 .main-panel 的浅色 token）。故用 :root 级触发单独翻浅：① 在 .daterangepicker 上重定义关键 token（让内部 bootstrap 按钮/文字走浅色链）② 直接改库里写死的深色。日历表格库内本就是白底，无需动。 ── */ :root[data-theme-mode="light"] .daterangepicker { --text-primary: var(--L-ink); --ui-text: var(--L-ink); --text-muted: var(--L-ink-3); --ui-border: var(--L-border); --bg-card: var(--L-bg-card); --bg-elevated: var(--L-bg-elevated); background-color: var(--L-bg-card) !important; border-color: var(--L-border); color: var(--L-ink); } :root[data-theme-mode="light"] .daterangepicker:after { border-bottom-color: var(--L-bg-card); } :root[data-theme-mode="light"] .daterangepicker:before { border-bottom-color: var(--L-border); } :root[data-theme-mode="light"] .daterangepicker.drop-up:after { border-top-color: var(--L-bg-card); } :root[data-theme-mode="light"] .daterangepicker.drop-up:before { border-top-color: var(--L-border); } :root[data-theme-mode="light"] .daterangepicker .drp-buttons { border-top-color: var(--L-border); } :root[data-theme-mode="light"] .daterangepicker select.monthselect, :root[data-theme-mode="light"] .daterangepicker select.yearselect { color: var(--L-ink); background-color: var(--L-bg-elevated); } :root[data-theme-mode="light"] .daterangepicker select.hourselect, :root[data-theme-mode="light"] .daterangepicker select.minuteselect, :root[data-theme-mode="light"] .daterangepicker select.secondselect, :root[data-theme-mode="light"] .daterangepicker select.ampmselect { background: var(--L-bg-elevated); border-color: var(--L-border); color: var(--L-ink); } :root[data-theme-mode="light"] .daterangepicker .ranges li:hover, :root[data-theme-mode="light"] .daterangepicker .ranges li.active { background-color: var(--ui-accent-solid); color: #fff; } /* ========== 2) 跟随系统（系统为浅色时） ========== */ /* ── 浅底可读性修补（徽章/计数/语义文字/空态） ── */ /* members 表 Yes/No 徽章：guest / employee / 设置-员工表与 #membersIndexPanel 同款淡染底 + 深字 */ :root[data-theme-mode="light"] .main-panel #membersGuestPanel .badge-pill.badge-success, :root[data-theme-mode="light"] .main-panel #membersEmployeePanel .badge-pill.badge-success, :root[data-theme-mode="light"] .main-panel #employeePanel .badge-pill.badge-success { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="light"] .main-panel #membersGuestPanel .badge-pill.badge-light, :root[data-theme-mode="light"] .main-panel #membersEmployeePanel .badge-pill.badge-light, :root[data-theme-mode="light"] .main-panel #employeePanel .badge-pill.badge-light { background-color: color-mix(in srgb, var(--L-ink) 6%, transparent) !important; color: var(--text-secondary) !important; } /* PC 计数图标：dark 的亮绿/亮黄在浅底对比不足 → 压深（offline 已在上方处理） */ :root[data-theme-mode="light"] .main-panel .pc-status-busy, :root[data-theme-mode="light"] .main-panel .pc-status-member { color: #166534 !important; } :root[data-theme-mode="light"] .main-panel .pc-status-free { color: #8a5a00 !important; } /* 语义文字色：亮蓝/亮黄在浅底太浅 */ :root[data-theme-mode="light"] .main-panel .text-info { color: var(--ui-info) !important; } :root[data-theme-mode="light"] .main-panel .text-warning, :root[data-theme-mode="light"] .main-panel #membersPanel .text-warning td { color: #8a5a00 !important; } /* 聊天抽屉空态提示：#d5e0d7 与白底几乎同色 */ :root[data-theme-mode="light"] .main-panel #chatDrawerPanel .cd-empty, :root[data-theme-mode="light"] .main-panel #chatDrawerPanel .cd-empty span { color: var(--text-secondary) !important; } /* settings-app 头像占位「Add photo」内联写死 #bbb → muted 深墨（!important 压过内联） */ :root[data-theme-mode="light"] .main-panel #appSettingsPanel span[style*="color:#bbb"] { color: var(--text-muted) !important; } /* Yes/No 徽章墨色再压深一档（11px 小字，淡染底上要更实） */ :root[data-theme-mode="light"] .main-panel #membersIndexPanel .badge-pill.badge-success, :root[data-theme-mode="light"] .main-panel #membersGuestPanel .badge-pill.badge-success, :root[data-theme-mode="light"] .main-panel #membersEmployeePanel .badge-pill.badge-success, :root[data-theme-mode="light"] .main-panel #employeePanel .badge-pill.badge-success { color: var(--L-accent-deep) !important; } :root[data-theme-mode="light"] .main-panel #membersIndexPanel .badge-pill.badge-light, :root[data-theme-mode="light"] .main-panel #membersGuestPanel .badge-pill.badge-light, :root[data-theme-mode="light"] .main-panel #membersEmployeePanel .badge-pill.badge-light, :root[data-theme-mode="light"] .main-panel #employeePanel .badge-pill.badge-light { color: var(--text-primary) !important; } /* boot 页 Offline/Enable 徽章：#bootPanel 的 id 级规则写死白字（压过上面的中性徽章基座）→ 同级 id 压回深字 */ :root[data-theme-mode="light"] .main-panel #bootPanel .badge-pc-Offline, :root[data-theme-mode="light"] .main-panel #bootPanel .badge-pc-Enable { background-color: color-mix(in srgb, var(--L-ink) 8%, transparent) !important; color: var(--on-tint-neutral) !important; } /* boot 页计数图标：亮绿在浅底不足；disabled 灰再深一档 */ :root[data-theme-mode="light"] .main-panel #boot_pcs_online { color: #166534 !important; } /* bookings 时间轴当前时段格由 JS 涂 rebeccapurple 深底 → 该格文字必须回白（否则被浅色深墨规则抹成深底深字） */ :root[data-theme-mode="light"] .main-panel .time-td[style*="rebeccapurple"] { color: #fff !important; } /* 语义红文字：dark 的亮红 #e94437 在浅底不足 → 压深 */ :root[data-theme-mode="light"] .main-panel .text-danger { color: #cf222e !important; } /* time-offer 时间轴色条：bg-success 亮绿上白字偏浅 → 压深底色 */ :root[data-theme-mode="light"] .main-panel #timeOfferPanel .bg-success { background-color: #1a7f37 !important; } :root[data-theme-mode="light"] { /* daterangepicker 等挂在的浮层在 .main-panel 之外，变量需在 :root 层也可见 */ --ui-accent-solid: color-mix(in srgb, var(--ui-accent) 78%, #000); } /* 表格出错行的纯红字（--red-500 为 #f00）在浅底只有 3.59 → 压深至与 .text-danger 同色 */ :root[data-theme-mode="light"] .main-panel tr.has_error td div, :root[data-theme-mode="light"] .main-panel .red td, :root[data-theme-mode="light"] .main-panel .red div { color: #cf222e !important; } /* outline-secondary 按钮的默认灰字在浅底 3.98 → 压深。限定在 .card/.modal 内，避免波及深色顶栏里的同类按钮（那里灰字压在深底上本就正确） */ :root[data-theme-mode="light"] .main-panel .card .btn-outline-secondary, :root[data-theme-mode="light"] .main-panel .modal .btn-outline-secondary { color: var(--text-secondary) !important; } /* 部分 modal 的说明性小字内联写死 #a9a9a9（浅灰）→ 浅底上仅 2.35，改 muted 深墨（!important 压过内联） */ :root[data-theme-mode="light"] .main-panel [style*="#a9a9a9"] { color: var(--text-secondary) !important; } :root{ /* Ocean 深色 chrome 调色（深藏蓝，略朝主色偏）— 供 #sidebar / #topNavPanel 转深引用 */ --oc-chrome: #0f2036; --oc-chrome-2: #13273f; --oc-chrome-line: #274a70; --oc-chrome-ink: #e7effb; --oc-chrome-ink-2: rgba(231,239,251,.64); --oc-chrome-ink-3: rgba(231,239,251,.42); --oc-accent: var(--ui-accent); --oc-accent-bright: #7fb0f5; --oc-nav-on-bg: color-mix(in srgb, var(--ui-accent) 24%, transparent); --oc-chrome-elevated: #16304f; --oc-chrome-hover: #1a3a5e; --oc-chrome-2-elevated: #1a3050; --L-accent-deep: #0e3f78; } /* ── Ocean 深色 chrome：主色→蓝 + 侧栏 #sidebar / 顶栏 #topNavPanel 转深藏蓝（.main-panel 内容区仍浅色）── */ :root[data-theme-mode="light"]{ --ui-accent: #1a73e8; } :root[data-theme-mode="light"] #sidebar, :root[data-theme-mode="light"] #sidebar.sidebar{ --ui-surface: var(--oc-chrome); --ui-surface-2: var(--oc-chrome); --bg-card: var(--oc-chrome); --bg-elevated: var(--oc-chrome-elevated); --bg-card-hover: var(--oc-chrome-hover); --ui-border: var(--oc-chrome-line); --border-default: var(--oc-chrome-line); --ui-text: var(--oc-chrome-ink); --text-primary: var(--oc-chrome-ink); --ui-text-base: var(--oc-chrome-ink); --text-secondary: var(--oc-chrome-ink-2); --ui-muted: var(--oc-chrome-ink-2); --text-muted: var(--oc-chrome-ink-3); --ui-green-text: var(--oc-chrome-ink); background: var(--oc-chrome) !important; border-right: 1px solid var(--oc-chrome-line) !important; } :root[data-theme-mode="light"] #sidebar .nav .nav-item .nav-link{ color: var(--oc-chrome-ink-2) !important; } :root[data-theme-mode="light"] #sidebar .nav .nav-item .nav-link .menu-title, :root[data-theme-mode="light"] #sidebar .nav .nav-item .nav-link i{ color: inherit !important; } :root[data-theme-mode="light"] #sidebar .nav .nav-item .nav-link:hover{ background: color-mix(in srgb, var(--ui-accent) 14%, transparent) !important; color: var(--oc-chrome-ink) !important; } :root[data-theme-mode="light"] #sidebar .nav .nav-item.active > .nav-link, :root[data-theme-mode="light"] #sidebar .nav .nav-item .nav-link.active{ background: var(--oc-nav-on-bg) !important; color: var(--oc-accent-bright) !important; box-shadow: inset 3px 0 0 var(--oc-accent-bright) !important; font-weight: 650 !important; } :root[data-theme-mode="light"] #sidebar .nav .nav-item.active > .nav-link i, :root[data-theme-mode="light"] #sidebar .nav .nav-item .nav-link.active i{ color: var(--oc-accent-bright) !important; } :root[data-theme-mode="light"] #sidebar .nav-profile, :root[data-theme-mode="light"] #sidebar .nav-profile .nav-link, :root[data-theme-mode="light"] #sidebar .nav-profile *:not(img){ color: var(--oc-chrome-ink) !important; } :root[data-theme-mode="light"] #sidebar .nav.sub-menu .nav-item .nav-link.active{ color: var(--oc-accent-bright) !important; } :root[data-theme-mode="light"] #sidebar .nav.sub-menu .nav-item .nav-link:hover{ background: color-mix(in srgb, var(--ui-accent) 14%, transparent) !important; } :root[data-theme-mode="light"] #topNavPanel, :root[data-theme-mode="light"] #topNavPanel.navbar{ --ui-surface: var(--oc-chrome-2); --bg-card: var(--oc-chrome-2); --bg-elevated: var(--oc-chrome-2-elevated); --ui-border: var(--oc-chrome-line); --border-default: var(--oc-chrome-line); --ui-text: var(--oc-chrome-ink); --text-primary: var(--oc-chrome-ink); --ui-text-base: var(--oc-chrome-ink); --text-secondary: var(--oc-chrome-ink-2); --ui-muted: var(--oc-chrome-ink-2); --text-muted: var(--oc-chrome-ink-3); --ui-green-text: var(--oc-chrome-ink); background: var(--oc-chrome-2) !important; border-bottom: 1px solid var(--oc-chrome-line) !important; } :root[data-theme-mode="light"] #topNavPanel .navbar-brand-wrapper, :root[data-theme-mode="light"] #topNavPanel .navbar-menu-wrapper{ background: var(--oc-chrome-2) !important; } :root[data-theme-mode="light"] #topNavPanel .brand-logo img{ content: url("../images/logo.png"); } :root[data-theme-mode="light"] #topNavPanel .brand-logo-mini img{ content: url("../images/logo-small.png"); } :root[data-theme-mode="light"] #topNavPanel .shortcuts a i.mdi, :root[data-theme-mode="light"] #topNavPanel .shortcuts a i.fa, :root[data-theme-mode="light"] #topNavPanel .navbar-nav .nav-link i{ color: var(--oc-chrome-ink-2) !important; } :root[data-theme-mode="light"] #topNavPanel .navbar-nav .nav-link, :root[data-theme-mode="light"] #topNavPanel .dropdown > .btn{ color: var(--oc-chrome-ink) !important; } :root[data-theme-mode="light"] #topNavPanel .navbar-nav.navbar-nav-right > a.btn.btn-success, :root[data-theme-mode="light"] #topNavPanel .navbar-nav.navbar-nav-right > a.btn.btn-success:hover{ background-color: var(--oc-accent) !important; border-color: var(--oc-accent) !important; color: #fff !important; } :root[data-theme-mode="light"] #topNavPanel .btn-icon{ color: var(--oc-chrome-ink-2) !important; } :root[data-theme-mode="light"] #topNavPanel .btn-icon:hover{ background: color-mix(in srgb, var(--ui-accent) 16%, transparent) !important; color: var(--oc-chrome-ink) !important; } /* ── 报表 / 消费分析：style-v2.css 里为深色写死的浅灰/白字与深色卡头，落在浅底上不可读 ── */ :root[data-theme-mode="light"] .main-panel #reportsPanel .time_range a.active, :root[data-theme-mode="light"] .main-panel #customerAnalysisPanel .time_range a.active { color: var(--ui-accent) !important; font-weight: 600; } :root[data-theme-mode="light"] .main-panel #reportsPanel #report-offer-sales-items thead a, :root[data-theme-mode="light"] .main-panel #reportsPanel #report-product-sales-items thead a { color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel #customerAnalysisPanel .card-header { background-color: var(--bg-elevated) !important; } :root[data-theme-mode="light"] .main-panel #customerAnalysisPanel .card-header h4 { color: var(--text-primary) !important; } /* ── PC 布局页（layout.htm / #layoutPanel）整页保持 v2 原样 ── 该页由 layout.css 按深色底设计（PC 盒子 / popover / 侧面板都写死深色），灌浅色 token 只会半明半暗，故在 #layoutPanel 上把 .main-panel 下发的浅色 token 逐条还原成 style-v2.css :root 的深色默认值；少数写死浅色字面量、又带 !important 的元素级规则在下面单独还原。主色 --ui-accent 不还原 → 仍跟 Ocean 走蓝调。右击菜单整体保持深色（配色跟随皮肤 chrome）。 */ :root[data-theme-mode="light"] .main-panel #layoutPanel { color-scheme: dark; --bg-darkest: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-dark: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-bg: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface-2: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card: color-mix(in srgb, #161b22, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface: color-mix(in srgb, #161b22, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card-hover: color-mix(in srgb, #1c2128, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-elevated: color-mix(in srgb, #21262d, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --border-default: color-mix(in srgb, #30363d, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-border: color-mix(in srgb, #30363d, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-text-base: #e6edf3; --text-primary: var(--ui-text-base); --ui-text: var(--ui-text-base); --text-secondary: #b1bac4; --ui-muted: #b1bac4; --text-muted: #8b949e; --ui-green-text: var(--ui-on-accent); --info: #02abfe; --ui-info: color-mix(in srgb, #58a6ff, var(--ui-accent) var(--ui-accent-harmony)); --ui-info-bright: color-mix(in srgb, #02abfe, var(--ui-accent) var(--ui-accent-harmony)); --white-16: rgba(255, 255, 255, 0.16); --white-10: rgba(255, 255, 255, 0.10); --gray-900-a14: rgba(var(--black-rgb), 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); --shadow-35: rgba(0, 0, 0, 0.35); /* 下面 4 个是 Ocean 专有 token（v2 里没有）：指回主色/正文色，供仍会命中的元素级规则消费 */ --ui-accent-solid: var(--ui-accent); --on-tint-success: var(--ui-accent); --on-tint-neutral: var(--text-primary); --L-btn-neutral: transparent; --L-btn-neutral-hover: var(--ui-border); --L-btn-neutral-ink: var(--text-primary); } /* 房间标签：Ocean 的 .nav-tabs 规则带 !important 会压过 layout.css → 按 layout.css 原值还原 */ :root[data-theme-mode="light"] .main-panel #layoutPanel #pc-layout-tabs { border-bottom: 0 !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel #pc-layout-tabs .nav-link.active { background: #238636 !important; border-color: #238636 !important; color: #fff !important; border-radius: 8px !important; font-weight: 400 !important; } /* 文字工具类：Ocean 把它们压成 #000/深墨，这里回到深色主题取值 */ :root[data-theme-mode="light"] .main-panel #layoutPanel .text-muted { color: var(--text-muted) !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .text-light { color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .text-danger { color: var(--ui-danger) !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .text-info { color: var(--ui-info) !important; } /* 按钮：Ocean 把语义色压深、中性按钮改浅底 → 还原成 v2 深色态 */ :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-info { --v2-info-color: color-mix(in srgb, var(--ui-info) 26%, transparent); --ui-border: var(--border-default); --ui-text: var(--ui-text-base); } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-danger { --ui-danger-bg: color-mix(in srgb, var(--ui-danger) 26%, transparent); --ui-border: var(--border-default); --ui-text: var(--ui-text-base); } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-warning { --v2-warning-color: color-mix(in srgb, var(--ui-warning) 24%, transparent); --ui-gold: var(--ui-warning); --ui-text: var(--ui-text-base); } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-default, :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-secondary, :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-light { background-color: transparent !important; border-color: var(--ui-border) !important; color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-default:hover, :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-default:focus, :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-default:active, :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-secondary:hover, :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-light:hover { background-color: var(--ui-border) !important; border-color: var(--ui-border) !important; color: var(--text-primary) !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-info:hover { background-color: var(--v2-info-hover-color) !important; border-color: var(--v2-info-hover-color) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-success:hover { background-color: var(--v2-success-hover-color) !important; border-color: var(--v2-success-hover-color) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-danger:hover { background-color: var(--v2-danger-hover-color) !important; border-color: var(--v2-danger-hover-color) !important; color: #fff !important; } :root[data-theme-mode="light"] .main-panel #layoutPanel .btn-warning:hover { background-color: var(--v2-warning-hover-color) !important; border-color: var(--v2-warning-hover-color) !important; color: #fff !important; } @media (prefers-color-scheme: light) { :root[data-theme-mode="system"] .main-panel { color-scheme: light; /* .main-panel 外层 .content-wrapper 保持 v2 深色，故给面板自身铺浅底，避免透出深色背板 */ background-color: var(--bg-darkest); /* 背景色阶：浅绿 slate，保留 v2 的 tint color-mix */ --bg-darkest: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-dark: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-bg: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface-2: color-mix(in srgb, var(--L-bg-app), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card: color-mix(in srgb, var(--L-bg-card), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface: color-mix(in srgb, var(--L-bg-card), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card-hover: color-mix(in srgb, var(--L-bg-hover), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-elevated: color-mix(in srgb, var(--L-bg-elevated), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --border-default: color-mix(in srgb, var(--L-border), var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-border: color-mix(in srgb, var(--L-border), var(--ui-bg-tint) var(--ui-bg-tint-strength)); /* 文字：深绿墨。--ui-text-base 仍可被字体色调整器 inline style 覆盖 */ --ui-text-base: var(--L-ink); --text-primary: var(--ui-text-base); --ui-text: var(--ui-text-base); --text-secondary: var(--L-ink-2); --ui-muted: var(--L-ink-2); --text-muted: var(--L-ink-3); /* 语义蓝在浅底作文字太浅 → 压深（tint/描边随之更实，可读性更好） */ --info: #0969da; --ui-info: #0969da; --ui-info-bright: #0550ae; /* 白 alpha 助手翻深绿 alpha */ --white-16: color-mix(in srgb, var(--L-ink) 16%, transparent); --white-10: color-mix(in srgb, var(--L-ink) 10%, transparent); /* 条纹表格奇数行：深色主题用 14% 纯黑叠加，浅底会发浑浊灰 → 降为 5% 深绿墨叠加（仅 .table-striped odd 行引用此变量） */ --gray-900-a14: color-mix(in srgb, var(--L-ink) 5%, transparent); /* 阴影调浅 */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--L-ink) 8%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--L-ink) 12%, transparent); --shadow-lg: 0 18px 50px color-mix(in srgb, var(--L-ink) 18%, transparent); --shadow-35: color-mix(in srgb, var(--L-ink) 18%, transparent); /* 压在半透明染色上的可读墨（success 供 days 芯片、neutral 供徽章基座兜底；实心化后 info/danger/warning 已不再需要） */ --on-tint-success: color-mix(in srgb, var(--ui-accent) 62%, var(--L-ink)); --on-tint-neutral: var(--text-primary); --ui-accent-solid: color-mix(in srgb, var(--ui-accent) 78%, #000); } /* ── 对比硬化：覆盖 theme-dark.css 里为深色写死的浅灰/白/深渐变 ── */ /* body 正文字面量 #b1b1b5（浅灰）在浅底几乎看不清 → 深墨 */ :root[data-theme-mode="system"] .main-panel body { color: var(--text-primary); } /* 标题在浅底也要深字 */ :root[data-theme-mode="system"] .main-panel h1, :root[data-theme-mode="system"] .main-panel h2, :root[data-theme-mode="system"] .main-panel h3, :root[data-theme-mode="system"] .main-panel h4, :root[data-theme-mode="system"] .main-panel h5, :root[data-theme-mode="system"] .main-panel h6 { color: var(--text-primary); } /* content-wrapper 背景：沿用 Blue(v2) 的「三层主色径向光晕 + 一层竖向压暗」结构，底色改深藏蓝（--oc-chrome，与侧栏/顶栏同一套 chrome 色）→ 白卡片浮在深蓝背板上，与 Ocean 的深 chrome 呼应。光晕用 --oc-accent / --oc-accent-bright 派生（比例调高，让蓝调渐变明显可见），不写死字面量 */ :root[data-theme-mode="system"] .main-panel .content-wrapper { background-color: var(--oc-chrome) !important; background-image: radial-gradient(900px 620px at 18% 12%, color-mix(in srgb, var(--oc-accent) 52%, transparent) 0%, transparent 62%), radial-gradient(1100px 760px at 84% 18%, color-mix(in srgb, var(--oc-accent-bright) 26%, transparent) 0%, transparent 64%), radial-gradient(1200px 900px at 32% 110%, color-mix(in srgb, var(--oc-accent) 34%, transparent) 0%, transparent 66%), linear-gradient(180deg, rgba(3, 10, 20, 0.24) 0%, rgba(3, 10, 20, 0.02) 38%, rgba(3, 10, 20, 0.34) 100%) !important; } :root[data-theme-mode="system"] .main-panel .brand-logo img { content: url("../images/logo-dark.png"); } :root[data-theme-mode="system"] .main-panel .navbar .shortcuts a i.mdi, :root[data-theme-mode="system"] .main-panel .navbar .shortcuts a i.fa { color: #4f6356 !important; } :root[data-theme-mode="system"] .main-panel .navbar .shortcuts a img[src*="icon-icafecloud"] { content: url("../images/icon-icafecloud-dark.png"); } :root[data-theme-mode="system"] .main-panel .navbar .shortcuts a img[src*="icon-ccbootcloud"] { content: url("../images/icon-ccbootcloud-dark.png"); } /* 右击菜单（含 layout PC 菜单）保持深色，但跟随当前皮肤的深色 chrome：菜单挂在上， .main-panel 的浅色 token 不下发，故直接在 context-menu-root 上按 --oc-chrome-* 重声明它/子菜单/ 条目消费的 token（与 #sidebar / #topNavPanel 同一族色），换皮肤时自动跟着变 */ :root[data-theme-mode="system"] .context-menu-list.context-menu-root { color-scheme: dark; /* 底/边框：用顶栏那一档 chrome-2，比侧栏略亮，浮层压在浅色页面上更分明 */ --bg-card: var(--oc-chrome-2); --ui-surface: var(--oc-chrome-2); --bg-elevated: var(--oc-chrome-2-elevated); --bg-card-hover: var(--oc-chrome-hover); --ui-border: var(--oc-chrome-line); --border-default: var(--oc-chrome-line); /* 文字：chrome 浅墨三档 */ --ui-text-base: var(--oc-chrome-ink); --ui-text: var(--oc-chrome-ink); --text-primary: var(--oc-chrome-ink); --text-secondary: var(--oc-chrome-ink-2); --ui-muted: var(--oc-chrome-ink-2); --text-muted: var(--oc-chrome-ink-3); /* hover：深底上主色压太暗 → 用亮一档的 --oc-accent-bright，底色用侧栏选中同款 */ --ui-accent: var(--oc-accent-bright); --ui-green-bg: var(--oc-nav-on-bg); --accent-primary: var(--oc-accent-bright); --accent-primary-light: var(--oc-nav-on-bg); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); } /* 设置搜索框 #ss-search-input：浅底深字 */ :root[data-theme-mode="system"] .main-panel .ss-search-box { background: var(--bg-card); color: var(--text-primary); } :root[data-theme-mode="system"] .main-panel .ss-result-item:hover, :root[data-theme-mode="system"] .main-panel .ss-result-item.ss-item-active { background: var(--ui-green-bg); color: var(--ui-accent); } :root[data-theme-mode="system"] .main-panel .ss-badge { background: color-mix(in srgb, var(--L-ink) 6%, transparent); } :root[data-theme-mode="system"] .main-panel .ss-search-wrap .ss-search-icon-btn { color: #4f6356; } :root[data-theme-mode="system"] .main-panel .ss-search-wrap .ss-search-icon-btn:hover, :root[data-theme-mode="system"] .main-panel .ss-search-wrap .ss-search-icon-btn.ss-active { color: var(--ui-accent); background: var(--ui-green-bg); } :root[data-theme-mode="system"] .main-panel .nav-tabs .nav-link.active, :root[data-theme-mode="system"] .main-panel .nav-tabs .nav-item.show .nav-link { background: var(--ui-accent-solid) !important; border-color: var(--L-accent-deep) !important; color: #fff !important; border-radius: var(--radius-sm); font-weight: 600; } /* nav-tabs 在浅底无边框显得漂浮 → 给 tab 条加一道底边线做分隔 */ :root[data-theme-mode="system"] .main-panel .nav-tabs { border-bottom: 1px solid var(--ui-border) !important; } :root[data-theme-mode="system"] .main-panel .dropdown .dropdown-menu { background-color: var(--bg-card) !important; border-color: var(--ui-border) !important; color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel .dropdown .dropdown-menu .dropdown-item { color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel .dropdown .dropdown-menu .dropdown-item:hover, :root[data-theme-mode="system"] .main-panel .dropdown .dropdown-menu .dropdown-item:focus { background-color: var(--ui-green-bg) !important; color: var(--ui-text) !important; } /* PC/Boot 计数图标：offline/disabled 原为近白，浅底不可见 → 改深色（保留状态层次） */ :root[data-theme-mode="system"] .main-panel #bootPanel #boot_pcs_offline, :root[data-theme-mode="system"] .main-panel #pcs_off.pc-status-offline { color: var(--text-secondary) !important; } :root[data-theme-mode="system"] .main-panel #bootPanel #boot_pcs_disabled { color: var(--text-secondary) !important; } :root[data-theme-mode="system"] .main-panel .table-hover tbody tr:hover, :root[data-theme-mode="system"] .main-panel .table-hover tbody tr:hover > td, :root[data-theme-mode="system"] .main-panel .table-hover tbody tr:hover > th { background-color: var(--ui-green-bg) !important; color: var(--ui-text) !important; } /* input-group 里的 .text-white 图标坐在浅色 elevated 底上不可见 → 深字 */ :root[data-theme-mode="system"] .container-scroller .main-panel .input-group-text .text-white, :root[data-theme-mode="system"] .container-scroller .main-panel .input-group-text i.text-white { color: var(--text-secondary) !important; } /* posTopup 面板内的 .text-white 图标（input-group + 卡片内独立图标）坐在浅底不可见 → 深字 */ :root[data-theme-mode="system"] .main-panel #posTopupPanel .text-white, :root[data-theme-mode="system"] .main-panel #posRefundPanel .text-white { color: var(--text-secondary) !important; } /* 用户指定：以下选择器在浅色下统一为黑色 */ :root[data-theme-mode="system"] .main-panel { --ui-green-text: #000000; } :root[data-theme-mode="system"] .main-panel h1, :root[data-theme-mode="system"] .main-panel h2, :root[data-theme-mode="system"] .main-panel h3, :root[data-theme-mode="system"] .main-panel h4, :root[data-theme-mode="system"] .main-panel h5, :root[data-theme-mode="system"] .main-panel h6, :root[data-theme-mode="system"] .main-panel .h1, :root[data-theme-mode="system"] .main-panel .h2, :root[data-theme-mode="system"] .main-panel .h3, :root[data-theme-mode="system"] .main-panel .h4, :root[data-theme-mode="system"] .main-panel .h5, :root[data-theme-mode="system"] .main-panel .h6, :root[data-theme-mode="system"] .main-panel .card .card-title, :root[data-theme-mode="system"] .main-panel .card-title, :root[data-theme-mode="system"] .main-panel .nav-tabs.tab-transparent .nav-item .nav-link, :root[data-theme-mode="system"] .main-panel .text-muted, :root[data-theme-mode="system"] .main-panel .text-light { color: #000000 !important; } :root[data-theme-mode="system"] .main-panel .nav-tabs .nav-link { color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success { color: var(--on-tint-success) !important; } :root[data-theme-mode="system"] .main-panel #shopPanel .order-info-pay-type-lg { color: #0d6e6e !important; border-color: #0d6e6e !important; box-shadow: 4px 7px rgba(13, 110, 110, 0.5) !important; } /* 用户指定：三色按钮 hover → 深色背景 + 浅色字 */ :root[data-theme-mode="system"] .main-panel .btn-info:hover { background-color: color-mix(in srgb, var(--ui-info) 58%, #000) !important; border-color: color-mix(in srgb, var(--ui-info) 58%, #000) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel .btn-success:hover { background-color: color-mix(in srgb, var(--ui-accent) 60%, #000) !important; border-color: color-mix(in srgb, var(--ui-accent) 60%, #000) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel .btn-danger:hover { background-color: color-mix(in srgb, var(--ui-danger) 60%, #000) !important; border-color: color-mix(in srgb, var(--ui-danger) 60%, #000) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel .btn-warning:hover { background-color: color-mix(in srgb, var(--ui-warning) 55%, #000) !important; border-color: color-mix(in srgb, var(--ui-warning) 55%, #000) !important; color: #fff !important; } /* 普通/默认按钮（无语义色）：浅色页用浅底 + 深字 + 可见描边，hover 压深一档 */ :root[data-theme-mode="system"] .main-panel .btn-default, :root[data-theme-mode="system"] .main-panel .btn-secondary, :root[data-theme-mode="system"] .main-panel .btn-light { background-color: var(--L-btn-neutral) !important; border-color: var(--ui-border) !important; color: var(--L-btn-neutral-ink) !important; } :root[data-theme-mode="system"] .main-panel .btn-default:hover, :root[data-theme-mode="system"] .main-panel .btn-default:focus, :root[data-theme-mode="system"] .main-panel .btn-default:active, :root[data-theme-mode="system"] .main-panel .btn-secondary:hover, :root[data-theme-mode="system"] .main-panel .btn-secondary:focus, :root[data-theme-mode="system"] .main-panel .btn-secondary:active, :root[data-theme-mode="system"] .main-panel .btn-light:hover, :root[data-theme-mode="system"] .main-panel .btn-light:focus, :root[data-theme-mode="system"] .main-panel .btn-light:active { background-color: var(--L-btn-neutral-hover) !important; border-color: var(--ui-border) !important; color: var(--L-btn-neutral-ink) !important; } /* 用户指定：analysis 页容器内字体深色 */ :root[data-theme-mode="system"] .main-panel #analysis-page-container { color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel #analysis-page-container .analysis-menus p a { color: var(--text-secondary) !important; } :root[data-theme-mode="system"] .main-panel #analysis-page-container .analysis-menus p.active a, :root[data-theme-mode="system"] .main-panel #analysis-page-container .analysis-menus p a:hover { color: var(--ui-accent) !important; } /* 用户指定：timePanel 里的 .text-light / .text-muted 在浅底深字 */ :root[data-theme-mode="system"] .main-panel #timePanel .text-light, :root[data-theme-mode="system"] .main-panel #timePanel .text-muted { color: var(--text-primary) !important; } /* ── 语义按钮：浅色下回到实心色，最大化区分度。改写为覆盖组件消费的语义变量（而非硬编码最终属性），让 bg/border/text 顺着 style-v2.css 里 .btn-* 已有的 var() 链走；success 的底色在 theme-dark.css 里是字面量 #23af47（无对应 token），只能显式 background-color。hover 见 L339-342 加深一档 ── */ :root[data-theme-mode="system"] .main-panel .btn-success, :root[data-theme-mode="system"] .main-panel .btn-primary { background-color: var(--ui-accent-solid); border-color: var(--ui-accent-solid); color: #fff; } :root[data-theme-mode="system"] .main-panel .btn-info { --v2-info-color: var(--ui-info); --ui-border: var(--ui-info); --ui-text: #fff; } :root[data-theme-mode="system"] .main-panel .btn-danger { --ui-danger-bg: #cf222e; --ui-border: #cf222e; --ui-text: #fff; } :root[data-theme-mode="system"] .main-panel .btn-warning { --v2-warning-color: #e0a100; --ui-gold: #e0a100; --ui-text: #17231b; } /* page-header-tab 里的按钮底色被强制为浅 elevated，文字须深；显式压过上面语义按钮把 --ui-text 设成 #fff 的元素级覆盖 */ :root[data-theme-mode="system"] .main-panel .page-header-tab .btn { color: var(--text-primary) !important; } /* Ocean: page-header-tab 语义按钮 hover 底色转深 → 图标/文字改浅色（覆盖上一条把 .btn 压深墨的规则，specificity 更高） */ :root[data-theme-mode="system"] .main-panel .page-header-tab .btn-info:hover, :root[data-theme-mode="system"] .main-panel .page-header-tab .btn-success:hover, :root[data-theme-mode="system"] .main-panel .page-header-tab .btn-danger:hover, :root[data-theme-mode="system"] .main-panel .page-header-tab .btn-warning:hover { color: #fff !important; } /* POS 主色按钮静息态：base #posPanel .btn.btn-success 用 var(--ui-green-bg) 淡绿 + 深字，浅底显弱； #posPanel id 压过 .main-panel .btn-success 的实心绿 → 这里补足实心绿深底 + 浅字（.btn-success 全局态已由 .main-panel .btn-success 实心化） */ :root[data-theme-mode="system"] .main-panel #posPanel .btn.btn-success, :root[data-theme-mode="system"] .main-panel #posPanel .btn.btn-success:focus { background-color: var(--ui-accent-solid) !important; color: #fff !important; } /* POS/Shop 主色按钮 hover：底色变实心绿，深字读不清 → 浅字（仅浅色，深色下 --ui-text 本就是浅色） */ :root[data-theme-mode="system"] .main-panel #posPanel .btn.btn-success:hover, :root[data-theme-mode="system"] .main-panel #shopPanel .btn.btn-success:hover, :root[data-theme-mode="system"] .main-panel #shopPanel .btn.btn-warning:hover, :root[data-theme-mode="system"] .main-panel #shopPanel .btn.btn-primary:hover { color: #fff !important; } /* POS/Shop 禁用的 danger 按钮：浅色下改深底浅字（默认走 --bg-elevated 浅底会跟卡片糊在一起，不易看出禁用态）。底走深墨 --text-primary、字走浅卡片色 --bg-card，配合基础 opacity:0.6 呈灰化禁用态 */ :root[data-theme-mode="system"] .main-panel #posPanel .btn.btn-danger:disabled, :root[data-theme-mode="system"] .main-panel #posPanel .btn.btn-danger.disabled, :root[data-theme-mode="system"] .main-panel #shopPanel .btn.btn-danger:disabled, :root[data-theme-mode="system"] .main-panel #shopPanel .btn.btn-danger.disabled, :root[data-theme-mode="system"] .main-panel #posPanel .btn.btn-danger:disabled:hover, :root[data-theme-mode="system"] .main-panel #posPanel .btn.btn-danger.disabled:hover, :root[data-theme-mode="system"] .main-panel #shopPanel .btn.btn-danger:disabled:hover, :root[data-theme-mode="system"] .main-panel #shopPanel .btn.btn-danger.disabled:hover { background-color: var(--text-primary) !important; border-color: var(--text-primary) !important; color: var(--bg-card) !important; } /* 顶栏 days 芯片是状态指示、非 action → 保持淡染色（此规则 specificity 更高，压过上面的实心 btn-success），文字仍走上方深墨 */ :root[data-theme-mode="system"] .main-panel .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success { background-color: color-mix(in srgb, var(--ui-accent) 22%, transparent); } /* ── 语义徽章：浅色下实心语义色（success/primary 绿、danger 红、warning 琥珀深字、info 蓝）；未知变体留中性底 ── */ :root[data-theme-mode="system"] .container-scroller .main-panel span.badge, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge { background-color: color-mix(in srgb, var(--L-ink) 8%, transparent) !important; color: var(--on-tint-neutral) !important; } :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-success, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-success, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-primary, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-primary { background-color: var(--ui-accent-solid) !important; color: #fff !important; } :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-danger, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-danger { background-color: #cf222e !important; color: #fff !important; } :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-warning, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-warning { background-color: #e0a100 !important; color: #17231b !important; } :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-info, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-info, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.bg-info, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.bg-info { background-color: var(--ui-info) !important; color: #fff !important; } /* members 表 Login/Enable 列的 Yes/No 状态徽章：浅色底 + 深字（Yes 淡绿、No 淡中性），不用实心色 */ :root[data-theme-mode="system"] .main-panel #membersIndexPanel .badge-pill.badge-success { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="system"] .main-panel #membersIndexPanel .badge-pill.badge-light { background-color: color-mix(in srgb, var(--L-ink) 6%, transparent) !important; color: var(--text-secondary) !important; } :root[data-theme-mode="system"] .main-panel #shopPanel span.badge[class*="badge-order-"], :root[data-theme-mode="system"] .main-panel #posPanel span.badge[class*="badge-order-"], :root[data-theme-mode="system"] .main-panel #memberOrderPanel span.badge[class*="badge-order-"] { background-color: color-mix(in srgb, var(--L-ink) 8%, transparent) !important; color: var(--on-tint-neutral) !important; } :root[data-theme-mode="system"] .main-panel #shopPanel span.badge.badge-order-paid, :root[data-theme-mode="system"] .main-panel #posPanel span.badge.badge-order-paid, :root[data-theme-mode="system"] .main-panel #memberOrderPanel span.badge.badge-order-paid, :root[data-theme-mode="system"] .main-panel #shopPanel #orderlist-items .table-row .order-status-2 span, :root[data-theme-mode="system"] .main-panel #posPanel .order-status-2 span { background-color: var(--ui-accent-solid) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel #shopPanel span.badge.badge-order-cancelled, :root[data-theme-mode="system"] .main-panel #posPanel span.badge.badge-order-cancelled, :root[data-theme-mode="system"] .main-panel #memberOrderPanel span.badge.badge-order-cancelled { background-color: #cf222e !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel #shopPanel span.badge.badge-order-in-process, :root[data-theme-mode="system"] .main-panel #posPanel span.badge.badge-order-in-process, :root[data-theme-mode="system"] .main-panel #memberOrderPanel span.badge.badge-order-in-process { background-color: var(--ui-info) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel #shopPanel span.badge.badge-order-partial-refund, :root[data-theme-mode="system"] .main-panel #posPanel span.badge.badge-order-partial-refund, :root[data-theme-mode="system"] .main-panel #shopPanel #orderlist-items .table-row .order-status-1 span, :root[data-theme-mode="system"] .main-panel #posPanel .order-status-1 span { background-color: #e0a100 !important; color: #17231b !important; } :root[data-theme-mode="system"] .main-panel .badge-pc-Disable, :root[data-theme-mode="system"] .main-panel .badge-pc-Maintenance { background-color: color-mix(in srgb, var(--L-ink) 10%, transparent) !important; color: var(--text-secondary) !important; } /* boot PC 状态徽章：浅色下用淡语义染底 + 深字（否则被上面中性 badge 基座抹平成灰底；这里 specificity 更高压回语义色）。 Offline/Enable/Disable/Maintenance 保持中性；其余带色状态深字，符合「浅底徽章用深字」 */ :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-pc-Online, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-pc-Write, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-pc-Online, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-pc-Write { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-pc-Standby, :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-pc-Paused, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-pc-Standby, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-pc-Paused { background-color: color-mix(in srgb, var(--ui-warning) 20%, transparent) !important; color: #17231b !important; } :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-pc-Disconnected, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-pc-Disconnected { background-color: color-mix(in srgb, var(--ui-info) 18%, transparent) !important; color: var(--ui-info-bright) !important; } :root[data-theme-mode="system"] .container-scroller .main-panel label.badge.badge-pc-Booking, :root[data-theme-mode="system"] .container-scroller .main-panel span.badge.badge-pc-Booking { background-color: color-mix(in srgb, mediumpurple 22%, transparent) !important; color: #5b3d9e !important; } /* PC/Console 布局视图徽章：#pcLayoutPanel/#consolesLayoutPanel 有 id 级 base 规则（默认 color:--ui-on-accent=白），压过上面 .container-scroller 徽章规则 → 浅底上白字不可见。以同等 id specificity 重映射为浅染底 + 深字（同 container-scroller） */ :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Online, :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Write, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Online, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Write { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Standby, :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Paused, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Standby, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Paused { background-color: color-mix(in srgb, var(--ui-warning) 20%, transparent) !important; color: #17231b !important; } :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Disconnected, :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Disconected, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Disconnected, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Disconected { background-color: color-mix(in srgb, var(--ui-info) 18%, transparent) !important; color: var(--ui-info-bright) !important; } :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Booking, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Booking { background-color: color-mix(in srgb, mediumpurple 22%, transparent) !important; color: #5b3d9e !important; } :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Maintenance, :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Maintence, :root[data-theme-mode="system"] .main-panel #pcLayoutPanel .badge.badge-pc-Disable, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Maintenance, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Maintence, :root[data-theme-mode="system"] .main-panel #consolesLayoutPanel .badge.badge-pc-Disable { background-color: color-mix(in srgb, var(--L-ink) 10%, transparent) !important; color: var(--text-secondary) !important; } :root[data-theme-mode="system"] .main-panel tr[data-pc_status_text=Online] td, :root[data-theme-mode="system"] .main-panel tr[data-pc_status_text=Write] td, :root[data-theme-mode="system"] .main-panel tr[data-pc_status_text=Enable] td, :root[data-theme-mode="system"] .main-panel tr[data-pc_status_text=Disconnected] td { color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel .sidebar .nav.sub-menu .nav-item .nav-link.active { color: var(--ui-accent) !important; } :root[data-theme-mode="system"] .main-panel .sidebar .nav.sub-menu .nav-item .nav-link:hover { background: color-mix(in srgb, var(--L-ink) 5%, transparent) !important; } :root[data-theme-mode="system"] .main-panel .table td, :root[data-theme-mode="system"] .main-panel .jsgrid .jsgrid-table td { color: color-mix(in srgb, var(--L-ink) 85%, transparent); } /* daterangepicker 弹层（挂上，同上）：系统浅色时翻浅 */ :root[data-theme-mode="system"] .daterangepicker { --text-primary: var(--L-ink); --ui-text: var(--L-ink); --text-muted: var(--L-ink-3); --ui-border: var(--L-border); --bg-card: var(--L-bg-card); --bg-elevated: var(--L-bg-elevated); background-color: var(--L-bg-card) !important; border-color: var(--L-border); color: var(--L-ink); } :root[data-theme-mode="system"] .daterangepicker:after { border-bottom-color: var(--L-bg-card); } :root[data-theme-mode="system"] .daterangepicker:before { border-bottom-color: var(--L-border); } :root[data-theme-mode="system"] .daterangepicker.drop-up:after { border-top-color: var(--L-bg-card); } :root[data-theme-mode="system"] .daterangepicker.drop-up:before { border-top-color: var(--L-border); } :root[data-theme-mode="system"] .daterangepicker .drp-buttons { border-top-color: var(--L-border); } :root[data-theme-mode="system"] .daterangepicker select.monthselect, :root[data-theme-mode="system"] .daterangepicker select.yearselect { color: var(--L-ink); background-color: var(--L-bg-elevated); } :root[data-theme-mode="system"] .daterangepicker select.hourselect, :root[data-theme-mode="system"] .daterangepicker select.minuteselect, :root[data-theme-mode="system"] .daterangepicker select.secondselect, :root[data-theme-mode="system"] .daterangepicker select.ampmselect { background: var(--L-bg-elevated); border-color: var(--L-border); color: var(--L-ink); } :root[data-theme-mode="system"] .daterangepicker .ranges li:hover, :root[data-theme-mode="system"] .daterangepicker .ranges li.active { background-color: var(--ui-accent-solid); color: #fff; } /* ── 浅底可读性修补（徽章/计数/语义文字/空态） ── */ /* members 表 Yes/No 徽章：guest / employee / 设置-员工表与 #membersIndexPanel 同款淡染底 + 深字 */ :root[data-theme-mode="system"] .main-panel #membersGuestPanel .badge-pill.badge-success, :root[data-theme-mode="system"] .main-panel #membersEmployeePanel .badge-pill.badge-success, :root[data-theme-mode="system"] .main-panel #employeePanel .badge-pill.badge-success { background-color: var(--ui-green-bg) !important; color: var(--on-tint-success) !important; } :root[data-theme-mode="system"] .main-panel #membersGuestPanel .badge-pill.badge-light, :root[data-theme-mode="system"] .main-panel #membersEmployeePanel .badge-pill.badge-light, :root[data-theme-mode="system"] .main-panel #employeePanel .badge-pill.badge-light { background-color: color-mix(in srgb, var(--L-ink) 6%, transparent) !important; color: var(--text-secondary) !important; } /* PC 计数图标：dark 的亮绿/亮黄在浅底对比不足 → 压深（offline 已在上方处理） */ :root[data-theme-mode="system"] .main-panel .pc-status-busy, :root[data-theme-mode="system"] .main-panel .pc-status-member { color: #166534 !important; } :root[data-theme-mode="system"] .main-panel .pc-status-free { color: #8a5a00 !important; } /* 语义文字色：亮蓝/亮黄在浅底太浅 */ :root[data-theme-mode="system"] .main-panel .text-info { color: var(--ui-info) !important; } :root[data-theme-mode="system"] .main-panel .text-warning, :root[data-theme-mode="system"] .main-panel #membersPanel .text-warning td { color: #8a5a00 !important; } /* 聊天抽屉空态提示：#d5e0d7 与白底几乎同色 */ :root[data-theme-mode="system"] .main-panel #chatDrawerPanel .cd-empty, :root[data-theme-mode="system"] .main-panel #chatDrawerPanel .cd-empty span { color: var(--text-secondary) !important; } /* settings-app 头像占位「Add photo」内联写死 #bbb → muted 深墨（!important 压过内联） */ :root[data-theme-mode="system"] .main-panel #appSettingsPanel span[style*="color:#bbb"] { color: var(--text-muted) !important; } /* Yes/No 徽章墨色再压深一档（11px 小字，淡染底上要更实） */ :root[data-theme-mode="system"] .main-panel #membersIndexPanel .badge-pill.badge-success, :root[data-theme-mode="system"] .main-panel #membersGuestPanel .badge-pill.badge-success, :root[data-theme-mode="system"] .main-panel #membersEmployeePanel .badge-pill.badge-success, :root[data-theme-mode="system"] .main-panel #employeePanel .badge-pill.badge-success { color: var(--L-accent-deep) !important; } :root[data-theme-mode="system"] .main-panel #membersIndexPanel .badge-pill.badge-light, :root[data-theme-mode="system"] .main-panel #membersGuestPanel .badge-pill.badge-light, :root[data-theme-mode="system"] .main-panel #membersEmployeePanel .badge-pill.badge-light, :root[data-theme-mode="system"] .main-panel #employeePanel .badge-pill.badge-light { color: var(--text-primary) !important; } /* boot 页 Offline/Enable 徽章：#bootPanel 的 id 级规则写死白字（压过上面的中性徽章基座）→ 同级 id 压回深字 */ :root[data-theme-mode="system"] .main-panel #bootPanel .badge-pc-Offline, :root[data-theme-mode="system"] .main-panel #bootPanel .badge-pc-Enable { background-color: color-mix(in srgb, var(--L-ink) 8%, transparent) !important; color: var(--on-tint-neutral) !important; } /* boot 页计数图标：亮绿在浅底不足；disabled 灰再深一档 */ :root[data-theme-mode="system"] .main-panel #boot_pcs_online { color: #166534 !important; } /* bookings 时间轴当前时段格由 JS 涂 rebeccapurple 深底 → 该格文字必须回白（否则被浅色深墨规则抹成深底深字） */ :root[data-theme-mode="system"] .main-panel .time-td[style*="rebeccapurple"] { color: #fff !important; } /* 语义红文字：dark 的亮红 #e94437 在浅底不足 → 压深 */ :root[data-theme-mode="system"] .main-panel .text-danger { color: #cf222e !important; } /* time-offer 时间轴色条：bg-success 亮绿上白字偏浅 → 压深底色 */ :root[data-theme-mode="system"] .main-panel #timeOfferPanel .bg-success { background-color: #1a7f37 !important; } :root[data-theme-mode="system"] { --ui-accent-solid: color-mix(in srgb, var(--ui-accent) 78%, #000); } /* 表格出错行的纯红字（--red-500 为 #f00）在浅底只有 3.59 → 压深至与 .text-danger 同色 */ :root[data-theme-mode="system"] .main-panel tr.has_error td div, :root[data-theme-mode="system"] .main-panel .red td, :root[data-theme-mode="system"] .main-panel .red div { color: #cf222e !important; } /* outline-secondary 按钮的默认灰字在浅底 3.98 → 压深。限定在 .card/.modal 内，避免波及深色顶栏里的同类按钮（那里灰字压在深底上本就正确） */ :root[data-theme-mode="system"] .main-panel .card .btn-outline-secondary, :root[data-theme-mode="system"] .main-panel .modal .btn-outline-secondary { color: var(--text-secondary) !important; } /* 部分 modal 的说明性小字内联写死 #a9a9a9（浅灰）→ 浅底上仅 2.35，改 muted 深墨（!important 压过内联） */ :root[data-theme-mode="system"] .main-panel [style*="#a9a9a9"] { color: var(--text-secondary) !important; } /* ── Ocean 深色 chrome：主色→蓝 + 侧栏 #sidebar / 顶栏 #topNavPanel 转深藏蓝（.main-panel 内容区仍浅色）── */ :root[data-theme-mode="system"]{ --ui-accent: #1a73e8; } :root[data-theme-mode="system"] #sidebar, :root[data-theme-mode="system"] #sidebar.sidebar{ --ui-surface: var(--oc-chrome); --ui-surface-2: var(--oc-chrome); --bg-card: var(--oc-chrome); --bg-elevated: var(--oc-chrome-elevated); --bg-card-hover: var(--oc-chrome-hover); --ui-border: var(--oc-chrome-line); --border-default: var(--oc-chrome-line); --ui-text: var(--oc-chrome-ink); --text-primary: var(--oc-chrome-ink); --ui-text-base: var(--oc-chrome-ink); --text-secondary: var(--oc-chrome-ink-2); --ui-muted: var(--oc-chrome-ink-2); --text-muted: var(--oc-chrome-ink-3); --ui-green-text: var(--oc-chrome-ink); background: var(--oc-chrome) !important; border-right: 1px solid var(--oc-chrome-line) !important; } :root[data-theme-mode="system"] #sidebar .nav .nav-item .nav-link{ color: var(--oc-chrome-ink-2) !important; } :root[data-theme-mode="system"] #sidebar .nav .nav-item .nav-link .menu-title, :root[data-theme-mode="system"] #sidebar .nav .nav-item .nav-link i{ color: inherit !important; } :root[data-theme-mode="system"] #sidebar .nav .nav-item .nav-link:hover{ background: color-mix(in srgb, var(--ui-accent) 14%, transparent) !important; color: var(--oc-chrome-ink) !important; } :root[data-theme-mode="system"] #sidebar .nav .nav-item.active > .nav-link, :root[data-theme-mode="system"] #sidebar .nav .nav-item .nav-link.active{ background: var(--oc-nav-on-bg) !important; color: var(--oc-accent-bright) !important; box-shadow: inset 3px 0 0 var(--oc-accent-bright) !important; font-weight: 650 !important; } :root[data-theme-mode="system"] #sidebar .nav .nav-item.active > .nav-link i, :root[data-theme-mode="system"] #sidebar .nav .nav-item .nav-link.active i{ color: var(--oc-accent-bright) !important; } :root[data-theme-mode="system"] #sidebar .nav-profile, :root[data-theme-mode="system"] #sidebar .nav-profile .nav-link, :root[data-theme-mode="system"] #sidebar .nav-profile *:not(img){ color: var(--oc-chrome-ink) !important; } :root[data-theme-mode="system"] #sidebar .nav.sub-menu .nav-item .nav-link.active{ color: var(--oc-accent-bright) !important; } :root[data-theme-mode="system"] #sidebar .nav.sub-menu .nav-item .nav-link:hover{ background: color-mix(in srgb, var(--ui-accent) 14%, transparent) !important; } :root[data-theme-mode="system"] #topNavPanel, :root[data-theme-mode="system"] #topNavPanel.navbar{ --ui-surface: var(--oc-chrome-2); --bg-card: var(--oc-chrome-2); --bg-elevated: var(--oc-chrome-2-elevated); --ui-border: var(--oc-chrome-line); --border-default: var(--oc-chrome-line); --ui-text: var(--oc-chrome-ink); --text-primary: var(--oc-chrome-ink); --ui-text-base: var(--oc-chrome-ink); --text-secondary: var(--oc-chrome-ink-2); --ui-muted: var(--oc-chrome-ink-2); --text-muted: var(--oc-chrome-ink-3); --ui-green-text: var(--oc-chrome-ink); background: var(--oc-chrome-2) !important; border-bottom: 1px solid var(--oc-chrome-line) !important; } :root[data-theme-mode="system"] #topNavPanel .navbar-brand-wrapper, :root[data-theme-mode="system"] #topNavPanel .navbar-menu-wrapper{ background: var(--oc-chrome-2) !important; } :root[data-theme-mode="system"] #topNavPanel .brand-logo img{ content: url("../images/logo.png"); } :root[data-theme-mode="system"] #topNavPanel .brand-logo-mini img{ content: url("../images/logo-small.png"); } :root[data-theme-mode="system"] #topNavPanel .shortcuts a i.mdi, :root[data-theme-mode="system"] #topNavPanel .shortcuts a i.fa, :root[data-theme-mode="system"] #topNavPanel .navbar-nav .nav-link i{ color: var(--oc-chrome-ink-2) !important; } :root[data-theme-mode="system"] #topNavPanel .navbar-nav .nav-link, :root[data-theme-mode="system"] #topNavPanel .dropdown > .btn{ color: var(--oc-chrome-ink) !important; } :root[data-theme-mode="system"] #topNavPanel .navbar-nav.navbar-nav-right > a.btn.btn-success, :root[data-theme-mode="system"] #topNavPanel .navbar-nav.navbar-nav-right > a.btn.btn-success:hover{ background-color: var(--oc-accent) !important; border-color: var(--oc-accent) !important; color: #fff !important; } :root[data-theme-mode="system"] #topNavPanel .btn-icon{ color: var(--oc-chrome-ink-2) !important; } :root[data-theme-mode="system"] #topNavPanel .btn-icon:hover{ background: color-mix(in srgb, var(--ui-accent) 16%, transparent) !important; color: var(--oc-chrome-ink) !important; } /* ── 报表 / 消费分析：style-v2.css 里为深色写死的浅灰/白字与深色卡头，落在浅底上不可读 ── */ :root[data-theme-mode="system"] .main-panel #reportsPanel .time_range a.active, :root[data-theme-mode="system"] .main-panel #customerAnalysisPanel .time_range a.active { color: var(--ui-accent) !important; font-weight: 600; } :root[data-theme-mode="system"] .main-panel #reportsPanel #report-offer-sales-items thead a, :root[data-theme-mode="system"] .main-panel #reportsPanel #report-product-sales-items thead a { color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel #customerAnalysisPanel .card-header { background-color: var(--bg-elevated) !important; } :root[data-theme-mode="system"] .main-panel #customerAnalysisPanel .card-header h4 { color: var(--text-primary) !important; } /* ── PC 布局页（layout.htm / #layoutPanel）整页保持 v2 原样 ── 该页由 layout.css 按深色底设计（PC 盒子 / popover / 侧面板都写死深色），灌浅色 token 只会半明半暗，故在 #layoutPanel 上把 .main-panel 下发的浅色 token 逐条还原成 style-v2.css :root 的深色默认值；少数写死浅色字面量、又带 !important 的元素级规则在下面单独还原。主色 --ui-accent 不还原 → 仍跟 Ocean 走蓝调。右击菜单整体保持深色（配色跟随皮肤 chrome）。 */ :root[data-theme-mode="system"] .main-panel #layoutPanel { color-scheme: dark; --bg-darkest: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-dark: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-bg: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface-2: color-mix(in srgb, #0d1117, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card: color-mix(in srgb, #161b22, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-surface: color-mix(in srgb, #161b22, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-card-hover: color-mix(in srgb, #1c2128, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --bg-elevated: color-mix(in srgb, #21262d, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --border-default: color-mix(in srgb, #30363d, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-border: color-mix(in srgb, #30363d, var(--ui-bg-tint) var(--ui-bg-tint-strength)); --ui-text-base: #e6edf3; --text-primary: var(--ui-text-base); --ui-text: var(--ui-text-base); --text-secondary: #b1bac4; --ui-muted: #b1bac4; --text-muted: #8b949e; --ui-green-text: var(--ui-on-accent); --info: #02abfe; --ui-info: color-mix(in srgb, #58a6ff, var(--ui-accent) var(--ui-accent-harmony)); --ui-info-bright: color-mix(in srgb, #02abfe, var(--ui-accent) var(--ui-accent-harmony)); --white-16: rgba(255, 255, 255, 0.16); --white-10: rgba(255, 255, 255, 0.10); --gray-900-a14: rgba(var(--black-rgb), 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); --shadow-35: rgba(0, 0, 0, 0.35); /* 下面 4 个是 Ocean 专有 token（v2 里没有）：指回主色/正文色，供仍会命中的元素级规则消费 */ --ui-accent-solid: var(--ui-accent); --on-tint-success: var(--ui-accent); --on-tint-neutral: var(--text-primary); --L-btn-neutral: transparent; --L-btn-neutral-hover: var(--ui-border); --L-btn-neutral-ink: var(--text-primary); } /* 房间标签：Ocean 的 .nav-tabs 规则带 !important 会压过 layout.css → 按 layout.css 原值还原 */ :root[data-theme-mode="system"] .main-panel #layoutPanel #pc-layout-tabs { border-bottom: 0 !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel #pc-layout-tabs .nav-link.active { background: #238636 !important; border-color: #238636 !important; color: #fff !important; border-radius: 8px !important; font-weight: 400 !important; } /* 文字工具类：Ocean 把它们压成 #000/深墨，这里回到深色主题取值 */ :root[data-theme-mode="system"] .main-panel #layoutPanel .text-muted { color: var(--text-muted) !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .text-light { color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .text-danger { color: var(--ui-danger) !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .text-info { color: var(--ui-info) !important; } /* 按钮：Ocean 把语义色压深、中性按钮改浅底 → 还原成 v2 深色态 */ :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-info { --v2-info-color: color-mix(in srgb, var(--ui-info) 26%, transparent); --ui-border: var(--border-default); --ui-text: var(--ui-text-base); } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-danger { --ui-danger-bg: color-mix(in srgb, var(--ui-danger) 26%, transparent); --ui-border: var(--border-default); --ui-text: var(--ui-text-base); } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-warning { --v2-warning-color: color-mix(in srgb, var(--ui-warning) 24%, transparent); --ui-gold: var(--ui-warning); --ui-text: var(--ui-text-base); } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-default, :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-secondary, :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-light { background-color: transparent !important; border-color: var(--ui-border) !important; color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-default:hover, :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-default:focus, :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-default:active, :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-secondary:hover, :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-light:hover { background-color: var(--ui-border) !important; border-color: var(--ui-border) !important; color: var(--text-primary) !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-info:hover { background-color: var(--v2-info-hover-color) !important; border-color: var(--v2-info-hover-color) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-success:hover { background-color: var(--v2-success-hover-color) !important; border-color: var(--v2-success-hover-color) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-danger:hover { background-color: var(--v2-danger-hover-color) !important; border-color: var(--v2-danger-hover-color) !important; color: #fff !important; } :root[data-theme-mode="system"] .main-panel #layoutPanel .btn-warning:hover { background-color: var(--v2-warning-hover-color) !important; border-color: var(--v2-warning-hover-color) !important; color: #fff !important; } } /* ===== 皮肤：由 data-theme-palette 选择；Ocean = 引擎兜底默认(无属性)，其余 5 套如下 ===== */ /* Emerald 翡翠绿皮肤：主色 + --L-* 中性 + 深 chrome（由 --ui-accent 经 color-mix 派生） */ :root[data-theme-mode="light"][data-theme-palette="emerald"], :root[data-theme-mode="system"][data-theme-palette="emerald"]{ --ui-accent: #2ea043; /* 内容区中性族 */ --L-bg-app: #eef4ee; --L-bg-card: #f7fbf7; --L-bg-hover: #eaf3ea; --L-bg-elevated: #e2ede3; --L-border: #c5d6c7; --L-ink: #17231b; --L-ink-2: #4f6356; --L-ink-3: #6d7f72; --L-btn-neutral: #e2ede3; --L-btn-neutral-hover: #d7e6d9; --L-btn-neutral-ink: #17231b; /* 深色 chrome（侧栏/顶栏） */ --oc-chrome: color-mix(in srgb, var(--ui-accent) 16%, #08101a); --oc-chrome-2: color-mix(in srgb, var(--ui-accent) 18%, #0b1420); --oc-chrome-line: color-mix(in srgb, var(--ui-accent) 34%, #16273c); --oc-chrome-elevated: color-mix(in srgb, var(--ui-accent) 20%, #0c1626); --oc-chrome-hover: color-mix(in srgb, var(--ui-accent) 26%, #0e1a2c); --oc-chrome-2-elevated: color-mix(in srgb, var(--ui-accent) 22%, #0e1728); --oc-accent-bright: color-mix(in srgb, var(--ui-accent) 62%, #fff); --L-accent-deep: color-mix(in srgb, var(--ui-accent) 55%, #001); } /* Teal 青碧皮肤：主色 + --L-* 中性 + 深 chrome（由 --ui-accent 经 color-mix 派生） */ :root[data-theme-mode="light"][data-theme-palette="teal"], :root[data-theme-mode="system"][data-theme-palette="teal"]{ --ui-accent: #0e9488; /* 内容区中性族 */ --L-bg-app: #ecf4f3; --L-bg-card: #f6fbfa; --L-bg-hover: #e5f1ef; --L-bg-elevated: #dcece9; --L-border: #bfd8d3; --L-ink: #12231f; --L-ink-2: #47635c; --L-ink-3: #667f78; --L-btn-neutral: #dcece9; --L-btn-neutral-hover: #cfe4df; --L-btn-neutral-ink: #12231f; /* 深色 chrome（侧栏/顶栏） */ --oc-chrome: color-mix(in srgb, var(--ui-accent) 16%, #08101a); --oc-chrome-2: color-mix(in srgb, var(--ui-accent) 18%, #0b1420); --oc-chrome-line: color-mix(in srgb, var(--ui-accent) 34%, #16273c); --oc-chrome-elevated: color-mix(in srgb, var(--ui-accent) 20%, #0c1626); --oc-chrome-hover: color-mix(in srgb, var(--ui-accent) 26%, #0e1a2c); --oc-chrome-2-elevated: color-mix(in srgb, var(--ui-accent) 22%, #0e1728); --oc-accent-bright: color-mix(in srgb, var(--ui-accent) 62%, #fff); --L-accent-deep: color-mix(in srgb, var(--ui-accent) 55%, #001); } /* Indigo 靛蓝皮肤：主色 + --L-* 中性 + 深 chrome（由 --ui-accent 经 color-mix 派生） */ :root[data-theme-mode="light"][data-theme-palette="indigo"], :root[data-theme-mode="system"][data-theme-palette="indigo"]{ --ui-accent: #4f46e5; /* 内容区中性族 */ --L-bg-app: #f0f0fb; --L-bg-card: #f9f9fe; --L-bg-hover: #eae9f8; --L-bg-elevated: #e3e2f5; --L-border: #cecbea; --L-ink: #1b1a2e; --L-ink-2: #53516c; --L-ink-3: #72708b; --L-btn-neutral: #e3e2f5; --L-btn-neutral-hover: #d7d5ef; --L-btn-neutral-ink: #1b1a2e; /* 深色 chrome（侧栏/顶栏） */ --oc-chrome: color-mix(in srgb, var(--ui-accent) 16%, #08101a); --oc-chrome-2: color-mix(in srgb, var(--ui-accent) 18%, #0b1420); --oc-chrome-line: color-mix(in srgb, var(--ui-accent) 34%, #16273c); --oc-chrome-elevated: color-mix(in srgb, var(--ui-accent) 20%, #0c1626); --oc-chrome-hover: color-mix(in srgb, var(--ui-accent) 26%, #0e1a2c); --oc-chrome-2-elevated: color-mix(in srgb, var(--ui-accent) 22%, #0e1728); --oc-accent-bright: color-mix(in srgb, var(--ui-accent) 62%, #fff); --L-accent-deep: color-mix(in srgb, var(--ui-accent) 55%, #001); } /* Slate 中性灰皮肤：主色 + --L-* 中性 + 深 chrome（由 --ui-accent 经 color-mix 派生） */ :root[data-theme-mode="light"][data-theme-palette="slate"], :root[data-theme-mode="system"][data-theme-palette="slate"]{ --ui-accent: #2563eb; /* 内容区中性族 */ --L-bg-app: #f1f3f5; --L-bg-card: #fbfcfd; --L-bg-hover: #ebeef1; --L-bg-elevated: #e3e7ec; --L-border: #ced5dd; --L-ink: #191d23; --L-ink-2: #525a64; --L-ink-3: #727b86; --L-btn-neutral: #e3e7ec; --L-btn-neutral-hover: #d6dce3; --L-btn-neutral-ink: #191d23; /* 深色 chrome（侧栏/顶栏） */ --oc-chrome: color-mix(in srgb, var(--ui-accent) 16%, #08101a); --oc-chrome-2: color-mix(in srgb, var(--ui-accent) 18%, #0b1420); --oc-chrome-line: color-mix(in srgb, var(--ui-accent) 34%, #16273c); --oc-chrome-elevated: color-mix(in srgb, var(--ui-accent) 20%, #0c1626); --oc-chrome-hover: color-mix(in srgb, var(--ui-accent) 26%, #0e1a2c); --oc-chrome-2-elevated: color-mix(in srgb, var(--ui-accent) 22%, #0e1728); --oc-accent-bright: color-mix(in srgb, var(--ui-accent) 62%, #fff); --L-accent-deep: color-mix(in srgb, var(--ui-accent) 55%, #001); } /* Amber 暖橙皮肤：主色 + --L-* 中性 + 深 chrome（由 --ui-accent 经 color-mix 派生） */ :root[data-theme-mode="light"][data-theme-palette="amber"], :root[data-theme-mode="system"][data-theme-palette="amber"]{ --ui-accent: #ea6a0c; /* 内容区中性族 */ --L-bg-app: #f7f2ea; --L-bg-card: #fdfbf6; --L-bg-hover: #f2ebde; --L-bg-elevated: #ece2d2; --L-border: #ddccb6; --L-ink: #271f16; --L-ink-2: #655847; --L-ink-3: #7f7361; --L-btn-neutral: #ece2d2; --L-btn-neutral-hover: #e2d5c0; --L-btn-neutral-ink: #271f16; /* 深色 chrome（侧栏/顶栏） */ --oc-chrome: color-mix(in srgb, var(--ui-accent) 16%, #08101a); --oc-chrome-2: color-mix(in srgb, var(--ui-accent) 18%, #0b1420); --oc-chrome-line: color-mix(in srgb, var(--ui-accent) 34%, #16273c); --oc-chrome-elevated: color-mix(in srgb, var(--ui-accent) 20%, #0c1626); --oc-chrome-hover: color-mix(in srgb, var(--ui-accent) 26%, #0e1a2c); --oc-chrome-2-elevated: color-mix(in srgb, var(--ui-accent) 22%, #0e1728); --oc-accent-bright: color-mix(in srgb, var(--ui-accent) 62%, #fff); --L-accent-deep: color-mix(in srgb, var(--ui-accent) 55%, #001); }