remix-nlux/packages/css/themes/src/common/components/Message.css

Remix IDE NLUX integration. Remix IDE is the leading IDE for building and deploying smart contracts on Ethereum. NLUX is a JavaScript and React library for building conversational AI experiences.

.nlux-comp-message > .nlux-markdownStream-root {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 0.5em;

    .md-in-progress:empty {
        display: none;
    }
}

.nlux-comp-message .nlux-markdown-container:focus {
    outline: none;
}

.nlux-comp-message .editable-markdown-container {
    cursor: text;
}

.nlux-comp-message .nlux-markdown-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5em;

    :is(p, pre, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, table, hr) {
        margin: 0;
        padding: 0;
    }

    :is(ul, ol) {
        padding-left: 1.5em;

        li {
            margin: 0.5em 0;
        }
    }

    > .code-block {
        font-family: var(--nlux-cdBlk--ftFm), monospace;
        font-size: var(--nlux-cdBlk--ftSz);

        position: relative;
        max-width: 100%;

        color: var(--nlux-cdBlk--txtClr);
        border: var(--nlux-cdBlk--brdrWd) solid var(--nlux-cdBlk--brdClr);
        border-radius: var(--nlux-cdBlk--brdrRd);
        background-color: var(--nlux-cdBlk--bgClr);
    }

    > .code-block > pre {
        overflow: auto;
        width: 100%;
        min-width: 100%;
        padding: 10px 0;
    }

    > .code-block > pre > div {
        padding: 0 var(--nlux-cdBlk--pdng);
    }

    > .code-block > pre > div:hover {
        background-color: var(--nlux-cdBlk-hover--bgClr);
    }

    button.nlux-comp-copyButton {
        position: absolute;
        z-index: 888888;
        top: 5px;
        right: 0;
        display: flex;
        width: var(--nlux-cdBlk-cpBtn--wd);

        margin-right: calc(var(--nlux-cdBlk-cpBtn--wd) / 2);
        margin-bottom: calc(-1 * var(--nlux-cdBlk-cpBtn--hg));
        margin-left: auto;

        padding: var(--nlux-cdBlk-cpBtn--pdng);

        cursor: pointer;
        color: var(--nlux-cdBlk-cpBtn--txtClr);
        border: var(--nlux-cdBlk-cpBtn--brdrWd) solid var(--nlux-cdBlk-cpBtn--brdClr);
        border-radius: var(--nlux-cdBlk-cpBtn--brdrRd);
        background-color: var(--nlux-cdBlk-cpBtn--bgClr);

        > .icon-copy {
            display: inline-block;
            width: 100%;
            background-color: currentColor;
            background-repeat: no-repeat;
            background-size: contain;
            mask: var(--nlux-copy-icon);
            aspect-ratio: 1;
        }
    }

    button.nlux-comp-copyButton {
        &.clicked,
        &.clicked:hover {
            color: var(--nlux-cdBlk-cpBtn-clck--txtClr);
            border-color: var(--nlux-cdBlk-cpBtn-clck--brdClr);
            background-color: var(--nlux-cdBlk-cpBtn-clck--bgClr);
        }

        &:hover * {
            opacity: 0.5;
        }

        &.clicked:hover * {
            opacity: 1;
        }
    }

    code {
        font-family: var(--nlux-inlnCd--ftFm), monospace;
        font-size: var(--nlux-inlnCd--ftSz);

        padding: var(--nlux-inlnCd--pdng);

        color: var(--nlux-inlnCd--txtClr);
        border-width: var(--nlux-inlnCd--brdrWd);
        border-style: solid;
        border-color: var(--nlux-inlnCd--brdClr);
        border-radius: var(--nlux-inlnCd--brdrRd);
        background-color: var(--nlux-inlnCd--bgClr);
    }

    strong {
        font-weight: bold;
    }
}