mirror of
https://github.com/xmanrui/OpenClaw-bot-review.git
synced 2026-07-27 22:25:52 +00:00
fix(ui): improve light theme text contrast in pixel office
This commit is contained in:
xmanrui
+88
-7
@@ -13,15 +13,96 @@
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--bg: #f8fafc;
|
||||
--bg: #f3f6fb;
|
||||
--card: #ffffff;
|
||||
--border: #e2e8f0;
|
||||
--text: #0f172a;
|
||||
--text-muted: #64748b;
|
||||
--accent: #0284c7;
|
||||
--border: #cbd5e1;
|
||||
--text: #0b1220;
|
||||
--text-muted: #475569;
|
||||
--accent: #0369a1;
|
||||
--accent2: #7c3aed;
|
||||
--green: #16a34a;
|
||||
--orange: #ea580c;
|
||||
--green: #15803d;
|
||||
--orange: #c2410c;
|
||||
}
|
||||
|
||||
/* Improve readability for hard-coded dark-theme utility colors in light mode. */
|
||||
[data-theme="light"] .text-blue-300 { color: #1d4ed8 !important; }
|
||||
[data-theme="light"] .text-sky-300 { color: #0369a1 !important; }
|
||||
[data-theme="light"] .text-green-300 { color: #166534 !important; }
|
||||
[data-theme="light"] .text-purple-300 { color: #6d28d9 !important; }
|
||||
[data-theme="light"] .text-yellow-300 { color: #a16207 !important; }
|
||||
[data-theme="light"] .text-cyan-300 { color: #0e7490 !important; }
|
||||
[data-theme="light"] .text-orange-300 { color: #c2410c !important; }
|
||||
[data-theme="light"] .text-gray-300 { color: #475569 !important; }
|
||||
[data-theme="light"] .text-slate-400 { color: #475569 !important; }
|
||||
[data-theme="light"] .text-green-400 { color: #166534 !important; }
|
||||
[data-theme="light"] .text-yellow-400 { color: #a16207 !important; }
|
||||
[data-theme="light"] .text-red-400 { color: #b91c1c !important; }
|
||||
[data-theme="light"] .text-blue-400 { color: #1e40af !important; }
|
||||
[data-theme="light"] .text-purple-400 { color: #6b21a8 !important; }
|
||||
[data-theme="light"] .text-cyan-400 { color: #0e7490 !important; }
|
||||
[data-theme="light"] .text-orange-400 { color: #c2410c !important; }
|
||||
[data-theme="light"] .text-gray-400 { color: #475569 !important; }
|
||||
|
||||
[data-theme="light"] .border-blue-500\/30 { border-color: rgba(59, 130, 246, 0.45) !important; }
|
||||
[data-theme="light"] .border-sky-500\/30 { border-color: rgba(14, 165, 233, 0.45) !important; }
|
||||
[data-theme="light"] .border-green-500\/30 { border-color: rgba(34, 197, 94, 0.45) !important; }
|
||||
[data-theme="light"] .border-purple-500\/30 { border-color: rgba(168, 85, 247, 0.45) !important; }
|
||||
[data-theme="light"] .border-yellow-500\/30 { border-color: rgba(234, 179, 8, 0.5) !important; }
|
||||
[data-theme="light"] .border-cyan-500\/30 { border-color: rgba(6, 182, 212, 0.45) !important; }
|
||||
[data-theme="light"] .border-orange-500\/30 { border-color: rgba(249, 115, 22, 0.45) !important; }
|
||||
[data-theme="light"] .border-gray-500\/30 { border-color: rgba(100, 116, 139, 0.45) !important; }
|
||||
|
||||
[data-theme="light"] .bg-blue-500\/20 { background-color: rgba(59, 130, 246, 0.14) !important; }
|
||||
[data-theme="light"] .bg-sky-500\/20 { background-color: rgba(14, 165, 233, 0.14) !important; }
|
||||
[data-theme="light"] .bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.14) !important; }
|
||||
[data-theme="light"] .bg-purple-500\/20 { background-color: rgba(168, 85, 247, 0.14) !important; }
|
||||
[data-theme="light"] .bg-yellow-500\/20 { background-color: rgba(234, 179, 8, 0.14) !important; }
|
||||
[data-theme="light"] .bg-cyan-500\/20 { background-color: rgba(6, 182, 212, 0.14) !important; }
|
||||
[data-theme="light"] .bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.14) !important; }
|
||||
[data-theme="light"] .bg-gray-500\/20 { background-color: rgba(100, 116, 139, 0.14) !important; }
|
||||
[data-theme="light"] .bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.12) !important; }
|
||||
[data-theme="light"] .bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.12) !important; }
|
||||
[data-theme="light"] .bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.12) !important; }
|
||||
|
||||
/* Pixel Office top agent chips: explicit contrast control for both themes */
|
||||
.pixel-agent-chip-state {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.pixel-agent-chip-working {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
border-color: rgba(34, 197, 94, 0.35);
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.pixel-agent-chip-idle {
|
||||
background: rgba(250, 204, 21, 0.14);
|
||||
border-color: rgba(250, 204, 21, 0.35);
|
||||
color: #facc15;
|
||||
}
|
||||
|
||||
.pixel-agent-chip-neutral {
|
||||
background: rgba(100, 116, 139, 0.22);
|
||||
border-color: rgba(148, 163, 184, 0.42);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
[data-theme="light"] .pixel-agent-chip-working {
|
||||
background: rgba(34, 197, 94, 0.16);
|
||||
border-color: rgba(34, 197, 94, 0.5);
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
[data-theme="light"] .pixel-agent-chip-idle {
|
||||
background: rgba(234, 179, 8, 0.18);
|
||||
border-color: rgba(202, 138, 4, 0.5);
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
[data-theme="light"] .pixel-agent-chip-neutral {
|
||||
background: rgba(148, 163, 184, 0.18);
|
||||
border-color: rgba(100, 116, 139, 0.44);
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@@ -1060,19 +1060,19 @@ export default function PixelOfficePage() {
|
||||
<span className="text-sm font-bold text-[var(--text)] mr-2">{t('pixelOffice.title')}</span>
|
||||
<div className="flex flex-wrap gap-2 flex-1">
|
||||
{agents.map(agent => (
|
||||
<div key={agent.agentId} className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${
|
||||
agent.state === 'working' ? 'bg-green-500/10 border-green-500/30 text-green-500 animate-pulse' :
|
||||
agent.state === 'idle' ? 'bg-yellow-500/10 border-yellow-500/30 text-yellow-500 animate-pulse' :
|
||||
'bg-slate-600/20 border-slate-500/40 text-slate-300'
|
||||
<div key={agent.agentId} className={`pixel-agent-chip inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${
|
||||
agent.state === 'working' ? 'pixel-agent-chip-working animate-pulse' :
|
||||
agent.state === 'idle' ? 'pixel-agent-chip-idle animate-pulse' :
|
||||
'pixel-agent-chip-neutral'
|
||||
}`}
|
||||
{...(agent.state === 'working' ? { style: { animationDuration: '1.3s' } } : {})}
|
||||
>
|
||||
<span>{agent.emoji}</span>
|
||||
<span className="text-sm">{agent.name}</span>
|
||||
{agent.state === 'working' && <span className="text-[10px] uppercase tracking-wider opacity-70">{t('pixelOffice.state.working')}</span>}
|
||||
{agent.state === 'idle' && <span className="text-[10px] uppercase tracking-wider opacity-50">{t('pixelOffice.state.idle')}</span>}
|
||||
{agent.state === 'offline' && <span className="text-[10px] uppercase tracking-wider opacity-40">{t('pixelOffice.state.offline')}</span>}
|
||||
{agent.state === 'waiting' && <span className="text-[10px] uppercase tracking-wider opacity-60">{t('pixelOffice.state.waiting')}</span>}
|
||||
{agent.state === 'working' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.working')}</span>}
|
||||
{agent.state === 'idle' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.idle')}</span>}
|
||||
{agent.state === 'offline' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.offline')}</span>}
|
||||
{agent.state === 'waiting' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.waiting')}</span>}
|
||||
</div>
|
||||
))}
|
||||
{agents.length === 0 && (
|
||||
|
||||
Reference in New Issue
Block a user