obsidian-hermes-plugin/styles.css
Helm 16fb2238dd feat: context capture fix, multi-tab support, slash commands with autocomplete
- Fix context capture timing bug: snapshot active note on chat focus
  instead of at send time (when activeEditor is already null).
  Added workspace active-leaf-change listener to keep context fresh.
- Multi-tab: each ChatView now gets its own ApiClient instance,
  enabling independent sessions per tab. Added 'Open in New Tab'
  command. Removed shared ApiClient from plugin.
- Slash commands: three built-in commands (/prep-session,
  /sync-content, /lint-wiki) plus JSON-configurable custom commands
  in settings. On '/' trigger, shows suggestion dropdown with
  arrow-key navigation, click-to-select, and Escape to close.
- Slash command resolution at send time replaces /trigger with
  full prompt text.
2026-07-10 11:40:40 -04:00

181 lines
No EOL
3.6 KiB
CSS

/* ==========================================================================
Hermes Chat — Dark Theme
Uses Obsidian CSS variables for native theme compatibility.
========================================================================== */
/* --- Container --- */
.hermes-chat-container {
display: flex;
flex-direction: column;
height: 100%;
}
/* --- Message list --- */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
}
.chat-message {
margin-bottom: 1rem;
padding: 0.5rem 1rem;
border-radius: 8px;
line-height: 1.45;
}
.chat-message-user {
background: var(--background-modifier-hover);
text-align: right;
}
.chat-message-assistant {
background: var(--background-secondary);
}
/* --- Message internals --- */
.chat-message-role {
font-size: 0.75rem;
opacity: 0.6;
margin-bottom: 0.25rem;
font-weight: 500;
}
.chat-message-content {
white-space: pre-wrap;
word-break: break-word;
color: var(--text-normal);
}
/* --- Loading indicator --- */
.chat-loading {
opacity: 0.6;
font-style: italic;
padding: 0.5rem 1rem;
color: var(--text-muted);
}
/* --- Input area --- */
.chat-input-area {
display: flex;
padding: 0.5rem;
border-top: 1px solid var(--background-modifier-border);
gap: 0.5rem;
}
.chat-input-area textarea {
flex: 1;
background: var(--background-primary);
color: var(--text-normal);
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
resize: none;
min-height: 40px;
max-height: 120px;
padding: 0.5rem;
font-family: inherit;
font-size: 0.9rem;
outline: none;
transition: border-color 0.15s;
}
.chat-input-area textarea:focus {
border-color: var(--interactive-accent);
}
.chat-input-area textarea:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.chat-input-area button {
flex-shrink: 0;
margin-left: 0;
cursor: pointer;
padding: 0.5rem 1rem;
background: var(--interactive-accent);
color: var(--text-on-accent);
border: none;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
transition: background 0.15s;
}
.chat-input-area button:hover {
background: var(--interactive-accent-hover);
}
.chat-input-area button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* --- Status bar --- */
.chat-status-bar {
font-size: 0.7rem;
opacity: 0.5;
padding: 0.25rem 1rem;
border-top: 1px solid var(--background-modifier-border);
color: var(--text-muted);
}
/* --- Scrollbar (thin, dark) --- */
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
background: var(--background-modifier-border);
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* --- Slash command autocomplete --- */
.hermes-slash-suggest {
background: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-height: 200px;
overflow-y: auto;
min-width: 200px;
}
.hermes-slash-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
cursor: pointer;
transition: background 0.1s;
}
.hermes-slash-item:hover,
.hermes-slash-item-active {
background: var(--background-modifier-hover);
}
.hermes-slash-trigger {
font-family: var(--font-monospace);
font-size: 0.8rem;
font-weight: 600;
color: var(--interactive-accent);
flex-shrink: 0;
min-width: 80px;
}
.hermes-slash-desc {
font-size: 0.8rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}