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
This commit is contained in:
2026-01-25 17:07:32 -08:00
parent 02cc8bd0d5
commit c34720346e
11 changed files with 295 additions and 117 deletions
+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>