nhcarrigan/hikari-desktop
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 9 Pull Requests 36 Actions Releases 22 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/app.css
+64
View File
@@ -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));
}
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>
src/routes/+page.svelte
+181 -1
View File
@@ -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 @@
<main class="flex-1 flex overflow-hidden">
<!-- Left panel: Character display -->
<div
class="character-panel flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
class="character-panel {getPanelGlowClass()} flex flex-col items-center justify-center bg-[var(--bg-secondary)]/50"
style="width: {panelWidth}px; min-width: {MIN_PANEL_WIDTH}px; max-width: {MAX_PANEL_WIDTH}px;"
>
<AnimeGirl />
@@ -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,