Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

RegularToot: remove top and bottom margin
All checks were successful
/ depoly (push) Successful in 1m18s
Details

Browse source 
* TootActionGroup: improved animation
This commit is contained in:
thislight 2025-01-02 22:59:09 +08:00
parent 1c8a3f0bbb
commit 0c7cb920f5
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
2 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/timelines/RegularToot.css
View file

@ -9,8 +9,6 @@
transition: transition:
margin-top 60ms var(--tutu-anim-curve-sharp),
margin-bottom 60ms var(--tutu-anim-curve-sharp),
height 60ms var(--tutu-anim-curve-sharp), height 60ms var(--tutu-anim-curve-sharp),
var(--tutu-transition-shadow); var(--tutu-transition-shadow);
border-radius: 0; border-radius: 0;
@ -36,7 +34,7 @@
} }
&.expanded { &.expanded {
margin-block: 20px; z-index: calc(var(--tutu-zidx-nav) - 1);
box-shadow: var(--tutu-shadow-e9); box-shadow: var(--tutu-shadow-e9);
} }

12
src/timelines/toots/TootActionGroup.css
View file

@ -2,7 +2,7 @@
padding-block: calc((var(--card-gut) - 10px) / 2); padding-block: calc((var(--card-gut) - 10px) / 2);
contain: layout style; contain: layout style;
animation: 225ms var(--tutu-anim-curve-std) TootActionGroup_fade-in; animation: 125ms var(--tutu-anim-curve-std) TootActionGroup_fade-in;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-evenly; justify-content: space-evenly;
@ -32,10 +32,18 @@
@keyframes TootActionGroup_fade-in { @keyframes TootActionGroup_fade-in {
0% { 0% {
opacity: 0; opacity: 0.5;
transform: translateY(-10px);
margin-bottom: -20px;
}
25% {
margin-bottom: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0);
} }
} }