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 */