Disroot
/
gpg-lacre
9
15
Fork 4
Code Issues 29 Pull Requests 1 Releases 2 Wiki Activity

unify theme with website and form input fixes

This commit is contained in:
antilopa 2022-08-20 12:35:30 +02:00
parent d77f03bb85
commit 603cc3ab79
2 changed files with 76 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
gpg-mailgate-web/public_html/theme/home.php
View File

@ -21,30 +21,36 @@
*/ */
?> ?>
<img src="theme/branding/logo.png" class="center logo"> <div id=header>
<h1><?= $config['site_title'] ?></h1> <a href <?= $config['site_url'] ?>><img src="theme/branding/logo.png" class="center logo"></a>
<h1><?= $config['site_title'] ?></h1>
</div>
<? if(!empty($message)) { ?> <div class="wrapper padding">
<p style="color:red;"><div id=infomsg><b><i><?= htmlspecialchars($message) ?></i></b></div></p> <? if(!empty($message)) { ?>
<? } ?> <div id=infomsg><p><b><i><?= htmlspecialchars($message) ?></i></b></p></div>
<p><?= $lang['home_text'] ?></p> <? } ?>
<form id="keyform" method="POST"> <p><?= $lang['home_text'] ?></p>
<p> <form id="keyform" method="POST">
<label for="email"><?= $lang['home_emaildesc'] ?></label> <p>
<br> <label for="email"><?= $lang['home_emaildesc'] ?></label>
<input type="text" class="email" name="email" required> <br>
</p> <input type="text" class="email" name="email" required>
<p> </p>
<label for="key"><?= $lang['home_keydesc'] ?></label> <p>
<br> <label for="key"><?= $lang['home_keydesc'] ?></label>
<input type="text" class="key" name="key" required></label> <br>
</p> <!--input type="text" class="key" name="key" required-->
<p> <textarea rows="5" cols="80" name="key" id="key" class="key" required></textarea>
<input type="submit" value="<?= $lang['home_submitkey'] ?>" /> </p>
</p> <p>
</form> <input type="submit" value="<?= $lang['home_submitkey'] ?>" />
</p>
<img src="theme/branding/bottom_ribbon.png" class="cover"> </form>
<p><?= $lang['home_footer'] ?></p>
</div>
<div id=footer>
<img src="theme/branding/bottom_ribbon.png" class="cover">
<p><?= $lang['home_footer'] ?></p>
</div>

70
gpg-mailgate-web/public_html/theme/style.css
View File

@ -6,9 +6,16 @@
--main-font-color: #E3DEDB; --main-font-color: #E3DEDB;
--main-linkcolor: #BB2244; --main-linkcolor: #BB2244;
--main-hovercolor: #2C4359; --main-hovercolor: #2C4359;
/* --bg-color: #203040 ;
--logo-color: #BB2244;
--highlight-color: #DD4466;
--txt-color: #E3DEDB;
--select-color: #2C4359;
*/
/* background colors */ /* background colors */
--bg-hs: 210, 33%; --bg-hs: 210, 33%;
--bg-l:19%; --bg-l:19%;
--bg: hsl(var(--bg-hs),var(--bg-l)); --bg: hsl(var(--bg-hs),var(--bg-l));
--bg-darker: hsl(var(--bg-hs),calc(var(--bg-l) - 5%)); --bg-darker: hsl(var(--bg-hs),calc(var(--bg-l) - 5%));
@ -20,7 +27,7 @@
--main: hsl(var(--main-hs),var(--main-l)); --main: hsl(var(--main-hs),var(--main-l));
--main-darker: hsl(var(--main-hs),calc(var(--main-l) - 5%)); --main-darker: hsl(var(--main-hs),calc(var(--main-l) - 5%));
--main-darkest: hsl(var(--main-hs),calc(var(--main-l) - 10%)); --main-darkest: hsl(var(--main-hs),calc(var(--main-l) - 10%));
/* font color */ /* font color */
--font-hs: 23, 12%; --font-hs: 23, 12%;
--font-l: 87%; --font-l: 87%;
@ -32,16 +39,22 @@ html {
background-color: var(--bg-darkest); background-color: var(--bg-darkest);
} }
body { body {
width: 45em; width: 70%;
margin: 0 auto; margin: 0 auto;
background-color: var(--bg); background-color: var(--bg);
color: var(--font); color: var(--font);
font-family: var(--main-font); font-family: var(--main-font);
line-height: 1.2;
text-align: center; text-align: center;
} }
.wrapper {
margin: 0 20%;
}
.padding {
padding: 3rem 1rem;
}
img.logo { img.logo {
padding-top: 10em; width: 70%;
width: 30em;
} }
.center { .center {
display: block; display: block;
@ -49,10 +62,13 @@ img.logo {
margin-right: auto; margin-right: auto;
} }
.cover { .cover {
width: 100%; width: 100%;
margin-top: 10%; margin-left: 0;
object-fit: cover; object-fit: cover;
} }
.hide {
display:none;
}
a { a {
color: var(--main); color: var(--main);
text-decoration:none; text-decoration:none;
@ -65,28 +81,31 @@ a:hover {
} }
.key { .key {
width: 80%; width: 80%;
margin: 1rem auto;
height: 150px; height: 150px;
padding: 12px 20px; padding: 12px 20px;
border-radius: 4px; border-radius: 10px;
border: 0px; border: 1px solid var(--main);
background-color: var(--bg-darker); background-color: var(--font);
color: var(--font); color: var(--bg);
font-family: var(--main-font); font-family: var(--main-font);
resize: none; resize: none;
} }
.email { .email {
width: 50%; width: 50%;
margin: 1rem auto;
padding: 12px 20px; padding: 12px 20px;
border-radius: 4px; border-radius: 10px;
border: 0px; border: 1px solid var(--main);
background-color: var(--bg-darker); background-color: var(--font);
color: var(--font); color: var(--bg);
font-family: var(--main-font); font-family: var(--main-font);
resize: none; resize: none;
} }
input[type=submit] { input[type=submit] {
background-color: var(--main-darker); background-color: var(--main-darker);
border: none; border-radius: 4px;
border: 0px;
color: var(--font); color: var(--font);
padding: 16px 32px; padding: 16px 32px;
margin: 4px 2px; margin: 4px 2px;
@ -96,16 +115,19 @@ input:hover[type=submit] {
background-color: var(--main-darkest); background-color: var(--main-darkest);
} }
.infomsg { .infomsg {
width: 80%; width: 70%;
padding: 12px 20px; margin: 0 auto;
border-radius: 4px; border-radius: 4px;
border: 2px; border: 2px;
border-color: var(--main); border-color: var(--main);
background-color: var(--bg-darker); background-color: var(--bg); /*shold be bg-darker but hidden when empty*/
color: var(--font); color: var(--main);
font-family: var(--main-font); font-family: var(--main-font);
resize: none; resize: none;
} }
.infomsg:empty { #infomsg p:empty {
display: none; display: none;
} }
#infomsg p {
padding: 12px 24px;
}