[feature] add local background image controls to menu

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);
   }
 

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;

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 */
+/* form helper */
-.input-helper {
+.form-helper {
-  margin-bottom: 0
+  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) {
+.form-helper.disabled {
-  margin-bottom: 0.5em;
+  color: rgb(var(--form-helper-disabled));
 }
 
-.input-helper[disabled],
+.form-helper:not(:last-child) {
-input[type="checkbox"][disabled]~.input-helper,
+  margin-bottom: 0;
-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));
 }
 
 /* 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 {
+.form-grid.disabled:focus,
-  color: rgb(var(--form-input-text-disabled-helper-text));
+.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 {
+.feedback-wrap {
-  padding: 1em 1.5em;
+  padding: 0.5em 0;
-  background-color: rgb(var(--theme-gray-02));
+  position: relative;
-  /* border-bottom: var(--layout-line-width) solid rgb(var(--theme-gray-04)); */
+  width: 100%;
-  border-radius: var(--theme-radius);
 }
 
-.form-feedback:not(:last-child) {
+.form-feedback {
-  margin-bottom: 1em;
+  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));
 }

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 {

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);

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">
+                    <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">
-                    <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>
                   </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">
+              <div class="button-wrap form-inline">
-                <button class="control-link-accent-set button mb-0" tabindex="1">Apply override colours to all Bookmarks</button>
+                <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-from-local" class="control-background-image-from-local" type="radio" name="control-background-image-from" value="local" tabindex="1">
-                  <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">
+                  <label for="control-background-image-from-local">Use local file</label>
-                  <p class="input-helper small muted">Unsplash can be used for random images, eg:</p>
+                </div>
-                  <p class="input-helper small muted"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
+                <div class="form-indent">
-                  <p class="input-helper small muted">Change parameters after <i>.../ramdom/</i> for more options.</p>
+                  <div class="input-wrap input-button input-hide form-inline">
-                  <p class="input-helper small muted">Loading times may vary.</p>
+                    <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>
+              <p class="control-data-import-helper form-helper small">Restore a previously exported nightTab backup.</p>
-              <div class="control-data-import-feedback form-feedback is-hidden"></div>
+              <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="control-data-export-helper form-helper small">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">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>

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
   };
 
 })();

src/js/clock.js

