feat: New idle step

- Add idle step after agreement
- New content for agreement
- Move brand information to macro
- New step class for common style

source/style/ui.scss

@@ -34,9 +34,11 @@ $z-indexes: (
 	}
 }
 
-#loader {
+.step {
 	@extend %full_parent;
+}
 
+#loader {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -65,7 +67,7 @@ $z-indexes: (
 #status,
 #spinner {
 	@extend %basic;
-	
+
 	display: flex;
 	flex-grow: 0;
 	flex-shrink: 0;
@@ -104,8 +106,6 @@ $z-indexes: (
 }
 
 #intro {
-	@extend %full_parent;
-
 	z-index: map.get($z-indexes, "content-top");
 	overflow: hidden;
 	display: flex;
@@ -148,7 +148,8 @@ $z-indexes: (
 	}
 }
 
-#agreement {
+#agreement,
+#idle {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -156,6 +157,18 @@ $z-indexes: (
 	background-color: $color_back_basic;
 }
 
+#agreement {
+	flex-direction: column;
+
+	h1 {
+		margin-top: 0;
+	}
+}
+
+#idle {
+	pointer-events: none;
+}
+
 .toast {
 	z-index: map.get($z-indexes, "toast");
 	position: fixed;
@@ -175,7 +188,8 @@ $z-indexes: (
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	background-color: rgba(black, .25);
+	// background-color: rgba(black, .25);
+	background-color: $color_darker;
 }
 
 @import "modules/ui/new_module";