ui overall part 1: login, init, pass reset forms

pull/84/head
Ro 3 years ago
parent b51d63633f
commit 8e3d359486

@ -26,22 +26,25 @@
</div>
<div id="main-content" class="main-container">
<section id="dash-index-content">
<header id="header">
<div id="wrapper">
<div id="left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
{% if status %}
<header id="header">
<div id="wrapper">
<div id="left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
</div>
<div id="right">
{% if status %}
{% apply spaceless %}
{{ include("dash/partials/navigation.twig") }}
{% endapply %}
{% endif %}
</div>
</div>
<div id="right">
{% if status %}
{% apply spaceless %}
{{ include("dash/partials/navigation.twig") }}
{% endapply %}
{% endif %}
</div>
</div>
</header>
</header>
{% endif %}
{% block mainContent %}{% endblock %}
</section>

@ -1,10 +1,11 @@
<div id="dash-login">
<div id="dash-form" class="dash-form">
<img id="the-logo" src="/assets/images/global/the-logo.svg"/>
<form id="login" class='login' name="login" action="/@/dashboard/login" method="POST">
<input type="text" name="handle" class="form-control" placeholder="Handle" required ">
<input type="password" name="password" class="form-control" placeholder="Password" required">
<button id="login-btn" class='login-btn' type='submit'>
Let's see some ID
ID, PLEASE
</button><br /><br />
<a href="/dashboard/reset-password"> Forgot Password?</a>
</form>

@ -12,51 +12,32 @@
<div id="dash-index">
<div id="dash-index-wrapper">
<div id="dash-init" class="dash-init">
<br />
<form id="init-form">
<h1>What up</h1>
<p>Just fill these in and it'll get you started.</p>
<br />
<label>What's your handle?</label><br />
<input type="text" name="new_member_handle" id="new_member_handle"/>
<br />
<label>Let's get that email</label><br />
<input type="text" name="new_member_email" id="new_member_email"/>
<br />
<label>And a password</label><br />
<input type="text" name="new_member_pass" id="new_member_pass"/>
<br />
<label>Confirm that pass</label><br />
<input type="text" name="new_member_pass2" id="new_member_pass2"/>
<br />
<label>What's your site called?</label><br />
<input type="text" name="new_member_title" id="new_member_title"/>
<br />
<button id="init-blog" data-action='blog-init' type='submit'>SET IT UP</button>
<img id="the-logo" src="/assets/images/global/the-logo.svg"/>
<input type="text" name="new_member_handle" id="new_member_handle" placeholder="handle"/>
<input type="text" name="new_member_email" id="new_member_email" placeholder="email"/>
<input type="text" name="new_member_pass" id="new_member_pass" placeholder="password"/>
<input type="text" name="new_member_pass2" id="new_member_pass2" placeholder="password confirm"/>
<input type="text" name="new_member_title" id="new_member_title" placeholder="title"/>
<button id="init-blog" data-action='blog-init' type='submit'>SET UP YOUR SITE</button>
<br /><br />
<button class="init-option" id="init-switch-restore">RESTORE FROM BACKUP</button>
</form>
<div class="option">
<button class="init-option" id="init-switch-restore">OR RESTORE FROM BACKUP</button>
</div>
</div>
<div id="dash-restore" class="dash-restore">
<form id="init-restore">
<h1>Restore from backup</h1>
<p>Let's verify your backup</p>
<br />
<label>What's your handle?</label><br />
<input type="text" name="restore_member_handle" id="restore_member_handle"/>
<br />
<label>And your password</label><br />
<input type="text" name="restore_member_pass" id="restore_member_pass"/>
<br />
<label>Backup File</label><br />
<input id="backup-upload" type="file" name="backup-upload"/>
<br />
<img id="the-logo" src="/assets/images/global/the-logo.svg"/>
<input type="text" name="restore_member_handle" id="restore_member_handle" placeholder="handle"/><input type="text" name="restore_member_pass" id="restore_member_pass" placeholder="password"/>
<div>
<label>Grab your backup zip</label>
<input id="backup-upload" type="file" name="backup-upload" placeholder="Backup Zip"/>
</div>
<br /><br />
<button id="blog-restore" data-action='blog-restore' type='submit'>RESTORE</button>
<br /><br />
<button class="init-option" id="init-switch-fresh">OR INSTALL FROM SCRATCH</button>
</form>
<div class="option">
<button class="init-option" id="init-switch-restore">OR INSTALL FROM SCRATCH</button>
</div>
</div>
</div>
</div>

