wenil/busbar-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6bc922cabf11d31509e4a0535fe6073e142e41cd
busbar-designer/static/styles.css
T
wenil 6bc922cabf Add hex holder designer page (/holder) 
Server-side OpenSCAD renders STL from bundled hex_cell.scad with parameter
overrides via -D. Frontend is a Three.js viewer with auto-form generated
from /api/holder/params. 'Design busbars →' button posts the computed
cell coordinates to /api/projects and redirects to the busbar editor with
the holder cells pre-loaded.

  - holder.py:                openscad subprocess wrapper + compute_cells()
                              (Python mirror of get_hex_center_points_*)
  - scad/hex_cell.scad:       verbatim copy of Addy/Hex-Cell-Holder source
  - app.py:                   /holder route + /api/holder/{params,render,cells}
  - static/holder.html etc:   parameter form + Three.js STL viewer
  - Dockerfile / install.sh:  apt install openscad
  - static/index.html:        nav link Holder ↔ Busbars in topbar
2026-05-24 19:27:50 +03:00

554 lines
10 KiB
CSS
Raw Blame History

:root {
--bg: #0f1115;
--panel: #161a22;
--panel-2: #1e242f;
--border: #2a313d;
--text: #e4e7ec;
--muted: #8a93a3;
--accent: #f08a24;
--accent-2: #4fa3ff;
--danger: #d94a4a;
--grid: #1f2530;
--grid-major: #2a3140;
--cell: #4a5365;
--cell-sel: #f08a24;
--cell-busbar: #4fa3ff;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
background: var(--bg);
color: var(--text);
font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden; /* never let the page itself scroll — flex children handle their own overflow */
}
/* ---- topbar ---- */
.topbar {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 16px;
background: var(--panel);
border-bottom: 1px solid var(--border);
}
.topbar h1 {
margin: 0;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
}
.topbar .status {
color: var(--muted);
font-size: 13px;
}
.topbar .actions {
margin-left: auto;
display: flex;
gap: 8px;
align-items: center;
}
.topbar-nav {
display: flex;
gap: 4px;
padding: 0 12px;
border-left: 1px solid var(--border);
}
.topbar-nav a {
color: var(--muted);
text-decoration: none;
padding: 4px 10px;
font-size: 13px;
border-bottom: 2px solid transparent;
}
.topbar-nav a:hover { color: var(--text); }
.topbar-nav a.active {
color: var(--text);
border-bottom-color: var(--accent);
}
.project-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.project-bar select,
.project-bar input[type=text] {
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
padding: 4px 8px;
font: inherit;
font-size: 13px;
width: auto;
min-width: 120px;
}
.project-bar select { min-width: 140px; }
.save-status {
color: var(--muted);
font-size: 11px;
font-family: "SF Mono", Consolas, monospace;
margin-left: 4px;
min-width: 50px;
}
.topbar-status {
color: var(--muted);
font-size: 12px;
padding-left: 8px;
margin-left: 4px;
border-left: 1px solid var(--border);
white-space: nowrap;
}
.save-status.dirty { color: var(--accent); }
.save-status.saving { color: var(--accent-2); }
.save-status.saved { color: #3ecf8e; }
.save-status.error { color: var(--danger); }
button.danger {
background: var(--panel);
color: var(--danger);
border-color: var(--danger);
}
button.danger:hover {
background: var(--danger);
color: #fff;
}
/* ---- modal ---- */
.modal {
position: fixed; inset: 0;
background: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
z-index: 1000;
}
.modal.hidden { display: none; }
.modal-content {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
max-width: 560px;
width: 90vw;
max-height: 80vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px;
background: var(--panel-2);
border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 14px; }
.modal-close {
background: transparent; border: 0;
color: var(--muted); font-size: 20px; line-height: 1;
cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body {
padding: 12px 14px;
overflow-y: auto;
}
.history-list {
list-style: none; margin: 0; padding: 0;
}
.history-item {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 4px;
margin-bottom: 4px;
background: var(--bg);
}
.history-item .time {
font-family: "SF Mono", Consolas, monospace;
font-size: 12px;
color: var(--muted);
min-width: 140px;
}
.history-item .note { flex: 1; color: var(--text); font-size: 12px; }
.history-item button { padding: 2px 8px; font-size: 11px; }
.topbar .sep {
width: 1px;
height: 22px;
background: var(--border);
margin: 0 6px;
}
/* ---- main grid ---- */
main {
display: flex;
flex: 1;
min-height: 0;
}
.left {
width: 380px;
flex-shrink: 0;
background: var(--panel);
border-right: 1px solid var(--border);
overflow-y: auto;
padding: 12px;
}
.right {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--bg);
}
.viewport-wrap {
flex: 1 1 auto;
min-height: 0;
position: relative;
overflow: hidden;
}
.step-preview-wrap {
flex: 0 0 auto;
border-top: 1px solid var(--border);
background: var(--panel);
display: flex;
flex-direction: column;
overflow: hidden;
height: 280px;
}
.step-preview-wrap.collapsed {
height: auto;
}
.step-preview-wrap.collapsed .step-preview {
display: none;
}
.step-preview-wrap.collapsed .step-preview-collapse {
transform: rotate(180deg);
}
.step-preview-collapse {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 6px;
font-size: 10px;
line-height: 1;
cursor: pointer;
margin-right: 4px;
}
.step-preview-collapse:hover { color: var(--text); }
.step-preview-header {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 12px;
border-bottom: 1px solid var(--border);
background: var(--panel-2);
font-size: 12px;
}
.step-preview-header .hint { margin: 0; font-size: 11px; }
.step-preview {
flex: 1;
overflow: auto;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.step-preview svg {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.step-preview-empty,
.step-preview-err {
color: var(--muted);
font-size: 12px;
padding: 16px;
text-align: center;
}
.step-preview-err { color: var(--danger); }
.preset-row {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.preset-row select { flex: 1; min-width: 140px; }
.preset-row button { padding: 4px 8px; font-size: 11px; }
.preset-row .hint { margin: 0; font-size: 11px; flex-basis: 100%; }
#viewport {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
}
.viewport-overlay {
position: absolute;
bottom: 8px;
left: 12px;
display: flex;
gap: 16px;
pointer-events: none;
color: var(--muted);
font-size: 12px;
font-family: "SF Mono", Consolas, monospace;
background: rgba(15, 17, 21, 0.6);
padding: 4px 8px;
border-radius: 4px;
}
/* ---- panels ---- */
.panel {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px;
margin-bottom: 12px;
}
.panel h2 {
margin: 0 0 10px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.hint {
color: var(--muted);
font-size: 12px;
margin: 0 0 8px;
}
.hint code {
background: rgba(255,255,255,0.05);
padding: 1px 4px;
border-radius: 3px;
font-size: 11px;
}
/* ---- tabs ---- */
.tabs {
display: flex;
gap: 2px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.tab {
flex: 1;
background: transparent;
color: var(--muted);
border: 0;
border-bottom: 2px solid transparent;
padding: 6px 8px;
cursor: pointer;
font-size: 12px;
}
.tab.active {
color: var(--text);
border-bottom-color: var(--accent);
}
.tab-body { display: block; }
.tab-body.hidden { display: none; }
/* ---- forms ---- */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
label {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
label.checkbox {
flex-direction: row;
align-items: center;
gap: 6px;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
color: var(--text);
}
input[type=number], input[type=text], select, textarea {
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
padding: 6px 8px;
font: inherit;
width: 100%;
}
textarea {
resize: vertical;
font-family: "SF Mono", Consolas, monospace;
font-size: 12px;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent-2);
}
button {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
font: inherit;
}
button:hover { background: var(--panel-2); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary {
background: var(--accent);
border-color: var(--accent);
color: #1a1a1a;
font-weight: 600;
}
button.primary:hover { background: #ff9933; }
.tab-body button {
margin-top: 8px;
}
/* ---- busbars ---- */
.busbar-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.sel-info {
color: var(--muted);
font-size: 12px;
margin-left: auto;
}
.busbar-list {
list-style: none;
margin: 0;
padding: 0;
}
.busbar-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
margin-bottom: 6px;
}
.busbar-item.active {
border-color: var(--accent);
}
.busbar-color {
width: 16px;
height: 16px;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.2);
}
.busbar-name {
flex: 1;
background: transparent;
border: 0;
color: var(--text);
padding: 2px 4px;
font: inherit;
}
.busbar-name:focus { background: var(--panel); border-radius: 3px; }
.busbar-count {
color: var(--muted);
font-size: 11px;
font-family: "SF Mono", Consolas, monospace;
}
.busbar-shape {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 3px;
font-size: 11px;
padding: 1px 4px;
width: auto;
}
.busbar-actions { display: flex; gap: 4px; }
.busbar-actions button {
padding: 2px 6px;
font-size: 11px;
}
.busbar-actions .del { color: var(--danger); border-color: var(--danger); }
@media (max-width: 1000px) {
.left { width: 320px; }
}
Reference in New Issue View Git Blame Copy Permalink