new game dialog not broken anyore

4 files changed, 64 insertions, 3 deletions

diff --git a/styles/game.css b/styles/game.css
new file mode 100644
index 0000000..ae8c3ff
--- /dev/null
+++ b/styles/game.css
@@ -0,0 +1,34 @@
+.outcomeDialog .inner > * {
+	margin-top: var(--spacing-medium);
+}
+
+.outcomeDialog .inner .button {
+	float: unset;
+	padding: var(--spacing-medium) var(--spacing-large);
+}
+
+.newGameDialog .inviteButton {
+	height: 160px;
+}
+
+.newGameDialog .inviteButton.random {
+	background-color: var(--confirm);
+}
+
+.newGameDialog .inviteButton.link {
+	background-color: var(--error);
+}
+
+.newGameDialog .inviteButton .icon {
+	top: var(--spacing-medium);
+	font-size: 100px;
+}
+
+.newGameDialog .inviteButton .label {
+	bottom: var(--spacing-medium);
+}
+
+.newGameDialog > div {
+	margin-top: var(--spacing-large);
+}
+
diff --git a/styles/search.css b/styles/search.css
index 06a3918..696294d 100644
--- a/styles/search.css
+++ b/styles/search.css
@@ -1,6 +1,5 @@
-.searchBar input {
+.bigSearchBar .input {
 	width: calc(100% - 2 * var(--spacing-medium) - 48px);
-	margin: 2px 0;
 }
 
 .results .result .inner .userInfo {
diff --git a/styles/ui.css b/styles/ui.css
index 8003a7c..cd9f461 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -78,3 +78,17 @@
 	cursor: pointer;
 }
 
+.searchBar {
+	overflow: hidden;
+}
+
+.searchBar .button {
+	border-radius: 0;
+	padding: 10px;
+}
+
+.searchBar .input {
+	width: calc(100% - 44px);
+	box-sizing: border-box;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index be982f8..d3c5897 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -49,6 +49,9 @@
 
 .w100m2m { width: calc(100% - var(--spacing-medium)); }
 
+.w100vw { width: 100vw; }
+.h100vh { height: 100vh; }
+
 .fullwidth {
 	width: 100%;
 	box-sizing: border-box;
@@ -64,6 +67,7 @@
 	font-weight: 600;
 }
 
+.gg-l { grid-gap: var(--spacing-large) !important; }
 .sidebyside {
 	display: grid;
 	grid-gap: var(--spacing-medium);
@@ -76,8 +80,18 @@
 	text-overflow: ellipsis;
 }
 
+.abscenterh {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.abscenterv {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
 .abscenter {
-	top: 51%;
+	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 }