mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-11-26 03:02:25 -05:00
[ux] improve colors on roster list
This commit is contained in:
karolinaszczur
parent
33a08318ea
commit
1721cf593f
@ -30,7 +30,7 @@
|
||||
fill: white
|
||||
|
||||
&:hover
|
||||
background: lighten($sidebarBg, 10%)
|
||||
background: $activeBlue
|
||||
|
||||
a
|
||||
display: block
|
||||
@ -44,23 +44,26 @@
|
||||
|
||||
|
||||
h1
|
||||
font-size: $fontMedium
|
||||
font-size: $fontSmall
|
||||
margin: 0
|
||||
padding: 5px 10px
|
||||
color: lighten($sidebarActive, 50%)
|
||||
background: $sidebarActive
|
||||
padding: 5px 15px
|
||||
color: white
|
||||
text-transform: uppercase
|
||||
|
||||
#roster,
|
||||
#bookmarks
|
||||
li
|
||||
list-style-type: none
|
||||
padding: 8px 10px
|
||||
padding: 7px 10px
|
||||
margin: 0px
|
||||
position: relative
|
||||
min-height: 15px
|
||||
font-size: $fontSmall
|
||||
color: #fff
|
||||
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)
|
||||
background: lighten($sidebarBg, 5%)
|
||||
@ -73,18 +76,21 @@
|
||||
|
||||
&.online,
|
||||
&.chat
|
||||
border-left: 4px solid #427a00
|
||||
border-left: 3px solid #427a00
|
||||
|
||||
&.dnd
|
||||
border-left: 4px solid #c50041
|
||||
border-left: 3px solid #c50041
|
||||
|
||||
&.away,
|
||||
&.xa
|
||||
border-left: 4px solid #f57900
|
||||
border-left: 3px solid #f57900
|
||||
|
||||
&.offline
|
||||
border-left: none
|
||||
color: #aaa
|
||||
|
||||
&.offline:not(:hover)
|
||||
.name
|
||||
color: $textSecondary
|
||||
|
||||
img
|
||||
opacity: .25
|
||||
@ -92,11 +98,13 @@
|
||||
.status
|
||||
color: #777
|
||||
|
||||
&.activeContact
|
||||
&.activeContact, &.offline.activeContact
|
||||
background: white
|
||||
color: $activeBlue
|
||||
font-weight: bold
|
||||
|
||||
.name
|
||||
color: $baseText
|
||||
|
||||
&.composing
|
||||
border-right: 4px solid orange
|
||||
|
||||
@ -121,6 +129,7 @@
|
||||
.name
|
||||
margin-left: 30px
|
||||
line-height: 20px
|
||||
color: white
|
||||
|
||||
.status
|
||||
color: #ccc
|
||||
|
||||
@ -280,7 +280,7 @@ td {
|
||||
fill: #fff;
|
||||
}
|
||||
#menu .main li:hover {
|
||||
background: #1b2e36;
|
||||
background: #00aeef;
|
||||
}
|
||||
#menu .main li a {
|
||||
display: block;
|
||||
@ -293,22 +293,28 @@ td {
|
||||
line-height: 35px;
|
||||
}
|
||||
#menu h1 {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
color: #668bc9;
|
||||
background: #192a47;
|
||||
padding: 5px 15px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#roster li,
|
||||
#bookmarks li {
|
||||
list-style-type: none;
|
||||
padding: 8px 10px;
|
||||
padding: 7px 10px;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
min-height: 15px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
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),
|
||||
#bookmarks li:nth-child(2n) {
|
||||
@ -326,37 +332,47 @@ td {
|
||||
#bookmarks li.online,
|
||||
#roster li.chat,
|
||||
#bookmarks li.chat {
|
||||
border-left: 4px solid #427a00;
|
||||
border-left: 3px solid #427a00;
|
||||
}
|
||||
#roster li.dnd,
|
||||
#bookmarks li.dnd {
|
||||
border-left: 4px solid #c50041;
|
||||
border-left: 3px solid #c50041;
|
||||
}
|
||||
#roster li.away,
|
||||
#bookmarks li.away,
|
||||
#roster li.xa,
|
||||
#bookmarks li.xa {
|
||||
border-left: 4px solid #f57900;
|
||||
border-left: 3px solid #f57900;
|
||||
}
|
||||
#roster li.offline,
|
||||
#bookmarks li.offline {
|
||||
border-left: none;
|
||||
color: #aaa;
|
||||
}
|
||||
#roster li.offline img,
|
||||
#bookmarks li.offline img {
|
||||
#roster li.offline:not(:hover) .name,
|
||||
#bookmarks li.offline:not(:hover) .name {
|
||||
color: #b7b7b7;
|
||||
}
|
||||
#roster li.offline:not(:hover) img,
|
||||
#bookmarks li.offline:not(:hover) img {
|
||||
opacity: 0.25;
|
||||
}
|
||||
#roster li.offline .status,
|
||||
#bookmarks li.offline .status {
|
||||
#roster li.offline:not(:hover) .status,
|
||||
#bookmarks li.offline:not(:hover) .status {
|
||||
color: #777;
|
||||
}
|
||||
#roster li.activeContact,
|
||||
#bookmarks li.activeContact {
|
||||
#bookmarks li.activeContact,
|
||||
#roster li.offline.activeContact,
|
||||
#bookmarks li.offline.activeContact {
|
||||
background: #fff;
|
||||
color: #00aeef;
|
||||
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,
|
||||
#bookmarks li.composing {
|
||||
border-right: 4px solid #ffa500;
|
||||
@ -396,6 +412,7 @@ td {
|
||||
#bookmarks li .name {
|
||||
margin-left: 30px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
#roster li .status,
|
||||
#bookmarks li .status {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user