Settings dialog

docs/style.css

@@ -1,7 +1,40 @@
+header {
+    background-color: #464646;
+    color: white;
+}
+
+.navbar {
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 1rem 0;
+}
+
+.navbar-brand {
+    color: white;
+}
+
+#zoom {
+    min-width: 0;
+    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center / .8rem 1rem;
+    color: white;
+}
+
+.navbar .btn-link {
+    font-size: large;
+    color: white;
+}
+
+.navbar .btn.btn-link:focus,
+.navbar .btn.btn-link:hover,
+.navbar .btn.btn-link:active,
+.navbar .btn.btn-link.active {
+  color: #cccccc;
+}
+
 .contents {
     -webkit-user-select: none;
     max-width: 640px;
-    margin: 4ex auto 0;
+    margin: 2ex auto 0;
 }
 
 #loader ul {
@@ -33,7 +66,6 @@ canvas.emscripten {
 
 #volume-control {
     float: right;
-    margin-right: 20px;
 }
 
 #volume-control-icon {
@@ -48,3 +80,11 @@ canvas.emscripten {
     height: 30px;
     vertical-align: middle;
 }
+
+.settings section {
+	margin-bottom: 2rem;
+}
+
+.settings section > div {
+	padding-left: 2rem;
+}