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

[ux] enlarge avatars and place unread count in the avatar. #2

Browse Source
This commit is contained in:
karolinaszczur 2013-09-25 09:18:37 +02:00
parent b32385391e
commit 5871a0f0f1
4 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/css/_mixins.styl
View File

@ -87,17 +87,11 @@ borderbox()
// avatars // avatars
avatarLarge() avatar()
width: 30px width: 30px
height: 30px height: 30px
roundall(50px) roundall(50px)
avatarSmall()
width: 20px
height: 20px
roundall(30px)
// this if for the content flash and hardware acceleration bugs in webkit // this if for the content flash and hardware acceleration bugs in webkit
webkit-transition-fix() webkit-transition-fix()
-webkit-backface-visibility: hidden -webkit-backface-visibility: hidden

2
public/css/app/chat.styl
View File

@ -28,7 +28,7 @@
.avatar .avatar
margin-right: 5px margin-right: 5px
avatarLarge() avatar()
position: absolute position: absolute
top: 11px top: 11px
left: 11px left: 11px

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

@ -52,10 +52,10 @@
#bookmarks #bookmarks
li li
list-style-type: none list-style-type: none
padding: 7px 25px 7px 10px padding: 7px 35px 7px 10px
margin: 0px margin: 0px
position: relative position: relative
min-height: 15px min-height: 30px
font-size: $fontSmall font-size: $fontSmall
color: #fff color: #fff
cursor: pointer cursor: pointer
@ -66,8 +66,8 @@
&:hover &:hover
background: $sidebarActive background: $sidebarActive
&.hasUnread .unread &.hasUnread .unread
display: block display: block
&.online, &.chat, &.dnd, &.away, &.xa &.online, &.chat, &.dnd, &.away, &.xa
@ -128,16 +128,16 @@
.avatar .avatar
vertical-align: top vertical-align: top
margin-right: 5px margin-right: 5px
margin-top: -10px margin-top: -15px
position: absolute position: absolute
left: 10px left: 10px
top: 50% top: 50%
avatarSmall() avatar()
noselect() noselect()
.name .name
margin-left: 30px margin-left: 40px
line-height: 20px line-height: 30px
color: white color: white
text-overflow: ellipsis text-overflow: ellipsis
overflow: hidden overflow: hidden
@ -156,15 +156,17 @@
.unread .unread
display: none display: none
color: white color: white
padding: 2px 5px height: 22px
roundall(20px) width: 30px
padding-top: 8px
roundall(30px)
position: absolute position: absolute
top: 8px top: 7px
right: 10px left: 10px
font-size: 10px font-size: 10px
font-weight: bold
text-align: center text-align: center
color: lighten($sidebarActive, 30%) background: rgba(0, 174, 239, .8)
background: $sidebarActive
@keyframes pulsate @keyframes pulsate
0% 0%

54
public/css/otalk.css
View File

@ -365,10 +365,10 @@ h4 {
#roster li, #roster li,
#bookmarks li { #bookmarks li {
list-style-type: none; list-style-type: none;
padding: 7px 25px 7px 10px; padding: 7px 35px 7px 10px;
margin: 0px; margin: 0px;
position: relative; position: relative;
min-height: 15px; min-height: 30px;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
@ -383,8 +383,8 @@ h4 {
#bookmarks li:hover { #bookmarks li:hover {
background: #1f2d49; background: #1f2d49;
} }
#roster li.hasUnread .unread, #roster li:hover.hasUnread .unread,
#bookmarks li.hasUnread .unread { #bookmarks li:hover.hasUnread .unread {
display: block; display: block;
} }
#roster li.online:after, #roster li.online:after,
@ -470,18 +470,18 @@ h4 {
#bookmarks li .avatar { #bookmarks li .avatar {
vertical-align: top; vertical-align: top;
margin-right: 5px; margin-right: 5px;
margin-top: -10px; margin-top: -15px;
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 50%; top: 50%;
width: 20px; width: 30px;
height: 20px; height: 30px;
-moz-border-radius: 30px; -moz-border-radius: 50px;
-webkit-border-radius: 30px; -webkit-border-radius: 50px;
-khtml-border-radius: 30px; -khtml-border-radius: 50px;
-o-border-radius: 30px; -o-border-radius: 50px;
-border-radius: 30px; -border-radius: 50px;
border-radius: 30px; border-radius: 50px;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -491,8 +491,8 @@ h4 {
} }
#roster li .name, #roster li .name,
#bookmarks li .name { #bookmarks li .name {
margin-left: 30px; margin-left: 40px;
line-height: 20px; line-height: 30px;
color: #fff; color: #fff;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -514,20 +514,22 @@ h4 {
#bookmarks li .unread { #bookmarks li .unread {
display: none; display: none;
color: #fff; color: #fff;
padding: 2px 5px; height: 22px;
-moz-border-radius: 20px; width: 30px;
-webkit-border-radius: 20px; padding-top: 8px;
-khtml-border-radius: 20px; -moz-border-radius: 30px;
-o-border-radius: 20px; -webkit-border-radius: 30px;
-border-radius: 20px; -khtml-border-radius: 30px;
border-radius: 20px; -o-border-radius: 30px;
-border-radius: 30px;
border-radius: 30px;
position: absolute; position: absolute;
top: 8px; top: 7px;
right: 10px; left: 10px;
font-size: 10px; font-size: 10px;
font-weight: bold;
text-align: center; text-align: center;
color: #43629e; background: rgba(0,174,239,0.8);
background: #1f2d49;
} }
@-moz-keyframes pulsate { @-moz-keyframes pulsate {
0% { 0% {