Use transform to improve smootheness.

Also push bufferlines in.
This commit is contained in:
Tor Hveem 2015-03-20 14:10:03 +01:00
parent 7508405124
commit fbd4853cb6

View file

@ -237,8 +237,8 @@ input[type=text], input[type=password], #sendMessage, .badge {
bottom: 35px; /* input bar */
padding-top: 42px; /* topbar */
padding-bottom: 7px;
-webkit-transition:0.35s ease all;
transition:0.35s ease all;
-webkit-transition:0.2 ease-in-out all;
transition:0.2s ease-in-out all;
}
#bufferlines > table {
margin-top: 35px;
@ -281,8 +281,8 @@ td.time {
bottom: 0;
height: 35px;
width: 100%;
-webkit-transition:0.35s ease all;
transition:0.35s ease all;
-webkit-transition:0.2s ease-in-out all;
transition:0.2s ease-in-out all;
z-index: 1;
}
.content[sidebar-state=visible] .footer {
@ -345,8 +345,8 @@ table.notimestampseconds td.time span.seconds {
}
#sidebar .showquickkeys .buffer .buffer-quick-key {
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
opacity: 0.7;
@ -355,8 +355,8 @@ table.notimestampseconds td.time span.seconds {
margin-left: -0.7em;
margin-right: -0.2em;
font-size: smaller;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
opacity: 0;
text-shadow: -1px 0px 4px rgba(255, 255, 255, 0.4),
0px -1px 4px rgba(255, 255, 255, 0.4),
@ -562,6 +562,7 @@ img.emoji {
bottom: 0px;
top: 0px;
padding-bottom: 35px;
width: 200px;
}
#sidebar.in, #sidebar.collapsing {
@ -571,15 +572,16 @@ img.emoji {
}
#sidebar[data-state=visible] {
width: 200px;
transform: translate(0,0);
}
#sidebar[data-state=hidden] {
left: -200px;
transform: translate(-200px,0);
}
.content[sidebar-state=visible] #bufferlines, .content[sidebar-state=visible] .footer {
margin-left: 0px;
transform: translate(200px,0);
}
#topbar .title {