treehouse/static/css/noncritical.css

/* Style dialogues */

dialog[open] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    color: var(--text-color);
    background-color: var(--background-color);
    border: 0.1rem solid var(--border-1);
    border-radius: 1.2rem;
}

/* Command line */

th-command-line {
    --recursive-mono: 1;

    display: none;
    flex-direction: column;

    background-color: var(--background-color-tooltip);
    font-size: 87.5%;

    &.visible {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    & > .input-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;

        padding: 0 0.4rem;
        width: 100%;

        &::before {
            content: ":";
            padding-right: 0.2rem;
            opacity: 50%;
        }

        & > input {
            background: none;
            color: var(--text-color);
            border: none;
            flex-grow: 1;

            padding: 0.2rem 0;

            &:focus {
                outline: none;
            }
        }
    }

    & > ul.suggestions {
        list-style: none;

        display: flex;
        flex-direction: column;

        margin: 0;
        padding: 0;

        max-height: 25vh;
        overflow: auto;

        & > li {
            padding: 0.2rem 0.8rem;

            cursor: default;

            & > dfn {
                --recursive-crsv: 0;
                font-weight: 700;
                margin-right: 2ch;
            }

            &:hover,
            &.tabbed {
                background-color: var(--accent-purple);
                color: white;
            }

            &.immediate {
                cursor: pointer;
            }
        }
    }
}

@media (hover: none) {
    th-command-line {
        & > ul.suggestions > li {
            border-bottom: 0.1rem solid var(--border-1);
        }
    }
}

@media (pointer: coarse) {
    th-command-line {
        & > .input-wrapper > input {
            padding: 0.8rem 0;
        }

        & > ul.suggestions > li {
            padding: 0.8rem 0.8rem;
        }
    }
}

/* Literate programming support */

th-literate-program,
th-literate-output {
    display: block;
}

th-literate-program {
    white-space: pre;
}

th-literate-program[data-mode="input"] {
    /* Override the cursor with an I-beam, because the editor captures clicks and does not bubble
       them back up to the caller */
    cursor: text;
}

th-literate-program[data-mode="output"] {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;

    & iframe,
    & img.placeholder-image {
        border-style: none;
        border-radius: 0.4rem;
        display: block;
    }

    & iframe {
        width: 100%;
    }

    & img.placeholder-image.js {
        transition: opacity var(--transition-duration);
    }

    & iframe,
    & img.placeholder-image.loading {
        opacity: 50%;
    }

    & iframe.loaded {
        opacity: 100%;
    }

    /* The inner iframe is hidden until something requests display. */
    & iframe.hidden {
        display: none;
    }

    & pre > code {
        display: block;
    }

    & pre.error {
        color: var(--error-color);
        position: relative;

        &:empty {
            display: none;
        }

        &::after {
            content: "Error";

            padding: 0.8rem;

            position: absolute;
            right: 0;
            top: 0;

            color: var(--text-color);
            opacity: 50%;
        }
    }

    & pre.console,
    & pre.placeholder-console {
        position: relative;
        margin-top: 0;
        margin-bottom: 0;

        &:empty {
            display: none;
        }

        &::after {
            content: "Console";

            padding: 0.8rem;

            position: absolute;
            right: 0;
            top: 0;

            color: var(--text-color);
            opacity: 50%;
        }
    }
}

/* Syntax highlighting */

:root {
    --syntax-comment: #78579f;
    --syntax-identifier: var(--text-color);
    --syntax-keyword1: #b03b0d;
    --syntax-keyword2: #02739d;
    --syntax-operator: #ac4141;
    --syntax-function: #9940b9;
    --syntax-literal: #4c49a8;
    --syntax-string: #2c7754;
    --syntax-punct: #6c657b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --syntax-comment: #a8a2b9;
        --syntax-identifier: var(--text-color);
        --syntax-keyword1: #ffb496;
        --syntax-keyword2: #98dcfd;
        --syntax-operator: #ffa5a5;
        --syntax-function: #ffde9e;
        --syntax-literal: #ffcaf4;
        --syntax-string: #d6fbaa;
        --syntax-punct: #a8a2b9;
    }
}

.th-syntax-highlighting span {
    &.comment {
        font-style: oblique 8deg;
        color: var(--syntax-comment);
    }

    &.identifier {
        color: var(--syntax-identifier);
    }

    &.keyword1 {
        color: var(--syntax-keyword1);
    }

    &.keyword2 {
        color: var(--syntax-keyword2);
    }

    &.operator {
        color: var(--syntax-operator);
    }

    &.function {
        color: var(--syntax-function);
    }

    &.literal {
        color: var(--syntax-literal);
    }

    &.string {
        color: var(--syntax-string);
    }

    &.punct {
        color: var(--syntax-punct);
    }

    &.error {
        color: var(--error-color);
        text-decoration: wavy underline;
    }

    &.hidden {
        display: none;
    }

    &.type-hint {
        color: var(--syntax-comment);
        font-size: 80%;
    }
}

.th-syntax-highlighting th-comment-columns {
    display: grid;
    grid-template-columns: repeat(2, max-content);
}

.th-syntax-highlighting {
    & .export {
        text-decoration: underline dotted;
        cursor: help;
        text-decoration-color: transparent;
        transition: text-decoration-color var(--transition-duration);
    }

    &:hover,
    &:focus {
        & .export {
            text-decoration-color: var(--syntax-keyword1);
        }
    }
}