Update styling of verify form, make site dark mode

This commit is contained in:
Aadi Desai 2023-09-24 01:33:17 +01:00
parent 75f1f7321c
commit 1e3011b6e4
Signed by: supleed2
SSH key fingerprint: SHA256:CkbNRs0yVzXEiUp2zd0PSxsfRUMFF9bLlKXtE1xEbKM
2 changed files with 119 additions and 56 deletions

View file

@ -19,6 +19,8 @@
width: 100%; width: 100%;
height: 30px; height: 30px;
background-color: #333; background-color: #333;
color: #fff;
text-align: center;
} }
.footer-text { .footer-text {
@ -34,6 +36,38 @@ html,
body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #333;
color: #fff;
}
a {
color: #a5cff3;
}
a:hover,
a:active {
color: #4dacff;
}
.jumbotron {
margin: 0 0 0 0;
background: #333;
color: #fff;
}
.dropdown-menu {
background-color: #222;
}
.dropdown-menu>li>a {
color: #fff;
background-color: #222;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:active {
color: #fff;
background-color: #555;
} }
.carousel-inner, .carousel-inner,
@ -84,57 +118,4 @@ body {
.row h1 { .row h1 {
font-size: 20pt; font-size: 20pt;
}
.verify-body {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
.discord-user {
align-self: center;
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
}
#discord-username {
margin-left: 10px;
}
.verify-form {
align-self: center;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100px;
}
.verify-input {
border-radius: 2px;
border: 0;
background-color: #d1f0ff;
box-sizing: border-box;
padding: 4px 20px 0;
}
.verify-submit {
border-radius: 2px;
border: 0;
background-color: #83d8ff;
box-sizing: border-box;
padding: 4px 20px 0;
cursor: pointer;
}
.verify-submit:hover,
.verify-submit:active {
background-color: #72fff3;
} }

View file

@ -30,6 +30,89 @@
} }
} }
</script> </script>
<style>
::-webkit-input-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
::-ms-input-placeholder {
color: #fff;
}
:-moz-placeholder {
color: #fff;
opacity: 1;
}
::-moz-placeholder {
color: #fff;
opacity: 1;
}
.verify-body {
width: 100%;
margin: 0;
padding: 10px 10%;
background: #222;
color: #dddddd;
}
#discord-text {
margin-right: 10px;
}
.discord-user {
align-self: center;
display: flex;
align-items: center;
width: 100%;
text-align: center;
justify-content: center;
}
#discord-username {
margin-left: 10px;
}
.verify-form {
align-self: center;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100px;
}
.verify-input {
width: 40%;
margin: 3px 30%;
padding: 5px;
border: none;
border-radius: 6px;
background-color: #337ab7;
text-align: center;
}
.verify-submit {
width: 20%;
margin: 3px 40%;
padding: 10px;
border: none;
border-radius: 6px;
background-color: #337ab7;
color: #fff;
font-size: 1.5em;
cursor: pointer;
}
.verify-submit:hover,
.verify-submit:active {
background-color: #3d90d9;
}
</style>
</head> </head>
<body onload="setDiscordID()"> <body onload="setDiscordID()">
@ -110,20 +193,19 @@
</p> </p>
<br> <br>
<div class="discord-user"> <div class="discord-user">
<p><b>Verification for:</b></p> <p id="discord-text"><b>Verification for:</b></p>
<img id="discord-avatar" height="50px" width="50px" src="https://cdn.discordapp.com/embed/avatars/0.png"> <img id="discord-avatar" height="50px" width="50px" src="https://cdn.discordapp.com/embed/avatars/0.png">
<p id="discord-username">Loading...</p> <p id="discord-username">Loading...</p>
</div> </div>
<br> <br>
<form class="verify-form" method="post" action="submit"> <form class="verify-form" method="post" action="submit">
<input class="verify-input" type="text" name="username" id="username" autocomplete="username" <input class="verify-input" type="text" name="username" id="username" autocomplete="username"
placeholder="Imperial Short-code" required /> placeholder="Imperial Shortcode (ab1234)" required />
<input class="verify-input" type="password" name="password" id="password" autocomplete="current-password" <input class="verify-input" type="password" name="password" id="password" autocomplete="current-password"
placeholder="Password" required /> placeholder="Password" required />
<input type="hidden" name="discordID" id="discordID" autocomplete="off" value="[[discordID]]" /> <input type="hidden" name="discordID" id="discordID" autocomplete="off" value="[[discordID]]" />
<input class="verify-submit" type="submit" value="Let's go!" /> <input class="verify-submit" type="submit" value="Let's go!" />
</form> </form>
<br>
</div> </div>
<!-- Footer --> <!-- Footer -->