diff --git a/assets/anim.october.scss b/assets/anim.october.scss index e067e40b..8fc0ba12 100644 --- a/assets/anim.october.scss +++ b/assets/anim.october.scss @@ -131,109 +131,7 @@ 70% { transform: translate(0px, 0px); } } -@mixin MAGE() { - .text > .generify-container:has(+ .generify-container.generify-emote-MAGE[data-modifiers~="mirror"]) { - @content; - } - .text > .generify-container.generify-emote-MAGE:not([data-modifiers~="mirror"]) + .generify-container { - @content; - } -} - -@include MAGE() { - margin-right: 0; - margin-left: 0; - animation: PsiStorm-flicker-anim 2s 3; - - &::after, &::before { - content: ""; - pointer-events: none; - position: absolute; - top: 50; - left: 50%; - margin: -20px -28px; - width: 64px; - height: 48px; - } - - &::before { - opacity: 0.8; - mix-blend-mode: screen; - background-color: #00a; - mask-image: url("/assets/emotes/modifiers/psistorm-mask.png"); - mask-size: 896px 48px; - mask-position: 64px 0px; - mask-repeat: no-repeat; - animation: PsiStorm-mask-anim 2s 3; - animation-timing-function: step-start; - z-index: 2; - } - - &::after { - background-image: url("/assets/emotes/modifiers/psistorm.png"); - background-size: 896px 48px; - background-position-x: 64px; - background-repeat: no-repeat; - animation: PsiStorm-anim 2s 3; - animation-timing-function: step-start; - z-index: 3; - filter: brightness(120%); - } - - @at-root .pref-animateforever &, &:hover { - animation-iteration-count: infinite; - } - - @at-root .pref-animateforever &::before, &:hover::before { - animation-iteration-count: infinite; - } - - @at-root .pref-animateforever &::after, &:hover::after { - animation-iteration-count: infinite; - } -} - -@keyframes PsiStorm-flicker-anim { - $frames: 28; - @for $i from 0 to $frames { - #{100 / $frames * $i * 1%} { - transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100); - filter: brightness(140 - random(80) * 1%); - } - } - 100% { - transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100); - filter: brightness(1); - } -} - -@keyframes PsiStorm-anim { - $frames: 14; - $width: 896px; - @for $i from 0 to $frames { - #{100 / $frames * $i * 1%} { - background-position-x: -$width / $frames * $i; - } - } - 100% { - background-position-x: 0px; - } -} - -@keyframes PsiStorm-mask-anim { - $frames: 14; - $width: 896px; - @for $i from 0 to $frames { - #{100 / $frames * $i * 1%} { - transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px); - mask-position: -$width / $frames * $i 0px; - } - } - 100% { - transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px); - mask-position: 0px 0px; - } -} +@include PsiStorm("MAGE"); @include sprite-animation( $file-name: COGGERS, diff --git a/assets/anim.scss b/assets/anim.scss index 9264c7ff..02f0dab9 100644 --- a/assets/anim.scss +++ b/assets/anim.scss @@ -1171,3 +1171,112 @@ $spritesDir : '/assets/emotes/emoticons-animated/'; } } } + + +@mixin PsiStormMirror($name) { + .text > .generify-container:has(+ .generify-container.generify-emote-#{$name}[data-modifiers~="mirror"]) { + @content; + } + .text > .generify-container.generify-emote-#{$name}:not([data-modifiers~="mirror"]) + .generify-container { + @content; + } +} + +@mixin PsiStorm($name) { + @include PsiStormMirror($name) { + margin-right: 0; + margin-left: 0; + animation: PsiStorm-flicker-anim 2s 3; + + &::after, &::before { + content: ""; + pointer-events: none; + position: absolute; + top: 50; + left: 50%; + margin: -20px -28px; + width: 64px; + height: 48px; + } + + &::before { + opacity: 0.8; + mix-blend-mode: screen; + background-color: #00a; + mask-image: url("/assets/emotes/modifiers/psistorm-mask.png"); + mask-size: 896px 48px; + mask-position: 64px 0px; + mask-repeat: no-repeat; + animation: PsiStorm-mask-anim 2s 3; + animation-timing-function: step-start; + z-index: 2; + } + + &::after { + background-image: url("/assets/emotes/modifiers/psistorm.png"); + background-size: 896px 48px; + background-position-x: 64px; + background-repeat: no-repeat; + animation: PsiStorm-anim 2s 3; + animation-timing-function: step-start; + z-index: 3; + filter: brightness(120%); + } + + @at-root .pref-animateforever &, &:hover { + animation-iteration-count: infinite; + } + + @at-root .pref-animateforever &::before, &:hover::before { + animation-iteration-count: infinite; + } + + @at-root .pref-animateforever &::after, &:hover::after { + animation-iteration-count: infinite; + } + } +} + +@keyframes PsiStorm-flicker-anim { + $frames: 28; + @for $i from 0 to $frames { + #{100 / $frames * $i * 1%} { + transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100); + filter: brightness(140 - random(80) * 1%); + } + } + 100% { + transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100); + filter: brightness(1); + } +} + +@keyframes PsiStorm-anim { + $frames: 14; + $width: 896px; + @for $i from 0 to $frames { + #{100 / $frames * $i * 1%} { + background-position-x: -$width / $frames * $i; + } + } + 100% { + background-position-x: 0px; + } +} + +@keyframes PsiStorm-mask-anim { + $frames: 14; + $width: 896px; + @for $i from 0 to $frames { + #{100 / $frames * $i * 1%} { + transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px); + mask-position: -$width / $frames * $i 0px; + } + } + 100% { + transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px); + mask-position: 0px 0px; + } +} + +@include PsiStorm("DOIT");