ui-overhaul #24
|
@ -26,11 +26,11 @@ p, h1, h2, h3, h4, h5, h6 {
|
||||||
:root {
|
:root {
|
||||||
/* Colors */
|
/* Colors */
|
||||||
--light : #fff;
|
--light : #fff;
|
||||||
--light-dust : #fcfcfc;
|
--light-dust : #f6f6f6;
|
||||||
--dust : #f1f1f1;
|
--dust : #f1f1f1;
|
||||||
--dark-dust : #bfbfbf;
|
--dark-dust : #bfbfbf;
|
||||||
--fade : #878787;
|
--fade : #878787;
|
||||||
--twilight : #3c3c3c;
|
--twilight : #4a4a4a;
|
||||||
--dark : #2a2a2a;
|
--dark : #2a2a2a;
|
||||||
--custard : #f0dcac;
|
--custard : #f0dcac;
|
||||||
--water : #a8f3f4;
|
--water : #a8f3f4;
|
||||||
|
@ -214,12 +214,9 @@ div.infobox {
|
||||||
justify-content : space-between;
|
justify-content : space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
div.infobox button {
|
||||||
div.services > div:hover {
|
margin-top : var(--double-space);
|
||||||
transform : scale(1.02);
|
|
||||||
transition : all 0.2s;
|
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
|
||||||
div.services > div > div.description {
|
div.services > div > div.description {
|
||||||
margin-bottom : var(--double-space);
|
margin-bottom : var(--double-space);
|
||||||
|
@ -263,9 +260,9 @@ form > div >label {
|
||||||
|
|
||||||
form > div > input[type="text"],
|
form > div > input[type="text"],
|
||||||
form > div > input[type="password"] {
|
form > div > input[type="password"] {
|
||||||
border : 1px solid var(--twilight);
|
border : 2px solid var(--twilight);
|
||||||
border-radius : 3px;
|
border-radius : 6px;
|
||||||
padding : 6px 12px;
|
padding : 8px;
|
||||||
background : var(--light-dust);
|
background : var(--light-dust);
|
||||||
width : 100%;
|
width : 100%;
|
||||||
}
|
}
|
||||||
|
@ -279,14 +276,12 @@ form > div > input[type="password"] {
|
||||||
|
|
||||||
#loginbox {
|
#loginbox {
|
||||||
border-radius : var(--space);
|
border-radius : var(--space);
|
||||||
background : var(--dust);
|
|
||||||
border : 6px solid white;
|
border : 6px solid white;
|
||||||
width : 800px;
|
width : 800px;
|
||||||
height : 500px;
|
height : 500px;
|
||||||
|
|
||||||
display : flex;
|
display : flex;
|
||||||
flex-flow : row;
|
flex-flow : row;
|
||||||
//justify-content : space-between;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#loginbox > div {
|
#loginbox > div {
|
||||||
|
@ -299,19 +294,27 @@ form > div > input[type="password"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#loginbox > div.login {
|
#loginbox > div.login {
|
||||||
|
background : var(--light-dust);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loginbox > div.signup {
|
#loginbox > div.signup {
|
||||||
border-radius : 0 var(--space) var(--space) 0;
|
|
||||||
background : var(--water);
|
background : var(--water);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#loginbox > div:first-child {
|
||||||
|
border-radius : var(--half-space) 0 0 var(--half-space);
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginbox > div:last-child {
|
||||||
|
border-radius : 0 var(--half-space) var(--half-space) 0;
|
||||||
|
}
|
||||||
|
|
||||||
#loginbox > div:last-child > * {
|
#loginbox > div:last-child > * {
|
||||||
flex : 1;
|
flex : 1;
|
||||||
}
|
}
|
||||||
|
@ -333,13 +336,11 @@ form > div > input[type="password"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
position : fixed;
|
margin : var(--space) var(--outer-space);
|
||||||
bottom : 0;
|
padding : var(--space);
|
||||||
left : 0;
|
border-radius : var(--quarter-space);
|
||||||
right : 0;
|
|
||||||
background : var(--dark);
|
background : var(--dark);
|
||||||
color : var(--dust);
|
color : var(--dust);
|
||||||
padding : 12px;
|
|
||||||
font-size : 0.78em;
|
font-size : 0.78em;
|
||||||
opacity : 0.8;
|
opacity : 0.8;
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,8 +35,8 @@
|
||||||
</aside>
|
</aside>
|
||||||
<nav>
|
<nav>
|
||||||
<ol>
|
<ol>
|
||||||
<li><a href="/">Dashboard</a></li>
|
<li><a href="/" class="current">Dashboard</a></li>
|
||||||
<li><a href="/services" class="current">Services</a></li>
|
<li><a href="/services">Services</a></li>
|
||||||
<li><a href="#">Payment</a></li>
|
<li><a href="#">Payment</a></li>
|
||||||
<li><a href="/membership">Settings</a></li>
|
<li><a href="/membership">Settings</a></li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
|
@ -7,12 +7,9 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="content-view">
|
<div class="content-view">
|
||||||
<h2>Welcome {{ user }}!</h2>
|
<h2>Welcome {{ user }}!</h2>
|
||||||
<p>
|
|
||||||
Boink?
|
|
||||||
</p>
|
|
||||||
<div class="infobox">
|
<div class="infobox">
|
||||||
<p>
|
<p>
|
||||||
To get started we need you to verify your email!
|
To get you started we need to verify your email!
|
||||||
</p>
|
</p>
|
||||||
<button>Verify email</button>
|
<button>Verify email</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue