diff --git a/frontend/style.css b/frontend/style.css index 4271bfadf..b00426bef 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -77,20 +77,17 @@ body { /* Theme Toggle Button */ .theme-toggle { - position: fixed; - top: 1rem; - right: 1rem; - width: 40px; - height: 40px; + width: 36px; + height: 36px; border-radius: 50%; - background: var(--surface); + background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; - z-index: 200; + flex-shrink: 0; transition: background 0.3s ease, color 0.2s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } @@ -149,25 +146,65 @@ body { padding: 0; } -/* Header - Hidden */ -header { - display: none; +/* Site Header */ +.site-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 1.5rem; + height: 60px; + background: var(--surface); + border-bottom: 1px solid var(--border-color); + flex-shrink: 0; + transition: background-color 0.3s ease, border-color 0.3s ease; +} + +.header-brand { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.header-logo { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 8px; + color: white; + flex-shrink: 0; +} + +.header-title { + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.header-controls { + display: flex; + align-items: center; + gap: 0.75rem; } header h1 { - font-size: 1.75rem; + font-size: 1.05rem; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; + line-height: 1.2; } .subtitle { - font-size: 0.95rem; + font-size: 0.75rem; color: var(--text-secondary); - margin-top: 0.5rem; + margin: 0; + line-height: 1; } /* Main Content Area with Sidebar */ @@ -179,6 +216,8 @@ header h1 { } /* Smooth transitions for theme switch on key elements */ +.site-header, +.header-logo, .sidebar, .chat-main, .chat-container, @@ -823,12 +862,17 @@ details[open] .suggested-header::before { order: 1; } - header { - padding: 1rem; + .site-header { + padding: 0 1rem; + height: 52px; } - + + .subtitle { + display: none; + } + header h1 { - font-size: 1.5rem; + font-size: 0.95rem; } .chat-messages {