/* ============================================================
QuickMesh design tokens — single source of truth.
Imported by layout.html . Reference via var(--token).
============================================================ */
:root {
/* Brand + neutrals */
--primary-color: #6366f1;
--primary-strong: #4f46e5;
--primary-soft: #eef2ff;
--bg-color: #fafafa;
--sidebar-bg: #ffffff;
--card-bg: #ffffff;
--text-color: #0a0a0a;
--text-muted: #666666;
--border-color: #ececec;
--accent-green: #059669;
--accent-orange: #ea580c;
--accent-red: #dc2626;
--accent-amber: #d97706;
--accent-slate: #64748b;
/* Status palette — used by .badge.is-* and .status-dot */
--status-active-fg: #047857;
--status-active-bg: #ecfdf5;
--status-active-dot: #10b981;
--status-pending-fg: #b45309;
--status-pending-bg: #fffbeb;
--status-pending-dot: #f59e0b;
--status-offline-fg: #475569;
--status-offline-bg: #f1f5f9;
--status-offline-dot: #94a3b8;
--status-failed-fg: #b91c1c;
--status-failed-bg: #fef2f2;
--status-failed-dot: #ef4444;
--status-cancelled-fg: #6b7280;
--status-cancelled-bg: #f3f4f6;
--status-cancelled-dot:#9ca3af;
--status-info-fg: #1d4ed8;
--status-info-bg: #eff6ff;
--status-info-dot: #3b82f6;
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--text-xs: 12px;
--text-sm: 13px;
--text-base:14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 28px;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold:600;
--weight-bold: 700;
/* Spacing scale (4-px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10:40px;
--space-12:48px;
/* Radius + shadow */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
/* ============================================================
Canonical status badge — single component, modifier-driven.
Usage: Active
Optional dot: Active
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: 1.5;
white-space: nowrap;
background: var(--status-offline-bg);
color: var(--status-offline-fg);
}
.badge.has-dot::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
opacity: 0.9;
}
.badge.is-active { background: var(--status-active-bg); color: var(--status-active-fg); }
.badge.is-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.badge.is-offline { background: var(--status-offline-bg); color: var(--status-offline-fg); }
.badge.is-failed { background: var(--status-failed-bg); color: var(--status-failed-fg); }
.badge.is-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.badge.is-info { background: var(--status-info-bg); color: var(--status-info-fg); }
/* Legacy aliases — keep existing pages working while we migrate */
.badge-success { background: var(--status-active-bg); color: var(--status-active-fg); }
.badge-warning { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.badge-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge-muted { background: var(--status-offline-bg); color: var(--status-offline-fg); }
.badge-danger { background: var(--status-failed-bg); color: var(--status-failed-fg); }
/* ============================================================
Canonical form field.
Usage:
============================================================ */
.field {
margin-bottom: var(--space-5);
}
.field > label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-muted);
margin-bottom: var(--space-2);
}
.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="url"],
.field input[type="search"],
.field input[type="tel"],
.field select,
.field textarea {
width: 100%;
padding: 10px 12px;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background: #fff;
color: var(--text-color);
font-family: inherit;
font-size: var(--text-base);
line-height: 1.5;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: var(--shadow-focus);
}
.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
color: #a3a3a3;
}
.input[aria-invalid="true"],
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.input.is-invalid {
border-color: var(--accent-red);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.field-hint {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
}
.field-error {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--accent-red);
font-weight: var(--weight-medium);
}
/* ============================================================
Empty state — single look across every "nothing here yet" cell.
Usage:
No people yet
Add your first user to start issuing access.
Add User
Inside a table cell, wrap with and the layout still works.
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-12) var(--space-6);
color: var(--text-muted);
}
.empty-state-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary-color);
display: grid;
place-items: center;
font-size: 28px;
}
.empty-state-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text-color);
margin: 0;
letter-spacing: -0.01em;
}
.empty-state-body {
margin: 0;
max-width: 38ch;
font-size: var(--text-base);
line-height: 1.5;
}
.empty-state .btn {
margin-top: var(--space-2);
}
|