Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/chat.css @ 413:0190a0d32909 default tip
Forum: Major redesign of forums:
Forums have been redesigned. They follow the new general design with 2 or 3 panels,
allowing to have directly a forum if one is found/set up, and a panel on the left to
search/discover other ones.
Categories have been rewritten to be usable with pubsub relationships, a XEP-0277 type
node is used for topics, and each item has a comments node for the threads.
The thread view is set in `forum/show_messages.html` template. It has a header with a
search box and a button to (un)subscribe.
Items are displayed with the same macros as for the blog items.
Below a room is set for editor, tags and attachments.
rel 463
author | Goffi <goffi@goffi.org> |
---|---|
date | Fri, 05 Sep 2025 21:54:09 +0200 |
parents | f7a434581872 |
children |
rev | line source |
---|---|
403 | 1 html, body, #body { |
2 height: 100%; | |
3 overflow: hidden; | |
4 } | |
5 | |
6 | |
7 .chat-main { | |
8 /* Base colors */ | |
9 --color-background: #ffffff; | |
10 --color-text: #4a4a4a; | |
11 | |
12 /* Message colors */ | |
13 --message-background: #f5f5f5; | |
14 --message-hover-background: #e8e8e8; | |
15 | |
16 } | |
17 | |
18 [data-theme="dark"] .chat-main { | |
19 --color-background: #2c2c2c; | |
20 --color-text: #ffffff; | |
21 | |
22 --message-background: #363636; | |
23 --message-hover-background: #404040; | |
24 | |
25 } | |
26 | |
27 .chat-container { | |
28 height: 100%; | |
29 overflow-y: auto; | |
30 } | |
31 | |
32 .chat-main { | |
33 height: 100%; | |
34 display: flex; | |
35 flex-direction: column; | |
36 } | |
37 | |
38 .columns.is-gapless.chat-container { | |
39 flex-wrap: nowrap; | |
40 } | |
41 | |
42 .author { | |
43 font-weight: bold; | |
44 } | |
329 | 45 #messages { |
403 | 46 flex-grow: 1; |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
47 overflow-y: auto; |
403 | 48 padding: 1rem; |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
49 } |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
50 |
403 | 51 #left_panel a { |
52 background-color: inherit; | |
53 } | |
54 | |
55 .chat-input { | |
56 border-top: 1px solid #dbdbdb; | |
57 padding: 1rem; | |
58 } | |
59 | |
411
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
60 .chat-input button, .chat-input input, .chat-input select { |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
61 height: auto; |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
62 min-height: 3rem; |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
63 } |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
64 |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
65 #message_input_area, #message_input_area_rich { |
403 | 66 height: 100%; |
411
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
67 min-height: 3rem; |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
68 } |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
69 |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
70 div.ql-editor { |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
71 margin: 0 2px; |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
72 min-height: 3rem; |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
73 border: 1px lightgray solid; |
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
74 padding: 11px; |
403 | 75 } |
76 | |
406 | 77 .media.chat-message { |
403 | 78 max-width: 95%; |
406 | 79 border: none; |
80 margin: 0; | |
403 | 81 } |
82 | |
83 .message-core { | |
84 margin-bottom: 1rem; | |
85 padding: 0.75rem; | |
86 border-radius: 0.5rem; | |
87 overflow-wrap: anywhere; | |
88 background-color: #f5f5f5; | |
89 transition: background-color 0.2s, border-left 0.2s; | |
411
f7a434581872
chat: Add forward, rich editing and extra recipients:
Goffi <goffi@goffi.org>
parents:
406
diff
changeset
|
90 list-style-position: inside; |
403 | 91 } |
92 .message-core:hover, .message-core.has-popup-focus { | |
93 background-color: #e8e8e8; | |
94 border-left: 4px solid #3273dc; | |
95 } | |
96 | |
97 .message-actions { | |
406 | 98 opacity: 0; |
99 transition: opacity 0.3s ease-in-out; | |
403 | 100 } |
101 | |
102 .message-core:hover .message-actions, | |
103 .message-core.has-popup-focus .message-actions | |
104 { | |
406 | 105 opacity: 1; |
403 | 106 } |
107 | |
108 .message-core:hover, .message-core.has-popup-focus { | |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
109 background-color: #f5f5f5; |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
110 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
111 } |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
112 |
403 | 113 .message-body { |
114 white-space: pre-wrap; | |
115 overflow-wrap: break-word; | |
387
8b990c78d4b5
(bulma/chat): add menu + style for message retraction
Goffi <goffi@goffi.org>
parents:
386
diff
changeset
|
116 } |
8b990c78d4b5
(bulma/chat): add menu + style for message retraction
Goffi <goffi@goffi.org>
parents:
386
diff
changeset
|
117 |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
118 .message-attachment { |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
119 max-width: 20rem; |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
120 } |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
121 .status-icons { |
403 | 122 display: inline; |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
123 } |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
124 |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
125 .action-button { |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
126 box-sizing: border-box; |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
127 margin: 0 0.2rem; |
385
941e4006ab6e
bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents:
370
diff
changeset
|
128 user-select: none; |
403 | 129 cursor: pointer; |
385
941e4006ab6e
bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents:
370
diff
changeset
|
130 z-index: 10; |
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
131 } |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
132 |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
133 .action-button:hover { |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
134 box-shadow: 0 0 0 10px rgba(0,0,0,0.1); |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
135 border-radius: 50%; |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
136 transition: box-shadow 0.3s ease; |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
137 } |
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
138 |
404 | 139 |
140 /* Reply to indicator */ | |
141 #reply-to { | |
142 background-color: var(--message-background); | |
143 border-left: 4px solid #3273dc; | |
144 padding: 0.5rem; | |
145 margin-bottom: 1rem; | |
146 border-radius: 0.25rem; | |
147 } | |
406 | 148 |
149 /* Sub Messages Panel */ | |
150 | |
151 div.panel-block { | |
152 overflow-y: auto; | |
153 } | |
154 | |
155 #sub-messages { | |
156 overflow-y: auto; | |
157 } |