/* Wovelr web app — uses the tokens from /static/brand/tokens/tokens.css. Every color, font and spacing value is `var(--wv-*)` so the same stylesheet works across light and dark themes (toggle with ``). */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--wv-font-body); font-size: var(--wv-fs-base); line-height: var(--wv-lh-normal); color: var(--wv-fg); background: var(--wv-bg); -webkit-font-smoothing: antialiased; } /* ─── Header ────────────────────────────────────────────── */ header { background: var(--wv-color-ink); color: var(--wv-color-paper); padding: var(--wv-space-3) var(--wv-space-5); display: flex; align-items: center; gap: var(--wv-space-4); position: sticky; top: 0; z-index: 5; box-shadow: var(--wv-shadow-base); } header .brand-logo { display: flex; align-items: center; gap: var(--wv-space-2); text-decoration: none; color: inherit; border: none; } header .brand-name { font-family: var(--wv-font-display); font-weight: var(--wv-fw-bold); font-size: 1.15rem; letter-spacing: var(--wv-tracking-snug); } header .brand-pill { background: var(--wv-color-copper); color: var(--wv-color-paper); font-family: var(--wv-font-mono); font-size: 0.65rem; padding: 2px var(--wv-space-2); border-radius: var(--wv-radius-full); letter-spacing: 0.05em; text-transform: uppercase; font-weight: var(--wv-fw-bold); } header .who { margin-left: auto; opacity: 0.85; font-size: var(--wv-fs-sm); } header button { background: var(--wv-color-paper); color: var(--wv-color-ink); border: none; padding: var(--wv-space-1) var(--wv-space-3); border-radius: var(--wv-radius-base); cursor: pointer; font-weight: var(--wv-fw-bold); font-family: var(--wv-font-body); } /* ─── Login ─────────────────────────────────────────────── */ .login { max-width: 480px; margin: var(--wv-space-16) auto; background: var(--wv-bg-subtle); border: 1px solid var(--wv-border); border-radius: var(--wv-radius-lg); padding: var(--wv-space-8); box-shadow: var(--wv-shadow-md); } .login h2 { font-family: var(--wv-font-display); font-weight: var(--wv-fw-bold); letter-spacing: var(--wv-tracking-snug); margin: 0 0 var(--wv-space-2); } .login input { width: 100%; padding: var(--wv-space-2) var(--wv-space-3); font-size: var(--wv-fs-base); font-family: var(--wv-font-mono); margin: var(--wv-space-2) 0; border: 1px solid var(--wv-border); border-radius: var(--wv-radius-base); background: var(--wv-bg); color: var(--wv-fg); } .login input:focus { outline: none; border-color: var(--wv-link); box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.15); } .login button { background: var(--wv-accent); color: var(--wv-accent-fg); border: none; padding: var(--wv-space-2) var(--wv-space-5); border-radius: var(--wv-radius-base); cursor: pointer; font-weight: var(--wv-fw-bold); font-family: var(--wv-font-body); transition: filter var(--wv-duration-base) var(--wv-ease-out); } .login button:hover { filter: brightness(0.95); } /* ─── Login SSO + footer (post-redesign) ─────────────────── */ .login-sso-divider { display: flex; align-items: center; gap: var(--wv-space-3); margin: var(--wv-space-5) 0 var(--wv-space-3); color: var(--wv-fg-muted); font-family: var(--wv-font-display); font-size: var(--wv-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; } .login-sso-divider::before, .login-sso-divider::after { content: ""; flex: 1; border-top: 1px solid var(--wv-border); } .login-sso-buttons { display: flex; flex-direction: column; gap: var(--wv-space-2); } .login-sso-btn { display: flex !important; align-items: center !important; gap: var(--wv-space-3); padding: 10px var(--wv-space-3) !important; background: var(--wv-bg) !important; color: var(--wv-fg) !important; border: 1px solid var(--wv-border) !important; border-radius: var(--wv-radius-md) !important; font-family: var(--wv-font-display) !important; font-weight: var(--wv-fw-medium) !important; font-size: var(--wv-fs-sm) !important; cursor: pointer; width: 100%; text-align: left !important; transition: border-color 150ms; } .login-sso-btn:hover { border-color: var(--wv-color-copper) !important; filter: none !important; } .login-sso-btn.enterprise { border-style: dashed; } .sso-icon { width: 24px; height: 24px; border-radius: var(--wv-radius-base); background: var(--wv-color-ink); color: var(--wv-color-paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wv-font-display); font-weight: var(--wv-fw-extrabold); font-size: 12px; flex-shrink: 0; } .login-footer { margin-top: var(--wv-space-5); text-align: center; font-family: var(--wv-font-display); font-size: var(--wv-fs-xs); color: var(--wv-fg-muted); } .login-footer a { color: var(--wv-link); text-decoration: none; margin: 0 var(--wv-space-2); } .login-footer a:hover { text-decoration: underline; } /* ─── Dashboard ─────────────────────────────────────────── */ .dashboard { display: grid; grid-template-columns: 320px 1fr; gap: var(--wv-space-4); padding: var(--wv-space-4); height: calc(100vh - 56px); } .sidebar { display: flex; flex-direction: column; gap: var(--wv-space-3); overflow: auto; } .detail { background: var(--wv-bg-subtle); border: 1px solid var(--wv-border); border-radius: var(--wv-radius-lg); padding: var(--wv-space-4); overflow: auto; box-shadow: var(--wv-shadow-sm); } .detail .empty { color: var(--wv-fg-muted); text-align: center; padding: var(--wv-space-16) var(--wv-space-5); } .project-list { list-style: none; margin: 0; padding: 0; background: var(--wv-bg); border: 1px solid var(--wv-border); border-radius: var(--wv-radius-lg); max-height: 40vh; overflow: auto; } .project-list li { padding: var(--wv-space-2) var(--wv-space-3); border-bottom: 1px solid var(--wv-border); cursor: pointer; transition: background var(--wv-duration-fast) var(--wv-ease-out); } .project-list li:hover { background: var(--wv-bg-subtle); } .project-list li.active { background: var(--wv-color-ink); color: var(--wv-color-paper); } .project-list .meta { display: block; font-size: var(--wv-fs-xs); opacity: 0.7; font-family: var(--wv-font-mono); } .card { background: var(--wv-bg); border: 1px solid var(--wv-border); border-radius: var(--wv-radius-lg); padding: var(--wv-space-3); box-shadow: var(--wv-shadow-sm); } .card summary { cursor: pointer; font-weight: var(--wv-fw-bold); padding: var(--wv-space-1) 0; } .card input, .card textarea { width: 100%; margin: var(--wv-space-1) 0; padding: var(--wv-space-1) var(--wv-space-2); border: 1px solid var(--wv-border); border-radius: var(--wv-radius-base); font-family: var(--wv-font-body); font-size: 0.92rem; background: var(--wv-bg); color: var(--wv-fg); } .card label.row { display: flex; align-items: center; gap: var(--wv-space-1); font-size: var(--wv-fs-sm); } .card button { background: var(--wv-accent); color: var(--wv-accent-fg); border: none; padding: var(--wv-space-1) var(--wv-space-3); border-radius: var(--wv-radius-base); cursor: pointer; font-weight: var(--wv-fw-bold); font-family: var(--wv-font-body); } .card button:hover { filter: brightness(0.95); } .msg { font-size: var(--wv-fs-sm); margin-top: var(--wv-space-1); min-height: 1em; color: var(--wv-fg-muted); } .msg.error { color: #c33; } .msg.ok { color: #2a7d4f; } /* ─── Detail view ───────────────────────────────────────── */ .detail-tabs { display: flex; gap: var(--wv-space-1); border-bottom: 2px solid var(--wv-border); margin-bottom: var(--wv-space-3); } .detail-tabs button { background: none; border: none; padding: var(--wv-space-2) var(--wv-space-3); cursor: pointer; font-size: 0.95rem; font-family: var(--wv-font-body); color: var(--wv-fg-muted); border-bottom: 3px solid transparent; transition: color var(--wv-duration-fast) var(--wv-ease-out); } .detail-tabs button.active { color: var(--wv-fg); border-bottom-color: var(--wv-accent); font-weight: var(--wv-fw-bold); } .detail-actions { margin-bottom: var(--wv-space-3); display: flex; flex-wrap: wrap; gap: var(--wv-space-2); } .detail-actions a, .detail-actions button { background: var(--wv-bg); color: var(--wv-fg); text-decoration: none; padding: 5px var(--wv-space-3); border-radius: var(--wv-radius-base); font-size: var(--wv-fs-sm); border: 1px solid var(--wv-border); cursor: pointer; font-family: var(--wv-font-body); } .detail-actions a:hover, .detail-actions button:hover { background: var(--wv-bg-subtle); } .detail-actions .danger { background: #fee; color: #c33; border-color: #f99; } .svg-frame { width: 100%; min-height: 60vh; border: 1px solid var(--wv-border); background: var(--wv-bg); overflow: auto; } .svg-frame svg { width: 100%; height: auto; } table.drc, table.pdc { width: 100%; border-collapse: collapse; font-size: var(--wv-fs-sm); } table.drc th, table.drc td, table.pdc th, table.pdc td { padding: var(--wv-space-1) var(--wv-space-3); border-bottom: 1px solid var(--wv-border); text-align: left; } .sev-error { color: #c33; font-weight: var(--wv-fw-bold); } .sev-warning { color: #a87000; } .sev-info { color: var(--wv-fg-muted); } /* ─── Wiring table side-pane ─────────────────────────────── */ .split-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wv-space-3); height: 75vh; } .split-left { height: 100%; overflow: auto; } .split-right { overflow: auto; } .wires-toolbar { display: flex; gap: var(--wv-space-1); align-items: center; margin-bottom: var(--wv-space-1); } .wires-toolbar button { background: var(--wv-color-ink); color: var(--wv-color-paper); border: none; padding: var(--wv-space-1) var(--wv-space-3); border-radius: var(--wv-radius-base); cursor: pointer; font-size: var(--wv-fs-sm); font-family: var(--wv-font-body); } table.wires-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; background: var(--wv-bg); font-family: var(--wv-font-mono); } table.wires-table th, table.wires-table td { padding: 2px var(--wv-space-1); border-bottom: 1px solid var(--wv-border); } table.wires-table th { background: var(--wv-bg-subtle); position: sticky; top: 0; text-align: left; font-weight: var(--wv-fw-bold); font-family: var(--wv-font-body); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; } table.wires-table input { width: 100%; border: 1px solid transparent; padding: 2px var(--wv-space-1); font-size: 0.82rem; font-family: var(--wv-font-mono); background: transparent; color: var(--wv-fg); } table.wires-table input:hover { border-color: var(--wv-border); } table.wires-table input:focus { border-color: var(--wv-link); outline: none; background: var(--wv-bg); } /* ─── Sync status pill in the header ─────────────────────── */ .sync-status { display: flex; align-items: center; gap: var(--wv-space-1); padding: 3px var(--wv-space-3); background: rgba(255,255,255,0.12); border-radius: var(--wv-radius-full); font-size: 0.78rem; } .sync-dot { width: 8px; height: 8px; border-radius: var(--wv-radius-full); background: #6c8; display: inline-block; } .sync-status.saving .sync-dot { background: #ffd24c; animation: blink 0.8s infinite; } .sync-status.error .sync-dot { background: #ff5d5d; } @keyframes blink { 50% { opacity: 0.4; } } #help-btn { background: rgba(255,255,255,0.15); color: var(--wv-color-paper); border: 1px solid rgba(255,255,255,0.3); width: 28px; height: 28px; border-radius: var(--wv-radius-full); cursor: pointer; font-weight: var(--wv-fw-bold); } #help-btn:hover { background: rgba(255,255,255,0.3); } /* ─── Toasts (top-right) ─────────────────────────────────── */ .toasts { position: fixed; top: 60px; right: var(--wv-space-4); z-index: 50; display: flex; flex-direction: column; gap: var(--wv-space-2); pointer-events: none; } .toast { background: var(--wv-bg); border-left: 4px solid var(--wv-accent); padding: var(--wv-space-2) var(--wv-space-4); border-radius: var(--wv-radius-base); box-shadow: var(--wv-shadow-md); min-width: 240px; max-width: 360px; font-size: 0.88rem; animation: toastIn var(--wv-duration-base) var(--wv-ease-out); pointer-events: auto; } .toast.success { border-left-color: #2a7d4f; } .toast.error { border-left-color: #c33; } .toast.warning { border-left-color: var(--wv-accent); } @keyframes toastIn { from { transform: translateX(20px); opacity: 0; } } /* ─── Modal (shortcuts, onboarding) ─────────────────────── */ .modal { position: fixed; inset: 0; background: rgba(11,18,32,0.45); display: flex; align-items: center; justify-content: center; z-index: 100; } /* `.modal { display: flex }` would otherwise beat the UA stylesheet * `[hidden] { display: none }` rule (class beats type selector). Force * the hide to win — without this, every Close button on every modal * silently does nothing. */ .modal[hidden] { display: none !important; } .modal-card { background: var(--wv-bg); padding: var(--wv-space-6); border-radius: var(--wv-radius-lg); min-width: 380px; max-width: 80vw; max-height: 80vh; overflow: auto; box-shadow: var(--wv-shadow-lg); } .modal-card h3 { margin-top: 0; font-family: var(--wv-font-display); font-weight: var(--wv-fw-bold); } .modal-card table { width: 100%; border-collapse: collapse; margin: var(--wv-space-3) 0; } .modal-card th, .modal-card td { padding: var(--wv-space-1) var(--wv-space-3); text-align: left; border-bottom: 1px solid var(--wv-border); } .modal-card kbd { background: var(--wv-bg-subtle); border: 1px solid var(--wv-border); border-radius: 3px; padding: 1px var(--wv-space-1); font-family: var(--wv-font-mono); font-size: 0.85em; } .modal-card button { background: var(--wv-accent); color: var(--wv-accent-fg); border: none; padding: var(--wv-space-1) var(--wv-space-4); border-radius: var(--wv-radius-base); cursor: pointer; margin-top: var(--wv-space-2); font-family: var(--wv-font-body); } /* ─── SVG re-render spinner overlay ──────────────────────── */ .svg-frame { position: relative; } .svg-frame.loading::after { content: "Re-rendering…"; position: absolute; top: var(--wv-space-2); left: var(--wv-space-2); background: rgba(250,250,247,0.85); border: 1px solid var(--wv-border); padding: var(--wv-space-1) var(--wv-space-3); font-size: var(--wv-fs-sm); border-radius: var(--wv-radius-base); font-family: var(--wv-font-mono); }