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] minmax(
                0,
                var(--right-width)
            );

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

        & > * {
            pointer-events: all;
        }

        & > .right {
            grid-column: right / right;
            min-height: 0;

            display: grid;
            grid-template-rows: minmax(0, min-content);
            grid-template-columns: [floating] max-content [resize] min-content [docked] auto;

            padding-left: 16px;

            pointer-events: none;

            & > * {
                min-width: 0;
                min-height: 0;
            }

            & > rkgk-resize-handle {
                pointer-events: auto;
            }

            & > .docked > rkgk-brush-editor {
                max-height: 100%;
                pointer-events: auto;
            }

            & > .floating {
                display: flex;
                flex-direction: column;

                gap: 12px;

                & > rkgk-brush-preview {
                    width: 128px;
                    height: 128px;
                    pointer-events: auto;
                }

                & > rkgk-brush-cost-gauges {
                    width: 100%;
                    pointer-events: auto;
                }
            }
        }
    }

    & > 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%;

    overflow: auto;

    & > .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;

        &:focus {
            outline: none;
        }
    }

    &:has(textarea:focus) {
        outline: 1px solid var(--color-brand-blue);
        outline-offset: 4px;
    }
}

/* Brush editor */

rkgk-brush-editor.rkgk-panel {
    padding: 12px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    position: relative;

    & > .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: 0;
        margin-top: 0.5em;
        font-size: 1rem;
        color: var(--color-error);
    }

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

/* Brush preview */

rkgk-brush-preview {
    --checkerboard-light: #f2f2f2;
    --checkerboard-dark: #e1e1e1;
    --checkerboard-size: 64px;

    display: block;
    position: relative;

    background: repeating-conic-gradient(
            var(--checkerboard-light) 0% 25%,
            var(--checkerboard-dark) 0% 50%
        )
        50% 50% / var(--checkerboard-size) var(--checkerboard-size);
    border-radius: 4px;

    & > canvas {
        border-radius: 4px;
    }

    &.error {
        & > canvas {
            display: none;
        }

        &::before {
            content: "(error)";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

/* Brush cost gauges */

rkgk-brush-cost-gauges,
rkgk-brush-cost-gauges.rkgk-panel {
    --gauge-size: 20px;

    height: var(--gauge-size);
    border-radius: 4px;

    display: flex;
    flex-direction: row;

    overflow: clip; /* clip corners */

    & > rkgk-brush-cost-gauge {
        display: block;
        height: var(--gauge-size);
        flex-grow: 1;

        & > .full {
            width: 100%;
            height: 100%;

            clip-path: xywh(0 0 var(--progress) 100%);

            background-color: var(--gauge-color);
        }

        &.code-size {
            --gauge-color: var(--color-brand-blue);
        }
        &.fuel {
            --gauge-color: #f44096;
        }
        &.objects {
            --gauge-color: #fd9916;
        }
        &.memory {
            --gauge-color: #5aca40;
        }
    }
}

/* 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 {
            width: 24px;
            height: 24px;
        }

        &: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);
    }
}