LogalDeveloper/owncast
0
Fork 0
Code 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
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" /> <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
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
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;
}