password-manager/frontend/delta/scss/style/loginPage.scss

255 lines
4.4 KiB
SCSS
Raw Normal View History

/*
Copyright 2008-2015 Clipperz Srl
This file is part of Clipperz, the online password manager.
For further information about its features and functionalities please
refer to http://www.clipperz.com.
* Clipperz is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
* Clipperz is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
See the GNU Affero General Public License for more details.
* You should have received a copy of the GNU Affero General Public
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
*/
#loginPage {
@include overflow-auto;
div.loginForm {
@include flexbox;
@include flex-direction(column);
@include align-items(stretch);
height: 100%;
text-align: center;
background-color: $main-color;
header {
@include flex(1);
// @include icon-font();
font-size: 48pt;
line-height: 90pt;
color: $main-alternate-text-color;
h3 {
font-weight: bold;
font-size: 38pt;
line-height: 1.7em;
}
h5 {
font-size: 16pt;
line-height: 1.0em;
}
}
div.form {
@include flex(4);
form {
position: relative;
background: $main-alternate-text-color;
// @include border-radius(10px);
padding: 20px;
margin-bottom: 50px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
/*
&:after {
content: "";
position: absolute;
top: -15px;
margin-left: 50%;
left: -15px;
border-style: solid;
border-width: 0 15px 15px;
border-color: $main-alternate-text-color transparent;
display: block;
width: 0;
z-index: 1;
}
*/
label {
display: none;
}
input {
font-family: "clipperz-font";
display: block;
// @include border-radius(4px);
padding: 5px;
margin-top: 5px;
margin-bottom: 10px;
font-size: 100%;
// box-shadow:inset 0 0 0;
font-size: 24pt;
width: 100%;
border: 1px solid #ccc;
border-radius: 0px;
}
button {
font-family: "clipperz-font";
min-height: 48px;
min-width: 48px;
color: white;
font-size: 24pt;
font-weight: 500;
border: 0px;
padding: 10px 25px;
border: 1px solid white;
background-color: $main-color;
@include transition(background-color font-weight, 0.2s, linear);
&:hover {
};
&:disabled {
font-weight: 100;
background-color: #c0c0c0;
cursor: default;
&:hover {
};
}
}
}
}
div.links {
ul {
li {
display: inline-block;
}
}
}
footer {
@include flex(1);
2015-03-22 18:39:53 +01:00
@include flexbox;
@include flex-direction(column);
@include align-items(stretch);
color: $main-alternate-text-color;
background-color: $main-alternate-color;
font-size: 24pt;
2015-03-22 18:39:53 +01:00
cursor: default;
2015-03-22 18:39:53 +01:00
a.registrationLink {
cursor: pointer;
@include flex(auto);
line-height: 50pt;
2015-03-11 18:28:28 +01:00
&:before {
content: "> ";
};
}
2015-03-22 18:39:53 +01:00
.applicationVersion {
@include flex(1);
font-size: 8pt;
$applicationVersionColor: #999;
span {
color: $applicationVersionColor;
&:after {
content: ":";
};
}
a {
color: $applicationVersionColor;
text-decoration: none;
padding-left: 5px;
font-weight: bold;
}
}
}
}
div.loginForm.narrow {
header {
font-size: 30pt;
line-height: 70px;
}
footer {
max-height: 25px;
line-height: 20pt;
}
}
div.loginForm.extra-short {
header {
// @include flex(1);
font-size: 18pt;
}
div.form {
// @include flex(6);
form {
padding: 10px;
margin-bottom: 20px;
input {
padding: 3px;
margin-top: 3px;
margin-bottom: 5px;
font-size: 16pt;
}
button {
min-height: 20px;
font-size: 12pt;
padding: 3px 10px;
border: 1px solid white;
}
}
}
footer {
font-size: 14pt;
}
}
}
.links {
ul {
li {
color: white;
cursor: pointer;
&:after {
content: '-';
padding-left: 4px;
padding-right: 4px;
};
&:last-child:after {
content: '';
padding-left: 0px;
padding-right: 0px;
}
}
}
}