/* ========================================================================= beautiful-ui.css — vanilla clone of the "Beautiful UI" primitive language (beautifui.dev, MIT), reworked for elude's red/dark theme and rebuilt as plain CSS + vanilla JS (no React/Next/Tailwind). All custom properties are prefixed --bui- so nothing here collides with base.css's --ink/--bg/etc, which mean different things there. ========================================================================= */ /* These now alias the site's real tokens (base.css) instead of a separate palette, so every bui-* component matches the page it's dropped into and the theme switcher below recolors the whole site, not just these components. */ :root{ --bui-canvas:var(--bg); --bui-surface:var(--panel); --bui-field:var(--panel-soft); --bui-inset:var(--bg-soft); --bui-hover:rgba(255,255,255,.04); --bui-hover-2:rgba(255,255,255,.07); --bui-text:var(--ink); --bui-text-2:var(--body); --bui-text-3:var(--dim); --bui-line:var(--line-soft); --bui-line-strong:var(--line); --bui-accent:var(--red); --bui-accent-ink:var(--red-soft); --bui-accent-tint:rgba(255,34,63,.12); --bui-green:#37d67a; --bui-green-tint:rgba(55,214,122,.12); --bui-red:#ff4d5e; --bui-red-tint:rgba(255,77,94,.12); --bui-radius-card:14px; --bui-radius-control:9px; --bui-radius-chip:8px; --bui-shadow-hairline:0 0 0 1px var(--bui-line); --bui-shadow-card:0 1px 2px rgba(0,0,0,.3), 0 0 0 1px var(--bui-line-strong); --bui-shadow-overlay:var(--shadow-lift); --bui-border:1px solid var(--line); --bui-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* Catppuccin theme overrides — applied to by the theme switcher. These now override the site's real --bg/--panel/ --ink/--red tokens directly (base.css), so picking a theme recolors the whole site, not just the bui-* components — the bui- tokens above just inherit from them automatically via var(). */ html[data-bui-theme="mocha"]{ --bg:#11111b; --bg-soft:#0e0e17; --panel:#181825; --panel-soft:#1e1e2e; --ink:#cdd6f4; --body:#a6adc8; --dim:#7f849c; --ink-muted:#7f849c; --line:#313244; --line-soft:#26263a; --red:#f38ba8; --red-soft:#f5c2e7; } html[data-bui-theme="latte"]{ --bg:#eff1f5; --bg-soft:#e6e9ef; --panel:#ffffff; --panel-soft:#e6e9ef; --ink:#4c4f69; --body:#6c6f85; --dim:#8c8fa1; --ink-muted:#8c8fa1; --line:#ccd0da; --line-soft:#dce0e8; --red:#d20f39; --red-soft:#e64553; } @keyframes bui-spin{ to{ transform:rotate(360deg); } } @keyframes bui-pop-in{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } } @keyframes bui-fade-in{ from{ opacity:0; } to{ opacity:1; } } @keyframes bui-fade-up{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } @keyframes bui-shimmer-text{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } } @keyframes bui-pixel-on{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } } @keyframes bui-stream-in{ from{ opacity:0; filter:blur(3px); } to{ opacity:1; filter:blur(0); } } /* ---------------- page loader (loading state between pages) ---------------- */ #bui-page-loader{ position:fixed; inset:0; z-index:9999; background:var(--bui-canvas); display:flex; align-items:center; justify-content:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .25s ease; } #bui-page-loader.is-active{ opacity:1; pointer-events:all; } .bui-loader-grid{ display:grid; grid-template-columns:repeat(3,6px); gap:3px; } .bui-loader-grid span{ width:6px; height:6px; border-radius:2px; background:var(--bui-accent); opacity:.15; } .bui-loader-label{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; background-image:linear-gradient(90deg, var(--bui-text-3) 35%, var(--bui-text) 50%, var(--bui-text-3) 65%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:bui-shimmer-text 1.4s linear infinite; } /* ---------------- streaming text ---------------- */ .bui-stream p{ font-family:'Inter',sans-serif; font-size:inherit; line-height:inherit; } .bui-stream .bui-tok{ display:inline; animation:bui-stream-in 420ms cubic-bezier(.22,.61,.25,1) both; } .bui-stream .bui-caret{ display:inline-block; width:2px; height:.9em; margin-left:2px; border-radius:2px; background:currentColor; vertical-align:-.1em; animation:bui-fade-in .15s ease-out both; } /* ---------------- tool chips ---------------- */ .bui-chips{ font-family:'Inter',sans-serif; } .bui-chips-toggle{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; color:var(--bui-text-2); font-size:12.5px; padding:4px 6px; margin:-4px -6px 0; border-radius:7px; } .bui-chips-toggle:hover{ background:var(--bui-hover-2); } .bui-chips-toggle svg{ transition:transform .2s; } .bui-chips-toggle[aria-expanded="false"] svg{ transform:rotate(-90deg); } .bui-chips-rows{ display:flex; flex-direction:column; gap:4px; margin-top:8px; overflow:hidden; } .bui-chip-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; min-height:28px; animation:bui-fade-up 300ms cubic-bezier(.23,1,.32,1) both; } .bui-chip-row .bui-chip-icon{ color:var(--bui-text-3); flex-shrink:0; } .bui-chip-row .bui-chip-label{ font-size:12.5px; font-weight:500; color:var(--bui-text); flex-shrink:0; } .bui-chip-row .bui-chip-pill{ flex:1 1 160px; min-width:0; height:22px; display:flex; align-items:center; padding:0 8px; background:var(--bui-field); box-shadow:var(--bui-shadow-hairline); border-radius:6px; font-size:11.5px; color:var(--bui-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---------------- task rows ---------------- */ .bui-taskrows{ display:flex; flex-direction:column; gap:8px; font-family:'Inter',sans-serif; } .bui-taskrow{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bui-surface); box-shadow:var(--bui-shadow-card); border-radius:16px; animation:bui-fade-up 400ms cubic-bezier(.23,1,.32,1) both; } .bui-taskrow-badge{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; font-size:10px; font-weight:700; } .bui-taskrow-badge.pending{ background:none; box-shadow:0 0 0 2px var(--bui-line) inset; color:var(--bui-text); position:relative; } .bui-taskrow-badge.pending::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid transparent; border-top-color:var(--bui-text-3); animation:bui-spin 1.1s linear infinite; } .bui-taskrow-badge.done{ background:var(--bui-green); } .bui-taskrow-badge.failed{ background:var(--bui-red); } .bui-taskrow-label{ flex:1; min-width:0; font-size:13px; font-weight:500; color:var(--bui-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bui-taskrow-meta{ font-size:12px; color:var(--bui-text-2); flex-shrink:0; } .bui-taskrow-pill{ flex-shrink:0; height:20px; display:flex; align-items:center; padding:0 8px; border-radius:99px; font-size:11px; font-weight:600; } .bui-taskrow-pill.done{ background:var(--bui-green-tint); color:var(--bui-green); } .bui-taskrow-pill.failed{ background:var(--bui-red-tint); color:var(--bui-red); } /* ---------------- chat ---------------- */ .bui-chat{ border:var(--bui-border); display:flex; flex-direction:column; width:100%; max-width:420px; height:320px; background:var(--bui-surface); box-shadow:var(--bui-shadow-card); border-radius:16px; overflow:hidden; font-family:'Inter',sans-serif; } .bui-chat-head{ padding:12px 14px; border-bottom:1px solid var(--bui-line); font-size:13px; font-weight:600; color:var(--bui-text); } .bui-chat-body{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; } .bui-chat-msg{ display:flex; } .bui-chat-msg.user{ justify-content:flex-end; } .bui-chat-bubble{ max-width:85%; padding:7px 11px; border-radius:12px; font-size:13px; line-height:1.45; animation:bui-fade-up 300ms cubic-bezier(.23,1,.32,1) both; } .bui-chat-msg.user .bui-chat-bubble{ background:var(--bui-field); color:var(--bui-text); } .bui-chat-msg.bot .bui-chat-bubble{ background:transparent; color:var(--bui-text-2); padding-left:0; } .bui-chat-suggestions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; } .bui-chat-sugg{ border:0; cursor:pointer; background:var(--bui-field); box-shadow:var(--bui-shadow-hairline); color:var(--bui-text-2); font-size:12px; padding:6px 10px; border-radius:99px; transition:background .15s,color .15s; } .bui-chat-sugg:hover{ background:var(--bui-hover-2); color:var(--bui-text); } .bui-chat-typing{ display:inline-flex; gap:3px; padding:4px 0; } .bui-chat-typing span{ width:5px; height:5px; border-radius:50%; background:var(--bui-text-3); animation:bui-pixel-on 900ms ease-in-out infinite; } .bui-chat-typing span:nth-child(2){ animation-delay:.15s; } .bui-chat-typing span:nth-child(3){ animation-delay:.3s; } /* ---------------- context cards ---------------- */ .bui-ctxcards{ display:flex; flex-direction:column; gap:10px; font-family:'Inter',sans-serif; } .bui-ctxcard{ background:var(--bui-surface); box-shadow:var(--bui-shadow-card); border-radius:var(--bui-radius-card); overflow:hidden; animation:bui-fade-up 400ms cubic-bezier(.23,1,.32,1) both; } .bui-ctxcard-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--bui-line); } .bui-ctxcard-title{ font-size:13px; font-weight:600; color:var(--bui-text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bui-ctxcard-body{ padding:10px 12px 6px; font-size:12.5px; line-height:1.6; color:var(--bui-text-2); } .bui-ctxcard-foot{ padding:0 12px 12px; } .bui-ctxcard-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border-radius:99px; background:var(--bui-inset); box-shadow:var(--bui-shadow-hairline); color:var(--bui-text-2); font-size:12px; } .bui-ctxcard-badge{ width:14px; height:14px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:7px; font-weight:700; color:#fff; } /* ---------------- diff table ---------------- */ .bui-diff{ border:var(--bui-border); width:100%; background:var(--bui-surface); box-shadow:var(--bui-shadow-card); border-radius:var(--bui-radius-card); overflow:hidden; font-family:'Inter',sans-serif; } .bui-diff-head{ padding:10px 14px; border-bottom:1px solid var(--bui-line); font-size:13px; font-weight:600; color:var(--bui-text); } .bui-diff-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border-bottom:1px solid var(--bui-line); } .bui-diff-row:last-child{ border-bottom:0; } .bui-diff-cell{ padding:9px 14px; font-size:12.5px; } .bui-diff-cell.label{ color:var(--bui-text-2); } .bui-diff-cell.before{ color:var(--bui-red); background:var(--bui-red-tint); font-family:var(--bui-mono); } .bui-diff-cell.after{ color:var(--bui-green); background:var(--bui-green-tint); font-family:var(--bui-mono); } /* ---------------- code block ---------------- */ .bui-codeblock{ width:100%; background:var(--bui-surface); box-shadow:var(--bui-shadow-hairline); border-radius:var(--bui-radius-card); overflow:hidden; font-family:'Inter',sans-serif; } .bui-codeblock-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--bui-line); } .bui-codeblock-name{ font-family:var(--bui-mono); font-size:12px; font-weight:600; color:var(--bui-text); } .bui-codeblock-lang{ font-size:11.5px; color:var(--bui-text-3); margin-left:8px; } .bui-codeblock-copy{ display:flex; align-items:center; gap:5px; height:24px; padding:0 7px; border-radius:6px; border:0; background:none; cursor:pointer; color:var(--bui-text-3); font-size:11.5px; font-weight:500; } .bui-codeblock-copy:hover{ background:var(--bui-hover-2); color:var(--bui-text); } .bui-codeblock-copy.copied{ color:var(--bui-green); } .bui-codeblock pre{ margin:0; background:var(--bui-inset); padding:10px 12px; font-family:var(--bui-mono); font-size:11.5px; line-height:1.7; overflow-x:auto; } .bui-codeblock .bui-line{ display:flex; animation:bui-fade-up 250ms cubic-bezier(.23,1,.32,1) both; } .bui-codeblock .bui-line-num{ width:22px; flex-shrink:0; text-align:right; color:var(--bui-text-3); opacity:.5; user-select:none; } .bui-codeblock .bui-line-code{ padding-left:10px; white-space:pre; color:var(--bui-text-2); } .bui-tok-kw{ color:var(--bui-accent-ink); } .bui-tok-str{ color:var(--bui-green); } .bui-tok-dim{ color:var(--bui-text-3); } /* ---------------- fine-tune card ---------------- */ .bui-finetune{ width:100%; max-width:260px; background:var(--bui-surface); box-shadow:var(--bui-shadow-card); border-radius:var(--bui-radius-card); font-family:'Inter',sans-serif; } .bui-finetune-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--bui-line); font-size:13px; font-weight:500; color:var(--bui-text); } .bui-finetune-body{ padding:12px; display:flex; flex-direction:column; gap:8px; } .bui-finetune-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .bui-finetune-label{ font-size:12px; color:var(--bui-text-3); } .bui-scrub{ display:flex; align-items:center; gap:6px; height:26px; padding:0 6px; border-radius:8px; background:var(--bui-field); cursor:ew-resize; user-select:none; flex:1; max-width:120px; } .bui-scrub-label{ font-size:12px; color:var(--bui-text-3); flex-shrink:0; } .bui-scrub-value{ flex:1; text-align:right; font-size:12px; color:var(--bui-text); font-variant-numeric:tabular-nums; } /* ---------------- sidebar nav ---------------- */ .bui-sidebar{ width:240px; background:var(--bui-surface); box-shadow:var(--bui-shadow-card); border-radius:16px; padding:8px; font-family:'Inter',sans-serif; } .bui-sidebar-section{ padding:8px 8px 2px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--bui-text-3); } .bui-sidebar-item{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border-radius:7px; border:0; background:none; cursor:pointer; text-align:left; color:var(--bui-text-2); font-size:13px; font-weight:500; transition:background .15s,color .15s; } .bui-sidebar-item:hover{ background:var(--bui-hover); } .bui-sidebar-item.active{ background:var(--bui-hover-2); color:var(--bui-text); font-weight:600; } .bui-sidebar-item svg{ flex-shrink:0; color:inherit; opacity:.8; } .bui-sidebar-item .bui-badge{ margin-left:auto; background:var(--bui-accent-tint); color:var(--bui-accent-ink); font-size:10.5px; font-weight:700; border-radius:99px; padding:1px 6px; } /* ---------------- theme switcher (selection-actions pill) ---------------- */ #bui-theme-switcher{ position:fixed; bottom:18px; right:18px; z-index:500; font-family:'Inter',sans-serif; } .bui-theme-pill{ display:flex; align-items:center; gap:4px; height:38px; padding:4px; border-radius:99px; background:var(--bui-surface); box-shadow:var(--bui-shadow-overlay); } .bui-theme-btn{ display:flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:99px; border:0; background:none; cursor:pointer; color:var(--bui-text-2); font-size:12.5px; font-weight:500; transition:background .15s,color .15s; } .bui-theme-btn:hover{ background:var(--bui-hover-2); color:var(--bui-text); } .bui-theme-btn.active{ background:var(--bui-accent-tint); color:var(--bui-accent-ink); } .bui-theme-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; } @media (max-width:640px){ .bui-sidebar{ width:100%; } .bui-chat{ max-width:100%; } #bui-theme-switcher{ right:10px; bottom:10px; } .bui-theme-btn span.bui-theme-label{ display:none; } }