From 48af5aecfab645509ca38922c8a552b6a90c7340 Mon Sep 17 00:00:00 2001 From: pommicket Date: Mon, 19 Jun 2023 16:10:05 -0400 Subject: the start of something --- index.html | 97 +++++++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 65 insertions(+), 32 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 70c0554..4e0f4a7 100644 --- a/index.html +++ b/index.html @@ -21,21 +21,14 @@ #page { width: 100vw; - position: relative; - } - #page[data-ui-shown="1"] { - top: var(--ui-height); - height: calc(100vh - var(--ui-height)); - } - #page[data-ui-shown="0"] { - top: 0; height: 100vh; + position: relative; } - #canvas, #ui-canvas { + #canvas { position: absolute; left: 0; - top: 0; + bottom: 0; } #ui-canvas { @@ -68,32 +61,39 @@ outline: 2px solid #0a0; } #ui { - display: block; - width: 100vw; - height: var(--ui-height); - background-color: #111; - border-bottom: 2px solid var(--ui-border); position: absolute; top: 0; left: 0; - vertical-align:middle; + width: 20vw; + height: 100vh; + resize: horizontal; + overflow: scroll; + border-right: 2px solid white; + padding: 0.2em; } input, button { vertical-align: middle; display: inline-block; - height: 2.0em; margin: 0.3em 0 0.3em 0.3em; border: 2px solid var(--ui-border); - background-color: black; + background-color: transparent; color: white; } + button { + height: 2.0em; + } + input { + height: 1.5em; + font-size: inherit; + } #ui input[type=color] { padding: 0; } - #ui input[type=text], #ui input[type=number] { - width: 3em; - font-size: inherit; - height: 1.5em; + .in input { + width: 5em; + } + .out { + font-weight: bold; } input[type=number] { /* disable increment/decrement buttons (firefox) */ @@ -103,15 +103,27 @@ /* disable increment/decrement buttons (webkit) */ -webkit-appearance: none; } - #ui label { - margin-right: 0.5em; - } - #ui div { - display: inline-block; - } img.icon { height: 1.5em; } + .widget { + border: 2px solid white; + border-radius: 5px; + padding: 5px; + margin: 0.5em; + background: #111; + position: relative; + } + .outs { + position: absolute; + bottom: 0.2em; + right: 0.2em; + } + .widget-title { + font-weight: bold; + margin: 2px; + display: block; + } @@ -170,13 +182,37 @@ void main() { -

+ + + +

- a -

-- cgit v1.2.3