lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyling light pastel: tema blanco/azul/verde + Inter self-hosted

Browse Source 
- theme.css reescrito: paleta light (sky/emerald accents, slate neutrals),
  tokens de spacing/typography/radii/shadows, @font-face Inter +
  JetBrains Mono variable woff2 self-hosted.
- ops-shell: header blanco con nav active=accent-soft + status pill pastel.
- run-timeline: bubbles emerald-100 (user) / blue-100 (bot) sobre blanco.
- home-dashboard: helpers cssVar + withAlpha, 6 charts coordinados a
  paleta pastel (--chart-blue/green/purple/orange/pink/gray).
- 8 CRUDs (users, products, orders, conversations, aliases,
  recommendations, quantities, takeovers, settings, debug) migrados
  de hex hardcoded oscuros a var(--*).
- modal.js + toast.js refactor a vars con fallbacks; modal blanco
  con shadow-lg y soft icon backgrounds.
- test-panel: aliases :host apuntan a globals en vez de override dark.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lucas Tettamanti
2026-05-02 13:56:48 -03:00
parent 675a449ce8
commit 0bf26f8eb5
22 changed files with 2355 additions and 655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
public/components/run-timeline.js
View File

@@ -13,29 +13,68 @@ class RunTimeline extends HTMLElement {
this.shadowRoot.innerHTML = `
<style>
:host { display:block; padding:12px; height:100%; overflow:hidden; }
.box { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:10px; height:100%; display:flex; flex-direction:column; min-height:0; box-sizing:border-box; }
.row { display:flex; gap:8px; align-items:center; }
.muted { color:var(--text-muted); font-size:12px; }
.title { font-weight:800; }
.chatlog { display:flex; flex-direction:column; gap:0; overflow-y:auto; padding-right:6px; margin-top:8px; flex:1; min-height:0; }
/* WhatsApp-ish dark theme bubbles */
.bubble { max-width:90%; min-width:0; margin-bottom:12px; padding:8px 10px; border-radius:var(--r-xl); border:1px solid var(--border-hi); font-size:13px; line-height:1.35; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; box-shadow:var(--shadow-bubble); box-sizing:border-box; }
.bubble.user { align-self:flex-end; background:var(--user-bubble); border-color:var(--user-border); color:var(--text); }
.bubble.bot { align-self:flex-start; background:var(--bot-bubble); border-color:var(--bot-border); color:var(--text); }
.bubble.err { align-self:flex-start; background:var(--err-bubble); border-color:var(--err-border); color:var(--err-meta); cursor:pointer; }
.bubble.active { outline:2px solid var(--accent); box-shadow: 0 0 0 2px rgba(31,111,235,.25); }
.name { display:block; font-size:12px; font-weight:800; margin-bottom:4px; opacity:.95; }
.bubble.user .name { color:var(--user-name); text-align:right; }
.bubble.bot .name { color:var(--bot-name); }
.bubble.err .name { color:var(--err-name); }
.bubble .meta { display:block; margin-top:6px; font-size:11px; color:var(--text-muted); }
.bubble.user .meta { color:var(--user-meta); opacity:.85; }
.bubble.bot .meta { color:var(--bot-meta); opacity:.85; }
.bubble.err .meta { color:var(--err-meta); opacity:.85; }
.toolbar { display:flex; gap:8px; margin-top:8px; align-items:center; }
button { cursor:pointer; background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:var(--r-md); padding:8px; font-size:13px; }
pre { white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; overflow-x:auto; max-width:100%; background:var(--panel-2); border:1px solid var(--border-hi); border-radius:var(--r-lg); padding:10px; margin:0; font-size:12px; color:var(--text-dim); }
:host { display:block; padding: var(--space-4); height:100%; overflow:hidden; font-family: var(--font-sans); }
.box {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--space-5);
height:100%; display:flex; flex-direction:column; min-height:0; box-sizing:border-box;
box-shadow: var(--shadow-sm);
}
.row { display:flex; gap: var(--space-2); align-items:center; }
.muted { color: var(--text-muted); font-size: var(--fs-sm); }
.title { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text); }
.chatlog { display:flex; flex-direction:column; gap:0; overflow-y:auto; padding-right:8px; margin-top: var(--space-3); flex:1; min-height:0; }
/* WhatsApp-ish light pastel bubbles */
.bubble {
max-width: 88%; min-width:0;
margin-bottom: var(--space-3);
padding: 10px 14px;
border-radius: var(--r-xl);
border: 1px solid;
font-size: var(--fs-base); line-height: var(--lh-base);
white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
box-shadow: var(--shadow-bubble);
box-sizing:border-box;
}
.bubble.user { align-self:flex-end; background: var(--user-bubble); border-color: var(--user-border); color: var(--user-text); }
.bubble.bot { align-self:flex-start; background: var(--bot-bubble); border-color: var(--bot-border); color: var(--bot-text); }
.bubble.err { align-self:flex-start; background: var(--err-bubble); border-color: var(--err-border); color: var(--err-text); cursor:pointer; }
.bubble.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.name { display:block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-bottom: 4px; letter-spacing: 0.02em; }
.bubble.user .name { color: var(--user-name); text-align:right; }
.bubble.bot .name { color: var(--bot-name); }
.bubble.err .name { color: var(--err-name); }
.bubble .meta { display:block; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.bubble.user .meta { color: var(--user-meta); }
.bubble.bot .meta { color: var(--bot-meta); }
.bubble.err .meta { color: var(--err-meta); }
.toolbar { display:flex; gap: var(--space-2); margin-top: var(--space-3); align-items:center; }
button {
cursor:pointer;
background: var(--panel); color: var(--text);
border: 1px solid var(--border-hi);
border-radius: var(--r-md);
padding: 8px 14px;
font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
transition: border-color .15s, background .15s;
}
button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
button:focus-visible { outline:none; box-shadow: var(--focus-ring); }
pre {
white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; overflow-x:auto; max-width:100%;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 10px 12px;
margin:0;
font: 400 12px/1.5 var(--font-mono);
color: var(--text-dim);
}
</style>
<div class="box">