Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 11:02:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(llm): do a better job with the "thinking" colors

Browse Source
This commit is contained in:
perf3ct 2025-06-01 03:23:04 +00:00
parent d948ef5ed2
commit 596f99ed0c
No known key found for this signature in database
GPG Key ID: 569C4EEC436F5232
1 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/client/src/stylesheets/llm_chat.css
View File

@ -281,13 +281,18 @@
} }
.thinking-bubble { .thinking-bubble {
background: linear-gradient(135deg, #f8f9ff 0%, #e3e7ff 100%); background-color: var(--accented-background-color, var(--main-background-color));
border: 1px solid #d1d9ff; border: 1px solid var(--subtle-border-color, var(--main-border-color));
border-radius: 12px; border-radius: 0.75rem;
padding: 0.75rem; padding: 0.75rem;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: all 0.2s ease;
}
.thinking-bubble:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
} }
.thinking-bubble::before { .thinking-bubble::before {
@ -297,18 +302,19 @@
left: -100%; left: -100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent);
animation: shimmer 2s infinite; animation: shimmer 2s infinite;
opacity: 0.5;
} }
.thinking-header { .thinking-header {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
border-radius: 0.375rem;
} }
.thinking-header:hover { .thinking-header:hover {
background: rgba(99, 102, 241, 0.05); background-color: var(--hover-item-background-color, rgba(0, 0, 0, 0.03));
border-radius: 8px;
padding: 0.25rem; padding: 0.25rem;
margin: -0.25rem; margin: -0.25rem;
} }
@ -322,7 +328,7 @@
.thinking-dots span { .thinking-dots span {
width: 6px; width: 6px;
height: 6px; height: 6px;
background: #6366f1; background-color: var(--link-color, var(--hover-item-text-color));
border-radius: 50%; border-radius: 50%;
animation: thinkingPulse 1.4s infinite ease-in-out; animation: thinkingPulse 1.4s infinite ease-in-out;
} }
@ -341,12 +347,18 @@
.thinking-label { .thinking-label {
font-weight: 500; font-weight: 500;
color: #6366f1 !important; color: var(--link-color, var(--hover-item-text-color)) !important;
} }
.thinking-toggle { .thinking-toggle {
color: #6366f1 !important; color: var(--muted-text-color) !important;
transition: transform 0.2s ease; transition: transform 0.2s ease;
background: transparent !important;
border: none !important;
}
.thinking-toggle:hover {
color: var(--main-text-color) !important;
} }
.thinking-toggle.expanded { .thinking-toggle.expanded {
@ -356,7 +368,7 @@
.thinking-content { .thinking-content {
margin-top: 0.75rem; margin-top: 0.75rem;
padding-top: 0.75rem; padding-top: 0.75rem;
border-top: 1px solid #e5e7eb; border-top: 1px solid var(--subtle-border-color, var(--main-border-color));
animation: expandDown 0.3s ease-out; animation: expandDown 0.3s ease-out;
} }
@ -364,15 +376,20 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
color: #4b5563; color: var(--main-text-color);
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
background: rgba(255, 255, 255, 0.7); background-color: var(--input-background-color);
padding: 0.75rem; padding: 0.75rem;
border-radius: 8px; border-radius: 0.5rem;
border: 1px solid rgba(99, 102, 241, 0.1); border: 1px solid var(--subtle-border-color, var(--main-border-color));
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
transition: border-color 0.2s ease;
}
.thinking-text:hover {
border-color: var(--main-border-color);
} }
/* Animations */ /* Animations */