Hide native title bar, add custom frameless window controls
- Remove WS_CAPTION via SetWindowLong to hide native Windows title bar - Keep WS_THICKFRAME for window resizing from edges - Add custom Win11-style window control buttons (minimize, maximize, close) - Close button turns red on hover (#c42b1c) matching Windows 11 - Title bar is draggable via -webkit-app-region: drag - Bind windowMinimize/windowMaximize/windowClose Go functions to JS - Center system status indicator in title bar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
42
ui/style.css
42
ui/style.css
@@ -67,31 +67,53 @@ body {
|
||||
/* ---- App Shell ---- */
|
||||
.app { display:flex; flex-direction:column; height:100vh; background:var(--mica); }
|
||||
|
||||
/* ---- Title Bar (Win11 style) ---- */
|
||||
/* ---- Custom Title Bar (frameless window) ---- */
|
||||
.titlebar {
|
||||
display:flex; justify-content:space-between; align-items:center;
|
||||
padding:10px 16px;
|
||||
display:flex; align-items:center;
|
||||
padding:0 0 0 12px;
|
||||
height:38px;
|
||||
background:var(--bg);
|
||||
border-bottom:1px solid var(--border);
|
||||
flex-shrink:0;
|
||||
-webkit-app-region:drag;
|
||||
user-select:none;
|
||||
}
|
||||
.titlebar-left { display:flex; align-items:center; gap:10px; -webkit-app-region:no-drag; }
|
||||
.app-title { display:flex; align-items:center; gap:8px; }
|
||||
.app-name { font-size:13px; font-weight:600; color:var(--text); letter-spacing:.3px; }
|
||||
.titlebar-left { display:flex; align-items:center; gap:8px; -webkit-app-region:no-drag; flex-shrink:0; }
|
||||
.titlebar-center { flex:1; display:flex; align-items:center; justify-content:center; }
|
||||
.app-title { display:flex; align-items:center; gap:6px; }
|
||||
.app-name { font-size:12px; font-weight:600; color:var(--text); letter-spacing:.3px; }
|
||||
.app-edition {
|
||||
font-size:10px; font-weight:600; color:var(--accent);
|
||||
background:var(--accent-subtle); padding:1px 6px;
|
||||
font-size:9px; font-weight:600; color:var(--accent);
|
||||
background:var(--accent-subtle); padding:1px 5px;
|
||||
border-radius:var(--radius-sm); letter-spacing:.5px;
|
||||
}
|
||||
.sys-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-sec); }
|
||||
.sys-status { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); }
|
||||
.status-led {
|
||||
width:8px; height:8px; border-radius:50%;
|
||||
width:6px; height:6px; border-radius:50%;
|
||||
background:var(--green); box-shadow:0 0 6px var(--green);
|
||||
animation:pulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
||||
|
||||
/* Window control buttons (Win11 style) */
|
||||
.titlebar-controls {
|
||||
display:flex; align-items:stretch;
|
||||
height:38px; flex-shrink:0;
|
||||
-webkit-app-region:no-drag;
|
||||
}
|
||||
.win-btn {
|
||||
width:46px; height:38px;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
background:transparent; border:none;
|
||||
color:var(--text-sec); cursor:pointer;
|
||||
transition:background .1s ease;
|
||||
font-family:inherit;
|
||||
}
|
||||
.win-btn:hover { background:rgba(255,255,255,0.06); color:var(--text); }
|
||||
.win-btn:active { background:rgba(255,255,255,0.04); }
|
||||
.win-close:hover { background:#c42b1c; color:white; }
|
||||
.win-close:active { background:#b52a1c; }
|
||||
|
||||
/* ---- Toolbar (Win11 Tabs / NavigationView) ---- */
|
||||
.toolbar {
|
||||
display:flex; gap:2px; padding:6px 12px;
|
||||
|
||||
Reference in New Issue
Block a user