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

fix: individual frosted glass per cell, only outer corners rounded

Browse Source 
Top bar: rounded-t-2xl. Left: rounded-bl-2xl. Right: rounded-br-2xl.
Bottom: rounded-b-2xl. Center stays transparent. Frame look, no blur bleed.
This commit is contained in:
Dustin Newkirk
2026-06-06 01:05:09 -04:00
parent 2111b3ca9f
commit a135ee5a34
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+6 -6
View File
@@ -116,10 +116,10 @@ export default function App() {
<Particles type={currentScene.particles ?? 'none'} /> <Particles type={currentScene.particles ?? 'none'} />
<div className="relative z-20 h-full p-4"> <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"> <div className="h-full grid grid-rows-[auto_1fr_auto] grid-cols-[288px_1fr_256px]">
{/* ── Top bar: scene selector + clock ── */} {/* ── Top bar: scene selector + clock ── */}
<div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0"> <div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0 bg-white/40 backdrop-blur-xl rounded-t-2xl">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{SCENES.map((s) => ( {SCENES.map((s) => (
<button key={s.id} onClick={() => handleSceneChange(s.id)} <button key={s.id} onClick={() => handleSceneChange(s.id)}
@@ -138,7 +138,7 @@ export default function App() {
</div> </div>
{/* ── Left sidebar ── */} {/* ── Left sidebar ── */}
<div className="flex flex-col gap-3 p-3 overflow-y-auto border-r border-white/20"> <div className="flex flex-col gap-3 p-3 overflow-y-auto bg-white/40 backdrop-blur-xl rounded-bl-2xl">
<div className="shrink-0"> <div className="shrink-0">
<Timer /> <Timer />
</div> </div>
@@ -149,7 +149,7 @@ export default function App() {
</div> </div>
{/* ── Center: transparent for Live2D ── */} {/* ── Center: transparent for Live2D ── */}
<div className="min-w-0 overflow-hidden bg-transparent backdrop-blur-none"> <div className="min-w-0 overflow-hidden">
<KiraAvatar <KiraAvatar
isSpeaking={isKiraSpeaking} isSpeaking={isKiraSpeaking}
isListening={isRecording} isListening={isRecording}
@@ -162,7 +162,7 @@ export default function App() {
</div> </div>
{/* ── Right sidebar ── */} {/* ── Right sidebar ── */}
<div className="flex flex-col p-3 overflow-y-auto border-l border-white/20"> <div className="flex flex-col p-3 overflow-y-auto bg-white/40 backdrop-blur-xl rounded-br-2xl">
<div className="flex-1 flex flex-col gap-3 overflow-y-auto"> <div className="flex-1 flex flex-col gap-3 overflow-y-auto">
<MusicPlayer /> <MusicPlayer />
<WhiteNoise /> <WhiteNoise />
@@ -171,7 +171,7 @@ export default function App() {
</div> </div>
{/* ── Bottom status bar ── */} {/* ── Bottom status bar ── */}
<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="col-span-3 shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 bg-white/40 backdrop-blur-xl rounded-b-2xl">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className={`w-1.5 h-1.5 rounded-full ${ <span className={`w-1.5 h-1.5 rounded-full ${
isRecording ? 'bg-red-400 animate-pulse' isRecording ? 'bg-red-400 animate-pulse'