web: the bot should have his own dartboard

1 files changed, 19 insertions, 1 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 7247a6b..e306177 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter');
 
 body {
 	color-scheme: dark;
@@ -21,7 +22,7 @@ div#main {
 
 	display: grid;
 	grid-template-columns: 1fr;
-	grid-template-rows: min-content min-content 2fr 3fr;
+	grid-template-rows: min-content min-content minmax(0, 2fr) minmax(0, 3fr);
 	grid-template-areas: "settings-bar" "info" "visits" "controls";
 }
 
@@ -51,6 +52,23 @@ div#controls #keypad-select_mode .key {
 	justify-content: left;
 }
 
+div#controls #keypad-dartboard #dartboard-container {
+	grid-column: 1 / -1;
+
+	min-width: 0;
+	min-height: 0;
+	padding: 0.4rem;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+div#controls #keypad-dartboard #dartboard-container svg {
+	font-family: 'Inter';
+	height: 100%;
+}
+
 div#oi {
 	visibility: hidden;