@@ -1,17 +1,12 @@
 var clock = (function() {
 
-  var bind = function() {
+  var bind = {};
-    window.setInterval(function() {
-      clear();
-      render();
-    }, 1000);
-  };
 
-  var clear = function() {
+  bind.tick = function() {
-    var clock = helper.e(".clock");
+    window.setInterval(function() {
-    while (clock.lastChild) {
+      render.clear();
-      clock.removeChild(clock.lastChild);
+      render.all();
-    };
+    }, 1000);
   };
 
   var _makeTimeObject = function() {
@@ -39,8 +34,17 @@ var clock = (function() {
     return time;
   };
 
-  var render = function() {
+  var render = {};
-    var _clock = function() {
+
+  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.tick();
-    bind();
+    render.all();
   };
 
   // exposed methods
   return {
     init: init,
     bind: bind,
-    render: render,
+    render: render
-    clear: clear
   };
 
 })();

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 = {
+  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 _renderWidth = function() {
+  render.area = {
+    width: 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,55 +74,64 @@ 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() {
+  render.search = {
+    width: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-search-width", state.get().header.search.width + "%");
-  };
+    },
-
+    size: function() {
-  var _renderSearchSize = function() {
       var html = helper.e("html");
       html.style.setProperty("--header-search-size", state.get().header.search.size + "em");
+    }
   };
 
-  var _renderGreetingSize = function() {
+  render.greeting = {
+    size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-greeting-size", state.get().header.greeting.size + "em");
+    }
   };
 
-  var _renderTransitionalSize = function() {
+  render.transitional = {
+    size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-transitional-size", state.get().header.transitional.size + "em");
+    }
   };
 
-  var _renderClockSize = function() {
+  render.clock = {
+    size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-clock-size", state.get().header.clock.size + "em");
+    }
   };
 
-  var _renderDateSize = function() {
+  render.date = {
+    size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-date-size", state.get().header.date.size + "em");
+    }
   };
 
-  var _renderButtonSize = function() {
+  render.button = {
+    size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
-  };
+    },
-
+    style: function() {
-  var _renderButtonStyle = function() {
       var action = {
         box: function() {
           helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
@@ -179,10 +147,13 @@ var header = (function() {
         }
       };
       action[state.get().header.button.style]();
+    }
   };
 
   var init = function() {
-    _bind();
+    bind.resize();
+    bind.scroll();
+    bind.fonts();
     render.area.width();
     render.shade();
     render.opacity();

src/js/init.js

@@ -18,3 +18,4 @@ search.init();
 title.init();
 header.init();
 version.init();
+menu.open();

src/js/layout.js

@@ -1,36 +1,23 @@
 var layout = (function() {
 
-  var render = {
+  var render = {};
-    width: function() {
-      _renderWidth();
-    },
-    padding: function() {
-      _renderPadding();
-    },
-    gutter: function() {
-      _renderGutter();
-    },
-    order: function() {
-      _renderOrder();
-    }
-  };
 
-  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");

src/js/link.js

@@ -572,42 +572,19 @@ var link = (function() {
     };
   };
 
-  var render = {
+  var render = {};
+
+  render = {
     area: {
       width: function() {
-        _renderAreaWidth();
-      }
-    },
-    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() {
+  render.item = {
+    all: function() {
       var linkArea = helper.e(".link-area");
       var bookmarksToRender = false;
       if (state.get().search) {
@@ -653,29 +630,28 @@ var link = (function() {
           action.render.empty.bookmarks();
         };
       };
-  };
+    },
-
+    display: {
-  var _renderItemDisplayLetter = function() {
+      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 _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() {
+    name: function() {
       var html = helper.e("html");
       html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
-  };
+    },
-
+    size: function() {
-  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,8 +664,9 @@ var link = (function() {
     };
   };
 
-  var accent = {
+  var accent = {};
-    set: function() {
+
+  accent.set = function() {
     var units = 360 / bookmarks.get().length;
     var degree = 0;
     bookmarks.get().forEach(function(arrayItem, index) {
@@ -701,8 +678,9 @@ var link = (function() {
       });
       degree = degree + units;
     });
-    },
+  };
-    clear: function() {
+
+  accent.clear = function() {
     bookmarks.get().forEach(function(arrayItem, index) {
       arrayItem.accent = {
         override: false,
@@ -713,7 +691,6 @@ var link = (function() {
         }
       };
     });
-    }
   };
 
   var init = function() {

src/js/menu.js

@@ -78,16 +78,9 @@ var menu = (function() {
     render.tabindex();
   };
 
-  var render = {
+  var render = {};
-    tabindex: function() {
-      renderTabindex();
-    },
-    menu: function() {
-      renderMenu();
-    }
-  };
 
-  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;

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();
+      mod.searching.set();
-      render.clear.button();
-      link.clear();
-      link.render.item.all();
-      sortable(".link-area");
-    }, false);
-    searchClear.addEventListener("click", function() {
-      render.clear.input();
-      _toggle();
       render.clear.button();
       link.clear();
       link.render.item.all();
@@ -20,24 +13,28 @@ var search = (function() {
     }, false);
   };
 
-  var _toggle = function() {
+  bind.clear = function() {
-    var html = helper.e("html");
+    var searchClear = helper.e(".search-clear");
-    var searchInput = helper.e(".search-input");
+    searchClear.addEventListener("click", function() {
-    if (searchInput.value != "") {
+      render.clear.input();
-      helper.setObject({
+      mod.searching.set();
-        object: state.get(),
+      render.clear.button();
-        path: "search",
+      link.clear();
-        newValue: true
+      link.render.item.all();
-      });
+      sortable(".link-area");
-      helper.addClass(html, "is-header-searching");
+    }, false);
-    } else {
-      helper.setObject({
-        object: state.get(),
-        path: "search",
-        newValue: false
-      });
-      helper.removeClass(html, "is-header-searching");
   };
+
+  var mod = {};
+
+  mod.searching = {
+    set: function() {
+      helper.setObject({
+        object: state.get(),
+        path: "search",
+        newValue: helper.e(".search-input").value != ""
+      });
+    }
   };
 
   var get = function() {
@@ -65,21 +62,9 @@ var search = (function() {
     };
   };
 
-  var render = {
+  var render = {};
-    engine: function() {
-      _renderEngine();
-    },
-    clear: {
-      input: function() {
-        _renderClearInput();
-      },
-      button: function() {
-        _renderClearButton();
-      }
-    }
-  };
 
-  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() {
+  render.focus = function() {
-    var searchInput = helper.e(".search-input");
-    searchInput.value = "";
-    searchInput.focus();
-  };
-
-  var _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();
+    render.focus();
-    _focus();
+    render.searching();
   };
 
   // exposed methods

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,

src/js/theme.js

@@ -20,42 +20,27 @@ var theme = (function() {
     style[state.get().theme.style]();
   };
 
-  var render = {
+  var render = {};
-    theme: function() {
-      _renderTheme();
-    },
-    radius: function() {
-      _renderRadius();
-    },
-    accent: {
-      color: function() {
-        _renderAccentColor();
-      },
-      random: function() {
-        _renderAccentRandom();
-      }
-    }
-  };
 
-  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() {
+  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() {
-  var _renderAccentRandom = function() {
       if (state.get().theme.accent.random.active) {
         var randomVal = function(min, max) {
           return Math.floor(Math.random() * (max - min) + 1) + min;
@@ -110,8 +95,10 @@ var theme = (function() {
         });
         helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
       };
+    }
   };
 
+
   var init = function() {
     render.theme();
     render.accent.random();