gilles/system_update
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): classes layout header/statusbar/inputs/terminal

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
gilles soulier
2026-06-05 05:27:04 +02:00
parent cebe991601
commit f9ce991ec5
1 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/styles/app.css
+42 -3
View File
@@ -7,8 +7,47 @@ body {
background: var(--bg-1);
color: var(--ink-1);
}
.su-layout { display: flex; height: 100vh; }
.su-hermes { width: 280px; min-width: 200px; background: var(--bg-2); border-right: 1px solid var(--border-1); padding: 14px; }
/* Ossature : header / rangée 3 volets / status bar */
.su-app { display: flex; flex-direction: column; height: 100vh; }
.su-row { flex: 1; display: flex; min-height: 0; }
.su-header {
height: 52px; flex: 0 0 52px;
display: flex; align-items: center; gap: 12px;
padding: 0 16px;
background: var(--bg-2);
border-bottom: 1px solid var(--border-1);
}
.su-header h1 { font-size: 15px; margin: 0; font-weight: 600; }
.su-spacer { flex: 1; }
.su-hermes { width: 280px; min-width: 200px; background: var(--bg-2); border-right: 1px solid var(--border-1); padding: 14px; overflow: auto; }
.su-center { flex: 1; overflow: auto; padding: 18px; }
.su-terminal { width: 360px; min-width: 320px; background: var(--bg-0); border-left: 1px solid var(--border-1); }
.su-terminal-wrap { width: 360px; min-width: 320px; display: flex; flex-direction: column; background: var(--bg-0); border-left: 1px solid var(--border-1); }
.su-terminal-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-1); }
.su-terminal { flex: 1; min-height: 0; padding: 6px; }
.su-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* Status bar style tmux */
.su-statusbar {
height: 26px; flex: 0 0 26px;
display: flex; align-items: stretch;
background: var(--bg-2);
border-top: 1px solid var(--border-1);
font-family: var(--font-terminal);
font-size: 11px;
}
.su-statusbar .cell { display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--border-1); color: var(--ink-2); }
.su-statusbar .cell.mode { background: var(--accent); color: var(--bg-1); font-weight: 700; letter-spacing: 0.08em; }
.su-statusbar .clock { margin-left: auto; border-right: none; border-left: 1px solid var(--border-1); }
/* Champs de formulaire tokenisés */
.su-field {
padding: 9px 12px; font-size: 13px; font-family: var(--font-ui);
background: var(--bg-1); color: var(--ink-1);
border: 1px solid var(--border-2); border-radius: 8px;
outline: none;
}
.su-field:focus { border-color: var(--accent-soft); }