nhcarrigan/hikari-desktop
11
0
Fork 0
generated from nhcarrigan/template
Code Issues 15 Pull Requests 38 Actions Releases 23 Activity

feat: apply trans-pride gradient theme across UI elements

Browse Source 
- 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
This commit is contained in:
Naomi Carrigan
2026-01-25 17:07:32 -08:00
parent 02cc8bd0d5
commit c34720346e
11 changed files with 295 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AnimeGirl.svelte
+7 -52
View File
@@ -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 "";
}
}
</script>
</script>
<div
class="anime-girl-container flex flex-col items-center justify-between h-full p-4 overflow-hidden"
>
class="character-frame relative {getBackgroundGlow()} flex-1 flex items-center justify-center min-h-0"
<div
class="character-frame relative flex-1 flex items-center justify-center min-h-0"
>
<div class="sprite-container {getAnimationClass()} h-full flex items-center justify-center">
@@ -97,37 +77,12 @@
</div>
</div>
<style>
.anime-girl-container {
transition: all 0.3s ease;
}
border-radius: 50%;
transition: box-shadow 0.3s ease;
}
.shadow-thinking {
box-shadow: 0 0 30px rgba(147, 51, 234, 0.5);
}
.shadow-typing {
box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}
.shadow-searching {
box-shadow: 0 0 30px rgba(234, 179, 8, 0.5);
}
.shadow-coding {
box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}
.shadow-mcp {
box-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
}
.shadow-success {
box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}
.shadow-error {
box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
.character-frame {
transition: all 0.3s ease;
}
src/lib/components/ConfigSidebar.svelte
+2 -2
View File
@@ -386,7 +386,7 @@
<button
onclick={addCustomTool}
disabled={!newToolName.trim()}
class="px-3 py-1.5 text-sm bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
class="btn-trans-gradient px-3 py-1.5 text-sm rounded-lg"
>
Add
</button>
@@ -569,7 +569,7 @@
<button
onclick={handleSave}
disabled={isSaving}
class="w-full py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white font-medium rounded-lg transition-colors disabled:opacity-50"
class="btn-trans-gradient w-full py-3 font-medium rounded-lg"
>
{isSaving ? "Saving..." : "Save Settings"}
</button>
src/lib/components/GitPanel.svelte
+5 -38
View File
@@ -414,7 +414,7 @@
<button
on:click={stageAll}
disabled={actionInProgress}
class="stage-all-btn"
class="btn-trans-gradient stage-all-btn"
title="Stage all"
>
Stage All
@@ -495,7 +495,7 @@
<button
on:click={commit}
disabled={actionInProgress || !commitMessage.trim()}
class="commit-btn"
class="btn-trans-gradient commit-btn"
>
Commit
</button>
@@ -512,11 +512,11 @@
placeholder="New branch name..."
on:keydown={(e) => e.key === "Enter" && createBranch()}
/>
<button on:click={createBranch} disabled={actionInProgress}>Create</button>
<button on:click={createBranch} disabled={actionInProgress} class="btn-trans-gradient">Create</button>
<button on:click={() => (showBranchInput = false)}>Cancel</button>
</div>
{:else}
<button on:click={() => (showBranchInput = true)} class="new-branch-btn">
<button on:click={() => (showBranchInput = true)} class="btn-trans-gradient new-branch-btn">
➕ New Branch
</button>
{/if}
@@ -812,16 +812,9 @@
.stage-all-btn {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
background: var(--accent-primary);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.stage-all-btn:hover:not(:disabled) {
background: var(--accent-secondary);
}
.file-list {
@@ -893,24 +886,11 @@
}
.commit-btn {
background: var(--accent-primary);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.commit-btn:hover:not(:disabled) {
background: var(--accent-secondary);
transform: scale(1.02);
}
.commit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.branch-section h3 {
@@ -924,17 +904,10 @@
}
.new-branch-btn {
background: var(--accent-primary);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.new-branch-btn:hover {
background: var(--accent-secondary);
}
.new-branch-input {
@@ -959,13 +932,7 @@
}
.new-branch-input button:first-of-type {
background: var(--accent-primary);
color: white;
transition: background 0.2s;
}
.new-branch-input button:first-of-type:hover:not(:disabled) {
background: var(--accent-secondary);
/* Styling handled by btn-trans-gradient class */
}
.new-branch-input button:last-of-type {
src/lib/components/InputBar.svelte
+16 -4
View File
@@ -811,8 +811,7 @@ User: ${formattedMessage}`;
style="height: {textareaHeight}px; font-size: var(--terminal-font-size, 14px);"
class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)]
rounded-lg text-[var(--text-primary)] placeholder-gray-500 resize-none
focus:outline-none focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)]
disabled:opacity-50 disabled:cursor-not-allowed"
input-trans-focus disabled:opacity-50 disabled:cursor-not-allowed"
></textarea>
</div>
@@ -838,7 +837,7 @@ User: ${formattedMessage}`;
<button
type="button"
onclick={handleInterrupt}
class="send-button bg-red-600 hover:bg-red-700"
class="send-button btn-trans-gradient"
title="Interrupt the current response (Ctrl+C)"
>
<span class="font-bold">■</span> Stop
@@ -849,7 +848,7 @@ User: ${formattedMessage}`;
disabled={!isConnected ||
isSubmitting ||
(!inputValue.trim() && attachments.length === 0)}
class="send-button bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)]
class="send-button trans-gradient-button
disabled:opacity-50 disabled:cursor-not-allowed"
>
{#if isSubmitting}
@@ -1033,4 +1032,17 @@ User: ${formattedMessage}`;
.send-button:active:not(:disabled) {
transform: scale(0.95);
}
.trans-gradient-button {
background: var(--trans-gradient-vibrant);
border: none;
color: #1a1a2e;
font-weight: 600;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}
.trans-gradient-button: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);
}
</style>
src/lib/components/QuickActionsPanel.svelte
+3 -3
View File
@@ -163,7 +163,7 @@
{#if !editingAction && !isCreating}
<button
onclick={handleStartCreate}
class="px-3 py-1.5 text-sm font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors flex items-center gap-2"
class="px-3 py-1.5 text-sm font-medium btn-trans-gradient rounded flex items-center gap-2"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
@@ -262,7 +262,7 @@
<button
onclick={handleSave}
disabled={!editName.trim() || !editPrompt.trim()}
class="px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
class="px-4 py-2 text-sm font-medium btn-trans-gradient rounded-lg"
>
{isCreating ? "Create" : "Save"}
</button>
@@ -293,7 +293,7 @@
<p class="text-[var(--text-secondary)]">No quick actions available</p>
<button
onclick={handleStartCreate}
class="mt-4 px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors"
class="mt-4 px-4 py-2 text-sm font-medium btn-trans-gradient rounded-lg"
>
Create your first action
</button>
src/lib/components/SessionHistoryPanel.svelte
+1 -1
View File
@@ -335,7 +335,7 @@
>
<button
onclick={() => handleResumeSession(session)}
class="px-3 py-1.5 text-xs font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors"
class="btn-trans-gradient px-3 py-1.5 text-xs font-medium rounded"
title="Resume this session"
>
Resume
src/lib/components/SnippetLibraryPanel.svelte
+4 -4
View File
@@ -146,7 +146,7 @@
{#if !editingSnippet && !isCreating}
<button
onclick={handleStartCreate}
class="px-3 py-1.5 text-sm font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors flex items-center gap-2"
class="btn-trans-gradient px-3 py-1.5 text-sm font-medium rounded flex items-center gap-2"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
@@ -257,7 +257,7 @@
<button
onclick={handleSave}
disabled={!editName.trim() || !editContent.trim()}
class="px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
class="btn-trans-gradient px-4 py-2 text-sm font-medium rounded-lg"
>
{isCreating ? "Create" : "Save"}
</button>
@@ -319,7 +319,7 @@
<p class="text-[var(--text-secondary)]">No snippets in this category</p>
<button
onclick={handleStartCreate}
class="mt-4 px-4 py-2 text-sm font-medium bg-[var(--accent-primary)] text-white rounded-lg hover:bg-[var(--accent-primary)]/80 transition-colors"
class="btn-trans-gradient mt-4 px-4 py-2 text-sm font-medium rounded-lg"
>
Create your first snippet
</button>
@@ -350,7 +350,7 @@
>
<button
onclick={() => handleInsert(snippet)}
class="px-3 py-1.5 text-xs font-medium bg-[var(--accent-primary)] text-white rounded hover:bg-[var(--accent-primary)]/80 transition-colors"
class="btn-trans-gradient px-3 py-1.5 text-xs font-medium rounded"
title="Insert this snippet"
>
Insert
src/lib/components/StatusBar.svelte
+11 -11
View File
@@ -209,7 +209,7 @@
<div class="flex items-center gap-3">
<button
onclick={toggleAchievements}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors relative"
class="p-1 text-gray-500 icon-trans-hover relative"
title="Achievements"
>
<span class="text-lg">🏆</span>
@@ -223,7 +223,7 @@
</button>
<button
onclick={() => (showSessionHistory = true)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="Session History"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -237,7 +237,7 @@
</button>
<button
onclick={() => (showGitPanel = true)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="Git Panel"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -251,8 +251,8 @@
</button>
<button
onclick={() => (showStats = !showStats)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors {showStats
? 'text-[var(--accent-primary)]'
class="p-1 text-gray-500 icon-trans-hover {showStats
? 'text-[var(--trans-pink)]'
: ''}"
title="Usage Stats"
>
@@ -267,7 +267,7 @@
</button>
<button
onclick={configStore.openSidebar}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="Settings"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -287,7 +287,7 @@
</button>
<button
onclick={() => openUrl(DONATE_URL)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="Support our work"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -298,7 +298,7 @@
</button>
<button
onclick={() => (showAbout = true)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="About Hikari Desktop"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -312,7 +312,7 @@
</button>
<button
onclick={() => (showKeyboardShortcuts = true)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="Keyboard Shortcuts"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -332,7 +332,7 @@
</button>
<button
onclick={() => (showHelp = true)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="Help"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -346,7 +346,7 @@
</button>
<button
onclick={() => openUrl(DISCORD_URL)}
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
class="p-1 text-gray-500 icon-trans-hover"
title="Join our Discord"
>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
src/lib/components/UpdateNotification.svelte
+1 -1
View File
@@ -55,7 +55,7 @@
<div class="flex gap-2">
<button
onclick={openRelease}
class="px-3 py-1.5 bg-[var(--accent-primary)] text-white rounded text-sm hover:brightness-110 transition-all"
class="btn-trans-gradient px-3 py-1.5 rounded text-sm"
>
View Release
</button>