Mercurial > libervia-templates
annotate sat_templates/templates/bulma/static/chat.css @ 404:66f98ee041d8 default tip
chat: add UI for replies/threads:
rel 457
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Tue, 06 May 2025 00:37:41 +0200 |
| parents | 65c53ec5e777 |
| 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 /* Reaction colors */ | |
| 17 --reaction-background: #ffffff; | |
| 18 --reaction-hover-background: #f5f5f5; | |
| 19 --reaction-border: #dbdbdb; | |
| 20 | |
| 21 /* User reaction colors */ | |
| 22 --reaction-user-background: #eef6fc; | |
| 23 --reaction-user-hover-background: #e3f1fc; | |
| 24 --reaction-user-border: #3273dc; | |
| 25 | |
| 26 /* Spacing */ | |
| 27 --reaction-padding: 0.25rem 0.5rem; | |
| 28 --reaction-gap: 0.5rem; | |
| 29 --reaction-margin-top: 0.5rem; | |
| 30 | |
| 31 /* Typography */ | |
| 32 --reaction-font-size: 0.875rem; | |
| 33 --reaction-counter-font-size: 0.75rem; | |
| 34 } | |
| 35 | |
| 36 [data-theme="dark"] .chat-main { | |
| 37 --color-background: #2c2c2c; | |
| 38 --color-text: #ffffff; | |
| 39 | |
| 40 --message-background: #363636; | |
| 41 --message-hover-background: #404040; | |
| 42 | |
| 43 --reaction-background: #2c2c2c; | |
| 44 --reaction-hover-background: #404040; | |
| 45 --reaction-border: #4a4a4a; | |
| 46 | |
| 47 --reaction-user-background: #1a3b5c; | |
| 48 --reaction-user-hover-background: #234875; | |
| 49 --reaction-user-border: #3273dc; | |
| 50 } | |
| 51 | |
| 52 .chat-container { | |
| 53 height: 100%; | |
| 54 overflow-y: auto; | |
| 55 } | |
| 56 | |
| 57 .chat-main { | |
| 58 height: 100%; | |
| 59 display: flex; | |
| 60 flex-direction: column; | |
| 61 } | |
| 62 | |
| 63 .chat-header { | |
| 64 border-bottom: 1px solid #dbdbdb; | |
| 65 padding: 0.5rem 1rem; | |
| 66 } | |
| 67 | |
| 68 | |
| 69 /* Sidebar toggle transitions */ | |
| 70 .chat-sidebar, .chat-details { | |
| 71 transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease; | |
| 72 overflow-x: hidden; | |
| 73 } | |
| 74 | |
| 75 .chat-sidebar.is-collapsed { | |
| 76 transform: translateX(-100%); | |
| 77 max-width: 0; | |
| 78 padding: 0; | |
| 79 margin: 0; | |
| 80 opacity: 0; | |
| 81 } | |
| 82 | |
| 83 .chat-details.is-collapsed { | |
| 84 transform: translateX(100%); | |
| 85 max-width: 0; | |
| 86 padding: 0; | |
| 87 margin: 0; | |
| 88 opacity: 0; | |
| 89 } | |
| 90 | |
| 91 .chat-main.is-expanded-left { | |
| 92 margin-left: 0; | |
| 329 | 93 } |
| 94 | |
| 403 | 95 .chat-main.is-expanded-right { |
| 96 margin-right: 0; | |
| 97 } | |
| 98 | |
| 99 .columns.is-gapless.chat-container { | |
| 100 flex-wrap: nowrap; | |
| 101 } | |
| 102 | |
| 103 .author { | |
| 104 font-weight: bold; | |
| 105 } | |
| 329 | 106 #messages { |
| 403 | 107 flex-grow: 1; |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
108 overflow-y: auto; |
| 403 | 109 padding: 1rem; |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
110 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
111 |
| 403 | 112 #left_panel a { |
| 113 background-color: inherit; | |
| 114 } | |
| 115 | |
| 116 #left_panel a:hover { | |
| 117 background-color: #444; | |
| 118 } | |
| 119 | |
| 120 .chat-input { | |
| 121 border-top: 1px solid #dbdbdb; | |
| 122 padding: 1rem; | |
| 123 } | |
| 124 | |
| 125 .chat-input button { | |
| 126 height: 100%; | |
| 127 } | |
| 128 | |
| 129 .chat-message { | |
| 130 max-width: 95%; | |
| 131 } | |
| 132 | |
| 133 .message-core { | |
| 134 margin-bottom: 1rem; | |
| 135 padding: 0.75rem; | |
| 136 border-radius: 0.5rem; | |
| 137 overflow-wrap: anywhere; | |
| 138 background-color: #f5f5f5; | |
| 139 transition: background-color 0.2s, border-left 0.2s; | |
| 140 } | |
| 141 .message-core:hover, .message-core.has-popup-focus { | |
| 142 background-color: #e8e8e8; | |
| 143 border-left: 4px solid #3273dc; | |
| 144 } | |
| 145 | |
| 146 .message-actions { | |
| 147 display: none; | |
| 148 } | |
| 149 | |
| 150 .message-core:hover .message-actions, | |
| 151 .message-core.has-popup-focus .message-actions | |
| 152 { | |
| 153 display: flex; | |
| 154 } | |
| 155 | |
| 156 .reactions-container { | |
| 157 gap: var(--reaction-gap); | |
| 158 margin-top: var(--reaction-margin-top); | |
| 159 } | |
| 160 .reaction { | |
| 161 padding: var(--reaction-padding); | |
| 162 border-radius: 1rem; | |
| 163 background-color: var(--reaction-background); | |
| 164 font-size: var(--reaction-font-size); | |
| 165 cursor: pointer; | |
| 166 transition: all 0.2s ease; | |
| 167 border: 1px solid var(--reaction-border); | |
| 168 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); | |
| 169 } | |
| 170 | |
| 171 .reaction:hover { | |
| 172 background-color: var(--reaction-hover-background); | |
| 173 } | |
| 174 | |
| 175 .reaction .counter { | |
| 176 margin-left: 0.25rem; | |
| 177 font-size: var(--reaction-counter-font-size); | |
| 178 color: var(--color-text); | |
| 179 } | |
| 180 | |
| 181 .reaction.own-reaction { | |
| 182 background-color: var(--reaction-user-background); | |
| 183 border-color: var(--reaction-user-border); | |
| 184 } | |
| 185 | |
| 186 .reaction.own-reaction:hover { | |
| 187 background-color: var(--reaction-user-hover-background); | |
| 188 } | |
| 189 | |
| 190 | |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
191 #attachments { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
192 overflow-x: auto; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
193 white-space: nowrap; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
194 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
195 |
| 403 | 196 .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
|
197 background-color: #f5f5f5; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
198 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
|
199 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
200 |
| 403 | 201 .message-body { |
| 202 white-space: pre-wrap; | |
| 203 overflow-wrap: break-word; | |
|
387
8b990c78d4b5
(bulma/chat): add menu + style for message retraction
Goffi <goffi@goffi.org>
parents:
386
diff
changeset
|
204 } |
|
8b990c78d4b5
(bulma/chat): add menu + style for message retraction
Goffi <goffi@goffi.org>
parents:
386
diff
changeset
|
205 |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
206 .message-attachment { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
207 max-width: 20rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
208 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
209 .status-icons { |
| 403 | 210 display: inline; |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
211 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
212 |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
213 .action-button { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
214 box-sizing: border-box; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
215 margin: 0 0.2rem; |
|
385
941e4006ab6e
bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents:
370
diff
changeset
|
216 user-select: none; |
| 403 | 217 cursor: pointer; |
|
385
941e4006ab6e
bulma (message): reactions + fixes:
Goffi <goffi@goffi.org>
parents:
370
diff
changeset
|
218 z-index: 10; |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
219 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
220 |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
221 .action-button:hover { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
222 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
|
223 border-radius: 50%; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
224 transition: box-shadow 0.3s ease; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
225 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
226 |
|
364
095bd5b34080
chat: add templates for URL previews
Goffi <goffi@goffi.org>
parents:
362
diff
changeset
|
227 /* Attachments */ |
|
362
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
228 |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
229 #attachments { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
230 opacity: 1; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
231 max-height: 1000px; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
232 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
|
233 overflow-x: auto; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
234 overflow-y: hidden; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
235 padding: 1.25rem 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
236 margin: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
237 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
238 |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
239 #attachments.is-contracted { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
240 opacity: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
241 max-height: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
242 padding: 0; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
243 } |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
244 |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
245 .attachment-preview { |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
246 position: relative; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
247 border: 1px solid #dbdbdb; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
248 padding: 0.3rem 0.5rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
249 border-radius: 4px; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
250 background-color: #f5f5f5; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
251 width: 9rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
252 height: 6rem; |
|
b2b859a62e70
bulma (chat): new templates and CSS for chat page.
Goffi <goffi@goffi.org>
parents:
329
diff
changeset
|
253 } |
| 404 | 254 |
| 255 | |
| 256 /* Reply to indicator */ | |
| 257 #reply-to { | |
| 258 background-color: var(--message-background); | |
| 259 border-left: 4px solid #3273dc; | |
| 260 padding: 0.5rem; | |
| 261 margin-bottom: 1rem; | |
| 262 border-radius: 0.25rem; | |
| 263 } |