diff --git a/webroot/js/chat/chat.js b/webroot/js/chat/chat.js
index 54caabc4c..4b9ee9649 100644
--- a/webroot/js/chat/chat.js
+++ b/webroot/js/chat/chat.js
@@ -182,7 +182,7 @@ export default class Chat extends Component {
if (messagesOnly) {
return (
html`
-
+
${messageList}
`);
diff --git a/webroot/js/chat/message.js b/webroot/js/chat/message.js
index 6de5afa82..413148576 100644
--- a/webroot/js/chat/message.js
+++ b/webroot/js/chat/message.js
@@ -14,7 +14,10 @@ export default class Message extends Component {
const { image, author, body } = message;
const formattedMessage = formatMessageText(body, username);
const avatar = image || generateAvatar(author);
- const avatarBgColor = { backgroundColor: messageBubbleColorForString(author) };
+
+ const authorColor = messageBubbleColorForString(author);
+ const avatarBgColor = { backgroundColor: authorColor };
+ const authorTextColor = { color: authorColor };
return (
html`
diff --git a/webroot/styles/standalone-chat.css b/webroot/styles/standalone-chat.css
index 898ece926..8a4b40e88 100644
--- a/webroot/styles/standalone-chat.css
+++ b/webroot/styles/standalone-chat.css
@@ -1,4 +1,34 @@
/*
-The styles in this file mostly ovveride those coming fro chat.css
+The styles in this file mostly ovveride those coming from chat.css
*/
+
+
+#messages-container.messages-only {
+
+ /* modify this px number if you want things to be relatively bigger or smaller 8*/
+ font-size: 16px;
+
+ padding: 1em .5em;
+ background-color: rgba(0,0,0,.4);
+}
+.messages-only .message-content {
+ text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
+}
+.message-avatar {
+ box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
+}
+.messages-only .message {
+ padding: .5em;
+}
+
+.messages-only .message-text {
+ font-weight: 400;
+ color: white;
+}
+.messages-only .message-text a {
+ color: #fc0;
+}
+.messages-only .message-author {
+ color: rgba(20,0,40,1);
+}