mirror of
https://github.com/hansjone/oclaw.git
synced 2026-10-09 04:40:45 +08:00
fix(admin): make popups and overlays respect light theme
Replace hardcoded dark modal, menu, toast, and lightbox colors with theme CSS variables so text stays readable in light mode. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
30202dd291
commit
ad1b95d0bc
6 changed files with 122 additions and 54 deletions
|
|
@ -118,12 +118,13 @@
|
|||
}
|
||||
.chat-sess-menu-pop {
|
||||
z-index: 200;
|
||||
background: var(--ds-panel, #222);
|
||||
background: var(--ds-panel, var(--ds-surface, #222));
|
||||
border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
min-width: 11rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
box-shadow: var(--ds-pop-shadow, 0 8px 24px rgba(0, 0, 0, 0.45));
|
||||
color: var(--ds-text, inherit);
|
||||
}
|
||||
.chat-sess-menu-item {
|
||||
display: block;
|
||||
|
|
@ -138,12 +139,12 @@
|
|||
font-size: 13px;
|
||||
}
|
||||
.chat-sess-menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: var(--ds-menu-hover-bg, rgba(255, 255, 255, 0.06));
|
||||
}
|
||||
.chat-sess-menu-sep {
|
||||
height: 1px;
|
||||
margin: 4px 6px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--ds-menu-sep, rgba(255, 255, 255, 0.08));
|
||||
}
|
||||
.chat-msg__md {
|
||||
line-height: 1.45;
|
||||
|
|
@ -209,7 +210,7 @@
|
|||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 300;
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
background: var(--ds-lightbox-bg, rgba(0, 0, 0, 0.88));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -239,10 +240,10 @@
|
|||
right: -8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #eee;
|
||||
background: var(--ds-lightbox-control-bg, rgba(255, 255, 255, 0.12));
|
||||
color: var(--ds-lightbox-control-fg, #eee);
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
|
@ -252,7 +253,7 @@
|
|||
justify-content: center;
|
||||
}
|
||||
.chat-img-lightbox__close:hover {
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
background: var(--ds-lightbox-control-hover-bg, rgba(255, 255, 255, 0.22));
|
||||
}
|
||||
.chat-att-chip {
|
||||
font-size: 12px;
|
||||
|
|
@ -495,7 +496,7 @@
|
|||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 400;
|
||||
background: rgba(0, 0, 0, 0.58);
|
||||
background: var(--ds-overlay-bg, rgba(0, 0, 0, 0.58));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -503,10 +504,10 @@
|
|||
}
|
||||
.chat-confirm-card {
|
||||
width: min(420px, 92vw);
|
||||
background: linear-gradient(180deg, rgba(11, 18, 30, 0.98), rgba(7, 12, 22, 0.98));
|
||||
border: 1px solid rgba(94, 179, 255, 0.35);
|
||||
background: var(--ds-surface, #ffffff);
|
||||
border: 1px solid var(--ds-accent-border, rgba(94, 179, 255, 0.35));
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: var(--ds-modal-shadow, 0 16px 48px rgba(0, 0, 0, 0.55));
|
||||
color: var(--ds-text, #e8e8e8);
|
||||
padding: 14px;
|
||||
}
|
||||
|
|
@ -529,8 +530,9 @@
|
|||
width: min(520px, 92vw);
|
||||
padding: 22px 20px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--ds-splash-border, rgba(255, 255, 255, 0.1));
|
||||
background: var(--ds-splash-bg, rgba(255, 255, 255, 0.04));
|
||||
color: var(--ds-text, #e8e8e8);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.chat-boot-splash__title {
|
||||
|
|
@ -544,8 +546,8 @@
|
|||
.chat-boot-splash__spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
border-top-color: rgba(255, 255, 255, 0.75);
|
||||
border: 2px solid var(--ds-splash-spinner-track, rgba(255, 255, 255, 0.15));
|
||||
border-top-color: var(--ds-splash-spinner-active, rgba(255, 255, 255, 0.75));
|
||||
border-radius: 999px;
|
||||
animation: chat-boot-spin 1s linear infinite;
|
||||
flex: 0 0 auto;
|
||||
|
|
|
|||
|
|
@ -808,24 +808,16 @@ function memoryModeShortLabel(memoryMode) {
|
|||
function _ensureToastHost() {
|
||||
let host = document.querySelector(".chat-toast-host");
|
||||
if (host) return host;
|
||||
host = el("div", {
|
||||
class: "chat-toast-host",
|
||||
style:
|
||||
"position:fixed;right:14px;bottom:14px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:420px;pointer-events:none;",
|
||||
});
|
||||
host = el("div", { class: "chat-toast-host" });
|
||||
document.body.appendChild(host);
|
||||
return host;
|
||||
}
|
||||
|
||||
function showToast(text, { kind = "info", ttlMs = 4200 } = {}) {
|
||||
const host = _ensureToastHost();
|
||||
const bg = kind === "error" ? "rgba(160,40,40,0.96)" : "rgba(30,30,30,0.92)";
|
||||
const node = el("div", {
|
||||
class: "chat-toast",
|
||||
class: kind === "error" ? "chat-toast chat-toast--error" : "chat-toast",
|
||||
text: String(text || ""),
|
||||
style:
|
||||
`pointer-events:auto;padding:10px 12px;border-radius:10px;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35);` +
|
||||
`background:${bg};font-size:12.5px;line-height:1.35;white-space:pre-wrap;`,
|
||||
});
|
||||
host.appendChild(node);
|
||||
const kill = () => {
|
||||
|
|
@ -958,7 +950,7 @@ async function openDispatchLabelsEditor(statusEl) {
|
|||
const preview = el("textarea", {
|
||||
class: "input",
|
||||
style:
|
||||
"width:100%;min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f8fafc;",
|
||||
"width:100%;min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;",
|
||||
readonly: "readonly",
|
||||
});
|
||||
const btnSave = el("button", { type: "button", class: "btn btn--primary", text: t("chat.dispatchLabelsSave") });
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
/* First paint before app.js runs: keep admin from showing a blank dark screen. */
|
||||
.admin-boot-splash {
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--ds-splash-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
background: var(--ds-splash-bg, rgba(255, 255, 255, 0.04));
|
||||
color: var(--ds-text, #e8e8e8);
|
||||
line-height: 1.5;
|
||||
max-width: 520px;
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
.admin-boot-splash__spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
border-top-color: rgba(255, 255, 255, 0.75);
|
||||
border: 2px solid var(--ds-splash-spinner-track, rgba(255, 255, 255, 0.15));
|
||||
border-top-color: var(--ds-splash-spinner-active, rgba(255, 255, 255, 0.75));
|
||||
border-radius: 999px;
|
||||
animation: admin-boot-spin 1s linear infinite;
|
||||
flex: 0 0 auto;
|
||||
|
|
|
|||
|
|
@ -329,7 +329,7 @@ input[type="checkbox"]:checked::before,
|
|||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 320;
|
||||
background: rgba(0, 0, 0, 0.58);
|
||||
background: var(--ds-overlay-bg, rgba(0, 0, 0, 0.58));
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
|
|
@ -387,7 +387,7 @@ input[type="checkbox"]:checked::before,
|
|||
box-shadow: none;
|
||||
}
|
||||
.chat-sess-more:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: var(--ds-menu-hover-bg, rgba(255, 255, 255, 0.06));
|
||||
}
|
||||
.chat-sess-more:focus {
|
||||
outline: none;
|
||||
|
|
@ -405,12 +405,13 @@ input[type="checkbox"]:checked::before,
|
|||
}
|
||||
.chat-sess-menu-pop {
|
||||
z-index: 300;
|
||||
background: #222;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: var(--ds-panel, var(--ds-surface, #222));
|
||||
border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
|
||||
border-radius: 10px;
|
||||
padding: 4px;
|
||||
min-width: 11rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
box-shadow: var(--ds-pop-shadow, 0 8px 24px rgba(0, 0, 0, 0.45));
|
||||
color: var(--ds-text, inherit);
|
||||
}
|
||||
.chat-sess-menu-item {
|
||||
display: block;
|
||||
|
|
@ -425,7 +426,7 @@ input[type="checkbox"]:checked::before,
|
|||
font-size: 13px;
|
||||
}
|
||||
.chat-sess-menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: var(--ds-menu-hover-bg, rgba(255, 255, 255, 0.06));
|
||||
}
|
||||
|
||||
.table--resizable thead th {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,27 @@ body.theme-ds-body {
|
|||
/* 用户消息气泡（微信式绿底深字） */
|
||||
--chat-user-bubble-bg: #42b983;
|
||||
--chat-user-bubble-fg: #111111;
|
||||
/* 弹层 / 菜单 / Toast */
|
||||
--ds-overlay-bg: rgba(0, 0, 0, 0.58);
|
||||
--ds-menu-hover-bg: rgba(255, 255, 255, 0.06);
|
||||
--ds-menu-sep: rgba(255, 255, 255, 0.08);
|
||||
--ds-pop-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||||
--ds-modal-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
|
||||
--ds-scroll-track-hover: rgba(255, 255, 255, 0.06);
|
||||
--ds-lightbox-bg: rgba(0, 0, 0, 0.78);
|
||||
--ds-lightbox-panel-bg: rgba(2, 6, 23, 0.55);
|
||||
--ds-lightbox-control-bg: rgba(15, 23, 42, 0.85);
|
||||
--ds-lightbox-control-fg: rgba(255, 255, 255, 0.9);
|
||||
--ds-lightbox-control-hover-bg: rgba(30, 41, 59, 0.9);
|
||||
--ds-lightbox-btn-bg: rgba(2, 6, 23, 0.45);
|
||||
--ds-lightbox-btn-hover-bg: rgba(30, 41, 59, 0.75);
|
||||
--ds-toast-bg: rgba(30, 30, 30, 0.92);
|
||||
--ds-toast-error-bg: rgba(160, 40, 40, 0.96);
|
||||
--ds-toast-fg: #ffffff;
|
||||
--ds-splash-bg: rgba(255, 255, 255, 0.04);
|
||||
--ds-splash-border: rgba(255, 255, 255, 0.1);
|
||||
--ds-splash-spinner-track: rgba(255, 255, 255, 0.15);
|
||||
--ds-splash-spinner-active: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
body.theme-ds-body .layout .sidebar {
|
||||
|
|
@ -390,7 +411,7 @@ body.theme-ds-body .card {
|
|||
.chat-pending-files:hover,
|
||||
.table-wrap:hover,
|
||||
.session-monitor-modal__card:hover {
|
||||
scrollbar-color: var(--ds-accent-scrollbar) rgba(255, 255, 255, 0.06);
|
||||
scrollbar-color: var(--ds-accent-scrollbar) var(--ds-scroll-track-hover);
|
||||
}
|
||||
|
||||
.chat-msg__reasoning-pre::-webkit-scrollbar,
|
||||
|
|
@ -429,7 +450,7 @@ body.theme-ds-body .card {
|
|||
.chat-pending-files:hover::-webkit-scrollbar-track,
|
||||
.table-wrap:hover::-webkit-scrollbar-track,
|
||||
.session-monitor-modal__card:hover::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
background: var(--ds-scroll-track-hover);
|
||||
}
|
||||
|
||||
.chat-msg__reasoning-pre:hover::-webkit-scrollbar-thumb,
|
||||
|
|
@ -655,7 +676,7 @@ body.theme-ds-body .card {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px;
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
background: var(--ds-lightbox-bg, rgba(0, 0, 0, 0.78));
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
|
|
@ -667,8 +688,8 @@ body.theme-ds-body .card {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
background: rgba(2, 6, 23, 0.55);
|
||||
border: 1px solid var(--ds-border, rgba(148, 163, 184, 0.28));
|
||||
background: var(--ds-lightbox-panel-bg, rgba(2, 6, 23, 0.55));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -679,16 +700,16 @@ body.theme-ds-body .card {
|
|||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid var(--ds-border, rgba(148, 163, 184, 0.35));
|
||||
background: var(--ds-lightbox-control-bg, rgba(15, 23, 42, 0.85));
|
||||
color: var(--ds-lightbox-control-fg, rgba(255, 255, 255, 0.9));
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.chat-img-lightbox__close:hover {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
background: var(--ds-lightbox-control-hover-bg, rgba(30, 41, 59, 0.9));
|
||||
}
|
||||
|
||||
.chat-img-lightbox__img {
|
||||
|
|
@ -742,8 +763,8 @@ body.theme-ds-body .card {
|
|||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border: 1px solid var(--ds-border, rgba(148, 163, 184, 0.35));
|
||||
background: var(--ds-lightbox-control-bg, rgba(15, 23, 42, 0.85));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -751,16 +772,16 @@ body.theme-ds-body .card {
|
|||
width: 40px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
background: rgba(2, 6, 23, 0.45);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid var(--ds-border, rgba(148, 163, 184, 0.3));
|
||||
background: var(--ds-lightbox-btn-bg, rgba(2, 6, 23, 0.45));
|
||||
color: var(--ds-lightbox-control-fg, rgba(255, 255, 255, 0.92));
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chat-mermaid-lightbox__btn:hover {
|
||||
background: rgba(30, 41, 59, 0.75);
|
||||
background: var(--ds-lightbox-btn-hover-bg, rgba(30, 41, 59, 0.75));
|
||||
}
|
||||
|
||||
.chat-img-lightbox__btn--icon {
|
||||
|
|
@ -776,11 +797,43 @@ body.theme-ds-body .card {
|
|||
}
|
||||
|
||||
.chat-mermaid-lightbox__zoom {
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
color: var(--ds-text-muted, rgba(226, 232, 240, 0.9));
|
||||
font-size: 12px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.chat-toast-host {
|
||||
position: fixed;
|
||||
right: 14px;
|
||||
bottom: 14px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: 420px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chat-toast {
|
||||
pointer-events: auto;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
color: var(--ds-toast-fg, #fff);
|
||||
box-shadow: var(--ds-pop-shadow, 0 8px 24px rgba(0, 0, 0, 0.35));
|
||||
background: var(--ds-toast-bg, rgba(30, 30, 30, 0.92));
|
||||
border: 1px solid var(--ds-border, transparent);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.35;
|
||||
white-space: pre-wrap;
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
|
||||
.chat-toast--error {
|
||||
background: var(--ds-toast-error-bg, rgba(160, 40, 40, 0.96));
|
||||
color: #ffffff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.chat-mermaid-lightbox__svg svg {
|
||||
width: max(980px, 96vw);
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -149,6 +149,26 @@ body.theme-ds-body[data-admin-theme="light"] {
|
|||
--chat-sess-border: rgba(15, 23, 42, 0.1);
|
||||
--chat-user-bubble-bg: #10b981;
|
||||
--chat-user-bubble-fg: #ffffff;
|
||||
--ds-overlay-bg: rgba(15, 23, 42, 0.35);
|
||||
--ds-menu-hover-bg: rgba(15, 23, 42, 0.06);
|
||||
--ds-menu-sep: rgba(15, 23, 42, 0.1);
|
||||
--ds-pop-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
--ds-modal-shadow: 0 16px 48px rgba(15, 23, 42, 0.15);
|
||||
--ds-scroll-track-hover: rgba(15, 23, 42, 0.06);
|
||||
--ds-lightbox-bg: rgba(15, 23, 42, 0.45);
|
||||
--ds-lightbox-panel-bg: #ffffff;
|
||||
--ds-lightbox-control-bg: #ffffff;
|
||||
--ds-lightbox-control-fg: #0f172a;
|
||||
--ds-lightbox-control-hover-bg: #e2e8f0;
|
||||
--ds-lightbox-btn-bg: #f1f5f9;
|
||||
--ds-lightbox-btn-hover-bg: #e2e8f0;
|
||||
--ds-toast-bg: #ffffff;
|
||||
--ds-toast-error-bg: rgba(220, 38, 38, 0.95);
|
||||
--ds-toast-fg: #0f172a;
|
||||
--ds-splash-bg: #ffffff;
|
||||
--ds-splash-border: rgba(15, 23, 42, 0.12);
|
||||
--ds-splash-spinner-track: rgba(15, 23, 42, 0.12);
|
||||
--ds-splash-spinner-active: rgba(15, 23, 42, 0.55);
|
||||
}
|
||||
|
||||
body.theme-ds-body[data-admin-theme="light"] .nav__groupTitle {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue