mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-10-08 19:12:29 +02:00
283 lines
6.1 KiB
Plaintext
283 lines
6.1 KiB
Plaintext
/**
|
|
* EGroupware: Stylite Pixelegg template
|
|
*
|
|
* Definitions for login page
|
|
*
|
|
* Please do NOT change css-files directly, instead change less-files and compile them!
|
|
*
|
|
* @link http://www.egroupware.org
|
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
|
* @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
|
|
* @package pixelegg
|
|
* @version $Id$
|
|
*/
|
|
|
|
@import (reference) "def_buttons.less";
|
|
@import (reference) "def_design_pattern_color_font_shadow.less";
|
|
@import (reference) "layout_messages.less";
|
|
|
|
|
|
/* ##################################################################################
|
|
* login page
|
|
*
|
|
* ##################################################################################
|
|
*
|
|
*
|
|
*/
|
|
|
|
|
|
|
|
|
|
#loginMainDiv {
|
|
padding: 0px;
|
|
min-height: 720px;
|
|
height: 100%;
|
|
width: auto;
|
|
border-bottom: 0px solid #7E7E7E;
|
|
|
|
// Logo Leiste
|
|
#divAppIconBar{
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
background: transparent;
|
|
|
|
|
|
#divLogo {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
margin-bottom: 2em;
|
|
position: relative;
|
|
top: 1px;
|
|
|
|
img {width: 100%; }
|
|
img[src$="svg"]{
|
|
.gradient_vertical (@egw_color_2_e, @egw_color_2_e);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Anmeldefenster / Box mit Mesaage + Form
|
|
div#centerBox{
|
|
margin: 0 auto;
|
|
width: 444px;
|
|
background-color: @egw_color_1_a;
|
|
z-index: 100;
|
|
.border_radius (5px, 5px, 5px, 25px);
|
|
|
|
.bordered (@egw_color_2_a, @egw_color_2_a, @egw_color_2_a, @egw_color_2_a );
|
|
|
|
|
|
|
|
// Meldung
|
|
#loginScreenMessage{
|
|
margin: 1em;
|
|
}
|
|
|
|
|
|
// Message
|
|
#loginCdMessage{
|
|
margin: 1em;
|
|
.border_radius_button_lefttop;
|
|
color: red;
|
|
text-align: center;
|
|
|
|
|
|
// Text der Meldung
|
|
span {
|
|
padding: 0.5em;
|
|
font-size: 1.2em;
|
|
// .background-color-hint;
|
|
color: @color_hint;
|
|
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Formular
|
|
form{
|
|
margin: 1em;
|
|
|
|
|
|
table.divLoginbox {
|
|
|
|
// background-color: red;
|
|
.box_shadow_standard_light;
|
|
.border_radius_button_lefttop;
|
|
|
|
|
|
tr.divLoginboxHeader{}
|
|
|
|
td { padding: 0.5em;}
|
|
|
|
select {
|
|
.Complete_Button_select;
|
|
}
|
|
|
|
select:hover {
|
|
.Complete_Button_select_hover;
|
|
}
|
|
|
|
input {
|
|
.Complete_Button_input;
|
|
}
|
|
input:hover{
|
|
.Complete_Button_input_hover;
|
|
}
|
|
|
|
input:focus{
|
|
.Complete_Button_input_focus;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
.background_color_egw_normal; // Orange
|
|
// Hintergrund in EGW Farbe
|
|
.color_100_gray;
|
|
|
|
|
|
}
|
|
|
|
input[type="submit"]:focus {
|
|
.Complete_Button_input_focus;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
} // Formular
|
|
|
|
} //center box
|
|
|
|
} // #loginMainDiv
|
|
|
|
// Ende Login / Start #################################################
|
|
|
|
|
|
|
|
#wrap{
|
|
z-index: -1;
|
|
margin: 0 auto;
|
|
background-color:transparent;
|
|
|
|
|
|
img.bgfade{
|
|
position:absolute;
|
|
top:-22%;
|
|
left: 0%;
|
|
/*display:block;*/
|
|
z-index:-1;
|
|
width: 20%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
div.animation_login{
|
|
|
|
background-image: url(../../images/about.svg), url(../../images/accounts.svg), url(../../images/alarm.svg);
|
|
background-position: 20px -90px, 30px 80px, 0px 0px;
|
|
background-repeat: no-repeat, no-repeat, repeat-x;
|
|
|
|
animation: animatedLogin 4s linear infinite;
|
|
|
|
|
|
height: 190px;
|
|
overflow: hidden;
|
|
width: 560px;
|
|
|
|
}
|
|
|
|
@keyframes animatedLogin {
|
|
from { background-position: 20px 20px, 30px 80px, 0 0; }
|
|
to { background-position: 300px -90px, 30px 20px, 100% 0; }
|
|
}
|
|
|
|
|
|
img[src$="svg"],
|
|
background-image[url$="svg"]{
|
|
.gradient_vertical (@egw_color_2_e, @egw_color_2_e);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#img1, #img2, #img3, #img4 {
|
|
width:100%;
|
|
height:100%;
|
|
position:fixed;
|
|
top: 0;
|
|
z-index:-1;
|
|
animation-name: test;
|
|
animation-duration: 5s;
|
|
opacity:0;
|
|
}
|
|
#img2 {
|
|
animation-delay:5s;
|
|
-webkit-animation-delay:5s
|
|
}
|
|
#img3 {
|
|
animation-delay:10s;
|
|
-webkit-animation-delay:10s
|
|
}
|
|
#img4 {
|
|
animation-delay:15s;
|
|
-webkit-animation-delay:15s
|
|
}
|
|
.animated {
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-ms-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-duration: 3s;
|
|
-moz-animation-duration: 3s;
|
|
-ms-animation-duration: 3s;
|
|
-o-animation-duration: 3s;
|
|
animation-duration: 3s;
|
|
}
|
|
.animated.hinge {
|
|
-webkit-animation-duration: 2s;
|
|
-moz-animation-duration: 2s;
|
|
-ms-animation-duration: 2s;
|
|
-o-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
}
|
|
@-webkit-keyframes test {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
}
|
|
}
|
|
@keyframes test {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
}
|
|
}
|
|
|
|
.mixi-frames () {
|
|
from {width: 254px;}
|
|
to {width: 512px;}
|
|
}
|
|
@-webkit-keyframes some-animation {.mixi-frames;}
|
|
@-moz-keyframes some-animation {.mixi-frames;}
|
|
@-ms-keyframes some-animation {.mixi-frames;}
|
|
@-o-keyframes some-animation {.mixi-frames;}
|
|
@keyframes some-animation {.mixi-frames;}
|
|
|
|
|
|
|
|
// |