bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

feat: narrator empty states, scroll fades, glow buttons, violet color sweep

Browse Source
This commit is contained in:
Bryan Van Deusen
2026-04-08 11:17:06 -04:00
parent 00f82f8cba
commit f30e90ef8d
3 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ChatInputBar.vue
+2 -2
View File
@@ -391,7 +391,7 @@ defineExpose({ focus, prefill })
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #6366f1, #4f46e5);
background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff;
border: none;
border-radius: 50%;
@@ -400,7 +400,7 @@ defineExpose({ focus, prefill })
flex-shrink: 0;
transition: box-shadow 0.15s;
}
.btn-send:hover { box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); }
.btn-send:hover { box-shadow: 0 0 16px rgba(124, 58, 237, 0.35); }
.btn-send:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.btn-abort-inline {
frontend/src/components/ChatPanel.vue
+6 -1
View File
@@ -338,7 +338,7 @@ defineExpose({ focus, prefill, send })
<p
v-if="!store.currentConversation?.messages.length && !store.streaming"
class="empty-msg"
>Send a message to start the conversation.</p>
>Start a conversation.</p>
</div>
</div>
@@ -525,6 +525,8 @@ defineExpose({ focus, prefill, send })
flex: 1;
overflow-y: auto;
padding: 1rem;
mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
}
.messages-inner {
display: flex;
@@ -746,6 +748,9 @@ defineExpose({ focus, prefill, send })
font-size: 0.9rem;
text-align: center;
padding: 2rem 1rem;
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
color: var(--color-accent-warm, #d4a017);
}
/* ── Widget variant ── */
frontend/src/views/KnowledgeView.vue
+20 -20
View File
@@ -696,17 +696,17 @@ onUnmounted(() => {
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.2);
background: rgba(124, 58, 237, 0.1);
border: 1px solid rgba(124, 58, 237, 0.2);
color: var(--color-text);
text-decoration: none;
transition: background 0.15s;
}
.today-event-chip:hover { background: rgba(99, 102, 241, 0.18); }
.today-event-chip:hover { background: rgba(124, 58, 237, 0.18); }
.chip-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #6366f1;
background: #7c3aed;
flex-shrink: 0;
}
.chip-date { color: var(--color-muted); font-size: 0.78rem; }
@@ -721,7 +721,7 @@ onUnmounted(() => {
font-size: 0.78rem;
}
.today-link {
color: var(--color-primary, #6366f1);
color: var(--color-primary, #7c3aed);
text-decoration: none;
font-weight: 500;
opacity: 0.85;
@@ -775,23 +775,23 @@ onUnmounted(() => {
flex: 1;
padding: 7px 10px;
border-radius: 8px;
border: 1px solid rgba(99, 102, 241, 0.4);
background: rgba(99, 102, 241, 0.12);
color: var(--color-primary, #818cf8);
border: 1px solid rgba(124, 58, 237, 0.4);
background: rgba(124, 58, 237, 0.12);
color: var(--color-primary, #a78bfa);
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
text-align: left;
transition: background 0.15s;
}
.btn-new-note:hover { background: rgba(99, 102, 241, 0.2); }
.btn-new-note:hover { background: rgba(124, 58, 237, 0.2); box-shadow: 0 0 12px rgba(124, 58, 237, 0.25); }
.new-note-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--color-bg-tertiary, #1a1b1e);
border: 1px solid rgba(99, 102, 241, 0.3);
border: 1px solid rgba(124, 58, 237, 0.3);
border-radius: 8px;
overflow: hidden;
z-index: 50;
@@ -809,7 +809,7 @@ onUnmounted(() => {
text-align: left;
transition: background 0.12s;
}
.new-note-menu button:hover { background: rgba(99, 102, 241, 0.12); }
.new-note-menu button:hover { background: rgba(124, 58, 237, 0.12); }
.filter-btn {
display: flex;
@@ -830,8 +830,8 @@ onUnmounted(() => {
}
.filter-btn:hover { background: rgba(255,255,255,0.05); opacity: 1; }
.filter-btn.active {
background: rgba(99, 102, 241, 0.15);
color: var(--color-primary, #818cf8);
background: rgba(124, 58, 237, 0.15);
color: var(--color-primary, #a78bfa);
opacity: 1;
}
.filter-btn-label { flex: 1; }
@@ -847,8 +847,8 @@ onUnmounted(() => {
flex-shrink: 0;
}
.filter-btn.active .filter-count {
background: rgba(99, 102, 241, 0.2);
color: var(--color-primary, #818cf8);
background: rgba(124, 58, 237, 0.2);
color: var(--color-primary, #a78bfa);
}
.filter-tag { font-size: 0.78rem; }
@@ -893,7 +893,7 @@ onUnmounted(() => {
outline: none;
transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--color-primary, #6366f1); }
.search-input:focus { border-color: var(--color-primary, #7c3aed); }
.sort-select {
padding: 7px 10px;
border-radius: 8px;
@@ -920,9 +920,9 @@ onUnmounted(() => {
}
.btn-graph:hover { color: var(--color-text); border-color: rgba(255,255,255,0.2); }
.btn-graph.active {
background: rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.35);
color: var(--color-primary, #818cf8);
background: rgba(124, 58, 237, 0.15);
border-color: rgba(124, 58, 237, 0.35);
color: var(--color-primary, #a78bfa);
}
/* ── Card grid ───────────────────────────────────────────── */
@@ -1016,7 +1016,7 @@ onUnmounted(() => {
text-transform: uppercase;
letter-spacing: 0.04em;
}
.badge--note { background: rgba(99,102,241,0.15); color: #818cf8; }
.badge--note { background: rgba(99,102,241,0.15); color: #a78bfa; }
.badge--person { background: rgba(16,185,129,0.15); color: #34d399; }
.badge--place { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge--list { background: rgba(56,189,248,0.15); color: #7dd3fc; }