/* localAI -- one stylesheet, no build step. Colour lives in custom properties so the theme can be flipped by setting data-theme on ; the media query only supplies the default. */ :root { color-scheme: light; --bg: #ffffff; --bg-sunken: #f7f7f8; --bg-raised: #ffffff; --bg-hover: #ececef; --bg-active: #e3e3e8; --border: #e3e3e8; --border-strong: #cfcfd6; --text: #1f2023; --text-muted: #6b6c73; --text-faint: #9a9ba1; --accent: #2f6f4e; --accent-text: #ffffff; --accent-soft: #e8f2ec; --danger: #b3261e; --danger-soft: #fdecea; --code-bg: #f4f4f6; --code-border: #e3e3e8; --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 5%); --radius: 10px; --sidebar-w: 264px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1b1c1f; --bg-sunken: #141518; --bg-raised: #232428; --bg-hover: #2b2c31; --bg-active: #34353b; --border: #303136; --border-strong: #43444b; --text: #ececef; --text-muted: #a3a4ab; --text-faint: #74757c; --accent: #6cc39a; --accent-text: #10241a; --accent-soft: #1e3329; --danger: #f2857c; --danger-soft: #3a1d1b; --code-bg: #17181b; --code-border: #2c2d32; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #1b1c1f; --bg-sunken: #141518; --bg-raised: #232428; --bg-hover: #2b2c31; --bg-active: #34353b; --border: #303136; --border-strong: #43444b; --text: #ececef; --text-muted: #a3a4ab; --text-faint: #74757c; --accent: #6cc39a; --accent-text: #10241a; --accent-soft: #1e3329; --danger: #f2857c; --danger-soft: #3a1d1b; --code-bg: #17181b; --code-border: #2c2d32; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } /* --- generic controls ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-raised); cursor: pointer; font-size: 14px; line-height: 1.2; transition: background 120ms ease, border-color 120ms ease; } .btn:hover { background: var(--bg-hover); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 550; } .btn-primary:hover { filter: brightness(1.08); background: var(--accent); } .btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); padding: 5px 8px; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text); } .btn-danger { color: var(--danger); border-color: var(--border-strong); } .btn-danger:hover { background: var(--danger-soft); } .field { display: block; width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); outline: none; } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } label.label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 550; color: var(--text-muted); } .hint { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; } .notice { padding: 10px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-sunken); font-size: 14px; margin-bottom: 14px; } .notice-error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .notice-ok { border-color: var(--accent); background: var(--accent-soft); } /* --- auth pages ----------------------------------------------------------- */ .auth-wrap { min-height: 100%; display: grid; place-items: center; padding: 32px 20px; background: var(--bg-sunken); } .auth-card { width: 100%; max-width: 400px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); } .auth-card h1 { margin: 0 0 4px; font-size: 21px; } .auth-card .sub { color: var(--text-muted); font-size: 14px; margin: 0 0 22px; } .auth-card .row { margin-bottom: 14px; } .auth-card .btn { width: 100%; justify-content: center; } .auth-foot { margin-top: 18px; font-size: 13px; color: var(--text-muted); text-align: center; } /* --- app shell ------------------------------------------------------------ */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100%; } .sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--bg-sunken); border-right: 1px solid var(--border); } .sidebar-head { padding: 12px; } .sidebar-head .btn { width: 100%; justify-content: center; } .conv-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; min-height: 0; } .conv { display: flex; align-items: center; gap: 4px; border-radius: 8px; padding: 0 2px 0 10px; margin-bottom: 1px; } .conv:hover { background: var(--bg-hover); } .conv.active { background: var(--bg-active); } .conv a { flex: 1; min-width: 0; padding: 8px 0; text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-actions { display: none; gap: 2px; } .conv:hover .conv-actions, .conv.active .conv-actions { display: flex; } .conv-actions .btn-ghost { padding: 4px 6px; font-size: 12px; } .conv-empty { padding: 14px 12px; color: var(--text-faint); font-size: 13.5px; } .sidebar-foot { border-top: 1px solid var(--border); padding: 10px 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .sidebar-foot .signout { display: flex; } .sidebar-foot .who { flex: 1; min-width: 0; } .sidebar-foot .who strong { display: block; font-weight: 550; } .sidebar-foot .who span { color: var(--text-faint); font-size: 12px; } /* --- main pane ------------------------------------------------------------ */ .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg); } .topbar h2 { flex: 1; margin: 0; font-size: 15px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .model-select { padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-raised); max-width: 260px; } .capacity { font-size: 12px; color: var(--text-faint); white-space: nowrap; } .messages { flex: 1; overflow-y: auto; padding: 24px 0 8px; min-height: 0; scroll-behavior: smooth; } .msg-row { padding: 0 18px; } .msg { max-width: 760px; margin: 0 auto 22px; display: flex; gap: 14px; } .avatar { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 650; background: var(--bg-active); color: var(--text-muted); margin-top: 2px; } .msg.assistant .avatar { background: var(--accent); color: var(--accent-text); } .bubble { flex: 1; min-width: 0; } .bubble .who { font-size: 12.5px; color: var(--text-faint); margin-bottom: 3px; } .content { overflow-wrap: anywhere; } .content.plain { white-space: pre-wrap; } .content > :first-child { margin-top: 0; } .content > :last-child { margin-bottom: 0; } .content p { margin: 0 0 12px; } .content ul, .content ol { margin: 0 0 12px; padding-left: 24px; } .content li { margin-bottom: 4px; } .content h1, .content h2, .content h3 { margin: 20px 0 10px; line-height: 1.3; } .content h1 { font-size: 20px; } .content h2 { font-size: 17px; } .content h3 { font-size: 15.5px; } .content blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .content table { border-collapse: collapse; margin: 0 0 12px; display: block; overflow-x: auto; } .content th, .content td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .content th { background: var(--bg-sunken); } .content code { font-family: var(--mono); font-size: 0.875em; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 4px; padding: 1px 4px; } .content pre { margin: 0 0 12px; background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--radius); overflow: hidden; } .content pre code { display: block; padding: 12px 14px; overflow-x: auto; background: none; border: 0; border-radius: 0; font-size: 13px; line-height: 1.55; } .code-head { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--code-border); font-size: 11.5px; color: var(--text-faint); text-transform: lowercase; } /* Reasoning traces are collapsed by default: useful, but not the answer. */ .think { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-sunken); font-size: 13.5px; } .think > summary { cursor: pointer; padding: 7px 12px; color: var(--text-muted); user-select: none; } .think > .think-body { padding: 0 12px 10px; color: var(--text-muted); white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; max-height: 340px; overflow-y: auto; } .msg-meta { margin-top: 6px; font-size: 12px; color: var(--text-faint); display: flex; gap: 12px; align-items: center; opacity: 0; transition: opacity 120ms ease; } .msg:hover .msg-meta, .msg-meta.pinned { opacity: 1; } .status-line { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } .msg-error { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; } /* --- composer ------------------------------------------------------------- */ .composer-wrap { border-top: 1px solid var(--border); background: var(--bg); padding: 12px 18px 16px; } .composer { max-width: 760px; margin: 0 auto; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-raised); padding: 8px 8px 8px 14px; display: flex; align-items: flex-end; gap: 8px; box-shadow: var(--shadow); } .composer:focus-within { border-color: var(--accent); } .composer textarea { flex: 1; border: 0; outline: none; resize: none; background: none; padding: 7px 0; max-height: 240px; line-height: 1.5; } .composer-foot { max-width: 760px; margin: 7px auto 0; font-size: 12px; color: var(--text-faint); display: flex; gap: 14px; align-items: center; } .send-btn { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--accent); color: var(--accent-text); cursor: pointer; display: grid; place-items: center; } .send-btn:disabled { background: var(--bg-active); color: var(--text-faint); cursor: not-allowed; } /* --- settings drawer, admin, tables --------------------------------------- */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(400px, 100%); background: var(--bg-raised); border-left: 1px solid var(--border); box-shadow: var(--shadow); padding: 20px; overflow-y: auto; z-index: 30; } .drawer h3 { margin: 0 0 4px; font-size: 17px; } .drawer .row { margin-bottom: 15px; } .drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 28%); z-index: 20; } .page { max-width: 940px; margin: 0 auto; padding: 28px 22px 60px; } .page h1 { font-size: 22px; margin: 0 0 6px; } .page h2 { font-size: 16px; margin: 32px 0 10px; } .page .lead { color: var(--text-muted); margin: 0 0 20px; } table.grid { width: 100%; border-collapse: collapse; font-size: 14px; } table.grid th, table.grid td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); } table.grid th { font-size: 12.5px; color: var(--text-muted); font-weight: 550; } table.grid tr:hover td { background: var(--bg-sunken); } .tag { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11.5px; background: var(--bg-active); color: var(--text-muted); } .tag-admin { background: var(--accent-soft); color: var(--accent); } .tag-off { background: var(--danger-soft); color: var(--danger); } code.invite { font-family: var(--mono); background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 6px; padding: 3px 7px; user-select: all; } /* --- responsive ----------------------------------------------------------- */ .sidebar-toggle { display: none; } @media (max-width: 820px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40; transform: translateX(-100%); transition: transform 160ms ease; } body.nav-open .sidebar { transform: none; } body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / 35%); z-index: 35; } .sidebar-toggle { display: inline-flex; } .msg-meta { opacity: 1; } } /* --- syntax highlighting (highlight.js class names) ----------------------- */ .hljs-comment, .hljs-quote { color: var(--text-faint); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: #a626a4; } .hljs-string, .hljs-regexp, .hljs-addition { color: #2f8a4a; } .hljs-number, .hljs-symbol, .hljs-bullet { color: #b76b01; } .hljs-title, .hljs-section, .hljs-name { color: #3d6cc4; } .hljs-type, .hljs-class .hljs-title, .hljs-built_in { color: #b1811d; } .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #c0392b; } .hljs-meta { color: var(--text-muted); } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 650; } .hljs-deletion { color: var(--danger); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hljs-keyword, :root:not([data-theme="light"]) .hljs-selector-tag, :root:not([data-theme="light"]) .hljs-literal { color: #d8a0e8; } :root:not([data-theme="light"]) .hljs-string, :root:not([data-theme="light"]) .hljs-addition { color: #96d7a4; } :root:not([data-theme="light"]) .hljs-number, :root:not([data-theme="light"]) .hljs-symbol { color: #e5b567; } :root:not([data-theme="light"]) .hljs-title, :root:not([data-theme="light"]) .hljs-section, :root:not([data-theme="light"]) .hljs-name { color: #86b6f0; } :root:not([data-theme="light"]) .hljs-type, :root:not([data-theme="light"]) .hljs-built_in { color: #e0c184; } :root:not([data-theme="light"]) .hljs-attr, :root:not([data-theme="light"]) .hljs-variable { color: #ec9b8e; } } :root[data-theme="dark"] .hljs-keyword, :root[data-theme="dark"] .hljs-selector-tag, :root[data-theme="dark"] .hljs-literal { color: #d8a0e8; } :root[data-theme="dark"] .hljs-string, :root[data-theme="dark"] .hljs-addition { color: #96d7a4; } :root[data-theme="dark"] .hljs-number, :root[data-theme="dark"] .hljs-symbol { color: #e5b567; } :root[data-theme="dark"] .hljs-title, :root[data-theme="dark"] .hljs-section, :root[data-theme="dark"] .hljs-name { color: #86b6f0; } :root[data-theme="dark"] .hljs-type, :root[data-theme="dark"] .hljs-built_in { color: #e0c184; } :root[data-theme="dark"] .hljs-attr, :root[data-theme="dark"] .hljs-variable { color: #ec9b8e; } /* --- image attachments ---------------------------------------------------- */ .attach-btn { display: flex; align-items: center; padding: 0 .5rem; font-size: 1.1rem; cursor: pointer; opacity: .65; user-select: none; } .attach-btn:hover { opacity: 1; } .attach-preview { position: relative; display: inline-block; margin: .5rem 0 0 .25rem; } .attach-preview img { max-height: 5rem; border-radius: .4rem; border: 1px solid var(--line, #d5d5d5); } .attach-remove { position: absolute; top: -.4rem; right: -.4rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: none; background: rgba(0, 0, 0, .65); color: #fff; line-height: 1; cursor: pointer; } /* Thumbnails inside a sent message. */ .attach-thumb { display: inline-block; margin: 0 .35rem .35rem 0; } .attach-thumb img { max-height: 11rem; max-width: 100%; border-radius: .4rem; border: 1px solid var(--line, #d5d5d5); }