rkgk/static/index.css

/* index.css - styles for index.html and generally main parts of the app
   For shared styles (such as color definitions) check out base.css. */

/* Main container layout */

body {
    width: 100vw;
    height: 100vh;

    font-size: 14px;
}

main {
    width: 100%;
    height: 100%;
    position: relative;

    &>.fullscreen {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    &>.panels {
        --right-width: 384px; /* Overridden by JavaScript */
        
        box-sizing: border-box;
        padding: 16px;

        display: grid;
        grid-template-columns: [left] 1fr [right-resize] auto [right] var(--right-width);

        /* Pass all events through. Children may receive events as normal. */
        pointer-events: none;

        &>* {
            pointer-events: all;
        }

        &>.right {
            grid-column: right / right;
            height: fit-content;
            min-height: 0;
            max-height: 100%;

            display: flex;
            flex-direction: row;
            justify-content: stretch;

            &>rkgk-resize-handle {
                flex-shrink: 0;
                height: auto;
            }

            &>rkgk-brush-editor {
                height: auto;
                overflow: auto;
                flex-grow: 1;
            }
        }
    }

    &>rkgk-canvas-renderer {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    &>rkgk-reticle-renderer {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    &>#js-loading {
        background-color: var(--color-panel-background);

        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Resize handle */

rkgk-resize-handle {
    &[data-direction="vertical"] {
        display: block;
        width: 16px;
        height: 100%;

        cursor: col-resize;

        &>.visual {
            width: 2px;
            height: 100%;
            background-color: var(--color-brand-blue);
            margin: 0 auto;
            opacity: 0%;
        }

        &:hover>.visual, &.dragging>.visual {
            opacity: 100%;
        }
    }
}

/* Canvas renderer */

rkgk-canvas-renderer {
    display: block;

    &>canvas {
        display: block;
    }
}

/* Reticle renderer */

rkgk-reticle-renderer {
    display: block;

    pointer-events: none;

    &>.reticles {
        position: relative;
    }
}

rkgk-reticle-cursor {
    --color: black; /* Overridden by JavaScript to set a per-user color. */

    position: absolute;
    display: block;

    &>.container {
        &>.arrow {
            width: 24px;
            height: 24px;
            background-color: var(--color);
            clip-path: path("M 0,0 L 13,13 L 6,13 L 0,19 Z");
        }

        &>.nickname {
            position: absolute;
            top: 20px;
            left: 8px;
            width: max-content;

            color: white;
            background-color: var(--color);
            padding: 1px 6px;
            border-radius: 9999px;
            text-align: center;
            font-weight: bold;
        }
    }
}

/* Code editor */

rkgk-code-editor {
    --gutter-width: 2.75em;

    display: block;
    position: relative;
    width: 100%;

    &>.layer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        margin: 0;

        pointer-events: none;

        display: flex;
        flex-direction: column;

        &>.line {
            flex-shrink: 0;
            white-space: pre-wrap;

            min-height: var(--line-height-em);
        }
    }

    &>.layer-gutter {
        user-select: none;

        counter-reset: line;

        color: transparent;

        &>.line {
            display: flex;
            flex-direction: row;

            counter-increment: line;

            &::before {
                flex-shrink: 0;

                display: block;
                width: var(--gutter-width);
                padding-right: 0.75em;
                box-sizing: border-box;

                content: counter(line);
                text-align: right;

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

    &>.layer:not(.layer-gutter) {
        margin-left: var(--gutter-width);
        width: calc(100% - var(--gutter-width));
    }

    &>.layer-error-squiggles {
        color: transparent;

        &>.line {
            &>.squiggle {
                text-decoration: underline wavy black;
                text-decoration-skip-ink: none;
            }

            &>.squiggle-error {
                text-decoration-color: var(--color-error);
            }
        }
    }

    &>textarea {
        display: block;
        width: calc(100% - var(--gutter-width));
        margin: 0;
        margin-left: var(--gutter-width);
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        resize: none;
        white-space: pre-wrap;
        border: none;
    }
}

/* Brush editor */

rkgk-brush-editor {
    padding: 12px;
    
    &>.text-area {
        display: block;
        width: 100%;
        margin: 0;
        resize: none;
        white-space: pre-wrap;
        border: none;
        overflow: hidden;
        box-sizing: border-box;
    }

    &>.errors:empty, &>.error-header:empty {
        display: none;
    }

    &>.error-header {
        margin-top: 1em;
        margin-bottom: 0;
        font-size: 1rem;
        color: var(--color-error);
    }

    &>.errors {
        margin: 0;
        color: var(--color-error);
        white-space: pre-wrap;
    }
}

/* Welcome screen */

rkgk-welcome {
    &>dialog {
        h3 {
            margin: 0.5rem 0;
            font-size: 2rem;
            font-weight: bold;
        }
    }
}

/* Connection status dialogs */

rkgk-connection-status {
    &>dialog[name='logging-in-dialog'][open], &>dialog[name='disconnected-dialog'][open] {
        border: none;
        outline: none;
        background: none;

        display: flex;
        gap: 8px;
        align-items: center;
    }

    &>dialog[name='error-dialog'][open] {
        & textarea[name='error-text'] {
            box-sizing: border-box;
            width: 100%;
            resize: none;
            border: 1px solid var(--color-panel-border);
            padding: 4px;
        }
    }
}

/* Menu bar */

.menu-bar {
    --border-radius: 4px;
    
    display: flex;
    align-items: center;
    box-sizing: border-box;

    width: fit-content;
    height: 24px;
    border-radius: var(--border-radius);

    &>a {
        display: block;
        
        color: var(--color-text);
        padding: 4px 8px;
        text-decoration: none;

        line-height: 1;

        &:hover {
            background-color: var(--color-shaded-background);
        }

        &.icon {
            padding: 4px 4px;
        }

        &:first-child {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);
        }

        &:last-child {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
        }
    }

    &>hr {
        height: 100%;
        margin: 0;
        border: none;
        border-right: 1px solid var(--color-panel-border);
    }
}