1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-15 05:55:01 -05:00
kaiwa/public/css/pages/chat.styl

409 lines
7.3 KiB
Stylus
Raw Normal View History

2013-09-16 05:19:07 -04:00
@import '../_variables'
@import '../_mixins'
.page.chat
padding-top: 0px
borderbox()
2013-12-19 18:34:29 -05:00
overflow-y: auto
overflow-x: hidden
2013-09-16 05:19:07 -04:00
.conversation
padding: 0px
2013-12-20 06:39:06 -05:00
overflow: hidden
2013-09-16 05:19:07 -04:00
borderbox()
2013-12-16 13:06:03 -05:00
2013-09-16 05:19:07 -04:00
header
2013-12-20 02:04:14 -05:00
padding: 0px
2013-12-20 02:49:23 -05:00
padding-left: 6px
2013-12-20 06:39:06 -05:00
border-bottom: 1px solid darken($gray-lighter, 10%)
2013-09-16 05:19:07 -04:00
position: fixed
2013-12-20 06:39:06 -05:00
top: 40px
2013-09-16 05:19:07 -04:00
right: 0px
left: 201px
2013-09-16 05:19:07 -04:00
z-index: 10
borderbox()
2013-10-23 13:57:46 -04:00
background: lighten($gray-light, 93%)
2013-09-16 05:19:07 -04:00
2013-12-20 06:39:06 -05:00
&:before
content: ''
position: absolute
left: 5px
2013-12-20 17:15:29 -05:00
top: 18px
2013-12-20 06:39:06 -05:00
height: 6px
width: 6px
margin-top: -3px
roundall(10px)
2013-12-20 02:04:14 -05:00
&.online,
&.chat
&:before
background: $green
2013-12-20 06:39:06 -05:00
&.dnd:before
background: $red
2013-12-20 02:04:14 -05:00
2013-12-20 06:39:06 -05:00
&.away:before,
&.xa:before
background: $orange
2013-12-20 02:04:14 -05:00
2013-12-20 06:39:06 -05:00
&.offline:before
background: $gray-dark
2013-12-20 02:04:14 -05:00
2013-12-20 06:39:06 -05:00
&.composing:before
animation: pulsate 1.5s infinite ease-in
-webkit-animation: pulsate 1.5s infinite ease-in
-moz-animation: pulsate 1.5s infinite ease-in
2013-12-20 02:04:14 -05:00
2013-12-20 06:39:06 -05:00
&.paused:before,
&.idle:before
background: lighten($gray-light, 30%)
2013-12-20 02:04:14 -05:00
2013-10-25 12:09:18 -04:00
.controls
float: right
2013-12-16 13:06:03 -05:00
.leaveRoom
display: none
.joinRoom
display: block
2013-12-20 02:04:14 -05:00
button
2013-12-20 02:49:23 -05:00
margin-top: 5px
2013-12-16 13:06:03 -05:00
2013-12-20 02:04:14 -05:00
&.joined
.joinRoom
display: none
.leaveRoom
display: block
2013-12-16 13:06:03 -05:00
2013-09-16 05:19:07 -04:00
.avatar
margin-right: 5px
avatar()
2013-09-16 05:19:07 -04:00
position: absolute
top: 11px
left: 11px
vertical-align: top
2013-12-20 17:15:29 -05:00
h1
font-size: 12px
margin: 5px
2013-12-20 02:49:23 -05:00
margin-left: 10px
2013-09-16 05:19:07 -04:00
padding: 0px
2013-12-20 17:15:29 -05:00
white-space: nowrap
max-width: 80%
display: inline-block
height: 25px
line-height: 25px
.name
2013-12-20 03:11:44 -05:00
font-size: 12px
2013-12-20 17:15:29 -05:00
border-width: 0px
padding: 0px
display: inline-block
overflow: hidden
2013-09-16 05:19:07 -04:00
2013-12-20 02:04:14 -05:00
.status
2013-12-20 17:15:29 -05:00
font-weight: normal
2013-12-20 03:11:44 -05:00
font-size: 12px
2013-12-20 17:15:29 -05:00
border-width: 0px
padding: 0px
max-width: 80%
padding-left: 5px
white-space: nowrap
2013-12-20 02:04:14 -05:00
overflow: hidden
text-overflow: ellipsis
2013-12-20 17:15:29 -05:00
transition: all .25s
display: inline-block
2013-12-20 02:04:14 -05:00
&:not(:empty):before
content: '- '
2013-09-23 14:23:23 -04:00
.tzo:not(:empty)
position: absolute
right: 15px
2013-12-20 02:04:14 -05:00
top: 18px
2013-09-23 14:23:23 -04:00
height: 20px
margin-top: -10px
padding: 0 5px
roundall(3px)
2013-10-24 18:46:40 -04:00
font-size: $font-size-small
font-weight: $font-weight-bold
2013-09-23 14:23:23 -04:00
line-height: 20px
2013-10-23 13:57:46 -04:00
color: lighten($gray, 30%)
background: $gray-lighter
2013-12-20 02:49:23 -05:00
border: 1px solid darken($gray-lighter, 10%)
2013-09-23 14:23:23 -04:00
2013-12-20 02:04:14 -05:00
&:before
content: 'Current Time: '
font-weight: bold
2013-10-15 15:52:59 -04:00
.call
2013-10-23 08:29:45 -04:00
text-transform: capitalize
2013-12-20 17:15:29 -05:00
display: inline-block
margin-left: 10px
float: right
2013-10-15 15:52:59 -04:00
2013-10-15 23:06:18 -04:00
.activeCall
transition(height 250ms)
height: 0px
position: relative
top: 0px
2013-12-20 02:04:14 -05:00
2013-10-15 23:06:18 -04:00
.remote
position: absolute
top: 60px
left: 10px
height: 50%
.local
position: absolute
bottom: 10px
right: 10px
height: 20%
2013-10-23 13:57:46 -04:00
border: 2px solid $gray-lighter
transform(scaleX(-1))
2013-10-15 23:06:18 -04:00
2013-10-24 17:32:20 -04:00
.button-wrap
2013-10-15 23:06:18 -04:00
position: absolute
left: 10px
bottom: 10px
2013-10-24 17:32:20 -04:00
.button-group
margin-left: 5px
2013-10-15 23:06:18 -04:00
// while on video call the parent has
// this class so we animate the height
.activeCall
display: none
2013-10-15 23:06:18 -04:00
&.onCall
.activeCall
display: block
2013-10-15 23:06:18 -04:00
height: 400px
2013-09-16 05:19:07 -04:00
.messages
margin: 0px
padding: 0px
overflow-y: auto
overflow-x: hidden
2013-12-20 14:17:21 -05:00
position: absolute
2013-12-19 18:34:29 -05:00
top: 0px
2013-12-31 18:02:07 -05:00
right: 0px
2013-12-20 03:03:37 -05:00
bottom: 55px
2013-12-20 06:39:06 -05:00
padding-top: 75px
2013-09-16 05:19:07 -04:00
borderbox()
2013-12-19 18:34:29 -05:00
-webkit-overflow-scrolling: touch
2013-09-16 05:19:07 -04:00
li
position: relative
list-style: none
2013-09-26 06:55:27 -04:00
padding: 10px 0
2013-09-16 05:19:07 -04:00
width: 100%
min-height: 50px
display: table
2013-09-16 05:19:07 -04:00
borderbox()
2013-10-23 13:57:46 -04:00
border-bottom: 1px solid $gray-lighter
2013-12-13 19:16:40 -05:00
display: table-row
2013-09-16 05:19:07 -04:00
2013-09-26 06:55:27 -04:00
&:last-of-type
2013-09-19 12:35:34 -04:00
border: none
2013-09-25 23:38:00 -04:00
.messageAvatar
2013-12-13 19:16:40 -05:00
display: inline-block
2013-09-25 23:38:00 -04:00
img
avatar()
2013-09-25 23:38:00 -04:00
.name
text-indent: -9999em
position: absolute
width: 1px
2013-12-13 19:16:40 -05:00
.sender
display: table-cell
font-size: 12px
font-weight: bold
color: $gray
padding: 5px
2013-12-13 19:16:40 -05:00
text-align: right
2013-12-19 18:34:29 -05:00
border-top: 1px solid #eee
2013-12-16 22:17:08 -05:00
white-space: nowrap
2013-12-19 18:34:29 -05:00
vertical-align: middle
2013-12-13 19:16:40 -05:00
.name
padding-left: 10px
2013-12-19 18:34:29 -05:00
vertical-align: middle
2013-12-13 19:16:40 -05:00
2013-09-25 23:38:00 -04:00
.messageWrapper
display: table-cell
padding: 5px
2013-12-13 19:16:40 -05:00
border-top: 1px solid #eee
2013-12-16 22:17:08 -05:00
width: 99%
2013-12-19 18:34:29 -05:00
vertical-align: middle
2013-09-25 23:38:00 -04:00
2013-09-16 05:19:07 -04:00
.message
2013-10-23 13:15:38 -04:00
font-size: $font-size-small
2013-12-16 17:28:13 -05:00
margin: 2px
2013-09-16 05:19:07 -04:00
display: inline-block
padding-right: 11px
min-width: 20px
width: 100%
borderbox()
2013-09-24 07:27:58 -04:00
&:not(.mine)
2013-12-16 17:28:13 -05:00
color: $gray-dark
2013-09-24 07:27:58 -04:00
2013-09-16 05:19:07 -04:00
&.mine
background: white
2013-09-16 05:19:07 -04:00
.timestamp
2013-10-23 13:57:46 -04:00
color: darken($gray-lighter, 20%)
2013-09-16 05:19:07 -04:00
&.delayed
.timestamp:before
content: '@ '
&.edited
.timestamp:before
content: 'edited '
&.pending
2013-10-23 13:57:46 -04:00
color: lighten($gray, 50%)
2013-12-16 17:28:13 -05:00
&.meAction
font-style: italic
color: $blue
background-color: $blue-lighter
2013-12-16 17:28:13 -05:00
padding: 2px
padding-left: 8px
border-radius: 2px
&:before
content: '\2022 '
font-style: normal
.timestamp
position: relative
left: -10px
font-style: normal
color: $blue-light
2013-12-16 17:28:13 -05:00
2013-09-16 05:19:07 -04:00
.body
display: inline
word-break: break-word
.mention
color: $pink
background-color: $pink-lighter
padding: 1px
font-weight: bold
border-radius: 4px
border: 1px solid darken($pink-lighter, 25%)
2013-09-16 05:19:07 -04:00
.timestamp
2013-10-25 12:09:18 -04:00
font-size: $font-size-smaller
2013-10-23 13:57:46 -04:00
color: lighten($blue, 50%)
2013-09-16 05:19:07 -04:00
float: right
display: block
2013-09-24 16:24:35 -04:00
.sender
display: block
2013-09-16 05:19:07 -04:00
.chatBox
borderbox()
bottom: 0px
position: fixed
right: 0px
2013-09-27 15:10:30 -04:00
left: 201px
2013-09-16 05:19:07 -04:00
z-index: 200
form
2013-10-23 13:57:46 -04:00
background: lighten($gray-light, 93%)
2013-09-16 05:19:07 -04:00
padding: 11px
.formwrap
borderbox()
width: 100%
padding-right: 80px
position: relative
textarea
height: 30px
2013-10-24 18:07:43 -04:00
padding: 6px 10px
2013-09-16 05:19:07 -04:00
2013-12-20 06:39:06 -05:00
&.typing:focus,
&.editing:focus
transition: none
-webkit-transition: none
2013-09-16 05:19:07 -04:00
&.editing
background-color: #fffcea
border: 1px solid #efe391
color: #d2bd2d
2013-12-31 18:02:07 -05:00
.group.conversation
.messages
right: 150px
.groupRoster
width: 150px
margin: 0px
padding: 0px
overflow-y: auto
overflow-x: hidden
position: absolute
top: 0px
right: 0px
bottom: 50px
padding-top: 80px
padding-bottom: 10px
borderbox()
-webkit-overflow-scrolling: touch
background: lighten($gray, 95%)
border-left: 1px solid darken($gray-lighter, 10%)
li
padding: 3px
margin: 0px
font-size: 12px
position: relative
.name
padding-left: 10px
&:before
content: ''
position: absolute
left: 4px
top: 11px
height: 6px
width: 6px
margin-top: -3px
roundall(10px)
&.online,
&.chat
&:before
background: $green
&.dnd:before
background: $red
&.away:before,
&.xa:before
background: $orange
&.offline:before
background: $gray-dark
&.composing:before
animation: pulsate 1.5s infinite ease-in
-webkit-animation: pulsate 1.5s infinite ease-in
-moz-animation: pulsate 1.5s infinite ease-in
&.paused:before,
&.idle:before
background: lighten($gray-light, 30%)