hobokenchicken/kira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: unified frosted glass frame around Live2D stage

Browse Source 
Single bg-white/40 backdrop-blur-xl container as CSS grid.
Sidebars, top bar, bottom bar are grid cells sharing one rounded frame.
Center cell transparent for Live2D. Thin border-white/20 dividers.
This commit is contained in:
Dustin Newkirk
2026-06-06 00:56:54 -04:00
parent 09a6993af3
commit 5abdccb113
1 changed files with 42 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+13 -14
View File
@@ -115,9 +115,11 @@ export default function App() {
/>
<Particles type={currentScene.particles ?? 'none'} />
<div className="relative z-20 h-full flex flex-col">
<div className="relative z-20 h-full p-4">
<div className="h-full bg-white/40 backdrop-blur-xl rounded-2xl grid grid-rows-[auto_1fr_auto] grid-cols-[288px_1fr_256px] overflow-hidden">
{/* ── Top bar: scene selector + clock ── */}
<div className="flex items-center justify-between px-5 py-3 shrink-0 bg-white/40 backdrop-blur-xl rounded-2xl mx-4">
<div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0">
<div className="flex items-center gap-1">
{SCENES.map((s) => (
<button key={s.id} onClick={() => handleSceneChange(s.id)}
@@ -135,10 +137,8 @@ export default function App() {
</div>
</div>
{/* ── Main three-column body ── */}
<div className="flex-1 flex min-h-0 px-4 gap-4">
{/* LEFT: Focus Timer + Chat + Input */}
<div className="w-72 shrink-0 flex flex-col gap-3 bg-white/40 backdrop-blur-xl rounded-2xl p-3">
{/* ── Left sidebar ── */}
<div className="flex flex-col gap-3 p-3 overflow-y-auto border-r border-white/20">
<div className="shrink-0">
<Timer />
</div>
@@ -148,8 +148,8 @@ export default function App() {
</div>
</div>
{/* CENTER: Avatar UI overlay (Live2D renders on the background stage) */}
<div className="flex-1 min-w-0 rounded-2xl bg-transparent overflow-hidden">
{/* ── Center: transparent for Live2D ── */}
<div className="min-w-0 overflow-hidden">
<KiraAvatar
isSpeaking={isKiraSpeaking}
isListening={isRecording}
@@ -161,20 +161,17 @@ export default function App() {
/>
</div>
{/* RIGHT: Ambient + Companions */}
<div className="w-64 shrink-0 flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl p-3">
{/* ── Right sidebar ── */}
<div className="flex flex-col p-3 overflow-y-auto border-l border-white/20">
<div className="flex-1 flex flex-col gap-3 overflow-y-auto">
<MusicPlayer />
<WhiteNoise />
<Wardrobe onOutfitChange={handleOutfitChange} onAccessoryChange={handleAccessoryChange} />
</div>
<div className="shrink-0 pt-2">
</div>
</div>
</div>
{/* ── Bottom status bar ── */}
<div className="shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 bg-white/40 backdrop-blur-xl rounded-2xl mx-4">
<div className="col-span-3 shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 border-t border-white/20">
<div className="flex items-center gap-2">
<span className={`w-1.5 h-1.5 rounded-full ${
isRecording ? 'bg-red-400 animate-pulse'
@@ -188,6 +185,8 @@ export default function App() {
<span>💖</span>
</div>
</div>
</div>
</div>
</div>
);