From 02a2ab4b0f3aa49339fde30d2143f4342659163c Mon Sep 17 00:00:00 2001
From: Kombie <crudetoaster@gmail.com>
Date: Mon, 15 Jul 2019 14:48:47 +0200
Subject: [PATCH] [feature] add local background image controls to menu

---
 src/css/animation.css  |   8 +
 src/css/background.css |   3 +-
 src/css/form.css       | 141 ++++----
 src/css/utilities.css  |   2 +-
 src/css/variables.css  |   8 +-
 src/index.html         | 110 +++---
 src/js/background.js   | 197 ++++++++++-
 src/js/clock.js        |  40 +--
 src/js/control.js      | 778 +++++++++++++++++++++++------------------
 src/js/header.js       | 173 ++++-----
 src/js/init.js         |   1 +
 src/js/layout.js       |  23 +-
 src/js/link.js         | 205 +++++------
 src/js/menu.js         |  13 +-
 src/js/search.js       |  99 +++---
 src/js/state.js        |   5 +
 src/js/theme.js        | 143 ++++----
 17 files changed, 1100 insertions(+), 849 deletions(-)

diff --git a/src/css/animation.css b/src/css/animation.css
index f7041996..263d3d7b 100755
--- a/src/css/animation.css
+++ b/src/css/animation.css
@@ -27,7 +27,15 @@
     transform: scale(1);
   }
 
+  25% {
+    transform: scale(1.1);
+  }
+
   50% {
+    transform: scale(0.9);
+  }
+
+  75% {
     transform: scale(1.1);
   }
 
