martino/MARTe_IO_Components
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Functional v2

Browse Source
This commit is contained in:
Martino Ferrari
2026-05-18 23:28:29 +02:00
parent f06b948c0f
commit bdcdb39d21
3 changed files with 78 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/WebUI/static/style.css
+22 -30
View File
@@ -191,8 +191,8 @@ input[type=range].trig-range::-webkit-slider-thumb {
#main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
/* Layout toggle button in topbar */
#btn-layout {
display:flex; align-items:center; gap:6px;
font-size:12px; padding:4px 10px;
display:flex; align-items:center; gap:4px;
font-size:11px; padding:3px 8px;
}
#btn-layout svg { flex-shrink:0; }
#btn-layout span { flex-shrink:0; }
@@ -206,10 +206,10 @@ input[type=range].trig-range::-webkit-slider-thumb {
}
#layout-menu.open { display:grid; }
.layout-menu-item {
display:flex; flex-direction:column; align-items:center; gap:5px;
padding:8px 14px; cursor:pointer;
display:flex; flex-direction:column; align-items:center; gap:3px;
padding:5px 10px; cursor:pointer;
background:var(--surface0); border:1px solid var(--surface1); border-radius:6px;
color:var(--subtext1); font-size:11px; font-family:monospace;
color:var(--subtext1); font-size:10px; font-family:monospace;
transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.layout-menu-item:hover { background:var(--surface1); border-color:var(--accent); color:var(--accent); }
@@ -217,7 +217,8 @@ input[type=range].trig-range::-webkit-slider-thumb {
/* ── Plot grid ────────────────────────────────────────────────── */
#plot-grid {
flex:1; min-height:0; display:grid; gap:8px; padding:8px; overflow:hidden;
flex:1; min-height:0; display:grid; gap:0; padding:0; overflow:hidden;
border-top:1px solid var(--surface0); border-left:1px solid var(--surface0);
}
#plot-grid.l1x1 { grid-template-columns:1fr; grid-template-rows:1fr; }
#plot-grid.l2x1 { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
@@ -232,16 +233,25 @@ input[type=range].trig-range::-webkit-slider-thumb {
/* ── Plot card ────────────────────────────────────────────────── */
.plot-card {
background:var(--surface0); border:1px solid var(--surface1);
border-radius:var(--radius); display:flex; flex-direction:column;
background:var(--bg);
border-right:1px solid var(--surface0); border-bottom:1px solid var(--surface0);
border-radius:0; display:flex; flex-direction:column;
min-height:0; position:relative; overflow:hidden;
transition:border-color var(--transition);
}
.plot-card.drag-over { border-color:var(--accent); box-shadow:0 0 0 2px rgba(137,180,250,0.25); }
.plot-card.drag-over { background:rgba(137,180,250,0.04); box-shadow:inset 0 0 0 2px var(--accent); }
/* Header: hidden by default, slides in on hover */
.plot-card-header {
position:absolute; top:0; left:0; right:0; z-index:5;
background:rgba(17,17,27,0.88); backdrop-filter:blur(6px);
border-bottom:1px solid var(--surface1);
display:flex; align-items:center; gap:5px;
padding:4px 8px; border-bottom:1px solid var(--surface1);
flex-shrink:0; min-height:30px; max-height:30px; overflow:hidden;
padding:3px 8px; min-height:26px; overflow:hidden;
opacity:0; transform:translateY(-100%);
transition:opacity 0.12s ease, transform 0.12s ease;
pointer-events:none;
}
.plot-card:hover .plot-card-header {
opacity:1; transform:translateY(0); pointer-events:auto;
}
.plot-title {
font-size:11px; color:var(--subtext1); font-weight:600;
@@ -263,29 +273,11 @@ input[type=range].trig-range::-webkit-slider-thumb {
transition:color var(--transition);
}
.sig-badge-x:hover { color:var(--red); }
.plot-icons { display:flex; gap:2px; flex-shrink:0; }
.plot-icon-btn {
background:none; border:none; cursor:pointer; color:var(--subtext0);
font-size:13px; line-height:1; padding:2px 4px; border-radius:4px;
transition:color var(--transition),background var(--transition);
}
.plot-icon-btn:hover { color:var(--accent); background:var(--surface1); }
.plot-icon-btn.danger:hover { color:var(--red); }
.plot-body { flex:1; position:relative; min-height:0; overflow:hidden; }
.drop-hint {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:var(--overlay0); font-size:13px; pointer-events:none;
}
.pause-overlay {
position:absolute; inset:0; display:none;
align-items:center; justify-content:center; pointer-events:none; z-index:10;
}
.plot-card.paused .pause-overlay { display:flex; }
.pause-overlay-text {
background:rgba(49,50,68,0.82); color:var(--yellow);
font-size:11px; font-weight:600; padding:4px 12px; border-radius:20px;
border:1px solid var(--yellow);
}
.trig-collect-overlay {
position:absolute; inset:0; display:none;
align-items:center; justify-content:center; pointer-events:none; z-index:10;