Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 04:16:17 +01:00
Code Issues Packages Projects Releases 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
1 changed files with 32 additions and 15 deletions
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 {
background: linear-gradient(135deg, #f8f9ff 0%, #e3e7ff 100%);
border: 1px solid #d1d9ff;
border-radius: 12px;
background-color: var(--accented-background-color, var(--main-background-color));
border: 1px solid var(--subtle-border-color, var(--main-border-color));
border-radius: 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;
overflow: hidden;
transition: all 0.2s ease;
}
.thinking-bubble:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.thinking-bubble::before {
@@ -297,18 +302,19 @@
left: -100%;
width: 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;
opacity: 0.5;
}
.thinking-header {
cursor: pointer;
transition: all 0.2s ease;
border-radius: 0.375rem;
}
.thinking-header:hover {
background: rgba(99, 102, 241, 0.05);
border-radius: 8px;
background-color: var(--hover-item-background-color, rgba(0, 0, 0, 0.03));
padding: 0.25rem;
margin: -0.25rem;
}
@@ -322,7 +328,7 @@
.thinking-dots span {
width: 6px;
height: 6px;
background: #6366f1;
background-color: var(--link-color, var(--hover-item-text-color));
border-radius: 50%;
animation: thinkingPulse 1.4s infinite ease-in-out;
}
@@ -341,12 +347,18 @@
.thinking-label {
font-weight: 500;
color: #6366f1 !important;
color: var(--link-color, var(--hover-item-text-color)) !important;
}
.thinking-toggle {
color: #6366f1 !important;
color: var(--muted-text-color) !important;
transition: transform 0.2s ease;
background: transparent !important;
border: none !important;
}
.thinking-toggle:hover {
color: var(--main-text-color) !important;
}
.thinking-toggle.expanded {
@@ -356,7 +368,7 @@
.thinking-content {
margin-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;
}
@@ -364,15 +376,20 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 0.875rem;
line-height: 1.5;
color: #4b5563;
color: var(--main-text-color);
white-space: pre-wrap;
word-wrap: break-word;
background: rgba(255, 255, 255, 0.7);
background-color: var(--input-background-color);
padding: 0.75rem;
border-radius: 8px;
border: 1px solid rgba(99, 102, 241, 0.1);
border-radius: 0.5rem;
border: 1px solid var(--subtle-border-color, var(--main-border-color));
max-height: 300px;
overflow-y: auto;
transition: border-color 0.2s ease;
}
.thinking-text:hover {
border-color: var(--main-border-color);
}
/* Animations */