diff --git a/src/css/background.css b/src/css/background.css
index e1284629..77f131a0 100755
--- a/src/css/background.css
+++ b/src/css/background.css
@@ -16,7 +16,6 @@
 
 .background-image {
   background-image: var(--background-image);
-  /* background-image: url(https://source.unsplash.com/random/1920x1080/?night); */
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
@@ -33,7 +32,7 @@
 }
 
 .background-accent {
-  background-color: rgba(var(--theme-accent), var(--background-accent-opacity));
+  background-color: rgba(var(--theme-accent), var(--background-accent));
   position: absolute;
   top: 0;
   left: 0;
diff --git a/src/css/form.css b/src/css/form.css
index 49e7ebdd..d4befbbc 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -148,7 +148,7 @@ label:not(:only-child):not(:last-child) {
   padding-bottom: 0.5em;
 }
 
-label[disabled] {
+label.disabled {
   color: rgb(var(--form-label-disabled));
 }
 
@@ -168,7 +168,7 @@ input[type="radio"] {
   pointer-events: none;
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  /* transition: all var(--layout-transition-speed-fast) ease-in-out; */
+  transition: color var(--layout-transition-speed-fast) ease-in-out;
 }
 
 input[type="checkbox"]+label,
@@ -181,7 +181,7 @@ input[type="radio"]+label {
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: transform var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out;
 }
 
 input[type="checkbox"]+label:before,
@@ -194,7 +194,29 @@ input[type="radio"]+label:before {
   height: 1em;
   display: block;
   transform: scale(1);
-  transition: transform 0.05s ease-in-out;
+  font-family: "Icons" !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  transition: transform var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out;
+}
+
+input[type="checkbox"]+label:before {
+  content: "\e835";
+}
+
+input[type="checkbox"]:checked+label:before {
+  content: "\e834";
+}
+
+input[type="radio"]+label:before {
+  content: "\e836";
+}
+
+input[type="radio"]:checked+label:before {
+  content: "\e837";
 }
 
 input[type="checkbox"]:focus+label,
@@ -261,32 +283,6 @@ input[type="radio"][disabled]:active+label:before {
   transform: none;
 }
 
-input[type="checkbox"]+label:before,
-input[type="radio"]+label:before {
-  font-family: "Icons" !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-}
-
-input[type="checkbox"]+label:before {
-  content: "\e835";
-}
-
-input[type="checkbox"]:checked+label:before {
-  content: "\e834";
-}
-
-input[type="radio"]+label:before {
-  content: "\e836";
-}
-
-input[type="radio"]:checked+label:before {
-  content: "\e837";
-}
-
 /* color */
 input[type="color"] {
   background-color: transparent;
@@ -537,26 +533,19 @@ input[type="range"][disabled]::-moz-range-progress {
   background-color: rgb(var(--theme-gray-04));
 }
 
-/* input helper */
-.input-helper {
-  margin-bottom: 0
+/* form helper */
+.form-helper {
+  padding: 0.5em 0;
+  color: rgb(var(--form-helper));
+  transition: color var(--layout-transition-speed-fast) ease-in-out;
 }
 
-.input-helper:not(:only-child):not(:last-child) {
-  margin-bottom: 0.5em;
+.form-helper.disabled {
+  color: rgb(var(--form-helper-disabled));
 }
 
-.input-helper[disabled],
-input[type="checkbox"][disabled]~.input-helper,
-input[type="radio"][disabled]~.input-helper,
-input[type="email"][disabled]~.input-helper,
-input[type="number"][disabled]~.input-helper,
-input[type="password"][disabled]~.input-helper,
-input[type="search"][disabled]~.input-helper,
-input[type="tel"][disabled]~.input-helper,
-input[type="text"][disabled]~.input-helper,
-input[type="range"][disabled]~.input-helper {
-  color: rgb(var(--form-input-text-disabled-helper-text));
+.form-helper:not(:last-child) {
+  margin-bottom: 0;
 }
 
 /* input variants */
@@ -772,10 +761,6 @@ input[type="range"][disabled]~.input-helper {
   width: 100%;
 }
 
-.form-grid-wrap .input-helper:not(:only-child) {
-  padding-top: 0.5em;
-}
-
 .form-grid {
   padding: calc(var(--layout-line-width) * 2);
   display: grid;
@@ -783,7 +768,7 @@ input[type="range"][disabled]~.input-helper {
   border-width: var(--layout-line-width);
   border-style: solid;
   border-color: rgb(var(--form-checkbox-radio-label));
-  transition: all var(--layout-transition-speed-fast) ease-in-out;
+  transition: border-color var(--layout-transition-speed-fast) ease-in-out;
 }
 
 .form-grid:focus,
@@ -792,16 +777,12 @@ input[type="range"][disabled]~.input-helper {
   border-color: rgb(var(--theme-style-text));
 }
 
-.form-grid[disabled] {
+.form-grid.disabled {
   border-color: rgb(var(--form-checkbox-radio-disabled-label));
 }
 
-.form-grid[disabled]+.input-helper {
-  color: rgb(var(--form-input-text-disabled-helper-text));
-}
-
-.form-grid[disabled]:focus,
-.form-grid[disabled]:focus-within {
+.form-grid.disabled:focus,
+.form-grid.disabled:focus-within {
   border-color: rgb(var(--form-checkbox-radio-disabled-label));
 }
 
@@ -845,6 +826,7 @@ input[type="range"][disabled]~.input-helper {
   border-color: transparent;
   position: relative;
   transition: none;
+  transition: border-color var(--layout-transition-speed-fast) ease-in-out;
 }
 
 .form-grid input[type="checkbox"]:focus+label,
@@ -893,7 +875,7 @@ input[type="range"][disabled]~.input-helper {
   content: "";
   margin-right: 0;
   font-size: 1em;
-  /* margin: var(--layout-line-width); */
+  background-color: transparent;
   width: inherit;
   height: inherit;
   width: calc(100% - calc(var(--layout-line-width) * 4));
@@ -903,7 +885,7 @@ input[type="range"][disabled]~.input-helper {
   left: calc(var(--layout-line-width) * 2);
   display: block;
   transform: scale(1);
-  transition: transform 0.05s ease-in-out;
+  transition: transform var(--layout-transition-speed-fast) ease-in-out, background-color var(--layout-transition-speed-fast) ease-in-out;
 }
 
 .form-grid input[type="checkbox"]:focus+label:before,
@@ -1004,7 +986,7 @@ input[type="range"][disabled]~.input-helper {
 
 .form-inline {
   display: inline-block;
-  margin-right: 1.5em;
+  margin-right: 0.5em;
   width: initial;
 }
 
@@ -1164,13 +1146,36 @@ input[type="range"][disabled]~.input-helper {
   border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
 }
 
-.form-feedback {
-  padding: 1em 1.5em;
-  background-color: rgb(var(--theme-gray-02));
-  /* border-bottom: var(--layout-line-width) solid rgb(var(--theme-gray-04)); */
-  border-radius: var(--theme-radius);
+.feedback-wrap {
+  padding: 0.5em 0;
+  position: relative;
+  width: 100%;
 }
 
-.form-feedback:not(:last-child) {
-  margin-bottom: 1em;
+.form-feedback {
+  padding: 0.5em 1.5em 0.5em 1em;
+  background-color: rgb(var(--theme-gray-02));
+  border-width: 0;
+  border-left-width: calc(var(--layout-line-width) * 2);
+  border-style: solid;
+  border-color: rgb(var(--theme-gray-04));
+  border-top-right-radius: var(--theme-radius);
+  border-bottom-right-radius: var(--theme-radius);
+}
+
+.form-feedback p {
+  color: rgb(var(--form-feedback-text));
+}
+
+.form-feedback p.muted {
+  color: rgb(var(--form-feedback-text-muted));
+}
+
+.form-feedback.disabled {
+  background-color: transparent;
+  border-color: rgb(var(--theme-gray-02));
+}
+
+.form-feedback.disabled p {
+  color: rgb(var(--form-feedback-text-disabled));
 }
diff --git a/src/css/utilities.css b/src/css/utilities.css
index eb2cd520..f14d59c6 100755
--- a/src/css/utilities.css
+++ b/src/css/utilities.css
@@ -36,7 +36,7 @@
 }
 
 .is-pop {
-  animation: pop var(--layout-transition-speed-fast) 1;
+  animation: pop var(--layout-transition-speed-slow) 1;
 }
 
 .sr-only {
diff --git a/src/css/variables.css b/src/css/variables.css
index 8fabc6d3..df47d409 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -62,7 +62,7 @@
   --background-image: none;
   --background-opacity: 1;
   --background-scale: 1;
-  --background-accent-opacity: 0;
+  --background-accent: 0;
   --background-blur: 0;
   /* form */
   --form-input-text: var(--theme-gray-16);
@@ -70,7 +70,6 @@
   --form-input-text-hover: var(--theme-style-text);
   --form-input-text-focus: var(--theme-style-text);
   --form-input-text-disabled: var(--theme-gray-02);
-  --form-input-text-disabled-helper-text: var(--theme-gray-04);
   --form-input-placeholder: var(--theme-gray-06);
   --form-input-placeholder-hover-focus: var(--theme-gray-10);
   --form-input-placeholder-disabled: var(--theme-gray-04);
@@ -80,6 +79,11 @@
   --form-checkbox-radio-checked-label: var(--theme-gray-16);
   --form-checkbox-radio-disabled-label: var(--theme-gray-04);
   --form-range-thumb: var(--theme-gray-12);
+  --form-feedback-text: var(--theme-gray-16);
+  --form-feedback-text-muted: var(--theme-gray-12);
+  --form-feedback-text-disabled: var(--theme-gray-04);
+  --form-helper: var(--theme-gray-12);
+  --form-helper-disabled: var(--theme-gray-06);
   /* button */
   --button-text: var(--theme-gray-12);
   --button-text-hover-focus: var(--theme-style-text);
diff --git a/src/index.html b/src/index.html
index de752aea..75d2fa4c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="background-color: rgba(38, 40, 49)">
+<html lang="en" style="background-color: rgb(38, 40, 49)">
 
 <head>
   <meta charset="utf-8">
@@ -175,8 +175,8 @@
                     <label for="control-layout-alignment-bottomright"><span class="sr-only">Bottom right</span></label>
                   </div>
                 </div>
-                <p class="input-helper small muted">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
               </div>
+              <p class="control-layout-alignment-helper form-helper small">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -191,8 +191,8 @@
               <div class="input-wrap">
                 <input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="1">
                 <label for="control-layout-order-linkheader">Bookmarks then Header</label>
-                <p class="input-helper small muted">Only available when Bookmarks are shown.</p>
               </div>
+              <p class="control-layout-order-helper form-helper small">Only available when Bookmarks are shown.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -244,8 +244,8 @@
               <div class="input-wrap">
                 <label for="control-header-area-width">Width</label>
                 <input id="control-header-area-width" class="control-header-area-width" type="range" min="10" max="100" value="0" tabindex="1">
-                <p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
               </div>
+              <p class="control-header-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
               <div class="button-wrap">
                 <button class="control-header-area-width-match button mb-0" tabindex="1">Match Bookmarks Area</button>
               </div>
@@ -266,8 +266,8 @@
                     <label for="control-header-area-alignment-right"><span class="sr-only">Right</span></label>
                   </div>
                 </div>
-                <p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
               </div>
+              <p class="control-header-area-alignment-helper form-helper small">Effects may not be visible if the Header Area is full width.</p>
               <hr>
               <label class="control-header-item-alignment-label">Item Horizontal Alignment</label>
               <div class="form-grid-wrap">
@@ -285,8 +285,8 @@
                     <label for="control-header-item-alignment-right"><span class="sr-only">Right</span></label>
                   </div>
                 </div>
-                <p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
               </div>
+              <p class="control-header-item-alignment-helper form-helper small">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -335,8 +335,8 @@
               <div class="input-wrap">
                 <input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="1">
                 <label for="control-header-transitional-show">Show</label>
-                <p class="input-helper small muted">Available when Date or Time is shown.</p>
               </div>
+              <p class="control-header-transitional-show-helper form-helper small">Available when Date or Time is shown.</p>
               <div class="form-indent">
                 <div class="input-wrap">
                   <input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="1">
@@ -453,8 +453,8 @@
                   <div class="input-wrap">
                     <input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="1">
                     <label for="control-header-date-day-week-start-sunday">Sunday</label>
-                    <p class="input-helper small muted">Define what day "1" represents, either Monday or Sunday.</p>
                   </div>
+                  <p class="control-header-date-day-week-start-helper form-helper small">Define what day "1" represents, either Monday or Sunday.</p>
                 </div>
                 <div class="input-wrap">
                   <input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="1">
@@ -489,8 +489,8 @@
                 <div class="input-wrap">
                   <input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="1">
                   <label for="control-header-date-date-ordinal">Ordinal numbers</label>
-                  <p class="input-helper small muted">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
                 </div>
+                <p class="control-header-date-date-ordinal-helper form-helper small">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
               </div>
               <hr>
               <div class="input-wrap">
@@ -506,8 +506,8 @@
                   <div class="input-wrap">
                     <input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="1">
                     <label for="control-header-date-month-ordinal">Ordinal numbers</label>
-                    <p class="input-helper small muted">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
                   </div>
+                  <p class="control-header-date-month-ordinal-helper form-helper small">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
                 </div>
                 <div class="input-wrap">
                   <input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="1">
@@ -579,13 +579,13 @@
                 <div class="input-wrap">
                   <input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
                   <label for="control-header-search-style-auto">Auto</label>
-                  <p class="input-helper small muted">Search box will grow to best fit available space.</p>
                 </div>
+                <p class="control-header-search-style-auto-helper form-helper small">Search box will grow to best fit available space.</p>
                 <div class="input-wrap">
                   <input id="control-header-search-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
                   <label for="control-header-search-style-custom">Custom</label>
-                  <p class="input-helper small muted">Define how wide the Search box should be inside the Header Area.</p>
                 </div>
+                <p class="control-header-search-style-custom-helper form-helper small">Define how wide the Search box should be inside the Header Area.</p>
                 <div class="form-indent">
                   <div class="input-wrap">
                     <label for="control-header-search-width">Width</label>
@@ -596,8 +596,8 @@
                 <div class="input-wrap">
                   <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
                   <label for="control-header-search-focus">Focus on load/refresh</label>
-                  <p class="input-helper small muted">May not work in Chrome.</p>
                 </div>
+                <p class="control-header-search-focus-helper form-helper small">May not work in some browsers.</p>
                 <hr>
                 <label class="control-header-search-engine-label">Search engine</label>
                 <div class="input-wrap">
@@ -631,10 +631,10 @@
                   </div>
                   <div class="input-wrap">
                     <label for="control-header-search-engine-custom-url">URL</label>
-                    <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
-                    <p class="input-helper small muted">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
-                    <p class="input-helper small muted mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
+                    <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
                   </div>
+                  <p class="control-header-search-engine-custom-helper form-helper small">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
+                  <p class="control-header-search-engine-custom-helper form-helper small mb-0">nightTab will add the search term entered into the Search input at the end of the above URL</p>
                 </div>
                 <hr>
                 <label class="control-header-search-text-alignment-label">Align Text</label>
@@ -658,8 +658,8 @@
                 <div class="input-wrap">
                   <label for="control-header-search-size">Size</label>
                   <input id="control-header-search-size" class="control-header-search-size" type="range" min="20" max="500" value="0" step="20" tabindex="1">
-                  <p class="input-helper small muted">Only the Search box width control will change the Width of the Search box.</p>
                 </div>
+                <p class="control-header-search-size-helper form-helper small">Only the Search box width control will change the Width of the Search box.</p>
                 <div class="button-wrap">
                   <button class="control-header-search-size-default button mb-0" tabindex="1">Default search size</button>
                 </div>
@@ -729,13 +729,13 @@
                 <div class="input-wrap">
                   <input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="1">
                   <label for="control-header-shade-style-always">Always visible</label>
-                  <p class="input-helper small muted">Useful for when a Background Image is shown.</p>
                 </div>
+                <p class="control-header-shade-style-always-helper form-helper small">Useful for when a Background Image is shown.</p>
                 <div class="input-wrap">
                   <input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="1">
                   <label for="control-header-shade-style-scroll">Visible on scroll</label>
-                  <p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
                 </div>
+                <p class="control-header-shade-style-scroll-helper form-helper small">The page will not scroll if Bookmarks are not shown.</p>
                 <hr>
                 <div class="input-wrap">
                   <label for="control-header-shade-opacity">Opacity</label>
@@ -760,8 +760,8 @@
               <div class="input-wrap">
                 <label for="control-link-area-width">Width</label>
                 <input id="control-link-area-width" class="control-link-area-width" type="range" min="10" max="100" value="0" tabindex="1">
-                <p class="input-helper small muted">Max width is defined by Layout Area Width.</p>
               </div>
+              <p class="control-link-area-width-helper form-helper small">Max width is defined by Layout Area Width.</p>
               <div class="button-wrap">
                 <button class="control-link-area-width-match button mb-0" tabindex="1">Match Header Area</button>
               </div>
@@ -782,8 +782,8 @@
                     <label for="control-link-area-alignment-right"><span class="sr-only">Right</span></label>
                   </div>
                 </div>
-                <p class="input-helper small muted">Effects may not be visible if the Bookmark Area is full width.</p>
               </div>
+              <p class="control-link-area-alignment-helper form-helper small">Effects may not be visible if the Bookmark Area is full width.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -889,8 +889,8 @@
                 <div class="input-wrap">
                   <input id="control-link-item-order-namedisplay" class="control-link-item-order-namedisplay" type="radio" name="control-link-item-order" value="namedisplay" tabindex="1">
                   <label for="control-link-item-order-namedisplay">Name then Letter/Icon</label>
-                  <p class="input-helper small muted">Only available when Letter/Icon and Name is shown.</p>
                 </div>
+                <p class="control-link-item-order-namedisplay-helper form-helper small">Only available when Letter/Icon and Name is shown.</p>
                 <hr>
                 <div class="input-wrap">
                   <input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
@@ -922,13 +922,13 @@
               <div class="input-wrap">
                 <input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="1">
                 <label for="control-link-style-block">Block</label>
-                <p class="input-helper small muted">Bookmark tiles more square shaped with content stacked vertically.</p>
               </div>
+              <p class="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped with content stacked vertically.</p>
               <div class="input-wrap">
                 <input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="1">
                 <label for="control-link-style-list">List</label>
-                <p class="input-helper small muted">Bookmark tiles more short and wide with content stacked horizontally.</p>
               </div>
+              <p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -936,13 +936,13 @@
               <h1 class="menu-item-header-text">Sort</h1>
             </div>
             <div class="menu-item-form">
-              <div class="button-wrap">
+              <div class="button-wrap form-inline">
                 <button class="control-link-sort-letter button mb-0" tabindex="1">By Letter</button>
               </div>
-              <div class="button-wrap">
+              <div class="button-wrap form-inline">
                 <button class="control-link-sort-icon button mb-0" tabindex="1">By Icon</button>
               </div>
-              <div class="button-wrap">
+              <div class="button-wrap form-inline">
                 <button class="control-link-sort-name button mb-0" tabindex="1">By Name</button>
               </div>
             </div>
@@ -952,11 +952,11 @@
               <h1 class="menu-item-header-text">Accent override</h1>
             </div>
             <div class="menu-item-form">
-              <div class="button-wrap">
+              <div class="button-wrap form-inline">
                 <button class="control-link-accent-clear button mb-0" tabindex="1">Remove all override colours</button>
               </div>
-              <div class="button-wrap">
-                <button class="control-link-accent-set button mb-0" tabindex="1">Apply override colours to all Bookmarks</button>
+              <div class="button-wrap form-inline">
+                <button class="control-link-accent-set button mb-0" tabindex="1">All the colours!</button>
               </div>
             </div>
           </div>
@@ -975,15 +975,15 @@
               <div class="input-wrap">
                 <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="1">
                 <label for="control-theme-style-light">Light</label>
-                <p class="input-helper small muted">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
               </div>
+              <p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
               <hr>
               <div class="input-wrap">
                 <label for="control-theme-radius">Radius</label>
                 <input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="1">
               </div>
               <div class="button-wrap">
-                <button class="control-theme-radius-default button mb-0" tabindex="1">Default radius size</button>
+                <button class="control-theme-radius-default button mb-0" tabindex="1">Default radius</button>
               </div>
             </div>
           </div>
@@ -1037,12 +1037,34 @@
               </div>
               <div class="form-indent">
                 <div class="input-wrap">
-                  <label for="control-background-image-url">URL</label>
-                  <input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="http://" tabindex="1">
-                  <p class="input-helper small muted">Unsplash can be used for random images, eg:</p>
-                  <p class="input-helper small muted"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
-                  <p class="input-helper small muted">Change parameters after <i>.../ramdom/</i> for more options.</p>
-                  <p class="input-helper small muted">Loading times may vary.</p>
+                  <input id="control-background-image-from-local" class="control-background-image-from-local" type="radio" name="control-background-image-from" value="local" tabindex="1">
+                  <label for="control-background-image-from-local">Use local file</label>
+                </div>
+                <div class="form-indent">
+                  <div class="input-wrap input-button input-hide form-inline">
+                    <input id="control-background-image-local" class="control-background-image-local" type="file">
+                    <label for="control-background-image-local">Select image</label>
+                  </div>
+                  <div class="button-wrap form-inline">
+                    <button class="control-background-image-local-clear button mb-0" href="#">Clear image</button>
+                  </div>
+                  <p class="control-background-image-local-helper form-helper small">Max image size 5MB, (due to browser local storage limits).</p>
+                  <p class="control-background-image-local-helper form-helper small">Take care with large files, they may impact performance.</p>
+                  <div class="feedback-wrap">
+                    <div class="control-background-image-local-feedback form-feedback"></div>
+                  </div>
+                </div>
+                <div class="input-wrap">
+                  <input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="1">
+                  <label for="control-background-image-from-url">Use URL</label>
+                </div>
+                <div class="form-indent">
+                  <div class="input-wrap">
+                    <input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
+                  </div>
+                  <p class="control-background-image-url-helper form-helper small">Unsplash can be used for random images, eg:</p>
+                  <p class="control-background-image-url-helper form-helper small"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
+                  <p class="control-background-image-url-helper form-helper small">Change parameters after <i>.../ramdom/</i> for more options. Loading times may vary.</p>
                 </div>
                 <hr>
                 <div class="input-wrap">
@@ -1080,8 +1102,10 @@
                 <input id="control-data-import" class="control-data-import" type="file">
                 <label for="control-data-import">Import data</label>
               </div>
-              <p class="input-helper small muted">Restore a previously exported nightTab backup.</p>
-              <div class="control-data-import-feedback form-feedback is-hidden"></div>
+              <p class="control-data-import-helper form-helper small">Restore a previously exported nightTab backup.</p>
+              <div class="feedback-wrap">
+                <div class="control-data-import-feedback form-feedback"></div>
+              </div>
             </div>
           </div>
           <div class="menu-item">
@@ -1092,8 +1116,8 @@
               <div class="button-wrap">
                 <button class="control-data-export button mb-0" href="#">Export data</button>
               </div>
-              <p class="input-helper small muted">Download a backup of your nightTab Bookmarks and Settings.</p>
-              <p class="input-helper small muted">This file can later be imported on this or another deivce.</p>
+              <p class="control-data-export-helper form-helper small">Download a backup of your nightTab Bookmarks and Settings.</p>
+              <p class="control-data-export-helper form-helper small">This file can later be imported on this or another deivce.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -1104,7 +1128,7 @@
               <div class="button-wrap">
                 <button class="control-data-clear button mb-0" href="#">Clear data</button>
               </div>
-              <p class="input-helper small muted">Wipe all data and restore nightTab to default state.</p>
+              <p class="control-data-clear-helper form-helper small">Wipe all data and restore nightTab to default state.</p>
             </div>
           </div>
         </div>
diff --git a/src/js/background.js b/src/js/background.js
index 41003265..5f5f1234 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -1,23 +1,210 @@
 var background = (function() {
 
-  var render = function() {
+  var mod = {};
+
+  mod.clear = {
+    file: function() {
+      helper.setObject({
+        object: state.get(),
+        path: "background.image.file.name",
+        newValue: ""
+      });
+      helper.setObject({
+        object: state.get(),
+        path: "background.image.file.data",
+        newValue: ""
+      });
+    }
+  };
+
+  var bind = {};
+
+  bind.feedback = {
+    animation: {
+      set: function(animationClass, action) {
+        var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+        helper.addClass(controlBackgroundImageLocalFeedback, animationClass);
+        var animationEndAction = function() {
+          if (action) {
+            action();
+          };
+          bind.feedback.animation.reset();
+        };
+        controlBackgroundImageLocalFeedback.addEventListener("animationend", animationEndAction, false);
+      },
+      reset: function() {
+        var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+        helper.removeClass(controlBackgroundImageLocalFeedback, "is-shake");
+        helper.removeClass(controlBackgroundImageLocalFeedback, "is-pop");
+        controlBackgroundImageLocalFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false);
+      }
+    }
+  };
+
+  var render = {};
+
+  render.image = function() {
+    var html = helper.e("html");
+    if (state.get().background.image.show) {
+      if (state.get().background.image.from == "local") {
+        html.style.setProperty("--background-image", "url(" + state.get().background.image.file.data + ")");
+      } else if (state.get().background.image.from == "url") {
+        html.style.setProperty("--background-image", "url(" + state.get().background.image.url + ")");
+      };
+    } else {
+      html.style.setProperty("--background-image", "url()");
+    };
+  };
+
+  render.blur = function() {
     var html = helper.e("html");
-    html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")");
     html.style.setProperty("--background-blur", state.get().background.image.blur + "px");
+  };
+
+  render.grayscale = function() {
+    var html = helper.e("html");
     html.style.setProperty("--background-grayscale", state.get().background.image.grayscale);
+  };
+
+  render.opacity = function() {
+    var html = helper.e("html");
     html.style.setProperty("--background-opacity", state.get().background.image.opacity);
+  };
+
+  render.scale = function() {
+    var html = helper.e("html");
     html.style.setProperty("--background-scale", state.get().background.image.scale);
-    html.style.setProperty("--background-accent-opacity", state.get().background.image.accent);
+  };
+
+  render.accent = function() {
+    var html = helper.e("html");
+    html.style.setProperty("--background-accent", state.get().background.image.accent);
+  };
+
+  render.input = {
+    clear: function() {
+      var input = helper.e(".control-background-image-local");
+      input.value = "";
+    }
+  };
+
+  render.feedback = {
+    init: function() {
+      if (state.get().background.image.file.name != "") {
+        render.feedback.current();
+      } else {
+        render.feedback.empty();
+      };
+    },
+    empty: function() {
+      var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+      var para1 = helper.node("p:No image selected.|class:muted small");
+      controlBackgroundImageLocalFeedback.appendChild(para1);
+    },
+    current: function() {
+      var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+      var para1 = helper.node("p:Image loaded.|class:muted small");
+      var para2 = helper.node("p:" + state.get().background.image.file.name);
+      controlBackgroundImageLocalFeedback.appendChild(para1);
+      controlBackgroundImageLocalFeedback.appendChild(para2);
+    },
+    success: function(action) {
+      var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+      var para1 = helper.node("p:Success! Setting Background image.|class:muted small");
+      var para2 = helper.node("p:" + state.get().background.image.file.name);
+      controlBackgroundImageLocalFeedback.appendChild(para1);
+      controlBackgroundImageLocalFeedback.appendChild(para2);
+      bind.feedback.animation.set("is-pop", action);
+    },
+    clear: function() {
+      var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+      while (controlBackgroundImageLocalFeedback.lastChild) {
+        controlBackgroundImageLocalFeedback.removeChild(controlBackgroundImageLocalFeedback.lastChild);
+      };
+    },
+    fail: {
+      filetype: function(name) {
+        var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+        var para1 = helper.node("p:Not the right kind of file. Make sure the selected file is an image.|class:small muted");
+        var para2 = helper.node("p:" + name);
+        controlBackgroundImageLocalFeedback.appendChild(para1);
+        controlBackgroundImageLocalFeedback.appendChild(para2);
+        bind.feedback.animation.set("is-shake");
+      },
+      size: function(name) {
+        var controlBackgroundImageLocalFeedback = helper.e(".control-background-image-local-feedback");
+        var para1 = helper.node("p:File size is too big. Max file size of 5MB.|class:small muted");
+        var para2 = helper.node("p:" + name);
+        controlBackgroundImageLocalFeedback.appendChild(para1);
+        controlBackgroundImageLocalFeedback.appendChild(para2);
+        bind.feedback.animation.set("is-shake");
+      }
+    }
+  };
+
+  var importData = function() {
+    // get files from input
+    var fileList = helper.e(".control-background-image-local").files;
+    // if file was added
+    if (fileList.length > 0) {
+      // validate the file
+      _validateImageFile(fileList);
+    };
+  };
+
+  var _validateImageFile = function(fileList) {
+    // make new file reader
+    var reader = new FileReader();
+    // define the on load event for the reader
+    reader.onload = function(event) {
+      if (fileList.item(0).size <= 5000000) {
+        if (fileList.item(0).type.split("/")[0] == "image") {
+          helper.setObject({
+            object: state.get(),
+            path: "background.image.file.name",
+            newValue: fileList[0].name
+          });
+          helper.setObject({
+            object: state.get(),
+            path: "background.image.file.data",
+            newValue: event.target.result
+          });
+          data.save();;
+          render.feedback.clear();
+          render.feedback.success(render.image);
+          render.input.clear();
+        } else {
+          render.feedback.clear();
+          render.feedback.fail.filetype(fileList[0].name);
+          render.input.clear();
+        };
+      } else {
+        render.feedback.clear();
+        render.feedback.fail.size(fileList[0].name);
+        render.input.clear();
+      };
+    };
+    // invoke the reader
+    reader.readAsDataURL(fileList.item(0));
   };
 
   var init = function() {
-    render();
+    render.image();
+    render.blur();
+    render.grayscale();
+    render.opacity();
+    render.scale();
+    render.accent();
+    render.feedback.init();
   };
 
   // exposed methods
   return {
+    init: init,
+    mod: mod,
+    bind: bind,
     render: render,
-    init: init
+    importData: importData
   };
 
 })();
diff --git a/src/js/clock.js b/src/js/clock.js
index de869c5d..f493fa24 100644
--- a/src/js/clock.js
+++ b/src/js/clock.js
@@ -1,17 +1,12 @@
 var clock = (function() {
 
-  var bind = function() {
-    window.setInterval(function() {
-      clear();
-      render();
-    }, 1000);
-  };
+  var bind = {};
 
-  var clear = function() {
-    var clock = helper.e(".clock");
-    while (clock.lastChild) {
-      clock.removeChild(clock.lastChild);
-    };
+  bind.tick = function() {
+    window.setInterval(function() {
+      render.clear();
+      render.all();
+    }, 1000);
   };
 
   var _makeTimeObject = function() {
@@ -39,8 +34,17 @@ var clock = (function() {
     return time;
   };
 
-  var render = function() {
-    var _clock = function() {
+  var render = {};
+
+  render.clear = function() {
+    var clock = helper.e(".clock");
+    while (clock.lastChild) {
+      clock.removeChild(clock.lastChild);
+    };
+  };
+
+  render.all = function() {
+    if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
       var clock = helper.e(".clock");
       var timeObject = _makeTimeObject();
       var action = {
@@ -144,22 +148,18 @@ var clock = (function() {
         };
       };
     };
-    if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
-      _clock();
-    };
   };
 
   var init = function() {
-    render();
-    bind();
+    bind.tick();
+    render.all();
   };
 
   // exposed methods
   return {
     init: init,
     bind: bind,
-    render: render,
-    clear: clear
+    render: render
   };
 
 })();
diff --git a/src/js/control.js b/src/js/control.js
index db5f281f..b792c067 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -608,8 +608,8 @@ var control = (function() {
     func: function() {
       render();
       dependents();
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -620,8 +620,8 @@ var control = (function() {
     path: "header.clock.hours.display",
     type: "radio",
     func: function() {
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -632,8 +632,8 @@ var control = (function() {
     path: "header.clock.hours.display",
     type: "radio",
     func: function() {
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -646,8 +646,8 @@ var control = (function() {
     func: function() {
       render();
       dependents();
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -658,8 +658,8 @@ var control = (function() {
     path: "header.clock.minutes.display",
     type: "radio",
     func: function() {
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -670,8 +670,8 @@ var control = (function() {
     path: "header.clock.minutes.display",
     type: "radio",
     func: function() {
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -684,8 +684,8 @@ var control = (function() {
     func: function() {
       render();
       dependents();
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -696,8 +696,8 @@ var control = (function() {
     path: "header.clock.seconds.display",
     type: "radio",
     func: function() {
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -708,8 +708,8 @@ var control = (function() {
     path: "header.clock.seconds.display",
     type: "radio",
     func: function() {
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -720,8 +720,8 @@ var control = (function() {
     path: "header.clock.separator.show",
     type: "checkbox",
     func: function() {
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
     }
@@ -731,8 +731,8 @@ var control = (function() {
     type: "checkbox",
     func: function() {
       dependents();
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -744,8 +744,8 @@ var control = (function() {
     type: "checkbox",
     func: function() {
       dependents();
-      clock.clear();
-      clock.render();
+      clock.render.clear();
+      clock.render.all();
       greeting.clear();
       greeting.render();
       transitional.clear();
@@ -2076,15 +2076,46 @@ var control = (function() {
     func: function() {
       render();
       dependents();
-      background.render();
-
+      background.render.image();
+    }
+  }, {
+    element: helper.e(".control-background-image-from-local"),
+    path: "background.image.from",
+    type: "radio",
+    func: function() {
+      dependents();
+      background.render.image();
+    }
+  }, {
+    element: helper.e(".control-background-image-local"),
+    type: "file",
+    func: function() {
+      background.importData();
+    }
+  }, {
+    element: helper.e(".control-background-image-local-clear"),
+    type: "button",
+    func: function() {
+      background.mod.clear.file();
+      background.render.input.clear();
+      background.render.image();
+      background.render.feedback.clear();
+      background.render.feedback.empty();
+    }
+  }, {
+    element: helper.e(".control-background-image-from-url"),
+    path: "background.image.from",
+    type: "radio",
+    func: function() {
+      dependents();
+      background.render.image();
     }
   }, {
     element: helper.e(".control-background-image-url"),
     path: "background.image.url",
     type: "text",
     func: function() {
-      background.render();
+      background.render.image();
     }
   }, {
     element: helper.e(".control-background-image-opacity"),
@@ -2092,7 +2123,7 @@ var control = (function() {
     type: "range",
     valueMod: ["reverse", "float"],
     func: function() {
-      background.render();
+      background.render.opacity();
     }
   }, {
     element: helper.e(".control-background-image-grayscale"),
@@ -2100,14 +2131,14 @@ var control = (function() {
     type: "range",
     valueMod: ["float"],
     func: function() {
-      background.render();
+      background.render.grayscale();
     }
   }, {
     element: helper.e(".control-background-image-blur"),
     path: "background.image.blur",
     type: "range",
     func: function() {
-      background.render();
+      background.render.blur();
     }
   }, {
     element: helper.e(".control-background-image-accent"),
@@ -2115,7 +2146,7 @@ var control = (function() {
     type: "range",
     valueMod: ["float"],
     func: function() {
-      background.render();
+      background.render.accent();
     }
   }, {
     element: helper.e(".control-background-image-scale"),
@@ -2123,7 +2154,7 @@ var control = (function() {
     type: "range",
     valueMod: ["float"],
     func: function() {
-      background.render();
+      background.render.scale();
     }
   }, {
     element: helper.e(".control-data-import"),
@@ -2441,6 +2472,27 @@ var control = (function() {
   };
 
   var dependents = function() {
+    var disable = {
+      input: function(input, disabled) {
+        if (disabled) {
+          helper.e(input).disabled = true;
+        } else {
+          helper.e(input).disabled = false;
+        };
+      },
+      element: function(className, disabled) {
+        var allHelper = helper.eA(className);
+        if (disabled) {
+          allHelper.forEach(function(arrayItem, index) {
+            helper.addClass(arrayItem, "disabled");
+          });
+        } else {
+          allHelper.forEach(function(arrayItem, index) {
+            helper.removeClass(arrayItem, "disabled");
+          });
+        };
+      }
+    };
     var _header = function() {
       var _clock = function() {
         var activeCount = 0;
@@ -2451,51 +2503,51 @@ var control = (function() {
           };
         });
         if (activeCount >= 2 && (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show)) {
-          helper.e(".control-header-clock-separator-show").disabled = false;
+          disable.input(".control-header-clock-separator-show", false);
         } else {
-          helper.e(".control-header-clock-separator-show").disabled = true;
+          disable.input(".control-header-clock-separator-show", true);
         };
         if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
-          helper.e(".control-header-clock-hour24-show").disabled = false;
-          helper.e(".control-header-clock-meridiem-show").disabled = false;
+          disable.input(".control-header-clock-hour24-show", false);
+          disable.input(".control-header-clock-meridiem-show", false);
         } else {
-          helper.e(".control-header-clock-hour24-show").disabled = true;
-          helper.e(".control-header-clock-meridiem-show").disabled = true;
+          disable.input(".control-header-clock-hour24-show", true);
+          disable.input(".control-header-clock-meridiem-show", true);
         };
         if ((state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) && !state.get().header.clock.hour24.show) {
-          helper.e(".control-header-clock-meridiem-show").disabled = false;
+          disable.input(".control-header-clock-meridiem-show", false);
         } else {
-          helper.e(".control-header-clock-meridiem-show").disabled = true;
+          disable.input(".control-header-clock-meridiem-show", true);
         };
         if (state.get().header.clock.hours.show) {
-          helper.e(".control-header-clock-hours-display-number").disabled = false;
-          helper.e(".control-header-clock-hours-display-word").disabled = false;
+          disable.input(".control-header-clock-hours-display-number", false);
+          disable.input(".control-header-clock-hours-display-word", false);
         } else {
-          helper.e(".control-header-clock-hours-display-number").disabled = true;
-          helper.e(".control-header-clock-hours-display-word").disabled = true;
+          disable.input(".control-header-clock-hours-display-number", true);
+          disable.input(".control-header-clock-hours-display-word", true);
         };
         if (state.get().header.clock.minutes.show) {
-          helper.e(".control-header-clock-minutes-display-number").disabled = false;
-          helper.e(".control-header-clock-minutes-display-word").disabled = false;
+          disable.input(".control-header-clock-minutes-display-number", false);
+          disable.input(".control-header-clock-minutes-display-word", false);
         } else {
-          helper.e(".control-header-clock-minutes-display-number").disabled = true;
-          helper.e(".control-header-clock-minutes-display-word").disabled = true;
+          disable.input(".control-header-clock-minutes-display-number", true);
+          disable.input(".control-header-clock-minutes-display-word", true);
         };
         if (state.get().header.clock.seconds.show) {
-          helper.e(".control-header-clock-seconds-display-number").disabled = false;
-          helper.e(".control-header-clock-seconds-display-word").disabled = false;
+          disable.input(".control-header-clock-seconds-display-number", false);
+          disable.input(".control-header-clock-seconds-display-word", false);
         } else {
-          helper.e(".control-header-clock-seconds-display-number").disabled = true;
-          helper.e(".control-header-clock-seconds-display-word").disabled = true;
+          disable.input(".control-header-clock-seconds-display-number", true);
+          disable.input(".control-header-clock-seconds-display-word", true);
         };
         if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
-          helper.e("[for=control-header-clock-size]").removeAttribute("disabled");
-          helper.e(".control-header-clock-size").disabled = false;
-          helper.e(".control-header-clock-size-default").disabled = false;
+          disable.element("[for=control-header-clock-size]", false);
+          disable.input(".control-header-clock-size", false);
+          disable.input(".control-header-clock-size-default", false);
         } else {
-          helper.e("[for=control-header-clock-size]").setAttribute("disabled", "");
-          helper.e(".control-header-clock-size").disabled = true;
-          helper.e(".control-header-clock-size-default").disabled = true;
+          disable.element("[for=control-header-clock-size]", true);
+          disable.input(".control-header-clock-size", true);
+          disable.input(".control-header-clock-size-default", true);
         };
       };
       var _date = function() {
@@ -2507,210 +2559,232 @@ var control = (function() {
           };
         });
         if (activeCount >= 2 && (state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show)) {
-          helper.e(".control-header-date-separator-show").disabled = false;
+          disable.input(".control-header-date-separator-show", false);
         } else {
-          helper.e(".control-header-date-separator-show").disabled = true;
+          disable.input(".control-header-date-separator-show", true);
         };
         if (state.get().header.date.date.show && state.get().header.date.month.show) {
-          helper.e(".control-header-date-format-label").removeAttribute("disabled");
-          helper.e(".control-header-date-format-datemonth").disabled = false;
-          helper.e(".control-header-date-format-monthdate").disabled = false;
+          disable.element(".control-header-date-format-label", false);
+          disable.input(".control-header-date-format-datemonth", false);
+          disable.input(".control-header-date-format-monthdate", false);
         } else {
-          helper.e(".control-header-date-format-label").setAttribute("disabled", "");
-          helper.e(".control-header-date-format-datemonth").disabled = true;
-          helper.e(".control-header-date-format-monthdate").disabled = true;
+          disable.element(".control-header-date-format-label", true);
+          disable.input(".control-header-date-format-datemonth", true);
+          disable.input(".control-header-date-format-monthdate", true);
         };
         if (state.get().header.date.day.show) {
-          helper.e(".control-header-date-day-display-number").disabled = false;
-          helper.e(".control-header-date-day-display-word").disabled = false;
+          disable.input(".control-header-date-day-display-number", false);
+          disable.input(".control-header-date-day-display-word", false);
         } else {
-          helper.e(".control-header-date-day-display-number").disabled = true;
-          helper.e(".control-header-date-day-display-word").disabled = true;
+          disable.input(".control-header-date-day-display-number", true);
+          disable.input(".control-header-date-day-display-word", true);
         };
         if (state.get().header.date.date.show) {
-          helper.e(".control-header-date-date-display-number").disabled = false;
-          helper.e(".control-header-date-date-display-word").disabled = false;
-          helper.e(".control-header-date-date-ordinal").disabled = false;
+          disable.input(".control-header-date-date-display-number", false);
+          disable.input(".control-header-date-date-display-word", false);
+          disable.input(".control-header-date-date-ordinal", false);
+          disable.element(".control-header-date-date-ordinal-helper", false);
         } else {
-          helper.e(".control-header-date-date-display-number").disabled = true;
-          helper.e(".control-header-date-date-display-word").disabled = true;
-          helper.e(".control-header-date-date-ordinal").disabled = true;
+          disable.input(".control-header-date-date-display-number", true);
+          disable.input(".control-header-date-date-display-word", true);
+          disable.input(".control-header-date-date-ordinal", true);
+          disable.element(".control-header-date-date-ordinal-helper", true);
         };
         if (state.get().header.date.month.show) {
-          helper.e(".control-header-date-month-display-number").disabled = false;
-          helper.e(".control-header-date-month-display-word").disabled = false;
+          disable.input(".control-header-date-month-display-number", false);
+          disable.input(".control-header-date-month-display-word", false);
         } else {
-          helper.e(".control-header-date-month-display-number").disabled = true;
-          helper.e(".control-header-date-month-display-word").disabled = true;
+          disable.input(".control-header-date-month-display-number", true);
+          disable.input(".control-header-date-month-display-word", true);
         };
         if (state.get().header.date.year.show) {
-          helper.e(".control-header-date-year-display-number").disabled = false;
-          helper.e(".control-header-date-year-display-word").disabled = false;
+          disable.input(".control-header-date-year-display-number", false);
+          disable.input(".control-header-date-year-display-word", false);
         } else {
-          helper.e(".control-header-date-year-display-number").disabled = true;
-          helper.e(".control-header-date-year-display-word").disabled = true;
+          disable.input(".control-header-date-year-display-number", true);
+          disable.input(".control-header-date-year-display-word", true);
         };
         if (state.get().header.date.day.show && state.get().header.date.day.display == "number") {
-          helper.e(".control-header-date-day-week-start-label").removeAttribute("disabled");
-          helper.e(".control-header-date-day-week-start-monday").disabled = false;
-          helper.e(".control-header-date-day-week-start-sunday").disabled = false;
+          disable.element(".control-header-date-day-week-start-label", false);
+          disable.input(".control-header-date-day-week-start-monday", false);
+          disable.input(".control-header-date-day-week-start-sunday", false);
+          disable.element(".control-header-date-day-week-start-helper", false);
         } else {
-          helper.e(".control-header-date-day-week-start-label").setAttribute("disabled", "");
-          helper.e(".control-header-date-day-week-start-monday").disabled = true;
-          helper.e(".control-header-date-day-week-start-sunday").disabled = true;
+          disable.element(".control-header-date-day-week-start-label", true);
+          disable.input(".control-header-date-day-week-start-monday", true);
+          disable.input(".control-header-date-day-week-start-sunday", true);
+          disable.element(".control-header-date-day-week-start-helper", true);
         };
         if (state.get().header.date.day.show && state.get().header.date.day.display == "word") {
-          helper.e(".control-header-date-day-length-label").removeAttribute("disabled");
-          helper.e(".control-header-date-day-length-long").disabled = false;
-          helper.e(".control-header-date-day-length-short").disabled = false;
+          disable.element(".control-header-date-day-length-label", false);
+          disable.input(".control-header-date-day-length-long", false);
+          disable.input(".control-header-date-day-length-short", false);
         } else {
-          helper.e(".control-header-date-day-length-label").setAttribute("disabled", "");
-          helper.e(".control-header-date-day-length-long").disabled = true;
-          helper.e(".control-header-date-day-length-short").disabled = true;
+          disable.element(".control-header-date-day-length-label", true);
+          disable.input(".control-header-date-day-length-long", true);
+          disable.input(".control-header-date-day-length-short", true);
         };
         if (state.get().header.date.month.show && state.get().header.date.month.display == "word") {
-          helper.e(".control-header-date-month-length-label").removeAttribute("disabled");
-          helper.e(".control-header-date-month-length-long").disabled = false;
-          helper.e(".control-header-date-month-length-short").disabled = false;
+          disable.element(".control-header-date-month-length-label", false);
+          disable.input(".control-header-date-month-length-long", false);
+          disable.input(".control-header-date-month-length-short", false);
         } else {
-          helper.e(".control-header-date-month-length-label").setAttribute("disabled", "");
-          helper.e(".control-header-date-month-length-long").disabled = true;
-          helper.e(".control-header-date-month-length-short").disabled = true;
+          disable.element(".control-header-date-month-length-label", true);
+          disable.input(".control-header-date-month-length-long", true);
+          disable.input(".control-header-date-month-length-short", true);
         };
         if (state.get().header.date.month.show && state.get().header.date.month.display == "number") {
-          helper.e(".control-header-date-month-ordinal").disabled = false;
+          disable.input(".control-header-date-month-ordinal", false);
+          disable.element(".control-header-date-month-ordinal-helper", false);
         } else {
-          helper.e(".control-header-date-month-ordinal").disabled = true;
+          disable.input(".control-header-date-month-ordinal", true);
+          disable.element(".control-header-date-month-ordinal-helper", true);
         };
         if (state.get().header.date.day.show || state.get().header.date.date.show || state.get().header.date.month.show || state.get().header.date.year.show) {
-          helper.e("[for=control-header-date-size]").removeAttribute("disabled");
-          helper.e(".control-header-date-size").disabled = false;
-          helper.e(".control-header-date-size-default").disabled = false;
+          disable.element("[for=control-header-date-size]", false);
+          disable.input(".control-header-date-size", false);
+          disable.input(".control-header-date-size-default", false);
         } else {
-          helper.e("[for=control-header-date-size]").setAttribute("disabled", "");
-          helper.e(".control-header-date-size").disabled = true;
-          helper.e(".control-header-date-size-default").disabled = true;
+          disable.element("[for=control-header-date-size]", true);
+          disable.input(".control-header-date-size", true);
+          disable.input(".control-header-date-size-default", true);
         };
       };
       var _shade = function() {
         if (state.get().header.shade.show) {
-          helper.e(".control-header-shade-style-always").disabled = false;
-          helper.e(".control-header-shade-style-scroll").disabled = false;
-          helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
-          helper.e(".control-header-shade-opacity").disabled = false;
-          helper.e(".control-header-radius").disabled = false;
+          disable.input(".control-header-shade-style-always", false);
+          disable.element(".control-header-shade-style-always-helper", false);
+          disable.input(".control-header-shade-style-scroll", false);
+          disable.element(".control-header-shade-style-scroll-helper", false);
+          disable.element("[for=control-header-shade-opacity]", false);
+          disable.input(".control-header-shade-opacity", false);
+          disable.input(".control-header-radius", false);
         } else {
-          helper.e(".control-header-shade-style-always").disabled = true;
-          helper.e(".control-header-shade-style-scroll").disabled = true;
-          helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
-          helper.e(".control-header-shade-opacity").disabled = true;
-          helper.e(".control-header-radius").disabled = true;
+          disable.input(".control-header-shade-style-always", true);
+          disable.element(".control-header-shade-style-always-helper", true);
+          disable.input(".control-header-shade-style-scroll", true);
+          disable.element(".control-header-shade-style-scroll-helper", true);
+          disable.element("[for=control-header-shade-opacity]", true);
+          disable.input(".control-header-shade-opacity", true);
+          disable.input(".control-header-radius", true);
         };
       };
       var _search = function() {
         if (state.get().header.search.show) {
-          helper.e(".control-header-search-style-label").removeAttribute("disabled");
-          helper.e(".control-header-search-style-auto").disabled = false;
-          helper.e(".control-header-search-style-custom").disabled = false;
-          helper.e("[for=control-header-search-width]").removeAttribute("disabled");
-          helper.e(".control-header-search-width").disabled = false;
-          helper.e(".control-header-search-focus").disabled = false;
-          helper.e(".control-header-search-engine-label").removeAttribute("disabled");
-          helper.e(".control-header-search-engine-google").disabled = false;
-          helper.e(".control-header-search-engine-duckduckgo").disabled = false;
-          helper.e(".control-header-search-engine-youtube").disabled = false;
-          helper.e(".control-header-search-engine-giphy").disabled = false;
-          helper.e(".control-header-search-engine-bing").disabled = false;
-          helper.e(".control-header-search-engine-custom").disabled = false;
-          helper.e(".control-header-search-text-alignment-grid").removeAttribute("disabled");
-          helper.e(".control-header-search-text-alignment-label").removeAttribute("disabled");
-          helper.e(".control-header-search-text-alignment-left").disabled = false;
-          helper.e(".control-header-search-text-alignment-center").disabled = false;
-          helper.e(".control-header-search-text-alignment-right").disabled = false;
-          helper.e("[for=control-header-search-size]").removeAttribute("disabled");
-          helper.e(".control-header-search-size").disabled = false;
-          helper.e(".control-header-search-size-default").disabled = false;
+          disable.element(".control-header-search-style-label", false);
+          disable.input(".control-header-search-style-auto", false);
+          disable.element(".control-header-search-style-auto-helper", false);
+          disable.input(".control-header-search-style-custom", false);
+          disable.element(".control-header-search-style-custom-helper", false);
+          disable.element("[for=control-header-search-width]", false);
+          disable.input(".control-header-search-width", false);
+          disable.input(".control-header-search-focus", false);
+          disable.element(".control-header-search-focus-helper", false);
+          disable.element(".control-header-search-engine-label", false);
+          disable.input(".control-header-search-engine-google", false);
+          disable.input(".control-header-search-engine-duckduckgo", false);
+          disable.input(".control-header-search-engine-youtube", false);
+          disable.input(".control-header-search-engine-giphy", false);
+          disable.input(".control-header-search-engine-bing", false);
+          disable.input(".control-header-search-engine-custom", false);
+          disable.element(".control-header-search-text-alignment-grid", false);
+          disable.element(".control-header-search-text-alignment-label", false);
+          disable.input(".control-header-search-text-alignment-left", false);
+          disable.input(".control-header-search-text-alignment-center", false);
+          disable.input(".control-header-search-text-alignment-right", false);
+          disable.element("[for=control-header-search-size]", false);
+          disable.input(".control-header-search-size", false);
+          disable.input(".control-header-search-size-default", false);
+          disable.element(".control-header-search-size-helper", false);
         } else {
-          helper.e(".control-header-search-style-label").setAttribute("disabled", "");
-          helper.e(".control-header-search-style-auto").disabled = true;
-          helper.e(".control-header-search-style-custom").disabled = true;
-          helper.e("[for=control-header-search-width]").setAttribute("disabled", "");
-          helper.e(".control-header-search-width").disabled = true;
-          helper.e(".control-header-search-focus").disabled = true;
-          helper.e(".control-header-search-engine-label").setAttribute("disabled", "");
-          helper.e(".control-header-search-engine-google").disabled = true;
-          helper.e(".control-header-search-engine-duckduckgo").disabled = true;
-          helper.e(".control-header-search-engine-youtube").disabled = true;
-          helper.e(".control-header-search-engine-giphy").disabled = true;
-          helper.e(".control-header-search-engine-bing").disabled = true;
-          helper.e(".control-header-search-engine-custom").disabled = true;
-          helper.e(".control-header-search-text-alignment-grid").setAttribute("disabled", "");
-          helper.e(".control-header-search-text-alignment-label").setAttribute("disabled", "");
-          helper.e(".control-header-search-text-alignment-left").disabled = true;
-          helper.e(".control-header-search-text-alignment-center").disabled = true;
-          helper.e(".control-header-search-text-alignment-right").disabled = true;
-          helper.e("[for=control-header-search-size]").setAttribute("disabled", "");
-          helper.e(".control-header-search-size").disabled = true;
-          helper.e(".control-header-search-size-default").disabled = true;
+          disable.element(".control-header-search-style-label", true);
+          disable.input(".control-header-search-style-auto", true);
+          disable.element(".control-header-search-style-auto-helper", true);
+          disable.input(".control-header-search-style-custom", true);
+          disable.element(".control-header-search-style-custom-helper", true);
+          disable.element("[for=control-header-search-width]", true);
+          disable.input(".control-header-search-width", true);
+          disable.input(".control-header-search-focus", true);
+          disable.element(".control-header-search-focus-helper", true);
+          disable.element(".control-header-search-engine-label", true);
+          disable.input(".control-header-search-engine-google", true);
+          disable.input(".control-header-search-engine-duckduckgo", true);
+          disable.input(".control-header-search-engine-youtube", true);
+          disable.input(".control-header-search-engine-giphy", true);
+          disable.input(".control-header-search-engine-bing", true);
+          disable.input(".control-header-search-engine-custom", true);
+          disable.element(".control-header-search-text-alignment-grid", true);
+          disable.element(".control-header-search-text-alignment-label", true);
+          disable.input(".control-header-search-text-alignment-left", true);
+          disable.input(".control-header-search-text-alignment-center", true);
+          disable.input(".control-header-search-text-alignment-right", true);
+          disable.element("[for=control-header-search-size]", true);
+          disable.input(".control-header-search-size", true);
+          disable.input(".control-header-search-size-default", true);
+          disable.element(".control-header-search-size-helper", true);
         };
         if (state.get().header.search.show && state.get().header.search.engine.selected === "custom") {
-          helper.e("[for=control-header-search-engine-custom-name]").removeAttribute("disabled");
-          helper.e(".control-header-search-engine-custom-name").disabled = false;
-          helper.e("[for=control-header-search-engine-custom-url]").removeAttribute("disabled");
-          helper.e(".control-header-search-engine-custom-url").disabled = false;
+          disable.element("[for=control-header-search-engine-custom-name]", false);
+          disable.input(".control-header-search-engine-custom-name", false);
+          disable.element("[for=control-header-search-engine-custom-url]", false);
+          disable.input(".control-header-search-engine-custom-url", false);
+          disable.element(".control-header-search-engine-custom-helper", false);
         } else {
-          helper.e("[for=control-header-search-engine-custom-name]").setAttribute("disabled", "");
-          helper.e(".control-header-search-engine-custom-name").disabled = true;
-          helper.e("[for=control-header-search-engine-custom-url]").setAttribute("disabled", "");
-          helper.e(".control-header-search-engine-custom-url").disabled = true;
+          disable.element("[for=control-header-search-engine-custom-name]", true);
+          disable.input(".control-header-search-engine-custom-name", true);
+          disable.element("[for=control-header-search-engine-custom-url]", true);
+          disable.input(".control-header-search-engine-custom-url", true);
+          disable.element(".control-header-search-engine-custom-helper", true);
         };
         if (state.get().header.search.show && state.get().header.search.style === "custom") {
-          helper.e("[for=control-header-search-width]").removeAttribute("disabled");
-          helper.e(".control-header-search-width").disabled = false;
+          disable.element("[for=control-header-search-width]", false);
+          disable.input(".control-header-search-width", false);
         } else {
-          helper.e("[for=control-header-search-width]").setAttribute("disabled", "");
-          helper.e(".control-header-search-width").disabled = true;
+          disable.element("[for=control-header-search-width]", true);
+          disable.input(".control-header-search-width", true);
         };
       };
       var _greeting = function() {
         if (state.get().header.greeting.show) {
-          helper.e("[for=control-header-greeting-name]").removeAttribute("disabled");
-          helper.e(".control-header-greeting-name").disabled = false;
-          helper.e(".control-header-greeting-type-good").disabled = false;
-          helper.e(".control-header-greeting-type-hello").disabled = false;
-          helper.e(".control-header-greeting-type-hi").disabled = false;
-          helper.e("[for=control-header-greeting-size]").removeAttribute("disabled");
-          helper.e(".control-header-greeting-size").disabled = false;
-          helper.e(".control-header-greeting-size-default").disabled = false;
+          disable.element("[for=control-header-greeting-name]", false);
+          disable.input(".control-header-greeting-name", false);
+          disable.input(".control-header-greeting-type-good", false);
+          disable.input(".control-header-greeting-type-hello", false);
+          disable.input(".control-header-greeting-type-hi", false);
+          disable.element("[for=control-header-greeting-size]", false);
+          disable.input(".control-header-greeting-size", false);
+          disable.input(".control-header-greeting-size-default", false);
         } else {
-          helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
-          helper.e(".control-header-greeting-name").disabled = true;
-          helper.e(".control-header-greeting-type-good").disabled = true;
-          helper.e(".control-header-greeting-type-hello").disabled = true;
-          helper.e(".control-header-greeting-type-hi").disabled = true;
-          helper.e("[for=control-header-greeting-size]").setAttribute("disabled", "");
-          helper.e(".control-header-greeting-size").disabled = true;
-          helper.e(".control-header-greeting-size-default").disabled = true;
+          disable.element("[for=control-header-greeting-name]", true);
+          disable.input(".control-header-greeting-name", true);
+          disable.input(".control-header-greeting-type-good", true);
+          disable.input(".control-header-greeting-type-hello", true);
+          disable.input(".control-header-greeting-type-hi", true);
+          disable.element("[for=control-header-greeting-size]", true);
+          disable.input(".control-header-greeting-size", true);
+          disable.input(".control-header-greeting-size-default", true);
         };
       };
       var _transitional = function() {
         if (state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
-          helper.e(".control-header-transitional-show").disabled = false;
+          disable.input(".control-header-transitional-show", false);
+          disable.element(".control-header-transitional-show-helper", false);
         } else {
-          helper.e(".control-header-transitional-show").disabled = true;
+          disable.input(".control-header-transitional-show", true);
+          disable.element(".control-header-transitional-show-helper", true);
         };
         if (state.get().header.transitional.show && ((state.get().header.date.date.show || state.get().header.date.day.show || state.get().header.date.month.show || state.get().header.date.year.show || state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show))) {
-          helper.e(".control-header-transitional-type-timeanddate").disabled = false;
-          helper.e(".control-header-transitional-type-its").disabled = false;
-          helper.e("[for=control-header-transitional-size]").removeAttribute("disabled");
-          helper.e(".control-header-transitional-size").disabled = false;
-          helper.e(".control-header-transitional-size-default").disabled = false;
+          disable.input(".control-header-transitional-type-timeanddate", false);
+          disable.input(".control-header-transitional-type-its", false);
+          disable.element("[for=control-header-transitional-size]", false);
+          disable.input(".control-header-transitional-size", false);
+          disable.input(".control-header-transitional-size-default", false);
         } else {
-          helper.e(".control-header-transitional-type-timeanddate").disabled = true;
-          helper.e(".control-header-transitional-type-its").disabled = true;
-          helper.e("[for=control-header-transitional-size]").setAttribute("disabled", "");
-          helper.e(".control-header-transitional-size").disabled = true;
-          helper.e(".control-header-transitional-size-default").disabled = true;
+          disable.input(".control-header-transitional-type-timeanddate", true);
+          disable.input(".control-header-transitional-type-its", true);
+          disable.element("[for=control-header-transitional-size]", true);
+          disable.input(".control-header-transitional-size", true);
+          disable.input(".control-header-transitional-size-default", true);
         };
       };
       _clock();
@@ -2722,164 +2796,194 @@ var control = (function() {
     };
     var _edit = function() {
       if (bookmarks.get().length > 0) {
-        helper.e(".control-link-edit").disabled = false;
+        disable.input(".control-link-edit", false);
       } else {
-        helper.e(".control-link-edit").disabled = true;
-        helper.e(".control-link-edit").checked = false;
+        disable.input(".control-link-edit", true);
+        disable.input(".control-link-edit", false);
       };
     };
     var _link = function() {
-      helper.e(".control-layout-order-headerlink").disabled = true;
-      helper.e(".control-layout-order-linkheader").disabled = true;
-      helper.e("[for=control-link-area-width]").setAttribute("disabled", "");
-      helper.e(".control-link-area-width").disabled = true;
-      helper.e(".control-link-area-width-match").disabled = true;
-      helper.e(".control-link-area-alignment-grid").setAttribute("disabled", "");
-      helper.e(".control-link-area-alignment-label").setAttribute("disabled", "");
-      helper.e(".control-link-area-alignment-left").disabled = true;
-      helper.e(".control-link-area-alignment-center").disabled = true;
-      helper.e(".control-link-area-alignment-right").disabled = true;
-      helper.e("[for=control-link-item-size]").setAttribute("disabled", "");
-      helper.e(".control-link-item-size").disabled = true;
-      helper.e(".control-link-item-size-default").disabled = true;
-      helper.e(".control-link-item-display-show").disabled = true;
-      helper.e("[for=control-link-item-display-letter-size]").setAttribute("disabled", "");
-      helper.e(".control-link-item-display-letter-size").disabled = true;
-      helper.e(".control-link-item-display-letter-size-default").disabled = true;
-      helper.e("[for=control-link-item-display-icon-size]").setAttribute("disabled", "");
-      helper.e(".control-link-item-display-icon-size").disabled = true;
-      helper.e(".control-link-item-display-icon-size-default").disabled = true;
-      helper.e(".control-link-item-name-show").disabled = true;
-      helper.e("[for=control-link-item-name-size]").setAttribute("disabled", "");
-      helper.e(".control-link-item-name-size").disabled = true;
-      helper.e(".control-link-item-name-size-default").disabled = true;
-      helper.e(".control-link-item-order-displayname").disabled = true;
-      helper.e(".control-link-item-order-namedisplay").disabled = true;
-      helper.e(".control-link-item-url-show").disabled = true;
-      helper.e(".control-link-item-line-show").disabled = true;
-      helper.e(".control-link-item-hoverscale").disabled = true;
-      helper.e(".control-link-item-display-alignment-grid").setAttribute("disabled", "");
-      helper.e(".control-link-item-display-alignment-label").setAttribute("disabled", "");
-      helper.e(".control-link-item-display-alignment-topleft").disabled = true;
-      helper.e(".control-link-item-display-alignment-topcenter").disabled = true;
-      helper.e(".control-link-item-display-alignment-topright").disabled = true;
-      helper.e(".control-link-item-display-alignment-centerleft").disabled = true;
-      helper.e(".control-link-item-display-alignment-centercenter").disabled = true;
-      helper.e(".control-link-item-display-alignment-centerright").disabled = true;
-      helper.e(".control-link-item-display-alignment-bottomleft").disabled = true;
-      helper.e(".control-link-item-display-alignment-bottomcenter").disabled = true;
-      helper.e(".control-link-item-display-alignment-bottomright").disabled = true;
-      helper.e(".control-link-newtab").disabled = true;
-      helper.e(".control-link-style-block").disabled = true;
-      helper.e(".control-link-style-list").disabled = true;
-      helper.e(".control-link-sort-name").disabled = true;
-      helper.e(".control-link-sort-letter").disabled = true;
-      helper.e(".control-link-sort-icon").disabled = true;
-      helper.e(".control-link-accent-clear").disabled = true;
-      helper.e(".control-link-accent-set").disabled = true;
+      disable.input(".control-layout-order-headerlink", true);
+      disable.input(".control-layout-order-linkheader", true);
+      disable.element(".control-layout-order-helper", true);
+      disable.element("[for=control-link-area-width]", true);
+      disable.input(".control-link-area-width", true);
+      disable.input(".control-link-area-width-match", true);
+      disable.element(".control-link-area-width-helper", true);
+      disable.element(".control-link-area-alignment-grid", true);
+      disable.element(".control-link-area-alignment-label", true);
+      disable.input(".control-link-area-alignment-left", true);
+      disable.input(".control-link-area-alignment-center", true);
+      disable.input(".control-link-area-alignment-right", true);
+      disable.element(".control-link-area-alignment-helper", true);
+      disable.element("[for=control-link-item-size]", true);
+      disable.input(".control-link-item-size", true);
+      disable.input(".control-link-item-size-default", true);
+      disable.input(".control-link-item-display-show", true);
+      disable.element("[for=control-link-item-display-letter-size]", true);
+      disable.input(".control-link-item-display-letter-size", true);
+      disable.input(".control-link-item-display-letter-size-default", true);
+      disable.element("[for=control-link-item-display-icon-size]", true);
+      disable.input(".control-link-item-display-icon-size", true);
+      disable.input(".control-link-item-display-icon-size-default", true);
+      disable.input(".control-link-item-name-show", true);
+      disable.element("[for=control-link-item-name-size]", true);
+      disable.input(".control-link-item-name-size", true);
+      disable.input(".control-link-item-name-size-default", true);
+      disable.input(".control-link-item-order-displayname", true);
+      disable.input(".control-link-item-order-namedisplay", true);
+      disable.element(".control-link-item-order-namedisplay-helper", true);
+      disable.input(".control-link-item-url-show", true);
+      disable.input(".control-link-item-line-show", true);
+      disable.input(".control-link-item-hoverscale", true);
+      disable.element(".control-link-item-display-alignment-grid", true);
+      disable.element(".control-link-item-display-alignment-label", true);
+      disable.input(".control-link-item-display-alignment-topleft", true);
+      disable.input(".control-link-item-display-alignment-topcenter", true);
+      disable.input(".control-link-item-display-alignment-topright", true);
+      disable.input(".control-link-item-display-alignment-centerleft", true);
+      disable.input(".control-link-item-display-alignment-centercenter", true);
+      disable.input(".control-link-item-display-alignment-centerright", true);
+      disable.input(".control-link-item-display-alignment-bottomleft", true);
+      disable.input(".control-link-item-display-alignment-bottomcenter", true);
+      disable.input(".control-link-item-display-alignment-bottomright", true);
+      disable.input(".control-link-newtab", true);
+      disable.input(".control-link-style-block", true);
+      disable.element(".control-link-style-block-helper", true);
+      disable.input(".control-link-style-list", true);
+      disable.element(".control-link-style-list-helper", true);
+      disable.input(".control-link-sort-name", true);
+      disable.input(".control-link-sort-letter", true);
+      disable.input(".control-link-sort-icon", true);
+      disable.input(".control-link-accent-clear", true);
+      disable.input(".control-link-accent-set", true);
       if (state.get().link.show) {
-        helper.e(".control-layout-order-headerlink").disabled = false;
-        helper.e(".control-layout-order-linkheader").disabled = false;
-        helper.e("[for=control-link-area-width]").removeAttribute("disabled");
-        helper.e(".control-link-area-width").disabled = false;
-        helper.e(".control-link-area-width-match").disabled = false;
-        helper.e(".control-link-area-alignment-grid").removeAttribute("disabled");
-        helper.e(".control-link-area-alignment-label").removeAttribute("disabled");
-        helper.e(".control-link-area-alignment-left").disabled = false;
-        helper.e(".control-link-area-alignment-center").disabled = false;
-        helper.e(".control-link-area-alignment-right").disabled = false;
-        helper.e("[for=control-link-item-size]").removeAttribute("disabled");
-        helper.e(".control-link-item-size").disabled = false;
-        helper.e(".control-link-item-size-default").disabled = false;
-        helper.e(".control-link-item-display-show").disabled = false;
-        helper.e(".control-link-item-name-show").disabled = false;
-        helper.e(".control-link-item-url-show").disabled = false;
-        helper.e(".control-link-item-line-show").disabled = false;
-        helper.e(".control-link-item-hoverscale").disabled = false;
-        helper.e(".control-link-newtab").disabled = false;
-        helper.e(".control-link-style-block").disabled = false;
-        helper.e(".control-link-style-list").disabled = false;
-        helper.e(".control-link-sort-name").disabled = false;
-        helper.e(".control-link-sort-letter").disabled = false;
-        helper.e(".control-link-sort-icon").disabled = false;
-        helper.e(".control-link-accent-clear").disabled = false;
-        helper.e(".control-link-accent-set").disabled = false;
+        disable.input(".control-layout-order-headerlink", false);
+        disable.input(".control-layout-order-linkheader", false);
+        disable.element(".control-layout-order-helper", false);
+        disable.element("[for=control-link-area-width]", false);
+        disable.input(".control-link-area-width", false);
+        disable.input(".control-link-area-width-match", false);
+        disable.element(".control-link-area-width-helper", false);
+        disable.element(".control-link-area-alignment-grid", false);
+        disable.element(".control-link-area-alignment-label", false);
+        disable.input(".control-link-area-alignment-left", false);
+        disable.input(".control-link-area-alignment-center", false);
+        disable.input(".control-link-area-alignment-right", false);
+        disable.element(".control-link-area-alignment-helper", false);
+        disable.element("[for=control-link-item-size]", false);
+        disable.input(".control-link-item-size", false);
+        disable.input(".control-link-item-size-default", false);
+        disable.input(".control-link-item-display-show", false);
+        disable.input(".control-link-item-name-show", false);
+        disable.input(".control-link-item-url-show", false);
+        disable.input(".control-link-item-line-show", false);
+        disable.input(".control-link-item-hoverscale", false);
+        disable.input(".control-link-newtab", false);
+        disable.input(".control-link-style-block", false);
+        disable.element(".control-link-style-block-helper", false);
+        disable.input(".control-link-style-list", false);
+        disable.element(".control-link-style-list-helper", false);
+        disable.input(".control-link-sort-name", false);
+        disable.input(".control-link-sort-letter", false);
+        disable.input(".control-link-sort-icon", false);
+        disable.input(".control-link-accent-clear", false);
+        disable.input(".control-link-accent-set", false);
         if (state.get().link.item.display.show) {
-          helper.e("[for=control-link-item-display-letter-size]").removeAttribute("disabled");
-          helper.e(".control-link-item-display-letter-size").disabled = false;
-          helper.e(".control-link-item-display-letter-size-default").disabled = false;
-          helper.e("[for=control-link-item-display-icon-size]").removeAttribute("disabled");
-          helper.e(".control-link-item-display-icon-size").disabled = false;
-          helper.e(".control-link-item-display-icon-size-default").disabled = false;
+          disable.element("[for=control-link-item-display-letter-size]", false);
+          disable.input(".control-link-item-display-letter-size", false);
+          disable.input(".control-link-item-display-letter-size-default", false);
+          disable.element("[for=control-link-item-display-icon-size]", false);
+          disable.input(".control-link-item-display-icon-size", false);
+          disable.input(".control-link-item-display-icon-size-default", false);
         };
         if (state.get().link.item.name.show) {
-          helper.e("[for=control-link-item-name-size]").removeAttribute("disabled");
-          helper.e(".control-link-item-name-size").disabled = false;
-          helper.e(".control-link-item-name-size-default").disabled = false;
+          disable.element("[for=control-link-item-name-size]", false);
+          disable.input(".control-link-item-name-size", false);
+          disable.input(".control-link-item-name-size-default", false);
         };
         if (state.get().link.item.display.show || state.get().link.item.name.show) {
-          helper.e(".control-link-item-display-alignment-grid").removeAttribute("disabled");
-          helper.e(".control-link-item-display-alignment-label").removeAttribute("disabled");
-          helper.e(".control-link-item-display-alignment-topleft").disabled = false;
-          helper.e(".control-link-item-display-alignment-topcenter").disabled = false;
-          helper.e(".control-link-item-display-alignment-topright").disabled = false;
-          helper.e(".control-link-item-display-alignment-centerleft").disabled = false;
-          helper.e(".control-link-item-display-alignment-centercenter").disabled = false;
-          helper.e(".control-link-item-display-alignment-centerright").disabled = false;
-          helper.e(".control-link-item-display-alignment-bottomleft").disabled = false;
-          helper.e(".control-link-item-display-alignment-bottomcenter").disabled = false;
-          helper.e(".control-link-item-display-alignment-bottomright").disabled = false;
+          disable.element(".control-link-item-display-alignment-grid", false);
+          disable.element(".control-link-item-display-alignment-label", false);
+          disable.input(".control-link-item-display-alignment-topleft", false);
+          disable.input(".control-link-item-display-alignment-topcenter", false);
+          disable.input(".control-link-item-display-alignment-topright", false);
+          disable.input(".control-link-item-display-alignment-centerleft", false);
+          disable.input(".control-link-item-display-alignment-centercenter", false);
+          disable.input(".control-link-item-display-alignment-centerright", false);
+          disable.input(".control-link-item-display-alignment-bottomleft", false);
+          disable.input(".control-link-item-display-alignment-bottomcenter", false);
+          disable.input(".control-link-item-display-alignment-bottomright", false);
         };
         if (state.get().link.item.display.show && state.get().link.item.name.show) {
-          helper.e(".control-link-item-order-displayname").disabled = false;
-          helper.e(".control-link-item-order-namedisplay").disabled = false;
+          disable.input(".control-link-item-order-displayname", false);
+          disable.input(".control-link-item-order-namedisplay", false);
+          disable.element(".control-link-item-order-namedisplay-helper", false);
         };
       };
     };
     var _theme = function() {
       if (state.get().theme.accent.random.active) {
-        helper.e(".control-theme-accent-random-style-any").disabled = false;
-        helper.e(".control-theme-accent-random-style-light").disabled = false;
-        helper.e(".control-theme-accent-random-style-dark").disabled = false;
-        helper.e(".control-theme-accent-random-style-pastel").disabled = false;
-        helper.e(".control-theme-accent-random-style-saturated").disabled = false;
-        helper.e(".control-theme-accent-randomise").disabled = false;
+        disable.input(".control-theme-accent-random-style-any", false);
+        disable.input(".control-theme-accent-random-style-light", false);
+        disable.input(".control-theme-accent-random-style-dark", false);
+        disable.input(".control-theme-accent-random-style-pastel", false);
+        disable.input(".control-theme-accent-random-style-saturated", false);
+        disable.input(".control-theme-accent-randomise", false);
       } else {
-        helper.e(".control-theme-accent-random-style-any").disabled = true;
-        helper.e(".control-theme-accent-random-style-light").disabled = true;
-        helper.e(".control-theme-accent-random-style-dark").disabled = true;
-        helper.e(".control-theme-accent-random-style-pastel").disabled = true;
-        helper.e(".control-theme-accent-random-style-saturated").disabled = true;
-        helper.e(".control-theme-accent-randomise").disabled = true;
+        disable.input(".control-theme-accent-random-style-any", true);
+        disable.input(".control-theme-accent-random-style-light", true);
+        disable.input(".control-theme-accent-random-style-dark", true);
+        disable.input(".control-theme-accent-random-style-pastel", true);
+        disable.input(".control-theme-accent-random-style-saturated", true);
+        disable.input(".control-theme-accent-randomise", true);
       };
     };
     var _background = function() {
       if (state.get().background.image.show) {
-        helper.e("[for=control-background-image-url]").removeAttribute("disabled");
-        helper.e(".control-background-image-url").disabled = false;
-        helper.e("[for=control-background-image-opacity]").removeAttribute("disabled");
-        helper.e(".control-background-image-opacity").disabled = false;
-        helper.e("[for=control-background-image-blur]").removeAttribute("disabled");
-        helper.e(".control-background-image-blur").disabled = false;
-        helper.e("[for=control-background-image-grayscale]").removeAttribute("disabled");
-        helper.e(".control-background-image-grayscale").disabled = false;
-        helper.e("[for=control-background-image-accent]").removeAttribute("disabled");
-        helper.e(".control-background-image-accent").disabled = false;
-        helper.e("[for=control-background-image-scale]").removeAttribute("disabled");
-        helper.e(".control-background-image-scale").disabled = false;
+        disable.input(".control-background-image-from-local", false);
+        disable.input(".control-background-image-from-url", false);
+        disable.element("[for=control-background-image-opacity]", false);
+        disable.input(".control-background-image-opacity", false);
+        disable.element("[for=control-background-image-blur]", false);
+        disable.input(".control-background-image-blur", false);
+        disable.element("[for=control-background-image-grayscale]", false);
+        disable.input(".control-background-image-grayscale", false);
+        disable.element("[for=control-background-image-accent]", false);
+        disable.input(".control-background-image-accent", false);
+        disable.element("[for=control-background-image-scale]", false);
+        disable.input(".control-background-image-scale", false);
       } else {
-        helper.e("[for=control-background-image-url]").setAttribute("disabled", "");
-        helper.e(".control-background-image-url").disabled = true;
-        helper.e("[for=control-background-image-opacity]").setAttribute("disabled", "");
-        helper.e(".control-background-image-opacity").disabled = true;
-        helper.e("[for=control-background-image-blur]").setAttribute("disabled", "");
-        helper.e(".control-background-image-blur").disabled = true;
-        helper.e("[for=control-background-image-grayscale]").setAttribute("disabled", "");
-        helper.e(".control-background-image-grayscale").disabled = true;
-        helper.e("[for=control-background-image-accent]").setAttribute("disabled", "");
-        helper.e(".control-background-image-accent").disabled = true;
-        helper.e("[for=control-background-image-scale]").setAttribute("disabled", "");
-        helper.e(".control-background-image-scale").disabled = true;
+        disable.input(".control-background-image-from-local", true);
+        disable.input(".control-background-image-from-url", true);
+        disable.element("[for=control-background-image-opacity]", true);
+        disable.input(".control-background-image-opacity", true);
+        disable.element("[for=control-background-image-blur]", true);
+        disable.input(".control-background-image-blur", true);
+        disable.element("[for=control-background-image-grayscale]", true);
+        disable.input(".control-background-image-grayscale", true);
+        disable.element("[for=control-background-image-accent]", true);
+        disable.input(".control-background-image-accent", true);
+        disable.element("[for=control-background-image-scale]", true);
+        disable.input(".control-background-image-scale", true);
+      };
+      if (state.get().background.image.show && state.get().background.image.from == "local") {
+        disable.element(".control-background-image-local-feedback", false);
+        disable.input(".control-background-image-local", false);
+        disable.input(".control-background-image-local-clear", false);
+        disable.element(".control-background-image-local-helper", false);
+      } else {
+        disable.element(".control-background-image-local-feedback", true);
+        disable.input(".control-background-image-local", true);
+        disable.input(".control-background-image-local-clear", true);
+        disable.element(".control-background-image-local-helper", true);
+      };
+      if (state.get().background.image.show && state.get().background.image.from == "url") {
+        disable.input(".control-background-image-url", false);
+        disable.element(".control-background-image-url-helper", false);
+      } else {
+        disable.input(".control-background-image-url", true);
+        disable.element(".control-background-image-url-helper", true);
       };
     };
     _header();
diff --git a/src/js/header.js b/src/js/header.js
index 0dbfa4db..c03da44a 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -1,9 +1,14 @@
 var header = (function() {
 
-  var _bind = function() {
+  var bind = {};
+
+  bind.resize = function() {
     window.addEventListener("resize", function() {
       render.shade();
     }, false);
+  };
+
+  bind.scroll = function() {
     window.addEventListener("scroll", function() {
       render.shade();
     }, false);
@@ -12,70 +17,24 @@ var header = (function() {
         render.shade();
       }, false);
     });
+  };
+
+  bind.fonts = function() {
     document.fonts.ready.then(function() {
       render.shade();
     });
   };
 
-  var render = {
-    area: {
-      width: function() {
-        _renderWidth();
-      }
-    },
-    shade: function() {
-      _renderShade();
-    },
-    opacity: function() {
-      _renderOpacity();
-    },
-    border: function() {
-      _renderBorder();
-    },
-    search: {
-      width: function() {
-        _renderSearchWidth();
-      },
-      size: function() {
-        _renderSearchSize();
-      }
-    },
-    greeting: {
-      size: function() {
-        _renderGreetingSize();
-      }
-    },
-    transitional: {
-      size: function() {
-        _renderTransitionalSize();
-      }
-    },
-    clock: {
-      size: function() {
-        _renderClockSize();
-      }
-    },
-    date: {
-      size: function() {
-        _renderDateSize();
-      }
-    },
-    button: {
-      size: function() {
-        _renderButtonSize();
-      },
-      style: function() {
-        _renderButtonStyle();
-      }
+  var render = {};
+
+  render.area = {
+    width: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-area-width", state.get().header.area.width + "%");
     }
   };
 
-  var _renderWidth = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-area-width", state.get().header.area.width + "%");
-  };
-
-  var _renderShade = function() {
+  render.shade = function() {
     var html = helper.e("html");
     var headerRect = helper.e(".header").getBoundingClientRect();
     var layoutRect = helper.e(".layout").getBoundingClientRect();
@@ -115,74 +74,86 @@ var header = (function() {
     };
   };
 
-  var _renderOpacity = function() {
+  render.opacity = function() {
     var html = helper.e("html");
     if (state.get().header.shade.show) {
       html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
     };
   };
 
-  var _renderBorder = function() {
+  render.border = function() {
     var html = helper.e("html");
     html.style.setProperty("--header-border-top", state.get().header.border.top);
     html.style.setProperty("--header-border-bottom", state.get().header.border.bottom);
   };
 
-  var _renderSearchWidth = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-search-width", state.get().header.search.width + "%");
+  render.search = {
+    width: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-search-width", state.get().header.search.width + "%");
+    },
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-search-size", state.get().header.search.size + "em");
+    }
   };
 
-  var _renderSearchSize = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-search-size", state.get().header.search.size + "em");
+  render.greeting = {
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-greeting-size", state.get().header.greeting.size + "em");
+    }
   };
 
-  var _renderGreetingSize = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-greeting-size", state.get().header.greeting.size + "em");
+  render.transitional = {
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-transitional-size", state.get().header.transitional.size + "em");
+    }
   };
 
-  var _renderTransitionalSize = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-transitional-size", state.get().header.transitional.size + "em");
+  render.clock = {
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-clock-size", state.get().header.clock.size + "em");
+    }
   };
 
-  var _renderClockSize = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-clock-size", state.get().header.clock.size + "em");
+  render.date = {
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-date-size", state.get().header.date.size + "em");
+    }
   };
 
-  var _renderDateSize = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-date-size", state.get().header.date.size + "em");
-  };
-
-  var _renderButtonSize = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
-  };
-
-  var _renderButtonStyle = function() {
-    var action = {
-      box: function() {
-        helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
-        helper.removeClass(helper.e(".control-link-add"), "button-link");
-        helper.removeClass(helper.e(".control-menu"), "button-link");
-      },
-      clear: function() {
-        helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
-        helper.addClass(helper.e(".control-link-add"), "button-link");
-        helper.addClass(helper.e(".control-menu"), "button-link");
-      }
-    };
-    action[state.get().header.button.style]();
+  render.button = {
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
+    },
+    style: function() {
+      var action = {
+        box: function() {
+          helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
+          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+          helper.removeClass(helper.e(".control-link-add"), "button-link");
+          helper.removeClass(helper.e(".control-menu"), "button-link");
+        },
+        clear: function() {
+          helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
+          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+          helper.addClass(helper.e(".control-link-add"), "button-link");
+          helper.addClass(helper.e(".control-menu"), "button-link");
+        }
+      };
+      action[state.get().header.button.style]();
+    }
   };
 
   var init = function() {
-    _bind();
+    bind.resize();
+    bind.scroll();
+    bind.fonts();
     render.area.width();
     render.shade();
     render.opacity();
diff --git a/src/js/init.js b/src/js/init.js
index b4c6edad..02fb3ce9 100644
--- a/src/js/init.js
+++ b/src/js/init.js
@@ -18,3 +18,4 @@ search.init();
 title.init();
 header.init();
 version.init();
+menu.open();
diff --git a/src/js/layout.js b/src/js/layout.js
index ca062dc3..3f6d443c 100644
--- a/src/js/layout.js
+++ b/src/js/layout.js
@@ -1,36 +1,23 @@
 var layout = (function() {
 
-  var render = {
-    width: function() {
-      _renderWidth();
-    },
-    padding: function() {
-      _renderPadding();
-    },
-    gutter: function() {
-      _renderGutter();
-    },
-    order: function() {
-      _renderOrder();
-    }
-  };
+  var render = {};
 
-  var _renderWidth = function() {
+  render.width = function() {
     var html = helper.e("html");
     html.style.setProperty("--layout-width", state.get().layout.width + "%");
   };
 
-  var _renderPadding = function() {
+  render.padding = function() {
     var html = helper.e("html");
     html.style.setProperty("--layout-padding-multiplier", state.get().layout.padding);
   };
 
-  var _renderGutter = function() {
+  render.gutter = function() {
     var html = helper.e("html");
     html.style.setProperty("--layout-gutter-multiplier", state.get().layout.gutter);
   };
 
-  var _renderOrder = function() {
+  render.order = function() {
     var html = helper.e("html");
     var layout = helper.e(".layout");
     var header = helper.e(".header");
diff --git a/src/js/link.js b/src/js/link.js
index b4785b2d..7b3d3c22 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -572,110 +572,86 @@ var link = (function() {
     };
   };
 
-  var render = {
+  var render = {};
+
+  render = {
     area: {
       width: function() {
-        _renderAreaWidth();
+        var html = helper.e("html");
+        html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
       }
-    },
-    item: {
-      all: function() {
-        _renderItemAll();
-      },
-      display: {
-        letter: function() {
-          _renderItemDisplayLetter();
-        },
-        icon: function() {
-          _renderItemDisplayIcon();
-        }
-      },
-      name: function() {
-        _renderItemName();
-      },
-      size: function() {
-        _renderItemSize();
-      }
-    },
-    tabIndex: function() {
-      _renderTabIndex();
     }
   };
 
-  var _renderAreaWidth = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
-  };
-
-  var _renderItemAll = function() {
-    var linkArea = helper.e(".link-area");
-    var bookmarksToRender = false;
-    if (state.get().search) {
-      bookmarksToRender = search.get();
-    } else {
-      bookmarksToRender = bookmarks.get();
-    };
-    var action = {
-      render: {
-        bookmarks: function(array) {
-          array.forEach(function(arrayItem, index) {
-            linkArea.appendChild(_makeLink(arrayItem, index));
-          });
-        },
-        empty: {
-          search: function() {
-            linkArea.appendChild(_makeEmptySearch());
+  render.item = {
+    all: function() {
+      var linkArea = helper.e(".link-area");
+      var bookmarksToRender = false;
+      if (state.get().search) {
+        bookmarksToRender = search.get();
+      } else {
+        bookmarksToRender = bookmarks.get();
+      };
+      var action = {
+        render: {
+          bookmarks: function(array) {
+            array.forEach(function(arrayItem, index) {
+              linkArea.appendChild(_makeLink(arrayItem, index));
+            });
           },
-          bookmarks: function() {
-            linkArea.appendChild(_makeEmptyBookmarks());
+          empty: {
+            search: function() {
+              linkArea.appendChild(_makeEmptySearch());
+            },
+            bookmarks: function() {
+              linkArea.appendChild(_makeEmptyBookmarks());
+            }
           }
         }
-      }
-    };
-    // if searching
-    if (state.get().search) {
-      // if bookmarks exist to be searched
-      if (bookmarksToRender.total > 0) {
-        // if matching bookmarks found
-        if (bookmarksToRender.matching.length > 0) {
-          action.render.bookmarks(bookmarksToRender.matching);
+      };
+      // if searching
+      if (state.get().search) {
+        // if bookmarks exist to be searched
+        if (bookmarksToRender.total > 0) {
+          // if matching bookmarks found
+          if (bookmarksToRender.matching.length > 0) {
+            action.render.bookmarks(bookmarksToRender.matching);
+          } else {
+            action.render.empty.search();
+          };
         } else {
-          action.render.empty.search();
+          action.render.empty.bookmarks();
         };
       } else {
-        action.render.empty.bookmarks();
+        // if bookmarks exist
+        if (bookmarksToRender.length > 0) {
+          action.render.bookmarks(bookmarksToRender);
+        } else {
+          action.render.empty.bookmarks();
+        };
       };
-    } else {
-      // if bookmarks exist
-      if (bookmarksToRender.length > 0) {
-        action.render.bookmarks(bookmarksToRender);
-      } else {
-        action.render.empty.bookmarks();
-      };
-    };
+    },
+    display: {
+      letter: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
+      },
+      icon: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
+      }
+    },
+    name: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
+    },
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
+    }
   };
 
-  var _renderItemDisplayLetter = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
-  };
-
-  var _renderItemDisplayIcon = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
-  };
-
-  var _renderItemName = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
-  };
-
-  var _renderItemSize = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
-  };
-
-  var _renderTabIndex = function() {
+  render.tabIndex = function() {
     var allLinkControlItem = helper.eA(".link-control-item");
     if (state.get().link.edit) {
       allLinkControlItem.forEach(function(arrayItem, index) {
@@ -688,32 +664,33 @@ var link = (function() {
     };
   };
 
-  var accent = {
-    set: function() {
-      var units = 360 / bookmarks.get().length;
-      var degree = 0;
-      bookmarks.get().forEach(function(arrayItem, index) {
-        arrayItem.accent.override = true;
-        arrayItem.accent.color = helper.hslToRgb({
-          h: degree,
-          s: 1,
-          l: 0.5
-        });
-        degree = degree + units;
+  var accent = {};
+
+  accent.set = function() {
+    var units = 360 / bookmarks.get().length;
+    var degree = 0;
+    bookmarks.get().forEach(function(arrayItem, index) {
+      arrayItem.accent.override = true;
+      arrayItem.accent.color = helper.hslToRgb({
+        h: degree,
+        s: 1,
+        l: 0.5
       });
-    },
-    clear: function() {
-      bookmarks.get().forEach(function(arrayItem, index) {
-        arrayItem.accent = {
-          override: false,
-          color: {
-            r: null,
-            g: null,
-            b: null
-          }
-        };
-      });
-    }
+      degree = degree + units;
+    });
+  };
+
+  accent.clear = function() {
+    bookmarks.get().forEach(function(arrayItem, index) {
+      arrayItem.accent = {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      };
+    });
   };
 
   var init = function() {
diff --git a/src/js/menu.js b/src/js/menu.js
index 4e379ffc..1c8a9346 100644
--- a/src/js/menu.js
+++ b/src/js/menu.js
@@ -78,16 +78,9 @@ var menu = (function() {
     render.tabindex();
   };
 
-  var render = {
-    tabindex: function() {
-      renderTabindex();
-    },
-    menu: function() {
-      renderMenu();
-    }
-  };
+  var render = {};
 
-  var renderMenu = function() {
+  render.menu = function() {
     var html = helper.e("html");
     if (state.get().menu) {
       helper.addClass(html, "is-menu-open");
@@ -103,7 +96,7 @@ var menu = (function() {
     };
   };
 
-  var renderTabindex = function() {
+  render.tabindex = function() {
     var menu = helper.e(".menu");
     if (state.get().menu) {
       menu.tabIndex = 1;
diff --git a/src/js/search.js b/src/js/search.js
index dabf4985..5dc28024 100644
--- a/src/js/search.js
+++ b/src/js/search.js
@@ -1,18 +1,11 @@
 var search = (function() {
 
-  var bind = function() {
+  var bind = {};
+
+  bind.input = function() {
     var searchInput = helper.e(".search-input");
-    var searchClear = helper.e(".search-clear");
     searchInput.addEventListener("input", function() {
-      _toggle();
-      render.clear.button();
-      link.clear();
-      link.render.item.all();
-      sortable(".link-area");
-    }, false);
-    searchClear.addEventListener("click", function() {
-      render.clear.input();
-      _toggle();
+      mod.searching.set();
       render.clear.button();
       link.clear();
       link.render.item.all();
@@ -20,24 +13,28 @@ var search = (function() {
     }, false);
   };
 
-  var _toggle = function() {
-    var html = helper.e("html");
-    var searchInput = helper.e(".search-input");
-    if (searchInput.value != "") {
+  bind.clear = function() {
+    var searchClear = helper.e(".search-clear");
+    searchClear.addEventListener("click", function() {
+      render.clear.input();
+      mod.searching.set();
+      render.clear.button();
+      link.clear();
+      link.render.item.all();
+      sortable(".link-area");
+    }, false);
+  };
+
+  var mod = {};
+
+  mod.searching = {
+    set: function() {
       helper.setObject({
         object: state.get(),
         path: "search",
-        newValue: true
+        newValue: helper.e(".search-input").value != ""
       });
-      helper.addClass(html, "is-header-searching");
-    } else {
-      helper.setObject({
-        object: state.get(),
-        path: "search",
-        newValue: false
-      });
-      helper.removeClass(html, "is-header-searching");
-    };
+    }
   };
 
   var get = function() {
@@ -65,21 +62,9 @@ var search = (function() {
     };
   };
 
-  var render = {
-    engine: function() {
-      _renderEngine();
-    },
-    clear: {
-      input: function() {
-        _renderClearInput();
-      },
-      button: function() {
-        _renderClearButton();
-      }
-    }
-  };
+  var render = {};
 
-  var _renderEngine = function() {
+  render.engine = function() {
     var search = helper.e(".search");
     var searchInput = helper.e(".search-input");
     var placeholder = "";
@@ -93,7 +78,15 @@ var search = (function() {
     search.setAttribute("action", state.get().header.search.engine[state.get().header.search.engine.selected].url);
   };
 
-  var _renderClearButton = function() {
+  render.clear = {};
+
+  render.clear.input = function() {
+    var searchInput = helper.e(".search-input");
+    searchInput.value = "";
+    searchInput.focus();
+  };
+
+  render.clear.button = function() {
     var searchClear = helper.e(".search-clear");
     if (state.get().search) {
       searchClear.removeAttribute("disabled");
@@ -102,13 +95,7 @@ var search = (function() {
     };
   };
 
-  var _renderClearInput = function() {
-    var searchInput = helper.e(".search-input");
-    searchInput.value = "";
-    searchInput.focus();
-  };
-
-  var _focus = function() {
+  render.focus = function() {
     if (state.get().header.search.focus) {
       window.addEventListener("load", function(event) {
         helper.e(".search-input").focus();
@@ -116,11 +103,23 @@ var search = (function() {
     };
   };
 
+  render.searching = function() {
+    var html = helper.e("html");
+    var searchInput = helper.e(".search-input");
+    if (searchInput.value != "") {
+      helper.addClass(html, "is-header-searching");
+    } else {
+      helper.removeClass(html, "is-header-searching");
+    };
+  };
+
   var init = function() {
-    bind();
+    bind.input();
+    bind.clear();
+    mod.searching.set();
     render.engine();
-    _toggle();
-    _focus();
+    render.focus();
+    render.searching();
   };
 
   // exposed methods
diff --git a/src/js/state.js b/src/js/state.js
index 02943a83..ae79bf71 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -195,6 +195,11 @@ var state = (function() {
     background: {
       image: {
         show: false,
+        from: "local",
+        file: {
+          name: "",
+          data: ""
+        },
         url: "",
         blur: 0,
         scale: 1,
diff --git a/src/js/theme.js b/src/js/theme.js
index ddd50170..058ce11f 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -20,97 +20,84 @@ var theme = (function() {
     style[state.get().theme.style]();
   };
 
-  var render = {
-    theme: function() {
-      _renderTheme();
-    },
-    radius: function() {
-      _renderRadius();
-    },
-    accent: {
-      color: function() {
-        _renderAccentColor();
-      },
-      random: function() {
-        _renderAccentRandom();
-      }
-    }
-  };
+  var render = {};
 
-  var _renderTheme = function() {
+  render.theme = function() {
     var html = helper.e("html");
     helper.removeClass(html, "is-theme-style-dark");
     helper.removeClass(html, "is-theme-style-light");
     helper.addClass(html, "is-theme-style-" + state.get().theme.style);
   };
 
-  var _renderRadius = function() {
+  render.radius = function() {
     var html = helper.e("html");
     html.style.setProperty("--theme-radius", state.get().theme.radius + "rem");
   };
 
-  var _renderAccentColor = function() {
-    var html = helper.e("html");
-    var color = state.get().theme.accent.current;
-    html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
+  render.accent = {
+    color: function() {
+      var html = helper.e("html");
+      var color = state.get().theme.accent.current;
+      html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
+    },
+    random: function() {
+      if (state.get().theme.accent.random.active) {
+        var randomVal = function(min, max) {
+          return Math.floor(Math.random() * (max - min) + 1) + min;
+        };
+        var color = {
+          any: function() {
+            return {
+              h: randomVal(0, 360),
+              s: randomVal(0, 100),
+              l: randomVal(0, 100)
+            };
+          },
+          light: function() {
+            return {
+              h: randomVal(0, 360),
+              s: randomVal(50, 90),
+              l: randomVal(50, 90)
+            };
+          },
+          dark: function() {
+            return {
+              h: randomVal(0, 360),
+              s: randomVal(10, 50),
+              l: randomVal(10, 50)
+            };
+          },
+          pastel: function() {
+            return {
+              h: randomVal(0, 360),
+              s: 50,
+              l: 80
+            };
+          },
+          saturated: function() {
+            return {
+              h: randomVal(0, 360),
+              s: 100,
+              l: 50
+            };
+          }
+        };
+        var hsl = color[state.get().theme.accent.random.style]();
+        var randomColor = helper.hslToRgb({
+          h: hsl.h,
+          s: (hsl.s / 100),
+          l: (hsl.l / 100)
+        });
+        helper.setObject({
+          object: state.get(),
+          path: "theme.accent.current",
+          newValue: randomColor
+        });
+        helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
+      };
+    }
   };
 
-  var _renderAccentRandom = function() {
-    if (state.get().theme.accent.random.active) {
-      var randomVal = function(min, max) {
-        return Math.floor(Math.random() * (max - min) + 1) + min;
-      };
-      var color = {
-        any: function() {
-          return {
-            h: randomVal(0, 360),
-            s: randomVal(0, 100),
-            l: randomVal(0, 100)
-          };
-        },
-        light: function() {
-          return {
-            h: randomVal(0, 360),
-            s: randomVal(50, 90),
-            l: randomVal(50, 90)
-          };
-        },
-        dark: function() {
-          return {
-            h: randomVal(0, 360),
-            s: randomVal(10, 50),
-            l: randomVal(10, 50)
-          };
-        },
-        pastel: function() {
-          return {
-            h: randomVal(0, 360),
-            s: 50,
-            l: 80
-          };
-        },
-        saturated: function() {
-          return {
-            h: randomVal(0, 360),
-            s: 100,
-            l: 50
-          };
-        }
-      };
-      var hsl = color[state.get().theme.accent.random.style]();
-      var randomColor = helper.hslToRgb({
-        h: hsl.h,
-        s: (hsl.s / 100),
-        l: (hsl.l / 100)
-      });
-      helper.setObject({
-        object: state.get(),
-        path: "theme.accent.current",
-        newValue: randomColor
-      });
-      helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
-    };
-  };
 
   var init = function() {
     render.theme();