mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-11-22 17:22:22 -05:00
[ux] header styling and active for sidebar
This commit is contained in:
parent
23c558e4ee
commit
f18cf3c0cb
@ -18,20 +18,19 @@
|
|||||||
|
|
||||||
header
|
header
|
||||||
padding: 5px
|
padding: 5px
|
||||||
border-bottom: 1px solid #aaa
|
border-bottom: 2px solid $grayOutline
|
||||||
position: fixed
|
position: fixed
|
||||||
right: 0px
|
right: 0px
|
||||||
left: 181px
|
left: 181px
|
||||||
z-index: 10
|
z-index: 10
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
borderbox()
|
borderbox()
|
||||||
|
background: $grayBackground
|
||||||
color: #222
|
color: #222
|
||||||
font-weight: normal
|
|
||||||
font-size: 11px
|
|
||||||
|
|
||||||
.avatar
|
.avatar
|
||||||
margin-right: 5px
|
margin-right: 5px
|
||||||
roundall: 5px
|
roundall(3px)
|
||||||
width: 30px
|
width: 30px
|
||||||
height: 30px
|
height: 30px
|
||||||
position: absolute
|
position: absolute
|
||||||
|
@ -82,8 +82,8 @@
|
|||||||
color: #777
|
color: #777
|
||||||
|
|
||||||
&.activeContact
|
&.activeContact
|
||||||
border-top: 1px solid #8de0ff
|
background: $activeBlue
|
||||||
border-bottom: 1px solid #004a65
|
color: white
|
||||||
|
|
||||||
&.composing
|
&.composing
|
||||||
border-right: 4px solid orange
|
border-right: 4px solid orange
|
||||||
@ -102,13 +102,13 @@
|
|||||||
top: 5px
|
top: 5px
|
||||||
width: 30px
|
width: 30px
|
||||||
height: 30px
|
height: 30px
|
||||||
roundall: 5px
|
roundall(3px)
|
||||||
noselect()
|
noselect()
|
||||||
|
|
||||||
.name
|
.name
|
||||||
margin: 0px
|
|
||||||
margin-left: 40px
|
margin-left: 40px
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
|
line-height: 20px
|
||||||
|
|
||||||
.status
|
.status
|
||||||
color: #ccc
|
color: #ccc
|
||||||
|
@ -340,8 +340,8 @@ td {
|
|||||||
}
|
}
|
||||||
#roster li.activeContact,
|
#roster li.activeContact,
|
||||||
#bookmarks li.activeContact {
|
#bookmarks li.activeContact {
|
||||||
border-top: 1px solid #8de0ff;
|
background: #00aeef;
|
||||||
border-bottom: 1px solid #004a65;
|
color: #fff;
|
||||||
}
|
}
|
||||||
#roster li.composing,
|
#roster li.composing,
|
||||||
#bookmarks li.composing {
|
#bookmarks li.composing {
|
||||||
@ -364,12 +364,12 @@ td {
|
|||||||
top: 5px;
|
top: 5px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 3px;
|
||||||
-webkit-border-radius: 5px;
|
-webkit-border-radius: 3px;
|
||||||
-khtml-border-radius: 5px;
|
-khtml-border-radius: 3px;
|
||||||
-o-border-radius: 5px;
|
-o-border-radius: 3px;
|
||||||
-border-radius: 5px;
|
-border-radius: 3px;
|
||||||
border-radius: 5px;
|
border-radius: 3px;
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
@ -379,9 +379,9 @@ td {
|
|||||||
}
|
}
|
||||||
#roster li .name,
|
#roster li .name,
|
||||||
#bookmarks li .name {
|
#bookmarks li .name {
|
||||||
margin: 0px;
|
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
#roster li .status,
|
#roster li .status,
|
||||||
#bookmarks li .status {
|
#bookmarks li .status {
|
||||||
@ -433,7 +433,7 @@ td {
|
|||||||
}
|
}
|
||||||
.conversation header {
|
.conversation header {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-bottom: 1px solid #aaa;
|
border-bottom: 2px solid #e4e4e4;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
left: 181px;
|
left: 181px;
|
||||||
@ -442,18 +442,17 @@ td {
|
|||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background: #f7f7f7;
|
||||||
color: #222;
|
color: #222;
|
||||||
font-weight: normal;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
}
|
||||||
.conversation header .avatar {
|
.conversation header .avatar {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 3px;
|
||||||
-webkit-border-radius: 5px;
|
-webkit-border-radius: 3px;
|
||||||
-khtml-border-radius: 5px;
|
-khtml-border-radius: 3px;
|
||||||
-o-border-radius: 5px;
|
-o-border-radius: 3px;
|
||||||
-border-radius: 5px;
|
-border-radius: 3px;
|
||||||
border-radius: 5px;
|
border-radius: 3px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
Loading…
Reference in New Issue
Block a user