X-Git-Url: https://git.cworth.org/git?a=blobdiff_plain;f=empires%2Fstyle.css;h=1bb0e62eb0eada366c08f28a523def5ed75ee10d;hb=33dc186b5e65219ffdb341c7217b502648f51d3d;hp=9beda3e89e2408d90645bb91d5fee21f4f67fa47;hpb=cb1b69c3466b7ed486cfe32627eff099877d5b44;p=lmno.games

diff --git a/empires/style.css b/empires/style.css
index 9beda3e..1bb0e62 100644
--- a/empires/style.css
+++ b/empires/style.css
@@ -1,91 +1,5 @@
-body {
-    background-color: #333738;
-    font-family: sans-serif;
-    line-height: 1.5;
-}
-
-#page {
-    margin-top: 36px;
-    margin-bottom: 36px;
-    padding-top: 30px;
-    padding-bottom: 30px;
-    padding-left: 10px;
-    padding-right: 10px;
-    background-color: white;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/* For a wide screen, just use the center of the window for content. */
-@media screen and (min-width: 500px) {
-  #page {
-      max-width: 720px;
-      padding-left: 50px;
-      padding-right: 50px;
-  }
-}
-
-/* And when the screen is narrow, let's kill the wasted vertical space
-   above it too. */
-@media screen and (max-width: 499px) {
-    #page {
-        margin-top: 0;
-        margin-bottom: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-}
-
-h1 {
-    color: #333738;
-    font-size: 150%;
-    font-weight: bold;
-}
-
-h2 {
-    color: #333738;
-    font-size: 110%;
-    font-weight: bold;
-}
-
-p,dl,dd {
-    margin-bottom: 1em;
-}
-
-/* Default message severity is "info" but can be overriden. */
-.message {
-    padding: 1em;
-    background-color: #44c7ef;
-    color: white;
-    transition: 0.3s;
-    margin-bottom: 0.5em;
-    font-weight: bold;
-}
-
-.success {
-    background-color: #44c7ef;
-}
-
-.warning {
-    background-color: #ffa92a;
-}
-
-.danger {
-    background-color: #f56257
-}
-
-.hide-button {
-    color: white;
-    font-weight: bold;
-    float: right;
-    font-size: 150%;
-    cursor: pointer;
-}
-
-.hide-button:hover {
-    color: black;
-}
-
+/* By default, hide things that are not to be shown
+ * until a particular game state is reached. */
 .show-state-join {
     display:none;
 }
@@ -98,6 +12,8 @@ p,dl,dd {
     display:none;
 }
 
+/* And by default, show things that will be hidden
+ * when a particular game state is reached. */
 .hide-state-join {
     display:block;
 }
@@ -115,81 +31,15 @@ p,dl,dd {
     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 {
-    width: 100%;
+/* Host tools start out hidden. */
+#host-tools {
+    display: none;
 }
 
-input {
-    box-sizing: border-box;
-
-    height: 40px;
-
-    padding: 10px 12px;
-
-    border: 1px solid #287789;
-    border-radius: 4px;
-}
-
-input:focus {
-    border: 2px solid #44c7ef;
-}
-
-button {
-    display: inline-block;
-    border-radius: 4px;
-    background-color: #287789;
-    border: none;
-    color: white;
-    text-align: center;
-    font-size: 125%;
-    margin-top: .25em;
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
-    width: 200px;
-    transition: all 150ms ease;
-}
-
-button:hover {
-    transform: translateY(-1px);
-    background-color: #44c7ef;
-}
-
-:focus {
-    outline: none;
-}
-::-moz-focus-inner {
-    border: 0;
+/* When a character name is being revealed, we want this to be huge,
+ * (like, filling the screen huge). */
+#character-reveal {
+    color: var(--text-fg-color);
+    font-size: 300%;
+    font-weight: bold;
 }