feat: login UI - vector + dynamic colors
This commit is contained in:
parent
cbe39102c3
commit
16a47e46ce
7
assets/svg/login-bg-dark.svg
Normal file
7
assets/svg/login-bg-dark.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#2d2d2d;fill-opacity:0.282609;"/>
|
||||
<path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#2d2d2d;fill-opacity:0.550725;"/>
|
||||
<path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#2d2d2d;"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.5 KiB |
7
assets/svg/login-bg.svg
Normal file
7
assets/svg/login-bg.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#fff;fill-opacity:0.282609;"/>
|
||||
<path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#fff;fill-opacity:0.550725;"/>
|
||||
<path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#fff;"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.5 KiB |
@ -1,22 +1,41 @@
|
||||
.login {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-image: url('../images/bg.jpg');
|
||||
background-image: linear-gradient(to right, mc('blue', '400'), mc('blue', '600'));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.is-error {
|
||||
background-image: linear-gradient(to right, mc('red', '400'), mc('red', '600'));
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('../svg/login-bg.svg');
|
||||
background-position: center bottom;
|
||||
background-size: cover;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
&-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 450px;
|
||||
width: 400px;
|
||||
align-items: stretch;
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.2);
|
||||
border-radius: 6px;
|
||||
|
||||
&.is-expanded {
|
||||
width: 650px;
|
||||
|
||||
.login-frame {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include until($tablet) {
|
||||
@ -30,22 +49,24 @@
|
||||
|
||||
&-error {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
bottom: 105%;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
background-image: radial-gradient(ellipse at top left, rgba(mc('red', '900'),.9) 0%,rgba(mc('red', '400'),.8) 100%);
|
||||
border: 1px solid #FFF;
|
||||
color: #FFF;
|
||||
background-image: radial-gradient(ellipse at top left, rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 100%);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
|
||||
border-radius: 6px;
|
||||
color: mc('red', '800');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
padding: 0 1rem 0 0;
|
||||
border-right: 1px solid #FFF;
|
||||
border-right: 1px solid mc('red', '200');
|
||||
}
|
||||
span {
|
||||
padding: 0 0 0 1rem;
|
||||
@ -57,9 +78,12 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 250px;
|
||||
border: 1px solid #FFF;
|
||||
|
||||
border-right: none;
|
||||
border-radius: 6px 0 0 6px;
|
||||
background-color: mc('grey', '900');
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
@include until($tablet) {
|
||||
width: 50px;
|
||||
@ -70,8 +94,8 @@
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
color: #FFF;
|
||||
background-color: mc('grey', '800');
|
||||
border-top: 1px solid mc('grey', '900');
|
||||
background-color: mc('light-blue', '800');
|
||||
border-top: 1px solid mc('light-blue', '900');
|
||||
font-family: $core-font-standard;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
@ -86,7 +110,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: mc('grey', '600');
|
||||
background-color: mc('light-blue', '600');
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@ -96,7 +120,7 @@
|
||||
&.is-active {
|
||||
background-color: mc('grey', '100');
|
||||
background-image: radial-gradient(circle at top left, rgba(mc('grey', '200'),1) 0%,rgba(255,255,255,1) 100%);
|
||||
color: mc('grey', '700');
|
||||
color: mc('light-blue', '700');
|
||||
}
|
||||
|
||||
i {
|
||||
@ -137,8 +161,8 @@
|
||||
}
|
||||
|
||||
&-frame {
|
||||
background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 0%,rgba(240,240,240,.6) 100%);
|
||||
border: 1px solid #FFF;
|
||||
background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 5%,rgba(240,240,240,.6) 100%);
|
||||
border-radius: 6px;
|
||||
width: 400px;
|
||||
padding: 1rem;
|
||||
color: mc('grey', '700');
|
||||
@ -154,7 +178,7 @@
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: mc('grey', '700');
|
||||
color: mc('light-blue', '700');
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@ -176,7 +200,7 @@
|
||||
width: 100%;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255,255,255,.7);
|
||||
background-color: rgba(255,255,255,.9);
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
@ -188,7 +212,7 @@
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: mc('grey','400');
|
||||
border-color: mc('light-blue','500');
|
||||
}
|
||||
|
||||
}
|
||||
@ -204,13 +228,12 @@
|
||||
bottom: 10vh;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
color: #FFF;
|
||||
color: mc('grey', '500');
|
||||
font-weight: 400;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
color: #FFF;
|
||||
color: mc('light-blue', '500');
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
|
@ -35,8 +35,8 @@ const bruteforce = new ExpressBrute(EBstore, {
|
||||
*/
|
||||
router.get('/login', function (req, res, next) {
|
||||
res.render('auth/login', {
|
||||
authStrategies: wiki.auth.strategies,
|
||||
hasMultipleStrategies: Object.keys(wiki.config.auth.strategies).length > 0
|
||||
authStrategies: _.reject(wiki.auth.strategies, { key: 'local' }),
|
||||
hasMultipleStrategies: Object.keys(wiki.config.auth.strategies).length > 1
|
||||
})
|
||||
})
|
||||
|
||||
|
@ -2,8 +2,8 @@ extends ../master.pug
|
||||
|
||||
block body
|
||||
body
|
||||
.login#root
|
||||
.login-container(:class={ "is-expanded": hasMultipleStrategies })
|
||||
.login#root(class={ "is-error": flash.length > 0 })
|
||||
.login-container(class={ "is-expanded": hasMultipleStrategies })
|
||||
if flash.length > 0
|
||||
.login-error
|
||||
strong
|
||||
@ -25,7 +25,7 @@ block body
|
||||
form(method='post', action='/login')
|
||||
input#login-user(type='text', name='email', placeholder=t('auth:fields.emailuser'))
|
||||
input#login-pass(type='password', name='password', placeholder=t('auth:fields.password'))
|
||||
button.button.is-light-green.is-fullwidth(type='submit')
|
||||
button.button.is-light-blue.is-fullwidth(type='submit')
|
||||
span= t('auth:actions.login')
|
||||
.login-copyright
|
||||
= t('footer.poweredby')
|
||||
|
Loading…
Reference in New Issue
Block a user