v0.5.3
This commit is contained in:
Mateusz Gruszczyński
@@ -506,3 +506,102 @@ html[data-theme='light'] .simulation-metrics > div, html[data-theme='light'] .si
|
||||
.simulation-timeline-item { grid-template-columns:1fr; gap:6px; }
|
||||
.simulation-flow, .simulation-metrics { grid-template-columns:1fr; }
|
||||
}
|
||||
|
||||
/* Compact connection state: a colored dot replaces the Connected/Disconnected label. */
|
||||
.brand-line { display:flex; align-items:center; gap:8px; min-width:0; }
|
||||
.brand-line strong { display:block; }
|
||||
.connection-dot { display:inline-block !important; width:9px; height:9px; flex:0 0 9px; margin:0 !important; border-radius:50%; background:var(--muted); box-shadow:0 0 0 3px color-mix(in srgb, var(--muted) 15%, transparent); }
|
||||
.connection-dot.connected { background:#37c96b; box-shadow:0 0 0 3px rgba(55,201,107,.14), 0 0 10px rgba(55,201,107,.3); }
|
||||
.connection-dot.disconnected, .connection-dot.connectionError { background:#ef5b5b; box-shadow:0 0 0 3px rgba(239,91,91,.14), 0 0 10px rgba(239,91,91,.24); }
|
||||
.connection-dot.connecting { background:#e2a93b; box-shadow:0 0 0 3px rgba(226,169,59,.14); animation:connection-pulse 1.25s ease-in-out infinite; }
|
||||
@keyframes connection-pulse { 50% { opacity:.45; transform:scale(.86); } }
|
||||
|
||||
/* v0.5.3 usability refinements */
|
||||
.history-toolbar-panel .chart-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) minmax(180px,.55fr) auto; gap:12px; align-items:end; }
|
||||
.history-toolbar-panel .chart-toolbar > * { min-width:0; }
|
||||
.history-context-controls { display:block; width:100%; min-width:0; }
|
||||
.history-context-controls label, .history-range-control { width:100%; }
|
||||
.history-range-control { display:grid; gap:7px; }
|
||||
.history-refresh-button { min-height:45px; align-self:end; }
|
||||
|
||||
.settings-form { display:grid; gap:14px; }
|
||||
.settings-block { display:grid; gap:18px; }
|
||||
.settings-block-head { display:flex; align-items:flex-start; gap:13px; }
|
||||
.settings-block-head h3 { margin:1px 0 4px; font-size:18px; }
|
||||
.settings-block-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
|
||||
.settings-block-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid var(--line); border-radius:11px; color:var(--accent); background:var(--surface-muted); font-size:14px; font-weight:800; }
|
||||
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
|
||||
.settings-grid .wide { grid-column:1/-1; }
|
||||
.settings-subhead { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
|
||||
.settings-subhead strong, .settings-subhead small { display:block; }
|
||||
.settings-subhead small { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.4; }
|
||||
.settings-save-bar { position:sticky; bottom:18px; z-index:9; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid var(--line-strong); border-radius:16px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 8px 30px rgba(0,0,0,.18); backdrop-filter:blur(16px); }
|
||||
.settings-save-bar span { color:var(--muted); font-size:12px; }
|
||||
.sensor-alias-manager { padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-muted); }
|
||||
.sensor-alias-list { display:grid; gap:8px; }
|
||||
.sensor-alias-row { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,1fr) 34px; gap:8px; align-items:center; }
|
||||
.sensor-alias-row > span { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.sensor-alias-row input { min-height:40px; }
|
||||
.sensor-alias-clear { width:34px; height:34px; padding:0; border-radius:10px; color:var(--muted); background:transparent; }
|
||||
.sensor-alias-add { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,1fr) auto; gap:8px; margin-top:10px; }
|
||||
.logs-toolbar { display:grid; grid-template-columns:1fr minmax(160px,220px) auto; gap:14px; align-items:end; margin-bottom:14px; }
|
||||
.logs-toolbar > div strong, .logs-toolbar > div small { display:block; }
|
||||
.logs-toolbar > div small { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.4; }
|
||||
|
||||
.simulation-flow-shell { padding:0; overflow:hidden; margin-bottom:18px; }
|
||||
.simulation-flow-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
|
||||
.simulation-flow-head h2 { margin:3px 0 0; }
|
||||
.flow-legend { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:11px; }
|
||||
.flow-legend span { display:flex; align-items:center; gap:6px; }
|
||||
.flow-legend b { font-weight:650; }
|
||||
.flow-legend-dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
|
||||
.flow-legend-dot.input { background:var(--teal); }
|
||||
.flow-legend-dot.logic { background:var(--purple); }
|
||||
.flow-legend-dot.action { background:var(--accent); }
|
||||
.simulation-flow-scroll { overflow:auto; max-width:100%; scrollbar-width:thin; }
|
||||
.simulation-flow-board { position:relative; min-width:1325px; background-color:var(--surface-muted); background-image:radial-gradient(circle,var(--grid) 1px,transparent 1.5px); background-size:20px 20px; }
|
||||
.flow-links { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; }
|
||||
.flow-link { fill:none; stroke:color-mix(in srgb,var(--muted) 48%,transparent); stroke-width:2; vector-effect:non-scaling-stroke; }
|
||||
.flow-link.bus { stroke-dasharray:5 6; opacity:.55; }
|
||||
.flow-link.input-link { stroke:color-mix(in srgb,var(--teal) 65%,var(--muted)); }
|
||||
.flow-link.logic-link { stroke:color-mix(in srgb,var(--purple) 58%,var(--muted)); }
|
||||
.flow-link.action-link { stroke:color-mix(in srgb,var(--accent) 60%,var(--muted)); }
|
||||
.flow-link.active-link { stroke:var(--accent); stroke-width:3; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)); }
|
||||
.flow-link.night-link { stroke:var(--info); stroke-dasharray:6 5; stroke-width:2.5; }
|
||||
.flow-lane-label { position:absolute; z-index:2; left:45px; width:1230px; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11px; }
|
||||
.flow-lane-label::after { content:""; height:1px; flex:1; background:var(--line); }
|
||||
.flow-lane-label strong { color:var(--text-soft); font-size:12px; }
|
||||
.flow-node { position:absolute; z-index:3; display:grid; align-content:start; gap:6px; padding:12px 13px; border:1px solid var(--line-strong); border-radius:12px; background:color-mix(in srgb,var(--surface) 96%,transparent); box-shadow:0 8px 24px rgba(0,0,0,.15); }
|
||||
.flow-node.input { border-left:3px solid var(--teal); }
|
||||
.flow-node.logic { border-left:3px solid var(--purple); }
|
||||
.flow-node.action { border-left:3px solid var(--accent); }
|
||||
.flow-node.event { border-left:3px solid var(--info); }
|
||||
.flow-node.decision.demand { box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent),0 8px 24px rgba(0,0,0,.15); }
|
||||
.flow-node.global { min-height:106px; }
|
||||
.flow-node.night-active { border-color:color-mix(in srgb,var(--info) 45%,var(--line-strong)); }
|
||||
.flow-node-top { display:flex; align-items:center; justify-content:space-between; gap:6px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
|
||||
.flow-node h3 { overflow:hidden; margin:0; color:var(--text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.flow-node > strong { color:var(--text); font-size:17px; line-height:1.25; }
|
||||
.flow-node p { display:-webkit-box; overflow:hidden; margin:0; color:var(--muted); font-size:10px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
|
||||
.flow-node-badge { max-width:86px; overflow:hidden; padding:3px 6px; border-radius:999px; color:var(--muted); background:var(--surface-muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.flow-node-badge.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
|
||||
.flow-port { position:absolute; top:50%; width:9px; height:9px; margin-top:-5px; border:2px solid var(--surface); border-radius:50%; background:var(--muted); }
|
||||
.flow-port.in { left:-6px; }
|
||||
.flow-port.out { right:-6px; }
|
||||
.flow-node.input .flow-port { background:var(--teal); }
|
||||
.flow-node.logic .flow-port { background:var(--purple); }
|
||||
.flow-node.action .flow-port { background:var(--accent); }
|
||||
.flow-node.event .flow-port { background:var(--info); }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.history-toolbar-panel .chart-toolbar { grid-template-columns:1fr 1fr; }
|
||||
.history-context-controls { grid-column:1/-1; }
|
||||
.history-refresh-button { grid-column:auto; }
|
||||
.settings-grid { grid-template-columns:1fr; }
|
||||
.settings-grid .wide { grid-column:auto; }
|
||||
.settings-save-bar { bottom:76px; }
|
||||
.sensor-alias-row, .sensor-alias-add { grid-template-columns:1fr; }
|
||||
.sensor-alias-clear { justify-self:end; }
|
||||
.logs-toolbar { grid-template-columns:1fr; align-items:stretch; }
|
||||
.simulation-flow-head { align-items:flex-start; flex-direction:column; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user