Merge pull request #560 from glowing-bear/improve-animation
Use transform to improve smootheness.
This commit is contained in:
commit
892563fb39
1 changed files with 12 additions and 10 deletions
|
@ -237,8 +237,8 @@ input[type=text], input[type=password], #sendMessage, .badge {
|
||||||
bottom: 35px; /* input bar */
|
bottom: 35px; /* input bar */
|
||||||
padding-top: 42px; /* topbar */
|
padding-top: 42px; /* topbar */
|
||||||
padding-bottom: 7px;
|
padding-bottom: 7px;
|
||||||
-webkit-transition:0.35s ease all;
|
-webkit-transition:0.2 ease-in-out all;
|
||||||
transition:0.35s ease all;
|
transition:0.2s ease-in-out all;
|
||||||
}
|
}
|
||||||
#bufferlines > table {
|
#bufferlines > table {
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
|
@ -281,8 +281,8 @@ td.time {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-transition:0.35s ease all;
|
-webkit-transition:0.2s ease-in-out all;
|
||||||
transition:0.35s ease all;
|
transition:0.2s ease-in-out all;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.content[sidebar-state=visible] .footer {
|
.content[sidebar-state=visible] .footer {
|
||||||
|
@ -345,8 +345,8 @@ table.notimestampseconds td.time span.seconds {
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar .showquickkeys .buffer .buffer-quick-key {
|
#sidebar .showquickkeys .buffer .buffer-quick-key {
|
||||||
transition: all ease 0.5s;
|
transition: all ease-in-out 0.5s;
|
||||||
-webkit-transition: all ease 0.5s;
|
-webkit-transition: all ease-in-out 0.5s;
|
||||||
transition-delay: 0.2s;
|
transition-delay: 0.2s;
|
||||||
-webkit-transition-delay: 0.2s;
|
-webkit-transition-delay: 0.2s;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
@ -355,8 +355,8 @@ table.notimestampseconds td.time span.seconds {
|
||||||
margin-left: -0.7em;
|
margin-left: -0.7em;
|
||||||
margin-right: -0.2em;
|
margin-right: -0.2em;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
transition: all ease 0.5s;
|
transition: all ease-in-out 0.5s;
|
||||||
-webkit-transition: all ease 0.5s;
|
-webkit-transition: all ease-in-out 0.5s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
text-shadow: -1px 0px 4px rgba(255, 255, 255, 0.4),
|
text-shadow: -1px 0px 4px rgba(255, 255, 255, 0.4),
|
||||||
0px -1px 4px rgba(255, 255, 255, 0.4),
|
0px -1px 4px rgba(255, 255, 255, 0.4),
|
||||||
|
@ -562,6 +562,7 @@ img.emoji {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
padding-bottom: 35px;
|
padding-bottom: 35px;
|
||||||
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar.in, #sidebar.collapsing {
|
#sidebar.in, #sidebar.collapsing {
|
||||||
|
@ -571,15 +572,16 @@ img.emoji {
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar[data-state=visible] {
|
#sidebar[data-state=visible] {
|
||||||
width: 200px;
|
transform: translate(0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar[data-state=hidden] {
|
#sidebar[data-state=hidden] {
|
||||||
left: -200px;
|
transform: translate(-200px,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
|
.content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
|
transform: translate(200px,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#topbar .title {
|
#topbar .title {
|
||||||
|
|
Loading…
Reference in a new issue