diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..ab55c4e --- /dev/null +++ b/style.css @@ -0,0 +1,236 @@ +:root { + --ui-border: white; + --ui-height: 2.5em; +} + +body { + font-family: sans-serif; + margin: 0; + padding: 0; + overflow: hidden; +} +body, dialog { + background-color: black; + color: white; +} +a, a:visited { + color: #8fc; +} +h1, h2, h3, h4, h5, h6 { + margin: 0.1em; +} + +#page { + display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; +} + +#main { + display: flex; + flex-grow: 1; + overflow: hidden; +} + +#error { + color: red; + border-top: 2px solid red; + padding: 0.2em; + display: none; +} + +.widget.error, .widget.error:hover { + background-color: #f004; +} + +#canvas-container { + position: relative; + width: 100%; + height: 100%; + flex-grow: 0; + flex-shrink: 1; +} + +#canvas { + position: absolute; +} + +#ui-resize { + flex-grow: 0; + flex-shrink: 0; + width: 0.3cm; + cursor: col-resize; + display: flex; + justify-content: center; + background: linear-gradient(90deg, #000, #444 30%, #fff 50%, #444 70%, #000); +} +#ui { + overflow-x: auto; + overflow-y: scroll; + width: 100%; + height: 100%; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 30%; +} +input, button { + border: 1px solid var(--ui-border); + background-color: transparent; + color: white; +} +input[type="submit"]:hover, button:hover { + background-color: #fff5; +} +input[type="submit"]:active, button:active { + background-color: #fff9; +} +input[type="submit"][disabled]:hover, +input[type="submit"][disabled]:active, +button[disabled]:hover, +button[disabled]:active { + background-color: transparent; + cursor: not-allowed; +} +input:focus, [contenteditable]:focus, button:focus { + outline: 2px solid #77f; +} +.in select { + width: 5em; +} +.entry[contenteditable], .widget-name { + min-width: 1em; + border-bottom: 2px solid #fff4; + cursor: text; + display: inline-block; +} +.in, .ins, .control, .widget-title { + display: inline; +} +.in, .control { + margin-left: 0.5em; + white-space: nowrap; +} +input[type="color"] { + padding: 0; + margin: 0.2em 0.5em; + border: 2px solid #000; + outline: 1px solid #fff; + height: 1.3em; + width: 1.3em; +} +input[type="range"] { + max-height: 1.2em; + vertical-align: middle; +} +input[type="checkbox"] { + margin: 0; +} +.widget input[data-is-int="true"] { + font-size: 1em; + padding: 0; + line-height: 1; + border-width: 1px; + width: 5em; +} +.widget { + display: block; + border-bottom: 2px solid #777; + position: relative; + cursor: pointer; + padding: 0.1em 0; +} +.widget[data-display="1"] .widget-type { + color: #ff0; +} +.widget-type:hover { + color: #aa0; +} +.widget.dragging { + background: #aaf6; +} +.widget-title { + font-weight: bold; +} +.widget-button { + width: 1.5em; + height: 1.5em; + border: 0; + vertical-align: middle; + background-size: contain; +} +.widget-move { + background-image: url(move.svg); +} +.widget-delete { + background-image: url(x.svg); +} + +.widget-button:hover, .widget-button:active { + background-color: transparent; + outline: 0; + filter: saturate(500%); +} +.widget-choice { + width: calc(100% - 0.4em); + border: 1px solid white; + margin: 0.2em; + padding: 0.1em 0; +} +.widget-choice:focus { + outline: 0; + z-index: 10; +} +#widget-choices { + margin: 0.2em; + padding-bottom: 0.3em; + border-bottom: 2px solid white; +} +summary { + cursor: pointer; +} +#title { + vertical-align: middle; + font-weight: bold; + font-size: 0.5cm; +} +#title-icon { + height: 1cm; +} +#resolution-form input[type="number"] { + width: 4em; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} +input[type="number"] { + -moz-appearance: textfield; +} +.img-button { + height: 2em; + padding: 0; +} +.img-button img, .img-button svg { + height: 100%; + display: block; +} +.img-button[disabled] img, +.img-button[disabled] svg { + filter: brightness(50%); +} +.ui-section { + margin: 0.3em; +} +.ui-section label { + margin: auto; +} +.inline-block { + display: inline-block; +} +.no-wrap { + whitespace: no-wrap; +} |