LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

style updates to message-only

Browse Source
This commit is contained in:
Ginger Wong 2020-08-19 14:46:20 -07:00
parent 0325af3ce7
commit 756311f03c
6 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webroot/js/chat/chat-input.js
View File

@ -66,6 +66,8 @@ export default class ChatInput extends Component {
custom: json,
initialCategory: 'custom',
showPreview: false,
emojiSize: '30px',
emojisPerRow: 6,
position: 'top'
});
this.emojiPicker.on('emoji', emoji => {

2
webroot/js/chat/chat.js
View File

@ -182,7 +182,7 @@ export default class Chat extends Component {
if (messagesOnly) {
return (
html`
<div id="messages-container" class="messages-only">
<div id="messages-container">
${messageList}
</div>
`);

2
webroot/js/chat/message.js
View File

@ -28,7 +28,7 @@ export default class Message extends Component {
<img src=${avatar} />
</div>
<div class="message-content">
<p class="message-author text-white font-bold">${author}</p>
<p class="message-author text-white font-bold" style=${authorTextColor}>${author}</p>
<div
class="message-text text-gray-400 font-thin"
dangerouslySetInnerHTML=${

4
webroot/standalone-chat.html
View File

@ -13,7 +13,7 @@
</head>
<body class="bg-gray-300 text-gray-800">
<body class="messages-only">
<div id="chat-container"></div>
@ -21,7 +21,7 @@
import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
import StandaloneChat from './js/chat/standalone.js';
const messagesOnly = true;
const messagesOnly = false;
(function () {
render(html`<${StandaloneChat} messagesOnly=${messagesOnly} />`, document.getElementById("chat-container"));

9
webroot/styles/chat.css
View File

@ -36,10 +36,9 @@
cursor: pointer;
margin-right: .5em;
}
.emoji-picker__wrapper {}
.emoji-picker__emoji {
border-radius: 10px;
}
.message {
@ -65,8 +64,6 @@
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */

9
webroot/styles/standalone-chat.css
View File

@ -4,20 +4,23 @@ The styles in this file mostly ovveride those coming from chat.css
*/
#messages-container.messages-only {
.messages-only {
/* modify this px number if you want things to be relatively bigger or smaller 8*/
font-size: 16px;
padding: 1em .5em;
background-color: rgba(0,0,0,.4);
}
.messages-only .message-content {
text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
}
.message-avatar {
display: none;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
}
.message-avatar img {
height: 1.8em;
width: 1.8em;
}
.messages-only .message {
padding: .5em;
}