From 4d8012dc3349234fc854a190f2dead9ac8413eec Mon Sep 17 00:00:00 2001
From: Zutatensuppe <oo.para@gmail.com>
Date: Thu, 13 May 2021 16:22:15 +0200
Subject: [PATCH] cleanup styles a bit

---
 public/style.css | 155 ++++++++++++++++++++++++++++-------------------
 1 file changed, 92 insertions(+), 63 deletions(-)

diff --git a/public/style.css b/public/style.css
index 92ac3ce..0ffc154 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,3 +1,5 @@
+/* TODO: clean up / split ingame vs pregame */
+
 :root {
   --main-color: #c1b19f;
   --link-color: #808db0;
@@ -22,13 +24,62 @@ h1, h2, h3, h4 {
   font-size: 20px;
 }
 
-a { color: var(--link-color); text-decoration: none; }
-a:hover { color: var(--link-hover-color); }
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--link-hover-color);
+}
 
 td, th {
   vertical-align: top;
 }
 
+.btn {
+  display: inline-block;
+  background: var(--input-bg-color);
+  color: var(--link-color);
+  border: solid 1px black;
+  padding: 5px 10px;
+  box-shadow: 1px 1px 2px rgba(0,0,0,.5), 0 0 1px rgba(150,150,150,.4) inset;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.btn:hover {
+  background: #2f2e2c;
+  color: var(--link-hover-color);
+  border: solid 1px #111;
+  box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  background: #2f2e2c;
+  color: #8c4747 !important;
+  border: solid 1px #111;
+  box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
+  cursor: not-allowed;
+}
+
+input {
+  background: #333230;
+  border-radius: 4px;
+  color: var(--main-color);
+  padding: 6px 10px;
+  border: solid 1px black;
+  box-shadow: 0 0 3px rgba(0, 0,0,0.3) inset;
+}
+
+input:focus {
+  border: solid 1px #686767;
+  background: var(--input-bg-color);
+}
+
+/* ingame */
+
 .scores {
   position: absolute;
   right: 0;
@@ -142,47 +193,51 @@ canvas.loaded {
   cursor: none;
 }
 
-input {
-  background: #333230;
-  border-radius: 4px;
-  color: var(--main-color);
-  padding: 6px 10px;
-  border: solid 1px black;
-  box-shadow: 0 0 3px rgba(0, 0,0,0.3) inset;
-}
-
-input:focus {
-  border: solid 1px #686767;
-  background: var(--input-bg-color);
-}
-
-.btn {
+kbd {
+  background-color: #eee;
+  border-radius: 3px;
+  border: 1px solid #b4b4b4;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
+  color: #333;
   display: inline-block;
-  background: var(--input-bg-color);
-  color: var(--link-color);
-  border: solid 1px black;
-  padding: 5px 10px;
-  box-shadow: 1px 1px 2px rgba(0,0,0,.5), 0 0 1px rgba(150,150,150,.4) inset;
-  border-radius: 4px;
-  user-select: none;
+  font-size: .85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
 }
 
-.btn:hover {
-  background: #2f2e2c;
-  color: var(--link-hover-color);
-  border: solid 1px #111;
-  box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
+/* pre-game stuff */
+
+.nav {
+  list-style: none;
+  padding: 0;
+}
+
+.nav li {
+  display: inline-block;
+  margin-right: 1em;
+}
+
+.image-list {
+  overflow: scroll;
+}
+.image-list-inner {
+  white-space: nowrap;
+}
+
+.imageteaser {
+  width: 150px;
+  height: 100px;
+  display: inline-block;
+  margin: 5px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: #222;
   cursor: pointer;
 }
 
-.btn:disabled {
-  background: #2f2e2c;
-  color: #8c4747 !important;
-  border: solid 1px #111;
-  box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
-  cursor: not-allowed;
-}
-
 .game-teaser-wrap {
   display: inline-block;
   width: 20%;
@@ -223,29 +278,3 @@ input:focus {
   top: 0;
   right: 0;
 }
-
-
-.imageteaser {
-  width: 150px;
-  height: 100px;
-  display: inline-block;
-  margin: 5px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: #222;
-}
-
-kbd {
-  background-color: #eee;
-  border-radius: 3px;
-  border: 1px solid #b4b4b4;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
-  color: #333;
-  display: inline-block;
-  font-size: .85em;
-  font-weight: 700;
-  line-height: 1;
-  padding: 2px 4px;
-  white-space: nowrap;
- }