From c34720346eecdeef9104aead7d47112d817caf46 Mon Sep 17 00:00:00 2001 From: Naomi Carrigan Date: Sun, 25 Jan 2026 17:07:32 -0800 Subject: [PATCH] feat: apply trans-pride gradient theme across UI elements - Add global CSS classes for trans gradient styling (btn-trans-gradient, input-trans-focus, icon-trans-hover) - Update all primary action buttons to use trans gradient - Add trans-pride glow effect to character panel based on state - Update StatusBar icon buttons with trans gradient hover - Update chat input focus border with trans gradient glow - Update stop button to use trans gradient --- src/app.css | 64 ++++++ src/lib/components/AnimeGirl.svelte | 59 +----- src/lib/components/ConfigSidebar.svelte | 4 +- src/lib/components/GitPanel.svelte | 43 +---- src/lib/components/InputBar.svelte | 20 +- src/lib/components/QuickActionsPanel.svelte | 6 +- src/lib/components/SessionHistoryPanel.svelte | 2 +- src/lib/components/SnippetLibraryPanel.svelte | 8 +- src/lib/components/StatusBar.svelte | 22 +-- src/lib/components/UpdateNotification.svelte | 2 +- src/routes/+page.svelte | 182 +++++++++++++++++- 11 files changed, 295 insertions(+), 117 deletions(-) diff --git a/src/app.css b/src/app.css index d6ec46b..6eb18a3 100644 --- a/src/app.css +++ b/src/app.css @@ -14,6 +14,13 @@ --text-tertiary: #6b7280; --border-color: #2a2a4a; + /* Trans pride colors */ + --trans-blue: #5bcefa; + --trans-pink: #f5a9b8; + --trans-white: #ffffff; + --trans-gradient: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 50%, var(--trans-white) 100%); + --trans-gradient-vibrant: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 35%, var(--trans-white) 50%, var(--trans-pink) 65%, var(--trans-blue) 100%); + /* Terminal specific colors */ --terminal-user: #22d3ee; --terminal-tool: #c084fc; @@ -44,6 +51,13 @@ --text-tertiary: #9ca3af; --border-color: #d0d0e0; + /* Trans pride colors */ + --trans-blue: #5bcefa; + --trans-pink: #f5a9b8; + --trans-white: #ffffff; + --trans-gradient: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 50%, var(--trans-white) 100%); + --trans-gradient-vibrant: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 35%, var(--trans-white) 50%, var(--trans-pink) 65%, var(--trans-blue) 100%); + /* Terminal specific colors */ --terminal-user: #0891b2; --terminal-tool: #7c3aed; @@ -74,6 +88,13 @@ --text-tertiary: #b0b0b0; --border-color: #ffffff; + /* Trans pride colors (high contrast) */ + --trans-blue: #00d4ff; + --trans-pink: #ff99cc; + --trans-white: #ffffff; + --trans-gradient: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 50%, var(--trans-white) 100%); + --trans-gradient-vibrant: linear-gradient(135deg, var(--trans-blue) 0%, var(--trans-pink) 35%, var(--trans-white) 50%, var(--trans-pink) 65%, var(--trans-blue) 100%); + /* Terminal specific colors - bright and saturated */ --terminal-user: #00ffff; --terminal-tool: #ff00ff; @@ -131,3 +152,46 @@ body { background: var(--accent-primary); color: var(--text-primary); } + +/* Trans gradient button - primary action buttons */ +.btn-trans-gradient { + background: var(--trans-gradient-vibrant) !important; + border: none !important; + color: #1a1a2e !important; + font-weight: 600; + text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); + transition: all 0.2s ease; +} + +.btn-trans-gradient:hover:not(:disabled) { + filter: brightness(1.1); + box-shadow: 0 0 20px rgba(91, 206, 250, 0.4), 0 0 30px rgba(245, 169, 184, 0.3); +} + +.btn-trans-gradient:disabled { + opacity: 0.5; + cursor: not-allowed; + filter: grayscale(0.3); +} + +/* Trans gradient focus border for inputs */ +.input-trans-focus { + position: relative; + transition: all 0.2s ease; +} + +.input-trans-focus:focus { + border-color: var(--trans-pink) !important; + box-shadow: 0 0 0 1px var(--trans-blue), 0 0 12px rgba(91, 206, 250, 0.3), 0 0 20px rgba(245, 169, 184, 0.2) !important; + outline: none !important; +} + +/* Trans gradient hover for icon buttons */ +.icon-trans-hover { + transition: all 0.2s ease; +} + +.icon-trans-hover:hover { + color: var(--trans-pink) !important; + filter: drop-shadow(0 0 6px rgba(91, 206, 250, 0.5)) drop-shadow(0 0 10px rgba(245, 169, 184, 0.4)); +} diff --git a/src/lib/components/AnimeGirl.svelte b/src/lib/components/AnimeGirl.svelte index 58c0c50..4d848e7 100644 --- a/src/lib/components/AnimeGirl.svelte +++ b/src/lib/components/AnimeGirl.svelte @@ -35,33 +35,13 @@ } } - function getBackgroundGlow(): string { - switch (currentState) { - case "thinking": - return "shadow-thinking"; - case "typing": - return "shadow-typing"; - case "searching": - return "shadow-searching"; - case "coding": - return "shadow-coding"; - case "mcp": - return "shadow-mcp"; - case "success": - return "shadow-success"; - case "error": - return "shadow-error"; - default: - return ""; - } - } - +
diff --git a/src/lib/components/QuickActionsPanel.svelte b/src/lib/components/QuickActionsPanel.svelte index 34328fe..e1d6526 100644 --- a/src/lib/components/QuickActionsPanel.svelte +++ b/src/lib/components/QuickActionsPanel.svelte @@ -163,7 +163,7 @@ {#if !editingAction && !isCreating} @@ -293,7 +293,7 @@

No quick actions available

diff --git a/src/lib/components/SessionHistoryPanel.svelte b/src/lib/components/SessionHistoryPanel.svelte index 4d0642e..9c782b1 100644 --- a/src/lib/components/SessionHistoryPanel.svelte +++ b/src/lib/components/SessionHistoryPanel.svelte @@ -335,7 +335,7 @@ > @@ -319,7 +319,7 @@

No snippets in this category

@@ -350,7 +350,7 @@ > diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 00d2494..3c22695 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -13,6 +13,8 @@ import InputBar from "$lib/components/InputBar.svelte"; import StatusBar from "$lib/components/StatusBar.svelte"; import AnimeGirl from "$lib/components/AnimeGirl.svelte"; + import { characterState } from "$lib/stores/character"; + import type { CharacterState } from "$lib/types/states"; import PermissionModal from "$lib/components/PermissionModal.svelte"; import UserQuestionModal from "$lib/components/UserQuestionModal.svelte"; import ConfigSidebar from "$lib/components/ConfigSidebar.svelte"; @@ -23,6 +25,32 @@ let initialized = false; let updateNotification: UpdateNotification; let achievementPanelOpen = $state(false); + let currentCharacterState: CharacterState = $state("idle"); + + characterState.subscribe((state) => { + currentCharacterState = state; + }); + + function getPanelGlowClass(): string { + switch (currentCharacterState) { + case "thinking": + return "panel-glow-thinking"; + case "typing": + return "panel-glow-typing"; + case "searching": + return "panel-glow-searching"; + case "coding": + return "panel-glow-coding"; + case "mcp": + return "panel-glow-mcp"; + case "success": + return "panel-glow-success"; + case "error": + return "panel-glow-error"; + default: + return ""; + } + } // Resizable panel state let panelWidth = $state(320); // Default width in pixels @@ -190,7 +218,7 @@
@@ -235,6 +263,158 @@ .character-panel { background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); + transition: all 0.5s ease; + position: relative; + } + + .character-panel::before { + content: ""; + position: absolute; + inset: 0; + padding: 3px; + background: transparent; + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: 0; + transition: opacity 0.5s ease; + pointer-events: none; + } + + /* Trans pride gradient glow effects for the character panel */ + .panel-glow-thinking { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-secondary) 85%, #9333ea) 0%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100% + ); + box-shadow: + inset 0 0 60px rgba(147, 51, 234, 0.15), + inset 0 0 100px rgba(91, 206, 250, 0.1), + 0 0 40px rgba(91, 206, 250, 0.2), + 0 0 80px rgba(245, 169, 184, 0.15); + } + + .panel-glow-thinking::before { + background: linear-gradient(180deg, #9333ea, var(--trans-blue), var(--trans-pink)); + opacity: 1; + } + + .panel-glow-typing { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-secondary) 85%, #3b82f6) 0%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100% + ); + box-shadow: + inset 0 0 60px rgba(59, 130, 246, 0.15), + inset 0 0 100px rgba(91, 206, 250, 0.15), + 0 0 40px rgba(91, 206, 250, 0.25), + 0 0 80px rgba(245, 169, 184, 0.15); + } + + .panel-glow-typing::before { + background: linear-gradient(180deg, #3b82f6, var(--trans-blue), var(--trans-pink)); + opacity: 1; + } + + .panel-glow-searching { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-secondary) 85%, #eab308) 0%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100% + ); + box-shadow: + inset 0 0 60px rgba(234, 179, 8, 0.15), + inset 0 0 100px rgba(91, 206, 250, 0.1), + 0 0 40px rgba(91, 206, 250, 0.2), + 0 0 80px rgba(245, 169, 184, 0.15); + } + + .panel-glow-searching::before { + background: linear-gradient(180deg, #eab308, var(--trans-blue), var(--trans-pink)); + opacity: 1; + } + + .panel-glow-coding { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-secondary) 85%, #22c55e) 0%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100% + ); + box-shadow: + inset 0 0 60px rgba(34, 197, 94, 0.15), + inset 0 0 100px rgba(91, 206, 250, 0.1), + 0 0 40px rgba(91, 206, 250, 0.2), + 0 0 80px rgba(245, 169, 184, 0.15); + } + + .panel-glow-coding::before { + background: linear-gradient(180deg, #22c55e, var(--trans-blue), var(--trans-pink)); + opacity: 1; + } + + .panel-glow-mcp { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-secondary) 80%, var(--trans-blue)) 0%, + color-mix(in srgb, var(--bg-primary) 85%, var(--trans-pink)) 50%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 100% + ); + box-shadow: + inset 0 0 80px rgba(91, 206, 250, 0.2), + inset 0 0 120px rgba(245, 169, 184, 0.15), + 0 0 60px rgba(91, 206, 250, 0.3), + 0 0 100px rgba(245, 169, 184, 0.2); + } + + .panel-glow-mcp::before { + background: var(--trans-gradient-vibrant); + opacity: 1; + } + + .panel-glow-success { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-secondary) 85%, #10b981) 0%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-blue)) 50%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 100% + ); + box-shadow: + inset 0 0 60px rgba(16, 185, 129, 0.15), + inset 0 0 100px rgba(91, 206, 250, 0.1), + 0 0 40px rgba(91, 206, 250, 0.2), + 0 0 80px rgba(245, 169, 184, 0.15); + } + + .panel-glow-success::before { + background: linear-gradient(180deg, #10b981, var(--trans-blue), var(--trans-pink)); + opacity: 1; + } + + .panel-glow-error { + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--bg-secondary) 80%, #ef4444) 0%, + color-mix(in srgb, var(--bg-primary) 90%, var(--trans-pink)) 50%, + color-mix(in srgb, var(--bg-primary) 95%, var(--trans-blue)) 100% + ); + box-shadow: + inset 0 0 60px rgba(239, 68, 68, 0.2), + inset 0 0 100px rgba(245, 169, 184, 0.1), + 0 0 40px rgba(245, 169, 184, 0.2), + 0 0 80px rgba(239, 68, 68, 0.15); + } + + .panel-glow-error::before { + background: linear-gradient(180deg, #ef4444, var(--trans-pink), var(--trans-blue)); + opacity: 1; } .resize-handle:hover,