-/* Default message severity is "info" but can be overriden. */
-.message {
- padding: 1em;
- background-color: #46a7f5;
- color: white;
- transition: 0.3s;
- margin-bottom: 0.5em;
- font-weight: bold;
-}
-
-.success {
- background-color: #6abc6d;
-}
-
-.warning {
- background-color: #ffa92a;
-}
-
-.danger {
- background-color: #f56257
+h1 {
+ color: #333738;
}
-.hide-button {
- color: white;
- font-weight: bold;
- float: right;
- font-size: 150%;
- cursor: pointer;
+h2 {
+ color: #333738;
}
-.hide-button:hover {
- color: black;
+p,dl,dd {
+ margin-bottom: 1em;
}
.show-state-join {
.hide-state-capture {
display:block;
}
+
+/* Players list starts out hidden (until a player is added). */
+#players-div {
+ display:none;
+}
+
+/* Host tools start out hidden. */
+#host-tools {
+ display: none;
+}
+
+#register-form {
+ max-width: 100%;
+ display: grid;
+ grid-template-columns: 49% 49%;
+ grid-column-gap: 2%;
+}
+
+.form-row {
+ max-width: 100%;
+ padding-bottom: 0.25em;
+}
+
+.form-row.medium.left {
+ grid-column-start: 1;
+}
+
+.form-row.medium.right {
+ grid-column-start: 2;
+}
+
+.form-row.large {
+ grid-column-start: 1;
+ grid-column-end: span 2;
+}
+
+/* For a narrow screen, use a single-column for medium form rows. */
+@media screen and (max-width: 600px) {
+ .form-row.medium.left,.form-row.medium.right {
+ grid-column-start: 1;
+ grid-column-end: span 2
+ }
+}
+
+input {
+ height: 40px;
+}
+
+#character-reveal {
+ color: #333738;
+ font-size: 300%;
+ font-weight: bold;
+}