Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

switch to a LoginPage wrapper component

Browse Source 
>
> as it's much nicer in the CSS to wrap the LoginBox as needed rather than have separate header & footer divs floating above and below it which need to be correctly vertically centered
This commit is contained in:
Matthew Hodgson 2017-10-24 23:42:52 +01:00
parent 190811ac1c
commit b053f08991
2 changed files with 298 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/skins/vector/themes/status/css/_StatusLogin.scss
View File

@ -18,12 +18,66 @@ limitations under the License.
// Ideally this would be all Status prefixes for a Status specific version of the component
// but given we're not doing Status as a dedicated 'skin' yet...
.mx_Login {
flex-direction: column;
.mx_StatusLogin {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
.mx_StatusLogin_brand {
position: absolute;
top: 30px;
left: 30px;
}
.mx_StatusLogin_content {
margin: auto;
}
.mx_StatusLogin_header {
text-align: center;
margin-top: 70px;
margin-bottom: 50px;
}
.mx_StatusLogin_header h1 {
font-size: 29px;
margin-bottom: 3px;
}
.mx_StatusLogin_subtitle {
font-size: 18px;
}
.mx_StatusLogin_footer {
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
font-size: 16px;
color: $footer-color;
}
.mx_StatusLogin_footer p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.mx_StatusLogin_footer_cta {
color: $callout-color;
font-family: $header-font-family;
letter-spacing: 1px;
font-size: 13px;
text-transform: uppercase;
text-decoration: none;
}
// overrides of .mx_Login
.mx_Login_box {
width: 350px;
min-height: initial;
@ -32,7 +86,6 @@ limitations under the License.
padding-left: 33px;
padding-right: 33px;
border-radius: 8px;
margin: initial;
background-color: $form-bg-color;
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
position: relative;
@ -62,27 +115,6 @@ limitations under the License.
font-size: 25px;
}
.mx_LoginPageHeader_brand {
position: absolute;
top: 30px;
left: 30px;
}
.mx_LoginPageHeader_title {
text-align: center;
margin-top: 90px;
margin-bottom: 50px;
}
.mx_LoginPageHeader_title h1 {
font-size: 29px;
margin-bottom: 3px;
}
.mx_LoginPageHeader_subtitle {
font-size: 18px;
}
.mx_Login_support {
text-align: center;
font-size: 13px;
@ -319,3 +351,4 @@ limitations under the License.
margin-bottom: 12px;
}
}

6
src/skins/vector/themes/status/css/_status.scss
View File

@ -29,13 +29,17 @@ $primary-bg-color: #EEF2F5;
$header-color: #49555F;
$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
$footer-color: #8D99A4;
h1,h2,h3,h4,h5 {
color: $header-color;
font-family: $header-font-family;
font-weight: 400 ! important;
}
$form-bg-color: #4360DF;
$callout-color: #4360DF; // or #4957b8 from status.im homepage
$form-bg-color: $callout-color;
$form-fg-color: #ffffff;
// ***** End of Status theme specifics ******