Improve macOS-style terminal title bar across all pages

- Center title text with absolute positioning (real macOS layout)
- Increase traffic light dots to 12px
- Use consistent dark title bar background (#2a2a34)
- Add hover states on dots
- Separate dots into own container to avoid CSS conflicts

Author: pc-study

css/style.css

@@ -30,7 +30,7 @@
 [data-theme="light"] .cmd-code,
 [data-theme="light"] .hero-term-body{color:#3aba6a}
 [data-theme="light"] .cmd-box{background:#1a1a24;border-color:#2a2a38}
-[data-theme="light"] .cmd-header{background:#14141d;border-color:#2a2a38}
+[data-theme="light"] .cmd-header{background:#2a2a34;border-color:#2a2a38}
 [data-theme="light"] .cmd-code .cm-flag,[data-theme="light"] .hero-term-body .t-flag{color:#e8934a}
 [data-theme="light"] .cmd-code .cm-val,[data-theme="light"] .hero-term-body .t-val{color:#4a8fe8}
 [data-theme="light"] .cmd-code .cm-w,[data-theme="light"] .hero-term-body .t-w{color:#e8e6e3}
@@ -40,8 +40,8 @@
 [data-theme="light"] .cmd-btn.copy-btn{color:#e05a48}
 [data-theme="light"] .cmd-header .cmd-title{color:#9a9aaa}
 [data-theme="light"] .hero-terminal{background:#1a1a24;border-color:#2a2a38}
-[data-theme="light"] .hero-term-bar{background:#14141d;border-color:#2a2a38}
-[data-theme="light"] .hero-term-bar span{color:#5a5a6e}
+[data-theme="light"] .hero-term-bar{background:#2a2a34;border-color:#2a2a38}
+[data-theme="light"] .hero-term-title{color:#5a5a6e}
 [data-theme="light"] .nav{background:rgba(244,244,247,.88);border-bottom-color:var(--border)}
 [data-theme="light"] .nav-links a:hover{color:var(--text)}
 [data-theme="light"] .nav-cta{color:#fff!important}

generator.html

@@ -50,10 +50,11 @@
 
 .cmd-section{padding:10px 0 50px}
 .cmd-box{background:var(--term-bg,var(--bg2));border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
-.cmd-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;
-  border-bottom:1px solid var(--border);background:var(--card)}
-.cmd-header .cmd-title{font-size:.82rem;font-weight:600;color:var(--text-dim);display:flex;align-items:center;gap:8px}
-.cmd-header .cmd-title .sd{width:9px;height:9px;border-radius:50%;display:inline-block}
+.cmd-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
+  border-bottom:1px solid var(--border);background:#2a2a34;position:relative}
+.cmd-header .cmd-dots{display:flex;gap:8px}
+.cmd-header .cmd-dots .sd{width:12px;height:12px;border-radius:50%;display:inline-block}
+.cmd-header .cmd-title{position:absolute;left:0;right:0;text-align:center;font-size:.75rem;font-weight:500;color:var(--text-muted);font-family:var(--mono);pointer-events:none}
 .sd-r{background:#ff5f57}.sd-y{background:#febc2e}.sd-g{background:#28c840}
 .cmd-btns{display:flex;gap:8px}
 .cmd-btn{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:7px 16px;
@@ -113,7 +114,8 @@ <h1 data-i18n="genTitle">安装命令生成器</h1>
   <div class="mode-label" data-i18n="genOutput">生成的安装命令</div>
   <div class="cmd-box">
     <div class="cmd-header">
-      <span class="cmd-title"><span class="sd sd-r"></span><span class="sd sd-y"></span><span class="sd sd-g"></span>&nbsp;&nbsp;Terminal</span>
+      <div class="cmd-dots"><span class="sd sd-r"></span><span class="sd sd-y"></span><span class="sd sd-g"></span></div>
+      <span class="cmd-title">Terminal</span>
       <div class="cmd-btns">
         <button class="cmd-btn" onclick="resetForm()" data-i18n="resetBtn">重置参数</button>
         <button class="cmd-btn copy-btn" id="copyBtn" onclick="copyCmd()" data-i18n="copyBtn">复制命令</button>

index.html

@@ -28,10 +28,12 @@
 .hero-desc{font-size:1.05rem;color:var(--text-dim);line-height:1.7;margin-bottom:32px;max-width:500px;font-weight:300}
 .hero-btns{display:flex;gap:12px;flex-wrap:wrap}
 .hero-right{position:relative;z-index:1}
-.hero-term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--border)}
-.hero-term-bar .td{width:10px;height:10px;border-radius:50%}
+.hero-term-bar{display:flex;align-items:center;padding:10px 14px;background:#2a2a34;border-bottom:1px solid var(--border);position:relative}
+.hero-term-dots{display:flex;gap:8px;z-index:1}
+.hero-term-dots .td{width:12px;height:12px;border-radius:50%;position:relative}
 .td-r{background:#ff5f57}.td-y{background:#febc2e}.td-g{background:#28c840}
-.hero-term-bar span{margin-left:auto;font-size:.72rem;color:var(--text-muted);font-family:var(--mono)}
+.td-r:hover{background:#e04a42}.td-y:hover{background:#e5a91f}.td-g:hover{background:#1fb835}
+.hero-term-title{position:absolute;left:0;right:0;text-align:center;font-size:.72rem;color:var(--text-muted);font-family:var(--mono);pointer-events:none}
 .hero-term-body{padding:20px;font-family:var(--mono);font-size:.8rem;line-height:2;color:var(--green)}
 .hero-term-body .t-flag{color:var(--accent2)}.hero-term-body .t-val{color:var(--blue)}
 .hero-term-body .t-cmt{color:var(--text-muted);font-style:italic;opacity:.6}
@@ -135,7 +137,7 @@ <h1 class="anim-up anim-d1"><span data-i18n="heroTitle">Oracle 数据库<br><spa
       </div>
       <div class="hero-right anim-up anim-d2">
         <div class="hero-terminal">
-          <div class="hero-term-bar"><span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span><span>root@oracle:/soft</span></div>
+          <div class="hero-term-bar"><div class="hero-term-dots"><span class="td td-r"></span><span class="td td-y"></span><span class="td td-g"></span></div><span class="hero-term-title">root@oracle:/soft</span></div>
           <div class="hero-term-body" id="termBody"></div>
         </div>
       </div>