pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update standalone chat styles

pull/146/head
Ginger Wong 5 years ago
parent
0a3d1145f6
commit
961e212cd7
3 changed files with 30 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      webroot/index-standalone-chat.html
  2. 1
      webroot/js/app-standalone-chat.js
  3. 30
      webroot/styles/standalone-chat.css

2
webroot/index-standalone-chat.html
Unescape View File

@ -8,6 +8,8 @@
<link href="./styles/standalone-chat.css" rel="stylesheet" /> <link href="./styles/standalone-chat.css" rel="stylesheet" />
<script src="//unpkg.com/showdown/dist/showdown.min.js"></script> <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> </head>
<body> <body>

1
webroot/js/app-standalone-chat.js
Unescape View File

@ -31,7 +31,6 @@ export default class StandaloneChat extends Component {
render(props, state) { render(props, state) {
const { username, userAvatarImage, websocket } = state; const { username, userAvatarImage, websocket } = state;
return ( return (
html` html`
<${Chat} <${Chat}

30
webroot/styles/standalone-chat.css
Unescape View File

@ -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 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 */ /* modify this px number if you want things to be relatively bigger or smaller */
#messages-only { #messages-only {}
font-size: 16px;
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#messages-only #messages-container {
height: 100%;
height: 100vh;
overflow: auto;
} }
#messages-only .message-content { #messages-only .message-content {
text-shadow: 1px 1px 0px rgba(0,0,0,0.25); 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 { #messages-only .message-author {
color: rgba(20,0,40,1); 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;
}

Write Preview
Loading…
Cancel
Save