/* Variables */ :root { --color-text: #111; --color-error: #db344b; --color-brand-blue: #40b1f4; --color-panel-border: rgba(0, 0, 0, 20%); --color-panel-background: #fff; --panel-border-radius: 16px; --panel-box-shadow: 0 0 0 1px var(--color-panel-border); --panel-padding: 12px; --dialog-backdrop: rgba(255, 255, 255, 0.5); } /* Reset */ body { margin: 0; width: 100vw; height: 100vh; color: var(--color-text); line-height: 1.4; } /* Fonts */ @font-face { font-family: "Fira Sans"; src: local("Fira Sans Regular"), url("font/FiraSans-Regular.ttf"); font-weight: 400; } @font-face { font-family: "Fira Sans"; src: local("Fira Sans Italic"), url("font/FiraSans-Italic.ttf"); font-weight: 400; font-style: italic; } @font-face { font-family: "Fira Sans"; src: local("Fira Sans Bold"), url("font/FiraSans-Bold.ttf"); font-weight: 700; } @font-face { font-family: "Fira Code"; src: local("Fira Code"), url("font/FiraCode-VariableFont_wght.ttf"); font-weight: 400; } :root { font-size: 87.5%; font-family: "Fira Sans", sans-serif; } button, textarea, input { font-size: inherit; font-family: inherit; } pre, code, textarea { font-family: "Fira Code", monospace; } /* Main container layout */ main { width: 100%; height: 100%; position: relative; &>.fullscreen { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } &>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; } &>rkgk-brush-editor { width: 384px; position: absolute; right: 0; top: 0; margin: 16px; } &>#js-loading { background-color: var(--color-panel-background); display: flex; align-items: center; justify-content: center; } } /* Buttons */ button { border: 1px solid var(--color-panel-border); border-radius: 9999px; padding: 0.5rem 1.5rem; background-color: var(--color-panel-background); } /* Text areas */ input { border: none; border-bottom: 1px solid var(--color-panel-border); } *:focus { outline: 1px solid #40b1f4; outline-offset: 4px; } /* Modal dialogs */ dialog:not([open]) { /* Weird this doesn't seem to work by default. */ display: none; } dialog::backdrop { background-color: var(--dialog-backdrop); backdrop-filter: blur(8px); } /* Details */ details>summary { cursor: pointer; } /* Throbbers */ @keyframes rkgk-throbber-loading { 0% { clip-path: inset(0% 100% 0% 0%); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); } 50% { clip-path: inset(0% 0% 0% 0%); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); } 100% { clip-path: inset(0% 0% 0% 100%); } } rkgk-throbber { display: inline; &.loading { display: block; width: 16px; height: 16px; background-color: var(--color-brand-blue); animation: infinite alternate rkgk-throbber-loading; /* I wonder how many people will get _that_ reference. */ animation-duration: calc(60s / 141.98); } &.error { /* This could use an icon. */ color: var(--color-error); } } /* Panels */ .rkgk-panel { display: block; background: var(--color-panel-background); padding: var(--panel-border-radius); border: none; border-radius: 16px; box-shadow: var(--panel-box-shadow); } /* 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; color: white; background-color: var(--color); padding: 1px 6px; border-radius: 9999px; text-align: center; font-weight: bold; } } } /* Brush editor */ rkgk-brush-editor { &>.text-area { width: 100%; margin: 0; padding-top: 0.4em; /* to account for line-height */ 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; } } }