holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP of modern login page:

Browse Source 
- Set a bigger width for logo icon
- Some cleanup
This commit is contained in:
Hadi Nategh 2017-02-03 17:03:48 +01:00
parent 0d8d5db8ee
commit e0eaaee7f7
4 changed files with 165 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pixelegg/css/mobile.css
View File

@ -1680,7 +1680,7 @@ body {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
max-width: 250px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo { #loginMainDiv #divAppIconBar #divLogo {
position: relative; position: relative;
@ -1688,11 +1688,10 @@ body {
} }
#loginMainDiv #divAppIconBar #divLogo img { #loginMainDiv #divAppIconBar #divLogo img {
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { #loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
width: 150px; max-width: 270px;
max-width: 150px;
} }
#loginMainDiv #loginScreenMessage { #loginMainDiv #loginScreenMessage {
margin: 1em; margin: 1em;
@ -1769,8 +1768,6 @@ body {
background-repeat: repeat-x; background-repeat: repeat-x;
} }
#loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage { #loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage {
/*width: 70%;*/
/*margin-left: 15%;*/
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 400px;
border-top: solid 1px 5px; border-top: solid 1px 5px;
@ -1815,13 +1812,6 @@ body {
width: 250px; width: 250px;
margin-top: 25px; margin-top: 25px;
} }
#wrap {
/* float: left;
z-index: -1;
margin: 0 auto;
background-color:transparent;
width: 100%;*/
}
#wrap div.animation_login { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;
@ -1849,9 +1839,6 @@ body {
#img7, #img7,
#img8 { #img8 {
width: 12%; width: 12%;
/*height:100%;*/
/*position:fixed;*/
/*top: 10em;*/
z-index: -1; z-index: -1;
animation-name: test; animation-name: test;
animation-duration: 8s; animation-duration: 8s;

19
pixelegg/css/pixelegg.css
View File

@ -1669,7 +1669,7 @@ body {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
max-width: 250px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo { #loginMainDiv #divAppIconBar #divLogo {
position: relative; position: relative;
@ -1677,11 +1677,10 @@ body {
} }
#loginMainDiv #divAppIconBar #divLogo img { #loginMainDiv #divAppIconBar #divLogo img {
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { #loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
width: 150px; max-width: 270px;
max-width: 150px;
} }
#loginMainDiv #loginScreenMessage { #loginMainDiv #loginScreenMessage {
margin: 1em; margin: 1em;
@ -1758,8 +1757,6 @@ body {
background-repeat: repeat-x; background-repeat: repeat-x;
} }
#loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage { #loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage {
/*width: 70%;*/
/*margin-left: 15%;*/
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 400px;
border-top: solid 1px 5px; border-top: solid 1px 5px;
@ -1804,13 +1801,6 @@ body {
width: 250px; width: 250px;
margin-top: 25px; margin-top: 25px;
} }
#wrap {
/* float: left;
z-index: -1;
margin: 0 auto;
background-color:transparent;
width: 100%;*/
}
#wrap div.animation_login { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;
@ -1838,9 +1828,6 @@ body {
#img7, #img7,
#img8 { #img8 {
width: 12%; width: 12%;
/*height:100%;*/
/*position:fixed;*/
/*top: 10em;*/
z-index: -1; z-index: -1;
animation-name: test; animation-name: test;
animation-duration: 8s; animation-duration: 8s;

131
pixelegg/less/layout_loginPage.less
View File

@ -40,7 +40,7 @@
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
// Logo Leiste // Logo Leiste
#divAppIconBar{ #divAppIconBar {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -49,27 +49,21 @@
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
max-width:250px; max-width:270px;
#divLogo { #divLogo {
position: relative; position: relative;
top: 1px; top: 1px;
img { img {
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 270px;
} }
img[src$="svg"]{ img[src$="svg"]{
width: 150px; max-width: 270px;
max-width: 150px;
} }
} }
} }
// Meldung // Meldung
#loginScreenMessage{ #loginScreenMessage {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
@ -90,7 +84,7 @@
} }
} }
// Anmeldefenster / Box mit Mesaage + Form // Anmeldefenster / Box mit Mesaage + Form
div#centerBox{ div#centerBox {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -103,9 +97,8 @@
border-radius:5px; border-radius:5px;
opacity:0.94; opacity:0.94;
// Message // Message
#loginCdMessage{ #loginCdMessage {
margin: 1em; margin: 1em;
.border_radius_button_lefttop; .border_radius_button_lefttop;
color: #0a5ca5; color: #0a5ca5;
@ -117,40 +110,31 @@
} }
// Formular // Formular
form{ form {
margin: 1em; margin: 1em;
.hiddenCredential {display: none;} .hiddenCredential {display: none;}
// Table // Table
table.divLoginbox { table.divLoginbox {
background-color: transparent; background-color: transparent;
.border_radius_button_lefttop; .border_radius_button_lefttop;
tr.divLoginboxHeader {}
tr.divLoginboxHeader{}
// Passwort Image // Passwort Image
div.LoginPasswordImage{ div.LoginPasswordImage {
.gradient_vertical (@egw_color_1_a, @egw_color_2_d); .gradient_vertical (@egw_color_1_a, @egw_color_2_d);
img.passwordImage { img.passwordImage {
/*width: 70%;*/
/*margin-left: 15%;*/
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 400px;
.bordered(5px); .bordered(5px);
} }
img.passwordImage[src$="svg"] {
img.passwordImage[src$="svg"]{
.bordered(5px); .bordered(5px);
.dimension_width_height_xl; .dimension_width_height_xl;
} }
} }
td { td {
font-size: 12pt; font-size: 12pt;
} }
select { select {
padding-left: 5px; padding-left: 5px;
width:100%; width:100%;
@ -158,11 +142,7 @@
border: none; border: none;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
} }
select:hover {}
select:hover {
}
input { input {
width: ~"calc(250px - 8px)"; width: ~"calc(250px - 8px)";
height: 40px; height: 40px;
@ -172,17 +152,12 @@
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-left: 5px; padding-left: 5px;
} }
input:hover{ input:hover {}
input:focus {
}
input:focus{
outline: none; outline: none;
} }
input[type="submit"] { input[type="submit"] {
background-color: #0a5ca5; background-color: #0a5ca5;
// Hintergrund in EGW Farbe
.color_0_gray; .color_0_gray;
.fontsize_xxl; .fontsize_xxl;
width: 250px; width: 250px;
@ -191,25 +166,13 @@
margin-top: 25px; margin-top: 25px;
} }
} }
} // Formular } // Formular
} //center box } //center box
} // #loginMainDiv } // #loginMainDiv
// Ende Login / Start ################################################# // Ende Login / Start #################################################
#wrap {
div.animation_login {
#wrap{
/* float: left;
z-index: -1;
margin: 0 auto;
background-color:transparent;
width: 100%;*/
div.animation_login{
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -217,66 +180,55 @@
} }
img[src$="svg"], img[src$="svg"],
background-image[url$="svg"]{ background-image[url$="svg"] {
.gradient_vertical (@egw_color_2_e, @egw_color_2_e); .gradient_vertical (@egw_color_2_e, @egw_color_2_e);
} }
} }
#img1, #img2, #img3, #img4 , #img5 , #img6 , #img7 , #img8 { #img1, #img2, #img3, #img4 , #img5 , #img6 , #img7 , #img8 {
width:12%; width:12%;
/*height:100%;*/
/*position:fixed;*/
/*top: 10em;*/
z-index:-1; z-index:-1;
animation-name: test; animation-name: test;
animation-duration: 8s; animation-duration: 8s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
-webkit-animation-name: test; -webkit-animation-name: test;
-webkit-animation-duration: 8s; -webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
opacity:0; opacity:0;
} }
#img1 { #img1 {
animation-delay:0s; animation-delay:0s;
-webkit-animation-delay:0s -webkit-animation-delay:0s
} }
#img2 {
#img2 {
animation-delay:3s; animation-delay:3s;
-webkit-animation-delay:3s -webkit-animation-delay:3s
} }
#img3 { #img3 {
animation-delay:6s; animation-delay:6s;
-webkit-animation-delay:6s -webkit-animation-delay:6s
} }
#img4 { #img4 {
animation-delay:9s; animation-delay:9s;
-webkit-animation-delay:9s -webkit-animation-delay:9s
} }
#img5 { #img5 {
animation-delay:12s; animation-delay:12s;
-webkit-animation-delay:12s -webkit-animation-delay:12s
} }
#img6 { #img6 {
animation-delay:15s; animation-delay:15s;
-webkit-animation-delay:15s -webkit-animation-delay:15s
} }
#img7 { #img7 {
animation-delay:18s; animation-delay:18s;
-webkit-animation-delay:18s -webkit-animation-delay:18s
} }
#img8 { #img8 {
animation-delay:21s; animation-delay:21s;
-webkit-animation-delay:21s -webkit-animation-delay:21s
} }
@-webkit-keyframes test {
@-webkit-keyframes test {
0% { 0% {
opacity: 0; opacity: 0;
} }
@ -286,9 +238,9 @@
100% { 100% {
opacity: 0; opacity: 0;
} }
} }
@keyframes test { @keyframes test {
0% { 0% {
opacity: 0; opacity: 0;
} }
@ -298,9 +250,4 @@
100% { 100% {
opacity: 0; opacity: 0;
} }
} }
//

