treehouse/static/css/dev.css

/* Styles for developer tools.
   This stylesheet MUST NOT be used for modifying the appearance of elements globally.
   If you notice that it is for whatever reason, please bonk liquidex on the head. */

th-picture-upload {
    display: block;

    cursor: default;

    & > .nothing-pasted {
        border: 1px solid var(--border-1);
        text-align: center;
        opacity: 50%;
        padding: 16px;
    }

    & > .have-picture {
        & > p {
            padding-bottom: 8px;
        }

        & > img {
            max-height: 480px;
        }
    }

    & > .copied-to-clipboard {
        text-align: center;
        padding: 16px;
    }

    /* State display */

    & > * {
        display: none;
    }

    &[data-state="init"] > .nothing-pasted {
        display: block;
    }

    &[data-state="have-picture"] > .have-picture {
        display: block;
    }

    &[data-state="copied-to-clipboard"] > .copied-to-clipboard {
        display: block;
    }
}