443 lines
8.7 KiB
CSS
443 lines
8.7 KiB
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>rkgk-brush-preview {
|
|
width: 128px;
|
|
height: 128px;
|
|
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;
|
|
|
|
&.error {
|
|
&>canvas {
|
|
display: none;
|
|
}
|
|
|
|
&::before {
|
|
content: "(error)";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|