pengyuthon/yuthon_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
李鹏宇
2026-08-10 16:54:57 +08:00
parent 21ff1f9852 995c386cd6
commit c429a70ec9
4 changed files with 933 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ks_dashboard_ninja/static/src/scss/common.scss
+86 -77
View File
@@ -1,11 +1,12 @@
// @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
// 全局通配符重置限定在 dashboard 页面作用域内，避免影响其他页面（如 udoo_om_ux 主题的深色 dropdown）
body.ks_body_class * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
// [YUTHON] 注释掉全局通配符重置：它会把所有元素（含 Odoo 标准按钮）的 margin/padding 清零，
// 导致「新建」等标准按钮变小、与 dashboard 自带 padding 的按钮大小不一致。已确认卸载此模块无影响。
// body.ks_body_class * {
// margin: 0;
// padding: 0;
// box-sizing: border-box;
// }
body.ks_body_class {
font-family: "Poppins", sans-serif;
@@ -380,7 +381,8 @@ body.ks_body_class {
font-weight: $f-w-400;
line-height: 16px;
text-align: left;
color: $color-paragraph;
// [YUTHON] 注释掉：dash-dd-2 内部下拉文字不应硬编码灰蓝色，交给主题继承
// color: $color-paragraph;
cursor: pointer;
@@ -498,7 +500,8 @@ body.ks_body_class {
.ks_body_class .o-checkbox {
&.form-check .form-check-input {
border-color: $color-placeholders;
// [YUTHON] 注释掉：强制 placeholder 灰边框会覆盖 udoo_om_ux 暗色主题下的 checkbox 边框
// border-color: $color-placeholders;
}
.form-check-input[type="checkbox"]:checked {
@@ -550,71 +553,74 @@ body.ks_body_class {
border: none !important;
}
.ks_body_class .o_form_button_save {
margin-right: 8px !important;
}
.ks_body_class .o_form_button_save,
.ks_body_class .o_form_button_save_new {
/* 与主题模块冲突：强制红色主题会覆盖 Odoo 主题的保存按钮颜色 (@image#1:Clipboard_Screenshot.png) */
// background-color: $color-primary-main;
// border: 1px solid $color-primary-main;
border-radius: 10px;
min-height: 40px;
padding: 0 20px;
font-size: $font-14;
font-weight: $f-w-400;
line-height: 19.6px;
/* 与主题模块冲突：强制白色文字会覆盖主题深色模式下的保存按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
// color: $color-white;
cursor: pointer;
width: auto !important;
&.disabled {
opacity: 50%;
pointer-events: none;
cursor: not-allowed;
}
&:hover {
/* 与主题模块冲突：强制红色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
// background-color: $btn-hover;
// color: $color-white !important;
}
@include max-575 {
font-size: $font-12 !important;
}
}
.ks_body_class .o_form_button_cancel {
border: 0.81px solid $color-E5E7EB;
font-size: $font-16;
font-weight: $f-w-500;
line-height: 22.4px;
text-align: left;
/* 与主题模块冲突：强制深色文字会覆盖主题深色模式下的取消按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
// color: $color-1E1E1E;
border-radius: 8px;
min-height: 40px;
padding: 0 20px !important;
/* 与主题模块冲突：强制白色背景会覆盖主题深色模式下的取消按钮背景 (@image#1:Clipboard_Screenshot.png) */
// background-color: $color-white;
width: auto !important;
&:hover {
/* 与主题模块冲突：强制浅色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
// background-color: $color-secondary-bg;
}
&:focus {
border: 1px solid $color-E7495E;
}
@include max-575 {
font-size: $font-12 !important;
}
}
// [YUTHON] 注释掉 dashboard 对全局 .o_form_button_save / .o_form_button_cancel 的尺寸硬编码
// （min-height:40px; padding:0 20px 等），它会覆盖 Odoo 主题默认按钮尺寸，导致「保存 / 丢弃」变大。
// dashboard 自身编辑工具条的 Save/Discard 由 dash-btn-red / dash-default-btn 类兜底，不受影响。
// .ks_body_class .o_form_button_save {
// margin-right: 8px !important;
// }
//
// .ks_body_class .o_form_button_save,
// .ks_body_class .o_form_button_save_new {
// /* 与主题模块冲突：强制红色主题会覆盖 Odoo 主题的保存按钮颜色 (@image#1:Clipboard_Screenshot.png) */
// // background-color: $color-primary-main;
// // border: 1px solid $color-primary-main;
// border-radius: 10px;
// min-height: 40px;
// padding: 0 20px;
// font-size: $font-14;
// font-weight: $f-w-400;
// line-height: 19.6px;
// /* 与主题模块冲突：强制白色文字会覆盖主题深色模式下的保存按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
// // color: $color-white;
// cursor: pointer;
// width: auto !important;
//
// &.disabled {
// opacity: 50%;
// pointer-events: none;
// cursor: not-allowed;
// }
//
// &:hover {
// /* 与主题模块冲突：强制红色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
// // background-color: $btn-hover;
// // color: $color-white !important;
// }
//
// @include max-575 {
// font-size: $font-12 !important;
// }
// }
//
// .ks_body_class .o_form_button_cancel {
// border: 0.81px solid $color-E5E7EB;
// font-size: $font-16;
// font-weight: $f-w-500;
// line-height: 22.4px;
// text-align: left;
// /* 与主题模块冲突：强制深色文字会覆盖主题深色模式下的取消按钮文字颜色 (@image#1:Clipboard_Screenshot.png) */
// // color: $color-1E1E1E;
// border-radius: 8px;
// min-height: 40px;
// padding: 0 20px !important;
// /* 与主题模块冲突：强制白色背景会覆盖主题深色模式下的取消按钮背景 (@image#1:Clipboard_Screenshot.png) */
// // background-color: $color-white;
// width: auto !important;
//
// &:hover {
// /* 与主题模块冲突：强制浅色悬停背景会覆盖主题深色模式下的按钮悬停样式 (@image#1:Clipboard_Screenshot.png) */
// // background-color: $color-secondary-bg;
// }
//
// &:focus {
// border: 1px solid $color-E7495E;
// }
//
// @include max-575 {
// font-size: $font-12 !important;
// }
// }
.ks_body_class .active-label {
font-size: $font-14 !important;
@@ -851,7 +857,8 @@ body.ks_body_class {
font-weight: $f-w-400;
line-height: 16px;
text-align: left;
color: $color-paragraph;
// [YUTHON] 注释掉：强制灰蓝色会覆盖 udoo_om_ux 暗色主题的下拉文字颜色，导致发暗不可读
// color: $color-paragraph;
cursor: pointer;
overflow: hidden;
text-wrap: nowrap;
@@ -2488,9 +2495,11 @@ body.ks_body_class {
border-bottom: 1px solid var(--color-E5E7EB) !important;
}
.ks_body_class .o_form_button_save {
padding: 0 29px !important;
}
// [YUTHON] 注释掉 dashboard 对全局 .o_form_button_save 的 padding 硬编码（padding:0 29px !important），
// 它会覆盖 Odoo 主题默认按钮内边距，导致「保存」按钮比标准按钮宽/大。已确认卸载此模块无影响。
// .ks_body_class .o_form_button_save {
// padding: 0 29px !important;
// }
.ks_body_class .modal-body .ks_chart_card_body {
top:53px !important;
ks_dashboard_ninja/static/src/scss/dark_mode.scss
+839
View File
@@ -0,0 +1,839 @@
// =============================================================
// ks_dashboard_ninja / static / src / scss / dark_mode.scss
// -------------------------------------------------------------
// 夜魔模式（Dark Mode）全局适配
// 覆盖概览页、统计瓦片、仪表盘卡片、KPI瓦片、列表等所有浅色硬编码
// 触发选择器：Odoo 原生 .o_dark_mode + [data-color-mode="dark"]
// + Bootstrap5 [data-bs-theme="dark"]
// + 模块自带 [data-color-mode="ks-dn-dark"]
// ============================================================
// ── 暗色色板 ──
$dm-bg: #1a1b2e; // 页面主背景（深蓝黑）
$dm-card-bg: #22253a; // 卡片背景
$dm-card-bg-hover: #2a2d45; // 卡片悬停
$dm-border: #2e3155; // 边框线
$dm-text-primary: #e8eaf0; // 主文字（近白）
$dm-text-secondary: #9ca3af; // 次要文字（灰）
$dm-text-muted: #6b7280; // 弱化文字
// 瓦片暗色变体（保留色调辨识度但压暗）
$dm-tile-red: #3d2228;
$dm-tile-yellow: #3d3520;
$dm-tile-green: #1d3a28;
$dm-tile-purple: #2d2540;
$dm-tile-default: #22253a;
// ── 统一暗色前缀选择器 ──
// Odoo 夜魔模式：body.o_dark_mode 或 [data-color-mode="dark"]
// udoo_om_ux 主题可能用 data-color-mode
// 模块自带的 ks-dn-dark 也一并覆盖
// ============================================================
// 1. 页面主体 & 全局背景
// ============================================================
body.o_dark_mode.ks_body_class,
[data-color-mode="dark"] .ks_body_class,
body[data-bs-theme="dark"] .ks_body_class,
[data-color-mode="ks-dn-dark"] .ks_body_class {
background-color: $dm-bg !important;
color: $dm-text-primary;
.main-box {
background-color: transparent;
}
}
// ============================================================
// 2. 概览页标题区 (.overview-sec-one)
// ============================================================
body.o_dark_mode.ks_body_class .overview-sec-one,
[data-color-mode="dark"] .ks_body_class .overview-sec-one,
body[data-bs-theme="dark"] .ks_body_class .overview-sec-one,
[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-one {
h1 {
color: $dm-text-primary;
span {
color: $dm-text-secondary;
}
}
}
// ============================================================
// 3. 统计瓦片行 (.overview-sec-tiles .tile)
// ============================================================
body.o_dark_mode .overview-sec-tiles .tile,
[data-color-mode="dark"] .ks_body_class .overview-sec-tiles .tile,
body[data-bs-theme="dark"] .ks_body_class .overview-sec-tiles .tile,
[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-tiles .tile {
&.one { background-color: $dm-tile-red !important; }
&.two { background-color: $dm-tile-yellow !important; }
&.three { background-color: $dm-tile-green !important; }
&.four { background-color: $dm-tile-purple !important; }
&.five { background-color: $dm-tile-default !important; }
.num {
color: $dm-text-primary !important;
}
p {
color: $dm-text-secondary !important;
}
&:hover {
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.5) !important;
}
}
// ============================================================
// 4. Screen 卡片 (.screen-cards .card-dn-screen)
// ============================================================
body.o_dark_mode.ks_body_class .screen-cards .card-dn-screen,
[data-color-mode="dark"] .ks_body_class .screen-cards .card-dn-screen,
body[data-bs-theme="dark"] .ks_body_class .screen-cards .card-dn-screen,
[data-color-mode="ks-dn-dark"] .ks_body_class .screen-cards .card-dn-screen {
&.one { background-color: $dm-tile-red !important; }
&.two { background-color: $dm-tile-yellow !important; }
&.three { background-color: $dm-tile-green !important; }
&.four { background-color: $dm-tile-purple !important; }
.amount-info,
.sub-info {
color: $dm-text-primary !important;
}
.screen-title {
color: $dm-text-secondary !important;
}
.screen-ratio {
color: #f87171 !important;
}
}
// ============================================================
// 5. 仪表盘预览卡片 (.dashboard-box / .dashboard-container)
// ============================================================
body.o_dark_mode.ks_body_class .overview-sec-dasboards .data-added .dashboard-box,
[data-color-mode="dark"] .ks_body_class .overview-sec-dasboards .data-added .dashboard-box,
body[data-bs-theme="dark"] .ks_body_class .overview-sec-dasboards .data-added .dashboard-box,
[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-dasboards .data-added .dashboard-box {
background-color: $dm-card-bg !important;
border: 1px solid $dm-border !important;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.3) !important;
.dash-preview-box {
border-color: $dm-border !important;
}
.dashboard-info .left {
h4, p {
color: $dm-text-primary !important;
}
}
}
body.o_dark_mode.ks_body_class .dasboard-box .dashboard-container,
[data-color-mode="dark"] .ks_body_class .dasboard-box .dashboard-container,
body[data-bs-theme="dark"] .ks_body_class .dasboard-box .dashboard-container,
[data-color-mode="ks-dn-dark"] .ks_body_class .dasboard-box .dashboard-container {
border-color: $dm-border !important;
background-color: $dm-card-bg !important;
.dashboard-header h4 {
color: $dm-text-primary !important;
}
}
// No-data 区域
body.o_dark_mode.ks_body_class .overview-sec-dasboards .no-data,
[data-color-mode="dark"] .ks_body_class .overview-sec-dasboards .no-data,
body[data-bs-theme="dark"] .ks_body_class .overview-sec-dasboards .no-data,
[data-color-mode="ks-dn-dark"] .ks_body_class .overview-sec-dasboards .no-data {
h3 { color: #60a5fa !important; }
p { color: $dm-text-secondary !important; }
}
// ============================================================
// 6. KPI 瓦片 (.encapsulated-kpi-tile)
// ============================================================
body.o_dark_mode.ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
[data-color-mode="dark"] .ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
body[data-bs-theme="dark"] .ks_body_class .encapsulated-kpi-tile.grid-stack-item-content,
[data-color-mode="ks-dn-dark"] .ks_body_class .encapsulated-kpi-tile.grid-stack-item-content {
background-color: $dm-card-bg !important;
border: 1px solid $dm-border !important;
.dashboard-item-name,
.dashboard-item-data,
.ks_dashboard_item_domain_count,
.ks_dashboard_item_name,
.ks_dashboard_item_domain_count_l3,
.ks_dashboard_item_name_l3,
.layout-2-count,
.layout-2-name,
.layout-4-count,
.layout-4-name,
.layout-6-name,
.layout-6-tile-name,
.ks_dashboard_item_domain_count_l5 {
color: $dm-text-primary !important;
}
.img-bg {
background-color: $dm-card-bg-hover !important;
}
.ks_dashboard_icon,
.ks_dashboard_icon_l3,
.layout-4-icon,
.layout-2-icon {
background-color: $dm-card-bg-hover !important;
}
&:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3) !important;
}
}
// layout-6 特殊处理
body.o_dark_mode.ks_body_class .encapsulated-kpi-tile.layout-6-box,
[data-color-mode="dark"] .ks_body_class .encapsulated-kpi-tile.layout-6-box,
body[data-bs-theme="dark"] .ks_body_class .encapsulated-kpi-tile.layout-6-box,
[data-color-mode="ks-dn-dark"] .ks_body_class .encapsulated-kpi-tile.layout-6-box {
.layout-6-tile-name {
background-color: $dm-card-bg-hover !important;
color: $dm-text-primary !important;
}
}
// layout-2 封装容器
body.o_dark_mode.ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content,
[data-color-mode="dark"] .ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content,
body[data-bs-theme="dark"] .ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content,
[data-color-mode="ks-dn-dark"] .ks_body_class .encap-layout-2-box.encapsulated-kpi-tile.grid-stack-item-content {
.layout-2-icon {
background-color: $dm-card-bg-hover !important;
}
}
// ============================================================
// 7. 封装容器 (.encapsulated-tile-container)
// ============================================================
body.o_dark_mode.ks_body_class .encapsulated-tile-container,
[data-color-mode="dark"] .ks_body_class .encapsulated-tile-container,
body[data-bs-theme="dark"] .ks_body_class .encapsulated-tile-container,
[data-color-mode="ks-dn-dark"] .ks_body_class .encapsulated-tile-container {
.encapsulated-tile-1 .ks_dashboard_icon,
.encapsulated-main-body .ks_dashboard_icon_l3,
.layout-4-icon {
background-color: $dm-card-bg-hover !important;
}
}
// ============================================================
// 8. 通用文字颜色修复
// ============================================================
body.o_dark_mode.ks_body_class,
[data-color-mode="dark"] .ks_body_class,
body[data-bs-theme="dark"] .ks_body_class,
[data-color-mode="ks-dn-dark"] .ks_body_class {
// No data available
.no-data-avilable .title,
.no-data-avilable p {
color: $dm-text-primary !important;
}
// 链接
.dash-link {
color: #f87171 !important;
}
// 输入框
.common-input,
.ks_date_input_fields input {
background-color: $dm-card-bg !important;
color: $dm-text-primary !important;
border-color: $dm-border !important;
&::placeholder {
color: $dm-text-muted !important;
}
}
// 按钮
.dash-default-btn,
.feature-btn,
.favorite-btn,
.dadsh-dlt-btn {
background-color: $dm-card-bg-hover !important;
color: $dm-text-primary !important;
border-color: $dm-border !important;
&:hover {
background-color: $dm-border !important;
}
}
.o_form_button_cancel {
background-color: transparent !important;
color: $dm-text-primary !important;
border-color: $dm-border !important;
}
// 下拉菜单
.dash-dd-2 .dropdown-toggle {
background-color: $dm-card-bg !important;
color: $dm-text-primary !important;
border-color: $dm-border !important;
}
.dropdown-menu {
background-color: $dm-card-bg !important;
.dropdown-item {
color: $dm-text-secondary !important;
&:hover {
background-color: $dm-card-bg-hover !important;
}
}
}
// Filter collapse 面板
.dash-dd-2.filter .custom-dash-collapse .card-body {
background-color: $dm-card-bg !important;
border-color: $dm-border !important;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4) !important;
.nav {
border-color: $dm-border !important;
.nav-link {
color: $dm-text-secondary !important;
&.active {
color: #f87171 !important;
border-color: #f87171 !important;
background-color: transparent !important;
}
}
}
h4, .filter-subtitle {
color: $dm-text-secondary !important;
}
.clear-all-btn {
color: $dm-text-muted !important;
}
}
// Tab 导航
.encapsulated-tab-box .nav-tabs {
background-color: transparent !important;
border-color: $dm-border !important;
.nav-link {
color: $dm-text-secondary !important;
background-color: transparent !important;
&.active {
color: #f87171 !important;
border-color: #f87171 !important;
}
}
}
// 表格
.encapsulated-tab-box .o_renderer.table-responsive {
table {
thead tr th {
background-color: $dm-card-bg-hover !important;
color: $dm-text-primary !important;
border-color: $dm-border !important;
}
tbody tr td {
background-color: $dm-card-bg !important;
color: $dm-text-secondary !important;
border-color: $dm-border !important;
a {
color: #60a5fa !important;
}
}
}
}
// 列表视图
.ks_list_view_container {
border-color: $dm-border !important;
background-color: transparent !important;
.ks_list_item_table {
border-color: $dm-border !important;
#ksListViewTable.ks_list_view_layout_1 {
thead tr th {
background-color: $dm-card-bg-hover !important;
color: $dm-text-primary !important;
border-color: $dm-border !important;
}
tbody tr {
td {
color: $dm-text-secondary !important;
border-color: $dm-border !important;
}
&:nth-of-type(odd) > * {
background-color: $dm-card-bg !important;
}
&:nth-of-type(even) > * {
background-color: $dm-card-bg-hover !important;
}
}
}
}
}
// 图标按钮
.bookmark-capture,
.delete-dashboard {
background-color: transparent !important;
svg {
stroke: $dm-text-secondary !important;
}
&:hover svg {
stroke: $dm-text-primary !important;
}
}
.img-bg.info {
background-color: $dm-card-bg-hover !important;
svg {
stroke: $dm-text-secondary !important;
}
&.active, &:hover {
background-color: #4338ca !important;
svg {
stroke: $dm-text-primary !important;
}
}
}
.filter svg {
stroke: $dm-text-secondary !important;
}
// 文字标签
.input-label,
.label-checkbox,
.ks-dashboard-helping-text,
.ks_dashboard_header .ks-helping-text {
color: $dm-text-secondary !important;
}
// 预定义过滤器
.predefined-filters label {
color: $dm-text-secondary !important;
}
.predefined-filters .dropdown-toggle {
background-color: $dm-card-bg !important;
border-color: $dm-border !important;
.selcted-opt {
background-color: $dm-card-bg-hover !important;
.opt-title {
color: $dm-text-primary !important;
}
}
}
// Mobile menu
.ks-mb-dropdown li {
color: $dm-text-primary !important;
.dash-dd-icons svg path {
fill: $dm-text-primary !important;
}
&.active {
background-color: $dm-card-bg-hover !important;
color: #60a5fa !important;
.dash-dd-icons svg path {
fill: #60a5fa !important;
}
}
}
// Error modal
.error-modal-ks .modal-para {
color: $dm-text-secondary !important;
}
// Magic star dropdown
.magic-star-dd .img-bg {
background-color: $dm-card-bg-hover !important;
svg path {
fill: $dm-text-muted !important;
stroke: $dm-text-secondary !important;
}
&:hover {
border-color: #4338ca !important;
}
}
// Filters amount badge
.filters-amount {
background-color: #dc2626 !important;
}
// Global active state
.global-active {
background-color: $dm-card-bg-hover !important;
}
// Export menu
.ks_chart_export_menu div {
color: $dm-text-secondary !important;
&:hover {
background-color: $dm-card-bg-hover !important;
}
}
// Dashboard header
.ks_dashboard_header {
background-color: $dm-bg !important;
}
// KPI target grey text
.ks_kpi_target_grey {
color: $dm-text-muted !important;
}
// Theme color swatches
.ks_color_white {
border-color: $dm-border !important;
}
// Setting container hover
.ks_dashboard_setting_container:hover {
color: $dm-text-primary !important;
background-color: $dm-card-bg-hover !important;
}
// Tiles card
.tiles_card {
background-color: $dm-card-bg !important;
}
.tiles_card_header {
color: $dm-text-secondary !important;
}
// Apps menu icon
.ks-apps-menu-icon .img-bg svg path {
fill: $dm-text-primary !important;
}
.ks-apps-menu-icon .img-bg:hover {
background-color: #4338ca !important;
svg path {
fill: $dm-text-primary !important;
}
}
// Mobile burger menu
.o_mobile_menu_toggle .ks-mobile-burger-menu {
background-color: $dm-card-bg-hover !important;
}
}
// ============================================================
// 9. 图表区域暗色适配
// ============================================================
body.o_dark_mode .chart-right-panel,
body.o_dark_mode .chart-left-panel,
[data-color-mode="dark"] .chart-right-panel,
[data-color-mode="dark"] .chart-left-panel,
[data-color-mode="ks-dn-dark"] .chart-right-panel,
[data-color-mode="ks-dn-dark"] .chart-left-panel {
background-color: $dm-card-bg !important;
}
body.o_dark_mode .chart-tabs-container,
[data-color-mode="dark"] .chart-tabs-container,
[data-color-mode="ks-dn-dark"] .chart-tabs-container {
background-color: $dm-bg !important;
.nav-tabs {
background-color: $dm-card-bg !important;
}
.nav-tabs .nav-link {
color: $dm-text-secondary !important;
background-color: transparent !important;
&.active {
background-color: #4338ca !important;
color: $dm-text-primary !important;
}
}
}
body.o_dark_mode .chart-content,
[data-color-mode="dark"] .chart-content,
[data-color-mode="ks-dn-dark"] .chart-content {
color: $dm-text-primary !important;
}
body.o_dark_mode .chart-card,
[data-color-mode="dark"] .chart-card,
[data-color-mode="ks-dn-dark"] .chart-card {
background: $dm-card-bg !important;
&:hover {
background-color: $dm-card-bg-hover !important;
}
}
body.o_dark_mode .chart-list,
[data-color-mode="dark"] .chart-list,
[data-color-mode="ks-dn-dark"] .chart-list {
background-color: $dm-bg !important;
}
body.o_dark_mode .chart-numbercount-text,
[data-color-mode="dark"] .chart-numbercount-text,
[data-color-mode="ks-dn-dark"] .chart-numbercount-text {
color: $dm-text-primary !important;
}
body.o_dark_mode .chart-form-detail h4,
body.o_dark_mode .chart-form-detail .o_form_label,
[data-color-mode="dark"] .chart-form-detail h4,
[data-color-mode="dark"] .chart-form-detail .o_form_label,
[data-color-mode="ks-dn-dark"] .chart-form-detail h4,
[data-color-mode="ks-dn-dark"] .chart-form-detail .o_form_label {
color: $dm-text-primary !important;
}
body.o_dark_mode .chart-secondary-text,
[data-color-mode="dark"] .chart-secondary-text,
[data-color-mode="ks-dn-dark"] .chart-secondary-text {
color: $dm-text-secondary !important;
}
body.o_dark_mode .chart-primary-text,
[data-color-mode="dark"] .chart-primary-text,
[data-color-mode="ks-dn-dark"] .chart-primary-text {
color: $dm-text-primary !important;
}
// ============================================================
// 10. Modal / Dialog 暗色适配
// ============================================================
body.o_dark_mode .ks_dn_create_chart .modal-content,
[data-color-mode="dark"] .ks_dn_create_chart .modal-content,
[data-color-mode="ks-dn-dark"] .ks_dn_create_chart .modal-content {
background-color: $dm-card-bg !important;
}
body.o_dark_mode .ks_dn_create_chart footer,
[data-color-mode="dark"] .ks_dn_create_chart footer,
[data-color-mode="ks-dn-dark"] .ks_dn_create_chart footer {
background-color: $dm-card-bg !important;
}
body.o_dark_mode .ks-char-preview .ks-chart-inner,
body.o_dark_mode .ks-modal-body-inner,
[data-color-mode="dark"] .ks-char-preview .ks-chart-inner,
[data-color-mode="dark"] .ks-modal-body-inner,
[data-color-mode="ks-dn-dark"] .ks-char-preview .ks-chart-inner,
[data-color-mode="ks-dn-dark"] .ks-modal-body-inner {
background-color: $dm-card-bg !important;
}
body.o_dark_mode .ks-chart-inner .ks-modal-title,
body.o_dark_mode .ks-modal-body-inner .ks-modal-title,
[data-color-mode="dark"] .ks-chart-inner .ks-modal-title,
[data-color-mode="dark"] .ks-modal-body-inner .ks-modal-title,
[data-color-mode="ks-dn-dark"] .ks-chart-inner .ks-modal-title,
[data-color-mode="ks-dn-dark"] .ks-modal-body-inner .ks-modal-title {
color: $dm-text-primary !important;
border-color: $dm-border !important;
}
body.o_dark_mode .error-modal-ks .modal-header .modal-title,
[data-color-mode="dark"] .error-modal-ks .modal-header .modal-title,
[data-color-mode="ks-dn-dark"] .error-modal-ks .modal-header .modal-title {
color: $dm-text-primary !important;
}
body.o_dark_mode .chart-sec-modal .modal-content,
[data-color-mode="dark"] .chart-sec-modal .modal-content,
[data-color-mode="ks-dn-dark"] .chart-sec-modal .modal-content {
background-color: $dm-card-bg !important;
}
// Welcome note
body.o_dark_mode .welcome_note h3,
[data-color-mode="dark"] .welcome_note h3,
[data-color-mode="ks-dn-dark"] .welcome_note h3 {
color: $dm-text-primary !important;
span {
color: $dm-text-secondary !important;
}
}
// Create chart body
body.o_dark_mode .ks_dashboard_ninja.ks_create_chart_body,
[data-color-mode="dark"] .ks_dashboard_ninja.ks_create_chart_body,
[data-color-mode="ks-dn-dark"] .ks_dashboard_ninja.ks_create_chart_body {
background-color: $dm-bg !important;
}
// Notebook tabs
body.o_dark_mode .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav,
[data-color-mode="dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav,
[data-color-mode="ks-dn-dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav {
background-color: $dm-bg !important;
}
body.o_dark_mode .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav-link,
[data-color-mode="dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav-link,
[data-color-mode="ks-dn-dark"] .ks_dashboard_ninja.ks_create_chart_body .o_notebook .nav-link {
color: $dm-text-secondary !important;
background-color: $dm-card-bg !important;
&.active {
background-color: #4338ca !important;
color: $dm-text-primary !important;
}
}
// ============================================================
// 11. 全局冲突修复（非 dashboard 页面被污染的元素）
// -------------------------------------------------------------
// 问题：dashboard 模块的 CSS 通过 web.assets_backend 全局加载，
// common.scss 中 .dropdown-menu .dropdown-item { color: #4b5563 }
// 和 .o-checkbox 样式在夜魔模式下污染了其他页面（如 Apps 列表）
// 修复：用高优先级选择器强制覆盖，确保 checkbox / dropdown 在暗色背景下可读
// ============================================================
// ── 11a. 全局 dropdown-menu 文字颜色修复 ──
// 覆盖 common.scss 中硬编码的 color: $color-paragraph (#4b5563)
body.o_dark_mode .dropdown-menu .dropdown-item,
[data-color-mode="dark"] .dropdown-menu .dropdown-item,
body[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
.o_dark_mode .dropdown-menu .dropdown-item,
[data-color-mode="ks-dn-dark"] .dropdown-menu .dropdown-item {
color: $dm-text-primary !important;
&:hover,
&:focus {
background-color: $dm-card-bg-hover !important;
color: $dm-text-primary !important;
}
}
// ── 11b. 全局 checkbox / form-check 可见性修复 ──
body.o_dark_mode .form-check-input[type="checkbox"],
[data-color-mode="dark"] .form-check-input[type="checkbox"],
body[data-bs-theme="dark"] .form-check-input[type="checkbox"],
.o_dark_mode .form-check-input[type="checkbox"],
[data-color-mode="ks-dn-dark"] .form-check-input[type="checkbox"] {
border-color: $dm-text-secondary !important;
background-color: transparent !important;
&:checked {
background-color: #4f46e5 !important; // 靛蓝底（Odoo 夜魔主色系）
border-color: #4f46e5 !important;
}
&:hover:not(:checked) {
border-color: $dm-text-primary !important;
}
}
// Odoo list view 专用 checkbox (.o-checkbox)
body.o_dark_mode .o-checkbox .form-check-input,
[data-color-mode="dark"] .o-checkbox .form-check-input,
body[data-bs-theme="dark"] .o-checkbox .form-check-input,
.o_dark_mode .o-checkbox .form-check-input,
[data-color-mode="ks-dn-dark"] .o-checkbox .form-check-input {
border-color: $dm-text-secondary !important;
background-color: transparent !important;
opacity: 1 !important;
&:checked {
background-color: #4f46e5 !important;
border-color: #4f46e5 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4.25 8.146 2.364 2.364 5.136-5.136'/%3e%3c/svg%3e") !important;
}
}
// ── 11c. List view 行 checkbox 容器（左侧 active 字段列） ──
body.o_dark_mode .o_list_renderer .o_data_row .o_list_record_selector,
[data-color-mode="dark"] .o_list_renderer .o_data_row .o_list_record_selector,
body[data-bs-theme="dark"] .o_list_renderer .o_data_row .o_list_record_selector,
.o_dark_mode .o_list_renderer .o_data_row .o_list_record_selector,
[data-color-mode="ks-dn-dark"] .o_list_renderer .o_data_row .o_list_record_selector {
.form-check-input {
border-color: $dm-text-secondary !important;
background-color: transparent !important;
&:checked {
background-color: #4f46e5 !important;
border-color: #4f46e5 !important;
}
}
}
// ── 11d. 下拉菜单背景色兜底（防止透明/半透明导致文字不可读） ──
body.o_dark_mode .dropdown-menu,
[data-color-mode="dark"] .dropdown-menu,
body[data-bs-theme="dark"] .dropdown-menu,
.o_dark_mode .dropdown-menu,
[data-color-mode="ks-dn-dark"] .dropdown-menu {
// 仅当背景色过浅或透明时覆盖，不覆盖已正确设置暗色背景的主题
background-color: $dm-card-bg !important;
border: 1px solid $dm-border !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
// ── 11e. Select option 元素（下拉选项） ──
body.o_dark_mode select option,
[data-color-mode="dark"] select option,
body[data-bs-theme="dark"] select option,
[data-color-mode="ks-dn-dark"] select option {
background-color: $dm-card-bg !important;
color: $dm-text-primary !important;
}
// ── 11f. Popover / Tooltip 兜底 ──
body.o_dark_mode .o_popover,
[data-color-mode="dark"] .o_popover,
body[data-bs-theme="dark"] .o_popover,
[data-color-mode="ks-dn-dark"] .o_popover {
background-color: $dm-card-bg !important;
color: $dm-text-primary !important;
border-color: $dm-border !important;
}
ks_dashboard_ninja/static/src/scss/main.scss
+2 -1
View File
@@ -3,4 +3,5 @@
@import "./overview.scss";
@import "./header.scss";
@import "./screen.scss";
@import "./modal.scss";
@import "./modal.scss";
@import "./dark_mode.scss";
udoo_om_ux/static/src/core/dialog/view.xml
+6 -5
View File
@@ -3,11 +3,6 @@
<t t-inherit="web.Dialog" t-inherit-mode="extension">
<xpath expr="//t[@t-slot='header']" position="after">
<div t-if="!isFullscreen" class="ms-auto z-buttons">
<button class="btn btn-sm lh-1 align-text-top" data-tooltip="Dismiss" data-hotkey="m" tabindex="-1" t-on-click="dismiss">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus">
<path d="M5 12h14"/>
</svg>
</button>
<button class="btn btn-sm lh-1 align-text-top" data-tooltip="Expand" data-hotkey="m" tabindex="-1" t-on-click="switch_dialog_size">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-compare">
<circle cx="18" cy="18" r="3"/>
@@ -22,6 +17,12 @@
<line x1="9" x2="15" y1="15" y2="9"/>
</svg>
</button>
<button class="btn btn-sm lh-1 align-text-top" data-tooltip="Close" data-hotkey="m" tabindex="-1" t-on-click="dismiss">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
<path d="M18 6 6 18"/>
<path d="m6 6 12 12"/>
</svg>
</button>
</div>
</xpath>
</t>