mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-01-20 12:58:46 +01:00
WIP of modern login page:
- Set a bigger width for logo icon - Some cleanup
This commit is contained in:
parent
0d8d5db8ee
commit
e0eaaee7f7
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -49,25 +49,19 @@
|
|||||||
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;
|
||||||
@ -103,7 +97,6 @@
|
|||||||
border-radius:5px;
|
border-radius:5px;
|
||||||
opacity:0.94;
|
opacity:0.94;
|
||||||
|
|
||||||
|
|
||||||
// Message
|
// Message
|
||||||
#loginCdMessage {
|
#loginCdMessage {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
@ -122,35 +115,26 @@
|
|||||||
.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,24 +166,12 @@
|
|||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
} // Formular
|
} // Formular
|
||||||
|
|
||||||
} //center box
|
} //center box
|
||||||
|
|
||||||
} // #loginMainDiv
|
} // #loginMainDiv
|
||||||
|
|
||||||
// Ende Login / Start #################################################
|
// Ende Login / Start #################################################
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#wrap {
|
#wrap {
|
||||||
/* float: left;
|
|
||||||
z-index: -1;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color:transparent;
|
|
||||||
width: 100%;*/
|
|
||||||
|
|
||||||
div.animation_login {
|
div.animation_login {
|
||||||
margin: 0.3em;
|
margin: 0.3em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -220,31 +183,23 @@
|
|||||||
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
|
||||||
@ -273,9 +228,6 @@
|
|||||||
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;
|
||||||
@ -299,8 +251,3 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user