add setup dialog on startup

1 files changed, 33 insertions, 3 deletions

diff --git a/ui/css/style.css b/ui/css/style.css
index 12ef3fd..f0c63e8 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -5,8 +5,12 @@ body, html {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	font-family: sans-serif;
 }
 
+* { user-select: none; }
+*:focus { outline: none; }
+
 .container {
 	display: grid;
 	grid-template-columns: 1fr 2fr;
@@ -134,6 +138,7 @@ details {
 
 details summary {
 	user-select: none;
+	cursor: pointer;
 }
 
 details[open] summary {
@@ -148,13 +153,17 @@ dialog {
 	z-index: 999;
 	min-width: 320px;
 	text-align: center;
+	border-radius: 12px;
+	border: 1px solid #0006;
+	box-shadow: 0 4px 32px -12px #000a;
 }
 ::backdrop {
-  background-color: #000;
-  opacity: 0.75;
+  background-color: #0008;
+  /* opacity: 0.6; */
+	backdrop-filter: blur(12px);
 }
 
-dialog h1 {
+.blink {
 	animation-name: blink;
 	animation-duration: 150ms;
 	animation-direction: alternate;
@@ -166,3 +175,24 @@ dialog h1 {
   from { color: red; }
   to { color: black; }
 }
+
+.padtop { margin-top: 16px; }
+dialog h1 { margin-top: 0; }
+
+button {
+	font-size: 1rem;
+	border-radius: 8px;
+	border: 1px solid #0004;
+	padding: 4px 8px;
+	cursor: pointer;
+	background-color: #0001;
+}
+
+button[disabled] {
+	cursor: not-allowed;
+}
+
+button:not([disabled]):active {
+	background-color: #0004;
+}
+