Add some comments on the CSS for styling the empires client

[lmno.games] / empires / style.css

diff --git a/empires/style.css b/empires/style.css
index 1d853d90f3b22cc830bddb06e94f28fc9ee8d958..1bb0e62eb0eada366c08f28a523def5ed75ee10d 100644 (file)
--- a/empires/style.css
+++ b/empires/style.css
@@ -1,33 +1,45 @@
-/* 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;
+/* By default, hide things that are not to be shown
+ * until a particular game state is reached. */
+.show-state-join {
+    display:none;
 }
 
-.success {
-    background-color: #6abc6d;
+.show-state-reveal {
+    display:none;
 }
 
-.warning {
-    background-color: #ffa92a;
+.show-state-capture {
+    display:none;
 }
 
-.danger {
-    background-color: #f56257
+/* And by default, show things that will be hidden
+ * when a particular game state is reached. */
+.hide-state-join {
+    display:block;
 }
 
-.hide-button {
-    color: white;
-    font-weight: bold;
-    float: right;
-    font-size: 150%;
-    cursor: pointer;
+.hide-state-reveal {
+    display:block;
 }
 
-.hide-button:hover {
-    color: black;
+.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;
+}
+
+/* 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;
 }