moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2025-02-18 08:00:23 -05:00
Code Issues Releases Wiki Activity

[ux] finalize roster

Browse Source
This commit is contained in:
karolinaszczur 2013-09-23 20:06:42 +02:00
parent d96d3439d8
commit c2bd4e0637
3 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/_variables.styl
View File

@ -4,8 +4,7 @@ $activeBlue = #00aeef
$actionPink = #ec008c $actionPink = #ec008c
$sidebarBg = #0b1316 $sidebarBg = #0b1316
$sidebarActive = #192a47 $sidebarActive = #1f2d49
$sidebarButton = #1f2d49
$baseText = #565656 $baseText = #565656
$textSecondary = #b7b7b7 $textSecondary = #b7b7b7

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

@ -15,6 +15,7 @@
noselect() noselect()
.main .main
margin-bottom: 10px
li li
list-style-type: none list-style-type: none
margin: 10px 0 5px 0 margin: 10px 0 5px 0
@ -35,15 +36,15 @@
width: 130px width: 130px
.button .button
background: $sidebarButton background: $sidebarActive
&:hover &:hover
background: lighten($sidebarButton, 10%) background: lighten($sidebarActive, 10%)
h1 h1
font-size: $fontSmall font-size: 10px
margin: 0 margin: 0
padding: 10px padding: 20px 10px
color: white color: white
text-transform: uppercase text-transform: uppercase
@ -63,7 +64,7 @@
-moz-transition: all .3s ease-in 0 -moz-transition: all .3s ease-in 0
&:hover &:hover
background: $activeBlue background: $sidebarActive
&.hasUnread .unread &.hasUnread .unread
display: block display: block
@ -86,6 +87,9 @@
.name .name
color: darken($textSecondary, 40%) color: darken($textSecondary, 40%)
.status
color: darken($textSecondary, 65%)
img img
opacity: .25 opacity: .25
@ -153,14 +157,15 @@
.unread .unread
display: none display: none
color: white color: white
padding: 0 5px padding: 2px 5px
roundall(20px) roundall(20px)
position: absolute position: absolute
top: 10px top: 8px
right: 10px right: 10px
font-size: 10px
text-align: center text-align: center
font-weight: bold color: lighten($sidebarActive, 30%)
background: $activeBlue background: $sidebarActive
@keyframes pulsate @keyframes pulsate
0% 0%

22
public/css/otalk.css
View File

@ -263,6 +263,9 @@ td {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
#menu .main {
margin-bottom: 10px;
}
#menu .main li { #menu .main li {
list-style-type: none; list-style-type: none;
margin: 10px 0 5px 0; margin: 10px 0 5px 0;
@ -289,9 +292,9 @@ td {
background: #2b3f65; background: #2b3f65;
} }
#menu h1 { #menu h1 {
font-size: 12px; font-size: 10px;
margin: 0; margin: 0;
padding: 10px; padding: 20px 10px;
color: #fff; color: #fff;
text-transform: uppercase; text-transform: uppercase;
} }
@ -314,7 +317,7 @@ td {
} }
#roster li:hover, #roster li:hover,
#bookmarks li:hover { #bookmarks li:hover {
background: #00aeef; background: #1f2d49;
} }
#roster li.hasUnread .unread, #roster li.hasUnread .unread,
#bookmarks li.hasUnread .unread { #bookmarks li.hasUnread .unread {
@ -344,6 +347,10 @@ td {
#bookmarks li.offline:not(:hover) .name { #bookmarks li.offline:not(:hover) .name {
color: #6e6e6e; color: #6e6e6e;
} }
#roster li.offline:not(:hover) .status,
#bookmarks li.offline:not(:hover) .status {
color: #404040;
}
#roster li.offline:not(:hover) img, #roster li.offline:not(:hover) img,
#bookmarks li.offline:not(:hover) img { #bookmarks li.offline:not(:hover) img {
opacity: 0.25; opacity: 0.25;
@ -442,7 +449,7 @@ td {
#bookmarks li .unread { #bookmarks li .unread {
display: none; display: none;
color: #fff; color: #fff;
padding: 0 5px; padding: 2px 5px;
-moz-border-radius: 20px; -moz-border-radius: 20px;
-webkit-border-radius: 20px; -webkit-border-radius: 20px;
-khtml-border-radius: 20px; -khtml-border-radius: 20px;
@ -450,11 +457,12 @@ td {
-border-radius: 20px; -border-radius: 20px;
border-radius: 20px; border-radius: 20px;
position: absolute; position: absolute;
top: 10px; top: 8px;
right: 10px; right: 10px;
font-size: 10px;
text-align: center; text-align: center;
font-weight: bold; color: #43629e;
background: #00aeef; background: #1f2d49;
} }
@-moz-keyframes pulsate { @-moz-keyframes pulsate {
0% { 0% {