mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-10-05 01:22:16 +02:00
WIP of modern login page:
- Fix logo size - Implement customizable background image - Set different logo for login
This commit is contained in:
Hadi Nategh
parent
94e71aa6bf
commit
1d69265b9c
@ -171,7 +171,15 @@ class Login
|
||||
|
||||
$tmpl->set_var('website_title', $GLOBALS['egw_info']['server']['site_title']);
|
||||
$tmpl->set_var('template_set',$this->framework->template);
|
||||
|
||||
if (substr($GLOBALS['egw_info']['server']['login_background_file'], 0, 4) == 'http' ||
|
||||
$GLOBALS['egw_info']['server']['login_background_file'][0] == '/')
|
||||
{
|
||||
$var['background_file'] = $GLOBALS['egw_info']['server']['login_background_file'];
|
||||
}
|
||||
else
|
||||
{
|
||||
$var['background_file'] = Api\Image::find('api',$GLOBALS['egw_info']['server']['login_background_file']?$GLOBALS['egw_info']['server']['login_background_file']:'login_background', '', null);
|
||||
}
|
||||
if (substr($GLOBALS['egw_info']['server']['login_logo_file'], 0, 4) == 'http' ||
|
||||
$GLOBALS['egw_info']['server']['login_logo_file'][0] == '/')
|
||||
{
|
||||
@ -179,7 +187,7 @@ class Login
|
||||
}
|
||||
else
|
||||
{
|
||||
$var['logo_file'] = Api\Image::find('api',$GLOBALS['egw_info']['server']['login_logo_file']?$GLOBALS['egw_info']['server']['login_logo_file']:'logo', '', null); // null=explicit allow svg
|
||||
$var['logo_file'] = Api\Image::find('api',$GLOBALS['egw_info']['server']['login_logo_file']?$GLOBALS['egw_info']['server']['login_logo_file']:'login_logo', '', null); // null=explicit allow svg
|
||||
}
|
||||
$var['logo_url'] = $GLOBALS['egw_info']['server']['login_logo_url']?$GLOBALS['egw_info']['server']['login_logo_url']:'http://www.egroupware.org';
|
||||
if (substr($var['logo_url'],0,4) != 'http')
|
||||
|
||||
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
@ -1686,21 +1686,28 @@ body {
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo {
|
||||
position: relative;
|
||||
padding-top: 5%;
|
||||
padding-top: 2%;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img.login_logo {
|
||||
#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
max-height: 150px;
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
|
||||
max-width: 270px;
|
||||
#loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage not([class $= "error"]) {
|
||||
#loginMainDiv #loginScreenMessage:not([class $= "error"]) {
|
||||
margin: 1em;
|
||||
color: #0a5ca5;
|
||||
font-size: 12pt;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
|
||||
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#loginMainDiv div#login_footer {
|
||||
|
||||
@ -1675,21 +1675,28 @@ body {
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo {
|
||||
position: relative;
|
||||
padding-top: 5%;
|
||||
padding-top: 2%;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img.login_logo {
|
||||
#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
max-height: 150px;
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
|
||||
max-width: 270px;
|
||||
#loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage not([class $= "error"]) {
|
||||
#loginMainDiv #loginScreenMessage:not([class $= "error"]) {
|
||||
margin: 1em;
|
||||
color: #0a5ca5;
|
||||
font-size: 12pt;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
|
||||
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#loginMainDiv div#login_footer {
|
||||
|
||||
@ -54,13 +54,20 @@
|
||||
overflow-y: auto;
|
||||
#divLogo {
|
||||
position: relative;
|
||||
padding-top: 5%;
|
||||
img.login_logo {
|
||||
padding-top: 2%;
|
||||
.login_logo_container {
|
||||
width:250px;
|
||||
height:150px;
|
||||
max-height: 150px;
|
||||
max-width:250px;
|
||||
margin: 0 auto;
|
||||
max-width: 270px;
|
||||
}
|
||||
img.login_logo [src$="svg"]{
|
||||
max-width: 270px;
|
||||
.login_logo {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-size:contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -69,13 +76,11 @@
|
||||
|
||||
}
|
||||
// Meldung
|
||||
#loginScreenMessage not([class $= "error"]) {
|
||||
#loginScreenMessage:not([class $= "error"]) {
|
||||
margin: 1em;
|
||||
color: #0a5ca5;
|
||||
font-size: 12pt;
|
||||
img {max-width: 100%;}
|
||||
|
||||
|
||||
}
|
||||
div#login_footer {
|
||||
position: absolute;
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<script src="./api/js/login.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<div id="loginMainDiv">
|
||||
<div id="loginMainDiv" style="background-image:url({background_file})">
|
||||
<div id="divAppIconBar" style="position:relative;">
|
||||
<div id="divLogo">
|
||||
<a href="{logo_url}" target="_blank"><img src="{logo_file}" class="login_logo" border="0" alt="{logo_title}" title="{logo_title}" /></a>
|
||||
<div class="login_logo_container">
|
||||
<a href="{logo_url}" target="_blank">
|
||||
<div style="background-image:url({logo_file})" class="login_logo" border="0" alt="{logo_title}" title="{logo_title}" ></div>
|
||||
</a>
|
||||
</div>
|
||||
<div id="loginScreenMessage">{lang_message}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<script src="./api/js/login.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<div id="loginMainDiv">
|
||||
<div id="loginMainDiv" style="background-image:url({background_file})">
|
||||
<div id="divAppIconBar" style="position:relative;">
|
||||
<div id="divLogo">
|
||||
<a href="{logo_url}" target="_blank"><img src="{logo_file}" border="0" alt="{logo_title}" title="{logo_title}" /></a>
|
||||
<div class="login_logo_container">
|
||||
<a href="{logo_url}" target="_blank">
|
||||
<div style="background-image:url({logo_file})" class="login_logo" border="0" alt="{logo_title}" title="{logo_title}" ></div>
|
||||
</a>
|
||||
</div>
|
||||
<div id="loginScreenMessage">{lang_message}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1697,21 +1697,28 @@ body {
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo {
|
||||
position: relative;
|
||||
padding-top: 5%;
|
||||
padding-top: 2%;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img.login_logo {
|
||||
#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
max-height: 150px;
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img.login_logo [src$="svg"] {
|
||||
max-width: 270px;
|
||||
#loginMainDiv #divAppIconBar #divLogo .login_logo_container .login_logo {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage not([class $= "error"]) {
|
||||
#loginMainDiv #loginScreenMessage:not([class $= "error"]) {
|
||||
margin: 1em;
|
||||
color: #0a5ca5;
|
||||
font-size: 12pt;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage not([class $= "error"]) img {
|
||||
#loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#loginMainDiv div#login_footer {
|
||||
@ -6945,10 +6952,12 @@ form[id^="tracker-"] .dialogHeadbar {
|
||||
max-height: 20%;
|
||||
height: 20%;
|
||||
}
|
||||
div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
|
||||
width: 40%;
|
||||
margin-top: 5px;
|
||||
background: white;
|
||||
div#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
max-height: 100px;
|
||||
max-width: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
div#loginMainDiv div#centerBox {
|
||||
padding: 0;
|
||||
@ -7007,9 +7016,6 @@ form[id^="tracker-"] .dialogHeadbar {
|
||||
}
|
||||
}
|
||||
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
|
||||
body div#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
|
||||
width: 70%;
|
||||
}
|
||||
body div#loginMainDiv div#centerBox form table.divLoginbox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -58,10 +58,14 @@
|
||||
#divAppIconBar {
|
||||
max-height:20%;
|
||||
height:20%;
|
||||
#divLogo img[src$="svg"] {
|
||||
width:40%;
|
||||
margin-top: 5px;
|
||||
background:white;
|
||||
#divLogo {
|
||||
.login_logo_container {
|
||||
width:200px;
|
||||
height:100px;
|
||||
max-height: 100px;
|
||||
max-width:200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
div#centerBox{
|
||||
@ -124,11 +128,6 @@
|
||||
{
|
||||
body{
|
||||
div#loginMainDiv{
|
||||
#divAppIconBar {
|
||||
#divLogo img[src$="svg"] {
|
||||
width:70%;
|
||||
}
|
||||
}
|
||||
div#centerBox{
|
||||
form {
|
||||
table.divLoginbox {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user