mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-17 21:41:16 +00:00
105 lines
2.1 KiB
Vue
105 lines
2.1 KiB
Vue
<template>
|
|
<div class="outer-profile-picture">
|
|
<div
|
|
:class="`profile-picture ${adminType ? adminType.name : ''}`"
|
|
:style="`padding: ${$props.animationPadding || '3px'}`"
|
|
>
|
|
<img
|
|
v-if="adminType"
|
|
class="emote"
|
|
:src="adminType.emotePath"
|
|
:style="`width: ${$props.emoteSize || '20px'}; height: ${$props.emoteSize ||'20px'}`"
|
|
>
|
|
<div
|
|
:class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
|
|
:style="`height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["url", "size", "emoteSize", "admin", "hover", "animationPadding"],
|
|
data() {
|
|
return {
|
|
crown: require("twemoji/2/svg/1f451.svg"),
|
|
flower: require("twemoji/2/svg/1f33a.svg")
|
|
};
|
|
},
|
|
computed: {
|
|
adminType() {
|
|
if (this.$props.admin == 3)
|
|
return {
|
|
name: "creator",
|
|
emotePath: this.crown
|
|
};
|
|
if (this.$props.admin == 4)
|
|
return {
|
|
name: "cute",
|
|
emotePath: this.flower
|
|
};
|
|
return ""
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.outer-profile-picture{
|
|
z-index: 9999;
|
|
user-select: none;
|
|
}
|
|
.profile-picture {
|
|
position: relative;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.inner-profile-picture {
|
|
background-color: rgba(0, 0, 0, 0.315);
|
|
border-radius: 50%;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
transition: 0.2s;
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-transform: translateZ(0) scale(1, 1);
|
|
transform: translateZ(0);
|
|
}
|
|
.hoverable:hover {
|
|
filter: brightness(80%);
|
|
}
|
|
.creator {
|
|
margin-right: 5px;
|
|
margin-left: 0;
|
|
flex-shrink: 0;
|
|
margin: auto;
|
|
background: #ffd828 100%;
|
|
|
|
|
|
}
|
|
.cute {
|
|
margin-right: 5px;
|
|
margin-left: 0;
|
|
flex-shrink: 0;
|
|
margin: auto;
|
|
background: #ffb7ed;
|
|
}
|
|
.cute .emote {
|
|
z-index: 999;
|
|
top: -3px;
|
|
left: -3px;
|
|
}
|
|
|
|
.emote {
|
|
position: absolute;
|
|
height: 20px;
|
|
width: 20px;
|
|
transform: rotate(-40deg);
|
|
top: -6px;
|
|
left: -6px;
|
|
z-index: -1;
|
|
}
|
|
</style>
|