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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
1 html, body, #body {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
2 height: 100%;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
3 overflow: hidden;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
4 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
5
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
6
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
7 .chat-main {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
8 /* Base colors */
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
9 --color-background: #ffffff;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
10 --color-text: #4a4a4a;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
11
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
12 /* Message colors */
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
13 --message-background: #f5f5f5;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
14 --message-hover-background: #e8e8e8;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
15
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
16 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
17
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
18 [data-theme="dark"] .chat-main {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
19 --color-background: #2c2c2c;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
20 --color-text: #ffffff;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
21
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
22 --message-background: #363636;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
23 --message-hover-background: #404040;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
24
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
25 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
26
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
27 .chat-container {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
28 height: 100%;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
29 overflow-y: auto;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
30 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
31
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
32 .chat-main {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
33 height: 100%;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
34 display: flex;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
35 flex-direction: column;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
36 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
37
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
38 .columns.is-gapless.chat-container {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
39 flex-wrap: nowrap;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
40 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
41
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
42 .author {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
43 font-weight: bold;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
44 }
329
6a26c8a43d10 bulma (chat): fix chat:
Goffi <goffi@goffi.org>
parents:
diff changeset
45 #messages {
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
51 #left_panel a {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
52 background-color: inherit;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
53 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
54
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
55 .chat-input {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
56 border-top: 1px solid #dbdbdb;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
57 padding: 1rem;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
58 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
75 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
76
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
77 .media.chat-message {
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
78 max-width: 95%;
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
79 border: none;
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
80 margin: 0;
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
81 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
82
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
83 .message-core {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
84 margin-bottom: 1rem;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
85 padding: 0.75rem;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
86 border-radius: 0.5rem;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
87 overflow-wrap: anywhere;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
88 background-color: #f5f5f5;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
91 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
92 .message-core:hover, .message-core.has-popup-focus {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
93 background-color: #e8e8e8;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
94 border-left: 4px solid #3273dc;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
95 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
96
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
97 .message-actions {
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
98 opacity: 0;
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
99 transition: opacity 0.3s ease-in-out;
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
100 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
101
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
102 .message-core:hover .message-actions,
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
103 .message-core.has-popup-focus .message-actions
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
104 {
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
105 opacity: 1;
403
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
106 }
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
107
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
113 .message-body {
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
114 white-space: pre-wrap;
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
65c53ec5e777 Bulma: complete redesign:
Goffi <goffi@goffi.org>
parents: 387
diff changeset
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
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
139
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
140 /* Reply to indicator */
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
141 #reply-to {
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
142 background-color: var(--message-background);
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
143 border-left: 4px solid #3273dc;
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
144 padding: 0.5rem;
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
145 margin-bottom: 1rem;
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
146 border-radius: 0.25rem;
66f98ee041d8 chat: add UI for replies/threads:
Goffi <goffi@goffi.org>
parents: 403
diff changeset
147 }
406
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
148
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
149 /* Sub Messages Panel */
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
150
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
151 div.panel-block {
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
152 overflow-y: auto;
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
153 }
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
154
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
155 #sub-messages {
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
156 overflow-y: auto;
049a0638f6fa chat: Keywords handling:
Goffi <goffi@goffi.org>
parents: 405
diff changeset
157 }