halloween message template

This commit is contained in:
supertiger1234 2019-10-16 11:54:52 +01:00
parent 7cdf95e6f5
commit 3ed763028f

View file

@ -2,7 +2,7 @@
<div class="container" @mouseover="hover = true" @mouseleave="hover = false"> <div class="container" @mouseover="hover = true" @mouseleave="hover = false">
<div <div
v-if="!type || type === 0" v-if="!type || type === 0"
:class="{message: true, ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} " :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID, halloween: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} "
> >
<div class="avatar"> <div class="avatar">
<profile-picture <profile-picture
@ -18,7 +18,7 @@
</div> </div>
<div class="content" @dblclick="contentDoubleClickEvent"> <div class="content" @dblclick="contentDoubleClickEvent">
<div class="user-info"> <div class="user-info">
<div class="username" <div class="username halloween-color"
@click="openUserInformation" @click="openUserInformation"
> >
{{ this.$props.username }} {{ this.$props.username }}
@ -338,6 +338,9 @@ export default {
.ownMessage .content { .ownMessage .content {
background: rgba(184, 184, 184, 0.219); background: rgba(184, 184, 184, 0.219);
} }
.ownMessage .content.halloween {
background: rgba(255, 135, 31, 0.43);
}
.ownMessage .date { .ownMessage .date {
color: rgb(209, 209, 209); color: rgb(209, 209, 209);
} }
@ -442,10 +445,14 @@ export default {
transition: 0.1s; transition: 0.1s;
cursor: pointer; cursor: pointer;
} }
.username:hover { .username:hover {
color: rgb(199, 199, 199); color: rgb(199, 199, 199);
text-decoration: underline; text-decoration: underline;
} }
.username.halloween-color {
color: orange
}
.date { .date {
color: rgb(177, 177, 177); color: rgb(177, 177, 177);
font-size: 10px; font-size: 10px;