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
@@ -11,114 +11,81 @@
|
||||
|
||||
const STYLES = `
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 10000;
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
font-family: var(--font-sans, system-ui);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes slideIn {
|
||||
from { transform: translateY(-20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
from { transform: translateY(-12px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
background: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
background: var(--panel, #ffffff);
|
||||
border-radius: var(--r-lg, 12px);
|
||||
padding: 24px;
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: var(--shadow-lg, 0 12px 28px rgba(15,23,42,.10));
|
||||
border: 1px solid var(--border, #e2e8f0);
|
||||
animation: slideIn 0.2s ease-out;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 16px; font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-icon.success { background: #22c55e20; color: #22c55e; }
|
||||
.modal-icon.error { background: #ef444420; color: #ef4444; }
|
||||
.modal-icon.warn { background: #f59e0b20; color: #f59e0b; }
|
||||
.modal-icon.info { background: #3b82f620; color: #3b82f6; }
|
||||
.modal-icon.confirm { background: #8b5cf620; color: #8b5cf6; }
|
||||
|
||||
.modal-icon.success { background: var(--ok-soft, #d1fae5); color: var(--ok, #10b981); }
|
||||
.modal-icon.error { background: var(--err-soft, #fee2e2); color: var(--err, #ef4444); }
|
||||
.modal-icon.warn { background: var(--warn-soft, #fef3c7); color: var(--warn, #f59e0b); }
|
||||
.modal-icon.info { background: var(--accent-soft, #e0f2fe); color: var(--accent, #0ea5e9); }
|
||||
.modal-icon.confirm { background: var(--accent-soft, #e0f2fe); color: var(--accent-hover, #0284c7); }
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
font-size: 16px; font-weight: 600;
|
||||
color: var(--text, #0f172a);
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-dim, #475569);
|
||||
font-size: 14px; line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
display: flex; gap: 8px; justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: var(--r-md, 10px);
|
||||
font-size: 13px; font-weight: 500;
|
||||
cursor: pointer; border: 1px solid transparent;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.modal-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.modal-btn:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(14,165,233,.3)); }
|
||||
.modal-btn.primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
background: var(--accent, #0ea5e9); color: var(--text-on-acc, #fff);
|
||||
}
|
||||
|
||||
.modal-btn.primary:hover { background: var(--accent-hover, #0284c7); }
|
||||
.modal-btn.secondary {
|
||||
background: #333;
|
||||
color: #ccc;
|
||||
border: 1px solid #444;
|
||||
background: var(--panel, #fff); color: var(--text, #0f172a);
|
||||
border-color: var(--border-hi, #cbd5e1);
|
||||
}
|
||||
|
||||
.modal-btn.secondary:hover { border-color: var(--accent, #0ea5e9); color: var(--accent-hover, #0284c7); }
|
||||
.modal-btn.danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
background: var(--err, #ef4444); color: #fff;
|
||||
}
|
||||
.modal-btn.danger:hover { filter: brightness(0.95); }
|
||||
`;
|
||||
|
||||
// Inyectar estilos una sola vez
|
||||
|
||||
@@ -8,12 +8,23 @@
|
||||
* toast({ kind: "ok", text: "Listo", ms: 2000 });
|
||||
*/
|
||||
|
||||
const KIND_COLORS = {
|
||||
error: { bg: "#241214", border: "#e74c3c", text: "#ffe9ea" },
|
||||
ok: { bg: "#0f2a1a", border: "#1f6f43", text: "#cdebd8" },
|
||||
warn: { bg: "#2a1f0a", border: "#F59E0B", text: "#ffe6b0" },
|
||||
info: { bg: "#0f2030", border: "#1f6feb", text: "#cce0ff" },
|
||||
};
|
||||
// Lee var del :root con fallback. Permite que la paleta de toasts se adapte
|
||||
// al tema sin que el archivo conozca los hex.
|
||||
function v(name, fallback) {
|
||||
try {
|
||||
const c = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||||
return c || fallback;
|
||||
} catch { return fallback; }
|
||||
}
|
||||
|
||||
function kindColors() {
|
||||
return {
|
||||
error: { bg: v("--err-soft", "#fee2e2"), border: v("--err", "#ef4444"), text: v("--err-text", "#7f1d1d") },
|
||||
ok: { bg: v("--ok-soft", "#d1fae5"), border: v("--ok", "#10b981"), text: v("--user-text", "#064e3b") },
|
||||
warn: { bg: v("--warn-soft", "#fef3c7"), border: v("--warn", "#f59e0b"), text: v("--text", "#0f172a") },
|
||||
info: { bg: v("--accent-soft","#e0f2fe"),border: v("--accent","#0ea5e9"),text: v("--bot-text", "#1e3a8a") },
|
||||
};
|
||||
}
|
||||
|
||||
let _container = null;
|
||||
|
||||
@@ -38,16 +49,19 @@ function ensureContainer() {
|
||||
|
||||
export function toast({ kind = "error", text = "", ms = 4000 } = {}) {
|
||||
if (!text) return;
|
||||
const colors = KIND_COLORS[kind] || KIND_COLORS.info;
|
||||
const COLORS = kindColors();
|
||||
const colors = COLORS[kind] || COLORS.info;
|
||||
const el = document.createElement("div");
|
||||
Object.assign(el.style, {
|
||||
background: colors.bg,
|
||||
border: `1px solid ${colors.border}`,
|
||||
color: colors.text,
|
||||
padding: "10px 12px",
|
||||
borderRadius: "10px",
|
||||
padding: "12px 16px",
|
||||
borderRadius: "12px",
|
||||
fontSize: "13px",
|
||||
boxShadow: "0 4px 12px rgba(0,0,0,.4)",
|
||||
fontWeight: "500",
|
||||
fontFamily: "var(--font-sans, system-ui)",
|
||||
boxShadow: "var(--shadow-md, 0 4px 12px rgba(15,23,42,.06))",
|
||||
pointerEvents: "auto",
|
||||
cursor: "pointer",
|
||||
transform: "translateX(120%)",
|
||||
|
||||
Reference in New Issue
Block a user