Experimental login page design

Set your favorite color in System->General->"Login CSS file"
This commit is contained in:
Steve Beaver 2017-06-15 14:07:48 -04:00
parent 4705e0f878
commit e79ff1ee2c
10 changed files with 1138 additions and 64 deletions

View File

@ -1581,6 +1581,7 @@ function get_user_settings($username) {
$settings['webgui']['dashboardcolumns'] = $config['system']['webgui']['dashboardcolumns'];
$settings['webgui']['webguihostnamemenu'] = $config['system']['webgui']['webguihostnamemenu'];
$settings['webgui']['webguicss'] = $config['system']['webgui']['webguicss'];
$settings['webgui']['logincss'] = $config['system']['webgui']['logincss'];
$settings['webgui']['interfacessort'] = isset($config['system']['webgui']['interfacessort']);
$settings['webgui']['dashboardavailablewidgetspanel'] = isset($config['system']['webgui']['dashboardavailablewidgetspanel']);
$settings['webgui']['webguifixedmenu'] = isset($config['system']['webgui']['webguifixedmenu']);

View File

@ -229,18 +229,32 @@ function display_login_form() {
}
}
$logincssfile = "/css/login_blue.css";
if (isset($user_settings['webgui']['logincss'])) {
if (file_exists("/usr/local/www/css/" . $user_settings['webgui']['logincss'])) {
$logincssfile = "/css/" . $user_settings['webgui']['logincss'];
}
}
if (isset($config['system']['webgui']['loginshowhost'])) {
$loginbannerstr = sprintf(gettext('Login to %1$s on %2$s.%3$s'), $g['product_name'], htmlspecialchars($config['system']['hostname']), htmlspecialchars($config['system']['domain']));
$loginbannerstr = sprintf(gettext('%1$s.%2$s'), htmlspecialchars($config['system']['hostname']), htmlspecialchars($config['system']['domain']));
} else {
$loginbannerstr = sprintf(gettext('Login to %1$s'), $g['product_name']);
}
$loginautocomplete = isset($config['system']['webgui']['loginautocomplete']) ? '' : 'autocomplete="off"';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?=$cssfile?>" />
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?=$logincssfile?>" type="text/css">
<title><?=gettext("Login"); ?></title>
<script type="text/javascript">
//<![CDATA{
@ -248,73 +262,80 @@ function display_login_form() {
//]]>
</script>
</head>
<body id="login" class="no-menu">
<div id="jumbotron">
<div class="container">
<div class="col-sm-offset-3 col-sm-6 col-xs-12">
<?php
if (is_ipaddr($http_host) && !$local_ip && !isset($config['system']['webgui']['nohttpreferercheck'])) {
$nifty_background = "#999";
print_info_box(gettext("The IP address being used to access this router is not configured locally, which may be forwarded by NAT or other means. <br /><br />If this forwarding is unexpected, it should be verified that a man-in-the-middle attack is not taking place."));
}
$loginautocomplete = isset($config['system']['webgui']['loginautocomplete']) ? '' : 'autocomplete="off"';
?>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title"><?=$loginbannerstr?></h2>
</div>
<div class="panel-body">
<?php if (!empty($_SESSION['Login_Error'])): ?>
<div class="alert alert-danger" role="alert"><?=$_SESSION['Login_Error'];?></div>
<?php endif ?>
<div class="alert alert-warning hidden" id="no_cookies"><?= gettext("The browser must support cookies to login."); ?></div>
<form method="post" <?= $loginautocomplete ?> action="<?=$_SERVER['SCRIPT_NAME'];?>" class="form-horizontal">
<div class="form-group">
<label for="usernamefld" class="col-sm-3 control-label"><?=gettext("Username")?></label>
<div class="col-sm-9 col-md-7">
<input type="text" class="form-control" name="usernamefld" id="usernamefld" placeholder="<?=gettext("Enter your username")?>" autocorrect="off" autocapitalize="none" spellcheck="false">
</div>
</div>
<div class="form-group">
<label for="passwordfld" class="col-sm-3 control-label"><?=gettext("Password")?></label>
<div class="col-sm-9 col-md-7">
<input type="password" class="form-control" name="passwordfld" id="passwordfld" placeholder="<?=gettext("Enter your password")?>">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9 col-md-7">
<button type="submit" class="btn btn-primary" name="login"><?=gettext("Login")?></button>
</div>
</div>
</form>
</div>
</div>
<body id="login" >
<div class="row " style="background-color: #ffffff;">
<div class="col-sm-5" >
<div style="text-align:center">
<svg x="0px" y="0px" viewBox="0 0 282.8 84.2" width="300" height="100">
<style type="text/css">
.st0{fill:#2B40B5;}
.st1{fill:#1475CF;}
.st2{fill:#1C1275;}
</style>
<path class="st0" d="M27.8,57.7c2.9,0,5.4-0.9,7.5-2.6c2.1-1.7,3.6-4,4.4-6.8c0.8-2.8,0.6-5.1-0.5-6.8c-1.1-1.7-3.2-2.6-6.1-2.6 c-2.9,0-5.4,0.9-7.5,2.6c-2.1,1.7-3.5,4-4.3,6.8c-0.8,2.8-0.7,5.1,0.5,6.8C22.8,56.9,24.8,57.7,27.8,57.7"/>
<path class="st0" d="M115.1,46.6c-1.5-0.8-3-1.4-4.7-1.8c-1.7-0.4-3.2-0.7-4.7-1.1c-1.5-0.3-2.7-0.7-3.6-1.1c-0.9-0.4-1.4-1.1-1.4-2 c0-1.1,0.5-1.9,1.4-2.4c0.9-0.5,1.9-0.7,2.8-0.7c2.8,0,5,1,6.7,3.1l7-7c-1.7-1.8-3.9-3.1-6.4-3.8c-2.5-0.7-5-1.1-7.4-1.1 c-1.9,0-3.9,0.2-5.7,0.7c-1.9,0.5-3.6,1.2-5,2.3c-1.5,1-2.6,2.3-3.5,3.9c-0.9,1.6-1.3,3.5-1.3,5.7c0,2.3,0.5,4.2,1.4,5.6 c0.9,1.4,2.1,2.5,3.6,3.3c1.5,0.8,3,1.3,4.7,1.7c1.7,0.4,3.2,0.7,4.7,1.1c1.5,0.3,2.7,0.7,3.6,1.2c0.9,0.5,1.4,1.2,1.4,2.2 c0,1-0.5,1.7-1.6,2.1c-1.1,0.4-2.3,0.6-3.6,0.6c-1.7,0-3.3-0.3-4.6-1c-1.3-0.7-2.5-1.7-3.6-3l-7,7.7c1.8,1.9,4.1,3.2,6.7,3.9 c2.7,0.7,5.3,1.1,7.9,1.1c2,0,4-0.2,6.1-0.6c2-0.4,3.9-1,5.5-2c1.6-0.9,3-2.2,4-3.8c1-1.6,1.6-3.5,1.6-5.9c0-2.3-0.5-4.2-1.4-5.6 C117.7,48.6,116.5,47.4,115.1,46.6"/>
<path class="st0" d="M156.3,34.1c-1.5-1.7-3.3-3-5.5-3.9c-2.2-0.9-4.6-1.4-7.2-1.4c-2.9,0-5.6,0.5-8.1,1.4c-2.5,0.9-4.7,2.2-6.6,3.9 c-1.9,1.7-3.3,3.8-4.4,6.2c-1.1,2.4-1.6,5.1-1.6,8c0,3,0.5,5.6,1.6,8c1.1,2.4,2.5,4.5,4.4,6.2c1.9,1.7,4.1,3,6.6,3.9 c2.5,0.9,5.2,1.4,8.1,1.4c3,0,5.9-0.6,8.7-1.9c2.8-1.3,5.1-3.1,7-5.4l-8-5.9c-1,1.3-2.1,2.4-3.4,3.3c-1.3,0.8-2.9,1.3-4.8,1.3 c-2.2,0-4.1-0.7-5.7-2c-1.5-1.3-2.5-3.1-3-5.2H161v-3.6c0-3-0.4-5.6-1.2-8C159,37.9,157.8,35.8,156.3,34.1 M134.3,44.1 c0.1-0.9,0.3-1.8,0.7-2.6c0.4-0.8,0.9-1.6,1.6-2.2c0.7-0.6,1.5-1.2,2.5-1.6c1-0.4,2.1-0.6,3.4-0.6c2.1,0,3.8,0.7,5.1,2.1 c1.3,1.4,2,3,1.9,5H134.3z"/>
<path class="st0" d="M198.3,33.8c-1-1.6-2.4-2.8-4.2-3.7c-1.8-0.9-4.1-1.3-7-1.3c-1.4,0-2.7,0.2-3.8,0.5c-1.2,0.4-2.2,0.8-3.1,1.4 c-0.9,0.6-1.7,1.2-2.4,1.9c-0.7,0.7-1.2,1.4-1.5,2.1H176v-5.1h-11v37.2h11.5V48.4c0-1.2,0.1-2.4,0.2-3.5c0.2-1.1,0.5-2.1,1-3 c0.5-0.9,1.2-1.6,2.1-2.1c0.9-0.5,2.1-0.8,3.6-0.8c1.5,0,2.6,0.3,3.4,0.9c0.8,0.6,1.4,1.4,1.8,2.4c0.4,1,0.6,2,0.7,3.2 c0.1,1.1,0.1,2.3,0.1,3.3v18.2h11.5V46.4c0-2.5-0.2-4.8-0.5-7C199.9,37.3,199.3,35.4,198.3,33.8"/>
<path class="st0" d="M231.5,46.6c-1.5-0.8-3-1.4-4.7-1.8c-1.7-0.4-3.2-0.7-4.7-1.1c-1.5-0.3-2.7-0.7-3.6-1.1c-0.9-0.4-1.4-1.1-1.4-2 c0-1.1,0.5-1.9,1.4-2.4c0.9-0.5,1.9-0.7,2.8-0.7c2.8,0,5,1,6.7,3.1l7-7c-1.7-1.8-3.9-3.1-6.4-3.8c-2.5-0.7-5-1.1-7.4-1.1 c-1.9,0-3.9,0.2-5.7,0.7c-1.9,0.5-3.6,1.2-5,2.3c-1.5,1-2.6,2.3-3.5,3.9c-0.9,1.6-1.3,3.5-1.3,5.7c0,2.3,0.5,4.2,1.4,5.6 c0.9,1.4,2.1,2.5,3.6,3.3c1.5,0.8,3,1.3,4.7,1.7c1.7,0.4,3.2,0.7,4.7,1.1c1.5,0.3,2.7,0.7,3.6,1.2c0.9,0.5,1.4,1.2,1.4,2.2 c0,1-0.5,1.7-1.6,2.1c-1.1,0.4-2.3,0.6-3.6,0.6c-1.7,0-3.3-0.3-4.6-1c-1.3-0.7-2.5-1.7-3.6-3l-7,7.7c1.8,1.9,4.1,3.2,6.7,3.9 c2.7,0.7,5.3,1.1,7.9,1.1c2,0,4-0.2,6.1-0.6c2-0.4,3.9-1,5.5-2c1.6-0.9,3-2.2,4-3.8c1-1.6,1.6-3.5,1.6-5.9c0-2.3-0.5-4.2-1.4-5.6 C234.1,48.6,232.9,47.4,231.5,46.6"/>
<path class="st0" d="M277.4,51.9v-4.2c-0.1-2.7-0.5-5.2-1.2-7.4c-0.8-2.4-2-4.5-3.5-6.2c-1.5-1.7-3.3-3-5.5-3.9 c-2.2-0.9-4.6-1.4-7.2-1.4c-2.9,0-5.6,0.5-8.1,1.4c-2.5,0.9-4.7,2.2-6.6,3.9c-1.9,1.7-3.3,3.8-4.4,6.2c-1.1,2.4-1.6,5.1-1.6,8 c0,3,0.5,5.6,1.6,8c1.1,2.4,2.5,4.5,4.4,6.2c1.9,1.7,4.1,3,6.6,3.9c2.5,0.9,5.2,1.4,8.1,1.4c3,0,5.9-0.6,8.7-1.9 c2.8-1.3,5.1-3.1,7-5.4l-8-5.9c-1,1.3-2.1,2.4-3.4,3.3c-1.3,0.8-2.9,1.3-4.8,1.3c-2.2,0-4.1-0.7-5.7-2c-1.5-1.3-2.5-3.1-3-5.2H277.4 z M250.7,44.1c0.1-0.9,0.3-1.8,0.7-2.6c0.4-0.8,0.9-1.6,1.6-2.2c0.7-0.6,1.5-1.2,2.5-1.6c1-0.4,2.1-0.6,3.4-0.6 c2.1,0,3.8,0.7,5.1,2.1c1.3,1.4,2,3,1.9,5H250.7z"/>
<path class="st1" d="M52.6,38.9l2.6-9.2h4.6l1.8-6.6c0.6-2,1.3-4,2.2-5.8c0.8-1.8,2-3.4,3.4-4.8c1.4-1.4,3.2-2.5,5.3-3.3 c2.1-0.8,4.8-1.2,7.9-1.2c0.8,0,1.5,0,2.3,0.1c-0.7-2.9-3.3-5-6.3-5.1H11.9c-3.6,0-6.5,3-6.5,6.6V67l10.5-37.3h10.6l-1.4,4.9h0.2 c0.6-0.7,1.4-1.3,2.4-2c1-0.7,2-1.3,3.1-1.9c1.1-0.6,2.3-1,3.6-1.4c1.3-0.4,2.6-0.5,3.9-0.5c2.8,0,5.1,0.5,7.1,1.4 c2,0.9,3.5,2.3,4.7,4c1,1.5,1.6,3.3,1.9,5.4l0.8-0.6H52.6z"/>
<path class="st2" d="M82.1,17.9c-0.5-0.1-1.1-0.2-1.8-0.2c-1.8,0-3.3,0.4-4.5,1.2c-1.1,0.8-2.1,2.4-2.8,4.9l-1.7,5.9h6.5l1.6,5.1 l-4.2,4.1h-6.5l-7.9,28H49.4l7.9-28h-4.4L52,39.5c0,0.2,0.1,0.5,0.1,0.7c0.2,2.3-0.1,4.9-0.9,7.7c-0.7,2.6-1.8,5.1-3.3,7.5 c-1.5,2.4-3.2,4.5-5.1,6.3c-2,1.8-4.2,3.3-6.6,4.4c-2.4,1.1-4.9,1.6-7.6,1.6c-2.4,0-4.5-0.4-6.4-1.1c-1.9-0.7-3.2-2-4-3.8h-0.2 l-5,17.7h63.3c3.6,0,6.6-2.9,6.6-6.6V18.2C82.6,18.1,82.3,18,82.1,17.9"/>
<path class="st0" d="M277.6,68.5h0.8c0.4,0,0.6-0.1,0.7-0.2c0.1-0.1,0.2-0.2,0.2-0.4c0-0.1,0-0.2-0.1-0.3c-0.1-0.1-0.1-0.2-0.3-0.2 c-0.1,0-0.3-0.1-0.6-0.1h-0.7V68.5z M277,70.6v-3.8h1.3c0.5,0,0.8,0,1,0.1c0.2,0.1,0.4,0.2,0.5,0.4c0.1,0.2,0.2,0.4,0.2,0.6 c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.5,0.3-0.8,0.3c0.1,0.1,0.2,0.1,0.3,0.2c0.2,0.2,0.3,0.4,0.6,0.8l0.5,0.7h-0.8l-0.3-0.6 c-0.3-0.5-0.5-0.8-0.6-0.9c-0.1-0.1-0.3-0.1-0.5-0.1h-0.4v1.6H277z M278.6,65.7c-0.5,0-1,0.1-1.5,0.4c-0.5,0.3-0.8,0.6-1.1,1.1 c-0.3,0.5-0.4,1-0.4,1.5c0,0.5,0.1,1,0.4,1.5c0.3,0.5,0.6,0.8,1.1,1.1c0.5,0.3,1,0.4,1.5,0.4c0.5,0,1-0.1,1.5-0.4 c0.5-0.3,0.8-0.6,1.1-1.1c0.3-0.5,0.4-1,0.4-1.5c0-0.5-0.1-1-0.4-1.5c-0.3-0.5-0.6-0.8-1.1-1.1C279.6,65.8,279.1,65.7,278.6,65.7z M278.6,65.1c0.6,0,1.2,0.2,1.8,0.5c0.6,0.3,1,0.7,1.3,1.3c0.3,0.6,0.5,1.2,0.5,1.8c0,0.6-0.2,1.2-0.5,1.8c-0.3,0.6-0.8,1-1.3,1.3 c-0.6,0.3-1.2,0.5-1.8,0.5c-0.6,0-1.2-0.2-1.8-0.5c-0.6-0.3-1-0.8-1.3-1.3c-0.3-0.6-0.5-1.2-0.5-1.8c0-0.6,0.2-1.2,0.5-1.8 c0.3-0.6,0.8-1,1.3-1.3C277.4,65.2,278,65.1,278.6,65.1z"/>
</svg>
</div>
</div>
<script type="text/javascript">
//!<[CDATA[
events.push(function() {
document.cookie=
"cookie_test=1" +
"<?php echo $config['system']['webgui']['protocol'] == 'https' ? '; secure' : '';?>";
<div class="col-sm-4" style="padding-top: 1%">
<div class="alert alert-danger hidden" id="no_cookies"><?= gettext("The browser must support cookies to login."); ?></div>
<?php
if (is_ipaddr($http_host) && !$local_ip && !isset($config['system']['webgui']['nohttpreferercheck'])) {
print_info_box(gettext("The IP address being used to access this router is not configured locally, which may be forwarded by NAT or other means.<br />If this forwarding is unexpected, it should be verified that a man-in-the-middle attack is not taking place."), "warning", false);
} else {
print("<div class=\"alert alert-warning\">This login page is experiment/work in progress.</div>");
}
?>
</div>
if (document.cookie.indexOf("cookie_test") == -1)
document.getElementById("no_cookies").style.display="";
else
document.getElementById("no_cookies").style.display="none";
<div class="col-sm-3 text-center" style="padding-top: 2%">
<h4><a href="#">
<?=$loginbannerstr?>
</a></h4>
</div>
</div>
<div class="row logoRow" style="height:90%;">
<div class="col-sm-12 col-sm-offset-1 logoCol">
<div class="loginCont center-block">
<p class="form-title">
<?=gettext("Sign In")?></p>
<form method="post" <?= $loginautocomplete ?> action="<?=$_SERVER['SCRIPT_NAME'];?>" class="login">
<input name="usernamefld" id="usernamefld" type="text" placeholder="<?=gettext("Username")?>" />
<input name="passwordfld" id="passwordfld" type="password" placeholder="<?=gettext("Password")?>" />
<input type="submit" name="login" value="<?=gettext("Sign In")?>" class="btn btn-success btn-sm" />
</form>
</div>
</div>
</div>
<div>
<script type="text/javascript">
//!<[CDATA[
events.push(function() {
document.cookie=
"cookie_test=1" +
"<?php echo $config['system']['webgui']['protocol'] == 'https' ? '; secure' : '';?>";
if (document.cookie.indexOf("cookie_test") == -1)
document.getElementById("no_cookies").style.display="";
else
document.getElementById("no_cookies").style.display="none";
// Delete it
document.cookie = "cookie_test=1; expires=Thu, 01-Jan-1970 00:00:01 GMT";
});
//]]>
</script>
// Delete it
document.cookie = "cookie_test=1; expires=Thu, 01-Jan-1970 00:00:01 GMT";
});
//]]>
</script>
<?php
require_once('foot.inc');

View File

@ -0,0 +1,151 @@
html, body {
height: 100%;
}
.cont {
height: 100%;
background: #1e3f75;
color: white;
}
.logoRow {
height: 100%;
background: #1e3f75;
}
.logoCol {
height: 100%;
background: #1e3f75;
}
.loginCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #1e3f75;
}
.logoCont {
position: absolute;
top: 40%; left: 60%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #1e3f75;
}
.list-group{
background: #1e3f75 !important;
color: white !important;
}
.list-group-item {
background: #1e3f75 !important;
color: white !important;
border: none;
font-weight: 200;
}
.list-group-item-heading {
color: white !important;
font-weight: 350 !important;
}
p.form-title
{
font-family: 'Open Sans' , sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 4px;
}
p.rsstitle {
font-size: 30px;
font-weight: 150;
color: #ffffff;
}
form.login
{
width: 300px;
margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
width: 100%;
margin: 0;
padding: 10px 10px;
background: 0;
border: 0;
border-bottom: 1px solid #FFFFFF;
outline: 0;
font-style: italic;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 5px;
color: #FFFFFF;
outline: 0;
}
form.login input[type="submit"]
{
width: 60%;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 36px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
display: block;
margin : 0 auto;
margin-top: 36px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
form.login a
{
transition: color 0.5s ease;
}
form.login a:hover
{
color: #2ecc71;
}
.footer {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #212121;
padding-top: 10px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
}

View File

@ -0,0 +1,151 @@
html, body {
height: 100%;
}
.cont {
height: 100%;
background: #633215;
color: white;
}
.logoRow {
height: 100%;
background: #633215;
}
.logoCol {
height: 100%;
background: #633215;
}
.loginCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #633215;
}
.logoCont {
position: absolute;
top: 40%; left: 60%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #633215;
}
.list-group{
background: #633215 !important;
color: white !important;
}
.list-group-item {
background: #633215 !important;
color: white !important;
border: none;
font-weight: 200;
}
.list-group-item-heading {
color: white !important;
font-weight: 350 !important;
}
p.form-title
{
font-family: 'Open Sans' , sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 4px;
}
p.rsstitle {
font-size: 30px;
font-weight: 150;
color: #ffffff;
}
form.login
{
width: 300px;
margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
width: 100%;
margin: 0;
padding: 10px 10px;
background: 0;
border: 0;
border-bottom: 1px solid #FFFFFF;
outline: 0;
font-style: italic;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 5px;
color: #FFFFFF;
outline: 0;
}
form.login input[type="submit"]
{
width: 60%;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 36px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
display: block;
margin : 0 auto;
margin-top: 36px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
form.login a
{
transition: color 0.5s ease;
}
form.login a:hover
{
color: #2ecc71;
}
.footer {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #212121;
padding-top: 10px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
}

View File

@ -0,0 +1,151 @@
html, body {
height: 100%;
}
.cont {
height: 100%;
background: #424142;
color: white;
}
.logoRow {
height: 100%;
background: #424142;
}
.logoCol {
height: 100%;
background: #424142;
}
.loginCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #424142;
}
.logoCont {
position: absolute;
top: 40%; left: 60%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #424142;
}
.list-group{
background: #424142 !important;
color: white !important;
}
.list-group-item {
background: #424142 !important;
color: white !important;
border: none;
font-weight: 200;
}
.list-group-item-heading {
color: white !important;
font-weight: 350 !important;
}
p.form-title
{
font-family: 'Open Sans' , sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 4px;
}
p.rsstitle {
font-size: 30px;
font-weight: 150;
color: #ffffff;
}
form.login
{
width: 300px;
margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
width: 100%;
margin: 0;
padding: 10px 10px;
background: 0;
border: 0;
border-bottom: 1px solid #FFFFFF;
outline: 0;
font-style: italic;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 5px;
color: #FFFFFF;
outline: 0;
}
form.login input[type="submit"]
{
width: 60%;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 36px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
display: block;
margin : 0 auto;
margin-top: 36px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
form.login a
{
transition: color 0.5s ease;
}
form.login a:hover
{
color: #2ecc71;
}
.footer {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #212121;
padding-top: 10px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
}

View File

@ -0,0 +1,151 @@
html, body {
height: 100%;
}
.cont {
height: 100%;
background: #003300;
color: white;
}
.logoRow {
height: 100%;
background: #003300;
}
.logoCol {
height: 100%;
background: #003300;
}
.loginCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #003300;
}
.logoCont {
position: absolute;
top: 40%; left: 60%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #003300;
}
.list-group{
background: #003300 !important;
color: white !important;
}
.list-group-item {
background: #003300 !important;
color: white !important;
border: none;
font-weight: 200;
}
.list-group-item-heading {
color: white !important;
font-weight: 350 !important;
}
p.form-title
{
font-family: 'Open Sans' , sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 4px;
}
p.rsstitle {
font-size: 30px;
font-weight: 150;
color: #ffffff;
}
form.login
{
width: 300px;
margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
width: 100%;
margin: 0;
padding: 10px 10px;
background: 0;
border: 0;
border-bottom: 1px solid #FFFFFF;
outline: 0;
font-style: italic;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 5px;
color: #FFFFFF;
outline: 0;
}
form.login input[type="submit"]
{
width: 60%;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 36px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
display: block;
margin : 0 auto;
margin-top: 36px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
form.login a
{
transition: color 0.5s ease;
}
form.login a:hover
{
color: #2ecc71;
}
.footer {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #212121;
padding-top: 10px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
}

View File

@ -0,0 +1,151 @@
html, body {
height: 100%;
}
.cont {
height: 100%;
background: #4b1263;
color: white;
}
.logoRow {
height: 100%;
background: #4b1263;
}
.logoCol {
height: 100%;
background: #4b1263;
}
.loginCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #4b1263;
}
.logoCont {
position: absolute;
top: 40%; left: 60%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #4b1263;
}
.list-group{
background: #4b1263 !important;
color: white !important;
}
.list-group-item {
background: #4b1263 !important;
color: white !important;
border: none;
font-weight: 200;
}
.list-group-item-heading {
color: white !important;
font-weight: 350 !important;
}
p.form-title
{
font-family: 'Open Sans' , sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 4px;
}
p.rsstitle {
font-size: 30px;
font-weight: 150;
color: #ffffff;
}
form.login
{
width: 300px;
margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
width: 100%;
margin: 0;
padding: 10px 10px;
background: 0;
border: 0;
border-bottom: 1px solid #FFFFFF;
outline: 0;
font-style: italic;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 5px;
color: #FFFFFF;
outline: 0;
}
form.login input[type="submit"]
{
width: 60%;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 36px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
display: block;
margin : 0 auto;
margin-top: 36px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
form.login a
{
transition: color 0.5s ease;
}
form.login a:hover
{
color: #2ecc71;
}
.footer {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #212121;
padding-top: 10px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
}

View File

@ -0,0 +1,151 @@
html, body {
height: 100%;
}
.cont {
height: 100%;
background: #770101;
color: white;
}
.logoRow {
height: 100%;
background: #770101;
}
.logoCol {
height: 100%;
background: #770101;
}
.loginCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #770101;
}
.logoCont {
position: absolute;
top: 40%; left: 60%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #770101;
}
.list-group{
background: #770101 !important;
color: white !important;
}
.list-group-item {
background: #770101 !important;
color: white !important;
border: none;
font-weight: 200;
}
.list-group-item-heading {
color: white !important;
font-weight: 350 !important;
}
p.form-title
{
font-family: 'Open Sans' , sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 4px;
}
p.rsstitle {
font-size: 30px;
font-weight: 150;
color: #ffffff;
}
form.login
{
width: 300px;
margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
width: 100%;
margin: 0;
padding: 10px 10px;
background: 0;
border: 0;
border-bottom: 1px solid #FFFFFF;
outline: 0;
font-style: italic;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 5px;
color: #FFFFFF;
outline: 0;
}
form.login input[type="submit"]
{
width: 60%;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 36px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
display: block;
margin : 0 auto;
margin-top: 36px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
form.login a
{
transition: color 0.5s ease;
}
form.login a:hover
{
color: #2ecc71;
}
.footer {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #212121;
padding-top: 10px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
}

View File

@ -93,3 +93,134 @@ outlines varies considerably with browser/OS **/
input[type="checkbox"]:not(:checked) {
outline: 1px solid #888888;
}
/** Login form styles **/
.cont {
height: 100%;
background: #1e3f75;
color: white;
}
.logoRow {
height: 100%;
background: #1e3f75;
}
.logoCol {
height: 100%;
background: #1e3f75;
}
.loginCont {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #1e3f75;
}
.logoCont {
position: absolute;
top: 40%; left: 60%;
transform: translate(-50%,-50%);
height: 55%;
width: 80%;
background: #1e3f75;
}
.list-group{
background: #1e3f75 !important;
color: white !important;
}
.list-group-item {
background: #1e3f75 !important;
color: white !important;
border: none;
font-weight: 200;
}
.list-group-item-heading {
color: white !important;
font-weight: 350 !important;
}
p.form-title
{
font-family: 'Open Sans' , sans-serif;
font-size: 20px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
margin-top: 5%;
text-transform: uppercase;
letter-spacing: 4px;
}
p.rsstitle {
font-size: 30px;
font-weight: 150;
color: #ffffff;
}
form
{
width: 300px;
margin: 0 auto;
}
form.login input[type="text"], form.login input[type="password"]
{
width: 100%;
margin: 0;
padding: 10px 10px;
background: 0;
border: 0;
border-bottom: 1px solid #FFFFFF;
outline: 0;
font-style: italic;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 5px;
color: #FFFFFF;
outline: 0;
}
form.login input[type="submit"]
{
width: 60%;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-top: 36px;
outline: 0;
cursor: pointer;
letter-spacing: 1px;
display: block;
margin : 0 auto;
margin-top: 36px;
}
form.login input[type="submit"]:hover
{
transition: background-color 0.5s ease;
}
form.login label, form.login a
{
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
}
form.login a
{
transition: color 0.5s ease;
}
form.login a:hover
{
color: #2ecc71;
}

View File

@ -65,6 +65,7 @@ $pconfig['timezone'] = $config['system']['timezone'];
$pconfig['timeservers'] = $config['system']['timeservers'];
$pconfig['language'] = $config['system']['language'];
$pconfig['webguicss'] = $config['system']['webgui']['webguicss'];
$pconfig['logincss'] = $config['system']['webgui']['logincss'];
$pconfig['webguifixedmenu'] = $config['system']['webgui']['webguifixedmenu'];
$pconfig['dashboardcolumns'] = $config['system']['webgui']['dashboardcolumns'];
$pconfig['interfacessort'] = isset($config['system']['webgui']['interfacessort']);
@ -168,6 +169,12 @@ if ($_POST) {
unset($config['system']['webgui']['webguicss']);
}
if ($_POST['logincss']) {
$config['system']['webgui']['logincss'] = $_POST['logincss'];
} else {
unset($config['system']['webgui']['logincss']);
}
$config['system']['webgui']['loginshowhost'] = $_POST['loginshowhost'] ? true:false;
if ($_POST['webguifixedmenu']) {
@ -596,6 +603,14 @@ gen_requirestatefilter_field($section, $pconfig['requirestatefilter']);
gen_webguileftcolumnhyper_field($section, $pconfig['webguileftcolumnhyper']);
gen_disablealiaspopupdetail_field($section, $pconfig['disablealiaspopupdetail']);
$section->addInput(new Form_Select(
'logincss',
'Login page CSS',
$pconfig['logincss'],
["login_blue.css" => gettext("Blue"), "login_green.css" => gettext("Green"), "login_red.css" => gettext("Red"),
"login_purple.css" => gettext("Purple"), "login_gray.css" => gettext("Gray"), "login_brown.css" => gettext("Brown" )]
))->setHelp('Choose a CSS file for the login page');
$section->addInput(new Form_Checkbox(
'loginshowhost',
'Login hostname',