63 lines
5.9 KiB
CSS
63 lines
5.9 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
color: #f1f3f4;
|
|
background: #202326;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
[hidden] { display:none !important; }
|
|
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 52% 34%, #33373a 0, #25282b 46%, #1a1d20 100%); }
|
|
.alfred-shell { position:relative; isolation:isolate; display:grid; grid-template-rows: 56px minmax(0,1fr) 142px; gap:16px; min-height:100vh; min-height:100dvh; padding:25px 36px; }
|
|
.topbar { display:flex; align-items:center; justify-content:space-between; z-index:5; }
|
|
.status { display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:500; color:#e6eaed; letter-spacing:.045em; }
|
|
.status-dot { width:10px; height:10px; border-radius:50%; background:#7d8790; box-shadow:0 0 0 4px #ffffff0a; transition:background .25s,box-shadow .25s; }
|
|
.status-dot[data-mode="listening"] { background:#70c7ce; box-shadow:0 0 0 5px #70c7ce17; animation:status-pulse 1.6s infinite; }
|
|
.status-dot[data-mode="thinking"] { background:#e7bb72; box-shadow:0 0 0 5px #e7bb7217; animation:status-pulse 1.9s infinite; }
|
|
.status-dot[data-mode="speaking"] { background:#9ad0b7; box-shadow:0 0 0 5px #9ad0b717; animation:status-pulse 1.4s infinite; }
|
|
.status-dot[data-mode="error"] { background:#f18989; box-shadow:0 0 0 5px #f1898917; }
|
|
.header-actions { display:flex; gap:10px; align-items:center; }
|
|
.icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff22; border-radius:13px; background:#ffffff08; color:#e8ebee; cursor:pointer; transition:background .2s,border-color .2s; }
|
|
.icon-button:hover { background:#ffffff14; border-color:#ffffff35; }
|
|
.icon-button:focus-visible,.panel-action:focus-visible,.quiet-button:focus-visible { outline:2px solid #adc8e0; outline-offset:3px; }
|
|
.icon-button svg { width:21px; height:21px; }
|
|
.icon-button[aria-pressed="true"] { color:#f4a2a2; background:#ae47471b; border-color:#b95d5d55; }
|
|
.speaker-off-icon { display:none; }
|
|
.icon-button[aria-pressed="true"] .speaker-on-icon { display:none; }
|
|
.icon-button[aria-pressed="true"] .speaker-off-icon { display:block; }
|
|
#stage { display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; padding:0 8%; }
|
|
#content { width:min(990px,86vw); text-align:center; transition:opacity .25s ease,transform .25s ease; animation:appear .45s ease; }
|
|
#content.swap { opacity:0; transform:translateY(10px) scale(.99); }
|
|
#content h1 { font-size:clamp(2rem,4vw,4.3rem); font-weight:350; margin:.2em 0; line-height:1.2; }
|
|
#content p { font-size:clamp(1rem,1.6vw,1.35rem); color:#cdd1d4; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
|
|
.hero { max-width:min(100%,750px); max-height:56vh; object-fit:contain; border-radius:18px; box-shadow:0 18px 50px #0006; animation:appear .45s ease; }
|
|
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:13px; text-align:left; }
|
|
.card { padding:18px; border:1px solid #ffffff1c; background:#ffffff0a; border-radius:15px; }
|
|
.card h2 { margin:0 0 8px; font-weight:500; }
|
|
.card p { margin:0; font-size:1rem; }
|
|
#wave { display:flex; align-items:center; justify-self:center; width: min(560px,37vw); height:100px; align-self:end; }
|
|
#wave canvas { width:100%; height:100%; }
|
|
.camera-panel,.transcript-panel { position:absolute; z-index:2; bottom:34px; border:1px solid #ffffff20; background:#222629db; box-shadow:0 14px 35px #0002; border-radius:16px; backdrop-filter:blur(12px); }
|
|
.camera-panel { left:36px; width:clamp(220px,24vw,355px); overflow:hidden; }
|
|
.transcript-panel { right:36px; width:clamp(250px,25vw,405px); padding:15px 17px 18px; min-height:136px; }
|
|
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:0 13px; }
|
|
.transcript-panel .panel-heading { padding:0; min-height:30px; }
|
|
.panel-title { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.1em; font-weight:700; color:#abb5be; }
|
|
.panel-indicator { width:7px; height:7px; border-radius:50%; background:#71818c; }
|
|
.camera-panel[data-active="true"] .panel-indicator { background:#83c5cc; }
|
|
.transcript-panel[data-active="true"] .stt-indicator { background:#83c5cc; }
|
|
.panel-action { border:0; border-radius:8px; background:#ffffff0c; color:#e3e8ed; padding:7px 10px; font-size:12px; cursor:pointer; }
|
|
.panel-action:hover { background:#ffffff22; }
|
|
.camera-viewport { display:grid; place-items:center; position:relative; aspect-ratio:16/9; background:#101315; overflow:hidden; }
|
|
.camera-viewport > * { grid-area:1/1; }
|
|
.camera-viewport img { width:100%; height:100%; object-fit:contain; }
|
|
.camera-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; color:#919ca4; font-size:12px; text-align:center; padding:12px; }
|
|
.camera-placeholder svg { width:30px; height:30px; opacity:.65; }
|
|
.transcript-state { color:#909ba3; font-size:11px; flex-shrink:0; }
|
|
.transcript-text { margin:11px 0 0; color:#edf0f2; font-size:14px; line-height:1.6; overflow-wrap:anywhere; max-height:110px; overflow-y:auto; }
|
|
.transcript-text.is-placeholder { color:#87939c; }
|
|
@keyframes appear { from { opacity:0; transform:translateY(8px) } to { opacity:1;transform:translateY(0) } }
|
|
@keyframes status-pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
|
|
@media(max-width:1120px) { #wave { width:28vw; } .camera-panel { width:27vw; } .transcript-panel { width:29vw; } }
|
|
@media(max-width:760px) { .alfred-shell { padding:14px; grid-template-rows:50px minmax(220px,1fr) 80px auto; gap:8px; } #stage { padding:10px; } #wave { width:80%; height:70px; } .camera-panel,.transcript-panel { position:relative; left:auto; right:auto; bottom:auto; width:100%; } .camera-panel { grid-row:4; max-width:none; } .transcript-panel { grid-row:5; min-height:auto; } .topbar { grid-row:1; } }
|
|
@media(prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }
|