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

/*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-x {
        display: inline-block;
        scale: attr(data-scale number, 2);
    }
}

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

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

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