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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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 }