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

82
public/components/settings-crud.js
View File

@@ -37,47 +37,47 @@ class SettingsCrud extends HTMLElement {
:host { display:block; height:100%; padding:16px; overflow:auto; }
* { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
.container { max-width:800px; margin:0 auto; }
.panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:20px; margin-bottom:16px; }
.panel-title { font-size:16px; font-weight:700; color:#e7eef7; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.panel-title svg { width:20px; height:20px; fill:#1f6feb; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:16px; }
.panel-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.panel-title svg { width:20px; height:20px; fill:var(--accent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-row.full { grid-template-columns:1fr; }
.field { }
.field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.field-hint { font-size:11px; color:#6c7a89; margin-top:4px; }
.field label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.field-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }
input, select, textarea {
background:#0f1520; color:#e7eef7; border:1px solid #253245;
background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi);
border-radius:8px; padding:10px 14px; font-size:14px; width:100%;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
input:disabled { opacity:.6; cursor:not-allowed; }
button {
cursor:pointer; background:#1f6feb; color:#fff; border:none;
cursor:pointer; background:var(--accent); color:#fff; border:none;
border-radius:8px; padding:10px 20px; font-size:14px; font-weight:600;
}
button:hover { background:#1a5fd0; }
button:hover { background:var(--accent-hover); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.secondary { background:#253245; }
button.secondary:hover { background:#2d3e52; }
button.secondary { background:var(--border-hi); }
button.secondary:hover { background:var(--border-hi); }
.toggle-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.toggle {
position:relative; width:48px; height:26px;
background:#253245; border-radius:13px; cursor:pointer;
background:var(--border-hi); border-radius:13px; cursor:pointer;
transition:background .2s; flex-shrink:0;
}
.toggle.active { background:#1f6feb; }
.toggle.active { background:var(--accent); }
.toggle::after {
content:''; position:absolute; top:3px; left:3px;
width:20px; height:20px; background:#fff; border-radius:50%;
transition:transform .2s;
}
.toggle.active::after { transform:translateX(22px); }
.toggle-label { font-size:14px; color:#e7eef7; }
.toggle-label { font-size:14px; color:var(--text); }
/* Schedule grid */
.schedule-grid { display:flex; flex-direction:column; gap:8px; }
@@ -87,17 +87,17 @@ class SettingsCrud extends HTMLElement {
gap:12px;
align-items:center;
padding:8px 12px;
background:#0f1520;
background:var(--panel-2);
border-radius:8px;
border:1px solid #1e2a3a;
border:1px solid var(--border);
}
.schedule-row.disabled { opacity:0.4; }
.day-label { font-size:13px; color:#e7eef7; font-weight:500; }
.day-label { font-size:13px; color:var(--text); font-weight:500; }
.day-toggle {
width:32px; height:18px; background:#253245; border-radius:9px;
width:32px; height:18px; background:var(--border-hi); border-radius:9px;
cursor:pointer; position:relative; transition:background .2s;
}
.day-toggle.active { background:#2ecc71; }
.day-toggle.active { background:var(--ok); }
.day-toggle::after {
content:''; position:absolute; top:2px; left:2px;
width:14px; height:14px; background:#fff; border-radius:50%;
@@ -109,30 +109,30 @@ class SettingsCrud extends HTMLElement {
width:70px; text-align:center; font-family:monospace;
font-size:13px; padding:6px 8px; letter-spacing:1px;
}
.hours-inputs span { color:#6c7a89; font-size:12px; }
.hours-inputs span { color:var(--text-muted); font-size:12px; }
.hours-inputs.disabled input { opacity:0.4; pointer-events:none; }
.actions { display:flex; gap:12px; margin-top:24px; }
.loading { text-align:center; padding:60px; color:#8aa0b5; }
.loading { text-align:center; padding:60px; color:var(--text-muted); }
.success-msg {
background:#2ecc7130; border:1px solid #2ecc71;
color:#2ecc71; padding:12px 16px; border-radius:8px;
background:var(--ok)30; border:1px solid var(--ok);
color:var(--ok); padding:12px 16px; border-radius:8px;
margin-bottom:16px; font-size:14px;
}
.error-msg {
background:#e74c3c30; border:1px solid #e74c3c;
color:#e74c3c; padding:12px 16px; border-radius:8px;
background:var(--err)30; border:1px solid var(--err);
color:var(--err); padding:12px 16px; border-radius:8px;
margin-bottom:16px; font-size:14px;
}
.min-order-field { margin-top:16px; padding-top:16px; border-top:1px solid #1e2a3a; }
.min-order-field { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
/* Zonas de entrega */
.zones-search { margin-bottom:12px; }
.zones-search input {
width:100%; padding:10px 14px;
background:#0f1520 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c7a89'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px center;
background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c7a89'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 12px center;
background-size:18px; padding-left:38px;
}
.zones-list { max-height:400px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
@@ -142,18 +142,18 @@ class SettingsCrud extends HTMLElement {
gap:12px;
align-items:start;
padding:10px 12px;
background:#0f1520;
background:var(--panel-2);
border-radius:8px;
border:1px solid #1e2a3a;
border:1px solid var(--border);
transition:border-color .2s;
}
.zone-row.active { border-color:#1f6feb; background:#0f1825; }
.zone-row.active { border-color:var(--accent); background:var(--accent-soft); }
.zone-row.hidden { display:none; }
.zone-toggle {
width:32px; height:18px; background:#253245; border-radius:9px;
width:32px; height:18px; background:var(--border-hi); border-radius:9px;
cursor:pointer; position:relative; transition:background .2s; margin-top:2px;
}
.zone-toggle.active { background:#2ecc71; }
.zone-toggle.active { background:var(--ok); }
.zone-toggle::after {
content:''; position:absolute; top:2px; left:2px;
width:14px; height:14px; background:#fff; border-radius:50%;
@@ -161,28 +161,28 @@ class SettingsCrud extends HTMLElement {
}
.zone-toggle.active::after { transform:translateX(14px); }
.zone-content { display:flex; flex-direction:column; gap:8px; }
.zone-name { font-size:14px; color:#e7eef7; font-weight:500; }
.zone-name { font-size:14px; color:var(--text); font-weight:500; }
.zone-config { display:none; gap:16px; flex-wrap:wrap; align-items:center; }
.zone-row.active .zone-config { display:flex; }
.zone-days { display:flex; gap:4px; }
.zone-day {
width:28px; height:28px; border-radius:6px;
background:#253245; color:#8aa0b5;
background:var(--border-hi); color:var(--text-muted);
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:600; cursor:pointer;
transition:all .15s;
}
.zone-day.active { background:#1f6feb; color:#fff; }
.zone-day:hover { background:#2d3e52; }
.zone-day.active:hover { background:#1a5fd0; }
.zone-day.active { background:var(--accent); color:#fff; }
.zone-day:hover { background:var(--border-hi); }
.zone-day.active:hover { background:var(--accent-hover); }
.zone-cost { display:flex; align-items:center; gap:6px; }
.zone-cost label { font-size:12px; color:#8aa0b5; }
.zone-cost label { font-size:12px; color:var(--text-muted); }
.zone-cost input { width:90px; padding:6px 10px; font-size:13px; text-align:right; }
.zones-summary {
margin-top:12px; padding:12px; background:#0f1520;
border-radius:8px; font-size:13px; color:#8aa0b5;
margin-top:12px; padding:12px; background:var(--panel-2);
border-radius:8px; font-size:13px; color:var(--text-muted);
}
.zones-summary strong { color:#e7eef7; }
.zones-summary strong { color:var(--text); }
</style>
<div class="container">