fdciabdul/driver-booster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Hide native title bar, add custom frameless window controls

Browse Source 
- 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:
taqin
2026-04-12 21:20:43 +07:00
parent 70c46277c4
commit 8bf4c2ffdb
3 changed files with 110 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ui/index.html
View File

@@ -8,8 +8,8 @@
</head>
<body>
<div class="app">
<!-- Title Bar -->
<div class="titlebar">
<!-- Custom Title Bar (frameless window) -->
<div class="titlebar" id="titlebar">
<div class="titlebar-left">
<img src="icon-app.png" class="app-logo-img" alt="">
<div class="app-title">
@@ -17,12 +17,23 @@
<span class="app-edition">PRO</span>
</div>
</div>
<div class="titlebar-right">
<div class="titlebar-center">
<div class="sys-status">
<div class="status-led"></div>
<span>System Protected</span>
</div>
</div>
<div class="titlebar-controls">
<button class="win-btn win-minimize" onclick="windowMinimize()" title="Minimize">
<svg width="10" height="1" viewBox="0 0 10 1"><rect width="10" height="1" fill="currentColor"/></svg>
</button>
<button class="win-btn win-maximize" onclick="windowMaximize()" title="Maximize">
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" stroke-width="1"/></svg>
</button>
<button class="win-btn win-close" onclick="windowClose()" title="Close">
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.2"/><line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.2"/></svg>
</button>
</div>
</div>
<!-- Toolbar Tabs -->

42
ui/style.css
View File

@@ -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;