Iceshrimp.NET/Iceshrimp.Frontend/Components/MfmText.razor.css

.mfm {
    line-height: 1.6;
}

/*These must apply to all child attributes*/
::deep {
    .mention {
        text-decoration: none;
        background-color: var(--highlight-color);
        border-radius: 1em;
        padding: 0.2em 0.5em;

        > .host {
            opacity: 0.5;
        }

        > .user {

        }
    }
}

::deep {
    .mention {
        text-decoration: none;
        color: var(--notice-color);
    }
}

::deep {
    .emoji {
        display: inline;
        position: relative;
        top: 0;

        > img {
            height: 2em;
            vertical-align: middle;
            transition-duration: 250ms;
        }
    }
}

::deep {
    .emoji {
        > img:hover {
            transform: scale(1.5);
            transition-duration: 250ms;
            position: relative;
            z-index: +1;
        }
    }
}

::deep {
    .emoji.simple {
        > img {
            height: 1.25em;
            vertical-align: -0.25em;
        }
    }
}

::deep {
    .emoji.simple {
        > img:hover {
            transform: none;
        }
    }
}

::deep {
    .quote-node {
        /*Copying the appearance of -js*/
        margin: 8px 0;
        padding-left: 12px;
        border-left: solid 4px var(--highlight-color);
    }
}

::deep {
    .link-node {
        color: var(--link);
    }
}

::deep {
    .url-node {
        color: var(--link);
    }
}

::deep {
    .hashtag-node {
        text-decoration-line: none;
        color: var(--link);
    }
}

::deep {
    .hashtag-node:hover {
        text-decoration-line: underline;
    }
}

::deep {
    .plain {
        text-decoration: none;
    }
}

::deep {
    .code-pre {
        overflow: auto;
    }
}

/* fn nodes */
::deep {
    .fn-flip.h {
        display: inline-block;
        transform: scaleX(-1);
    }
}

::deep {
    .fn-flip.v {
        display: inline-block;
        transform: scaleY(-1);
    }
}

::deep {
    .fn-flip.h.v {
        display: inline-block;
        transform: scaleX(-1) scaleY(-1);
    }
}

::deep {
    .fn-blur {
        filter: blur(6px);
        transition: filter 0.3s;
    }
}

::deep {
    .fn-blur:hover {
        filter: blur(0);
    }
}

/* Animation keyframes prefixed with fn- are adapted from Misskey under fair use / for interoperability */

@keyframes fn-jelly {
    0% {
        transform: scaleZ(1);
    }
    30% {
        transform: scale3d(1.25, .75, 1);
    }
    40% {
        transform: scale3d(.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, .85, 1);
    }
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, .95, 1);
    }
    to {
        transform: scaleZ(1);
    }
}

@keyframes fn-tada {
    0% {
        transform: scaleZ(1);
    }
    10%,
    20% {
        transform: scale3d(.9, .9, .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: scaleZ(1);
    }
}

@keyframes fn-jump {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-16px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-8px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fn-bounce {
    0% {
        transform: translateY(0) scale(1);
    }
    25% {
        transform: translateY(-16px) scale(1);
    }
    50% {
        transform: translateY(0) scale(1);
    }
    75% {
        transform: translateY(0) scale(1.5, .75);
    }
    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes fn-shake {
    0% {
        transform: translate(-3px, -1px) rotate(-8deg);
    }
    5% {
        transform: translateY(-1px) rotate(-10deg);
    }
    10% {
        transform: translate(1px, -3px) rotate(0);
    }
    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: translateY(-1px) rotate(-12deg);
    }
    50% {
        transform: translate(1px, 2px) rotate(10deg);
    }
    55% {
        transform: translateY(-3px) rotate(8deg);
    }
    60% {
        transform: translate(1px, -1px) rotate(8deg);
    }
    65% {
        transform: translateY(-1px) rotate(-7deg);
    }
    70% {
        transform: translate(-1px, -3px) rotate(6deg);
    }
    75% {
        transform: translateY(-2px) rotate(4deg);
    }
    80% {
        transform: translate(-2px, -1px) rotate(3deg);
    }
    85% {
        transform: translate(1px, -3px) rotate(-10deg);
    }
    90% {
        transform: translate(1px) rotate(3deg);
    }
    95% {
        transform: translate(-2px) rotate(-3deg);
    }
    to {
        transform: translate(2px, 1px) rotate(2deg);
    }
}

@keyframes fn-twitch {
    0% {
        transform: translate(7px, -2px);
    }
    5% {
        transform: translate(-3px, 1px);
    }
    10% {
        transform: translate(-7px, -1px);
    }
    15% {
        transform: translateY(-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);
    }
    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);
    }
    to {
        transform: translate(-2px, -6px);
    }
}

@keyframes fn-rainbow {
    0% {
        filter: hue-rotate(0deg) contrast(150%) saturate(150%);
    }
    to {
        filter: hue-rotate(360deg) contrast(150%) saturate(150%);
    }
}

::deep {
    .fn-animation {
        display: inline-block;
        animation-delay: 0s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

@keyframes fn-spin {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fn-spin-x {
    0% {
        transform: perspective(128px) rotateX(0);
    }
    to {
        transform: perspective(128px) rotateX(360deg);
    }
}

@keyframes fn-spin-y {
    0% {
        transform: perspective(128px) rotateY(0);
    }
    to {
        transform: perspective(128px) rotateY(360deg);
    }
}

::deep {
    .fn-spin {
        display: inline-block;
        animation-delay: 0s;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

::deep {
    .fn-rotate {
        display: inline-block;
        transform-origin: center center 0;
    }
}

@keyframes fn-fade {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

::deep {
    .fn-fade {
        display: inline-block;
        animation-delay: 0s;
        animation-direction: alternate;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        animation-name: fn-fade;
        animation-timing-function: linear;
    }
}