mirror of
https://github.com/openclaw/openclaw.git
synced 2026-03-12 07:20:45 +00:00
7c90ef7c52
The parent `.chat-text` applies `overflow-wrap: anywhere; word-break: break-word;` which forces long tokens (UUIDs, hashes) inside inline `<code>` to break across visual lines. When copied, the browser injects spaces at those break points, corrupting the pasted value. Override with `overflow-wrap: normal; word-break: keep-all;` on inline `<code>` selectors so tokens stay intact. Fixes #32230 Signed-off-by: HCL <chenglunhu@gmail.com>
147 lines
3.1 KiB
CSS
147 lines
3.1 KiB
CSS
/* =============================================
|
|
CHAT TEXT STYLING
|
|
============================================= */
|
|
|
|
.chat-thinking {
|
|
margin-bottom: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
border: 1px dashed rgba(255, 255, 255, 0.18);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-thinking {
|
|
border-color: rgba(16, 24, 40, 0.25);
|
|
background: rgba(16, 24, 40, 0.04);
|
|
}
|
|
|
|
.chat-text {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.chat-text :where(p, ul, ol, pre, blockquote, table) {
|
|
margin: 0;
|
|
}
|
|
|
|
.chat-text :where(p + p, p + ul, p + ol, p + pre, p + blockquote) {
|
|
margin-top: 0.75em;
|
|
}
|
|
|
|
.chat-text :where(ul, ol) {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.chat-text :where(li + li) {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.chat-text :where(a) {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.chat-text :where(a:hover) {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.chat-text :where(code) {
|
|
font-family: var(--mono);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.chat-text :where(:not(pre) > code) {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
padding: 0.15em 0.4em;
|
|
border-radius: 4px;
|
|
overflow-wrap: normal;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.chat-text :where(pre) {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
border-radius: 6px;
|
|
padding: 10px 12px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.chat-text :where(pre code) {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.chat-text :where(blockquote) {
|
|
border-left: 3px solid var(--border-strong);
|
|
padding-left: 12px;
|
|
margin-left: 0;
|
|
color: var(--muted);
|
|
background: rgba(255, 255, 255, 0.02);
|
|
padding: 8px 12px;
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
|
}
|
|
|
|
.chat-text :where(blockquote blockquote) {
|
|
margin-top: 8px;
|
|
border-left-color: var(--border-hover);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.chat-text :where(blockquote blockquote blockquote) {
|
|
border-left-color: var(--muted-strong);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-text :where(blockquote) {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-text :where(blockquote blockquote) {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-text :where(blockquote blockquote blockquote) {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-text :where(:not(pre) > code) {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:root[data-theme="light"] .chat-text :where(pre) {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chat-text :where(hr) {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 1em 0;
|
|
}
|
|
|
|
/* =============================================
|
|
RTL (Right-to-Left) SUPPORT
|
|
============================================= */
|
|
|
|
.chat-text[dir="rtl"] {
|
|
text-align: right;
|
|
}
|
|
|
|
.chat-text[dir="rtl"] :where(ul, ol) {
|
|
padding-left: 0;
|
|
padding-right: 1.5em;
|
|
}
|
|
|
|
.chat-text[dir="rtl"] :where(blockquote) {
|
|
border-left: none;
|
|
border-right: 3px solid var(--border);
|
|
padding-left: 0;
|
|
padding-right: 1em;
|
|
}
|