mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-10-05 09:42:30 +02:00
WIP of modern login page:
- Set a bigger width for logo icon - Some cleanup
This commit is contained in:
Hadi Nategh
parent
0d8d5db8ee
commit
e0eaaee7f7
@ -1680,7 +1680,7 @@ body {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
max-width: 250px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo {
|
||||
position: relative;
|
||||
@ -1688,11 +1688,10 @@ body {
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
|
||||
width: 150px;
|
||||
max-width: 150px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage {
|
||||
margin: 1em;
|
||||
@ -1769,8 +1768,6 @@ body {
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
#loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage {
|
||||
/*width: 70%;*/
|
||||
/*margin-left: 15%;*/
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
border-top: solid 1px 5px;
|
||||
@ -1815,13 +1812,6 @@ body {
|
||||
width: 250px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
#wrap {
|
||||
/* float: left;
|
||||
z-index: -1;
|
||||
margin: 0 auto;
|
||||
background-color:transparent;
|
||||
width: 100%;*/
|
||||
}
|
||||
#wrap div.animation_login {
|
||||
margin: 0.3em;
|
||||
position: fixed;
|
||||
@ -1849,9 +1839,6 @@ body {
|
||||
#img7,
|
||||
#img8 {
|
||||
width: 12%;
|
||||
/*height:100%;*/
|
||||
/*position:fixed;*/
|
||||
/*top: 10em;*/
|
||||
z-index: -1;
|
||||
animation-name: test;
|
||||
animation-duration: 8s;
|
||||
|
||||
@ -1669,7 +1669,7 @@ body {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
max-width: 250px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo {
|
||||
position: relative;
|
||||
@ -1677,11 +1677,10 @@ body {
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
|
||||
width: 150px;
|
||||
max-width: 150px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage {
|
||||
margin: 1em;
|
||||
@ -1758,8 +1757,6 @@ body {
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
#loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage {
|
||||
/*width: 70%;*/
|
||||
/*margin-left: 15%;*/
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
border-top: solid 1px 5px;
|
||||
@ -1804,13 +1801,6 @@ body {
|
||||
width: 250px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
#wrap {
|
||||
/* float: left;
|
||||
z-index: -1;
|
||||
margin: 0 auto;
|
||||
background-color:transparent;
|
||||
width: 100%;*/
|
||||
}
|
||||
#wrap div.animation_login {
|
||||
margin: 0.3em;
|
||||
position: fixed;
|
||||
@ -1838,9 +1828,6 @@ body {
|
||||
#img7,
|
||||
#img8 {
|
||||
width: 12%;
|
||||
/*height:100%;*/
|
||||
/*position:fixed;*/
|
||||
/*top: 10em;*/
|
||||
z-index: -1;
|
||||
animation-name: test;
|
||||
animation-duration: 8s;
|
||||
|
||||
@ -29,47 +29,41 @@
|
||||
*/
|
||||
|
||||
#loginMainDiv {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
background-image: url(../images/login/fullscreen.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
// Logo Leiste
|
||||
#divAppIconBar{
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
background-image: url(../images/login/fullscreen.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
// Logo Leiste
|
||||
#divAppIconBar {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
max-width:250px;
|
||||
|
||||
#divLogo {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
|
||||
img[src$="svg"]{
|
||||
width: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
max-width:270px;
|
||||
#divLogo {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
img {
|
||||
margin: 0 auto;
|
||||
max-width: 270px;
|
||||
}
|
||||
img[src$="svg"]{
|
||||
max-width: 270px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Meldung
|
||||
#loginScreenMessage{
|
||||
#loginScreenMessage {
|
||||
margin: 1em;
|
||||
color: #0a5ca5;
|
||||
font-size: 12pt;
|
||||
@ -89,218 +83,171 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// Anmeldefenster / Box mit Mesaage + Form
|
||||
div#centerBox{
|
||||
display: inline-block;
|
||||
// Anmeldefenster / Box mit Mesaage + Form
|
||||
div#centerBox {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: white;
|
||||
background-color: white;
|
||||
border: none;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
border-radius:5px;
|
||||
opacity:0.94;
|
||||
|
||||
|
||||
// Message
|
||||
#loginCdMessage{
|
||||
// Message
|
||||
#loginCdMessage {
|
||||
margin: 1em;
|
||||
.border_radius_button_lefttop;
|
||||
color: #0a5ca5;
|
||||
text-align: center;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
#loginCdMessage.error {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Formular
|
||||
form{
|
||||
margin: 1em;
|
||||
// Formular
|
||||
form {
|
||||
margin: 1em;
|
||||
.hiddenCredential {display: none;}
|
||||
// Table
|
||||
table.divLoginbox {
|
||||
// Table
|
||||
table.divLoginbox {
|
||||
background-color: transparent;
|
||||
.border_radius_button_lefttop;
|
||||
tr.divLoginboxHeader {}
|
||||
|
||||
background-color: transparent;
|
||||
.border_radius_button_lefttop;
|
||||
|
||||
tr.divLoginboxHeader{}
|
||||
|
||||
// Passwort Image
|
||||
div.LoginPasswordImage{
|
||||
.gradient_vertical (@egw_color_1_a, @egw_color_2_d);
|
||||
|
||||
img.passwordImage {
|
||||
/*width: 70%;*/
|
||||
/*margin-left: 15%;*/
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
.bordered(5px);
|
||||
}
|
||||
|
||||
img.passwordImage[src$="svg"]{
|
||||
.bordered(5px);
|
||||
|
||||
.dimension_width_height_xl;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
// Passwort Image
|
||||
div.LoginPasswordImage {
|
||||
.gradient_vertical (@egw_color_1_a, @egw_color_2_d);
|
||||
img.passwordImage {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
.bordered(5px);
|
||||
}
|
||||
img.passwordImage[src$="svg"] {
|
||||
.bordered(5px);
|
||||
.dimension_width_height_xl;
|
||||
}
|
||||
}
|
||||
td {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
select {
|
||||
select {
|
||||
padding-left: 5px;
|
||||
width:100%;
|
||||
height: 42px;
|
||||
border: none;
|
||||
border-bottom: 1px solid silver;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
width: ~"calc(250px - 8px)";
|
||||
}
|
||||
select:hover {}
|
||||
input {
|
||||
width: ~"calc(250px - 8px)";
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid silver;
|
||||
padding-left: 5px;
|
||||
}
|
||||
input:hover{
|
||||
|
||||
}
|
||||
|
||||
input:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: #0a5ca5;
|
||||
// Hintergrund in EGW Farbe
|
||||
.color_0_gray;
|
||||
.fontsize_xxl;
|
||||
}
|
||||
input:hover {}
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type="submit"] {
|
||||
background-color: #0a5ca5;
|
||||
.color_0_gray;
|
||||
.fontsize_xxl;
|
||||
width: 250px;
|
||||
&:hover{}
|
||||
&:focus {}
|
||||
&:hover{}
|
||||
&:focus {}
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
} // Formular
|
||||
|
||||
}
|
||||
}
|
||||
} // Formular
|
||||
} //center box
|
||||
|
||||
} // #loginMainDiv
|
||||
|
||||
// Ende Login / Start #################################################
|
||||
|
||||
#wrap {
|
||||
div.animation_login {
|
||||
margin: 0.3em;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
#wrap{
|
||||
/* float: left;
|
||||
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);
|
||||
}
|
||||
|
||||
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 {
|
||||
width:12%;
|
||||
/*height:100%;*/
|
||||
/*position:fixed;*/
|
||||
/*top: 10em;*/
|
||||
z-index:-1;
|
||||
#img1, #img2, #img3, #img4 , #img5 , #img6 , #img7 , #img8 {
|
||||
width:12%;
|
||||
z-index:-1;
|
||||
animation-name: test;
|
||||
animation-duration: 8s;
|
||||
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;
|
||||
animation-duration: 8s;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes test {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
@keyframes test {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1691,7 +1691,7 @@ body {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
max-width: 250px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo {
|
||||
position: relative;
|
||||
@ -1699,11 +1699,10 @@ body {
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img {
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
|
||||
width: 150px;
|
||||
max-width: 150px;
|
||||
max-width: 270px;
|
||||
}
|
||||
#loginMainDiv #loginScreenMessage {
|
||||
margin: 1em;
|
||||
@ -1780,8 +1779,6 @@ body {
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
#loginMainDiv div#centerBox form table.divLoginbox div.LoginPasswordImage img.passwordImage {
|
||||
/*width: 70%;*/
|
||||
/*margin-left: 15%;*/
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
border-top: solid 1px 5px;
|
||||
@ -1826,13 +1823,6 @@ body {
|
||||
width: 250px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
#wrap {
|
||||
/* float: left;
|
||||
z-index: -1;
|
||||
margin: 0 auto;
|
||||
background-color:transparent;
|
||||
width: 100%;*/
|
||||
}
|
||||
#wrap div.animation_login {
|
||||
margin: 0.3em;
|
||||
position: fixed;
|
||||
@ -1860,9 +1850,6 @@ body {
|
||||
#img7,
|
||||
#img8 {
|
||||
width: 12%;
|
||||
/*height:100%;*/
|
||||
/*position:fixed;*/
|
||||
/*top: 10em;*/
|
||||
z-index: -1;
|
||||
animation-name: test;
|
||||
animation-duration: 8s;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user