diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx index c4cc641b..d645db68 100644 --- a/src/components/TitleBar.tsx +++ b/src/components/TitleBar.tsx @@ -10,8 +10,6 @@ export default function TitleBar() { return (
- Psysonic -
{currentTrack && ( <> diff --git a/src/styles/layout.css b/src/styles/layout.css index 859a47a3..707e52b5 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -67,7 +67,7 @@ grid-area: titlebar; display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-end; background: var(--bg-sidebar); border-bottom: 1px solid var(--border-subtle); padding: 0 6px 0 12px; @@ -75,15 +75,6 @@ user-select: none; } -.titlebar-title { - font-size: 12px; - font-weight: 600; - color: var(--text-muted); - letter-spacing: 0.02em; - pointer-events: none; - flex: 0 0 auto; -} - .titlebar-track { position: absolute; left: 50%; @@ -93,23 +84,35 @@ gap: 6px; max-width: 40%; pointer-events: none; + padding: 3px 10px; + background: rgba(0, 0, 0, 0.45); + border-radius: 999px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); +} + +.titlebar-track:empty { + display: none; } .titlebar-track-state { font-size: 9px; color: var(--accent); flex-shrink: 0; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); } .titlebar-track-text { - font-size: 12px; - color: var(--text-secondary); + font-size: 11px; + color: #ececec; max-width: 100%; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } .titlebar-controls { display: flex; - gap: 2px; + align-items: center; + gap: 8px; + padding: 0 8px; flex: 0 0 auto; } @@ -117,24 +120,43 @@ display: flex; align-items: center; justify-content: center; - width: 30px; - height: 24px; + width: 14px; + height: 14px; + padding: 0; border: none; - background: transparent; - color: var(--text-muted); - border-radius: var(--radius-sm); + border-radius: 50%; cursor: pointer; - transition: background var(--transition-fast), color var(--transition-fast); + box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); + transition: filter var(--transition-fast); +} + +.titlebar-btn svg { + width: 9px; + height: 9px; + stroke-width: 2.5; +} + +.titlebar-btn-close { + background: #ff5f57; + color: #4d0000; +} + +.titlebar-btn-minimize { + background: #febc2e; + color: #7a4a00; +} + +.titlebar-btn-maximize { + background: #28c840; + color: #004d00; } .titlebar-btn:hover { - background: var(--bg-hover); - color: var(--text-primary); + filter: brightness(1.08); } -.titlebar-btn-close:hover { - background: var(--danger); - color: #fff; +.titlebar-btn:active { + filter: brightness(0.92); } /* Resizer handles must start below the titlebar */