nhcarrigan/hikari-desktop
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 9 Pull Requests 36 Actions Releases 22 Activity
Files
5d9e6fbd8e5e36f957e1947f544f4e91800ad773
hikari-desktop/src/app.css
T
hikari e6e9f7ae59
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 1m39s
Details
CI / Build Linux (push) Has been cancelled
Details
CI / Build Windows (cross-compile) (push) Has been cancelled
Details
CI / Lint & Test (push) Has been cancelled
Details
feat: productivity suite — task loop, workflow, theming, docs & more (#197) 
## Summary

A large productivity-focused feature branch delivering a suite of improvements across automation, project management, theming, performance, and documentation.

### Features

- **Guided Project Workflow** (#189) — Four-phase workflow panel (Discuss → Plan → Execute → Verify) to keep projects structured from idea to completion
- **Automated Task Loop** (#179) — Per-task conversation orchestration with wave-based parallel execution, blocked-task detection, and concurrency control
- **Wave-Based Parallel Execution** (#191) — Tasks run in dependency-aware waves with configurable concurrency; independent tasks execute in parallel
- **Auto-Commit After Task Completion** (#192) — Task Loop optionally commits after each completed task so progress is never lost
- **PRD Creator** (#180) — AI-assisted PRD and task list panel that outputs `hikari-tasks.json` for the Task Loop to consume
- **Project Context Panel** (#188) — Persistent `PROJECT.md`, `REQUIREMENTS.md`, `ROADMAP.md`, and `STATE.md` files injected into Claude's context automatically
- **Codebase Mapper** (#190) — Generates a `CODEBASE.md` architectural summary so Claude always understands the project structure
- **Community Preset Themes** (#181) — Six built-in community themes: Dracula, Catppuccin Mocha, Nord, Solarized Dark, Gruvbox Dark, and Rosé Pine
- **In-App Changelog Panel** (#193) — Fetches release notes from GitHub at runtime and displays them inside the app
- **Full Embedded Documentation** (#196) — Replaced the single-page help modal with a 12-page paginated docs browser featuring a sidebar TOC, prev/next navigation, keyboard navigation (arrow keys, `?` shortcut), and comprehensive coverage of every feature

### Performance & Fixes

- **Lazy Loading & Virtualisation** (#194) — Virtual windowing for conversation history, markdown memoisation, and debounced search for smooth rendering of large sessions
- **Ctrl+C Copy Fix** (#195) — `Ctrl+C` now copies selected text as expected; interrupt-Claude behaviour only fires when no text is selected

### UX

- Back-to-workflow button in PRD Creator and Task Loop panels for easy navigation
- Navigation icon cluster replaced with a single clean dropdown menu

## Closes

Closes #179
Closes #180
Closes #181
Closes #188
Closes #189
Closes #190
Closes #191
Closes #192
Closes #193
Closes #194
Closes #195
Closes #196

---

✨ This PR was created with help from Hikari~ 🌸

Reviewed-on: #197
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>
2026-03-07 03:08:33 -08:00

628 lines
14 KiB
CSS
Raw Blame History

@import "tailwindcss";
:root,
[data-theme="dark"] {
--bg-primary: #1a1a2e;
--bg-secondary: #16213e;
--bg-terminal: #0f0f1a;
--bg-hover: #2a2a4a;
--bg-code: #1e1e2e;
--accent-primary: #e94560;
--accent-secondary: #ff6b9d;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--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;
--terminal-tool-name: #ddd6fe;
--terminal-error: #f87171;
/* Syntax highlighting colors (dark) */
--hljs-keyword: #f472b6;
--hljs-string: #a3e635;
--hljs-number: #fbbf24;
--hljs-comment: #6b7280;
--hljs-function: #c084fc;
--hljs-type: #22d3ee;
--hljs-variable: #fb923c;
--hljs-meta: #94a3b8;
}
[data-theme="light"] {
--bg-primary: #f8f9fa;
--bg-secondary: #ffffff;
--bg-terminal: #f1f3f4;
--bg-hover: #e8e8e8;
--bg-code: #f5f5f5;
--accent-primary: #e94560;
--accent-secondary: #ff6b9d;
--text-primary: #1a1a2e;
--text-secondary: #5a5a7a;
--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;
--terminal-tool-name: #8b5cf6;
--terminal-error: #dc2626;
/* Syntax highlighting colors (light) */
--hljs-keyword: #d946ef;
--hljs-string: #16a34a;
--hljs-number: #d97706;
--hljs-comment: #9ca3af;
--hljs-function: #7c3aed;
--hljs-type: #0891b2;
--hljs-variable: #ea580c;
--hljs-meta: #64748b;
}
[data-theme="high-contrast"] {
--bg-primary: #000000;
--bg-secondary: #0a0a0a;
--bg-terminal: #000000;
--bg-hover: #1a1a1a;
--bg-code: #0a0a0a;
--accent-primary: #ff4d6d;
--accent-secondary: #ff85a1;
--text-primary: #ffffff;
--text-secondary: #e0e0e0;
--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;
--terminal-tool-name: #ffaaff;
--terminal-error: #ff5555;
/* Syntax highlighting colors (high contrast) */
--hljs-keyword: #ff66ff;
--hljs-string: #66ff66;
--hljs-number: #ffff00;
--hljs-comment: #aaaaaa;
--hljs-function: #ff99ff;
--hljs-type: #00ffff;
--hljs-variable: #ffaa00;
--hljs-meta: #cccccc;
}
[data-theme="dracula"] {
--bg-primary: #282a36;
--bg-secondary: #1e1f29;
--bg-terminal: #191a21;
--bg-hover: #44475a;
--bg-code: #282a36;
--accent-primary: #bd93f9;
--accent-secondary: #ff79c6;
--text-primary: #f8f8f2;
--text-secondary: #6272a4;
--text-tertiary: #44475a;
--border-color: #44475a;
/* 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: #8be9fd;
--terminal-tool: #bd93f9;
--terminal-tool-name: #caa9fa;
--terminal-error: #ff5555;
/* Syntax highlighting colors (Dracula) */
--hljs-keyword: #ff79c6;
--hljs-string: #f1fa8c;
--hljs-number: #bd93f9;
--hljs-comment: #6272a4;
--hljs-function: #50fa7b;
--hljs-type: #8be9fd;
--hljs-variable: #ffb86c;
--hljs-meta: #94a3b8;
}
[data-theme="catppuccin"] {
--bg-primary: #1e1e2e;
--bg-secondary: #181825;
--bg-terminal: #11111b;
--bg-hover: #313244;
--bg-code: #1e1e2e;
--accent-primary: #cba6f7;
--accent-secondary: #f5c2e7;
--text-primary: #cdd6f4;
--text-secondary: #a6adc8;
--text-tertiary: #6c7086;
--border-color: #313244;
/* 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: #89dceb;
--terminal-tool: #cba6f7;
--terminal-tool-name: #d9b3ff;
--terminal-error: #f38ba8;
/* Syntax highlighting colors (Catppuccin Mocha) */
--hljs-keyword: #cba6f7;
--hljs-string: #a6e3a1;
--hljs-number: #fab387;
--hljs-comment: #6c7086;
--hljs-function: #89b4fa;
--hljs-type: #89dceb;
--hljs-variable: #fab387;
--hljs-meta: #a6adc8;
}
[data-theme="nord"] {
--bg-primary: #2e3440;
--bg-secondary: #3b4252;
--bg-terminal: #242933;
--bg-hover: #434c5e;
--bg-code: #2e3440;
--accent-primary: #88c0d0;
--accent-secondary: #81a1c1;
--text-primary: #eceff4;
--text-secondary: #d8dee9;
--text-tertiary: #4c566a;
--border-color: #434c5e;
/* 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: #88c0d0;
--terminal-tool: #b48ead;
--terminal-tool-name: #c7a8c9;
--terminal-error: #bf616a;
/* Syntax highlighting colors (Nord) */
--hljs-keyword: #81a1c1;
--hljs-string: #a3be8c;
--hljs-number: #b48ead;
--hljs-comment: #4c566a;
--hljs-function: #88c0d0;
--hljs-type: #8fbcbb;
--hljs-variable: #d08770;
--hljs-meta: #616e88;
}
[data-theme="solarized"] {
--bg-primary: #002b36;
--bg-secondary: #073642;
--bg-terminal: #00212b;
--bg-hover: #094656;
--bg-code: #002b36;
--accent-primary: #268bd2;
--accent-secondary: #2aa198;
--text-primary: #fdf6e3;
--text-secondary: #93a1a1;
--text-tertiary: #657b83;
--border-color: #094656;
/* 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: #2aa198;
--terminal-tool: #6c71c4;
--terminal-tool-name: #9395d0;
--terminal-error: #dc322f;
/* Syntax highlighting colors (Solarized Dark) */
--hljs-keyword: #859900;
--hljs-string: #2aa198;
--hljs-number: #d33682;
--hljs-comment: #586e75;
--hljs-function: #268bd2;
--hljs-type: #b58900;
--hljs-variable: #cb4b16;
--hljs-meta: #657b83;
}
[data-theme="solarized-light"] {
--bg-primary: #fdf6e3;
--bg-secondary: #eee8d5;
--bg-terminal: #f9f3d7;
--bg-hover: #d8d1be;
--bg-code: #eee8d5;
--accent-primary: #268bd2;
--accent-secondary: #2aa198;
--text-primary: #657b83;
--text-secondary: #839496;
--text-tertiary: #93a1a1;
--border-color: #cfc9b5;
/* 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: #268bd2;
--terminal-tool: #6c71c4;
--terminal-tool-name: #8f94cc;
--terminal-error: #dc322f;
/* Syntax highlighting colors (Solarized Light) */
--hljs-keyword: #859900;
--hljs-string: #2aa198;
--hljs-number: #d33682;
--hljs-comment: #93a1a1;
--hljs-function: #268bd2;
--hljs-type: #b58900;
--hljs-variable: #cb4b16;
--hljs-meta: #657b83;
}
[data-theme="catppuccin-latte"] {
--bg-primary: #eff1f5;
--bg-secondary: #e6e9ef;
--bg-terminal: #dce0e8;
--bg-hover: #ccd0da;
--bg-code: #e6e9ef;
--accent-primary: #8839ef;
--accent-secondary: #ea76cb;
--text-primary: #4c4f69;
--text-secondary: #6c6f85;
--text-tertiary: #9ca0b0;
--border-color: #bcc0cc;
/* 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: #209fb5;
--terminal-tool: #8839ef;
--terminal-tool-name: #a259f1;
--terminal-error: #d20f39;
/* Syntax highlighting colors (Catppuccin Latte) */
--hljs-keyword: #8839ef;
--hljs-string: #40a02b;
--hljs-number: #fe640b;
--hljs-comment: #8c8fa1;
--hljs-function: #1e66f5;
--hljs-type: #209fb5;
--hljs-variable: #fe640b;
--hljs-meta: #5c5f77;
}
[data-theme="gruvbox-light"] {
--bg-primary: #fbf1c7;
--bg-secondary: #ebdbb2;
--bg-terminal: #f9f5d7;
--bg-hover: #d5c4a1;
--bg-code: #ebdbb2;
--accent-primary: #458588;
--accent-secondary: #689d6a;
--text-primary: #3c3836;
--text-secondary: #665c54;
--text-tertiary: #7c6f64;
--border-color: #bdae93;
/* 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: #458588;
--terminal-tool: #b16286;
--terminal-tool-name: #c37aa0;
--terminal-error: #cc241d;
/* Syntax highlighting colors (Gruvbox Light) */
--hljs-keyword: #d65d0e;
--hljs-string: #98971a;
--hljs-number: #b16286;
--hljs-comment: #928374;
--hljs-function: #458588;
--hljs-type: #d79921;
--hljs-variable: #af3a03;
--hljs-meta: #7c6f64;
}
[data-theme="rose-pine-dawn"] {
--bg-primary: #faf4ed;
--bg-secondary: #fffaf3;
--bg-terminal: #f2e9e1;
--bg-hover: #dfdad9;
--bg-code: #fffaf3;
--accent-primary: #907aa9;
--accent-secondary: #d7827e;
--text-primary: #575279;
--text-secondary: #797593;
--text-tertiary: #9893a5;
--border-color: #cecacd;
/* 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: #56949f;
--terminal-tool: #907aa9;
--terminal-tool-name: #a48abf;
--terminal-error: #b4637a;
/* Syntax highlighting colors (Rosé Pine Dawn) */
--hljs-keyword: #286983;
--hljs-string: #56949f;
--hljs-number: #ea9d34;
--hljs-comment: #9893a5;
--hljs-function: #907aa9;
--hljs-type: #d7827e;
--hljs-variable: #b4637a;
--hljs-meta: #797593;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-family: var(--ui-font-family, "Segoe UI", system-ui, -apple-system, sans-serif);
background: var(--bg-primary);
color: var(--text-primary);
}
#app {
height: 100%;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-primary);
}
::selection {
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));
}
Reference in New Issue View Git Blame Copy Permalink