@ -13,20 +13,21 @@
<div id="dash-index-wrapper">
<div id="dash-login">
<div id="dash-reset" class="dash-reset">
<img id="the-logo" src="/assets/images/global/the-logo.svg"/>
<form id="reset" class='login' name="reset" action="/@/dashboard/login" method="POST">
<input type="password" id="new_password"name="new_password" class="form-control" placeholder="New Password" required">
<input type="password" id="new_password2" name="new_password2" class="form-control" placeholder="New Password Confirm" required">
<input type="password" id="secret" name="secret" class="form-control" placeholder="Account Secret" required">
<button id="reset-btn" class='login-btn' type='submit'>
Update Password
</button><br /><br />
RESET PASSWORD
</button><br />
<p>
Use this to get your secret to verify it's you. If your email is set up, the secret will be sent there. If not, the form will be updated automatically(but please set up your email, once you reset your password).
</p>
<input type="text"id="email" name="email" class="form-control" placeholder="Verify Email" required">
<input type="text"id="email" name="email" class="form-control" placeholder="email to verify" required">
<button id="get-secret-btn" class='login-btn' type='submit'>
Retrieve Secret
VERIFY EMAIL
</button><br /><br />
</form>
</div>

@ -5,7 +5,7 @@
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=tyurtyuryu">
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adsfdfdf">
{% endblock %}
{% block mainContent %}

