/* netlistsvg — datasheet/scientific light theme
Designed for EDA / E-CAD / IC designers: clean, high-contrast, print-like. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* Datasheet palette */
--bg: #fafbfc;
--panel: #ffffff;
--panel-header: #f6f8fa;
--border: #d8dee4;
--border-strong: #c2cad2;
--text: #1c2127;
--muted: #57606a;
--accent: #1b4f8a;
--accent-hover: #163f6e;
--accent-soft: rgba(27, 79, 138, 0.08);
--grid: rgba(27, 79, 138, 0.045);
--grid-major: rgba(27, 79, 138, 0.08);
--error: #b3261e;
--preview-bg: #ffffff;
--plate-bg: #ffffff;
--plate-border: #d8dee4;
--radius: 8px;
--shadow: 0 1px 2px rgba(27, 33, 39, 0.04), 0 2px 6px rgba(27, 33, 39, 0.05);
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
/* Dark theme. The theme is resolved by a small head script + the toggle button,
which set data-theme on ; CSS just swaps the palette. */
:root[data-theme="dark"] {
--bg: #0e1116;
--panel: #161b22;
--panel-header: #1b212a;
--border: #2a313c;
--border-strong: #3a424f;
--text: #e6edf3;
--muted: #8b949e;
--accent: #58a6ff;
--accent-hover: #79b8ff;
--accent-soft: rgba(88, 166, 255, 0.14);
--grid: rgba(120, 160, 210, 0.05);
--grid-major: rgba(120, 160, 210, 0.10);
--error: #f85149;
--preview-bg: #0d1117;
--plate-bg: #0d1117;
--plate-border: #2a313c;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-ui);
background-color: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 28px 32px 20px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------- Header ---------- */
.site-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
padding-bottom: 16px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.brand h1 {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
}
.brand h1 .mark { color: var(--accent); }
.brand .tagline {
margin-top: 4px;
font-size: 0.85rem;
color: var(--muted);
}
.header-meta {
display: flex;
align-items: center;
gap: 18px;
font-size: 0.8rem;
}
.header-meta .version {
font-family: var(--font-mono);
color: var(--muted);
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--panel);
}
.header-meta a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.header-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Workbench layout ---------- */
.workbench {
display: grid;
grid-template-columns: minmax(380px, 460px) 1fr;
gap: 24px;
width: 100%;
max-width: 1640px;
margin: 0 auto;
flex: 1;
min-height: 0;
}
@media (max-width: 1080px) {
.workbench { grid-template-columns: 1fr; }
body { padding: 20px; }
}
/* ---------- Panels ---------- */
.panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
min-height: 480px;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 12px 18px;
background: var(--panel-header);
border-bottom: 1px solid var(--border);
}
.panel-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
display: flex;
align-items: baseline;
gap: 8px;
}
.panel-title .sub {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 400;
color: var(--muted);
}
.controls {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
/* ---------- Form fields ---------- */
.field {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
}
select {
font-family: var(--font-ui);
font-size: 0.82rem;
color: var(--text);
background: var(--panel);
border: 1px solid var(--border-strong);
border-radius: 6px;
padding: 5px 26px 5px 9px;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 9px center;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:hover { border-color: var(--accent); }
select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn {
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 500;
border-radius: 6px;
padding: 6px 14px;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-secondary {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* lighter dropdown chevron for the dark theme */
:root[data-theme="dark"] select {
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Theme toggle ---------- */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 0.8rem;
font-weight: 500;
color: var(--text);
background: var(--panel);
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 3px 12px 3px 10px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-toggle .ico { width: 14px; height: 14px; display: inline-block; }
.theme-toggle .ico svg { display: block; }
/* ---------- Editor ---------- */
.panel-body { flex: 1; min-height: 0; display: flex; }
.editor-wrap { padding: 0; }
#editor {
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.65;
tab-size: 2;
width: 100%;
height: 100%;
min-height: 420px;
border: none;
resize: none;
padding: 16px 18px;
color: var(--text);
background: var(--panel);
}
#editor:focus { outline: none; }
#editor::placeholder { color: var(--muted); }
/* ---------- Schematic preview ---------- */
.preview {
position: relative;
align-items: center;
justify-content: center;
overflow: auto;
padding: 28px;
background-color: var(--preview-bg);
background-image:
linear-gradient(var(--grid-major) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
background-position: -1px -1px;
}
#svgArea {
display: none;
max-width: 100%;
height: auto;
background: var(--plate-bg);
padding: 16px;
border: 1px solid var(--plate-border);
border-radius: 6px;
box-shadow: var(--shadow);
}
.empty-state {
color: var(--muted);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-size: 0.85rem;
}
.empty-state svg { opacity: 0.5; }
.empty-state .hint { font-family: var(--font-mono); font-size: 0.75rem; }
/* ---------- Footer ---------- */
.site-footer {
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
font-size: 0.75rem;
color: var(--muted);
}
.site-footer .meta { font-family: var(--font-mono); }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Toast ---------- */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
max-width: 420px;
display: none;
background: var(--panel);
color: var(--text);
border: 1px solid var(--border-strong);
border-left: 3px solid var(--error);
border-radius: 6px;
padding: 12px 16px;
box-shadow: 0 6px 24px rgba(27, 33, 39, 0.12);
font-size: 0.82rem;
font-family: var(--font-mono);
z-index: 1000;
}
/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd5dd; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }