Horizontal42/summarum
1
0
Fork 0
mirror of https://github.com/Horizontal42/summarum.git synced 2026-11-11 01:02:01 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

settings: subtle open and tab-switch animations

Browse source 
Settings panel pops in (scale + fade, 0.15s) instead of appearing
instantly; switching tabs fades the new panel in (0.12s); the tab
buttons themselves transition their background/color on hover and
selection instead of snapping. CSS-only — @keyframes animations run
even from display:none, so no JS timing/exit-animation complexity.
This commit is contained in:
Horizontal42 2026-07-03 12:14:26 +03:00
parent e5ef1164cc
commit 702670e08d
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/ui/app.css
View file

@ -357,8 +357,14 @@ body {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
padding: 14px; padding: 14px;
z-index: 50; z-index: 50;
transform-origin: top right;
} }
#settings-panel.hidden { display: none; } #settings-panel.hidden { display: none; }
#settings-panel:not(.hidden) { animation: settings-pop-in 0.15s ease; }
@keyframes settings-pop-in {
from { opacity: 0; transform: scale(0.97) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
#settings-panel h2 { margin: 0 0 10px; font-size: 14px; } #settings-panel h2 { margin: 0 0 10px; font-size: 14px; }
#settings-tabs { #settings-tabs {
display: flex; display: flex;
@ -377,10 +383,16 @@ body {
padding: 5px 10px; padding: 5px 10px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
} }
#settings-tabs .tab:hover { background: var(--hover); color: var(--fg); } #settings-tabs .tab:hover { background: var(--hover); color: var(--fg); }
#settings-tabs .tab.active { background: var(--sel); color: var(--fg); } #settings-tabs .tab.active { background: var(--sel); color: var(--fg); }
.settings-tabpanel.hidden { display: none; } .settings-tabpanel.hidden { display: none; }
.settings-tabpanel:not(.hidden) { animation: settings-fade-in 0.12s ease; }
@keyframes settings-fade-in {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
.settings-tabpanel-buttons { display: flex; gap: 6px; margin-top: 10px; } .settings-tabpanel-buttons { display: flex; gap: 6px; margin-top: 10px; }
.settings-tabpanel-buttons button { .settings-tabpanel-buttons button {
border: 1px solid var(--border); border: 1px solid var(--border);