From e0ede4a503f326d6518f6ae3154941bbc5d494f0 Mon Sep 17 00:00:00 2001 From: Adrian Wannenmacher Date: Tue, 3 Mar 2026 20:29:04 +0100 Subject: [PATCH] refactor styles to make further additions easier --- style.css | 81 +++++++++++++++++++++++---------------------------- ui/layout.js | 2 +- ui/round.js | 12 ++++---- ui/session.js | 10 +++---- 4 files changed, 48 insertions(+), 57 deletions(-) diff --git a/style.css b/style.css index ed1739e..96215ff 100644 --- a/style.css +++ b/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, - td { + th:not(:last-child), + 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 { - td { - border-bottom: 1px solid var(--color-regular-text); - } - } - - &:last-of-type { - tr:last-child { - td { - border-bottom: none; - } - } + &:not(:last-of-type) tr:last-child td { + border-bottom: 1px solid var(--color-regular-text); } 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%; } } \ No newline at end of file diff --git a/ui/layout.js b/ui/layout.js index 2cb1ce9..339946f 100644 --- a/ui/layout.js +++ b/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"), ]), diff --git a/ui/round.js b/ui/round.js index ee8ebe4..fad0333 100644 --- a/ui/round.js +++ b/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", [ - m("h3", "Rundnschreiba"), + return m("section.current-round.alter.background", [ + 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; diff --git a/ui/session.js b/ui/session.js index 6c9bce6..ce5f792 100644 --- a/ui/session.js +++ b/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("button", + : m(".continue.alter.background", [ + m("button.positioned", { onclick: () => { model.anotherGame();