diff options
| author | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2022-04-24 03:08:33 -0700 |
|---|---|---|
| committer | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2022-04-24 03:08:55 -0700 |
| commit | c5f001a4f47c63b5822dcdc0b57d49de70dfaa67 (patch) | |
| tree | 1e6e4be4efceb051430034f1e1a0670cedbd6d12 /web | |
| parent | 3473a93fbb19846453d901505a720c2ccacb08d7 (diff) | |
| download | dartboat-c5f001a4f47c63b5822dcdc0b57d49de70dfaa67.tar.gz dartboat-c5f001a4f47c63b5822dcdc0b57d49de70dfaa67.tar.xz | |
web: make active prompt more prominent
Diffstat (limited to 'web')
| -rw-r--r-- | web/static/dartboat.js | 2 | ||||
| -rw-r--r-- | web/static/index.html | 2 | ||||
| -rw-r--r-- | web/static/style.css | 21 |
3 files changed, 16 insertions, 9 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js index 35dac17..f700510 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -135,6 +135,8 @@ prompt_handlers.init = { function setPromptHandler(ptr) { let str = UTF8ToString(ptr); prompt_handler = prompt_handlers[str]; + document.getElementById('prompt').classList[ + prompt_handler ? 'add' : 'remove']('active'); document.querySelectorAll('.keypad').forEach(e => e.style.display = 'none'); document.getElementById(`keypad-${str === 'init' ? 'init' : 'default'}`) diff --git a/web/static/index.html b/web/static/index.html index 0502644..e2aeb36 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -26,7 +26,7 @@ </div> </div> <div id="controls"> - <div id="prompt-container"> + <div id="prompt"> <div id="prompt-msg-l"></div> <div id="prompt-input"></div> <div id="prompt-msg-r"></div> diff --git a/web/static/style.css b/web/static/style.css index 63d8e3b..912a832 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -14,10 +14,9 @@ body { div#main { background-color: #1a1a1a; - height: calc(100vh - 2*2px); - width: min(80vh, calc(100vw - 2*2px)); + height: 100vh; + width: min(80vh, 100vw); margin: 0 auto; - padding: 2px; display: grid; grid-template-columns: 1fr; @@ -30,7 +29,7 @@ div#controls { font-size: clamp(1.5vh, 2vw, 2vh); - margin-top: 2px; + margin: 2px 0; display: grid; grid-template-columns: repeat(3, 1fr); @@ -79,7 +78,7 @@ div#info { font-size: clamp(1.5vh, 2vw, 2vh); - margin: 2px 0; + margin-bottom: 2px; display: grid; grid-template-columns: repeat(2, 1fr); @@ -138,7 +137,7 @@ div#p1-avg:before, div#p2-avg:before { content: 'avg: '; } -div#prompt-container { +div#prompt { grid-column: 1 / span 3; background-color: #222; @@ -148,6 +147,10 @@ div#prompt-container { justify-content: center; } +div#prompt.active { + background-color: #3d2466; +} + div#prompt-msg-l, div#prompt-input, div#prompt-msg-r { font-size: 1.5em; white-space: pre-line; @@ -197,8 +200,10 @@ div.key.active { background-color: #3d2466; } -div.key.active:hover { - background-color: #5c3699; +@media (hover: hover) and (pointer: fine) { + div.key.active:hover { + background-color: #5c3699; + } } div.key.active:active { |