diff options
| author | Tor Andersson <tor@ccxvii.net> | 2023-10-13 19:59:06 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-10-13 22:41:09 +0200 |
| commit | 4c5d2e4afe02479dcfb770fa1d6cfccb499e4fff (patch) | |
| tree | 9206a2c5472c5c1480ad5c035b776a74d74a602f /views/join.pug | |
| parent | 5cdc7862b20c8642a235e8ea46686939e5f6032a (diff) | |
| download | server-4c5d2e4afe02479dcfb770fa1d6cfccb499e4fff.tar.gz | |
Clean up stylesheet and improve layout on small and large screens.
Use variables for color theming.
Diffstat (limited to 'views/join.pug')
| -rw-r--r-- | views/join.pug | 24 |
1 files changed, 11 insertions, 13 deletions
diff --git a/views/join.pug b/views/join.pug index 621ab0a..d75ef4d 100644 --- a/views/join.pug +++ b/views/join.pug @@ -8,17 +8,16 @@ html game.title_id) title= game.title_name style. - table { min-width: 0; } - th,td { border: 1px solid black; } - a.red { text-decoration: none; color: brown; font-size: 15px; float: right; } - a.green { text-decoration: none; color: green; font-size: 15px; float: right; } - th { white-space: nowrap; background-color: gainsboro; } - td { width: 180px; background-color: white; } - #message { background-color: whitesmoke; } + th,td { border: var(--table-border); } + a.red { text-decoration: none; color: var(--color-red); font-size: 15px; float: right; } + a.green { text-decoration: none; color: var(--color-green); font-size: 15px; float: right; } + td, th { border: var(--thin-border); } + td { width: 180px; } .hide { display: none; } - td.is_invite { background-color: honeydew } - td.enemy { background-color: #f66 } - td.enemy::before { content: "\1f6ab "; color: #000; font-size: 15px; } + td.is_invite { background-color: var(--color-table-invite); } + td.is_active { background-color: var(--color-table-active); } + td.enemy { background-color: var(--color-table-danger); } + td.enemy::before { content: "\1f6ab "; font-size: 15px; } script. let game = !{ JSON.stringify(game) } let roles = !{ JSON.stringify(roles) } @@ -73,8 +72,6 @@ html p i= game.notice - br(clear="left") - dialog(id="invite") | Invite a friend: br @@ -92,8 +89,9 @@ html tbody each role in roles tr - th(id="role_"+role.replace(/ /g, "_")+"_name")= role + th.w(id="role_"+role.replace(/ /g, "_")+"_name")= role td(id="role_"+role.replace(/ /g, "_")) - + tfoot tr td#message(colspan=2) - |