mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-12-24 08:28:56 -05:00
[ux] finalize roster
This commit is contained in:
parent
d96d3439d8
commit
c2bd4e0637
@ -4,8 +4,7 @@ $activeBlue = #00aeef
|
||||
$actionPink = #ec008c
|
||||
|
||||
$sidebarBg = #0b1316
|
||||
$sidebarActive = #192a47
|
||||
$sidebarButton = #1f2d49
|
||||
$sidebarActive = #1f2d49
|
||||
|
||||
$baseText = #565656
|
||||
$textSecondary = #b7b7b7
|
||||
|
@ -15,6 +15,7 @@
|
||||
noselect()
|
||||
|
||||
.main
|
||||
margin-bottom: 10px
|
||||
li
|
||||
list-style-type: none
|
||||
margin: 10px 0 5px 0
|
||||
@ -35,15 +36,15 @@
|
||||
width: 130px
|
||||
|
||||
.button
|
||||
background: $sidebarButton
|
||||
background: $sidebarActive
|
||||
|
||||
&:hover
|
||||
background: lighten($sidebarButton, 10%)
|
||||
background: lighten($sidebarActive, 10%)
|
||||
|
||||
h1
|
||||
font-size: $fontSmall
|
||||
font-size: 10px
|
||||
margin: 0
|
||||
padding: 10px
|
||||
padding: 20px 10px
|
||||
color: white
|
||||
text-transform: uppercase
|
||||
|
||||
@ -63,7 +64,7 @@
|
||||
-moz-transition: all .3s ease-in 0
|
||||
|
||||
&:hover
|
||||
background: $activeBlue
|
||||
background: $sidebarActive
|
||||
|
||||
&.hasUnread .unread
|
||||
display: block
|
||||
@ -86,6 +87,9 @@
|
||||
.name
|
||||
color: darken($textSecondary, 40%)
|
||||
|
||||
.status
|
||||
color: darken($textSecondary, 65%)
|
||||
|
||||
img
|
||||
opacity: .25
|
||||
|
||||
@ -153,14 +157,15 @@
|
||||
.unread
|
||||
display: none
|
||||
color: white
|
||||
padding: 0 5px
|
||||
padding: 2px 5px
|
||||
roundall(20px)
|
||||
position: absolute
|
||||
top: 10px
|
||||
top: 8px
|
||||
right: 10px
|
||||
font-size: 10px
|
||||
text-align: center
|
||||
font-weight: bold
|
||||
background: $activeBlue
|
||||
color: lighten($sidebarActive, 30%)
|
||||
background: $sidebarActive
|
||||
|
||||
@keyframes pulsate
|
||||
0%
|
||||
|
@ -263,6 +263,9 @@ td {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
#menu .main {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#menu .main li {
|
||||
list-style-type: none;
|
||||
margin: 10px 0 5px 0;
|
||||
@ -289,9 +292,9 @@ td {
|
||||
background: #2b3f65;
|
||||
}
|
||||
#menu h1 {
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
padding: 20px 10px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -314,7 +317,7 @@ td {
|
||||
}
|
||||
#roster li:hover,
|
||||
#bookmarks li:hover {
|
||||
background: #00aeef;
|
||||
background: #1f2d49;
|
||||
}
|
||||
#roster li.hasUnread .unread,
|
||||
#bookmarks li.hasUnread .unread {
|
||||
@ -344,6 +347,10 @@ td {
|
||||
#bookmarks li.offline:not(:hover) .name {
|
||||
color: #6e6e6e;
|
||||
}
|
||||
#roster li.offline:not(:hover) .status,
|
||||
#bookmarks li.offline:not(:hover) .status {
|
||||
color: #404040;
|
||||
}
|
||||
#roster li.offline:not(:hover) img,
|
||||
#bookmarks li.offline:not(:hover) img {
|
||||
opacity: 0.25;
|
||||
@ -442,7 +449,7 @@ td {
|
||||
#bookmarks li .unread {
|
||||
display: none;
|
||||
color: #fff;
|
||||
padding: 0 5px;
|
||||
padding: 2px 5px;
|
||||
-moz-border-radius: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
-khtml-border-radius: 20px;
|
||||
@ -450,11 +457,12 @@ td {
|
||||
-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: #00aeef;
|
||||
color: #43629e;
|
||||
background: #1f2d49;
|
||||
}
|
||||
@-moz-keyframes pulsate {
|
||||
0% {
|
||||
|
Loading…
Reference in New Issue
Block a user