Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-07-16 16:10:51 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add a background to most pages

Browse Source 
The background image is part of the external assets.
This commit is contained in:
Andrio Celos 2023-06-24 23:53:58 +10:00
parent 6bab8f8ed6
commit 7cc4c35b37
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TableturfBattleClient/index.html
View File

@ -25,7 +25,7 @@
<body>
<div id="noJSPage">This application requires JavaScript.</div>
<div id="preGamePage" hidden>
<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></p>
<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></div>
<h1>Tableturf Battle</h1>
<form id="preGameForm">
<p><label for="nameBox">Choose a nickname: <input type="text" id="nameBox" required minlength="1" maxlength="20"/></label></p>

18
TableturfBattleClient/tableturf.css
View File

@ -12,11 +12,6 @@ html, body {
overflow-x: hidden; /* TODO: This stops the page from scrolling into whitespace on mobile Chrome. A better solution is probably possible. */
}
body, dialog {
color: white;
background: black;
color-scheme: dark;
}
body {
margin: 0;
font-family: 'Splatoon 2', sans-serif;
@ -37,9 +32,17 @@ body {
--player-special-colour: var(--special-colour-1);
--player-special-accent-colour: var(--special-accent-colour-1);
--theme-colour: #0c92f2;
color: white;
background: url('assets/external/BannerBackground.png') black;
background-position: 50% -72px;
color-scheme: dark;
}
dialog {
background: black;
}
#gamePage {
background: black;
--player-primary-colour: var(--primary-colour-1);
--player-special-colour: var(--special-colour-1);
--player-special-accent-colour: var(--special-accent-colour-1);
@ -87,6 +90,11 @@ h1, h2, h3, h4, h5, h6 {
#preGamePage {
text-align: center;
padding-top: 40px;
}
#logoBanner {
background: grey;
}
#logo {