moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-12-26 09:28:49 -05:00
Code Issues Releases Wiki Activity

[ux] fix animation on composing, status and unread adjustments

Browse Source
This commit is contained in:
karolinaszczur 2013-09-23 14:10:21 +02:00
parent 61bf5a02ff
commit d96d3439d8
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/css/app/roster.styl
View File

@ -51,7 +51,7 @@
#bookmarks
li
list-style-type: none
padding: 7px 10px
padding: 7px 25px 7px 10px
margin: 0px
position: relative
min-height: 15px
@ -89,9 +89,6 @@
img
opacity: .25
.status
color: #777
&.activeContact, &.offline.activeContact
background: white
font-weight: bold
@ -105,16 +102,18 @@
content: ''
position: absolute
top: 50%
right: 10px
right: 15px
height: 8px
width: 8px
margin-top: -4px
roundall(10px)
animation: pulsate 1.5s infinite ease-in
&.composing
&:after
background: #f57900
animation: pulsate 1.5s infinite ease-in
-webkit-animation: pulsate 1.5s infinite ease-in
-moz-animation: pulsate 1.5s infinite ease-in
&.paused
&:after
@ -143,12 +142,13 @@
.status
color: $textSecondary
font-size: $fontSmall-2px
font-size: 10px
line-height: 12px
margin: 0
margin-left: 30px
&:not(:empty)
margin-top: -5px
margin-top: -2px
.unread
display: none
@ -157,7 +157,7 @@
roundall(20px)
position: absolute
top: 10px
right: 15px
right: 10px
text-align: center
font-weight: bold
background: $activeBlue

19
public/css/otalk.css
View File

@ -298,7 +298,7 @@ td {
#roster li,
#bookmarks li {
list-style-type: none;
padding: 7px 10px;
padding: 7px 25px 7px 10px;
margin: 0px;
position: relative;
min-height: 15px;
@ -348,10 +348,6 @@ td {
#bookmarks li.offline:not(:hover) img {
opacity: 0.25;
}
#roster li.offline:not(:hover) .status,
#bookmarks li.offline:not(:hover) .status {
color: #777;
}
#roster li.activeContact,
#bookmarks li.activeContact,
#roster li.offline.activeContact,
@ -372,7 +368,7 @@ td {
content: '';
position: absolute;
top: 50%;
right: 10px;
right: 15px;
height: 8px;
width: 8px;
margin-top: -4px;
@ -382,11 +378,13 @@ td {
-o-border-radius: 10px;
-border-radius: 10px;
border-radius: 10px;
animation: pulsate 1.5s infinite ease-in;
}
#roster li.composing:after,
#bookmarks li.composing:after {
background: #f57900;
animation: pulsate 1.5s infinite ease-in;
-webkit-animation: pulsate 1.5s infinite ease-in;
-moz-animation: pulsate 1.5s infinite ease-in;
}
#roster li.paused:after,
#bookmarks li.paused:after {
@ -431,13 +429,14 @@ td {
#roster li .status,
#bookmarks li .status {
color: #b7b7b7;
font-size: $fontSmall-2px;
font-size: 10px;
line-height: 12px;
margin: 0;
margin-left: 30px;
}
#roster li .status:not(:empty),
#bookmarks li .status:not(:empty) {
margin-top: -5px;
margin-top: -2px;
}
#roster li .unread,
#bookmarks li .unread {
@ -452,7 +451,7 @@ td {
border-radius: 20px;
position: absolute;
top: 10px;
right: 15px;
right: 10px;
text-align: center;
font-weight: bold;
background: #00aeef;