Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/chat.css @ 411:f7a434581872 default tip
chat: Add forward, rich editing and extra recipients:
- There is a new "forward" menu in message. For now, a simple prompt ask for recipient JID.
- A new "extra" menu is available next to input field. Inside there are 2 items for now:
add extra recipient, and toggle rich edit mode.
- Extra recipient option add a field to add an email-like "to", "cc" or "bcc" recipients.
- Rich edit let use rich styling such as bold, italic, underline, etc.
rel 461
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 04 Jul 2025 17:33:22 +0200 |
| parents | 049a0638f6fa |
| 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 | |
| 406 | 108 .attachments { |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
109 overflow-x: auto; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
110 white-space: nowrap; |
|
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-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
|
114 background-color: #f5f5f5; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
115 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
|
116 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
117 |
| 403 | 118 .message-body { |
| 119 white-space: pre-wrap; | |
| 120 overflow-wrap: break-word; | |
|
387
8b990c78d4b5
(bulma/chat): add menu + style for message retraction
Goffi <goffi@goffi.org>
parents:
386
diff
changeset
|
121 } |
|
8b990c78d4b5
(bulma/chat): add menu + style for message retraction
Goffi <goffi@goffi.org>
parents:
386
diff
changeset
|
122 |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
123 .message-attachment { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
124 max-width: 20rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
125 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
126 .status-icons { |
| 403 | 127 display: inline; |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
128 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
129 |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
130 .action-button { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
131 box-sizing: border-box; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
132 margin: 0 0.2rem; |
|
385
941e4006ab6e
bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents:
370
diff
changeset
|
133 user-select: none; |
| 403 | 134 cursor: pointer; |
|
385
941e4006ab6e
bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents:
370
diff
changeset
|
135 z-index: 10; |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
136 } |
|
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 .action-button:hover { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
139 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
|
140 border-radius: 50%; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
141 transition: box-shadow 0.3s ease; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
142 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
143 |
|
364
095bd5b34080
chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents:
362
diff
changeset
|
144 /* Attachments */ |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
145 |
| 406 | 146 .attachments { |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
147 opacity: 1; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
148 max-height: 1000px; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
149 transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
150 overflow-x: auto; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
151 overflow-y: hidden; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
152 padding: 1.25rem 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
153 margin: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
154 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
155 |
| 406 | 156 .attachments.is-contracted { |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
157 opacity: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
158 max-height: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
159 padding: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
160 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
161 |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
162 .attachment-preview { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
163 position: relative; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
164 border: 1px solid #dbdbdb; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
165 padding: 0.3rem 0.5rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
166 border-radius: 4px; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
167 background-color: #f5f5f5; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
168 width: 9rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
169 height: 6rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
170 } |
| 404 | 171 |
| 172 | |
| 173 /* Reply to indicator */ | |
| 174 #reply-to { | |
| 175 background-color: var(--message-background); | |
| 176 border-left: 4px solid #3273dc; | |
| 177 padding: 0.5rem; | |
| 178 margin-bottom: 1rem; | |
| 179 border-radius: 0.25rem; | |
| 180 } | |
| 406 | 181 |
| 182 /* Sub Messages Panel */ | |
| 183 | |
| 184 div.panel-block { | |
| 185 overflow-y: auto; | |
| 186 } | |
| 187 | |
| 188 #sub-messages { | |
| 189 overflow-y: auto; | |
| 190 } |