diff options
Diffstat (limited to 'frontend-vanilla')
| -rw-r--r-- | frontend-vanilla/src/main.ts | 38 | ||||
| -rw-r--r-- | frontend-vanilla/src/style.css | 49 |
2 files changed, 51 insertions, 36 deletions
diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts index d769990..2be9354 100644 --- a/frontend-vanilla/src/main.ts +++ b/frontend-vanilla/src/main.ts @@ -77,13 +77,18 @@ export function renderLayout() { </div> <div class="sidebar-footer"> <div class="sidebar-quick-controls"> - <button id="sidebar-theme-toggle" class="sidebar-icon-btn" title="${store.theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}">${store.theme === 'light' ? '☽' : '☀'}</button> - <span class="sidebar-controls-divider"></span> - <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'default' ? 'active' : ''}" data-style-theme="default" title="Default">○</button> - <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'refined' ? 'active' : ''}" data-style-theme="refined" title="Refined">◆</button> - <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'terminal' ? 'active' : ''}" data-style-theme="terminal" title="Terminal">▮</button> - <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'codex' ? 'active' : ''}" data-style-theme="codex" title="Codex">❧</button> - <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'sakura' ? 'active' : ''}" data-style-theme="sakura" title="Sakura">❀</button> + <div class="sidebar-controls-row"> + <button class="sidebar-icon-btn sidebar-theme-btn ${store.theme === 'light' ? 'active' : ''}" data-theme="light" title="Light mode">☀</button> + <button class="sidebar-icon-btn sidebar-theme-btn ${store.theme === 'dark' ? 'active' : ''}" data-theme="dark" title="Dark mode">☽</button> + </div> + <hr class="sidebar-controls-rule"> + <div class="sidebar-controls-row"> + <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'default' ? 'active' : ''}" data-style-theme="default" title="Default">○</button> + <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'refined' ? 'active' : ''}" data-style-theme="refined" title="Refined">◆</button> + <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'terminal' ? 'active' : ''}" data-style-theme="terminal" title="Terminal">▮</button> + <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'codex' ? 'active' : ''}" data-style-theme="codex" title="Codex">❧</button> + <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'sakura' ? 'active' : ''}" data-style-theme="sakura" title="Sakura">❀</button> + </div> </div> <a href="/v3/settings" data-nav="settings">Settings</a> <a href="#" id="logout-button">Logout</a> @@ -113,9 +118,12 @@ export function attachLayoutListeners() { logout(); }); - // Sidebar quick controls: light/dark toggle - document.getElementById('sidebar-theme-toggle')?.addEventListener('click', () => { - store.setTheme(store.theme === 'light' ? 'dark' : 'light'); + // Sidebar quick controls: light/dark buttons + document.querySelectorAll('.sidebar-theme-btn').forEach(btn => { + btn.addEventListener('click', () => { + const theme = btn.getAttribute('data-theme'); + if (theme) store.setTheme(theme); + }); }); // Sidebar quick controls: style theme emoji buttons @@ -876,12 +884,10 @@ store.on('theme-updated', () => { // Re-apply classes with proper specificity logic appEl.className = `theme-${store.theme} font-${store.fontTheme} heading-font-${store.headingFontTheme}`; } - // Update sidebar toggle icon - const toggleBtn = document.getElementById('sidebar-theme-toggle'); - if (toggleBtn) { - toggleBtn.textContent = store.theme === 'light' ? '☽' : '☀'; - toggleBtn.title = store.theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'; - } + // Update sidebar light/dark button active states + document.querySelectorAll('.sidebar-theme-btn').forEach(btn => { + btn.classList.toggle('active', btn.getAttribute('data-theme') === store.theme); + }); // Also re-render settings if we are on settings page to update active state of buttons if (router.getCurrentRoute().path === '/settings') { renderSettings(); diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css index c765666..0f7b909 100644 --- a/frontend-vanilla/src/style.css +++ b/frontend-vanilla/src/style.css @@ -215,63 +215,72 @@ html { opacity: 1; } -/* Quick controls row in sidebar footer */ +/* Quick controls block in sidebar footer */ .sidebar-quick-controls { display: flex; + flex-direction: column; + gap: 0; + margin-bottom: 0.5rem; +} + +.sidebar-controls-row { + display: flex; align-items: center; - gap: 0.15rem; - margin-bottom: 0.25rem; + gap: 0.1rem; } -.sidebar-controls-divider { - width: 1px; - height: 1rem; - background: rgba(128, 128, 128, 0.25); - margin: 0 0.25rem; +.sidebar-controls-rule { + border: none; + border-top: 1px solid rgba(128, 128, 128, 0.2); + margin: 0.35rem 0; } .sidebar-icon-btn { background: none; border: none; cursor: pointer; - font-size: 0.8rem; - padding: 0.25rem 0.35rem; - border-radius: 4px; + font-size: 1rem; + padding: 0.3rem 0.4rem; + border-radius: 5px; color: var(--text-color); - opacity: 0.35; + opacity: 0.4; transition: opacity 0.15s, background 0.15s; font-family: inherit; text-transform: none; font-weight: 400; height: auto; line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; } .sidebar-icon-btn:hover { - opacity: 0.8; - background: rgba(255, 255, 255, 0.08); + opacity: 0.85; + background: rgba(128, 128, 128, 0.12); border: none; } .sidebar-icon-btn.active { opacity: 1; - background: rgba(255, 255, 255, 0.15); - color: var(--text-color); + background: rgba(128, 128, 128, 0.18); } +/* Dark mode sidebar has a grey background with dark text. + Explicitly set dark ink so icons are legible. */ .theme-dark .sidebar-icon-btn { - color: rgba(0, 0, 0, 0.87); - border: none; + color: rgba(0, 0, 0, 0.75); background: none; + border: none; } .theme-dark .sidebar-icon-btn:hover { - background: rgba(0, 0, 0, 0.06); + background: rgba(0, 0, 0, 0.1); border: none; } .theme-dark .sidebar-icon-btn.active { - background: rgba(0, 0, 0, 0.12); + background: rgba(0, 0, 0, 0.15); } /* Main Content area - always fills full width (sidebar overlays) */ |