Make new SCSS work for non-variables
The SCSS that we took from Foundkey in a previous commit, is now working The settings for disabling MFM or only show animation on hover are working The previous representation also works and it's clearly marked in the code what is legacy All the MFM SCSS is now located in one file specifically for MFM, ./src/components/status_content/mfm.scss This is only SCSS: * The variables who are provided as data-attributes are not working yet * `sparkle` also doesn't work
This commit is contained in:
ilja
parent
94141dcb3c
commit
3065416c93
4 changed files with 394 additions and 516 deletions
228
static/mfm.css
228
static/mfm.css
|
|
@ -1,228 +0,0 @@
|
|||
/* Some MFM CSS is also defined in ./src/components/status_content/mfm.scss */
|
||||
.mfm {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
._mfm_tada_ {
|
||||
font-size: 150%;
|
||||
animation: mfm-tada 1s linear infinite both;
|
||||
}
|
||||
|
||||
._mfm_jelly_ {
|
||||
animation: mfm-jelly 1s linear infinite both;
|
||||
}
|
||||
|
||||
._mfm_twitch_ {
|
||||
animation: mfm-twitch 0.5s ease infinite;
|
||||
}
|
||||
|
||||
._mfm_shake_ {
|
||||
animation: mfm-shake 0.5s ease infinite;
|
||||
}
|
||||
|
||||
._mfm_spin_ {
|
||||
animation: mfm-spin 0.5s linear infinite;
|
||||
}
|
||||
|
||||
._mfm_spin_[data-x] {
|
||||
animation-name: mfm-spinX;
|
||||
}
|
||||
._mfm_spin_[data-y] {
|
||||
animation-name: mfm-spinY;
|
||||
}
|
||||
._mfm_spin_[left] {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
._mfm_spin_[alternate] {
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
._mfm_jump_ {
|
||||
animation: mfm-jump 0.75s linear infinite;
|
||||
}
|
||||
|
||||
._mfm_bounce_ {
|
||||
animation: mfm-bounce 0.75s linear infinite;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
._mfm_flip_[data-h][data-v] {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
._mfm_flip_[data-v] {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
._mfm_flip_:not([data-v]) {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
._mfm_x2_ {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
._mfm_x3_ {
|
||||
font-size: 400%;
|
||||
}
|
||||
|
||||
._mfm_x4_ {
|
||||
font-size: 600%;
|
||||
}
|
||||
|
||||
._mfm_blur_ {
|
||||
filter: blur(6px);
|
||||
transition: filter 0.3s
|
||||
}
|
||||
._mfm_blur_:hover {
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
||||
._mfm_rainbow_ {
|
||||
animation: mfm-rainbow 1s linear infinite;
|
||||
}
|
||||
|
||||
._mfm_rotate_ {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* sparkle */
|
||||
|
||||
@keyframes mfm-tada {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
transform: scaleX(0.9) scaleY(0.9);
|
||||
}
|
||||
|
||||
19% {
|
||||
transform: scaleX(1.1) scaleY(1.1);
|
||||
}
|
||||
|
||||
48% {
|
||||
transform: scaleX(0.95) scaleY(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(1) scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mfm-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes mfm-spinX {
|
||||
0% { transform: perspective(128px) rotateX(0deg); }
|
||||
100% { transform: perspective(128px) rotateX(360deg); }
|
||||
}
|
||||
|
||||
@keyframes mfm-spinY {
|
||||
0% { transform: perspective(128px) rotateY(0deg); }
|
||||
100% { transform: perspective(128px) rotateY(360deg); }
|
||||
}
|
||||
|
||||
@keyframes mfm-jump {
|
||||
0% { transform: translateY(0); }
|
||||
25% { transform: translateY(-16px); }
|
||||
50% { transform: translateY(0); }
|
||||
75% { transform: translateY(-8px); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes mfm-bounce {
|
||||
0% { transform: translateY(0) scale(1, 1); }
|
||||
25% { transform: translateY(-16px) scale(1, 1); }
|
||||
50% { transform: translateY(0) scale(1, 1); }
|
||||
75% { transform: translateY(0) scale(1.5, 0.75); }
|
||||
100% { transform: translateY(0) scale(1, 1); }
|
||||
}
|
||||
|
||||
@keyframes mfm-twitch {
|
||||
0% { transform: translate(7px, -2px); }
|
||||
5% { transform: translate(-3px, 1px); }
|
||||
10% { transform: translate(-7px, -1px); }
|
||||
15% { transform: translate(0, -1px); }
|
||||
20% { transform: translate(-8px, 6px); }
|
||||
25% { transform: translate(-4px, -3px); }
|
||||
30% { transform: translate(-4px, -6px); }
|
||||
35% { transform: translate(-8px, -8px); }
|
||||
40% { transform: translate(4px, 6px); }
|
||||
45% { transform: translate(-3px, 1px); }
|
||||
50% { transform: translate(2px, -10px); }
|
||||
55% { transform: translate(-7px, 0); }
|
||||
60% { transform: translate(-2px, 4px); }
|
||||
65% { transform: translate(3px, -8px); }
|
||||
70% { transform: translate(6px, 7px); }
|
||||
75% { transform: translate(-7px, -2px); }
|
||||
80% { transform: translate(-7px, -8px); }
|
||||
85% { transform: translate(9px, 3px); }
|
||||
90% { transform: translate(-3px, -2px); }
|
||||
95% { transform: translate(-10px, 2px); }
|
||||
100% { transform: translate(-2px, -6px); }
|
||||
}
|
||||
|
||||
@keyframes mfm-shake {
|
||||
0% { transform: translate(-3px, -1px) rotate(-8deg); }
|
||||
5% { transform: translate(0, -1px) rotate(-10deg); }
|
||||
10% { transform: translate(1px, -3px) rotate(0deg); }
|
||||
15% { transform: translate(1px, 1px) rotate(11deg); }
|
||||
20% { transform: translate(-2px, 1px) rotate(1deg); }
|
||||
25% { transform: translate(-1px, -2px) rotate(-2deg); }
|
||||
30% { transform: translate(-1px, 2px) rotate(-3deg); }
|
||||
35% { transform: translate(2px, 1px) rotate(6deg); }
|
||||
40% { transform: translate(-2px, -3px) rotate(-9deg); }
|
||||
45% { transform: translate(0, -1px) rotate(-12deg); }
|
||||
50% { transform: translate(1px, 2px) rotate(10deg); }
|
||||
55% { transform: translate(0, -3px) rotate(8deg); }
|
||||
60% { transform: translate(1px, -1px) rotate(8deg); }
|
||||
65% { transform: translate(0, -1px) rotate(-7deg); }
|
||||
70% { transform: translate(-1px, -3px) rotate(6deg); }
|
||||
75% { transform: translate(0, -2px) rotate(4deg); }
|
||||
80% { transform: translate(-2px, -1px) rotate(3deg); }
|
||||
85% { transform: translate(1px, -3px) rotate(-10deg); }
|
||||
90% { transform: translate(1px, 0) rotate(3deg); }
|
||||
95% { transform: translate(-2px, 0) rotate(-3deg); }
|
||||
100% { transform: translate(2px, 1px) rotate(2deg); }
|
||||
}
|
||||
|
||||
@keyframes mfm-jelly {
|
||||
from { transform: scale3d(1, 1, 1); }
|
||||
30% { transform: scale3d(1.25, 0.75, 1); }
|
||||
40% { transform: scale3d(0.75, 1.25, 1); }
|
||||
50% { transform: scale3d(1.15, 0.85, 1); }
|
||||
65% { transform: scale3d(0.95, 1.05, 1); }
|
||||
75% { transform: scale3d(1.05, 0.95, 1); }
|
||||
to { transform: scale3d(1, 1, 1); }
|
||||
}
|
||||
|
||||
@keyframes mfm-rainbow {
|
||||
0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
|
||||
100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue