projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

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

Browse source
This commit is contained in:
Ro 2021-05-21 14:07:25 -07:00
parent b51d63633f
commit 8e3d359486
12 changed files with 256 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
brain/views/dash/_frame.twig
View file

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

3
brain/views/dash/forms/login.twig
View file

@ -1,10 +1,11 @@
<div id="dash-login"> <div id="dash-login">
<div id="dash-form" class="dash-form"> <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"> <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="text" name="handle" class="form-control" placeholder="Handle" required ">
<input type="password" name="password" class="form-control" placeholder="Password" required"> <input type="password" name="password" class="form-control" placeholder="Password" required">
<button id="login-btn" class='login-btn' type='submit'> <button id="login-btn" class='login-btn' type='submit'>
Let's see some ID ID, PLEASE
</button><br /><br /> </button><br /><br />
<a href="/dashboard/reset-password"> Forgot Password?</a> <a href="/dashboard/reset-password"> Forgot Password?</a>
</form> </form>

57
brain/views/dash/init.twig
View file

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

9
brain/views/dash/reset-password.twig
View file

@ -13,20 +13,21 @@
<div id="dash-index-wrapper"> <div id="dash-index-wrapper">
<div id="dash-login"> <div id="dash-login">
<div id="dash-reset" class="dash-reset"> <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"> <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_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="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"> <input type="password" id="secret" name="secret" class="form-control" placeholder="Account Secret" required">
<button id="reset-btn" class='login-btn' type='submit'> <button id="reset-btn" class='login-btn' type='submit'>
Update Password RESET PASSWORD
</button><br /><br /> </button><br />
<p> <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). 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> </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'> <button id="get-secret-btn" class='login-btn' type='submit'>
Retrieve Secret VERIFY EMAIL
</button><br /><br /> </button><br /><br />
</form> </form>
</div> </div>

2
brain/views/dash/start.twig
View file

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% 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 %} {% endblock %}
{% block mainContent %} {% block mainContent %}

241
public/assets/css/dash.css
View file

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

2
public/assets/scripts/dash.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
src/com/Base.js
View file

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

4
src/styles/main/_colors.sass
View file

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

44
src/styles/main/_forms.sass
View file

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

61
src/styles/main/_index.sass
View file

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

10
src/styles/main/_structure.sass
View file

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