From 1a71184bcbf714d266e80d186fd666d393ed5981 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 19 Nov 2021 02:45:51 +0100 Subject: Clean up stylesheets. Don't show options in game lists. --- public/join.js | 4 +- public/style.css | 112 ++++++++++++++++++++++++++++++++++--------------------- 2 files changed, 72 insertions(+), 44 deletions(-) (limited to 'public') diff --git a/public/join.js b/public/join.js index 898113b..f79eabc 100644 --- a/public/join.js +++ b/public/join.js @@ -96,9 +96,9 @@ function update() { if (player) { if (game.status > 0) { if (is_active(player, role)) - element.className = "is_active"; + element.classList.add("is_active"); else - element.className = ""; + element.classList.remove("is_active"); if (player.user_id === user_id) element.innerHTML = `Play`; else diff --git a/public/style.css b/public/style.css index 76d6ff2..89ba3b2 100644 --- a/public/style.css +++ b/public/style.css @@ -1,48 +1,76 @@ -html, input, textarea { font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif; font-size: 16px; } -button, select { font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif; font-size: 16px; } +html, input, textarea { + font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif; + font-size: 16px; +} +button, select { + font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif; + font-size: 16px; +} + html, body { margin: 0; } h1 { margin-left: -2px; } h2 { margin-left: -1px; } -.header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid brown; padding-right: 1em; } -.header img { display: block; margin: 4px 0 -2px 2px; } -.header span { margin: 0 1em; } -.header a { color: black; } -.main { margin: 2em; } -.main p, .main dl { max-width: 50rem; } -.main hr { max-width: 50rem; margin-right: auto; margin-left: 0; } -.main hr { border: none; border-top: 2px dotted brown; } -.main hr + p { font-style: italic; } -img.logo { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); height: 200px; } -img.avatar { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5); width: 80px; height: 80px; } -.is_active { background-color: lemonchiffon; } -.error { color: brown; font-style: italic; white-space: pre-wrap; } -.warning { color: brown; } -.warning::before { content: "\26a0"; } -form { display: inline; } -label { user-select: none; } -input[type="text"], input[type="password"], textarea { padding: 5px; } -select { padding-right: 20px; } -button, input, select { font-size: 1rem; margin: 5px 0; } -button, select { margin: 5px 10px 5px 0; padding: 1px 10px; background-color: gainsboro; vertical-align: top; } -button:disabled { color: gray; border: 2px solid gainsboro; outline: 1px solid gray; } -button:enabled, select { border: 2px outset white; outline: 1px solid black; } -button:enabled:active:hover, select:active { border: 2px inset white; padding: 2px 9px 0px 11px; } +a { color: blue; } +.w { white-space: nowrap; } +.r { text-align: right; } + +header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 2px solid brown; + padding-right: 1em; +} +header img { + display: block; + margin: 4px 0 -2px 2px; +} +header nav a { margin: 0 1em; color: black; } +article { margin: 2em; } +article p, article dl, article ul { max-width: 50rem; } + +img.avatar { + float: left; margin: 0 20px 5px 0; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5); + width: 80px; + height: 80px; +} + +img.logo { + float: left; + margin: 0 20px 5px 0; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); + height: 200px; +} + +table { min-width: min(50rem,100%); } table { border-collapse: collapse; } -tfoot { background-color: gainsboro; } th { text-align: left; background-color: gainsboro; } th, td { border: 1px solid black; padding: 3px 1ex; } -table.game { min-width: min(50rem,100%); } -table.game .title { white-space: nowrap; } -table.game .scenario { white-space: nowrap; } -table.game .role { white-space: nowrap; } -table.game .time { white-space: nowrap; } -table.game td a { text-decoration: none; color: black; } -table.game td.command a { text-decoration: underline; color: blue; } -table.post { min-width: min(50rem,100%); } -table.post .author { white-space: nowrap; width: 10rem; } -table.post .time { white-space: nowrap; text-align: right; width: 5rem; } -table.post .replies { width: 0; } -table.post .unread { background-color: lightyellow; } -table.post .body { white-space: pre-wrap; padding: 10px 10px; } -table.post th a { text-decoration: none; color: black; } -table.post td:not(.body):not(.edit) a { text-decoration: none; color: black; } +th a, td:not(.command) a { text-decoration: none; color: black; } +td.body { white-space: pre-wrap; padding: 10px 10px; } + +input[type="text"], input[type="password"], textarea { + padding: 5px; +} +button, input, select { + margin: 5px 0; +} +button, select { + margin: 5px 10px 5px 0; + padding: 1px 10px; + background-color: gainsboro; + vertical-align: top; +} +button:disabled { color: gray; border: 2px solid gainsboro; outline: 1px solid gray; } +button:enabled, select { border: 2px outset white; outline: 1px solid black; } +button:enabled:active:hover, select:active { border: 2px inset white; padding: 2px 9px 0px 11px; } + +td.is_active { background-color: lemonchiffon; } +p.error { color: brown; font-style: italic; white-space: pre-wrap; } +p.warning { color: brown; } +p.warning::before { content: "\26a0"; } + +article hr { max-width: 50rem; margin-right: auto; margin-left: 0; } +article hr { border: none; border-top: 2px dotted brown; } +article hr + p { font-style: italic; } -- cgit v1.2.3