mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-28 19:19:06 +03:00
Code Issues Projects Releases Packages Wiki Activity

update standalone chat styles

Browse source
This commit is contained in:
Ginger Wong 2020-09-03 02:44:50 -07:00
parent 0a3d1145f6
commit 961e212cd7
3 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webroot/index-standalone-chat.html
View file

@ -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>

1
webroot/js/app-standalone-chat.js
View file

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

30
webroot/styles/standalone-chat.css
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
*/
/* 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;
}