extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-20 12:58:46 +01:00
Code Issues 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;

365
pixelegg/less/layout_loginPage.less
View File

@ -29,47 +29,41 @@
*/ */
#loginMainDiv { #loginMainDiv {
padding: 0; padding: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
border: none; border: none;
margin: 0; margin: 0;
background-color: white; background-color: white;
background-image: url(../images/login/fullscreen.jpg); background-image: url(../images/login/fullscreen.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
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%;
top: 20%; top: 20%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
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 {
margin: 0 auto;
img { max-width: 270px;
margin: 0 auto; }
max-width: 400px; img[src$="svg"]{
} max-width: 270px;
}
}
img[src$="svg"]{ }
width: 150px;
max-width: 150px;
}
}
}
// Meldung // Meldung
#loginScreenMessage{ #loginScreenMessage {
margin: 1em; margin: 1em;
color: #0a5ca5; color: #0a5ca5;
font-size: 12pt; font-size: 12pt;
@ -89,218 +83,171 @@
} }
} }
} }
// 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%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: white; background-color: white;
border: none; border: none;
z-index: 100; z-index: 100;
padding: 0; padding: 0;
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;
text-align: center; text-align: center;
white-space: pre-wrap; white-space: pre-wrap;
} }
#loginCdMessage.error { #loginCdMessage.error {
font-weight: bold; font-weight: bold;
} }
// Formular // Formular
form{ form {
margin: 1em; margin: 1em;
.hiddenCredential {display: none;} .hiddenCredential {display: none;}
// Table // Table
table.divLoginbox { table.divLoginbox {
background-color: transparent;
.border_radius_button_lefttop;
tr.divLoginboxHeader {}
background-color: transparent; // Passwort Image
.border_radius_button_lefttop; div.LoginPasswordImage {
.gradient_vertical (@egw_color_1_a, @egw_color_2_d);
tr.divLoginboxHeader{} img.passwordImage {
margin: 0 auto;
// Passwort Image max-width: 400px;
div.LoginPasswordImage{ .bordered(5px);
.gradient_vertical (@egw_color_1_a, @egw_color_2_d); }
img.passwordImage[src$="svg"] {
img.passwordImage { .bordered(5px);
/*width: 70%;*/ .dimension_width_height_xl;
/*margin-left: 15%;*/ }
margin: 0 auto; }
max-width: 400px; td {
.bordered(5px);
}
img.passwordImage[src$="svg"]{
.bordered(5px);
.dimension_width_height_xl;
}
}
td {
font-size: 12pt; font-size: 12pt;
} }
select {
select {
padding-left: 5px; padding-left: 5px;
width:100%; width:100%;
height: 42px; height: 42px;
border: none; border: none;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
} }
select:hover {}
select:hover { input {
width: ~"calc(250px - 8px)";
}
input {
width: ~"calc(250px - 8px)";
height: 40px; height: 40px;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
padding-left: 5px; padding-left: 5px;
} }
input:hover{ input:hover {}
input:focus {
} outline: none;
}
input:focus{ input[type="submit"] {
outline: none; background-color: #0a5ca5;
} .color_0_gray;
.fontsize_xxl;
input[type="submit"] {
background-color: #0a5ca5;
// Hintergrund in EGW Farbe
.color_0_gray;
.fontsize_xxl;
width: 250px; width: 250px;
&:hover{} &:hover{}
&:focus {} &:focus {}
margin-top: 25px; margin-top: 25px;
} }
} }
} // Formular
} // Formular
} //center box } //center box
} // #loginMainDiv } // #loginMainDiv
// Ende Login / Start ################################################# // Ende Login / Start #################################################
#wrap {
div.animation_login {
margin: 0.3em;
position: fixed;
width: 100%;
bottom: 0;
}
img[src$="svg"],
#wrap{ background-image[url$="svg"] {
/* float: left; .gradient_vertical (@egw_color_2_e, @egw_color_2_e);
z-index: -1; }
margin: 0 auto;
background-color:transparent;
width: 100%;*/
div.animation_login{
margin: 0.3em;
position: fixed;
width: 100%;
bottom: 0;
}
img[src$="svg"],
background-image[url$="svg"]{
.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%;*/ z-index:-1;
/*position:fixed;*/ animation-name: test;
/*top: 10em;*/ animation-duration: 8s;
z-index:-1; animation-iteration-count: infinite;
-webkit-animation-name: test;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
opacity:0;
}
#img1 {
animation-delay:0s;
-webkit-animation-delay:0s
}
#img2 {
animation-delay:3s;
-webkit-animation-delay:3s
}
#img3 {
animation-delay:6s;
-webkit-animation-delay:6s
}
#img4 {
animation-delay:9s;
-webkit-animation-delay:9s
}
#img5 {
animation-delay:12s;
-webkit-animation-delay:12s
}
#img6 {
animation-delay:15s;
-webkit-animation-delay:15s
}
#img7 {
animation-delay:18s;
-webkit-animation-delay:18s
}
#img8 {
animation-delay:21s;
-webkit-animation-delay:21s
}
@-webkit-keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
animation-name: test; @keyframes test {
animation-duration: 8s; 0% {
animation-iteration-count: infinite; opacity: 0;
}
-webkit-animation-name: test; 50% {
-webkit-animation-duration: 8s; opacity: 1;
-webkit-animation-iteration-count: infinite; }
100% {
opacity:0; opacity: 0;
} }
#img1 { }
animation-delay:0s;
-webkit-animation-delay:0s
}
#img2 {
animation-delay:3s;
-webkit-animation-delay:3s
}
#img3 {
animation-delay:6s;
-webkit-animation-delay:6s
}
#img4 {
animation-delay:9s;
-webkit-animation-delay:9s
}
#img5 {
animation-delay:12s;
-webkit-animation-delay:12s
}
#img6 {
animation-delay:15s;
-webkit-animation-delay:15s
}
#img7 {
animation-delay:18s;
-webkit-animation-delay:18s
}
#img8 {
animation-delay:21s;
-webkit-animation-delay:21s
}
@-webkit-keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
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;