From b95752b3772a96e99b21d9ef2b36720fc3fdc3da Mon Sep 17 00:00:00 2001 From: Freya Murphy Date: Mon, 17 Nov 2025 15:54:14 -0500 Subject: wasm: refactor some html code --- game/www/index.html | 53 ++++++++++++++------------------- game/www/style.css | 86 ++++++++++++++++++++++------------------------------- 2 files changed, 58 insertions(+), 81 deletions(-) diff --git a/game/www/index.html b/game/www/index.html index 123f6a3..6210bb7 100644 --- a/game/www/index.html +++ b/game/www/index.html @@ -11,35 +11,39 @@
-
- Logs -
- -
-
-
- + -
+ +
- + - diff --git a/game/www/style.css b/game/www/style.css index 3adf108..80c8747 100644 --- a/game/www/style.css +++ b/game/www/style.css @@ -30,7 +30,7 @@ body, html { } #canvas { - width: 100%; + width: 100vw; } #options { @@ -42,7 +42,7 @@ body, html { display: flex; flex-direction: row; - details, button { + button { background: var(--button-bg); color: var(--button-fg); border: 1px solid var(--button-bg); @@ -56,66 +56,50 @@ body, html { } } - input { - margin: 0; - background: var(--surface-bg); - color: var(--surface-fg); - boder: none; - outline: none; - box-shadow: none; - } - - details summary, button, input { + button, input { padding: 10px; font-weight: normal; } -} - -form { - padding: 0; - margin: 0; -} - -details { - ::marker { - content: ""; - } - - .menu { - pointer-events: all; - position: absolute; - margin: 10px; - padding: 10px; - top: 100%; - height: fit-content; - overflow: auto; - max-height: 40vh; - background: var(--bg); - color: var(--fg); - border-radius: 5px; - box-shadow: 0 0 4px 1px #00000088; + form { + padding: 0; + margin: 0; - label { - padding-bottom: 5px; + input { + margin: 0; + background: var(--surface-bg); + color: var(--surface-fg); + boder: none; + outline: none; + box-shadow: none; } } } #logs { - width: 40vw; - height: 200px; - font-size: 15px; - background-color: var(--surface-bg); - color: var(--surface-fg); - border: none; - padding: 5px; - display: flex; - flex-direction: column; - overflow-y: auto; + position: absolute; + top: 100%; + margin-top: 10px; + background: var(--bg); border-radius: 5px; + color: var(--fg); + padding: 5px; + + .content { + width: 600px; + height: 200px; + font-size: 15px; + margin: 5px; + padding: 5px; + display: flex; + flex-direction: column; + overflow: auto; + border-radius: 5px; + background-color: var(--surface-bg); + color: var(--surface-fg); - .error { - color: var(--error); + .error { + color: var(--error); + } } } -- cgit v1.2.3-freya