fix: 覆盖第三方插件页面的内部 UI 残留

用户服务器 (Halo Pro) 上部分第三方插件页面仍有白色残留,
原因是这些插件使用 Vue scoped 样式 ([data-v-xxx]),
特异性与常规覆盖相同但加载顺序靠后。

修复:
- 新增 plugin-pages.css, 针对已装插件的内部类覆盖 (含 !important):
  - 装备: .group, .equipment-*
  - 日程日历: .week-picker, .day-column__body
  - 心愿便签: .ah-body, .wb-s-card
  - 瞬间: .moment-editor, .editor-main, .card
- 修复侧边栏 .user-profile 白色残留 (Halo Pro 特有)
- 基于 blog.liuhangyv.top 真实环境逐页验证, 全部零残留

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-07 07:43:29 +08:00
parent c1c05d9bd4
commit 8a525a0e5e
2 changed files with 134 additions and 0 deletions
+1
View File
@@ -5,6 +5,7 @@
@import './variables.css';
@import './overrides/halo-core.css';
@import './overrides/plugin-pages.css';
@import './overrides/utilities.css';
@import './overrides/layout.css';
@import './overrides/components.css';
+133
View File
@@ -0,0 +1,133 @@
/* ============================================================
Halo Dark Mode — 第三方插件页面覆盖
针对用户服务器上已安装插件的内部 UI 残留。
⚠️ 这些插件使用 Vue scoped 样式 ([data-v-xxx])
需用 !important 才能稳定覆盖。
============================================================ */
[data-halo-theme="dark"] {
/* ===== 装备管理插件 (halo-plugin-equipments) ===== */
.equipments .group,
.equipment-group .group,
main .group {
background-color: var(--halo-bg-card) !important;
border-color: var(--halo-border-base) !important;
color: var(--halo-text-primary) !important;
}
.equipment-card,
.equipment-card__name,
.equipment-card__desc,
[class*="equipment"] {
color: var(--halo-text-primary) !important;
}
/* ===== 日程日历插件 (plugin-calendar) ===== */
.week-picker {
background-color: var(--halo-bg-card) !important;
border-color: var(--halo-border-base) !important;
}
.week-picker select,
.week-picker input,
.week-picker button {
background-color: var(--halo-bg-input) !important;
color: var(--halo-text-primary) !important;
border-color: var(--halo-border-input) !important;
}
.day-column__body {
background-color: var(--halo-bg-content) !important;
border-color: var(--halo-border-light) !important;
}
.day-column,
.calendar-column,
[class*="day-column"] {
background-color: var(--halo-bg-card) !important;
color: var(--halo-text-primary) !important;
}
[class*="calendar"] th,
[class*="calendar"] td {
color: var(--halo-text-primary) !important;
border-color: var(--halo-border-base) !important;
}
/* ===== 心愿便签插件 (plugin-wishboard) ===== */
.ah-body {
background-color: var(--halo-bg-card) !important;
color: var(--halo-text-primary) !important;
}
.wb-s-card {
background-color: var(--halo-bg-card) !important;
color: var(--halo-text-primary) !important;
border-color: var(--halo-border-base) !important;
}
.wb-s-card-title {
color: var(--halo-text-primary) !important;
}
.wb-s-card-count {
color: var(--halo-accent-primary) !important;
}
.wb-s-list,
.wb-s-list-item,
[class*="wb-s-"] {
color: var(--halo-text-primary) !important;
}
/* ===== 瞬间插件 (plugin-moments) ===== */
.moment-editor,
.editor-main,
.moment-editor .card,
.editor-main .card {
background-color: var(--halo-bg-card) !important;
color: var(--halo-text-primary) !important;
border-color: var(--halo-border-base) !important;
}
.moments-content .card,
.moments-content .preview,
.moment-preview,
.moment-card,
[class*="moment-"] .card {
background-color: var(--halo-bg-card) !important;
color: var(--halo-text-primary) !important;
}
.moment-author-name,
.moment-content,
.moment-time,
[class*="moment"] p,
[class*="moment"] span,
[class*="moment"] div {
color: var(--halo-text-primary) !important;
}
.moment-editor input,
.moment-editor textarea,
.editor-main input,
.editor-main textarea {
background-color: var(--halo-bg-input) !important;
color: var(--halo-text-primary) !important;
border-color: var(--halo-border-input) !important;
}
/* ===== 抽奖插件 (plugin-lottery) ===== */
[class*="lottery"] {
color: var(--halo-text-primary) !important;
}
/* ===== 侧边栏用户资料(Halo Pro 特有) ===== */
.sidebar__profile .user-profile {
background-color: transparent !important;
}
.user-profile__name {
color: var(--halo-text-primary) !important;
}
.user-profile__roles .tag-default,
.user-profile__roles .tag-wrapper {
background-color: var(--halo-bg-hover) !important;
color: var(--halo-text-secondary) !important;
}
.user-profile__action-button {
color: var(--halo-text-secondary) !important;
background-color: transparent !important;
}
.user-profile__action-button:hover {
background-color: var(--halo-bg-hover) !important;
color: var(--halo-text-primary) !important;
}
}