refactor styles to make further additions easier

style.css

@@ -20,6 +20,38 @@ html {
 
   color: var(--color-regular-text);
   background-color: var(--color-regular-background);
+
+  --color-active-text: var(--color-regular-text);
+  --color-active-background: var(--color-regular-background);
+}
+
+.background {
+  background-color: var(--color-active-background);
+}
+
+.regular,
+.alter,
+.primary {
+  color: var(--color-alter-text);
+}
+
+.regular {
+  --color-active-text: var(--color-regular-text);
+  --color-active-background: var(--color-regular-background);
+}
+
+.alter {
+  --color-active-text: var(--color-alter-text);
+  --color-active-background: var(--color-alter-background);
+}
+
+.primary {
+  --color-active-text: var(--color-primary-text);
+  --color-active-background: var(--color-primary-background);
+}
+
+.positioned {
+  margin: 0;
 }
 
 body {
@@ -31,32 +63,26 @@ body {
 
 h1 {
   font-size: 2em;
-  margin: 0;
 }
 
 h2 {
   font-size: 1.75em;
-  margin: 0;
 }
 
 h3 {
   font-size: 1.5em;
-  margin: 0;
 }
 
 h4 {
   font-size: 1.35em;
-  margin: 0;
 }
 
 h5 {
   font-size: 1.25em;
-  margin: 0;
 }
 
 h6 {
   font-size: 1.1em;
-  margin: 0;
 }
 
 button {
@@ -85,9 +111,6 @@ header.layout {
   display: flex;
   align-items: center;
 
-  background-color: var(--color-alter-background);
-  color: var(--color-alter-text);
-
   >* {
     padding: 0.5em 0.25em;
     font-size: 2em;
@@ -108,7 +131,6 @@ header.layout {
       padding-right: 0.5em;
     }
   }
-
 }
 
 main.layout {
@@ -138,10 +160,6 @@ main.layout {
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    * {
-      margin: 0;
-    }
   }
 
   >.spacer {
@@ -156,20 +174,15 @@ main.layout {
     border-spacing: 0;
   }
 
-  th,
+  th:not(:last-child),
-  td {
+  td:not(:last-child) {
     border-right: 1px solid var(--color-regular-text);
-
-    &:last-child {
-      border-right: none;
-    }
   }
 
   thead {
     border-bottom: 1px solid var(--color-regular-text);
     position: sticky;
     top: 0;
-    background: var(--color-regular-background);
 
     th {
       border-bottom: 3px double var(--color-regular-text);
@@ -178,18 +191,8 @@ main.layout {
   }
 
   tbody {
-    tr:last-child {
+    &:not(:last-of-type) tr:last-child td {
-      td {
+      border-bottom: 1px solid var(--color-regular-text);
-        border-bottom: 1px solid var(--color-regular-text);
-      }
-    }
-
-    &:last-of-type {
-      tr:last-child {
-        td {
-          border-bottom: none;
-        }
-      }
     }
 
     min-height: 5px;
@@ -205,22 +208,13 @@ main.layout {
   grid-template-columns: 1fr auto auto 1fr;
   gap: 1em;
 
-  background: var(--color-regular-background);
   position: sticky;
   bottom: 0;
 
   padding: 1em;
 
-  color: var(--color-alter-text);
-  background-color: var(--color-alter-background);
-
-  button {
-    margin: 0;
-  }
-
   >h3 {
     grid-area: title;
-    margin: 0;
   }
 
   >.current-points {
@@ -249,12 +243,9 @@ main.layout {
 .continue {
   position: sticky;
   bottom: 0;
-  color: var(--color-alter-text);
-  background-color: var(--color-alter-background);
   padding: 1em;
 
   button {
-    margin: 0;
     width: 100%;
   }
 }

ui/layout.js

@@ -46,7 +46,7 @@ export default class Layout {
       return m("p", "Öffne Datenbank, bitte warten…");
 
     return m.fragment([
-      m("header.layout", [
+      m("header.layout.alter.background", [
         backHref ? m(m.route.Link, { href: backHref }, "←") : null,
         m("h1", "Watterblock"),
       ]),

ui/round.js

@@ -6,24 +6,24 @@ export default class RoundView {
 
   /** @param { { attrs: { model: Round } } } param The round model to use. */
   view({ attrs: { model } }) {
-    return m("section.current-round", [
+    return m("section.current-round.alter.background", [
-      m("h3", "Rundnschreiba"),
+      m("h3.positioned", "Rundnschreiba"),
       m("span.current-points", `${model.points}`),
-      m("button.they-raise",
+      m("button.they-raise.positioned",
         {
           onclick: () => model.raise(Team.They),
           disabled: !model.canRaise(Team.They),
         },
         "se erhöhn",
       ),
-      m("button.we-raise",
+      m("button.we-raise.positioned",
         {
           onclick: () => model.raise(Team.We),
           disabled: !model.canRaise(Team.We),
         },
         "mia erhöhn",
       ),
-      m("button.they-win",
+      m("button.they-win.positioned",
         {
           onclick: () => {
             model.winner = Team.They;
@@ -36,7 +36,7 @@ export default class RoundView {
         },
         "se habn gwonnen",
       ),
-      m("button.we-win",
+      m("button.we-win.positioned",
         {
           onclick: () => {
             model.winner = Team.We;

ui/session.js

@@ -15,9 +15,9 @@ export default class SessionView {
 
     return m("article.session-view", [
       m(".session-view-header", [
-        m("h2", "Satz"),
+        m("h2.positioned", "Satz"),
         m(
-          "button",
+          "button.positioned",
           { onclick: () => this.#headOpen = !this.#headOpen },
           "Regln"
         ),
@@ -29,7 +29,7 @@ export default class SessionView {
             m("section.record", [
               this.#headOpen ? m("h3", "Mitschrift") : null,
               m("table", [
-                m("thead", [
+                m("thead.background", [
                   m("tr", [
                     m("th", [
                       model.theirTeam ? model.theirTeam : "Se",
@@ -55,8 +55,8 @@ export default class SessionView {
         ? model.currentGame.currentRound !== null
           ? m(RoundView, { model: model.currentGame.currentRound })
           : null
-        : m(".continue", [
+        : m(".continue.alter.background", [
-            m("button",
+            m("button.positioned",
               {
                 onclick: () => {
                   model.anotherGame();