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

[ux] started on pulsating dot on composing

Browse Source
This commit is contained in:
karolinaszczur 2013-09-23 13:47:39 +02:00
parent a697590124
commit 61bf5a02ff
2 changed files with 120 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,7 @@
a a
position: relative position: relative
width: 120px width: 130px
.button .button
background: $sidebarButton background: $sidebarButton
@ -43,7 +43,7 @@
h1 h1
font-size: $fontSmall font-size: $fontSmall
margin: 0 margin: 0
padding: 20px 15px 10px 15px padding: 10px
color: white color: white
text-transform: uppercase text-transform: uppercase
@ -62,9 +62,6 @@
-webkit-transition: all .3s ease-in 0 -webkit-transition: all .3s ease-in 0
-moz-transition: all .3s ease-in 0 -moz-transition: all .3s ease-in 0
&:nth-child(2n)
background: lighten($sidebarBg, 4%)
&:hover &:hover
background: $activeBlue background: $activeBlue
@ -87,7 +84,7 @@
&.offline:not(:hover) &.offline:not(:hover)
.name .name
color: $textSecondary color: darken($textSecondary, 40%)
img img
opacity: .25 opacity: .25
@ -102,11 +99,26 @@
.name .name
color: $baseText color: $baseText
&.composing, &.paused
&:after
content: ''
position: absolute
top: 50%
right: 10px
height: 8px
width: 8px
margin-top: -4px
roundall(10px)
animation: pulsate 1.5s infinite ease-in
&.composing &.composing
border-right: 4px solid orange &:after
background: #f57900
&.paused &.paused
border-right: 4px solid #666 &:after
background: $textSecondary
img img
opacity: 1 opacity: 1
@ -150,3 +162,10 @@
font-weight: bold font-weight: bold
background: $activeBlue background: $activeBlue
@keyframes pulsate
0%
opacity: 1.0
50%
opacity: 0.5
100%
opacity: 1.0

106
public/css/otalk.css
View File

@ -280,7 +280,7 @@ td {
} }
#menu .main li a { #menu .main li a {
position: relative; position: relative;
width: 120px; width: 130px;
} }
#menu .main li .button { #menu .main li .button {
background: #1f2d49; background: #1f2d49;
@ -291,7 +291,7 @@ td {
#menu h1 { #menu h1 {
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
padding: 20px 15px 10px 15px; padding: 10px;
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
} }
@ -312,10 +312,6 @@ td {
-webkit-transition: all 0.3s ease-in 0; -webkit-transition: all 0.3s ease-in 0;
-moz-transition: all 0.3s ease-in 0; -moz-transition: all 0.3s ease-in 0;
} }
#roster li:nth-child(2n),
#bookmarks li:nth-child(2n) {
background: #111e23;
}
#roster li:hover, #roster li:hover,
#bookmarks li:hover { #bookmarks li:hover {
background: #00aeef; background: #00aeef;
@ -346,7 +342,7 @@ td {
} }
#roster li.offline:not(:hover) .name, #roster li.offline:not(:hover) .name,
#bookmarks li.offline:not(:hover) .name { #bookmarks li.offline:not(:hover) .name {
color: #b7b7b7; color: #6e6e6e;
} }
#roster li.offline:not(:hover) img, #roster li.offline:not(:hover) img,
#bookmarks li.offline:not(:hover) img { #bookmarks li.offline:not(:hover) img {
@ -369,13 +365,32 @@ td {
#bookmarks li.offline.activeContact .name { #bookmarks li.offline.activeContact .name {
color: #565656; color: #565656;
} }
#roster li.composing, #roster li.composing:after,
#bookmarks li.composing { #bookmarks li.composing:after,
border-right: 4px solid #ffa500; #roster li.paused:after,
#bookmarks li.paused:after {
content: '';
position: absolute;
top: 50%;
right: 10px;
height: 8px;
width: 8px;
margin-top: -4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-o-border-radius: 10px;
-border-radius: 10px;
border-radius: 10px;
animation: pulsate 1.5s infinite ease-in;
} }
#roster li.paused, #roster li.composing:after,
#bookmarks li.paused { #bookmarks li.composing:after {
border-right: 4px solid #666; background: #f57900;
}
#roster li.paused:after,
#bookmarks li.paused:after {
background: #b7b7b7;
} }
#roster li img, #roster li img,
#bookmarks li img { #bookmarks li img {
@ -442,6 +457,71 @@ td {
font-weight: bold; font-weight: bold;
background: #00aeef; background: #00aeef;
} }
@-moz-keyframes pulsate {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes pulsate {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-o-keyframes pulsate {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@-ms-keyframes pulsate {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes pulsate {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.page.chat { .page.chat {
padding-top: 0px; padding-top: 0px;
height: 100%; height: 100%;