mirror of
https://github.com/zhayujie/chatgpt-on-wechat.git
synced 2026-02-28 08:41:21 +08:00
240 lines
7.8 KiB
CSS
240 lines
7.8 KiB
CSS
/* =====================================================================
|
|
CowAgent Console Styles
|
|
===================================================================== */
|
|
|
|
/* Animations */
|
|
@keyframes pulseDot {
|
|
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
40% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* Scrollbar */
|
|
* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #64748b; }
|
|
.dark ::-webkit-scrollbar-thumb { background: #475569; }
|
|
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
|
|
|
|
/* Sidebar */
|
|
.sidebar-item.active {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #FFFFFF;
|
|
}
|
|
.sidebar-item.active .item-icon { color: #4ABE6E; }
|
|
|
|
/* Menu Groups */
|
|
.menu-group-items { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }
|
|
.menu-group.open .menu-group-items { max-height: 500px; transition: max-height 0.35s ease-in; }
|
|
.menu-group .chevron { transition: transform 0.25s ease; }
|
|
.menu-group.open .chevron { transform: rotate(90deg); }
|
|
|
|
/* View Switching */
|
|
.view { display: none; height: 100%; }
|
|
.view.active { display: flex; flex-direction: column; }
|
|
|
|
/* Markdown Content */
|
|
.msg-content p { margin: 0.5em 0; line-height: 1.7; }
|
|
.msg-content p:first-child { margin-top: 0; }
|
|
.msg-content p:last-child { margin-bottom: 0; }
|
|
.msg-content h1, .msg-content h2, .msg-content h3,
|
|
.msg-content h4, .msg-content h5, .msg-content h6 {
|
|
margin-top: 1.2em; margin-bottom: 0.6em; font-weight: 600; line-height: 1.3;
|
|
}
|
|
.msg-content h1 { font-size: 1.4em; }
|
|
.msg-content h2 { font-size: 1.25em; }
|
|
.msg-content h3 { font-size: 1.1em; }
|
|
.msg-content ul, .msg-content ol { margin: 0.5em 0; padding-left: 1.8em; }
|
|
.msg-content li { margin: 0.25em 0; }
|
|
.msg-content pre {
|
|
border-radius: 8px; overflow-x: auto; margin: 0.8em 0;
|
|
background: #f1f5f9; padding: 1em;
|
|
}
|
|
.dark .msg-content pre { background: #111111; }
|
|
.msg-content code {
|
|
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
|
font-size: 0.875em;
|
|
}
|
|
.msg-content :not(pre) > code {
|
|
background: rgba(74, 190, 110, 0.1); color: #1C6B3B;
|
|
padding: 2px 6px; border-radius: 4px;
|
|
}
|
|
.dark .msg-content :not(pre) > code {
|
|
background: rgba(74, 190, 110, 0.15); color: #74E9A4;
|
|
}
|
|
.msg-content pre code { background: transparent; padding: 0; color: inherit; }
|
|
.msg-content blockquote {
|
|
border-left: 3px solid #4ABE6E; padding: 0.5em 1em;
|
|
margin: 0.8em 0; background: rgba(74, 190, 110, 0.05); border-radius: 0 6px 6px 0;
|
|
}
|
|
.dark .msg-content blockquote { background: rgba(74, 190, 110, 0.08); }
|
|
.msg-content table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
|
|
.msg-content th, .msg-content td {
|
|
border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left;
|
|
}
|
|
.dark .msg-content th, .dark .msg-content td { border-color: rgba(255,255,255,0.1); }
|
|
.msg-content th { background: #f1f5f9; font-weight: 600; }
|
|
.dark .msg-content th { background: #111111; }
|
|
.msg-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }
|
|
.msg-content a { color: #35A85B; text-decoration: underline; }
|
|
.msg-content a:hover { color: #228547; }
|
|
.msg-content hr { border: none; height: 1px; background: #e2e8f0; margin: 1.2em 0; }
|
|
.dark .msg-content hr { background: rgba(255,255,255,0.1); }
|
|
|
|
/* SSE Streaming cursor */
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
.sse-streaming::after {
|
|
content: '▋';
|
|
display: inline-block;
|
|
margin-left: 2px;
|
|
color: #4ABE6E;
|
|
animation: blink 0.9s step-end infinite;
|
|
font-size: 0.85em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Agent steps (thinking summaries + tool indicators) */
|
|
.agent-steps:empty { display: none; }
|
|
.agent-steps:not(:empty) {
|
|
margin-bottom: 0.625rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
|
|
}
|
|
.dark .agent-steps:not(:empty) { border-bottom-color: rgba(255, 255, 255, 0.08); }
|
|
|
|
.agent-step {
|
|
font-size: 0.75rem;
|
|
line-height: 1.4;
|
|
color: #94a3b8;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.agent-step:last-child { margin-bottom: 0; }
|
|
|
|
/* Thinking step - collapsible */
|
|
.agent-thinking-step .thinking-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.agent-thinking-step .thinking-header.no-toggle { cursor: default; }
|
|
.agent-thinking-step .thinking-header:not(.no-toggle):hover { color: #64748b; }
|
|
.dark .agent-thinking-step .thinking-header:not(.no-toggle):hover { color: #cbd5e1; }
|
|
.agent-thinking-step .thinking-header i:first-child { font-size: 0.625rem; margin-top: 1px; }
|
|
.agent-thinking-step .thinking-chevron {
|
|
font-size: 0.5rem;
|
|
margin-left: auto;
|
|
transition: transform 0.2s ease;
|
|
opacity: 0.5;
|
|
}
|
|
.agent-thinking-step.expanded .thinking-chevron { transform: rotate(90deg); }
|
|
.agent-thinking-step .thinking-full {
|
|
display: none;
|
|
margin-top: 0.375rem;
|
|
margin-left: 1rem;
|
|
padding: 0.5rem;
|
|
background: rgba(0, 0, 0, 0.02);
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(0, 0, 0, 0.04);
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
color: #94a3b8;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
.dark .agent-thinking-step .thinking-full {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-color: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.agent-thinking-step.expanded .thinking-full { display: block; }
|
|
.agent-thinking-step .thinking-full p { margin: 0.25em 0; }
|
|
.agent-thinking-step .thinking-full p:first-child { margin-top: 0; }
|
|
.agent-thinking-step .thinking-full p:last-child { margin-bottom: 0; }
|
|
|
|
/* Tool step - collapsible */
|
|
.agent-tool-step .tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
padding: 1px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.agent-tool-step .tool-header:hover { color: #64748b; }
|
|
.dark .agent-tool-step .tool-header:hover { color: #cbd5e1; }
|
|
.agent-tool-step .tool-icon { font-size: 0.625rem; }
|
|
.agent-tool-step .tool-chevron {
|
|
font-size: 0.5rem;
|
|
margin-left: auto;
|
|
transition: transform 0.2s ease;
|
|
opacity: 0.5;
|
|
}
|
|
.agent-tool-step.expanded .tool-chevron { transform: rotate(90deg); }
|
|
.agent-tool-step .tool-time {
|
|
font-size: 0.65rem;
|
|
opacity: 0.6;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
/* Tool detail panel */
|
|
.agent-tool-step .tool-detail {
|
|
display: none;
|
|
margin-top: 0.375rem;
|
|
margin-left: 1rem;
|
|
padding: 0.5rem;
|
|
background: rgba(0, 0, 0, 0.02);
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(0, 0, 0, 0.04);
|
|
}
|
|
.dark .agent-tool-step .tool-detail {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-color: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.agent-tool-step.expanded .tool-detail { display: block; }
|
|
.tool-detail-section { margin-bottom: 0.375rem; }
|
|
.tool-detail-section:last-child { margin-bottom: 0; }
|
|
.tool-detail-label {
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
opacity: 0.6;
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
.tool-detail-content {
|
|
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
|
|
font-size: 0.7rem;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
padding: 0.25rem 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
.tool-error-text { color: #f87171; }
|
|
|
|
/* Tool failed state */
|
|
.agent-tool-step.tool-failed .tool-name { color: #f87171; }
|
|
|
|
/* Chat Input */
|
|
#chat-input {
|
|
resize: none; height: 42px; max-height: 180px;
|
|
overflow-y: hidden;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
/* Placeholder Cards */
|
|
.placeholder-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.placeholder-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
|
|
}
|