chat 0.2.0 → 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +11 -8
- data/Rakefile +2 -0
- data/app/assets/javascripts/chat/channels/message.coffee +33 -43
- data/app/assets/javascripts/chat/channels/status.coffee +2 -2
- data/app/assets/javascripts/chat/messages.coffee +12 -11
- data/app/assets/stylesheets/chat/avatar_grid.sass +40 -0
- data/app/assets/stylesheets/chat/chat.sass +9 -4
- data/app/assets/stylesheets/chat/checkbox.sass +3 -3
- data/app/assets/stylesheets/chat/emojionearea.min.css +1 -1
- data/app/assets/stylesheets/chat/header.sass +25 -8
- data/app/assets/stylesheets/chat/launch.sass +39 -3
- data/app/assets/stylesheets/chat/list.sass +56 -23
- data/app/assets/stylesheets/chat/message_form.sass +7 -4
- data/app/assets/stylesheets/chat/new.sass +27 -22
- data/app/assets/stylesheets/chat/transcript.sass +60 -64
- data/app/channels/chat/messages_channel.rb +3 -2
- data/app/channels/chat/notification_channel.rb +2 -0
- data/app/channels/chat/status_channel.rb +12 -10
- data/app/controllers/chat/application_controller.rb +5 -1
- data/app/controllers/chat/conversations_controller.rb +24 -2
- data/app/controllers/chat/messages_controller.rb +8 -2
- data/app/helpers/chat/application_helper.rb +35 -24
- data/app/jobs/chat/application_job.rb +9 -1
- data/app/jobs/chat/message_relay_job.rb +5 -13
- data/app/jobs/chat/notification_relay_job.rb +10 -4
- data/app/jobs/chat/status_relay_job.rb +3 -3
- data/app/mailers/chat/application_mailer.rb +2 -0
- data/app/models/chat/application_record.rb +2 -0
- data/app/models/chat/conversation.rb +12 -0
- data/app/models/chat/dot_command.rb +2 -0
- data/app/models/chat/dot_command/gif.rb +2 -0
- data/app/models/chat/dot_command/shrug.rb +3 -1
- data/app/models/chat/dot_command/validator.rb +3 -1
- data/app/models/chat/message.rb +10 -2
- data/app/models/chat/session.rb +3 -3
- data/app/views/chat/_chat.html.haml +10 -6
- data/app/views/chat/conversations/_conversation.html.haml +23 -0
- data/app/views/chat/conversations/_index.html.haml +1 -6
- data/app/views/chat/conversations/_new.html.haml +2 -4
- data/app/views/chat/conversations/_show.html.haml +8 -7
- data/app/views/chat/conversations/create.js.erb +14 -10
- data/app/views/chat/conversations/show.js.erb +8 -5
- data/app/views/chat/messages/_message.haml +9 -12
- data/config/routes.rb +4 -2
- data/lib/chat.rb +5 -1
- data/lib/chat/engine.rb +2 -0
- data/lib/chat/user.rb +7 -12
- data/lib/chat/version.rb +3 -1
- data/lib/generators/chat/install/install_generator.rb +2 -0
- data/lib/generators/chat/install/templates/add_chat_to_users.rb +3 -1
- data/lib/generators/chat/install/templates/chat.rb +2 -0
- data/lib/generators/chat/install/templates/create_chat.rb +19 -7
- data/lib/tasks/chat_tasks.rake +1 -0
- metadata +15 -48
- data/app/models/chat/dot_command/leave.rb +0 -16
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8c04efa8bf767bd15cd682113ee7f406968f302f
|
4
|
+
data.tar.gz: 320469c4a892576b96abed7b8ee05d3fc6e46915
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e0f32bdb14c13a4a76ddbcfab976384e9e6d62bc5b93afb08d16d00fd8cdb439a8c05dbae0951da16f5da6765dd84207fe110057c7192c5aae468771e83965ac
|
7
|
+
data.tar.gz: 7fa5ddf4623c18056852146f3007ec1a520db6bcd87f5249f9c97010b7b849c4df728242dd74854f4519cd6deccb7f7e66c92ad2b1971719f0039db669c43fe9
|
data/README.md
CHANGED
@@ -37,28 +37,31 @@ Run the installer to setup migrations and helpers and then migrate:
|
|
37
37
|
|
38
38
|
Require chat in your app/assets/javascripts/application.js file:
|
39
39
|
|
40
|
-
```
|
40
|
+
```js
|
41
41
|
//= require chat
|
42
42
|
```
|
43
43
|
|
44
44
|
Require chat in your app/assets/stylesheets/application.css file
|
45
45
|
|
46
|
-
```
|
46
|
+
```css
|
47
47
|
*= require chat
|
48
48
|
```
|
49
49
|
|
50
|
-
Finally the following line to your application.html.erb file or any view file
|
50
|
+
Finally, add the following line to your application.html.erb file or any view file
|
51
51
|
you'd like Chat available from:
|
52
|
-
```
|
53
|
-
|
54
|
-
<!-- color is the icon color on the launch fab. Can be light or dark -->
|
55
|
-
<%= render_chat(background, color) %>
|
52
|
+
```erb
|
53
|
+
<%= render_chat %>
|
56
54
|
```
|
57
55
|
|
58
56
|
### Dot Commands
|
59
57
|
|
58
|
+
Dot commands behave differently than regular messages and begin with a dot(.).
|
59
|
+
The following commands are available:
|
60
|
+
- .shrug followed by an optional message outputs a srugging emoticon
|
61
|
+
- .gif following by a label fetches a random gif from giphy with the given label
|
62
|
+
|
60
63
|
## Contributing
|
61
|
-
|
64
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/npezza93/chat.
|
62
65
|
|
63
66
|
## License
|
64
67
|
The gem is available as open source under the terms of the
|
data/Rakefile
CHANGED
@@ -7,14 +7,14 @@ App.chat_message =
|
|
7
7
|
|
8
8
|
received: (data) ->
|
9
9
|
@collection().append @generateMessage(data)
|
10
|
-
height = $('.
|
11
|
-
$('.
|
10
|
+
height = $('.current_chat').prop('scrollHeight')
|
11
|
+
$('.current_chat').animate { scrollTop: height }, 'slow'
|
12
12
|
|
13
13
|
followCurrentChat: ->
|
14
14
|
if chatId = @current_chat()
|
15
15
|
@perform 'follow', chat_id: chatId
|
16
16
|
else
|
17
|
-
@perform '
|
17
|
+
@perform 'unsubscribed'
|
18
18
|
|
19
19
|
current_user: ->
|
20
20
|
if @collection().length > 0
|
@@ -24,52 +24,42 @@ App.chat_message =
|
|
24
24
|
if @collection().length > 0
|
25
25
|
@collection().data().currentChat
|
26
26
|
|
27
|
-
div: ->
|
28
|
-
document.createElement('div')
|
29
|
-
|
30
|
-
flex: ->
|
31
|
-
element = @div()
|
32
|
-
element.classList += 'chat__flex'
|
33
|
-
element.outerHTML
|
34
|
-
|
35
|
-
text_message_container: ->
|
36
|
-
element = @div()
|
37
|
-
element.classList += 'chat__message'
|
27
|
+
div: (classes = "")->
|
28
|
+
element = document.createElement('div')
|
29
|
+
element.classList += classes if classes.length > 0
|
38
30
|
element
|
39
31
|
|
40
|
-
|
41
|
-
|
42
|
-
element.classList += 'chat__image-message'
|
43
|
-
element
|
32
|
+
render_container: (user) ->
|
33
|
+
@div("message-container #{if user == @current_user() then 'right' else ''}")
|
44
34
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
35
|
+
render_avatar: (data) ->
|
36
|
+
last_message_classes = @collection().children().last()[0]
|
37
|
+
last_message_classes =
|
38
|
+
if last_message_classes == undefined
|
39
|
+
[]
|
40
|
+
else
|
41
|
+
last_message_classes.classList
|
51
42
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
if data.user == @current_user()
|
56
|
-
element.classList += ' right'
|
43
|
+
if data.user == @current_user() &&
|
44
|
+
$.inArray("right", last_message_classes) >= 0
|
45
|
+
@div("transcript_placeholder_avatar").outerHTML
|
57
46
|
else
|
58
|
-
|
59
|
-
element.innerHTML = data.message
|
60
|
-
element.outerHTML
|
47
|
+
data.avatar
|
61
48
|
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
49
|
+
render_content: (data) ->
|
50
|
+
el = @div("message #{if data.image then 'image' else ''}")
|
51
|
+
if data.image
|
52
|
+
el.innerHTML = data.message
|
53
|
+
else
|
54
|
+
content = @div("content")
|
55
|
+
content.innerHTML = data.message
|
56
|
+
el.innerHTML = content.outerHTML
|
69
57
|
|
58
|
+
el
|
70
59
|
|
71
60
|
generateMessage: (data) ->
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
61
|
+
container = @render_container(data.user)
|
62
|
+
container.innerHTML =
|
63
|
+
@render_avatar(data) + @render_content(data).outerHTML
|
64
|
+
|
65
|
+
container
|
@@ -1,10 +1,10 @@
|
|
1
1
|
App.chat_status =
|
2
2
|
App.cable.subscriptions.create "Chat::StatusChannel",
|
3
3
|
connected: ->
|
4
|
-
@perform
|
4
|
+
@perform "online", user_id: App.chat_notification.current_user()
|
5
5
|
|
6
6
|
disconnected: ->
|
7
|
-
@perform
|
7
|
+
@perform "unsubscribed", user_id: App.chat_notification.current_user()
|
8
8
|
|
9
9
|
received: (data) ->
|
10
10
|
label = $("label[for='conversation_user_ids_#{data.user_id}'] .chat__status")
|
@@ -7,21 +7,27 @@ event =
|
|
7
7
|
document.addEventListener event, ->
|
8
8
|
$('.chat__launch').click ->
|
9
9
|
$('#chat').addClass('active')
|
10
|
-
|
10
|
+
$('.chat__launch').addClass('chat__disappear')
|
11
11
|
return
|
12
12
|
|
13
13
|
$('.chat__close').click ->
|
14
14
|
$('#chat').removeClass('active')
|
15
|
+
$('.chat__launch').removeClass('chat__disappear')
|
15
16
|
return
|
16
17
|
|
17
18
|
$('.chat__settings').click ->
|
18
|
-
|
19
|
+
$('.current_chat').removeClass("slide_left")
|
20
|
+
$('.chat__list').removeClass("slide_left")
|
21
|
+
$('.chat__list').removeClass("slide_right")
|
22
|
+
$('.chat__start-new').removeClass("chat__disappear")
|
23
|
+
$('.new_conversation').removeClass("slide_right")
|
19
24
|
return
|
20
25
|
|
21
26
|
$(document).on 'click', '.chat__start-new', (e) ->
|
22
27
|
e.preventDefault()
|
23
|
-
$('.
|
24
|
-
$('.
|
28
|
+
$('.chat__start-new').addClass("chat__disappear")
|
29
|
+
$('.chat__list').addClass("slide_right")
|
30
|
+
$('.new_conversation').addClass("slide_right")
|
25
31
|
return
|
26
32
|
|
27
33
|
$(document).on 'click', '.chat__insert-image', ->
|
@@ -30,15 +36,10 @@ document.addEventListener event, ->
|
|
30
36
|
|
31
37
|
$(document).on 'keyup', '.new_message .emojionearea-editor', (e) ->
|
32
38
|
if e.keyCode == 13 && !e.shiftKey
|
33
|
-
|
39
|
+
str = $('.new_message .emojionearea-editor').html()
|
40
|
+
$('.new_message textarea').val(str)
|
34
41
|
$('.new_message').submit()
|
35
42
|
$('#message_text').prop('value', '')
|
36
43
|
el = $('.new_message textarea').emojioneArea()
|
37
44
|
el[0].emojioneArea.setText('')
|
38
45
|
return
|
39
|
-
|
40
|
-
show_chats = ->
|
41
|
-
$('.chat__list').css('display', 'flex')
|
42
|
-
$('.current_chat').css('display', 'none')
|
43
|
-
$('.new_conversation').css('display', 'none')
|
44
|
-
return
|
@@ -0,0 +1,40 @@
|
|
1
|
+
#chat .chat__list .avatar_container
|
2
|
+
width: 50px
|
3
|
+
height: 50px
|
4
|
+
position: relative
|
5
|
+
margin: 10px 0
|
6
|
+
color: #212121
|
7
|
+
|
8
|
+
&.count_1
|
9
|
+
img
|
10
|
+
width: 100%
|
11
|
+
height: 100%
|
12
|
+
border-radius: 50%
|
13
|
+
object-fit: cover
|
14
|
+
|
15
|
+
&.count_2, &.count_default
|
16
|
+
img
|
17
|
+
width: 50%
|
18
|
+
height: 50%
|
19
|
+
border-radius: 50%
|
20
|
+
object-fit: cover
|
21
|
+
img:nth-of-type(2)
|
22
|
+
position: absolute
|
23
|
+
bottom: 0
|
24
|
+
right: 0
|
25
|
+
img:nth-of-type(1)
|
26
|
+
position: absolute
|
27
|
+
left: 0
|
28
|
+
top: 0
|
29
|
+
div
|
30
|
+
width: 50%
|
31
|
+
height: 50%
|
32
|
+
border-radius: 50%
|
33
|
+
background-color: #fff
|
34
|
+
position: absolute
|
35
|
+
bottom: 0
|
36
|
+
right: 0
|
37
|
+
span
|
38
|
+
position: absolute
|
39
|
+
left: 33%
|
40
|
+
top: 6%
|
@@ -1,4 +1,4 @@
|
|
1
|
-
@import "https://fonts.googleapis.com/css?family=Lato:300
|
1
|
+
@import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900"
|
2
2
|
|
3
3
|
#chat
|
4
4
|
font-family: "Lato" !important
|
@@ -9,12 +9,12 @@
|
|
9
9
|
right: 0
|
10
10
|
top: 0
|
11
11
|
opacity: 0
|
12
|
-
background:
|
12
|
+
background: transparent
|
13
13
|
visibility: hidden
|
14
14
|
transform: scale(0)
|
15
15
|
transform-origin: bottom right
|
16
|
-
transition: transform .3s ease-in-out, opacity .
|
17
|
-
|
16
|
+
transition: transform .3s ease-in-out, opacity .3s ease-in-out
|
17
|
+
overflow: hidden
|
18
18
|
@media (max-width: 450px)
|
19
19
|
width: 100%
|
20
20
|
&.active
|
@@ -23,3 +23,8 @@
|
|
23
23
|
transform: scale(1)
|
24
24
|
.chat__flex
|
25
25
|
flex: 1
|
26
|
+
#chat__background
|
27
|
+
height: 100%
|
28
|
+
width: 100%
|
29
|
+
position: absolute
|
30
|
+
background-color: rgba(40,44,52, 0.75)
|
@@ -25,7 +25,7 @@
|
|
25
25
|
width: 21px
|
26
26
|
height: 21px
|
27
27
|
z-index: 0
|
28
|
-
border: 2px solid #
|
28
|
+
border: 2px solid #fff
|
29
29
|
border-radius: 1px
|
30
30
|
margin-top: 2px
|
31
31
|
transition: .2s
|
@@ -46,8 +46,8 @@
|
|
46
46
|
height: 26px
|
47
47
|
border-top: 2px solid transparent
|
48
48
|
border-left: 2px solid transparent
|
49
|
-
border-right: 2px solid #
|
50
|
-
border-bottom: 2px solid #
|
49
|
+
border-right: 2px solid #A3EEA0
|
50
|
+
border-bottom: 2px solid #A3EEA0
|
51
51
|
-webkit-transform: rotate(40deg)
|
52
52
|
transform: rotate(40deg)
|
53
53
|
-webkit-backface-visibility: hidden
|
@@ -1 +1 @@
|
|
1
|
-
.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea]{position:absolute;z-index:1000;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item{font-size:14px;padding:1px 3px;border:0}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a{text-decoration:none;display:block;height:100%;line-height:1.8em;padding:0 1.54em 0 .615em;color:#4f4f4f}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover{background-color:#e4e4e4}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active a,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover a{color:#333}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item .emojioneemoji{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:0 5px .2ex 0;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea,.emojionearea *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.emojionearea,.emojionearea.form-control{display:block;position:relative!important;width:100%;height:auto;padding:0;font-size:14px}.emojionearea .emojionearea-editor{display:block;height:auto;max-height:80px;overflow:auto;padding:6px 57px 6px 0;line-height:1.42857143;font-size:17px;color:#212121;background-color:transparent;border:0;cursor:text;margin-right:1px;border-bottom:1px solid rgba(0,0,0,.26);word-wrap:break-word}.emojionearea .emojionearea-editor:empty:before{content:attr(placeholder);display:block;color:#bbb}.emojionearea .emojionearea-editor:focus{border:0;outline:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.emojionearea .emojionearea-editor .emojioneemoji,.emojionearea .emojionearea-editor [class*=emojione-]{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea.emojionearea-inline{height:34px}.emojionearea.emojionearea-inline>.emojionearea-editor{height:32px;min-height:20px;overflow:hidden;white-space:nowrap;position:absolute;top:0;left:12px;right:24px;padding:6px 0}.emojionearea.emojionearea-inline>.emojionearea-button{top:4px}.emojionearea .emojionearea-button{z-index:5;position:absolute;right:3px;top:3px;width:24px;height:24px;opacity:.6;cursor:pointer;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.emojionearea .emojionearea-button:hover{opacity:1}.emojionearea .emojionearea-button>div{display:block;width:24px;height:24px;position:absolute;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.emojionearea .emojionearea-button>div.emojionearea-button-open{background-position:0 -24px;filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button>div.emojionearea-button-close{background-position:0 0;-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-open{-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-close{-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-picker{background:#fff;position:absolute;-moz-box-shadow:0 1px 5px rgba(0,0,0,.32);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.32);box-shadow:0 1px 5px rgba(0,0,0,.32);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:236px;width:316px;top:-15px;right:-15px;z-index:90;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;filter:alpha(Opacity=0);opacity:0;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.emojionearea .emojionearea-picker.hidden{display:none}.emojionearea .emojionearea-picker .emojionearea-wrapper{position:relative;height:236px;width:316px}.emojionearea .emojionearea-picker .emojionearea-wrapper:after{content:"";display:block;position:absolute;background-repeat:no-repeat;z-index:91}.emojionearea .emojionearea-picker .emojionearea-filters{width:100%;position:absolute;background:#F5F7F9;padding:0 0 0 7px;height:40px;z-index:95}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter{display:block;float:left;height:40px;width:32px;padding:7px 1px 0;cursor:pointer;-webkit-filter:grayscale(1);filter:grayscale(1)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active{background:#fff}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>i{width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img{width:24px;height:24px;margin:0 3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area{height:196px;overflow:auto;overflow-x:hidden;width:100%;position:absolute;padding:0 0 5px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list{z-index:1}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones{position:absolute;top:6px;right:10px;height:22px;z-index:2}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone{display:inline-block;padding:0;border:0;vertical-align:middle;outline:0;background:0 0;cursor:pointer;position:relative}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0:after{background-color:#ffcf3e}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1:after{background-color:#fae3c5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2:after{background-color:#e2cfa5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3:after{background-color:#daa478}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4:after{background-color:#a78058}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5:after{background-color:#5e4d43}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone{width:20px;height:20px;margin:0;background-color:transparent}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{content:"";position:absolute;display:block;top:4px;left:4px;width:12px;height:12px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone.active:after{top:0;left:0;width:20px;height:20px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone{width:16px;height:16px;margin:0 2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone.active:after{content:"";position:absolute;display:block;background-color:transparent;border:2px solid #fff;width:8px;height:8px;top:2px;left:2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:before,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:before{content:" ";clear:both;display:block}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone:after{-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.emojionearea .emojionearea-picker .emojionearea-scroll-area h1{display:block;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;font-weight:400;color:#b2b2b2;background:#fff;line-height:20px;margin:0;padding:7px 0 5px 6px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category{padding:0 0 0 7px}.emojionearea .emojionearea-picker .emojionearea-scroll-area [class*=emojione-]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;width:24px;height:24px;float:left;display:block;margin:1px;padding:3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:#e4e4e4;cursor:pointer}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn i,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img{float:left;display:block;width:24px;height:24px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img.lazy-emoji{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters{top:0;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-scroll-area{bottom:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-filters{bottom:0;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-scroll-area{top:0}.emojionearea .emojionearea-picker.emojionearea-picker-position-top{margin-top:-246px;right:-14px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -49px;bottom:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -80px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left,.emojionearea .emojionearea-picker.emojionearea-picker-position-right{margin-right:-326px;top:-8px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{width:10px;height:19px;background-position:0 -60px;top:13px;left:-10px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left.emojionearea-filters-position-bottom .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:right -60px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom{margin-top:10px;right:-14px;top:47px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -100px;top:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -90px}.emojionearea .emojionearea-button.active+.emojionearea-picker{filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top{margin-top:-229px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-left,.emojionearea .emojionearea-button.active+.emojionearea-picker-position-right{margin-right:-309px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-bottom{margin-top:-7px}.emojionearea.emojionearea-standalone{display:inline-block;width:auto;box-shadow:none}.emojionearea.emojionearea-standalone .emojionearea-editor{min-height:33px;position:relative;padding:6px 42px 6px 6px}.emojionearea.emojionearea-standalone .emojionearea-editor::before{content:"";position:absolute;top:4px;left:50%;bottom:4px;border-left:1px solid #e6e6e6}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder .emojioneemoji{opacity:.4}.emojionearea.emojionearea-standalone .emojionearea-button{top:0;right:0;bottom:0;left:0;width:auto;height:auto}.emojionearea.emojionearea-standalone .emojionearea-button>div{right:6px;top:5px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{right:23px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{top:15px}.emojionearea .emojionearea-button>div,.emojionearea .emojionearea-picker .emojionearea-wrapper:after{background-image:url(data:image/png;base64,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)!important}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder{background-repeat:no-repeat;background-position:20px 4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAC/v79T5hyIAAAAAXRSTlMAQObYZgAAABNJREFUCNdjYGNgQEb/P4AQqiAASiUEG6Vit44AAAAASUVORK5CYII=)!important}
|
1
|
+
.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea]{position:absolute;z-index:1000;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item{font-size:14px;padding:1px 3px;border:0}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a{text-decoration:none;display:block;height:100%;line-height:1.8em;padding:0 1.54em 0 .615em;color:#4f4f4f}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover{background-color:#e4e4e4}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active a,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover a{color:#333}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item .emojioneemoji{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:0 5px .2ex 0;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea,.emojionearea *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.emojionearea,.emojionearea.form-control{display:block;position:relative!important;width:100%;height:auto;padding:0;font-size:14px}.emojionearea .emojionearea-editor{display:block;height:auto;max-height:80px;overflow:auto;padding:6px 57px 6px 0;line-height:1.42857143;font-size:17px;color:#212121;background-color:transparent;border:0;cursor:text;margin-right:1px;border-bottom:1px solid rgba(0,0,0,.26);word-wrap:break-word}.emojionearea .emojionearea-editor:empty:before{content:attr(placeholder);display:block;color:#bbb}.emojionearea .emojionearea-editor:focus{border:0;outline:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.emojionearea .emojionearea-editor .emojioneemoji,.emojionearea .emojionearea-editor [class*=emojione-]{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea.emojionearea-inline{height:34px}.emojionearea.emojionearea-inline>.emojionearea-editor{height:32px;min-height:20px;overflow:hidden;white-space:nowrap;position:absolute;top:0;left:12px;right:24px;padding:6px 0}.emojionearea.emojionearea-inline>.emojionearea-button{top:4px}.emojionearea .emojionearea-button{z-index:5;position:absolute;right:3px;top:3px;width:24px;height:24px;cursor:pointer;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.emojionearea .emojionearea-button:hover{opacity:1}.emojionearea .emojionearea-button>div{display:block;width:24px;height:24px;position:absolute;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.emojionearea .emojionearea-button>div.emojionearea-button-open{background-position:0 -24px;filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button>div.emojionearea-button-close{background-position:0 0;}.emojionearea .emojionearea-button.active>div.emojionearea-button-open{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-close{filter:alpha(enabled=false);}.emojionearea .emojionearea-picker{background:#fff;position:absolute;-moz-box-shadow:0 1px 5px rgba(0,0,0,.32);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.32);box-shadow:0 1px 5px rgba(0,0,0,.32);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:236px;width:316px;top:-15px;right:-15px;z-index:90;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;filter:alpha(Opacity=0);opacity:0;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.emojionearea .emojionearea-picker.hidden{display:none}.emojionearea .emojionearea-picker .emojionearea-wrapper{position:relative;height:236px;width:316px}.emojionearea .emojionearea-picker .emojionearea-wrapper:after{content:"";display:block;position:absolute;background-repeat:no-repeat;z-index:91}.emojionearea .emojionearea-picker .emojionearea-filters{width:100%;position:absolute;background:#F5F7F9;padding:0 0 0 7px;height:40px;z-index:95}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter{display:block;float:left;height:40px;width:32px;padding:7px 1px 0;cursor:pointer;-webkit-filter:grayscale(1);filter:grayscale(1)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active{background:#fff}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>i{width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img{width:24px;height:24px;margin:0 3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area{height:196px;overflow:auto;overflow-x:hidden;width:100%;position:absolute;padding:0 0 5px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list{z-index:1}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones{position:absolute;top:6px;right:10px;height:22px;z-index:2}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone{display:inline-block;padding:0;border:0;vertical-align:middle;outline:0;background:0 0;cursor:pointer;position:relative}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-0:after{background-color:#ffcf3e}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-1:after{background-color:#fae3c5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-2:after{background-color:#e2cfa5}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-3:after{background-color:#daa478}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-4:after{background-color:#a78058}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones>.btn-tone.btn-tone-5:after{background-color:#5e4d43}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone{width:20px;height:20px;margin:0;background-color:transparent}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{content:"";position:absolute;display:block;top:4px;left:4px;width:12px;height:12px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone.active:after{top:0;left:0;width:20px;height:20px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone{width:16px;height:16px;margin:0 2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone.active:after{content:"";position:absolute;display:block;background-color:transparent;border:2px solid #fff;width:8px;height:8px;top:2px;left:2px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category:before,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area h1:before{content:" ";clear:both;display:block}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-radio>.btn-tone:after{-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.emojionearea .emojionearea-picker .emojionearea-scroll-area h1{display:block;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;font-weight:400;color:#b2b2b2;background:#fff;line-height:20px;margin:0;padding:7px 0 5px 6px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category{padding:0 0 0 7px}.emojionearea .emojionearea-picker .emojionearea-scroll-area [class*=emojione-]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;width:24px;height:24px;float:left;display:block;margin:1px;padding:3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:#e4e4e4;cursor:pointer}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn i,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img{float:left;display:block;width:24px;height:24px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img.lazy-emoji{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters{top:0;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-scroll-area{bottom:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-filters{bottom:0;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-scroll-area{top:0}.emojionearea .emojionearea-picker.emojionearea-picker-position-top{margin-top:-246px;right:-14px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -49px;bottom:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -80px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left,.emojionearea .emojionearea-picker.emojionearea-picker-position-right{margin-right:-326px;top:-8px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{width:10px;height:19px;background-position:0 -60px;top:13px;left:-10px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left.emojionearea-filters-position-bottom .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:right -60px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom{margin-top:10px;right:-14px;top:47px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -100px;top:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -90px}.emojionearea .emojionearea-button.active+.emojionearea-picker{filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top{margin-top:-229px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-left,.emojionearea .emojionearea-button.active+.emojionearea-picker-position-right{margin-right:-309px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-bottom{margin-top:-7px}.emojionearea.emojionearea-standalone{display:inline-block;width:auto;box-shadow:none}.emojionearea.emojionearea-standalone .emojionearea-editor{min-height:33px;position:relative;padding:6px 42px 6px 6px}.emojionearea.emojionearea-standalone .emojionearea-editor::before{content:"";position:absolute;top:4px;left:50%;bottom:4px;border-left:1px solid #e6e6e6}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder .emojioneemoji{opacity:.4}.emojionearea.emojionearea-standalone .emojionearea-button{top:0;right:0;bottom:0;left:0;width:auto;height:auto}.emojionearea.emojionearea-standalone .emojionearea-button>div{right:6px;top:5px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{right:23px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{top:15px}.emojionearea .emojionearea-button>div,.emojionearea .emojionearea-picker .emojionearea-wrapper:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNiZGJkYmQiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjMuOTkgNEMxMi45NCA0IDQgMTIuOTUgNCAyNHM4Ljk0IDIwIDE5Ljk5IDIwQzM1LjA0IDQ0IDQ0IDM1LjA1IDQ0IDI0UzM1LjA0IDQgMjMuOTkgNHpNMjQgNDBjLTguODQgMC0xNi03LjE2LTE2LTE2UzE1LjE2IDggMjQgOHMxNiA3LjE2IDE2IDE2LTcuMTYgMTYtMTYgMTZ6bTctMThjMS42NiAwIDMtMS4zNCAzLTNzLTEuMzQtMy0zLTMtMyAxLjM0LTMgMyAxLjM0IDMgMyAzem0tMTQgMGMxLjY2IDAgMy0xLjM0IDMtM3MtMS4zNC0zLTMtMy0zIDEuMzQtMyAzIDEuMzQgMyAzIDN6bTcgMTNjNC42NiAwIDguNjEtMi45MSAxMC4yMS03SDEzLjc5YzEuNiA0LjA5IDUuNTUgNyAxMC4yMSA3eiIvPjwvc3ZnPg==)!important;background-size:contain;}.emojionearea .emojionearea-button > div:hover, .emojionearea .emojionearea-button:hover, .emojionearea .emojionearea-button.active > div {background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMjMuOTkgNEMxMi45NCA0IDQgMTIuOTUgNCAyNHM4Ljk0IDIwIDE5Ljk5IDIwQzM1LjA0IDQ0IDQ0IDM1LjA1IDQ0IDI0UzM1LjA0IDQgMjMuOTkgNHpNMjQgNDBjLTguODQgMC0xNi03LjE2LTE2LTE2UzE1LjE2IDggMjQgOHMxNiA3LjE2IDE2IDE2LTcuMTYgMTYtMTYgMTZ6bTctMThjMS42NiAwIDMtMS4zNCAzLTNzLTEuMzQtMy0zLTMtMyAxLjM0LTMgMyAxLjM0IDMgMyAzem0tMTQgMGMxLjY2IDAgMy0xLjM0IDMtM3MtMS4zNC0zLTMtMy0zIDEuMzQtMyAzIDEuMzQgMyAzIDN6bTcgMTNjNC42NiAwIDguNjEtMi45MSAxMC4yMS03SDEzLjc5YzEuNiA0LjA5IDUuNTUgNyAxMC4yMSA3eiIvPjwvc3ZnPg==)!important;background-size:contain;}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder{background-repeat:no-repeat;background-position:20px 4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAC/v79T5hyIAAAAAXRSTlMAQObYZgAAABNJREFUCNdjYGNgQEb/P4AQqiAASiUEG6Vit44AAAAASUVORK5CYII=)!important}
|
@@ -1,27 +1,44 @@
|
|
1
|
-
@import "https://fonts.googleapis.com/css?family=Lato:300
|
1
|
+
@import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900"
|
2
2
|
|
3
3
|
#chat .chat__header
|
4
4
|
font-family: 'Lato' !important
|
5
5
|
letter-spacing: 1.5px !important
|
6
|
-
height:
|
7
|
-
background-color: #fff
|
8
|
-
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2)
|
6
|
+
height: 50px
|
9
7
|
display: flex
|
10
8
|
flex-direction: row
|
11
9
|
align-items: center
|
10
|
+
position: relative
|
11
|
+
z-index: 11
|
12
|
+
.chat__settings
|
13
|
+
width: 20px
|
14
|
+
height: 20px
|
15
|
+
margin: 0 25px
|
16
|
+
cursor: pointer
|
17
|
+
div
|
18
|
+
height: 2px
|
19
|
+
background: #fff
|
20
|
+
border-radius: 2px
|
21
|
+
div:nth-of-type(1)
|
22
|
+
width: 94%
|
23
|
+
margin-bottom: 4px
|
24
|
+
margin-top: 5px
|
25
|
+
div:nth-of-type(2)
|
26
|
+
width: 57%
|
27
|
+
|
12
28
|
h6
|
13
29
|
font-family: 'Lato' !important
|
14
30
|
letter-spacing: 1.5px !important
|
15
31
|
margin: 0
|
16
|
-
font-weight: 300
|
17
32
|
font-size: 19px
|
33
|
+
color: #fff
|
34
|
+
font-weight: 400
|
18
35
|
i
|
19
|
-
margin: 0
|
20
|
-
color: #
|
36
|
+
margin: 0 25px
|
37
|
+
color: #fff
|
21
38
|
transition: all .3s ease
|
22
39
|
cursor: pointer
|
23
40
|
&:hover
|
24
|
-
color: #
|
41
|
+
color: #eee
|
25
42
|
|
26
43
|
#chat .chat__badge
|
27
44
|
position: relative
|
@@ -17,10 +17,46 @@
|
|
17
17
|
outline: none
|
18
18
|
cursor: pointer
|
19
19
|
text-decoration: none
|
20
|
+
transition: 0.5s
|
21
|
+
transform: scale(1)
|
22
|
+
background: #fff
|
20
23
|
i
|
21
|
-
position: fixed
|
22
|
-
right: 28px
|
23
|
-
bottom: 28px
|
24
24
|
font-size: 30px
|
25
25
|
&:active
|
26
26
|
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2)
|
27
|
+
|
28
|
+
|
29
|
+
.chat__start-new
|
30
|
+
position: fixed
|
31
|
+
right: 10px
|
32
|
+
bottom: 15px
|
33
|
+
border-radius: 50%
|
34
|
+
height: 50px
|
35
|
+
margin: auto
|
36
|
+
min-width: 50px
|
37
|
+
width: 50px
|
38
|
+
padding: 0
|
39
|
+
overflow: hidden
|
40
|
+
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)
|
41
|
+
line-height: normal
|
42
|
+
border: none
|
43
|
+
will-change: box-shadow
|
44
|
+
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1)
|
45
|
+
outline: none
|
46
|
+
cursor: pointer
|
47
|
+
text-decoration: none
|
48
|
+
transition: 0.5s
|
49
|
+
transform: scale(1)
|
50
|
+
z-index: 15
|
51
|
+
background: #fff
|
52
|
+
i
|
53
|
+
position: absolute
|
54
|
+
left: 12px
|
55
|
+
top: 12px
|
56
|
+
font-size: 25px
|
57
|
+
color: #212121
|
58
|
+
&:active
|
59
|
+
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2)
|
60
|
+
|
61
|
+
.chat__disappear
|
62
|
+
transform: scale(0)
|
@@ -1,35 +1,68 @@
|
|
1
1
|
@keyframes pulse
|
2
2
|
50%
|
3
3
|
background-color: #C8E6C9
|
4
|
-
|
4
|
+
#chat .slide_left
|
5
|
+
transform: translate3d(-100%,0,0)
|
6
|
+
#chat .slide_right
|
7
|
+
transform: translate3d(100%,0,0)
|
5
8
|
#chat .chat__list
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
position: absolute
|
10
|
+
width: 100%
|
11
|
+
height: calc(100% - 50px)
|
12
|
+
left: 0px
|
13
|
+
opacity: 1
|
14
|
+
transition: 0.5s
|
15
|
+
overflow-y: scroll
|
16
|
+
z-index: 13
|
17
|
+
&::-webkit-scrollbar
|
18
|
+
visibility: hidden
|
19
|
+
a:not(.chat__start-new)
|
20
|
+
padding: 10px 25px
|
12
21
|
text-align: center
|
13
22
|
transition: all 0.3s ease
|
14
|
-
text-decoration: none
|
15
|
-
color: #212121
|
16
|
-
&:hover
|
17
|
-
background: #BDBDBD
|
18
|
-
.chat__index
|
19
23
|
display: flex
|
20
|
-
flex-direction: column
|
21
|
-
overflow-y: auto
|
22
|
-
&::-webkit-scrollbar
|
23
|
-
display: none
|
24
24
|
.chat__has_new_message
|
25
25
|
animation: pulse 1s ease-out infinite
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
26
|
+
.chat__glance
|
27
|
+
display: flex
|
28
|
+
flex-direction: column
|
29
|
+
flex: 1
|
30
|
+
.chat__glance-name-date
|
31
|
+
display: flex
|
32
|
+
flex-direction: row
|
33
|
+
flex: 1
|
34
|
+
margin-left: 15px
|
35
|
+
margin-top: 15px
|
36
|
+
color: #fff
|
37
|
+
font-weight: 600
|
38
|
+
.flex
|
39
|
+
flex: 1
|
40
|
+
.name
|
41
|
+
font-size: 15px
|
42
|
+
.date
|
43
|
+
font-size: 11px
|
44
|
+
padding-top: 3px
|
45
|
+
letter-spacing: 0.5px
|
46
|
+
.chat__glance-last-message
|
47
|
+
margin-left: 15px
|
48
|
+
text-align: left
|
49
|
+
margin-top: 7px
|
50
|
+
font-size: 13px
|
51
|
+
color: #fff
|
52
|
+
word-break: break-all
|
53
|
+
font-weight: 300
|
54
|
+
img
|
55
|
+
font-size: inherit
|
56
|
+
height: 2ex
|
57
|
+
width: 2.1ex
|
58
|
+
min-height: 20px
|
59
|
+
min-width: 20px
|
60
|
+
display: inline-block
|
61
|
+
margin: -.2ex .15em .2ex
|
62
|
+
line-height: normal
|
63
|
+
vertical-align: middle
|
64
|
+
max-width: 100%
|
65
|
+
top: 0
|
33
66
|
#chat .chat__none-available
|
34
67
|
height: 100%
|
35
68
|
display: flex
|