@ -1746,8 +1746,8 @@ sub {
sup {
top: -0.55em;
background: #374857;
color: #374857;
background: #1D3040;
color: #1D3040;
border-radius: 2px;
padding: 0 2px 0 2px;
margin: 0 2px 0 0;
@ -1885,7 +1885,7 @@ template {
}
h1, h2, h3 {
color: #f2f1ef;
color: #EFEBE3;
}
h1 {
@ -1904,7 +1904,8 @@ h3 {
}
html, body {
background-color: #0f1419;
background: #1D3040;
background: linear-gradient(0deg, #1d3040 0%, #2d4a63 100%);
font: 400 1em Helvetica, Arial, sans-serif;
height: 100%;
}
@ -1919,7 +1920,10 @@ a {
transition: all 0.1s linear;
}
a:hover {
color: #d8e5f2;
background: #1D3040;
color: #b2cce5;
border-radius: 5px;
padding: 5px;
}
svg.icons {
@ -1983,20 +1987,20 @@ svg.icons {
height: 30px;
width: 30px;
text-align: center;
border: 2px solid #f2f1ef;
border: 2px solid #EFEBE3;
}
#notifications #notifyMessage p {
color: #f2f1ef;
color: #EFEBE3;
background: black;
width: 400px;
height: 28px;
padding: 15px 0 0 5px;
border-radius: 0 5px 5px 0;
border: 2px solid #f2f1ef;
border: 2px solid #EFEBE3;
text-align: center;
}
#notifications #notifyMessage .icons {
fill: #f2f1ef;
fill: #EFEBE3;
}
.notify-close {
@ -2017,6 +2021,7 @@ svg.icons {
margin: 0 auto;
z-index: 10;
position: relative;
height: 100%;
}
.main-container section header {
width: 100%;
@ -2037,7 +2042,7 @@ svg.icons {
}
.main-container section header #wrapper #right {
text-align: right;
color: #f2f1ef;
color: #EFEBE3;
}
.main-container section header #wrapper #right a {
text-decoration-color: #fc6399;
@ -2058,30 +2063,30 @@ svg.icons {
/* Mozilla based browsers */
::-moz-selection {
background-color: #fc6399;
color: #f2f1ef;
color: #EFEBE3;
}
/* Works in Safari */
::selection {
background-color: #fc6399;
color: #f2f1ef;
color: #EFEBE3;
}
/* Works in Opera */
::-o-selection {
background-color: #fc6399;
color: #f2f1ef;
color: #EFEBE3;
}
::-ms-selection {
background-color: #fc6399;
color: #f2f1ef;
color: #EFEBE3;
}
/* Works in Internet Explorer */
::-webkit-selection {
background-color: #fc6399;
color: #f2f1ef;
color: #EFEBE3;
}
@media only screen and (max-width: 800px) {
@ -2115,35 +2120,41 @@ svg.icons {
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init, #dash-index-content #dash-index #dash-index-wrapper .dash-restore {
width: 100%;
max-width: 900px;
margin: 0 auto;
color: #b2cce5;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init label, #dash-index-content #dash-index #dash-index-wrapper .dash-restore label {
color: #374857;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #1D3040;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init form, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form {
background: #f2f1ef;
background: #EFEBE3;
padding: 15px;
width: 300px;
border-radius: 5px;
text-align: center;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init form h1, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form h1 {
color: #374857;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init form p, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form p {
color: black;
border-top: 1px solid #374857;
border-bottom: 1px solid #374857;
padding: 10px 0 10px 0;
#dash-index-content #dash-index #dash-index-wrapper .dash-init form #the-logo, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form #the-logo {
width: 40px;
margin: 20px;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init form input.large[type=email], #dash-index-content #dash-index #dash-index-wrapper .dash-init form input[type=password], #dash-index-content #dash-index #dash-index-wrapper .dash-init form input[type=text], #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input.large[type=email], #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input[type=password], #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input[type=text] {
margin-bottom: 15px;
margin-top: 5px;
#dash-index-content #dash-index #dash-index-wrapper .dash-init form input, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input {
width: 290px;
margin: 0 0 10px 0;
height: 30px;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init form button, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form button {
height: 30px;
width: 120px;
margin: 0 auto;
width: 300px;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init form div, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form div {
background: #1D3040;
color: #EFEBE3;
border-radius: 3px;
padding: 5px;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-init form div label, #dash-index-content #dash-index #dash-index-wrapper .dash-restore form div label {
display: block;
padding: 5px;
color: #f5ab35;
}
#dash-index-content #dash-index #dash-index-wrapper .dash-restore {
display: none;
@ -2151,15 +2162,23 @@ svg.icons {
}
#dash-index-content #dash-index #dash-index-wrapper #dash-login {
width: 100%;
max-width: 900px;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form, #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-reset {
width: 300px;
padding: 0.75em;
background: #374857;
border-radius: 3px;
color: #f2f1ef;
background: #EFEBE3;
border-radius: 5px;
color: #EFEBE3;
text-align: center;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form #the-logo, #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-reset #the-logo {
width: 40px;
margin: 20px;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form input, #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-reset input {
width: 290px;
@ -2182,7 +2201,7 @@ svg.icons {
width: 30%;
padding: 5px;
border-radius: 3px;
color: #f2f1ef;
color: #EFEBE3;
margin: 0 10px 10px 0;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-menu a:hover {
@ -2191,7 +2210,7 @@ svg.icons {
#dash-index-content #dash-index #dash-index-wrapper #dash-menu a svg {
display: inline-block;
vertical-align: top;
fill: #f2f1ef;
fill: #EFEBE3;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-menu a label {
display: inline-block;
@ -2226,7 +2245,7 @@ svg.icons {
display: inline-block;
margin: 24px 0 24px 0;
right: 10px;
color: #f2f1ef;
color: #EFEBE3;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu a {
text-decoration-color: #fc6399;
@ -2243,7 +2262,7 @@ svg.icons {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label {
font-size: 1.4em;
font-weight: 700;
color: #f2f1ef;
color: #EFEBE3;
padding: 5px;
vertical-align: top;
display: inline-block;
@ -2260,7 +2279,7 @@ svg.icons {
font-family: "Lucida Console", Monaco, monospace;
font-size: 0.5em;
padding: 7px;
color: #f2f1ef;
color: #EFEBE3;
text-align: center;
border-radius: 0 0 3px 3px;
}
@ -2288,7 +2307,7 @@ svg.icons {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active=false] {
width: 65px;
background: black;
color: #f2f1ef;
color: #EFEBE3;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active=true] {
width: 70px;
@ -2358,13 +2377,13 @@ svg.icons {
margin: 5px;
}
#settings-actions #buttons button svg {
fill: #f2f1ef;
fill: #EFEBE3;
}
#settings-actions #buttons button[data-render=false] {
background: black;
}
#settings-actions #buttons button[data-render=false] svg {
fill: #f2f1ef;
fill: #EFEBE3;
}
#settings-actions #buttons button[data-render=true] {
background: white;
@ -2384,7 +2403,7 @@ svg.icons {
}
#site-background label {
position: absolute;
color: #f2f1ef;
color: #EFEBE3;
margin: 5px;
background: black;
padding: 5px;
@ -2409,7 +2428,7 @@ svg.icons {
height: 45px;
}
#settings-index #settings-index-wrapper #member-settings, #settings-index #settings-index-wrapper #site-settings, #settings-index #settings-index-wrapper #option-settings, #settings-index #settings-index-wrapper #member-utils {
background: #374857;
background: #1D3040;
padding: 5px;
border-radius: 5px 0 5px 0;
width: 100%;
@ -2417,7 +2436,7 @@ svg.icons {
}
#settings-index #settings-index-wrapper #member-settings label, #settings-index #settings-index-wrapper #site-settings label, #settings-index #settings-index-wrapper #option-settings label, #settings-index #settings-index-wrapper #member-utils label {
font-family: "Lucida Console", Monaco, monospace;
color: #f2f1ef;
color: #EFEBE3;
}
#settings-index #settings-index-wrapper #member-settings span, #settings-index #settings-index-wrapper #site-settings span, #settings-index #settings-index-wrapper #option-settings span, #settings-index #settings-index-wrapper #member-utils span {
color: #b2cce5;
@ -2433,8 +2452,8 @@ svg.icons {
display: none;
}
#settings-index #settings-index-wrapper #member-settings .backup-meta, #settings-index #settings-index-wrapper #site-settings .backup-meta, #settings-index #settings-index-wrapper #option-settings .backup-meta, #settings-index #settings-index-wrapper #member-utils .backup-meta {
background: #0f1419;
color: #f2f1ef;
background: black;
color: #EFEBE3;
padding: 8px;
border-radius: 3px;
margin: 5px 0 0 0;
@ -2471,7 +2490,7 @@ svg.icons {
margin: 0 5px 10px 0;
}
#settings-index #settings-index-wrapper #member-settings textarea, #settings-index #settings-index-wrapper #site-settings textarea, #settings-index #settings-index-wrapper #option-settings textarea, #settings-index #settings-index-wrapper #member-utils textarea {
background: #0f1419;
background: black;
width: 95%;
height: 155px;
color: #b2cce5;
@ -2491,11 +2510,11 @@ svg.icons {
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=true] {
background: #b2cce5;
color: #374857;
color: #1D3040;
border-radius: 3px;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=true] svg {
fill: #374857;
fill: #1D3040;
display: inline-block;
float: right;
}
@ -2514,7 +2533,7 @@ svg.icons {
color: #fc6399;
}
#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled=false] {
color: #f2f1ef;
color: #EFEBE3;
}
#settings-index #settings-index-wrapper #option-settings #mail-settings input {
margin: 0 5px 5px 0;
@ -2561,9 +2580,9 @@ svg.icons {
#nav-index #nav-index-wrapper #nav-pages .nav-item {
display: block;
width: 98%;
background: #374857;
background: #1D3040;
border-radius: 3px;
color: #f2f1ef;
color: #EFEBE3;
height: 30px;
padding: 10px;
margin: 0 0 10px 0;
@ -2612,71 +2631,81 @@ svg.icons {
form {
display: inline-block;
}
form a {
color: #1D3040;
}
form p {
background: #f5ab35;
color: #1D3040;
padding: 5px;
display: block;
border-radius: 5px;
text-align: left;
}
input[type=email], input[type=password], input[type=text] {
border: 0;
border-radius: 5px;
padding: 5px;
margin: 10px 5px 0 0;
font: 15px "Lucida Console", Monaco, monospace;
font: 18px Helvetica, Arial, sans-serif;
display: inline-block;
background: #0f1419;
color: #f2f1ef;
background: #1D3040;
color: #f5ab35;
}
textarea {
border: 0;
border-radius: 3px;
color: #f2f1ef;
font: 15px "Lucida Console", Monaco, monospace;
ackground: #0f1419;
color: #EFEBE3;
font: 15px Helvetica, Arial, sans-serif;
background: #1D3040;
}
button, input[type=submit] {
background: #fc6399;
color: #0f1419;
font: 14px Helvetica, Arial, sans-serif;
color: #1D3040;
font: 20px Helvetica, Arial, sans-serif;
border-radius: 5px;
position: relative;
cursor: pointer;
border: 0;
padding: 5px 5px 0 5px;
padding: 10px 0 5px 0;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
font: 15px "Lucida Console", Monaco, monospace;
}
select {
font: 14px "Lucida Console", Monaco, monospace;
font: 14px Helvetica, Arial, sans-serif;
border: 1px solid #b2cce5;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #374857;
color: #1D3040;
}
::-webkit-input-placeholder {
font: 14px "Lucida Console", Monaco, monospace;
color: #bac7d3;
font: 25px Helvetica, Arial, sans-serif;
color: #EFEBE3;
}
:-moz-placeholder {
/* Firefox 18- */
font: 14px "Lucida Console", Monaco, monospace;
color: #bac7d3;
font: 25px Helvetica, Arial, sans-serif;
color: #EFEBE3;
}
::-moz-placeholder {
/* Firefox 19+ */
font: 14px "Lucida Console", Monaco, monospace;
color: #bac7d3;
font: 25px Helvetica, Arial, sans-serif;
color: #EFEBE3;
}
:-ms-input-placeholder {
font: 14px "Lucida Console", Monaco, monospace;
color: #bac7d3;
font: 25px Helvetica, Arial, sans-serif;
color: #EFEBE3;
}
#post-index {
@ -2689,7 +2718,7 @@ select {
overflow: hidden;
}
#post-index #post-index-wrapper #post-index-menu {
color: #f2f1ef;
color: #EFEBE3;
}
#post-index #post-index-wrapper #post-index-menu a {
text-decoration-color: #fc6399;
@ -2699,7 +2728,7 @@ select {
background: #fc6399;
border-radius: 3px;
padding: 3px;
color: #f2f1ef;
color: #EFEBE3;
text-align: center;
margin-bottom: 10px;
float: right;
@ -2712,7 +2741,7 @@ select {
margin: 20px 0 0 0;
}
#post-index #post-index-wrapper #posts-list a.page-link {
background: #f2f1ef;
background: #EFEBE3;
display: inline-block;
vertical-align: top;
width: 100%;
@ -2754,7 +2783,7 @@ select {
padding: 0 0 20px 0;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta span {
color: #f2f1ef;
color: #EFEBE3;
text-align: center;
margin: 0 auto;
display: block;
@ -2762,7 +2791,7 @@ select {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta label {
font-size: 1.4em;
font-weight: 700;
color: #f2f1ef;
color: #EFEBE3;
padding: 5px;
vertical-align: top;
display: inline-block;
@ -2785,7 +2814,7 @@ select {
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active=false] {
width: 70px;
background: black;
color: #f2f1ef;
color: #EFEBE3;
}
#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active=true] {
width: 75px;
@ -2832,7 +2861,7 @@ select {
padding: 0.75rem;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper label {
color: #f2f1ef;
color: #EFEBE3;
font-size: 0.8em;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 600;
@ -2852,7 +2881,7 @@ select {
margin: 0 0 5px 0;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #calendar-icon {
background: #192128;
background: #05090b;
border-radius: 3px 0 0 3px;
display: inline-block;
padding: 5.2px;
@ -2896,7 +2925,7 @@ select {
background: black;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=false] svg {
fill: #f2f1ef;
fill: #EFEBE3;
}
#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] {
background: #f6b54d;
@ -2917,7 +2946,7 @@ select {
width: 100%;
min-height: 200px;
background: black;
color: #374857;
color: #1D3040;
vertical-align: middle;
font-family: "Lucida Console", Monaco, monospace;
}
@ -2935,7 +2964,7 @@ select {
}
#post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn #new-feature-upload {
padding-top: 4px;
background: #f2f1ef;
background: #EFEBE3;
}
#post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn #new-feature-upload svg {
fill: #fc6399;
@ -3060,7 +3089,7 @@ select {
.dp {
position: relative;
background: #374857;
background: #1D3040;
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
line-height: 1.4;
border-radius: 4px;
@ -3140,7 +3169,7 @@ select {
text-align: center;
text-decoration: none;
position: relative;
color: #f2f1ef;
color: #EFEBE3;
border-radius: 2px;
border: 0;
background: transparent;
@ -3150,7 +3179,7 @@ select {
position: relative;
text-align: center;
padding-bottom: 16px;
background: #232e38;
background: #0d161d;
}
.dp-next, .dp-prev {
@ -3210,7 +3239,7 @@ select {
.dp-cal-footer {
text-align: center;
background: #232e38;
background: #0d161d;
}
.dp-day-today:after {
@ -3242,13 +3271,13 @@ select {
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active {
background: #fc6399;
color: #f2f1ef;
color: #EFEBE3;
}
@media screen and (min-device-width: 1200px) {
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus {
background: #fc6399;
color: #f2f1ef;
color: #EFEBE3;
}
}
.dp-col-header, .dp-day {
@ -3285,7 +3314,7 @@ select {
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus {
outline: none;
background: black;
color: #f2f1ef;
color: #EFEBE3;
}
.dp-selected:hover, .dp-selected:focus, .dp-selected {
@ -3370,7 +3399,7 @@ select {
visibility: hidden;
}
#edit-control .submit-start {
background: #f2f1ef;
background: #EFEBE3;
}
#edit-control .submit-start svg {
fill: #32cd32;
@ -3379,13 +3408,13 @@ select {
background: #32cd32;
}
#edit-control .submit-cool svg {
fill: #f2f1ef;
fill: #EFEBE3;
}
#edit-control .submit-delete {
background: #F64747 !important;
}
#edit-control .submit-delete svg {
fill: #f2f1ef !important;
fill: #EFEBE3 !important;
}
#edit-control #option-date {
height: 30px;
@ -3395,18 +3424,18 @@ select {
margin: -13px 5px 0 0;
display: inline-block;
vertical-align: top;
fill: #f2f1ef;
fill: #EFEBE3;
}
#edit-control .content-editor-btn-icon {
padding: 5px 5px 1px 5px;
color: #374857;
color: #1D3040;
}
#edit-control .content-editor-btn-icon svg {
fill: #374857;
fill: #1D3040;
}
#edit-control .content-editor-btn-text {
padding: 5px;
color: #374857;
color: #1D3040;
}
#edit-control #option-bold {
font-weight: bold;
@ -3427,7 +3456,7 @@ select {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #2b3844;
background: #13202b;
}
.hljs, .hljs-subst {
@ -3464,7 +3493,7 @@ select {
}
.hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag {
color: #bac7d3;
color: #90b1cc;
}
.hljs-comment {

File diff suppressed because one or more lines are too long

@ -204,10 +204,10 @@ export default class Base {
init.style.display = "none";
init.style.visibility = "hidden";
restore.style.display = "block";
restore.style.display = "flex";
restore.style.visibility = "visible";
} else {
init.style.display = "block";
init.style.display = "flex";
init.style.visibility = "visible";
restore.style.display = "none";

@ -1,9 +1,9 @@
$primary: #374857
$primary: #1D3040 //gradient #2F4C65
//$primary = #200317; deep sexy purple
$secondary: #b2cce5
$tertiary: #f5ab35
$highlight: #fc6399
$white: #f2f1ef
$white: #EFEBE3
$grey: #abb7b7
$black: #32302f

@ -1,37 +1,45 @@
form
display: inline-block
a
color: $primary
p
background: $tertiary
color: $primary
padding: 5px
display: block
border-radius: 5px
text-align: left
input[type=email], input[type=password], input[type=text]
border: 0
border-radius: 5px
padding: 5px
margin: 10px 5px 0 0
font: 15px $monoType
font: 18px $baseType
display: inline-block
background: color.adjust($primary, $lightness: -20%)
color: $white
background: $primary
color: $tertiary
textarea
border: 0
border-radius: 3px
color: $white
font: 15px $monoType
ackground: color.adjust($primary, $lightness: -20%)
font: 15px $baseType
background: $primary
button, input[type=submit]
background: $highlight
color: color.adjust($primary, $lightness: -20%)
font: 14px $baseType
color: $primary
font: 20px $baseType
border-radius: 5px
position: relative
cursor: pointer
border: 0
padding: 5px 5px 0 5px
padding: 10px 0 5px 0
@include object_transitions(.3s)
font: 15px $monoType
select
font: 14px $monoType
font: 14px $baseType
border: 1px solid $secondary
-webkit-appearance: none
-moz-appearance: none
@ -39,21 +47,21 @@ select
color: $primary
::-webkit-input-placeholder
font: 14px $monoType
color: color.adjust($primary, $lightness: 50%)
font: 25px $baseType
color: $white
:-moz-placeholder
/* Firefox 18- */
font: 14px $monoType
color: color.adjust($primary, $lightness: 50%)
font: 25px $baseType
color: $white
::-moz-placeholder
/* Firefox 19+ */
font: 14px $monoType
color: color.adjust($primary, $lightness: 50%)
font: 25px $baseType
color: $white
:-ms-input-placeholder
font: 14px $monoType
color: color.adjust($primary, $lightness: 50%)
font: 25px $baseType
color: $white

@ -16,45 +16,60 @@
.dash-init, .dash-restore
width: 100%
max-width: 900px
margin: 0 auto
color: $secondary
label
color: $primary
height: 100%
display: flex
align-items: center
justify-content: center
color: $primary
form
background: $white
padding: 15px
h1
color: $primary
p
color: color.adjust($primary, $lightness: -60%)
border-top: 1px solid $primary
border-bottom: 1px solid $primary
padding: 10px 0 10px 0
input.large[type=email], input[type=password], input[type=text]
margin-bottom: 15px
margin-top: 5px
button
width: 300px
border-radius: 5px
text-align: center
#the-logo
width: 40px
margin: 20px
input
width: 290px
margin: 0 0 10px 0
height: 30px
width: 120px
margin: 0 auto
display: block
button
width: 300px
div
background: $primary
color: $white
border-radius: 3px
padding: 5px
label
display: block
padding: 5px
color: $tertiary
.dash-restore
display: none
visibility: hidden
#dash-login
width: 100%
max-width: 900px
height: 100%
margin: 0 auto
display: flex
align-items: center
justify-content: center
#dash-form, #dash-reset
width: 300px
padding: 0.75em
background: $primary
border-radius: 3px
background: $white
border-radius: 5px
color: $white
text-align: center
#the-logo
width: 40px
margin: 20px
input
width: 290px

@ -1,5 +1,6 @@
html, body
background-color: color.adjust($primary, $lightness: -20%)
background: $primary
background: linear-gradient(0deg, rgba($primary,1) 0%, rgba(color.adjust($primary, $lightness: 10%),1) 100%)
font: 400 1em $baseType
height: 100%
@ -8,9 +9,11 @@ a
color: $secondary
text-decoration: underline
@include object-transitions(0.1s)
&:hover
color: color.adjust($secondary, $lightness: 10%)
background: $primary
color: $secondary
border-radius: 5px
padding: 5px
svg.icons
width: 25px
@ -93,6 +96,7 @@ svg.icons
margin: 0 auto
z-index: 10
position: relative
height: 100%
section
header

Loading…
Cancel
Save