Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/SidebarTab: improve animations & adjust mobile style

Browse source
This commit is contained in:
wukko 2024-09-18 15:46:07 +06:00
parent 1a845fcfc2
commit c92cd6d21c
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
web/src/components/sidebar/SidebarTab.svelte
View file

@ -28,11 +28,6 @@
$: if (isTabActive && tab) { $: if (isTabActive && tab) {
showTab(tab); showTab(tab);
tab.classList.add("animate");
setTimeout(() => {
tab.classList.remove("animate");
}, 250);
} }
</script> </script>
@ -63,7 +58,7 @@
padding: var(--padding) 5px; padding: var(--padding) 5px;
color: var(--sidebar-highlight); color: var(--sidebar-highlight);
font-size: var(--sidebar-font-size); font-size: var(--sidebar-font-size);
opacity: 0.8; opacity: 0.75;
height: fit-content; height: fit-content;
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: transform 0.2s; transition: transform 0.2s;
@ -88,19 +83,15 @@
color: var(--sidebar-bg); color: var(--sidebar-bg);
background: var(--sidebar-highlight); background: var(--sidebar-highlight);
opacity: 1; opacity: 1;
transition: none;
transform: none; transform: none;
animation: pressButton 0.3s;
} }
:global(.sidebar-tab.animate) { .sidebar-tab:active {
animation: pressButton 0.2s;
}
.sidebar-tab:active:not(.active) {
transform: scale(0.95); transform: scale(0.95);
} }
:global([data-reduce-motion="true"]) .sidebar-tab:active:not(.active) { :global([data-reduce-motion="true"]) .sidebar-tab:active {
transform: none; transform: none;
} }
@ -112,10 +103,10 @@
@keyframes pressButton { @keyframes pressButton {
0% { 0% {
transform: scale(0.95); transform: scale(0.9);
} }
50% { 50% {
transform: scale(1.02); transform: scale(1.015);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
@ -127,6 +118,7 @@
opacity: 1; opacity: 1;
background-color: var(--sidebar-hover); background-color: var(--sidebar-hover);
} }
.sidebar-tab:hover:not(.active) { .sidebar-tab:hover:not(.active) {
opacity: 1; opacity: 1;
background-color: var(--sidebar-hover); background-color: var(--sidebar-hover);
@ -136,9 +128,15 @@
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {
.sidebar-tab { .sidebar-tab {
padding: 5px var(--padding); padding: 5px var(--padding);
gap: 3px;
min-width: calc(var(--sidebar-width) / 2); min-width: calc(var(--sidebar-width) / 2);
} }
.sidebar-tab :global(svg) {
height: 22px;
width: 22px;
}
.sidebar-tab.active { .sidebar-tab.active {
z-index: 2; z-index: 2;
} }
@ -149,10 +147,10 @@
@keyframes pressButton { @keyframes pressButton {
0% { 0% {
transform: scale(0.9); transform: scale(0.8);
} }
60% { 50% {
transform: scale(1.015); transform: scale(1.02);
} }
100% { 100% {
transform: scale(1); transform: scale(1);