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

19
public/css/otalk.css
View File

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