diff options
| author |  cel 🌸 <cel@bunny.garden> | 2025-05-06 20:46:16 +0100 |
|---|---|---|
| committer | cel 🌸 <cel@bunny.garden> | 2025-05-06 21:16:58 +0100 |
| commit | 7859947fcc643a96d20b7c56df912d8e3230429d (patch) | |
| tree | 0dede9bac67e1fd2182a7ffd975f3450ae510fa9 /assets | |
| parent | e3b5d43978f06f4a8c06d49467e4bb1d1f740375 (diff) | |
| download | macaw-web-7859947fcc643a96d20b7c56df912d8e3230429d.tar.gz macaw-web-7859947fcc643a96d20b7c56df912d8e3230429d.tar.bz2 macaw-web-7859947fcc643a96d20b7c56df912d8e3230429d.zip | |
feat: message buffer
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/style.scss | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/assets/style.scss b/assets/style.scss index deccd7c..b829501 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -289,6 +289,90 @@ p { grid-area: 1 / 1 / 2 / 2; } +.open-chat-view { + flex-grow: 1; + max-height: 100%; +} + +.messages-buffer { + display: flex; + flex-direction: column-reverse; + flex-grow: 1; + overflow: scroll; +} + +.chat-message { + display: flex; + padding: 4px 0; +} + +.chat-message:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.chat-message .left { + width: 48px; + flex: none; + padding: 0 8px; +} + +.chat-message .middle { + width: auto; + flex-grow: 1; +} + +.chat-message .right { + width: 16px; + padding: 0 8px; + flex: none; +} + +.message-info { + display: flex; + align-items: baseline; + gap: 8px; +} + +.message-text { + white-space: pre-wrap; +} + +.chat-message.major { + margin-top: 8px; +} + +.chat-message.major .left { + height: 48px; +} + +.chat-message.major .middle { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.message-info .message-user-name { + font-weight: bold; + font-size: 1.1em; + margin-bottom: 4px; +} + +.chat-message.major .message-timestamp { + font-weight: light; + font-size: 0.8em; +} + +.chat-message.minor .message-timestamp { + font-weight: light; + font-size: 0.7em; + /* TODO: better alignment */ + margin-top: 0.3em; +} + +.chat-message.minor:not(:hover) .message-timestamp { + opacity: 0; +} + /* font-families */ /* thai */ |