From 961e212cd727661897019c63c76f29a7d190eb07 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Thu, 3 Sep 2020 02:44:50 -0700 Subject: [PATCH] update standalone chat styles --- webroot/index-standalone-chat.html | 2 ++ webroot/js/app-standalone-chat.js | 1 - webroot/styles/standalone-chat.css | 30 ++++++++++++++++++++++++++++-- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/webroot/index-standalone-chat.html b/webroot/index-standalone-chat.html index 463eb3c1c..47586a42a 100644 --- a/webroot/index-standalone-chat.html +++ b/webroot/index-standalone-chat.html @@ -8,6 +8,8 @@ + + diff --git a/webroot/js/app-standalone-chat.js b/webroot/js/app-standalone-chat.js index d2a2d0d0f..ffc64bf9b 100644 --- a/webroot/js/app-standalone-chat.js +++ b/webroot/js/app-standalone-chat.js @@ -31,7 +31,6 @@ export default class StandaloneChat extends Component { render(props, state) { const { username, userAvatarImage, websocket } = state; - return ( html` <${Chat} diff --git a/webroot/styles/standalone-chat.css b/webroot/styles/standalone-chat.css index 3354e7782..826a8f2f0 100644 --- a/webroot/styles/standalone-chat.css +++ b/webroot/styles/standalone-chat.css @@ -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 #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; +}