Mercurial > libervia-templates
annotate default/static/chat.css @ 85:05b500bd6235
chat: chat implementation, first draft:
this chat use the new dynamic pages feature. Updates are pushed directly by server.
Identities are used to retrieve avatar, and first letter of nickname is used to generate an avatar is none is found (temporary, a more elaborate avatar generation should follow in the future).
Scroll is done automatically when new messages arrive, except if scroll is not at the end, as it probably means that user is checking history.
User can resize text area and use [shift] + [enter] to enter multi-line messages. History will then scroll to bottom after message has been sent.
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 03 Jan 2018 01:12:16 +0100 |
parents | |
children | 0a0d9a953d98 |
rev | line source |
---|---|
85
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
1 :root { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
2 --message_input-height: 2rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
3 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
4 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
5 #main_area { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
6 overflow: hidden; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
7 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
8 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
9 .chat_widget { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
10 position: absolute; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
11 height: 100%; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
12 width: 100%; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
13 box-sizing: border-box; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
14 display: flex; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
15 flex-direction: column; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
16 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
17 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
18 #messages { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
19 height: 100%; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
20 min-height: 150px; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
21 overflow: auto; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
22 box-sizing: border-box; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
23 resize: vertical; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
24 transition: height 0.6s; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
25 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
26 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
27 #subject { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
28 padding: 1em; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
29 text-align: center; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
30 background: #eee; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
31 font-style: italic; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
32 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
33 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
34 #messages > p { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
35 margin: 0; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
36 padding: 0.5em 0 0 0.5em; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
37 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
38 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
39 #messages .msg_body { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
40 white-space: pre-wrap; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
41 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
42 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
43 #message_input { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
44 width: 100%; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
45 height: 100%; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
46 padding-top: 0.5rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
47 margin: 0; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
48 box-sizing: border-box; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
49 resize: none; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
50 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
51 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
52 .message_box { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
53 flex: 1 1 calc(var(--message_input-height)); |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
54 position: relative; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
55 min-height: 1rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
56 box-sizing: border-box; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
57 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
58 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
59 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
60 #messages > p.msg_info { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
61 white-space: pre-wrap; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
62 font-family: monospace; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
63 color: #049282; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
64 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
65 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
66 .avatar { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
67 height: 2rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
68 width: 2rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
69 float: left; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
70 background: #ccc; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
71 border-radius: 0.2rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
72 margin-right: 0.3rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
73 margin-top: 0.3rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
74 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
75 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
76 .generated { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
77 font-size: 1.5rem; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
78 text-align: center; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
79 background: #43d2f6; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
80 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
81 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
82 .msg_header { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
83 display: block; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
84 font-size: 0.9em; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
85 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
86 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
87 .author { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
88 font-weight: bold; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
89 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
90 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
91 .date { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
92 color: #777; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
93 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
94 |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
95 @media (min-width: 800px) { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
96 #messages > p { |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
97 padding-left: 1.5em; |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
98 } |
05b500bd6235
chat: chat implementation, first draft:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
99 } |