empires: Defer to top-level style sheet for as much as possible

[lmno.games] / empires / style.css

diff --git a/empires/style.css b/empires/style.css
index 1a57b07c00fdd007d5609ddc1de9837011d1ca1c..114c48f0685ae97b5eafcef736e26904483fca4d 100644 (file)
--- a/empires/style.css
+++ b/empires/style.css
@@ -1,35 +1,13 @@
-/* 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 {
@@ -55,3 +33,56 @@
 .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;
+}