diff options
| author | Adam Mathes <adam@adammathes.com> | 2026-02-17 19:00:26 -0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2026-02-17 19:00:26 -0800 |
| commit | 9db36ae402dbb74f7223a4efc8b2483086684e38 (patch) | |
| tree | f7f69858a5667e88f160a579c805d6ad834e8844 /frontend-vanilla/src/style.css | |
| parent | fd5f67d2a45dbefbc1045bf8270cc3bc5d711592 (diff) | |
| parent | 81c78496e1fa0701618254986e9ff17081a74f11 (diff) | |
| download | neko-9db36ae402dbb74f7223a4efc8b2483086684e38.tar.gz neko-9db36ae402dbb74f7223a4efc8b2483086684e38.tar.bz2 neko-9db36ae402dbb74f7223a4efc8b2483086684e38.zip | |
Merge pull request #13 from adammathes/claude/add-css-themes-QGTmP
Add 4 CSS style themes with runtime switcher
Diffstat (limited to 'frontend-vanilla/src/style.css')
| -rw-r--r-- | frontend-vanilla/src/style.css | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css index e9512b7..f58ae24 100644 --- a/frontend-vanilla/src/style.css +++ b/frontend-vanilla/src/style.css @@ -215,6 +215,65 @@ html { opacity: 1; } +/* Quick controls row in sidebar footer */ +.sidebar-quick-controls { + display: flex; + align-items: center; + gap: 0.15rem; + margin-bottom: 0.25rem; +} + +.sidebar-controls-divider { + width: 1px; + height: 1rem; + background: rgba(128, 128, 128, 0.25); + margin: 0 0.25rem; +} + +.sidebar-icon-btn { + background: none; + border: none; + cursor: pointer; + font-size: 0.8rem; + padding: 0.25rem 0.35rem; + border-radius: 4px; + color: var(--text-color); + opacity: 0.35; + transition: opacity 0.15s, background 0.15s; + font-family: inherit; + text-transform: none; + font-weight: 400; + height: auto; + line-height: 1; +} + +.sidebar-icon-btn:hover { + opacity: 0.8; + background: rgba(255, 255, 255, 0.08); + border: none; +} + +.sidebar-icon-btn.active { + opacity: 1; + background: rgba(255, 255, 255, 0.15); + color: var(--text-color); +} + +.theme-dark .sidebar-icon-btn { + color: rgba(0, 0, 0, 0.87); + border: none; + background: none; +} + +.theme-dark .sidebar-icon-btn:hover { + background: rgba(0, 0, 0, 0.06); + border: none; +} + +.theme-dark .sidebar-icon-btn.active { + background: rgba(0, 0, 0, 0.12); +} + /* Main Content area - always fills full width (sidebar overlays) */ .main-content { width: 100%; |