1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-10 19:45:02 -05:00
kaiwa/public/css/app/chat.styl
2013-09-18 18:40:05 +02:00

153 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()
&.editing
background-color: yellow