ui overall part 1: login, init, pass reset forms
This commit is contained in:
Ro
parent
b51d63633f
commit
8e3d359486
12 changed files with 256 additions and 214 deletions
|
|
@ -26,6 +26,7 @@
|
|||
</div>
|
||||
<div id="main-content" class="main-container">
|
||||
<section id="dash-index-content">
|
||||
{% if status %}
|
||||
<header id="header">
|
||||
<div id="wrapper">
|
||||
<div id="left">
|
||||
|
|
@ -42,6 +43,8 @@
|
|||
</div>
|
||||
|
||||
</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 />
|
||||
<button id="blog-restore" data-action='blog-restore' type='submit'>RESTORE</button>
|
||||
</form>
|
||||
<div class="option">
|
||||
<button class="init-option" id="init-switch-restore">OR INSTALL FROM SCRATCH</button>
|
||||
<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>
|
||||
</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 #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 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 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 {
|
||||
|
|
|
|||
2
public/assets/scripts/dash.min.js
vendored
2
public/assets/scripts/dash.min.js
vendored
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
|
||||
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
|
||||
|
||||
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…
Reference in a new issue