LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Create padding around chat avatars and the colored container

Browse Source
This commit is contained in:
Gabe Kangas 2020-07-19 22:57:42 -07:00
parent 0fb48d8a7c
commit cbbff2e5f5
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webroot/index.html
View File

@ -124,11 +124,11 @@
<div id="messages-container"> <div id="messages-container">
<div v-for="message in messages" v-cloak> <div v-for="message in messages" v-cloak>
<div class="message flex"> <div class="message flex">
<div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
<img <img
v-bind:src="message.image" v-bind:src="message.image"
class="message-avatar rounded-full bg-black bg-opacity-50"
v-bind:style="{ backgroundColor: message.userColor() }"
/> />
</div>
<div class="message-content"> <div class="message-content">
<p class="message-author text-white font-bold">{{ message.author }}</p> <p class="message-author text-white font-bold">{{ message.author }}</p>
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p> <p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>

9
webroot/styles/layout.css
View File

@ -407,10 +407,15 @@ h2 {
align-items: flex-start; align-items: flex-start;
} }
.message-avatar { .message-avatar {
height: 2.5em;
width: 2.5em;
margin-right: .75em; margin-right: .75em;
} }
.message-avatar img {
max-width: unset;
height: 25.em;
width: 2.5em;
padding: 6px;
}
.message-content { .message-content {
font-size: .85em; font-size: .85em;
} }