19
pixelegg/mobile/fw_mobile.css
View File

@ -1691,7 +1691,7 @@ body {
background: transparent; background: transparent;
width: 100%; width: 100%;
text-align: center; text-align: center;
max-width: 250px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo { #loginMainDiv #divAppIconBar #divLogo {
position: relative; position: relative;
@ -1699,11 +1699,10 @@ body {
} }
#loginMainDiv #divAppIconBar #divLogo img { #loginMainDiv #divAppIconBar #divLogo img {
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 270px;
} }
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] { #loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
width: 150px; max-width: 270px;
max-width: 150px;
} }
#loginMainDiv #loginScreenMessage { #loginMainDiv #loginScreenMessage {
margin: 1em; margin: 1em;
@ -1780,8 +1779,6 @@ body {
background-repeat: repeat-x; background-repeat: repeat-x;
} }
#loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage { #loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage {
/*width: 70%;*/
/*margin-left: 15%;*/
margin: 0 auto; margin: 0 auto;
max-width: 400px; max-width: 400px;
border-top: solid 1px 5px; border-top: solid 1px 5px;
@ -1826,13 +1823,6 @@ body {
width: 250px; width: 250px;
margin-top: 25px; margin-top: 25px;
} }
#wrap {
/* float: left;
z-index: -1;
margin: 0 auto;
background-color:transparent;
width: 100%;*/
}
#wrap div.animation_login { #wrap div.animation_login {
margin: 0.3em; margin: 0.3em;
position: fixed; position: fixed;
@ -1860,9 +1850,6 @@ body {
#img7, #img7,
#img8 { #img8 {
width: 12%; width: 12%;
/*height:100%;*/
/*position:fixed;*/
/*top: 10em;*/
z-index: -1; z-index: -1;
animation-name: test; animation-name: test;
animation-duration: 8s; animation-duration: 8s;