From 3473a93fbb19846453d901505a720c2ccacb08d7 Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Sun, 24 Apr 2022 01:52:28 -0700 Subject: web: minor style updates --- web/static/style.css | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'web/static/style.css') diff --git a/web/static/style.css b/web/static/style.css index dc017f6..63d8e3b 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -30,10 +30,13 @@ div#controls { font-size: clamp(1.5vh, 2vw, 2vh); + margin-top: 2px; + display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(5em, auto); grid-auto-rows: 1fr; + gap: 2px; } div#controls .keypad { @@ -56,7 +59,7 @@ div#oi { height: 1.2em; width: 3ch; - outline: #1a1a1a solid 4px; + outline: #1a1a1a solid 2px; position: absolute; left: 50%; @@ -76,6 +79,8 @@ div#info { font-size: clamp(1.5vh, 2vw, 2vh); + margin: 2px 0; + display: grid; grid-template-columns: repeat(2, 1fr); } @@ -84,7 +89,6 @@ div#p1-info, div#p2-info { background-color: #222; font-size: 1.5em; - margin: 2px; padding: 0.4rem; flex-direction: column; @@ -92,6 +96,14 @@ div#p1-info, div#p2-info { align-items: center; } +div#p1-info { + margin-right: 1px; +} + +div#p2-info { + margin-left: 1px; +} + div#p1-info.active, div#p2-info.active { background-color: #2a390a; } @@ -131,8 +143,6 @@ div#prompt-container { background-color: #222; - margin: 2px; - display: flex; align-items: center; justify-content: center; @@ -167,8 +177,6 @@ div.key { background-color: #282828; font-size: 1.5em; - margin: 2px; - display: flex; align-items: center; justify-content: center; @@ -212,10 +220,8 @@ div.key.ok { div#settings-bar { grid-area: settings-bar; - background-color: #222; font-size: clamp(1.5vh, 2vw, 2vh); - margin: 2px; padding: 0.4rem; display: flex; @@ -233,7 +239,7 @@ div#settings-bar div.input.first { } div#settings-bar div.input { - background-color: #333; + background-color: #222; display: flex; flex-wrap: wrap; @@ -288,12 +294,10 @@ div#settings-bar div.help-button:active { div#visits { grid-area: visits; - background-color: #222; font-size: clamp(1.5vh, 2vw, 2vh); overflow: auto; scrollbar-gutter: stable both-edges; - margin: 2px; padding: 0.4rem; display: grid; -- cgit v1.2.3-70-g09d2