From b55153d707f3847f0b0ea7b8f9d1b024f1822f8c Mon Sep 17 00:00:00 2001 From: miaomaolei1114-debug Date: Sun, 15 Feb 2026 12:52:41 +0800 Subject: [PATCH 1/3] feat(web): enhance user message contrast for better visual distinction Add high-contrast styling to user messages in the Web UI: - Blue gradient background instead of subtle gray - White text for improved readability - "You" label indicator above user messages - Smooth entrance animation - Dark mode support This improves accessibility and makes it easier to distinguish user messages from assistant messages in long conversations. Fixes #XXX (reference to user feedback) --- web/src/index.css | 110 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 101 insertions(+), 9 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index 06601e57e..0c47ed10e 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -1,14 +1,5 @@ /* ========================================================================== * Kimi Code CLI Web UI - Design System - * - * - * Structure: - * 1) Tailwind & plugins - * 2) Custom variant (dark mode) - * 3) Design Tokens (CSS variables) - * 4) @theme inline: Token → Tailwind mapping - * 5) @layer base: Semantic HTML defaults - * 6) @layer components: Reusable UI patterns * ========================================================================== */ /* 1. Tailwind & Plugins */ @@ -435,3 +426,104 @@ body { opacity: 1 !important; } } + +/* ========================================================================== + * 7. User Message Contrast Enhancement + * High-contrast styling for user messages to improve visual distinction + * ========================================================================== */ + +/* + * User messages use the .is-user class (added by Message component in message.tsx) + * and the bubble is styled with rounded-2xl and bg-secondary classes. + * These styles enhance the visual distinction between user and assistant messages. + */ + +/* Enhanced user message bubble with high contrast */ +.is-user [class*="rounded-2xl"][class*="bg-secondary"] { + /* Use a distinctive gradient background instead of subtle gray */ + background: linear-gradient(135deg, + oklch(0.55 0.15 250) 0%, + oklch(0.65 0.12 250) 100% + ) !important; + + /* White text for contrast */ + color: white !important; + + /* Subtle border */ + border: 1px solid oklch(0.5 0.15 250) !important; + + /* Soft shadow for depth */ + box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important; + + /* Ensure consistent positioning for the label */ + position: relative !important; +} + +/* Ensure all text inside user message is white */ +.is-user [class*="rounded-2xl"] *, +.is-user [class*="rounded-2xl"] p, +.is-user [class*="rounded-2xl"] span, +.is-user [class*="rounded-2xl"] div { + color: white !important; +} + +/* Dark mode adjustments for user messages */ +.dark .is-user [class*="rounded-2xl"][class*="bg-secondary"] { + background: linear-gradient(135deg, + oklch(0.6 0.18 250) 0%, + oklch(0.7 0.15 250) 100% + ) !important; + border-color: oklch(0.55 0.18 250) !important; + box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3) !important; +} + +/* Add "You" label indicator above user messages */ +.is-user { + position: relative; +} + +.is-user::before { + content: "You"; + position: absolute; + top: -18px; + right: 12px; + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: oklch(0.55 0.15 250); + background: oklch(0.95 0.01 250 / 0.9); + padding: 2px 8px; + border-radius: 4px; + white-space: nowrap; + pointer-events: none; + z-index: 10; + border: 1px solid oklch(0.8 0.05 250); +} + +.dark .is-user::before { + color: oklch(0.75 0.2 250); + background: oklch(0.2 0.02 250 / 0.9); + border-color: oklch(0.4 0.1 250); +} + +/* Add top margin to user message container to accommodate the label */ +.is-user { + margin-top: 20px !important; +} + +/* Animation for new user messages */ +@keyframes user-message-appear { + from { + opacity: 0; + transform: translateY(4px) scale(0.98); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.is-user { + animation: user-message-appear 200ms ease-out; +} From 1c184607ec7d904867efdde0fc64e1efd9c65d57 Mon Sep 17 00:00:00 2001 From: miaomaolei1114-debug Date: Sun, 15 Feb 2026 13:22:42 +0800 Subject: [PATCH 2/3] fix(web): use padding-top instead of margin-top to preserve dynamic spacing Replace margin-top with padding-top for the .is-user class to avoid overriding the dynamic spacing logic from spacingClass. This fixes the issue where the fixed margin was breaking context-aware spacing calculations (e.g., first message vs. subsequent messages, different spacing based on previous message role). The padding-top still provides the necessary space for the "You" label without interfering with the component's dynamic margin logic. --- web/src/index.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index 0c47ed10e..cbc48a182 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -480,12 +480,15 @@ body { /* Add "You" label indicator above user messages */ .is-user { position: relative; + /* Use padding-top instead of margin-top to preserve dynamic spacing logic */ + /* This provides space for the "You" label without overriding spacingClass */ + padding-top: 20px; } .is-user::before { content: "You"; position: absolute; - top: -18px; + top: 0; right: 12px; font-size: 10px; font-weight: 600; @@ -507,11 +510,6 @@ body { border-color: oklch(0.4 0.1 250); } -/* Add top margin to user message container to accommodate the label */ -.is-user { - margin-top: 20px !important; -} - /* Animation for new user messages */ @keyframes user-message-appear { from { From edf3a8cb25cc692d43dbfa6c79d4544a52c828a7 Mon Sep 17 00:00:00 2001 From: miaomaolei1114-debug Date: Tue, 17 Feb 2026 23:21:07 +0800 Subject: [PATCH 3/3] refactor(web): simplify user message contrast styles - Remove redundant CSS selectors - Consolidate text color rules - Improve code comments - Keep padding-top approach to preserve dynamic spacing --- web/src/index.css | 31 +++++++------------------------ 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index cbc48a182..e51f837b5 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -429,45 +429,30 @@ body { /* ========================================================================== * 7. User Message Contrast Enhancement - * High-contrast styling for user messages to improve visual distinction * ========================================================================== */ /* - * User messages use the .is-user class (added by Message component in message.tsx) - * and the bubble is styled with rounded-2xl and bg-secondary classes. - * These styles enhance the visual distinction between user and assistant messages. + * High-contrast styling for user messages to improve visual distinction + * from assistant messages in conversation history. */ -/* Enhanced user message bubble with high contrast */ +/* User message bubble styling */ .is-user [class*="rounded-2xl"][class*="bg-secondary"] { - /* Use a distinctive gradient background instead of subtle gray */ background: linear-gradient(135deg, oklch(0.55 0.15 250) 0%, oklch(0.65 0.12 250) 100% ) !important; - - /* White text for contrast */ color: white !important; - - /* Subtle border */ border: 1px solid oklch(0.5 0.15 250) !important; - - /* Soft shadow for depth */ box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important; - - /* Ensure consistent positioning for the label */ - position: relative !important; } /* Ensure all text inside user message is white */ -.is-user [class*="rounded-2xl"] *, -.is-user [class*="rounded-2xl"] p, -.is-user [class*="rounded-2xl"] span, -.is-user [class*="rounded-2xl"] div { +.is-user [class*="rounded-2xl"] * { color: white !important; } -/* Dark mode adjustments for user messages */ +/* Dark mode adjustments */ .dark .is-user [class*="rounded-2xl"][class*="bg-secondary"] { background: linear-gradient(135deg, oklch(0.6 0.18 250) 0%, @@ -477,11 +462,9 @@ body { box-shadow: 0 2px 12px rgba(37, 99, 235, 0.3) !important; } -/* Add "You" label indicator above user messages */ +/* "You" label indicator - uses padding-top to preserve dynamic spacing */ .is-user { position: relative; - /* Use padding-top instead of margin-top to preserve dynamic spacing logic */ - /* This provides space for the "You" label without overriding spacingClass */ padding-top: 20px; } @@ -510,7 +493,7 @@ body { border-color: oklch(0.4 0.1 250); } -/* Animation for new user messages */ +/* Entrance animation */ @keyframes user-message-appear { from { opacity: 0;