feat: add durable Hope primary web chat shell
This commit is contained in:
snowspeeder committed
1 parent
985c812a75
commit
2261208a1b
4 files changed
+396
-5
No files matched your search
@@ -1424,3 +1424,102 @@ body[data-mode="text"] .mic-meter {
|
||||
.admin-header { flex-wrap: wrap; }
|
||||
.login-gate { padding: 1.5rem; margin-top: 7vh; }
|
||||
}
|
||||
|
||||
/* Primary Hope shell: quiet Opal, system-native typography, a single reading column. */
|
||||
:root { --accent: #8c3d63; --accent-ink: #fff; }
|
||||
body {padding:0;background:var(--canvas);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
|
||||
.app-shell {display:grid;grid-template-columns:264px minmax(0,1fr);height:100dvh;width:100%;max-width:none;margin:0;gap:0;}
|
||||
.chat-sidebar {background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:24px 16px 16px;overflow:auto;min-width:0;}
|
||||
.sidebar-brand {display:flex;align-items:center;gap:12px;margin-bottom:24px;padding:0 10px;font-size:23px;letter-spacing:-.025em;}
|
||||
.hope-mark {font-size:32px;color:var(--accent);line-height:1;}
|
||||
.new-chat {justify-content:flex-start;background:var(--surface-raised);width:100%;margin-bottom:16px;}
|
||||
.chat-sidebar input {width:100%;padding:11px 12px;background:var(--canvas);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:14px;}
|
||||
.chat-sidebar nav {margin-top:22px;flex:1;}
|
||||
.chat-sidebar h2 {font-size:12px;font-weight:600;color:var(--ink-muted);margin:22px 10px 8px;letter-spacing:0;text-transform:none;}
|
||||
.conversation-link {border:0;background:transparent;color:var(--ink);display:block;text-align:left;border-radius:8px;width:100%;padding:10px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:40px;cursor:pointer;}
|
||||
.conversation-link:hover,.conversation-link[aria-current="page"] {background:var(--surface-raised);}
|
||||
.nav-heading {display:flex;align-items:center;justify-content:space-between;}
|
||||
.workspace-row {display:flex;align-items:center;flex-wrap:wrap;}
|
||||
.workspace-row .conversation-link {width:100%;}
|
||||
.workspace-row .btn {font-size:12px;min-height:30px;padding:4px 10px;color:var(--ink-muted);}
|
||||
.sidebar-footer {display:flex;flex-direction:column;gap:4px;margin-top:20px;border-top:1px solid var(--line);padding-top:14px;}
|
||||
.sidebar-footer .btn {justify-content:flex-start;}
|
||||
.primary-chat {display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--canvas);}
|
||||
.chat-topbar {display:flex;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line);min-height:76px;flex-wrap:wrap;}
|
||||
.chat-topbar h1 {font-size:16px;line-height:1.4;letter-spacing:-.015em;flex:1;min-width:100px;overflow-wrap:anywhere;}
|
||||
.conversation-actions {display:flex;gap:2px;flex-wrap:wrap;}
|
||||
.conversation-actions .btn {font-size:12px;padding:8px;min-height:36px;}
|
||||
.chat-notice {font-size:14px;color:var(--ink-muted);margin:0 28px;}
|
||||
.chat-notice:not(:empty) {padding:12px 0;}
|
||||
.chat-timeline {flex:1;min-height:0;overflow:auto;padding:30px max(24px,calc((100% - 740px)/2));scrollbar-gutter:stable;}
|
||||
.chat-welcome {margin:clamp(50px,15vh,180px) auto 32px;text-align:center;max-width:440px;}
|
||||
.chat-welcome h2 {font-size:28px;font-weight:500;letter-spacing:-.025em;line-height:1.2;margin:20px 0 12px;text-wrap:balance;}
|
||||
.chat-welcome p {color:var(--ink-muted);font-size:15px;line-height:1.7;}
|
||||
.chat-message {margin:0 0 32px;max-width:74ch;font-size:16px;line-height:1.75;overflow-wrap:anywhere;}
|
||||
.chat-message h2 {font-size:13px;font-weight:600;margin-bottom:10px;color:var(--ink-muted);}
|
||||
.chat-message.user .markdown {background:var(--surface);border-radius:12px;padding:14px 18px;}
|
||||
.markdown p {margin:0 0 10px;text-wrap:pretty;}
|
||||
.markdown p:last-child {margin-bottom:0;}
|
||||
.markdown h2,.markdown h3,.markdown h4 {font-size:19px;margin:20px 0 8px;color:var(--ink);}
|
||||
.markdown ul,.markdown ol {padding-left:24px;margin:12px 0;}
|
||||
.markdown a {color:var(--accent);text-decoration:underline;}
|
||||
.markdown pre {overflow:auto;max-width:100%;padding:16px;background:var(--surface);border-radius:8px;font-size:13px;line-height:1.6;margin:14px 0;}
|
||||
.markdown code {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--surface-raised);padding:2px 4px;border-radius:3px;}
|
||||
.markdown pre code {padding:0;background:none;}
|
||||
.markdown blockquote {border:1px solid var(--line);padding:12px 16px;margin:12px 0;border-radius:8px;}
|
||||
.message-actions {display:flex;flex-wrap:wrap;gap:2px;margin-top:8px;align-items:center;font-size:12px;color:var(--ink-muted);}
|
||||
.message-actions .btn {font-size:12px;min-height:32px;padding:4px 8px;}
|
||||
.primary-composer {width:calc(100% - 48px);max-width:740px;margin:12px auto 0;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);}
|
||||
.primary-composer textarea {display:block;resize:vertical;min-height:62px;max-height:220px;width:100%;border:0;background:none;color:var(--ink);font:inherit;line-height:1.6;outline-offset:4px;}
|
||||
textarea::placeholder,input::placeholder {color:var(--ink-muted);opacity:1;}
|
||||
.composer-footer {display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:12px;}
|
||||
.composer-footer span {font-size:11px;color:var(--ink-muted);margin-right:auto;}
|
||||
.chat-footnote {font-size:11px;color:var(--ink-muted);text-align:center;padding:12px 20px 18px;}
|
||||
.run-progress {max-width:740px;width:calc(100% - 48px);margin:0 auto;font-size:14px;color:var(--ink-muted);}
|
||||
.btn {border-radius:8px;min-height:40px;padding:9px 14px;box-shadow:none;font-weight:500;cursor:pointer;}
|
||||
.btn-primary {background:var(--accent);color:var(--accent-ink);border:0;}
|
||||
.btn-primary:hover:not(:disabled) {filter:brightness(1.08);transform:none;}
|
||||
.btn-secondary,.btn-ghost,.btn-icon {background:transparent;color:var(--ink);border:0;}
|
||||
.btn:hover:not(:disabled) {background:var(--surface-raised);transform:none;}
|
||||
.btn-primary:hover:not(:disabled) {background:var(--accent);}
|
||||
button:disabled {opacity:.45;cursor:not-allowed;}
|
||||
:focus-visible {outline:2px solid var(--focus,var(--accent));outline-offset:3px;}
|
||||
#drawerClose,#drawerOpen {display:none;}
|
||||
.legacy-voice {overflow:auto;padding:28px;min-width:0;}
|
||||
.legacy-voice .workspace {grid-template-columns:1fr;}
|
||||
.legacy-voice .topbar {margin-top:24px;}
|
||||
.login-gate {width:calc(100% - 40px);max-width:420px;margin:12vh auto;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
|
||||
.login-gate h1 {font-size:26px;}
|
||||
.login-gate p {margin:14px 0;}
|
||||
dialog {max-width:520px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:24px;}
|
||||
dialog::backdrop {background:rgb(0 0 0 / .35);}
|
||||
dialog h2 {font-size:22px;margin-bottom:16px;}
|
||||
.account-form input,.account-form select,.account-form textarea {font:inherit;color:var(--ink);background:var(--canvas);border:1px solid var(--line);border-radius:6px;padding:10px;width:100%;}
|
||||
.settings-sheet,.tasks-panel {background:var(--surface);color:var(--ink);}
|
||||
.settings-sheet {overflow:auto;max-height:90dvh;}
|
||||
.led-wall {display:grid;grid-template-columns:repeat(21,1fr);width:240px;height:240px;gap:3px;}
|
||||
.led-dot {border-radius:50%;background:var(--accent);border:0;}
|
||||
@media(max-width:760px) {
|
||||
.app-shell {grid-template-columns:minmax(0,1fr);}
|
||||
.chat-sidebar {position:fixed;inset:0 auto 0 0;width:min(310px,85vw);z-index:60;transform:translateX(-100%);transition:transform 180ms ease-out;}
|
||||
.chat-sidebar.drawer-open {transform:translateX(0);}
|
||||
#drawerClose,#drawerOpen {display:inline-flex;}
|
||||
#drawerClose {margin-left:auto;}
|
||||
.drawer-backdrop {position:fixed;inset:0;z-index:50;border:0;background:rgb(0 0 0 / .35);}
|
||||
.chat-topbar {padding:10px 12px;gap:8px;min-height:64px;}
|
||||
.conversation-actions {width:100%;justify-content:flex-end;}
|
||||
.chat-timeline {padding:24px 18px;}
|
||||
.primary-composer {width:calc(100% - 24px);padding:12px;}
|
||||
.composer-footer span {display:none;}
|
||||
.chat-welcome h2 {font-size:25px;}
|
||||
.chat-footnote {padding-bottom:calc(12px + env(safe-area-inset-bottom));}
|
||||
.legacy-voice {padding:16px;}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
|
||||
|
||||
:root {--canvas:var(--hope-ground,#fcf9fb);--surface:var(--hope-surface,#f4eef2);--surface-raised:var(--hope-persona-surface,#eee2e9);--ink:var(--hope-ink,#332831);--ink-muted:var(--hope-quiet,#695662);--ink-soft:var(--hope-quiet,#695662);--line:var(--hope-control-border,#d4c3cf);--accent:var(--hope-accent,#8c3d63);--accent-ink:var(--hope-on-accent,#fff);--focus:var(--hope-focus,#8c3d63);--iris:var(--hope-accent,#8c3d63);--danger:var(--hope-alert,#a32438);color-scheme:light dark;}
|
||||
|
||||
.sidebar-footer .btn,.new-chat {text-align:left;display:flex;justify-content:flex-start;}
|
||||
|
||||
.primary-composer .btn-primary {min-width:84px;flex:0 0 auto;}
|
||||
.primary-composer .btn-primary:disabled,.account-form .btn-primary:disabled,.login-gate .btn-primary:disabled {display:inline-flex;}
|
||||
Reference in new issue
Block a user