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

[ux] improve colors on roster list

Browse Source
This commit is contained in:
karolinaszczur 2013-09-21 18:16:53 +02:00
parent 33a08318ea
commit 1721cf593f
2 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,7 @@
fill: white fill: white
&:hover &:hover
background: lighten($sidebarBg, 10%) background: $activeBlue
a a
display: block display: block
@ -44,23 +44,26 @@
h1 h1
font-size: $fontMedium font-size: $fontSmall
margin: 0 margin: 0
padding: 5px 10px padding: 5px 15px
color: lighten($sidebarActive, 50%) color: white
background: $sidebarActive text-transform: uppercase
#roster, #roster,
#bookmarks #bookmarks
li li
list-style-type: none list-style-type: none
padding: 8px 10px padding: 7px 10px
margin: 0px margin: 0px
position: relative position: relative
min-height: 15px min-height: 15px
font-size: $fontSmall font-size: $fontSmall
color: #fff color: #fff
cursor: pointer cursor: pointer
transition: all .3s ease-in 0
-webkit-transition: all .3s ease-in 0
-moz-transition: all .3s ease-in 0
&:nth-child(2n) &:nth-child(2n)
background: lighten($sidebarBg, 5%) background: lighten($sidebarBg, 5%)
@ -73,18 +76,21 @@
&.online, &.online,
&.chat &.chat
border-left: 4px solid #427a00 border-left: 3px solid #427a00
&.dnd &.dnd
border-left: 4px solid #c50041 border-left: 3px solid #c50041
&.away, &.away,
&.xa &.xa
border-left: 4px solid #f57900 border-left: 3px solid #f57900
&.offline &.offline
border-left: none border-left: none
color: #aaa
&.offline:not(:hover)
.name
color: $textSecondary
img img
opacity: .25 opacity: .25
@ -92,11 +98,13 @@
.status .status
color: #777 color: #777
&.activeContact &.activeContact, &.offline.activeContact
background: white background: white
color: $activeBlue
font-weight: bold font-weight: bold
.name
color: $baseText
&.composing &.composing
border-right: 4px solid orange border-right: 4px solid orange
@ -121,6 +129,7 @@
.name .name
margin-left: 30px margin-left: 30px
line-height: 20px line-height: 20px
color: white
.status .status
color: #ccc color: #ccc

49
public/css/otalk.css
View File

@ -280,7 +280,7 @@ td {
fill: #fff; fill: #fff;
} }
#menu .main li:hover { #menu .main li:hover {
background: #1b2e36; background: #00aeef;
} }
#menu .main li a { #menu .main li a {
display: block; display: block;
@ -293,22 +293,28 @@ td {
line-height: 35px; line-height: 35px;
} }
#menu h1 { #menu h1 {
font-size: 14px; font-size: 12px;
margin: 0; margin: 0;
padding: 5px 10px; padding: 5px 15px;
color: #668bc9; color: #fff;
background: #192a47; text-transform: uppercase;
} }
#roster li, #roster li,
#bookmarks li { #bookmarks li {
list-style-type: none; list-style-type: none;
padding: 8px 10px; padding: 7px 10px;
margin: 0px; margin: 0px;
position: relative; position: relative;
min-height: 15px; min-height: 15px;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
-webkit-transition: all 0.3s ease-in 0;
-o-transition: all 0.3s ease-in 0;
transition: all 0.3s ease-in 0;
-moz-transition: all 0.3s ease-in 0;
-webkit-transition: all 0.3s ease-in 0;
-moz-transition: all 0.3s ease-in 0;
} }
#roster li:nth-child(2n), #roster li:nth-child(2n),
#bookmarks li:nth-child(2n) { #bookmarks li:nth-child(2n) {
@ -326,37 +332,47 @@ td {
#bookmarks li.online, #bookmarks li.online,
#roster li.chat, #roster li.chat,
#bookmarks li.chat { #bookmarks li.chat {
border-left: 4px solid #427a00; border-left: 3px solid #427a00;
} }
#roster li.dnd, #roster li.dnd,
#bookmarks li.dnd { #bookmarks li.dnd {
border-left: 4px solid #c50041; border-left: 3px solid #c50041;
} }
#roster li.away, #roster li.away,
#bookmarks li.away, #bookmarks li.away,
#roster li.xa, #roster li.xa,
#bookmarks li.xa { #bookmarks li.xa {
border-left: 4px solid #f57900; border-left: 3px solid #f57900;
} }
#roster li.offline, #roster li.offline,
#bookmarks li.offline { #bookmarks li.offline {
border-left: none; border-left: none;
color: #aaa;
} }
#roster li.offline img, #roster li.offline:not(:hover) .name,
#bookmarks li.offline img { #bookmarks li.offline:not(:hover) .name {
color: #b7b7b7;
}
#roster li.offline:not(:hover) img,
#bookmarks li.offline:not(:hover) img {
opacity: 0.25; opacity: 0.25;
} }
#roster li.offline .status, #roster li.offline:not(:hover) .status,
#bookmarks li.offline .status { #bookmarks li.offline:not(:hover) .status {
color: #777; color: #777;
} }
#roster li.activeContact, #roster li.activeContact,
#bookmarks li.activeContact { #bookmarks li.activeContact,
#roster li.offline.activeContact,
#bookmarks li.offline.activeContact {
background: #fff; background: #fff;
color: #00aeef;
font-weight: bold; font-weight: bold;
} }
#roster li.activeContact .name,
#bookmarks li.activeContact .name,
#roster li.offline.activeContact .name,
#bookmarks li.offline.activeContact .name {
color: #565656;
}
#roster li.composing, #roster li.composing,
#bookmarks li.composing { #bookmarks li.composing {
border-right: 4px solid #ffa500; border-right: 4px solid #ffa500;
@ -396,6 +412,7 @@ td {
#bookmarks li .name { #bookmarks li .name {
margin-left: 30px; margin-left: 30px;
line-height: 20px; line-height: 20px;
color: #fff;
} }
#roster li .status, #roster li .status,
#bookmarks li .status { #bookmarks li .status {