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

81
public/components/conversation-list.js
View File

@@ -14,27 +14,68 @@ class ConversationList extends HTMLElement {
this.shadowRoot.innerHTML = `
<style>
:host { display:block; padding:12px; }
.box { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:10px; margin-bottom:10px; }
.row { display:flex; gap:8px; align-items:center; }
input,select,button { background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:var(--r-md); padding:8px; font-size:13px; }
button { cursor:pointer; }
button.ghost { background:transparent; }
button:disabled { opacity:.6; cursor:not-allowed; }
.tabs { display:flex; gap:8px; margin-bottom:10px; }
.tab { flex:1; text-align:center; padding:8px; border-radius:var(--r-md); border:1px solid var(--border-hi); cursor:pointer; color:var(--text-muted); background:var(--panel); }
.tab.active { border-color:var(--accent); color:var(--text); background:var(--panel-2); }
.list { display:flex; flex-direction:column; gap:8px; }
.item { background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:10px; cursor:pointer; }
.item:hover { border-color:#2b3b52; }
.item.active { border-color:var(--accent); }
.title { font-weight:800; }
.muted { color:var(--text-muted); font-size:12px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; background:#1d2a3a; border:1px solid #243247; font-size:12px; color:var(--text-muted); }
:host { display:block; padding: var(--space-4); font-family: var(--font-sans); }
.box {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--space-4);
margin-bottom: var(--space-3);
box-shadow: var(--shadow-sm);
}
.row { display:flex; gap: var(--space-2); align-items:center; }
input, select, button {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border-hi);
border-radius: var(--r-md);
padding: 8px 12px;
font: 400 var(--fs-sm)/1.4 var(--font-sans);
transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { outline:none; border-color: var(--accent); box-shadow: var(--focus-ring); }
button { cursor:pointer; font-weight: var(--fw-medium); }
button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
button:focus-visible { outline:none; box-shadow: var(--focus-ring); }
button.ghost { background:transparent; border-color: transparent; }
button:disabled { opacity:.5; cursor:not-allowed; }
.tabs { display:flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.tab {
flex:1; text-align:center;
padding: 8px 12px; border-radius: var(--r-md);
border: 1px solid var(--border);
cursor:pointer;
color: var(--text-muted);
background: var(--panel);
font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
transition: all .15s;
}
.tab:hover { color: var(--text); }
.tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.list { display:flex; flex-direction:column; gap: var(--space-2); }
.item {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--space-3) var(--space-4);
cursor:pointer;
transition: all .15s;
}
.item:hover { border-color: var(--border-hi); box-shadow: var(--shadow-sm); }
.item.active { border-color: var(--accent); background: var(--accent-soft); }
.title { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text); }
.muted { color: var(--text-muted); font-size: var(--fs-sm); }
.chips { display:flex; flex-wrap:wrap; gap: 6px; margin-top: 8px; }
.chip {
display:inline-flex; align-items:center; gap: 4px;
padding: 3px 8px; border-radius:999px;
background: var(--panel-2); border: 1px solid var(--border);
font-size: var(--fs-xs); color: var(--text-muted);
font-weight: var(--fw-medium);
}
.dot { width:8px; height:8px; border-radius:50%; }
.ok{ background:var(--ok) } .warn{ background:var(--warn) } .err{ background:var(--err) }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }
.ok{ background: var(--ok) } .warn{ background: var(--warn) } .err{ background: var(--err) }
.actions { display:flex; gap: var(--space-2); justify-content:flex-end; margin-top: var(--space-2); flex-wrap:wrap; }
</style>
<div class="tabs">