mirror of
https://github.com/moparisthebest/mail
synced 2024-11-26 19:02:20 -05:00
styled login views
This commit is contained in:
Tankred Hase
parent
dbe99195db
commit
9e712b7de9
95
src/img/whiteout_logo.svg
Normal file
95
src/img/whiteout_logo.svg
Normal file
@ -0,0 +1,95 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="321.522px" height="56.366px" viewBox="0 0 321.522 56.366" enable-background="new 0 0 321.522 56.366"
|
||||
xml:space="preserve">
|
||||
<path fill="#00C6FF" d="M29.097,54.303v0.074c-0.196,0.196-0.367,0.318-0.514,0.367c0,0.049-0.025,0.073-0.074,0.073l-0.073,0.073
|
||||
h-0.074l-0.073,0.073h-0.074c-0.147,0.049-0.319,0.122-0.514,0.221h-0.074h-0.073H27.48h-0.073H27.26h-0.147h-0.147h-0.074h-0.073
|
||||
h-0.074c-0.099,0-0.172-0.025-0.22-0.073h-0.147c-0.196-0.05-0.393-0.147-0.588-0.294c-0.049-0.048-0.099-0.085-0.147-0.11
|
||||
c-0.049-0.024-0.099-0.061-0.147-0.11L25.35,54.45h-0.074l-0.073-0.073v-0.074c-0.049,0-0.074-0.011-0.074-0.036
|
||||
c0-0.024-0.025-0.037-0.073-0.037v-0.073c0-0.049-0.013-0.073-0.037-0.073c-0.025,0-0.037-0.024-0.037-0.074h-0.073
|
||||
c0-0.098-0.025-0.146-0.074-0.146v-0.073l-0.073-0.147c0-0.048-0.013-0.085-0.037-0.11c-0.025-0.023-0.037-0.061-0.037-0.11
|
||||
l-6.246-18.885l-6.246,18.885c-0.049,0.05-0.074,0.123-0.074,0.221h-0.073c0,0.099-0.025,0.147-0.074,0.147v0.073l-0.073,0.146
|
||||
c-0.049,0.05-0.074,0.099-0.074,0.147c-0.049,0-0.073,0.025-0.073,0.073l-0.074,0.073l-0.073,0.074l-0.074,0.073l-0.147,0.146
|
||||
h-0.073c-0.099,0.099-0.196,0.173-0.294,0.221c-0.147,0.146-0.319,0.244-0.515,0.294h-0.147h-0.073
|
||||
c-0.049,0.048-0.099,0.073-0.147,0.073h-0.074H9.992H9.845H9.771H9.698H9.551H9.478H9.404H9.331H9.257H9.184
|
||||
c-0.147-0.049-0.319-0.123-0.515-0.221H8.596H8.522v-0.073H8.449l-0.074-0.073c-0.049,0-0.073-0.024-0.073-0.073H8.228
|
||||
c-0.099-0.049-0.22-0.147-0.367-0.294v-0.073H7.787c0-0.049-0.025-0.074-0.073-0.074c0-0.048-0.025-0.073-0.074-0.073v-0.073
|
||||
l-0.073-0.073l-0.074-0.074l-0.22-0.44v-0.147c-0.049,0-0.074-0.023-0.074-0.073v-0.073v-0.073v-0.074
|
||||
c-0.049-0.048-0.073-0.121-0.073-0.22L1.027,3.453C0.928,2.769,1.1,2.144,1.541,1.58C1.982,1.018,2.57,0.687,3.305,0.588
|
||||
C3.99,0.49,4.615,0.661,5.179,1.103c0.562,0.44,0.893,1.004,0.992,1.689l4.703,38.063l5.07-15.431l0.073-0.073v-0.074
|
||||
c0-0.048,0.024-0.073,0.074-0.073v-0.073v-0.073l0.147-0.147v-0.073l0.073-0.073l0.074-0.074c0-0.048,0.024-0.073,0.073-0.073
|
||||
v-0.073h0.074V24.47l0.073-0.074c0.048,0,0.074-0.023,0.074-0.073h0.073v-0.073l0.074-0.073c0.098-0.098,0.208-0.159,0.331-0.184
|
||||
c0.122-0.024,0.232-0.085,0.331-0.185h0.147l0.074-0.073h0.073h0.074h0.073h0.074v-0.073h0.073h0.074h0.073h0.074h0.073h0.074h0.073
|
||||
h0.074h0.073h0.074h0.073l0.074,0.073h0.073h0.147c0.048,0,0.074,0.013,0.074,0.037c0,0.025,0.024,0.036,0.073,0.036h0.147
|
||||
c0.098,0.1,0.195,0.16,0.294,0.185c0.098,0.024,0.195,0.086,0.294,0.184l0.073,0.073c0.048,0,0.074,0.025,0.074,0.073h0.073v0.073
|
||||
h0.074v0.074c0.048,0,0.073,0.025,0.073,0.073h0.074v0.073l0.073,0.073l0.074,0.074c0,0.049,0.024,0.073,0.073,0.073v0.073v0.073
|
||||
h0.074v0.074v0.073c0.048,0,0.073,0.025,0.073,0.073l0.074,0.073v0.074v0.073l5.144,15.431l4.703-38.063
|
||||
c0.098-0.686,0.428-1.249,0.992-1.689c0.563-0.441,1.188-0.612,1.874-0.515c0.686,0.099,1.261,0.43,1.727,0.992
|
||||
c0.465,0.563,0.648,1.188,0.551,1.873l-6.099,49.454c-0.049,0.049-0.073,0.122-0.073,0.22v0.074v0.073l-0.074,0.073v0.073
|
||||
c0,0.05-0.025,0.099-0.073,0.147c0,0.099-0.049,0.196-0.147,0.294c0,0.049-0.025,0.099-0.074,0.146v0.074h-0.073v0.073l-0.074,0.073
|
||||
v0.073H29.097z"/>
|
||||
<path fill="#00C6FF" d="M69.835,0.515c0.686,0,1.286,0.257,1.8,0.771c0.514,0.514,0.771,1.114,0.771,1.8v49.527
|
||||
c0,0.687-0.257,1.285-0.771,1.8s-1.115,0.771-1.8,0.771c-0.735,0-1.359-0.257-1.874-0.771c-0.514-0.515-0.771-1.113-0.771-1.8
|
||||
V30.508H51.759v22.105c0,0.687-0.257,1.285-0.771,1.8c-0.515,0.515-1.139,0.771-1.874,0.771c-0.687,0-1.286-0.257-1.8-0.771
|
||||
s-0.771-1.113-0.771-1.8V3.086c0-0.686,0.257-1.286,0.771-1.8c0.514-0.515,1.114-0.771,1.8-0.771c0.735,0,1.359,0.257,1.874,0.771
|
||||
c0.514,0.514,0.771,1.114,0.771,1.8V25.29H67.19V3.086c0-0.686,0.257-1.286,0.771-1.8C68.476,0.771,69.101,0.515,69.835,0.515z"/>
|
||||
<path fill="#00C6FF" d="M87.104,55.185c-0.735,0-1.348-0.257-1.837-0.771c-0.49-0.515-0.735-1.113-0.735-1.8V3.086
|
||||
c0-0.686,0.245-1.286,0.735-1.8c0.489-0.515,1.102-0.771,1.837-0.771c0.686,0,1.286,0.257,1.8,0.771
|
||||
c0.515,0.514,0.771,1.114,0.771,1.8v49.527c0,0.687-0.257,1.285-0.771,1.8C88.39,54.928,87.789,55.185,87.104,55.185z"/>
|
||||
<path fill="#00C6FF" d="M125.82,1.286c0.515,0.514,0.771,1.139,0.771,1.873c0,0.688-0.257,1.286-0.771,1.801
|
||||
c-0.514,0.515-1.115,0.771-1.8,0.771h-8.892v46.882c0,0.734-0.246,1.348-0.734,1.837c-0.491,0.489-1.103,0.734-1.837,0.734
|
||||
c-0.687,0-1.286-0.245-1.8-0.734c-0.514-0.489-0.771-1.103-0.771-1.837V5.731h-9.039c-0.735,0-1.359-0.257-1.874-0.771
|
||||
c-0.515-0.515-0.771-1.113-0.771-1.801c0-0.734,0.257-1.359,0.771-1.873c0.514-0.515,1.139-0.771,1.874-0.771h23.074
|
||||
C124.705,0.515,125.306,0.771,125.82,1.286z"/>
|
||||
<path fill="#00C6FF" d="M158.71,50.739c0.515,0.515,0.771,1.139,0.771,1.874c0,0.687-0.257,1.285-0.771,1.8
|
||||
c-0.514,0.515-1.139,0.771-1.873,0.771h-19.473c-0.735,0-1.359-0.257-1.875-0.771c-0.514-0.515-0.771-1.113-0.771-1.8V3.086
|
||||
c0-0.686,0.258-1.286,0.771-1.8c0.516-0.515,1.14-0.771,1.875-0.771h19.473c0.734,0,1.359,0.257,1.873,0.771
|
||||
c0.515,0.514,0.771,1.114,0.771,1.8c0,0.735-0.257,1.359-0.771,1.874c-0.514,0.515-1.139,0.771-1.873,0.771h-16.901V25.29h12.712
|
||||
c0.735,0,1.348,0.258,1.838,0.771c0.488,0.515,0.734,1.14,0.734,1.874c0,0.687-0.246,1.286-0.734,1.801
|
||||
c-0.49,0.514-1.103,0.771-1.838,0.771h-12.712v19.46h16.901C157.572,49.968,158.197,50.225,158.71,50.739z"/>
|
||||
<path fill="#00C6FF" d="M180.718,56.066c-3.723,0-6.639-1.176-8.744-3.527c-1.617-1.763-2.646-4.089-3.086-6.98
|
||||
c-0.146-0.882-0.221-1.641-0.221-2.278c0-0.636,0.023-1.076,0.074-1.322V13.227c0-2.253,0.354-4.213,1.064-5.879
|
||||
c0.71-1.664,1.629-3.049,2.756-4.151s2.4-1.91,3.821-2.425C177.803,0.257,179.25,0,180.718,0c0.883,0,2.082,0.172,3.602,0.515
|
||||
c1.518,0.343,3.012,1.151,4.482,2.425c0.488,0.44,0.979,0.955,1.469,1.543c0.489,0.588,0.93,1.312,1.323,2.168
|
||||
c0.392,0.857,0.722,1.825,0.991,2.902c0.27,1.078,0.404,2.303,0.404,3.674v29.246c0,0.196,0,0.601,0,1.212
|
||||
c0,0.613-0.073,1.336-0.221,2.168c-0.49,2.694-1.543,4.924-3.159,6.687C187.406,54.891,184.441,56.066,180.718,56.066z
|
||||
M173.884,42.252c0,0.05,0,0.319,0,0.809c0,0.49,0.049,1.078,0.147,1.764c0.098,0.687,0.281,1.421,0.552,2.204
|
||||
c0.268,0.784,0.697,1.47,1.285,2.058c1.077,1.176,2.693,1.764,4.85,1.764c2.205,0,3.895-0.612,5.07-1.837
|
||||
c0.539-0.588,0.955-1.237,1.25-1.947c0.293-0.71,0.502-1.384,0.624-2.021c0.122-0.636,0.185-1.176,0.185-1.616
|
||||
c0-0.441,0-0.686,0-0.734v-0.147V13.227c0-1.861-0.295-3.318-0.883-4.372c-0.588-1.053-1.273-1.849-2.057-2.388
|
||||
c-0.785-0.539-1.58-0.882-2.389-1.029c-0.809-0.146-1.408-0.221-1.801-0.221c-1.812,0-3.332,0.564-4.556,1.69
|
||||
c-1.519,1.422-2.278,3.527-2.278,6.319v28.805V42.252z"/>
|
||||
<path fill="#00C6FF" d="M216.842,55.92c-3.675,0-6.565-1.176-8.671-3.527c-1.666-1.861-2.695-4.188-3.086-6.98
|
||||
c-0.147-0.882-0.221-1.642-0.221-2.278c0-0.636,0-1.077,0-1.322V3.086c0-0.686,0.258-1.286,0.771-1.8
|
||||
c0.514-0.515,1.113-0.771,1.801-0.771c0.734,0,1.359,0.257,1.873,0.771c0.515,0.514,0.771,1.114,0.771,1.8v38.799v0.221
|
||||
c0,0.049-0.012,0.318-0.036,0.808c-0.025,0.49,0.024,1.078,0.147,1.764c0.121,0.687,0.317,1.422,0.587,2.204
|
||||
c0.269,0.785,0.673,1.47,1.213,2.058c1.077,1.176,2.693,1.764,4.85,1.764c2.253,0,3.968-0.611,5.144-1.837
|
||||
c0.539-0.588,0.955-1.236,1.249-1.947c0.294-0.709,0.489-1.407,0.588-2.094c0.147-0.735,0.195-1.494,0.147-2.278v-0.221V3.159
|
||||
c0-0.734,0.257-1.359,0.771-1.873c0.515-0.515,1.139-0.771,1.874-0.771c0.686,0,1.286,0.257,1.8,0.771
|
||||
c0.515,0.514,0.771,1.139,0.771,1.873v39.166c0,0.196-0.013,0.601-0.036,1.213c-0.025,0.613-0.11,1.335-0.258,2.168
|
||||
c-0.44,2.694-1.494,4.923-3.159,6.687C223.578,54.744,220.615,55.92,216.842,55.92z"/>
|
||||
<path fill="#00C6FF" d="M265.598,1.286c0.514,0.514,0.771,1.139,0.771,1.873c0,0.688-0.258,1.286-0.771,1.801
|
||||
c-0.515,0.515-1.115,0.771-1.801,0.771h-8.892v46.882c0,0.734-0.245,1.348-0.734,1.837c-0.49,0.489-1.103,0.734-1.837,0.734
|
||||
c-0.687,0-1.286-0.245-1.801-0.734s-0.771-1.103-0.771-1.837V5.731h-9.038c-0.735,0-1.359-0.257-1.874-0.771
|
||||
s-0.771-1.113-0.771-1.801c0-0.734,0.257-1.359,0.771-1.873c0.515-0.515,1.139-0.771,1.874-0.771h23.073
|
||||
C264.483,0.515,265.083,0.771,265.598,1.286z"/>
|
||||
<g>
|
||||
<path fill="#00C6FF" d="M270.195,53.366c0.349,0,0.649,0.112,0.899,0.338c0.25,0.225,0.375,0.538,0.375,0.938
|
||||
c0,0.351-0.125,0.638-0.375,0.862s-0.551,0.338-0.899,0.338c-0.351,0-0.65-0.113-0.9-0.338c-0.251-0.225-0.375-0.512-0.375-0.862
|
||||
c0-0.399,0.124-0.713,0.375-0.938C269.544,53.479,269.844,53.366,270.195,53.366z"/>
|
||||
<path fill="#00C6FF" d="M283.395,55.616c-0.551,0-0.825-0.249-0.825-0.75V1.841c0-0.499,0.274-0.75,0.825-0.75
|
||||
c0.549,0,0.824,0.251,0.824,0.75v53.025C284.219,55.367,283.944,55.616,283.395,55.616z"/>
|
||||
<path fill="#00C6FF" d="M320.518,43.842c0,0.149,0,0.551,0,1.199c0,0.65-0.101,1.438-0.3,2.363c-0.2,0.926-0.514,1.912-0.938,2.962
|
||||
c-0.426,1.05-1.062,2.025-1.912,2.925c-1.95,2.051-4.626,3.075-8.025,3.075c-3.351,0-5.976-1.024-7.875-3.075
|
||||
c-0.851-0.899-1.488-1.899-1.912-3c-0.426-1.099-0.713-2.137-0.863-3.112c-0.149-0.975-0.225-1.812-0.225-2.513
|
||||
c0-0.699,0-1.125,0-1.274v-30.75c0-4,1.2-7.125,3.6-9.375c1-0.85,2.125-1.525,3.375-2.025c1.25-0.499,2.551-0.75,3.9-0.75
|
||||
s2.662,0.225,3.938,0.675c1.275,0.45,2.412,1.1,3.412,1.95c2.551,2.25,3.825,5.426,3.825,9.525V43.842z M318.943,12.642
|
||||
c0-1.95-0.288-3.6-0.862-4.95c-0.575-1.35-1.325-2.438-2.25-3.263c-0.926-0.825-1.963-1.425-3.112-1.8
|
||||
c-1.15-0.375-2.275-0.562-3.375-0.562c-1.15,0-2.287,0.213-3.412,0.638c-1.125,0.425-2.113,1.062-2.963,1.912
|
||||
c-0.851,0.851-1.537,1.95-2.062,3.3s-0.787,2.925-0.787,4.725v30.825c-0.051,1.25,0,2.312,0.149,3.188
|
||||
c0.15,0.875,0.399,1.825,0.75,2.85c0.35,1.025,0.9,1.938,1.65,2.737c1.6,1.7,3.825,2.55,6.675,2.55c2.949,0,5.25-0.874,6.9-2.625
|
||||
c0.75-0.799,1.299-1.674,1.649-2.625c0.35-0.949,0.601-1.837,0.75-2.662c0.15-0.825,0.226-1.812,0.226-2.963L318.943,12.642z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.8 KiB |
@ -1,49 +1,44 @@
|
||||
.view-login {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
background-color: #F9F9F9;
|
||||
background-color: $color-grey-lightest;
|
||||
color: $color-grey-dark;
|
||||
|
||||
h1, a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px 1px $color-grey-medium;
|
||||
.logo-wrapper {
|
||||
width: 320px;
|
||||
height: 58px;
|
||||
margin: 130px auto 75px;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 0 $nav-padding;
|
||||
height: 84px;
|
||||
h1 {
|
||||
font-family: 'Mensch';
|
||||
font-weight: normal;
|
||||
font-size: 5em;
|
||||
height: 100px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
padding-top: 10px;
|
||||
color: #00C6FF;
|
||||
|
||||
span {
|
||||
font-family: 'Mensch Thin';
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
background-image:url('../img/whiteout_logo.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 320px 58px;
|
||||
width: 320px;
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 100px $nav-padding 0 $nav-padding;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
input {
|
||||
border: 0!important;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
p {
|
||||
line-height: 150%
|
||||
}
|
||||
|
||||
.passphrase {}
|
||||
div {
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.confirm-control {}
|
||||
|
||||
.info-text {
|
||||
text-align:justify;
|
||||
text-justify:inter-word;
|
||||
input {
|
||||
margin-right: 5px;
|
||||
border-radius: 5px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-grey-light;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,22 @@
|
||||
<div class="view-login">
|
||||
<header>
|
||||
<h1>WHITEOUT<span>.IO</span></h1>
|
||||
</header>
|
||||
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo"></div>
|
||||
</div><!--/logo-->
|
||||
|
||||
<div class="content">
|
||||
<div class="passphrase">
|
||||
<p><span>Please enter your passphrase: </span><input type="password" ng-model="passphrase" class="passphrase" placeholder="Passphrase" tabindex="1" focus-me="true"></p>
|
||||
</div>
|
||||
<h1>Unlock mailbox</h1>
|
||||
|
||||
<p>Please enter your passphrase to unlock the mailbox.</p>
|
||||
|
||||
<form>
|
||||
<div>
|
||||
<input type="password" ng-model="passphrase" class="passphrase" placeholder="Passphrase" tabindex="1" focus-me="true">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!passphrase" tabindex="3">Unlock</button>
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/content-->
|
||||
|
||||
<div class="confirm-control">
|
||||
<button ng-click="confirmPassphrase()" class="btn" ng-disabled="!passphrase" tabindex="2">Confirm passphrase</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,23 +1,23 @@
|
||||
<div class="view-login">
|
||||
<header>
|
||||
<h1>WHITEOUT<span>.IO</span></h1>
|
||||
</header>
|
||||
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo"></div>
|
||||
</div><!--/logo-->
|
||||
|
||||
<div class="content">
|
||||
<div class="passphrase">
|
||||
<p><span>Please enter your passphrase: </span><input type="password" ng-model="passphrase" class="passphrase" placeholder="Passphrase" tabindex="1"></p>
|
||||
</div>
|
||||
<h1>Set passphrase</h1>
|
||||
|
||||
<div class="info-text">
|
||||
<p>Your passphrase protects the secrets that protect your privacy. You are the only person in charge of your privacy, which is a good thing and the way it should be. The passphrase will <b>never</b> be stored by this application. So you might want to write it down and put it into a <b>safe</b> place. You will need this passphrase when you re-open this application. If you lose the passphrase, your communication is irretrievably lost and <b>cannot be restored</b>.</p>
|
||||
</div>
|
||||
<p>The passphrase protects your private key. If you forget your passphrase, there is no way to restore your data. So it might be a good idea to write it down and keep it in a safe place.</p>
|
||||
|
||||
<div class="passphrase">
|
||||
<p><span>Please confirm your passphrase: </span><input type="password" ng-model="confirmation" class="confirmation" placeholder="Confirmation" tabindex="2"></p>
|
||||
</div>
|
||||
<form>
|
||||
<div>
|
||||
<input type="password" ng-model="passphrase" placeholder="Enter passphrase" tabindex="1" focus-me="true">
|
||||
<input type="password" ng-model="confirmation" placeholder="Confirm Passphrase" tabindex="2">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!passphrase || passphrase!==confirmation" tabindex="3">Generate keypair</button>
|
||||
</div>
|
||||
</form>
|
||||
</div><!--/content-->
|
||||
|
||||
<div class="confirm-control">
|
||||
<button ng-click="confirmPassphrase()" class="btn" ng-disabled="!passphrase || passphrase!==confirmation" tabindex="3">Confirm passphrase</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user