web: minor style updates

2 files changed, 23 insertions, 15 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 4967f18..35dac17 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -163,12 +163,16 @@ function setPlayerActive(n) {
 		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
 }
 
-function hidePlayer2(n) {
-	document.getElementById('p2-info').style.visibility = 'hidden';
+function hidePlayerInfo(n) {
+	let elems = document.getElementById(`p${n}-info`).children;
+	for (let i = 0; i < elems.length; ++i)
+		elems[i].style.visibility = 'hidden';
 }
 
-function unhidePlayer2(n) {
-	document.getElementById('p2-info').style.removeProperty('visibility');
+function showPlayerInfo(n) {
+	let elems = document.getElementById(`p${n}-info`).children;
+	for (let i = 0; i < elems.length; ++i)
+		elems[i].style.removeProperty('visibility');
 }
 
 function updatePlayerRem(n, ptr) {
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;