update standalone chat styles

5 years ago · 961e212cd7
3 changed files with 30 additions and 3 deletions
--- a/webroot/index-standalone-chat.html
+++ b/webroot/index-standalone-chat.html
@ -8,6 +8,8 @@
				@@ -8,6 +8,8 @@
    <link href="./styles/standalone-chat.css" rel="stylesheet" />

    <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js"></script>
+
  </head>

  <body>
--- a/webroot/js/app-standalone-chat.js
+++ b/webroot/js/app-standalone-chat.js
@ -31,7 +31,6 @@ export default class StandaloneChat extends Component {
				@@ -31,7 +31,6 @@ export default class StandaloneChat extends Component {

  render(props, state) {
    const { username, userAvatarImage, websocket } = state;
-
    return (
      html`
        <${Chat}
--- a/webroot/styles/standalone-chat.css
+++ b/webroot/styles/standalone-chat.css
@ -1,10 +1,29 @@
				@@ -1,10 +1,29 @@
+/*
+Example/Suggested custom CSS settings to set in OBS.
+///
+html { margin: 0px; padding: 20px; background-color: rgba(0,0,0,0.5); font-size: 24px; }
+///
+This one will add some space around box, give it a semi-transparent dark background; and increase the overall to a base unit of 24px.
+
+You may change any of these settings to fit your presentation layout. Note that the overall message text color is white.
+*/
+
 /*
 The styles in this file mostly ovveride those coming from chat.css
 */

 /* modify this px number if you want things to be relatively bigger or smaller */
-#messages-only {
-  font-size: 16px;
+#messages-only {}
+
+::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+
+#messages-only #messages-container {
+  height: 100%;
+  height: 100vh;
+  overflow: auto;
 }
 #messages-only .message-content {
  text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
@ -31,3 +50,10 @@ The styles in this file mostly ovveride those coming from chat.css
				@@ -31,3 +50,10 @@ The styles in this file mostly ovveride those coming from chat.css
 #messages-only .message-author {
  color: rgba(20,0,40,1);
 }
+
+#messages-only .message-text .chat-embed,
+#messages-only .message-text .instagram-embed,
+#messages-only .message-text .embedded-image,
+#messages-only .message-text .youtube-embed  {
+  max-width: 350px;
+}