Message from commiter: Add Foundkey MFM stylesheet
This is part of a bigger work to fix MFM in Akkoma
See <AkkomaGang/akkoma#381>
Here we add the MFM stylesheet as it is used by Foundkey
See <b22e627089>
Foundkey uses MFM and both the Founkey and Akkoma projects and communities, have historically been closely related
As such it makes sense to start with feature-parity with Foundkey
This commit only adds the stylesheet so that correct attribution is given
Properly integrating and making it work will happen in later commits
This commit is contained in:
ilja
parent
92e278d406
commit
94141dcb3c
1 changed files with 274 additions and 0 deletions
274
src/components/status_content/mfm_foundkey.scss
Normal file
274
src/components/status_content/mfm_foundkey.scss
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
.mfm-center {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mfm-flip {
|
||||
display: inline-block;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.mfm-flip[data-mfm-v] {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
.mfm-flip[data-mfm-v][data-mfm-h] {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.mfm-font[data-mfm-serif] {
|
||||
font-family: serif;
|
||||
}
|
||||
.mfm-font[data-mfm-monospace] {
|
||||
font-family: monospace;
|
||||
}
|
||||
.mfm-font[data-mfm-cursive] {
|
||||
font-family: cursive;
|
||||
}
|
||||
.mfm-font[data-mfm-fantasy] {
|
||||
font-family: fantasy;
|
||||
}
|
||||
.mfm-font[data-mfm-emoji] {
|
||||
font-family: emoji;
|
||||
}
|
||||
.mfm-font[data-mfm-math] {
|
||||
font-family: math;
|
||||
}
|
||||
|
||||
.mfm-blur {
|
||||
filter: blur(6px);
|
||||
transition: filter 0.3s;
|
||||
|
||||
&:hover {
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.mfm-rotate {
|
||||
display: inline-block;
|
||||
transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.mfm-x2 {
|
||||
--mfm-zoom-size: 200%;
|
||||
}
|
||||
.mfm-x3 {
|
||||
--mfm-zoom-size: 400%;
|
||||
}
|
||||
.mfm-x4 {
|
||||
--mfm-zoom-size: 600%;
|
||||
}
|
||||
.mfm-x2, .mfm-x3, .mfm-x4, .mfm-tada {
|
||||
font-size: var(--mfm-zoom-size);
|
||||
|
||||
.mfm-x2, .mfm-x3, .mfm-x4, .mfm-tada {
|
||||
/* only half effective */
|
||||
font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
|
||||
|
||||
.mfm-x2, .mfm-x3, .mfm-x4, .mfm-tada {
|
||||
/* disabled */
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mfm-position {
|
||||
transform: translate(calc(var(--mfm-x, 0) * 1em), calc(var(--mfm-y, 0) * 1em));
|
||||
}
|
||||
|
||||
.mfm-scale {
|
||||
transform: scale(var(--mfm-x, 1), var(--mfm-y, 1));
|
||||
}
|
||||
|
||||
.mfm-fg {
|
||||
color: var(--mfm-color, #f00);
|
||||
}
|
||||
|
||||
.mfm-bg {
|
||||
background-color: var(--mfm-color, #0f0);
|
||||
}
|
||||
|
||||
.markdown-container {
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
padding: 6px 0 6px 12px;
|
||||
color: var(--fg);
|
||||
border-left: solid 3px var(--fg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
blockquote blockquote blockquote {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
blockquote > p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
blockquote > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animated-mfm {
|
||||
.mfm-jelly {
|
||||
display: inline-block;
|
||||
animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinite both;
|
||||
}
|
||||
|
||||
.mfm-twitch {
|
||||
display: inline-block;
|
||||
animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
|
||||
}
|
||||
|
||||
.mfm-shake {
|
||||
display: inline-block;
|
||||
animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
|
||||
}
|
||||
|
||||
.mfm-spin {
|
||||
display: inline-block;
|
||||
animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
|
||||
}
|
||||
.mfm-spin[data-mfm-y] {
|
||||
animation-name: mfm-spinY;
|
||||
}
|
||||
.mfm-spin[data-mfm-x] {
|
||||
animation-name: mfm-spinX;
|
||||
}
|
||||
.mfm-spin[data-mfm-alternate] {
|
||||
animation-direction: alternate;
|
||||
}
|
||||
.mfm-spin[data-mfm-left] {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.mfm-jump {
|
||||
display: inline-block;
|
||||
animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
|
||||
}
|
||||
|
||||
.mfm-bounce {
|
||||
display: inline-block;
|
||||
animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.mfm-rainbow {
|
||||
animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
|
||||
}
|
||||
|
||||
.mfm-tada {
|
||||
display: inline-block;
|
||||
animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
|
||||
--mfm-zoom-size: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
/* animation keyframes */
|
||||
|
||||
@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); }
|
||||
}
|
||||
|
||||
// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
|
||||
// let css = '';
|
||||
// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
|
||||
@keyframes mfm-twitch {
|
||||
0% { transform: translate(7px, -2px) }
|
||||
5% { transform: translate(-3px, 1px) }
|
||||
10% { transform: translate(-7px, -1px) }
|
||||
15% { transform: translate(0px, -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, 0px) }
|
||||
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) }
|
||||
}
|
||||
|
||||
// const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
|
||||
// let css = '';
|
||||
// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
|
||||
@keyframes mfm-shake {
|
||||
0% { transform: translate(-3px, -1px) rotate(-8deg) }
|
||||
5% { transform: translate(0px, -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(0px, -1px) rotate(-12deg) }
|
||||
50% { transform: translate(1px, 2px) rotate(10deg) }
|
||||
55% { transform: translate(0px, -3px) rotate(8deg) }
|
||||
60% { transform: translate(1px, -1px) rotate(8deg) }
|
||||
65% { transform: translate(0px, -1px) rotate(-7deg) }
|
||||
70% { transform: translate(-1px, -3px) rotate(6deg) }
|
||||
75% { transform: translate(0px, -2px) rotate(4deg) }
|
||||
80% { transform: translate(-2px, -1px) rotate(3deg) }
|
||||
85% { transform: translate(1px, -3px) rotate(-10deg) }
|
||||
90% { transform: translate(1px, 0px) rotate(3deg) }
|
||||
95% { transform: translate(-2px, 0px) rotate(-3deg) }
|
||||
100% { transform: translate(2px, 1px) rotate(2deg) }
|
||||
}
|
||||
|
||||
@keyframes mfm-rubberBand {
|
||||
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%); }
|
||||
}
|
||||
|
||||
@keyframes mfm-tada {
|
||||
0%, 100% { 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); }
|
||||
}
|
||||
Loading…
Reference in a new issue