Mercurial > libervia-templates
annotate default/static/chat.css @ 128:4f27ce980ced
css: started to refactor CSS class to follow BEM conventions
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 24 Mar 2018 11:14:14 +0100 |
parents | 05b500bd6235 |
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 } |