@@ -11,46 +11,21 @@
@@ -74,27 +49,27 @@
private classes: string[] = []
mounted() {
- const range = 90
+ const range = 50
let count = 0
let finish: Array
> = []
- this.classes = [this.emote.type]
+ this.classes = ['emote', this.emote.type]
for (let child of this.container.children) {
const ele = child as HTMLElement
- ele.style['left'] = `${count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0)}px`
+ ele.style['left'] = `${count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0)}%`
ele.style['opacity'] = `0`
const animation = this.$anime({
targets: child,
keyframes: [
- { left: count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0), opacity: 1 },
- { left: count % 2 ? this.$anime.random(-range, 0) : this.$anime.random(0, range), opacity: 0.5 },
- { left: count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0), opacity: 0 },
+ { left: `${count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0)}%`, opacity: 1 },
+ { left: `${count % 2 ? this.$anime.random(-range, 0) : this.$anime.random(0, range)}%`, opacity: 0.5 },
+ { left: `${count % 2 ? this.$anime.random(0, range) : this.$anime.random(-range, 0)}%`, opacity: 0 },
],
elasticity: 600,
rotate: this.$anime.random(-35, 35),
- top: this.$anime.random(-100, -250),
+ top: `${this.$anime.random(-200, -600)}%`,
duration: this.$anime.random(1000, 2000),
easing: 'easeInOutQuad',
})
diff --git a/client/src/components/emotes.vue b/client/src/components/emotes.vue
index 7c13e03..19558e8 100644
--- a/client/src/components/emotes.vue
+++ b/client/src/components/emotes.vue
@@ -1,13 +1,18 @@
@@ -23,53 +28,147 @@
font-size: 24px;
margin: 0 5px;
+ i,
div {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .context {
+ background-color: $background-floating;
+ background-clip: padding-box;
+ border-radius: 0.25rem;
+ display: flex;
+ margin: 0;
+ padding: 5px;
+ width: 220px;
+ z-index: 1500;
+ position: fixed;
+ list-style: none;
+ box-sizing: border-box;
+ max-height: calc(100% - 50px);
+ color: $interactive-normal;
+ flex-wrap: wrap;
+ user-select: none;
+ box-shadow: $elevation-high;
+
+ > li {
+ margin: 0;
+ position: relative;
+ align-content: center;
+ padding: 5px;
+ border-radius: 3px;
+
+ .emote {
width: 24px;
height: 24px;
- cursor: pointer;
- background-size: contain;
-
- &.celebrate {
- background-image: url('../assets/images/emote/celebrate.png');
- }
-
- &.clap {
- background-image: url('../assets/images/emote/clap.png');
- }
-
- &.exclam {
- background-image: url('../assets/images/emote/exclam.png');
- }
-
- &.heart {
- background-image: url('../assets/images/emote/heart.png');
- }
-
- &.laughing {
- background-image: url('../assets/images/emote/laughing.png');
- }
-
- &.sleep {
- background-image: url('../assets/images/emote/sleep.png');
- }
}
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ background-color: $background-modifier-hover;
+ color: $interactive-hover;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ &:focus {
+ outline: 0;
}
}
}