.atlas-titlebar
Titlebar
36px app header. Brand on the left, status in the center, actions on the right.
Default
Atlas
Production · main · v1.24.3
AB
<header class="atlas-titlebar" style="border:1px solid var(--border-default);border-radius:6px">
<div style="display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px">
<span style="width:10px;height:10px;border-radius:2px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-highlight))"></span>
<span>Atlas</span>
</div>
<div style="font-size:11px;color:var(--text-tertiary)">Production · main · v1.24.3</div>
<div style="display:flex;align-items:center;gap:6px">
<button class="atlas-btn atlas-btn-icon" aria-label="Settings"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="8"/></svg></button>
<div class="atlas-avatar" style="width:22px;height:22px;font-size:10px">AB</div>
</div>
</header>