156 lines
2.5 KiB
Stylus
156 lines
2.5 KiB
Stylus
@import '../_variables'
|
|
@import '../_mixins'
|
|
|
|
.page.chat
|
|
padding-top: 0px
|
|
height: 100%
|
|
borderbox()
|
|
|
|
.conversation
|
|
position: relative
|
|
bottom: 0px
|
|
left: 0px
|
|
right: 0px
|
|
padding: 0px
|
|
height: 100%
|
|
width: 100%
|
|
borderbox()
|
|
|
|
header
|
|
padding: 5px
|
|
gradient: #e1e4e6 #cacdce
|
|
shadow: rgba(#000,0.1) 2px 1px 5px
|
|
border-bottom: 1px solid #aaa
|
|
position: fixed
|
|
right: 0px
|
|
left: 156px
|
|
z-index: 10
|
|
font-size: 14px
|
|
borderbox()
|
|
color: #222
|
|
font-weight: normal
|
|
font-size: 11px
|
|
|
|
.avatar
|
|
margin-right: 5px
|
|
roundall: 5px
|
|
width: 30px
|
|
height: 30px
|
|
position: absolute
|
|
top: 11px
|
|
left: 11px
|
|
vertical-align: top
|
|
|
|
.name
|
|
margin: 15px
|
|
padding: 0px
|
|
margin-left: 45px
|
|
font-size: 14px
|
|
line-height: 14px
|
|
|
|
.messages
|
|
background: #ecf0f2
|
|
font-weight: normal
|
|
margin: 0px
|
|
padding: 0px
|
|
padding-top: 150px
|
|
overflow-y: auto
|
|
overflow-x: hidden
|
|
position: relative
|
|
bottom: 75px
|
|
width: 100%
|
|
borderbox()
|
|
|
|
li
|
|
position: relative
|
|
z-index: 1
|
|
list-style: none
|
|
margin: 0px
|
|
padding: 0px
|
|
width: 100%
|
|
display: block
|
|
borderbox()
|
|
|
|
.message
|
|
color: #33404c
|
|
font-size: 12px
|
|
margin: 0px
|
|
padding: 7px 11px
|
|
display: inline-block
|
|
padding-right: 11px
|
|
min-width: 20px
|
|
width: 100%
|
|
border-bottom: 1px solid #ccc
|
|
borderbox()
|
|
|
|
&.mine
|
|
background: #eaf7ff
|
|
border-bottom: 1px solid #bbe0fa
|
|
|
|
.timestamp
|
|
color: #bbe0fa
|
|
|
|
&.delayed
|
|
.timestamp:before
|
|
content: '@ '
|
|
|
|
&.edited
|
|
.timestamp:before
|
|
content: 'edited '
|
|
|
|
.body
|
|
display: inline
|
|
word-break: break-word
|
|
padding: 0px
|
|
margin: 0px
|
|
color: #111
|
|
|
|
.timestamp
|
|
font-size: 12px
|
|
color: #bbb
|
|
font-weight: bold
|
|
float: right
|
|
display: block
|
|
margin-right: 15px
|
|
|
|
.chatBox
|
|
borderbox()
|
|
border-top: 1px solid $grayOutline
|
|
bottom: 0px
|
|
position: fixed
|
|
right: 0px
|
|
left: 156px
|
|
z-index: 200
|
|
|
|
form
|
|
background: $grayBackground
|
|
padding: 11px
|
|
|
|
.formwrap
|
|
borderbox()
|
|
width: 100%
|
|
padding-right: 80px
|
|
position: relative
|
|
|
|
textarea
|
|
background-color: #fff
|
|
width: 100%
|
|
height: 30px
|
|
border: 1px solid $grayOutline
|
|
roundall: 3px
|
|
line-height: 18px
|
|
outline: none
|
|
resize: none
|
|
color: #222f3b
|
|
font-size: 14px
|
|
-webkit-font-smoothing: antialiased
|
|
-webkit-appearance: none
|
|
padding: 5px
|
|
borderbox()
|
|
|
|
&:focus
|
|
border-color: #bbb
|
|
|
|
&.editing
|
|
background-color: yellow
|