Restyling light pastel: tema blanco/azul/verde + Inter self-hosted
- 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
@@ -12,44 +12,74 @@ class OpsShell extends HTMLElement {
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { --bg:#0b0f14; --panel:#121823; --muted:#8aa0b5; --text:#e7eef7; --line:#1e2a3a; --blue:#1f6feb; }
|
||||
* { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
|
||||
* { box-sizing:border-box; }
|
||||
:host { font-family: var(--font-sans); }
|
||||
.app { height:100vh; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }
|
||||
header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
|
||||
header h1 { font-size:14px; margin:0; color:var(--muted); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
|
||||
.nav { display:flex; gap:4px; margin-left:24px; flex-wrap:wrap; }
|
||||
.nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; text-decoration:none; }
|
||||
.nav-btn:hover { border-color:var(--blue); color:var(--text); }
|
||||
.nav-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
|
||||
.spacer { flex:1; }
|
||||
.status { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
|
||||
.status .dot { width:8px; height:8px; border-radius:50%; background:#25D366; }
|
||||
.status.disconnected .dot { background:#F59E0B; animation: pulse 1.2s ease-in-out infinite; }
|
||||
.status.disconnected { color:#F59E0B; }
|
||||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
|
||||
|
||||
/* Notification bell */
|
||||
.notification-bell { position:relative; cursor:pointer; padding:8px; margin-right:12px; }
|
||||
.notification-bell svg { width:20px; height:20px; fill:var(--muted); transition:fill .15s; }
|
||||
.notification-bell:hover svg { fill:var(--text); }
|
||||
.notification-bell.has-pending svg { fill:#f39c12; }
|
||||
.notification-bell .badge {
|
||||
position:absolute; top:2px; right:2px;
|
||||
background:#e74c3c; color:#fff;
|
||||
font-size:10px; padding:2px 6px; border-radius:10px;
|
||||
font-weight:700; min-width:18px; text-align:center;
|
||||
header {
|
||||
display:flex; gap:var(--space-3); align-items:center;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: var(--fs-md);
|
||||
margin:0; color: var(--text);
|
||||
font-weight: var(--fw-semibold);
|
||||
letter-spacing:-0.01em;
|
||||
}
|
||||
.nav { display:flex; gap: var(--space-1); margin-left: var(--space-6); flex-wrap:wrap; }
|
||||
.nav-btn {
|
||||
position:relative;
|
||||
background:transparent; border:none;
|
||||
color: var(--text-muted);
|
||||
padding: 8px 12px;
|
||||
font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
|
||||
cursor:pointer; transition:color .15s;
|
||||
text-decoration:none;
|
||||
border-radius: var(--r-sm);
|
||||
}
|
||||
.nav-btn:hover { color: var(--text); background: var(--panel-2); }
|
||||
.nav-btn.active { color: var(--accent); background: var(--accent-soft); }
|
||||
.nav-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }
|
||||
.spacer { flex:1; }
|
||||
.status {
|
||||
font-size: var(--fs-sm); color: var(--ok);
|
||||
display:flex; align-items:center; gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: var(--ok-soft);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.status .dot { width:7px; height:7px; border-radius:50%; background: var(--ok); }
|
||||
.status.disconnected { color: var(--warn); background: var(--warn-soft); }
|
||||
.status.disconnected .dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
|
||||
|
||||
/* Notification bell */
|
||||
.notification-bell { position:relative; cursor:pointer; padding: 8px; border-radius: var(--r-sm); transition: background .15s; }
|
||||
.notification-bell:hover { background: var(--panel-2); }
|
||||
.notification-bell svg { width:18px; height:18px; fill: var(--text-muted); transition:fill .15s; display:block; }
|
||||
.notification-bell:hover svg { fill: var(--text); }
|
||||
.notification-bell.has-pending svg { fill: var(--warn); }
|
||||
.notification-bell .badge {
|
||||
position:absolute; top:2px; right:2px;
|
||||
background: var(--err); color:#fff;
|
||||
font: var(--fw-bold) 10px/1 var(--font-sans);
|
||||
padding: 3px 6px; border-radius:10px;
|
||||
min-width:18px; text-align:center;
|
||||
box-shadow: 0 0 0 2px var(--panel);
|
||||
}
|
||||
|
||||
/* Layout para chat activo (2 columnas: burbujas + inspector) */
|
||||
.layout-chat { height:100%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 310px; min-height:0; overflow:hidden; }
|
||||
.col { border-right:1px solid var(--line); min-height:0; overflow:hidden; }
|
||||
.chatTop { grid-column:1; grid-row:1; border-bottom:1px solid var(--line); }
|
||||
.chatBottom { grid-column:1 / 3; grid-row:2; overflow:hidden; border-top:1px solid var(--line); }
|
||||
.col { border-right:1px solid var(--border); min-height:0; overflow:hidden; }
|
||||
.chatTop { grid-column:1; grid-row:1; border-bottom:1px solid var(--border); }
|
||||
.chatBottom { grid-column:1 / 3; grid-row:2; overflow:hidden; border-top:1px solid var(--border); }
|
||||
.inspectorTop { grid-column:2; grid-row:1; border-right:none; }
|
||||
|
||||
|
||||
/* Layout para CRUDs */
|
||||
.layout-crud { height:100%; display:block; min-height:0; overflow:hidden; }
|
||||
|
||||
|
||||
.view { display:none; flex:1; min-height:0; overflow:hidden; }
|
||||
.view.active { display:flex; flex-direction:column; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user