From ebcdb3571c0ae4c64b359577bb2d1b0511e82866 Mon Sep 17 00:00:00 2001
From: Kombie <crudetoaster@gmail.com>
Date: Sat, 4 May 2019 13:53:18 +0100
Subject: [PATCH] [feature] Allow colour override for links

---
 css/base.css           |   2 +
 css/form.css           | 439 +++++++++++++++++++++++++++--------------
 css/icons.css          |   4 +
 css/menu.css           |  14 +-
 fonts/icons/icons.eot  | Bin 3316 -> 3492 bytes
 fonts/icons/icons.json |   2 +-
 fonts/icons/icons.svg  |   1 +
 fonts/icons/icons.ttf  | Bin 3152 -> 3328 bytes
 fonts/icons/icons.woff | Bin 3228 -> 3404 bytes
 index.html             | 366 +++++++++++++++++-----------------
 js/bookmarks.js        | 212 +++++++++++++++++++-
 js/control.js          |   8 +-
 js/link.js             | 128 +++++++++++-
 js/update.js           |  19 ++
 js/version.js          |   2 +-
 15 files changed, 844 insertions(+), 353 deletions(-)

diff --git a/css/base.css b/css/base.css
index 4753e5ee..8d647e26 100755
--- a/css/base.css
+++ b/css/base.css
@@ -82,6 +82,8 @@
   --background-blur: 0;
   --layout-width: calc(70vw - var(--layout-width-gutter));
   --layout-width-gutter: var(--gutter) * 8;
+  --menu-border-width: 2px;
+  --menu-border: var(--menu-border-width) solid rgb(var(--gray-02));
   /* breakpoint reference */
   /* can not be used in @media as of yet */
   --breakpoint-sm: 550px;
diff --git a/css/form.css b/css/form.css
index 2c8c898e..aa5f8029 100755
--- a/css/form.css
+++ b/css/form.css
@@ -1,3 +1,4 @@
+/* email, number, password, search, tel, text */
 input[type="email"],
 input[type="number"],
 input[type="password"],
@@ -87,18 +88,6 @@ input[type="text"][disabled]:focus {
   color: rgb(var(--form-input-text-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));
-}
-
 input[type="email"]::placeholder,
 input[type="number"]::placeholder,
 input[type="password"]::placeholder,
@@ -148,77 +137,27 @@ input[type="text"][disabled]:focus::placeholder {
   color: rgb(var(--form-input-placeholder-disabled));
 }
 
+/* label */
 label {
-  padding: 0.5em 0;
+  padding: 0;
   color: rgb(var(--form-label));
   margin-bottom: 0;
   font-size: 1em;
   display: block;
 }
 
+label:not(:only-child):not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
 label[disabled] {
   color: rgb(var(--form-label-disabled));
 }
 
-input[type="color"] {
-  opacity: 0;
-  width: 2px;
-  height: 2px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  cursor: pointer;
-  -webkit-appearance: none;
-}
-
-input[type="color"]:focus {
-  outline: none;
-}
-
-input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-input[type="color"]::-webkit-color-swatch {
-  border: 0;
-}
-
-input[type="color"]+.input-label-button {
-  padding-right: 2.25em;
-  justify-content: center;
-  align-items: center;
-}
-
-input[type="color"]+.input-label-button:before {
-  background-color: rgb(var(--accent));
-  content: "";
-  border-radius: 50%;
-  position: absolute;
-  right: 0.5em;
-  width: 1em;
-  height: 1em;
-  z-index: 1;
-  box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
-}
-
-.input-wrap,
-.checkbox-wrap,
-.radio-wrap {
-  position: relative;
-}
-
-.form-indent {
-  margin-left: 2.25em;
-}
-
-.form-inline {
-  display: inline-block;
-  margin-right: 1.5em;
-}
-
+/* checkbox and radio */
 input[type="checkbox"],
 input[type="radio"] {
+  margin-bottom: 0;
   position: absolute;
   top: 0;
   left: 50%;
@@ -239,17 +178,17 @@ input[type="radio"]+label {
   color: rgb(var(--form-checkbox-radio-label));
   font-size: 1em;
   font-family: var(--font-regular);
-  min-height: 2.5em;
   cursor: pointer;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  /* transition: all var(--animation-speed-fast) ease-in-out; */
+  transition: all var(--animation-speed-fast) ease-in-out;
 }
 
-input[type="checkbox"]+label .label-icon,
-input[type="radio"]+label .label-icon {
+input[type="checkbox"]+label:before,
+input[type="radio"]+label:before {
+  content: "";
   margin-right: 0.5em;
   font-size: 1.5em;
   line-height: 1;
@@ -272,15 +211,15 @@ input[type="radio"]:active+label {
   color: rgb(var(--style-neutral-text));
 }
 
-input[type="checkbox"]:focus+label .label-icon,
-input[type="checkbox"]:hover+label .label-icon,
-input[type="radio"]:focus+label .label-icon,
-input[type="radio"]:hover+label .label-icon {
+input[type="checkbox"]:focus+label:before,
+input[type="checkbox"]:hover+label:before,
+input[type="radio"]:focus+label:before,
+input[type="radio"]:hover+label:before {
   color: rgb(var(--style-neutral-text));
 }
 
-input[type="checkbox"]:active+label .label-icon,
-input[type="radio"]:active+label .label-icon {
+input[type="checkbox"]:active+label:before,
+input[type="radio"]:active+label:before {
   color: rgb(var(--accent));
   transform: scale(0.9);
 }
@@ -297,76 +236,35 @@ input[type="radio"]:not([disabled]):focus:checked+label {
   color: rgb(var(--style-neutral-text));
 }
 
-input[type="checkbox"]:checked+label .label-icon,
-input[type="radio"]:checked+label .label-icon {
+input[type="checkbox"]:checked+label:before,
+input[type="radio"]:checked+label:before {
   color: rgb(var(--accent));
 }
 
-input[type="checkbox"]:checked:focus+label .label-icon,
-input[type="radio"]:checked:focus+label .label-icon {
+input[type="checkbox"]:checked:focus+label:before,
+input[type="radio"]:checked:focus+label:before {
   transform: scale(1.2);
 }
 
-input[type="color"]+.input-label-button,
-input[type="checkbox"]+.input-label-button,
-input[type="radio"]+.input-label-button {
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-input[type="color"]:hover+.input-label-button,
-input[type="color"]:focus+.input-label-button,
-input[type="checkbox"]:hover+.input-label-button,
-input[type="checkbox"]:focus+.input-label-button,
-input[type="radio"]:hover+.input-label-button,
-input[type="radio"]:focus+.input-label-button {
-  background-color: rgb(var(--gray-03));
-  border-bottom-color: rgb(var(--gray-08));
-  color: rgb(var(--style-neutral-text));
-  outline: none;
-}
-
-input[type="color"]:active+.input-label-button,
-input[type="checkbox"]:active+.input-label-button,
-input[type="radio"]:active+.input-label-button {
-  border-bottom-color: rgb(var(--accent));
-}
-
-input[type="color"]:checked+.input-label-button,
-input[type="checkbox"]:checked+.input-label-button,
-input[type="radio"]:checked+.input-label-button {
-  border-bottom-color: rgb(var(--accent));
-}
-
-input[type="color"][disabled]+.input-label-button,
-input[type="checkbox"][disabled]+.input-label-button,
-input[type="radio"][disabled]+.input-label-button {
-  background-color: rgb(var(--gray-02));
-  border-color: transparent;
-  color: rgb(var(--form-checkbox-radio-disabled-label));
-  cursor: default;
-}
-
 input[type="checkbox"][disabled]+label,
 input[type="radio"][disabled]+label {
   color: rgb(var(--form-checkbox-radio-disabled-label));
   cursor: default;
 }
 
-input[type="checkbox"][disabled]+label .label-icon,
-input[type="radio"][disabled]+label .label-icon {
+input[type="checkbox"][disabled]+label:before,
+input[type="radio"][disabled]+label:before {
   color: rgb(var(--form-checkbox-radio-disabled-label));
   cursor: default;
 }
 
-input[type="checkbox"][disabled]:active+label .label-icon,
-input[type="radio"][disabled]:active+label .label-icon {
+input[type="checkbox"][disabled]:active+label:before,
+input[type="radio"][disabled]:active+label:before {
   transform: none;
 }
 
-input[type="checkbox"]+label .label-icon:before,
-input[type="radio"]+label .label-icon:before {
+input[type="checkbox"]+label:before,
+input[type="radio"]+label:before {
   font-family: "Icons" !important;
   speak: none;
   font-style: normal;
@@ -375,27 +273,83 @@ input[type="radio"]+label .label-icon:before {
   text-transform: none;
 }
 
-input[type="checkbox"]+label .label-icon:before {
+input[type="checkbox"]+label:before {
   content: "\e835";
 }
 
-input[type="checkbox"]:checked+label .label-icon:before {
+input[type="checkbox"]:checked+label:before {
   content: "\e834";
 }
 
-input[type="radio"]+label .label-icon:before {
+input[type="radio"]+label:before {
   content: "\e836";
 }
 
-input[type="radio"]:checked+label .label-icon:before {
+input[type="radio"]:checked+label:before {
   content: "\e837";
 }
 
-input[type="range"] {
-  /* background-color: rgb(var(--gray-08)); */
+/* color */
+input[type="color"] {
   background-color: transparent;
   padding: 0;
   margin: 0 0 1em 0;
+  width: 100%;
+  height: 2.5em;
+  display: block;
+  border-width: 0;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--radius);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
+}
+
+input[type="color"]:hover {
+  outline: none;
+  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
+}
+
+input[type="color"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-10));
+}
+
+input[type="color"][disabled] {
+  opacity: 0.5;
+}
+
+input[type="color"][disabled]:hover,
+input[type="color"][disabled]:focus {
+  box-shadow: none;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+  border: 0;
+  padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+  border: 0;
+  padding: 0;
+}
+
+input[type="color"]::-moz-color-swatch-wrapper {
+  border: 0;
+  padding: 0;
+}
+
+input[type="color"]::-moz-color-swatch {
+  border: 0;
+  padding: 0;
+}
+
+/* range */
+input[type="range"] {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
   color: rgb(var(--style-neutral-text));
   font-size: 1em;
   font-family: var(--font-regular);
@@ -489,7 +443,7 @@ input[type="range"]::-webkit-slider-thumb:active {
 }
 
 input[type="range"][disabled]::-webkit-slider-thumb {
-  border-color: rgb(var(--gray-08));
+  border-color: rgb(var(--gray-04));
   cursor: default;
 }
 
@@ -563,7 +517,7 @@ input[type="range"][disabled]::-moz-range-track {
 }
 
 input[type="range"][disabled]::-moz-range-thumb {
-  border-color: rgb(var(--gray-08));
+  border-color: rgb(var(--gray-04));
   cursor: default;
 }
 
@@ -577,6 +531,177 @@ input[type="range"][disabled]::-moz-range-progress {
   background-color: rgb(var(--gray-08));
 }
 
+/* input helper */
+.input-helper {
+  margin-bottom: 0
+}
+
+.input-helper:not(:only-child):not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+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));
+}
+
+/* input variants */
+.input-wrap {
+  padding: 0.5em 0;
+  position: relative;
+  width: 100%;
+}
+
+.input-wrap.input-button {
+  width: initial;
+  display: inline-block;
+}
+
+.input-button input[type="checkbox"]+label,
+.input-button input[type="radio"]+label,
+.input-button input[type="color"]+label {
+  background-color: rgb(var(--gray-02));
+  padding: 0.125em 1em;
+  margin: 0;
+  color: rgb(var(--button-text));
+  font-size: 1em;
+  font-family: var(--font-regular);
+  min-height: 2.5em;
+  line-height: 1;
+  border: 0;
+  border-top-width: var(--line-width);
+  border-bottom-width: var(--line-width);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--radius);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: none;
+  transition: all var(--animation-speed-fast) ease-in-out;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.input-button input[type="checkbox"]:hover+label,
+.input-button input[type="checkbox"]:focus+label,
+.input-button input[type="radio"]:hover+label,
+.input-button input[type="radio"]:focus+label,
+.input-button input[type="color"]:hover+label,
+.input-button input[type="color"]:focus+label {
+  background-color: rgb(var(--gray-03));
+  border-bottom-color: rgb(var(--gray-08));
+  color: rgb(var(--button-text-hover-focus));
+  outline: none;
+}
+
+.input-button input[type="checkbox"]:active+label,
+.input-button input[type="radio"]:active+label,
+.input-button input[type="color"]:active+label {
+  background-color: rgb(var(--gray-04));
+  border-bottom-color: rgb(var(--accent));
+  color: rgb(var(--button-text-active));
+  transition: none;
+}
+
+.input-button input[type="checkbox"]:checked+label,
+.input-button input[type="radio"]:checked+label,
+.input-button input[type="color"]:checked+label {
+  background-color: rgb(var(--gray-04));
+  border-bottom-color: rgb(var(--accent));
+  color: rgb(var(--button-text-active));
+  transition: none;
+}
+
+.input-button input[type="checkbox"][disabled]+label,
+.input-button input[type="checkbox"][disabled]:hover+label,
+.input-button input[type="checkbox"][disabled]:focus+label,
+.input-button input[type="checkbox"][disabled]:active+label,
+.input-button input[type="radio"][disabled]+label,
+.input-button input[type="radio"][disabled]:hover+label,
+.input-button input[type="radio"][disabled]:focus+label,
+.input-button input[type="radio"][disabled]:active+label,
+.input-button input[type="color"][disabled]+label,
+.input-button input[type="color"][disabled]:hover+label,
+.input-button input[type="color"][disabled]:focus+label,
+.input-button input[type="color"][disabled]:active+label {
+  background-color: rgb(var(--gray-02));
+  border-color: transparent;
+  color: rgb(var(--button-text-disabled));
+  cursor: default;
+}
+
+.input-color-dot input[type="color"] {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  right: 0.5em;
+  width: 1em;
+  height: 1em;
+  z-index: 1;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: none;
+}
+
+.input-color-dot input[type="color"]:hover {
+  outline: none;
+  box-shadow: none;
+}
+
+.input-color-dot input[type="color"]:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.input-color-dot-accent input[type="color"],
+.input-color-dot-accent input[type="color"]:hover,
+.input-color-dot-accent input[type="color"]:focus {
+  box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
+}
+
+.input-color-dot input[type="color"]+label {
+  padding-right: 2.25em;
+  position: relative;
+}
+
+.input-hide input[type="checkbox"]+label:before,
+.input-hide input[type="checkbox"]:checked+label:before,
+.input-hide input[type="radio"]+label:before,
+.input-hide input[type="radio"]:checked+label:before {
+  content: none;
+}
+
+.input-hide input[type="color"] {
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-appearance: none;
+}
+
+/* form variants */
+.form-indent {
+  margin-left: 2.25em;
+}
+
+.form-inline {
+  display: inline-block;
+  margin-right: 1.5em;
+}
+
 .form-group {
   margin: 0 0 1em 0;
   display: inline-flex;
@@ -592,7 +717,8 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-group>input[type="password"],
 .form-group>input[type="search"],
 .form-group>input[type="tel"],
-.form-group>input[type="text"] {
+.form-group>input[type="text"],
+.form-group>input[type="color"] {
   margin: 0;
   border-radius: 0;
 }
@@ -611,7 +737,8 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-group>input[type="password"],
 .form-group>input[type="search"],
 .form-group>input[type="tel"],
-.form-group>input[type="text"] {
+.form-group>input[type="text"],
+.form-group>input[type="color"] {
   z-index: 1;
 }
 
@@ -620,7 +747,8 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-group>input[type="password"]:hover,
 .form-group>input[type="search"]:hover,
 .form-group>input[type="tel"]:hover,
-.form-group>input[type="text"]:hover {
+.form-group>input[type="text"]:hover,
+.form-group>input[type="color"]:hover {
   z-index: 2;
 }
 
@@ -635,7 +763,9 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-group>input[type="tel"]:active,
 .form-group>input[type="tel"]:focus,
 .form-group>input[type="text"]:active,
-.form-group>input[type="text"]:focus {
+.form-group>input[type="text"]:focus,
+.form-group>input[type="color"]:active,
+.form-group>input[type="color"]:focus {
   z-index: 3;
 }
 
@@ -646,7 +776,8 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-group>input[type="password"]:first-child,
 .form-group>input[type="search"]:first-child,
 .form-group>input[type="tel"]:first-child,
-.form-group>input[type="text"]:first-child {
+.form-group>input[type="text"]:first-child,
+.form-group>input[type="color"]:first-child {
   border-radius: var(--radius) 0 0 var(--radius);
 }
 
@@ -657,14 +788,28 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-group>input[type="password"]:last-child,
 .form-group>input[type="search"]:last-child,
 .form-group>input[type="tel"]:last-child,
-.form-group>input[type="text"]:last-child {
+.form-group>input[type="text"]:last-child,
+.form-group>input[type="color"]:last-child {
   border-radius: 0 var(--radius) var(--radius) 0;
 }
 
-.form-group.nested-button *:first-child .button {
+.form-group.nested-button * .button,
+.form-group.nested-button * input[type="checkbox"]+label,
+.form-group.nested-button * input[type="radio"]+label,
+.form-group.nested-button * input[type="color"]+label {
+  border-radius: 0;
+}
+
+.form-group.nested-button *:first-child .button,
+.form-group.nested-button *:first-child input[type="checkbox"]+label,
+.form-group.nested-button *:first-child input[type="radio"]+label,
+.form-group.nested-button *:first-child input[type="color"]+label {
   border-radius: var(--radius) 0 0 var(--radius);
 }
 
-.form-group.nested-button *:last-child .button {
+.form-group.nested-button *:last-child .button,
+.form-group.nested-button *:last-child input[type="checkbox"]+label,
+.form-group.nested-button *:last-child input[type="radio"]+label,
+.form-group.nested-button *:last-child input[type="color"]+label {
   border-radius: 0 var(--radius) var(--radius) 0;
 }
diff --git a/css/icons.css b/css/icons.css
index 3404c62a..f54836c9 100755
--- a/css/icons.css
+++ b/css/icons.css
@@ -119,3 +119,7 @@
 .icon-unfold-more:before {
   content: "\e5d7";
 }
+
+.icon-refresh:before {
+  content: "\e900";
+}
diff --git a/css/menu.css b/css/menu.css
index 57412346..c35a5454 100755
--- a/css/menu.css
+++ b/css/menu.css
@@ -66,7 +66,7 @@
 }
 
 .menu-item:not(:last-child) {
-  border-bottom: var(--line-width) solid rgb(var(--gray-02));
+  border-bottom: var(--menu-border);
 }
 
 .menu-close {
@@ -143,9 +143,9 @@
     height: 100%;
     position: absolute;
     top: 0;
-    right: calc(-2em - calc(var(--line-width) / 2));
+    right: calc(-2em - calc(var(--menu-border-width) / 2));
     border-radius: 1em;
-    border-right: var(--line-width) solid rgb(var(--gray-03));
+    border-right: var(--menu-border);
   }
 
   .menu-item:not(:nth-last-child(2)):not(:last-child):before {
@@ -154,9 +154,9 @@
     height: 0;
     position: absolute;
     left: 0;
-    bottom: calc(-2em - calc(var(--line-width) / 2));
+    bottom: calc(-2em - calc(var(--menu-border-width) / 2));
     border-radius: 1em;
-    border-bottom: var(--line-width) solid rgb(var(--gray-03));
+    border-bottom: var(--menu-border);
   }
 
   .menu-item {
@@ -191,7 +191,7 @@
     top: 0;
     right: calc(-2em - calc(var(--line-width) / 2));
     border-radius: 1em;
-    border-right: var(--line-width) solid rgb(var(--gray-03));
+    border-right: var(--menu-border);
   }
 
   .menu-item:not(:nth-last-child(2)):not(:last-child):before {
@@ -206,6 +206,6 @@
     left: 0;
     bottom: calc(-2em - calc(var(--line-width) / 2));
     border-radius: 1em;
-    border-bottom: var(--line-width) solid rgb(var(--gray-03));
+    border-bottom: var(--menu-border);
   }
 }
diff --git a/fonts/icons/icons.eot b/fonts/icons/icons.eot
index 98615a01f08b3f57504bb753af12b581786f2db7..33aa281f49f96735004450143c3bc60218153362 100755
GIT binary patch
delta 455
zcmew&xkQ?62`>W!1MfsOGZxzw&Mzi9wA34H)Z=7eV3YxhpGi+FE&$R3K>iCL&5@o{
znPz@xb_S6D0m!w<NKH%;Su2>rz`&&glsC%&3b5xe-vjc2Vhk!7xg`}@48pU3{0<<$
zBqu*PQTURW7Lfl3$hXN&tSDemWQbv4;I;tr74i~uB~xd5asCDhL;x*mE66V{VPFPI
zG4MQ?9K+bmy#dJ7U{GLSVc?kjicyh~VKNt!CXh5@QfHSI7Y3?joSev{GP!_>b#p6I
z1iKC+!y1NA<}hYP1{0ux=7NgmdW_0S?0k&uY@#CKa*X0)#zy9LjOJ$M#%z-f*@csg
zjl`HfrTn|nr4(yws;}=V0tBx5`lecH>h==iyb*lz^5LdtHg0xyu~O2~Qn7Zn?rybA
zbHO^aL`2;5^i9q5K-zeCb>-#NEcEqVgoUN0W9{tR-R$gRrKQa#-{K6CdEvamHlE++
zD+4zR$a@SoKBaZS=*b>j=8UqF8@Tcr*GzuHWh?xPMUH_HC@ael1qlrXCZI2cH~Vuh
GWds07TV;s=

delta 291
zcmZ1?{Y8@P3l9TB0MA4=GnUc_;ky$ZTI!RGh2t3*7-bk37>=YT78d|%0U-YYkmg9w
zsZ5)gdu1Jv|AK*meMUxVVv2C0k`)63X9G~)ECVROp2K_>$ln3vt7PPsRHQKoy#w;^
z0Qm(u`N@gGON4-Sa`^!HR=J541q=!dF+hF?kgt%Jm@An&(~I*rP+$enlD2~U;t~dC
zpcDg-!Q>dmW^SM;gBnl^3j^EaSB#32d6_gOn=`2~3QbO6(%#(56u~~ZlgnS`u5d(Y
zJipCX25uIRW`-L+d0$}k<S$(2j53pTxbr8^=e80)0~BWjVi|@gh)oPklM9)IH~;5e
G$_N0!+eRV)

diff --git a/fonts/icons/icons.json b/fonts/icons/icons.json
index 259ca858..3a7906b5 100755
--- a/fonts/icons/icons.json
+++ b/fonts/icons/icons.json
@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["add"],"defaultCode":57669,"grid":24},"attrs":[],"properties":{"ligatures":"add","id":12,"order":8,"prevSize":24,"code":57669,"name":"add"},"setIdx":0,"setId":0,"iconIdx":12},{"icon":{"paths":["M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_back"],"defaultCode":58820,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_back","id":45,"order":16,"prevSize":24,"code":58820,"name":"arrow_back"},"setIdx":0,"setId":0,"iconIdx":45},{"icon":{"paths":["M854 512l-342 342-342-342 62-60 238 238v-520h84v520l240-238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_downward"],"defaultCode":58843,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_downward","id":46,"order":17,"prevSize":24,"code":58843,"name":"arrow_downward"},"setIdx":0,"setId":0,"iconIdx":46},{"icon":{"paths":["M512 170l342 342-342 342-60-60 238-240h-520v-84h520l-238-240z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_forward"],"defaultCode":58824,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_forward","id":50,"order":18,"prevSize":24,"code":58824,"name":"arrow_forward"},"setIdx":0,"setId":0,"iconIdx":50},{"icon":{"paths":["M170 512l342-342 342 342-62 60-238-238v520h-84v-520l-240 238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_upward"],"defaultCode":58840,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_upward","id":51,"order":19,"prevSize":24,"code":58840,"name":"arrow_upward"},"setIdx":0,"setId":0,"iconIdx":51},{"icon":{"paths":["M384 690l452-452 60 60-512 512-238-238 60-60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["check"],"defaultCode":58826,"grid":24},"attrs":[],"properties":{"ligatures":"check","id":148,"order":14,"prevSize":24,"code":58826,"name":"check"},"setIdx":0,"setId":0,"iconIdx":148},{"icon":{"paths":["M426 726l384-384-60-62-324 324-152-152-60 60zM810 128c48 0 86 40 86 86v596c0 46-38 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["check_box"],"defaultCode":59444,"grid":24},"attrs":[],"properties":{"ligatures":"check_box","id":149,"order":35,"prevSize":24,"name":"check_box","code":59444},"setIdx":0,"setId":0,"iconIdx":149},{"icon":{"paths":["M810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-46 0-86-40-86-86v-596c0-46 40-86 86-86h596zM810 214h-596v596h596v-596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["check_box_outline_blank"],"defaultCode":59445,"grid":24},"attrs":[],"properties":{"ligatures":"check_box_outline_blank","id":150,"order":36,"prevSize":24,"name":"check_box_outline_blank","code":59445},"setIdx":0,"setId":0,"iconIdx":150},{"icon":{"paths":["M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["close"],"defaultCode":58829,"grid":24},"attrs":[],"properties":{"ligatures":"clear, close","id":157,"order":2,"prevSize":24,"code":58829,"name":"close"},"setIdx":0,"setId":0,"iconIdx":157},{"icon":{"paths":["M884 300l-78 78-160-160 78-78c16-16 44-16 60 0l100 100c16 16 16 44 0 60zM128 736l472-472 160 160-472 472h-160v-160z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["mode_edit"],"defaultCode":57940,"grid":24},"attrs":[],"properties":{"ligatures":"create, edit, mode_edit","id":184,"order":5,"prevSize":24,"code":57940,"name":"mode_edit"},"setIdx":0,"setId":0,"iconIdx":184},{"icon":{"paths":["M384 692l452-454 60 60-512 512-238-238 58-60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["done"],"defaultCode":59510,"grid":24},"attrs":[],"properties":{"ligatures":"done","id":232,"order":38,"prevSize":24,"name":"done","code":59510},"setIdx":0,"setId":0,"iconIdx":232},{"icon":{"paths":["M726 554v-84h-428v84h428zM810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-46 0-86-40-86-86v-596c0-46 40-86 86-86h596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["indeterminate_check_box"],"defaultCode":59657,"grid":24},"attrs":[],"properties":{"ligatures":"indeterminate_check_box","id":399,"order":37,"prevSize":24,"name":"indeterminate_check_box","code":59657},"setIdx":0,"setId":0,"iconIdx":399},{"icon":{"paths":["M316 334l196 196 196-196 60 60-256 256-256-256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_down"],"defaultCode":58131,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_down","id":411,"order":20,"prevSize":24,"code":58131,"name":"keyboard_arrow_down"},"setIdx":0,"setId":0,"iconIdx":411},{"icon":{"paths":["M658 686l-60 60-256-256 256-256 60 60-196 196z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_left"],"defaultCode":58132,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_left","id":412,"order":21,"prevSize":24,"code":58132,"name":"keyboard_arrow_left"},"setIdx":0,"setId":0,"iconIdx":412},{"icon":{"paths":["M366 698l196-196-196-196 60-60 256 256-256 256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_right"],"defaultCode":58133,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_right","id":413,"order":22,"prevSize":24,"code":58133,"name":"keyboard_arrow_right"},"setIdx":0,"setId":0,"iconIdx":413},{"icon":{"paths":["M316 658l-60-60 256-256 256 256-60 60-196-196z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_up"],"defaultCode":58134,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_up","id":414,"order":23,"prevSize":24,"code":58134,"name":"keyboard_arrow_up"},"setIdx":0,"setId":0,"iconIdx":414},{"icon":{"paths":["M512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM768 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM256 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["more_horiz"],"defaultCode":58835,"grid":24},"attrs":[],"properties":{"ligatures":"more_horiz","id":501,"order":24,"prevSize":24,"code":58835,"name":"more_horiz"},"setIdx":0,"setId":0,"iconIdx":501},{"icon":{"paths":["M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["more_vert"],"defaultCode":58836,"grid":24},"attrs":[],"properties":{"ligatures":"more_vert","id":502,"order":25,"prevSize":24,"code":58836,"name":"more_vert"},"setIdx":0,"setId":0,"iconIdx":502},{"icon":{"paths":["M512 854c188 0 342-154 342-342s-154-342-342-342-342 154-342 342 154 342 342 342zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["radio_button_unchecked"],"defaultCode":59446,"grid":24},"attrs":[],"properties":{"ligatures":"panorama_fish_eye, radio_button_unchecked","id":540,"order":33,"prevSize":24,"name":"radio_button_unchecked","code":59446},"setIdx":0,"setId":0,"iconIdx":540},{"icon":{"paths":["M512 854c188 0 342-154 342-342s-154-342-342-342-342 154-342 342 154 342 342 342zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426zM512 298c118 0 214 96 214 214s-96 214-214 214-214-96-214-214 96-214 214-214z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["radio_button_checked"],"defaultCode":59447,"grid":24},"attrs":[],"properties":{"ligatures":"radio_button_checked","id":610,"order":34,"prevSize":24,"name":"radio_button_checked","code":59447},"setIdx":0,"setId":0,"iconIdx":610},{"icon":{"paths":["M810 554h-596v-84h596v84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["remove"],"defaultCode":57691,"grid":24},"attrs":[],"properties":{"ligatures":"remove","id":617,"order":29,"prevSize":24,"code":57691,"name":"remove"},"setIdx":0,"setId":0,"iconIdx":617},{"icon":{"paths":["M512 662c82 0 150-68 150-150s-68-150-150-150-150 68-150 150 68 150 150 150zM830 554l90 70c8 6 10 18 4 28l-86 148c-6 10-16 12-26 8l-106-42c-22 16-46 32-72 42l-16 112c-2 10-10 18-20 18h-172c-10 0-18-8-20-18l-16-112c-26-10-50-24-72-42l-106 42c-10 4-20 2-26-8l-86-148c-6-10-4-22 4-28l90-70c-2-14-2-28-2-42s0-28 2-42l-90-70c-8-6-10-18-4-28l86-148c6-10 16-12 26-8l106 42c22-16 46-32 72-42l16-112c2-10 10-18 20-18h172c10 0 18 8 20 18l16 112c26 10 50 24 72 42l106-42c10-4 20-2 26 8l86 148c6 10 4 22-4 28l-90 70c2 14 2 28 2 42s0 28-2 42z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["settings"],"defaultCode":59576,"grid":24},"attrs":[],"properties":{"ligatures":"settings","id":664,"order":39,"prevSize":24,"code":59576,"name":"settings"},"setIdx":0,"setId":0,"iconIdx":664},{"icon":{"paths":["M708 230l-196 196-196-196 60-60 136 136 136-136zM316 794l196-196 196 196-60 60-136-136-136 136z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["unfold_less"],"defaultCode":58838,"grid":24},"attrs":[],"properties":{"ligatures":"unfold_less","id":785,"order":26,"prevSize":24,"code":58838,"name":"unfold_less"},"setIdx":0,"setId":0,"iconIdx":785},{"icon":{"paths":["M512 776l136-136 60 60-196 196-196-196 60-60zM512 248l-136 136-60-60 196-196 196 196-60 60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["unfold_more"],"defaultCode":58839,"grid":24},"attrs":[],"properties":{"ligatures":"unfold_more","id":786,"order":27,"prevSize":24,"code":58839,"name":"unfold_more"},"setIdx":0,"setId":0,"iconIdx":786}],"height":1024,"metadata":{"name":""},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":true,"selector":"","classSelector":".icon","showMetrics":true,"showMetadata":true,"showVersion":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"","height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16}}
\ No newline at end of file
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["add"],"defaultCode":57669,"grid":24},"attrs":[],"properties":{"ligatures":"add","id":12,"order":8,"prevSize":24,"code":57669,"name":"add"},"setIdx":0,"setId":1,"iconIdx":0},{"icon":{"paths":["M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_back"],"defaultCode":58820,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_back","id":45,"order":16,"prevSize":24,"code":58820,"name":"arrow_back"},"setIdx":0,"setId":1,"iconIdx":1},{"icon":{"paths":["M854 512l-342 342-342-342 62-60 238 238v-520h84v520l240-238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_downward"],"defaultCode":58843,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_downward","id":46,"order":17,"prevSize":24,"code":58843,"name":"arrow_downward"},"setIdx":0,"setId":1,"iconIdx":2},{"icon":{"paths":["M512 170l342 342-342 342-60-60 238-240h-520v-84h520l-238-240z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_forward"],"defaultCode":58824,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_forward","id":50,"order":18,"prevSize":24,"code":58824,"name":"arrow_forward"},"setIdx":0,"setId":1,"iconIdx":3},{"icon":{"paths":["M170 512l342-342 342 342-62 60-238-238v520h-84v-520l-240 238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow_upward"],"defaultCode":58840,"grid":24},"attrs":[],"properties":{"ligatures":"arrow_upward","id":51,"order":19,"prevSize":24,"code":58840,"name":"arrow_upward"},"setIdx":0,"setId":1,"iconIdx":4},{"icon":{"paths":["M384 690l452-452 60 60-512 512-238-238 60-60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["check"],"defaultCode":58826,"grid":24},"attrs":[],"properties":{"ligatures":"check","id":148,"order":14,"prevSize":24,"code":58826,"name":"check"},"setIdx":0,"setId":1,"iconIdx":5},{"icon":{"paths":["M426 726l384-384-60-62-324 324-152-152-60 60zM810 128c48 0 86 40 86 86v596c0 46-38 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["check_box"],"defaultCode":59444,"grid":24},"attrs":[],"properties":{"ligatures":"check_box","id":149,"order":35,"prevSize":24,"name":"check_box","code":59444},"setIdx":0,"setId":1,"iconIdx":6},{"icon":{"paths":["M810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-46 0-86-40-86-86v-596c0-46 40-86 86-86h596zM810 214h-596v596h596v-596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["check_box_outline_blank"],"defaultCode":59445,"grid":24},"attrs":[],"properties":{"ligatures":"check_box_outline_blank","id":150,"order":36,"prevSize":24,"name":"check_box_outline_blank","code":59445},"setIdx":0,"setId":1,"iconIdx":7},{"icon":{"paths":["M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["close"],"defaultCode":58829,"grid":24},"attrs":[],"properties":{"ligatures":"clear, close","id":157,"order":2,"prevSize":24,"code":58829,"name":"close"},"setIdx":0,"setId":1,"iconIdx":8},{"icon":{"paths":["M884 300l-78 78-160-160 78-78c16-16 44-16 60 0l100 100c16 16 16 44 0 60zM128 736l472-472 160 160-472 472h-160v-160z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["mode_edit"],"defaultCode":57940,"grid":24},"attrs":[],"properties":{"ligatures":"create, edit, mode_edit","id":184,"order":5,"prevSize":24,"code":57940,"name":"mode_edit"},"setIdx":0,"setId":1,"iconIdx":9},{"icon":{"paths":["M384 692l452-454 60 60-512 512-238-238 58-60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["done"],"defaultCode":59510,"grid":24},"attrs":[],"properties":{"ligatures":"done","id":232,"order":38,"prevSize":24,"name":"done","code":59510},"setIdx":0,"setId":1,"iconIdx":10},{"icon":{"paths":["M726 554v-84h-428v84h428zM810 128c46 0 86 40 86 86v596c0 46-40 86-86 86h-596c-46 0-86-40-86-86v-596c0-46 40-86 86-86h596z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["indeterminate_check_box"],"defaultCode":59657,"grid":24},"attrs":[],"properties":{"ligatures":"indeterminate_check_box","id":399,"order":37,"prevSize":24,"name":"indeterminate_check_box","code":59657},"setIdx":0,"setId":1,"iconIdx":11},{"icon":{"paths":["M316 334l196 196 196-196 60 60-256 256-256-256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_down"],"defaultCode":58131,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_down","id":411,"order":20,"prevSize":24,"code":58131,"name":"keyboard_arrow_down"},"setIdx":0,"setId":1,"iconIdx":12},{"icon":{"paths":["M658 686l-60 60-256-256 256-256 60 60-196 196z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_left"],"defaultCode":58132,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_left","id":412,"order":21,"prevSize":24,"code":58132,"name":"keyboard_arrow_left"},"setIdx":0,"setId":1,"iconIdx":13},{"icon":{"paths":["M366 698l196-196-196-196 60-60 256 256-256 256z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_right"],"defaultCode":58133,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_right","id":413,"order":22,"prevSize":24,"code":58133,"name":"keyboard_arrow_right"},"setIdx":0,"setId":1,"iconIdx":14},{"icon":{"paths":["M316 658l-60-60 256-256 256 256-60 60-196-196z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["keyboard_arrow_up"],"defaultCode":58134,"grid":24},"attrs":[],"properties":{"ligatures":"keyboard_arrow_up","id":414,"order":23,"prevSize":24,"code":58134,"name":"keyboard_arrow_up"},"setIdx":0,"setId":1,"iconIdx":15},{"icon":{"paths":["M512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM768 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM256 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["more_horiz"],"defaultCode":58835,"grid":24},"attrs":[],"properties":{"ligatures":"more_horiz","id":501,"order":24,"prevSize":24,"code":58835,"name":"more_horiz"},"setIdx":0,"setId":1,"iconIdx":16},{"icon":{"paths":["M512 682c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 426c46 0 86 40 86 86s-40 86-86 86-86-40-86-86 40-86 86-86zM512 342c-46 0-86-40-86-86s40-86 86-86 86 40 86 86-40 86-86 86z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["more_vert"],"defaultCode":58836,"grid":24},"attrs":[],"properties":{"ligatures":"more_vert","id":502,"order":25,"prevSize":24,"code":58836,"name":"more_vert"},"setIdx":0,"setId":1,"iconIdx":17},{"icon":{"paths":["M512 854c188 0 342-154 342-342s-154-342-342-342-342 154-342 342 154 342 342 342zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["radio_button_unchecked"],"defaultCode":59446,"grid":24},"attrs":[],"properties":{"ligatures":"panorama_fish_eye, radio_button_unchecked","id":540,"order":33,"prevSize":24,"name":"radio_button_unchecked","code":59446},"setIdx":0,"setId":1,"iconIdx":18},{"icon":{"paths":["M512 854c188 0 342-154 342-342s-154-342-342-342-342 154-342 342 154 342 342 342zM512 86c236 0 426 190 426 426s-190 426-426 426-426-190-426-426 190-426 426-426zM512 298c118 0 214 96 214 214s-96 214-214 214-214-96-214-214 96-214 214-214z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["radio_button_checked"],"defaultCode":59447,"grid":24},"attrs":[],"properties":{"ligatures":"radio_button_checked","id":610,"order":34,"prevSize":24,"name":"radio_button_checked","code":59447},"setIdx":0,"setId":1,"iconIdx":19},{"icon":{"paths":["M810 554h-596v-84h596v84z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["remove"],"defaultCode":57691,"grid":24},"attrs":[],"properties":{"ligatures":"remove","id":617,"order":29,"prevSize":24,"code":57691,"name":"remove"},"setIdx":0,"setId":1,"iconIdx":20},{"icon":{"paths":["M512 662c82 0 150-68 150-150s-68-150-150-150-150 68-150 150 68 150 150 150zM830 554l90 70c8 6 10 18 4 28l-86 148c-6 10-16 12-26 8l-106-42c-22 16-46 32-72 42l-16 112c-2 10-10 18-20 18h-172c-10 0-18-8-20-18l-16-112c-26-10-50-24-72-42l-106 42c-10 4-20 2-26-8l-86-148c-6-10-4-22 4-28l90-70c-2-14-2-28-2-42s0-28 2-42l-90-70c-8-6-10-18-4-28l86-148c6-10 16-12 26-8l106 42c22-16 46-32 72-42l16-112c2-10 10-18 20-18h172c10 0 18 8 20 18l16 112c26 10 50 24 72 42l106-42c10-4 20-2 26 8l86 148c6 10 4 22-4 28l-90 70c2 14 2 28 2 42s0 28-2 42z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["settings"],"defaultCode":59576,"grid":24},"attrs":[],"properties":{"ligatures":"settings","id":664,"order":39,"prevSize":24,"code":59576,"name":"settings"},"setIdx":0,"setId":1,"iconIdx":21},{"icon":{"paths":["M708 230l-196 196-196-196 60-60 136 136 136-136zM316 794l196-196 196 196-60 60-136-136-136 136z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["unfold_less"],"defaultCode":58838,"grid":24},"attrs":[],"properties":{"ligatures":"unfold_less","id":785,"order":26,"prevSize":24,"code":58838,"name":"unfold_less"},"setIdx":0,"setId":1,"iconIdx":22},{"icon":{"paths":["M512 776l136-136 60 60-196 196-196-196 60-60zM512 248l-136 136-60-60 196-196 196 196-60 60z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["unfold_more"],"defaultCode":58839,"grid":24},"attrs":[],"properties":{"ligatures":"unfold_more","id":786,"order":27,"prevSize":24,"code":58839,"name":"unfold_more"},"setIdx":0,"setId":1,"iconIdx":23},{"icon":{"paths":["M754 270l100-100v300h-300l138-138c-46-46-110-76-180-76-142 0-256 114-256 256s114 256 256 256c112 0 208-70 242-170h88c-38 148-170 256-330 256-188 0-340-154-340-342s152-342 340-342c94 0 180 38 242 100z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":24,"tags":["refresh"]},"attrs":[{}],"properties":{"order":40,"id":787,"name":"refresh","prevSize":24,"code":59648},"setIdx":0,"setId":1,"iconIdx":24}],"height":1024,"metadata":{"name":""},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":true,"selector":"","classSelector":".icon","showMetrics":true,"showMetadata":true,"showVersion":true},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"","height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16}}
\ No newline at end of file
diff --git a/fonts/icons/icons.svg b/fonts/icons/icons.svg
index dab5d2ef..561a02e1 100755
--- a/fonts/icons/icons.svg
+++ b/fonts/icons/icons.svg
@@ -30,5 +30,6 @@
 <glyph unicode="&#xe837;" glyph-name="radio_button_checked" d="M512 84.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM512 640.667c118 0 214-96 214-214s-96-214-214-214-214 96-214 214 96 214 214 214z" />
 <glyph unicode="&#xe876;" glyph-name="done" d="M384 246.667l452 454 60-60-512-512-238 238 58 60z" />
 <glyph unicode="&#xe8b8;" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
+<glyph unicode="&#xe900;" glyph-name="refresh" d="M754 668.667l100 100v-300h-300l138 138c-46 46-110 76-180 76-142 0-256-114-256-256s114-256 256-256c112 0 208 70 242 170h88c-38-148-170-256-330-256-188 0-340 154-340 342s152 342 340 342c94 0 180-38 242-100z" />
 <glyph unicode="&#xe909;" glyph-name="indeterminate_check_box" d="M726 384.667v84h-428v-84h428zM810 810.667c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-46 0-86 40-86 86v596c0 46 40 86 86 86h596z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/fonts/icons/icons.ttf b/fonts/icons/icons.ttf
index 59e4819cd656d5277bc28121f66a5780ac6a9134..26e0fbf887d6dc492e46b262dc9720e80d9cbf46 100755
GIT binary patch
delta 439
zcmca0(I7QJq26Gl9w!3>qYMKB!<qEN;sPKo0OY>_(j4hIm1*X8W@iBTAAnq&jMT&w
zk+p&;3=CX4KzXwapa6Rg^F1IRD8`_Yky}!c#UMNj$nOC1OLFp)6NN8{X#x3vfP9<W
z#EJq2MTQs#25t)=Um-6sS2A^`7w2!FKm^c|wu1cP5(Z|V6a&wLi94FPHvm~03<?Y^
z3>=f)7!?^ACZ{oK0?9r`b#`fSVW3jR$p;w~CSPFW-29L+g1w%RVGTnla~Lxtg9*?)
zb3sLOJw|0Ec0NXSHc=6AIYx0YV<U4rMsqWBV>Ym;vXZ(Uqq>@@30TzFNQ~)I%D*dJ
zO0lM<`ueUSK;WvcZ>puHZZ9Fu8^I?pA8u-9<7Q_UD<v&06>Def?pDh*7py}|M8r)=
zPv6u`52TNWS65zM%|c(_MOau`I@Zq4-ObKER$AI@vKeQP%nRogw(<NnUm3VrK%Ql|
p@hPnnMo(VCY0fA+`3`43<C@7HT(+FQSmYQOfwHoj`?wA<0swS&Vq5?K

delta 264
zcmZpWx*#z@p+3o2IG%xlQHFtm;YfO7aRHDP0P-IIX^!-q%Cw2OSJnafFBlluXJn)%
zrU)l0SurqhHUQ<#GJpc?Im~x~{2f5PN=9x;MH++9J0SlKkYA9KpPVSXM2Lrhfy)QT
zx5`bdC}2=vhyn6DfP96##9YbLnO>Z~fdVUlmb4Y*7nd+F1Em;v3?}Yq<^~Efr~!4b
zFtAN_V^o}+$*3`TGNT%+5Ks~0<b#arn_n_Uuup!<=`V9vIHEM3-{va=Hw#EV!wsLj
iFEDy?0GBzV%;XNP{K>z$tT@jA#TkKEX0sjlAw~e)!9cVC

diff --git a/fonts/icons/icons.woff b/fonts/icons/icons.woff
index 905b01574448b283d8ad1db48b91c1916f9e96f1..b5e9887517bc47cc196f95af187bbdd512017f86 100755
GIT binary patch
delta 516
zcmbOuc}7aC+~3WOfsp|SczqbS!88K{<77c5v57kJ^=E(rXACy#ai%907cej|nE?45
zP%Mz1Q<(-7vjGZ$vH6|Z85yaGDGUr;6+ks+AS|+0Fa;zC6x#sgtAH?j4)eW?+!CM~
zt}8%(2?%E~2+zvNPX?;v_5kvM<}ug^UosNY%1x{QTFl)76i@(TMTVHX#N1S%*b<;a
z+dz1x7w7MS{9>R%ygC#AbnAj_(f}%F0lJluLE)k6!{|pLkHwxId3xgMsi$Y3UU_=s
z>FpQhFUnr*c*!t%6Qd?0!{l3x>g>|u!VJt{&&zC9U`l1LXJlBz5Xv0J%*X)rIHS3s
zqPZTUvJyKVBRiX@h`1c1xR|k#xgDdqnYl3=SX5a_U5`;+&C~=eYHTFN^eN@vl`f@N
zQ&W9?R}mm^)z>%GQd75=5a*5Hla~)SHM4QEvx}9ImX?aOvvqf?Wtt1tp(P^XrlhBD
zYNiL$$HS{DFRx~yukRu(EG->tXXox_XCEsqZ8o`yGf3uz^9tK|ew(ih+$=z!Gcerv
ml-3EOCx75HXOx|+!IjUrX7Us+Th3oBa^U!u-F%Dd5F-E#J9+~E

delta 345
zcmX>jHAhmc+~3WOfsp|Sc;+y0gXsVU#>s+AViR@b>yH2hjwBfi$EPP27cej|=>Yj0
zP%Mz1Q<(-7Ghtw0p8>)XbFZw+NKH&(VBkChRAUCh!ih>&89+e>1}+vLUj>BObC~aD
z<d#$b#Wa9?pt%eMX$(T|a`KZw>VRf3Sb?zc5+fm=+{6l?0<J4S0R=EtV2H^}%uNM~
zePLi=Yy;t$UYx%R@{3D=eyExFr(1gkP@x)7IST_D&}#}0T^~k23VAH{^vKf_PftBP
z`}E4w8&7Y)Fn>|@V#nkyjGB}0Gpex)F))L@t+LsODVlw<A(y|*UEzq*cz&C&4BQ~6
nGcern$pcymp(oGbGG~;Te1$82vOBjG*uRWGDVfb(+=mzeKFnCl

diff --git a/index.html b/index.html
index 4451aef1..c2d27a19 100644
--- a/index.html
+++ b/index.html
@@ -67,11 +67,9 @@
         </div>
         <div class="header-item header-edit-add">
           <div class="form-group nested-button mb-0">
-            <div class="checkbox-wrap">
+            <div class="input-wrap input-button input-hide py-0">
               <input id="control-edit" class="control-edit" type="checkbox" tabindex="1">
-              <label for="control-edit" class="button input-label-button">
-                <div class="button-text">Edit</div>
-              </label>
+              <label for="control-edit" class=" mb-0">Edit</label>
             </div>
             <button class="button control-add" tabindex="1">
               <span class="button-text">Add</span>
@@ -79,11 +77,9 @@
           </div>
         </div>
         <div class="header-item header-accent">
-          <div class="input-wrap">
-            <input id="control-theme-accent-current" class="control-theme-accent-current" type="color" value="#00ff00" tabindex="1">
-            <label for="control-theme-accent-current" class="button input-label-button mb-0">
-              <span class="button-text">Accent</span>
-            </label>
+          <div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
+            <input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
+            <label for="control-theme-accent-current">Accent</label>
           </div>
         </div>
         <div class="header-item header-menu">
@@ -125,22 +121,22 @@
               <h1 class="menu-item-header-text">Greeting</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
-                <label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
+                <label for="control-header-greeting-show">Show</label>
               </div>
               <div class="form-indent">
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
-                <label for="control-header-greeting-type-good"><span class="label-icon"></span>"Good morning..."</label>
+                <label for="control-header-greeting-type-good">"Good morning..."</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
-                <label for="control-header-greeting-type-hello"><span class="label-icon"></span>"Hello..."</label>
+                <label for="control-header-greeting-type-hello">"Hello..."</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
-                <label for="control-header-greeting-type-hi"><span class="label-icon"></span>"Hi..."</label>
+                <label for="control-header-greeting-type-hi">"Hi..."</label>
               </div>
               <hr>
               <div class="input-wrap">
@@ -155,19 +151,19 @@
               <h1 class="menu-item-header-text">Transitional words</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <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"><span class="label-icon"></span>Show</label>
+                <label for="control-header-transitional-show">Show</label>
                 <p class="input-helper small muted">Available when Date or Time is shown.</p>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <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">
-                  <label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span>"The time and date is"</label>
+                  <label for="control-header-transitional-type-timeanddate">"The time and date is"</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="1">
-                  <label for="control-header-transitional-type-its"><span class="label-icon"></span>"It's"</label>
+                  <label for="control-header-transitional-type-its">"It's"</label>
                 </div>
               </div>
             </div>
@@ -177,63 +173,63 @@
               <h1 class="menu-item-header-text">Clock</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-clock-hours-show" class="control-header-clock-hours-show" type="checkbox" tabindex="1">
-                <label for="control-header-clock-hours-show"><span class="label-icon"></span>Hours</label>
+                <label for="control-header-clock-hours-show">Hours</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-clock-hours-number" class="control-header-clock-hours-number" type="radio" name="control-header-clock-hours" value="number" tabindex="1">
-                  <label for="control-header-clock-hours-number"><span class="label-icon"></span>As number</label>
+                  <label for="control-header-clock-hours-number">As number</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-clock-hours-word" class="control-header-clock-hours-word" type="radio" name="control-header-clock-hours" value="word" tabindex="1">
-                  <label for="control-header-clock-hours-word"><span class="label-icon"></span>As word</label>
+                  <label for="control-header-clock-hours-word">As word</label>
                 </div>
                 <hr>
               </div>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="1">
-                <label for="control-header-clock-minutes-show"><span class="label-icon"></span>Minutes</label>
+                <label for="control-header-clock-minutes-show">Minutes</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-clock-minutes-number" class="control-header-clock-minutes-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="1">
-                  <label for="control-header-clock-minutes-number"><span class="label-icon"></span>As number</label>
+                  <label for="control-header-clock-minutes-number">As number</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-clock-minutes-word" class="control-header-clock-minutes-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="1">
-                  <label for="control-header-clock-minutes-word"><span class="label-icon"></span>As word</label>
+                  <label for="control-header-clock-minutes-word">As word</label>
                 </div>
                 <hr>
               </div>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="1">
-                <label for="control-header-clock-seconds-show"><span class="label-icon"></span>Seconds</label>
+                <label for="control-header-clock-seconds-show">Seconds</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-clock-seconds-number" class="control-header-clock-seconds-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="1">
-                  <label for="control-header-clock-seconds-number"><span class="label-icon"></span>As number</label>
+                  <label for="control-header-clock-seconds-number">As number</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-clock-seconds-word" class="control-header-clock-seconds-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="1">
-                  <label for="control-header-clock-seconds-word"><span class="label-icon"></span>As word</label>
+                  <label for="control-header-clock-seconds-word">As word</label>
                 </div>
               </div>
               <hr>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="1">
-                <label for="control-header-clock-separator-show"><span class="label-icon"></span>Separators</label>
+                <label for="control-header-clock-separator-show">Separators</label>
               </div>
               <hr>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="1">
-                <label for="control-header-clock-hour24-show"><span class="label-icon"></span>24 Hours</label>
+                <label for="control-header-clock-hour24-show">24 Hours</label>
               </div>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-clock-meridiem-show" class="control-header-clock-meridiem-show" type="checkbox" tabindex="1">
-                <label for="control-header-clock-meridiem-show"><span class="label-icon"></span>AM/PM</label>
+                <label for="control-header-clock-meridiem-show">AM/PM</label>
               </div>
             </div>
           </div>
@@ -242,125 +238,125 @@
               <h1 class="menu-item-header-text">Date</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-date-day-show" class="control-header-date-day-show" type="checkbox" tabindex="1">
-                <label for="control-header-date-day-show"><span class="label-icon"></span>Day</label>
+                <label for="control-header-date-day-show">Day</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="1">
-                  <label for="control-header-date-day-display-number"><span class="label-icon"></span>As number</label>
+                  <label for="control-header-date-day-display-number">As number</label>
                 </div>
                 <div class="form-indent">
                   <label class="control-header-date-day-week-start-label">Start of the week</label>
-                  <div class="radio-wrap">
+                  <div class="input-wrap">
                     <input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="1">
-                    <label for="control-header-date-day-week-start-monday"><span class="label-icon"></span>Monday</label>
+                    <label for="control-header-date-day-week-start-monday">Monday</label>
                   </div>
-                  <div class="radio-wrap">
+                  <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"><span class="label-icon"></span>Sunday</label>
+                    <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>
                 </div>
-                <div class="radio-wrap">
+                <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">
-                  <label for="control-header-date-day-display-word"><span class="label-icon"></span>As word</label>
+                  <label for="control-header-date-day-display-word">As word</label>
                 </div>
                 <div class="form-indent">
                   <label class="control-header-date-day-length-label">Word length</label>
-                  <div class="radio-wrap">
+                  <div class="input-wrap">
                     <input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="1">
-                    <label for="control-header-date-day-length-long"><span class="label-icon"></span>Long</label>
+                    <label for="control-header-date-day-length-long">Long</label>
                   </div>
-                  <div class="radio-wrap">
+                  <div class="input-wrap">
                     <input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="1">
-                    <label for="control-header-date-day-length-short"><span class="label-icon"></span>Short</label>
+                    <label for="control-header-date-day-length-short">Short</label>
                   </div>
                 </div>
                 <hr>
               </div>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="1">
-                <label for="control-header-date-date-show"><span class="label-icon"></span>Date</label>
+                <label for="control-header-date-date-show">Date</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="1">
-                  <label for="control-header-date-date-display-number"><span class="label-icon"></span>As number</label>
+                  <label for="control-header-date-date-display-number">As number</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="1">
-                  <label for="control-header-date-date-display-word"><span class="label-icon"></span>As word</label>
+                  <label for="control-header-date-date-display-word">As word</label>
                 </div>
-                <div class="checkbox-wrap">
+                <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"><span class="label-icon"></span>Ordinal numbers</label>
+                  <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>
                 <hr>
               </div>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="1">
-                <label for="control-header-date-month-show"><span class="label-icon"></span>Month</label>
+                <label for="control-header-date-month-show">Month</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="1">
-                  <label for="control-header-date-month-display-number"><span class="label-icon"></span>As number</label>
+                  <label for="control-header-date-month-display-number">As number</label>
                 </div>
                 <div class="form-indent">
-                  <div class="checkbox-wrap">
+                  <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"><span class="label-icon"></span>Ordinal numbers</label>
+                    <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>
                 </div>
-                <div class="radio-wrap">
+                <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">
-                  <label for="control-header-date-month-display-word"><span class="label-icon"></span>As word</label>
+                  <label for="control-header-date-month-display-word">As word</label>
                 </div>
                 <div class="form-indent">
                   <label class="control-header-date-month-length-label">Word length</label>
-                  <div class="radio-wrap">
+                  <div class="input-wrap">
                     <input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="1">
-                    <label for="control-header-date-month-length-long"><span class="label-icon"></span>Long</label>
+                    <label for="control-header-date-month-length-long">Long</label>
                   </div>
-                  <div class="radio-wrap">
+                  <div class="input-wrap">
                     <input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="1">
-                    <label for="control-header-date-month-length-short"><span class="label-icon"></span>Short</label>
+                    <label for="control-header-date-month-length-short">Short</label>
                   </div>
                 </div>
                 <hr>
               </div>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="1">
-                <label for="control-header-date-year-show"><span class="label-icon"></span>Year</label>
+                <label for="control-header-date-year-show">Year</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="1">
-                  <label for="control-header-date-year-display-number"><span class="label-icon"></span>As number</label>
+                  <label for="control-header-date-year-display-number">As number</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="1">
-                  <label for="control-header-date-year-display-word"><span class="label-icon"></span>As word</label>
+                  <label for="control-header-date-year-display-word">As word</label>
                 </div>
               </div>
               <hr>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="1">
-                <label for="control-header-date-separator-show"><span class="label-icon"></span>Separators</label>
+                <label for="control-header-date-separator-show">Separators</label>
               </div>
               <hr>
               <label class="control-header-date-format-label">Format</label>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="1">
-                <label for="control-header-date-format-datemonth"><span class="label-icon"></span>Date / Month</label>
+                <label for="control-header-date-format-datemonth">Date / Month</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="1">
-                <label for="control-header-date-format-monthdate"><span class="label-icon"></span>Month / Date</label>
+                <label for="control-header-date-format-monthdate">Month / Date</label>
               </div>
             </div>
           </div>
@@ -369,20 +365,20 @@
               <h1 class="menu-item-header-text">Search</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="1">
-                <label for="control-header-search-show"><span class="label-icon"></span>Show</label>
+                <label for="control-header-search-show">Show</label>
               </div>
               <div class="form-indent">
                 <label class="control-header-search-width-style-label">Search box size</label>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-width-style-auto" class="control-header-search-width-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="1">
-                  <label for="control-header-search-width-style-auto"><span class="label-icon"></span>Auto</label>
+                  <label for="control-header-search-width-style-auto">Auto</label>
                   <p class="input-helper small muted">Search box will grow to best fit available space.</p>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-width-style-custom" class="control-header-search-width-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="1">
-                  <label for="control-header-search-width-style-custom"><span class="label-icon"></span>Custom</label>
+                  <label for="control-header-search-width-style-custom">Custom</label>
                 </div>
                 <div class="form-indent">
                   <div class="input-wrap">
@@ -392,32 +388,32 @@
                   </div>
                 </div>
                 <hr>
-                <div class="checkbox-wrap">
+                <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"><span class="label-icon"></span>Focus on load/refresh</label>
+                  <label for="control-header-search-focus">Focus on load/refresh</label>
                   <p class="input-helper small muted">May not work in Chrome.</p>
                 </div>
                 <hr>
                 <label class="control-header-search-engine-label">Engine</label>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="1">
-                  <label for="control-header-search-engine-google"><span class="label-icon"></span>Google</label>
+                  <label for="control-header-search-engine-google">Google</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="1">
-                  <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span>Duck Duck Go</label>
+                  <label for="control-header-search-engine-duckduckgo">Duck Duck Go</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="1">
-                  <label for="control-header-search-engine-youtube"><span class="label-icon"></span>YouTube</label>
+                  <label for="control-header-search-engine-youtube">YouTube</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="1">
-                  <label for="control-header-search-engine-giphy"><span class="label-icon"></span>Giphy</label>
+                  <label for="control-header-search-engine-giphy">Giphy</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="1">
-                  <label for="control-header-search-engine-custom"><span class="label-icon"></span>Custom</label>
+                  <label for="control-header-search-engine-custom">Custom</label>
                 </div>
                 <div class="form-indent">
                   <div class="input-wrap">
@@ -433,17 +429,17 @@
                 </div>
                 <hr>
                 <label class="control-header-search-text-align-label">Text align</label>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
-                  <label for="control-header-search-text-align-left"><span class="label-icon"></span>Left</label>
+                  <label for="control-header-search-text-align-left">Left</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
-                  <label for="control-header-search-text-align-center"><span class="label-icon"></span>Center</label>
+                  <label for="control-header-search-text-align-center">Center</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
-                  <label for="control-header-search-text-align-right"><span class="label-icon"></span>Right</label>
+                  <label for="control-header-search-text-align-right">Right</label>
                 </div>
               </div>
             </div>
@@ -453,13 +449,13 @@
               <h1 class="menu-item-header-text">Buttons</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-edit-add-show" class="control-header-edit-add-show" type="checkbox" tabindex="1">
-                <label for="control-header-edit-add-show"><span class="label-icon"></span>Show Edit/Add</label>
+                <label for="control-header-edit-add-show">Show Edit/Add</label>
               </div>
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-accent-show" class="control-header-accent-show" type="checkbox" tabindex="1">
-                <label for="control-header-accent-show"><span class="label-icon"></span>Show Accent</label>
+                <label for="control-header-accent-show">Show Accent</label>
               </div>
             </div>
           </div>
@@ -468,17 +464,17 @@
               <h1 class="menu-item-header-text">Horizontal Alignment</h1>
             </div>
             <div class="menu-item-form">
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
-                <label for="control-layout-alignment-horizontal-left"><span class="label-icon"></span>Left</label>
+                <label for="control-layout-alignment-horizontal-left">Left</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
-                <label for="control-layout-alignment-horizontal-center"><span class="label-icon"></span>Center</label>
+                <label for="control-layout-alignment-horizontal-center">Center</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
-                <label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
+                <label for="control-layout-alignment-horizontal-right">Right</label>
                 <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>
             </div>
@@ -488,17 +484,17 @@
               <h1 class="menu-item-header-text">Vertical Alignment</h1>
             </div>
             <div class="menu-item-form">
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
-                <label for="control-layout-alignment-vertical-top"><span class="label-icon"></span>Top</label>
+                <label for="control-layout-alignment-vertical-top">Top</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
-                <label for="control-layout-alignment-vertical-center"><span class="label-icon"></span>Center</label>
+                <label for="control-layout-alignment-vertical-center">Center</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
-                <label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label>
+                <label for="control-layout-alignment-vertical-bottom">Bottom</label>
                 <p class="input-helper small muted">Available when Bookmarks are not shown.</p>
               </div>
             </div>
@@ -508,19 +504,19 @@
               <h1 class="menu-item-header-text">Background Shade</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="1">
-                <label for="control-header-shade-show"><span class="label-icon"></span>Show</label>
+                <label for="control-header-shade-show">Show</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <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"><span class="label-icon"></span>Always visible</label>
+                  <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>
-                <div class="radio-wrap">
+                <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"><span class="label-icon"></span>Visible on scroll</label>
+                  <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>
                 <hr>
@@ -537,9 +533,9 @@
                   <input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom mb-0" type="range" min="1" max="50" value="0" tabindex="1">
                 </div>
                 <hr>
-                <div class="checkbox-wrap">
+                <div class="input-wrap">
                   <input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
-                  <label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
+                  <label for="control-header-shade-border-top-show">Top border</label>
                 </div>
                 <div class="form-indent">
                   <div class="input-wrap">
@@ -548,9 +544,9 @@
                   </div>
                 </div>
                 <hr>
-                <div class="checkbox-wrap">
+                <div class="input-wrap">
                   <input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
-                  <label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
+                  <label for="control-header-shade-border-bottom-show">Bottom border</label>
                 </div>
                 <div class="form-indent">
                   <div class="input-wrap">
@@ -569,27 +565,27 @@
               <h1 class="menu-item-header-text">Bookmarks</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-bookmarks-link-show" class="control-bookmarks-link-show" type="checkbox" tabindex="1">
-                <label for="control-bookmarks-link-show"><span class="label-icon"></span>Show</label>
+                <label for="control-bookmarks-link-show">Show</label>
               </div>
               <div class="form-indent">
-                <div class="checkbox-wrap">
+                <div class="input-wrap">
                   <input id="control-bookmarks-name-show" class="control-bookmarks-name-show" type="checkbox" tabindex="1">
-                  <label for="control-bookmarks-name-show"><span class="label-icon"></span>Names</label>
+                  <label for="control-bookmarks-name-show">Names</label>
                 </div>
-                <div class="checkbox-wrap">
+                <div class="input-wrap">
                   <input id="control-bookmarks-url-show" class="control-bookmarks-url-show" type="checkbox" tabindex="1">
-                  <label for="control-bookmarks-url-show"><span class="label-icon"></span>URL on hover</label>
+                  <label for="control-bookmarks-url-show">URL on hover</label>
                 </div>
                 <div class="form-indent">
-                  <div class="radio-wrap">
+                  <div class="input-wrap">
                     <input id="control-bookmarks-url-style-dark" class="control-bookmarks-url-style-dark" type="radio" name="control-bookmarks-url-style" value="dark" tabindex="1">
-                    <label for="control-bookmarks-url-style-dark"><span class="label-icon"></span>Dark text</label>
+                    <label for="control-bookmarks-url-style-dark">Dark text</label>
                   </div>
-                  <div class="radio-wrap">
+                  <div class="input-wrap">
                     <input id="control-bookmarks-url-style-light" class="control-bookmarks-url-style-light" type="radio" name="control-bookmarks-url-style" value="light" tabindex="1">
-                    <label for="control-bookmarks-url-style-light"><span class="label-icon"></span>Light text</label>
+                    <label for="control-bookmarks-url-style-light">Light text</label>
                   </div>
                 </div>
               </div>
@@ -600,9 +596,9 @@
               <h1 class="menu-item-header-text">Open</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-bookmarks-new-tab" class="control-bookmarks-new-tab" type="checkbox" tabindex="1">
-                <label for="control-bookmarks-new-tab"><span class="label-icon"></span>In a new tab</label>
+                <label for="control-bookmarks-new-tab">In a new tab</label>
               </div>
             </div>
           </div>
@@ -611,13 +607,13 @@
               <h1 class="menu-item-header-text">Style</h1>
             </div>
             <div class="menu-item-form">
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-bookmarks-style-block" class="control-bookmarks-style-block" type="radio" name="control-bookmarks-style" value="block" tabindex="1">
-                <label for="control-bookmarks-style-block"><span class="label-icon"></span>Block</label>
+                <label for="control-bookmarks-style-block">Block</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-bookmarks-style-list" class="control-bookmarks-style-list" type="radio" name="control-bookmarks-style" value="list" tabindex="1">
-                <label for="control-bookmarks-style-list"><span class="label-icon"></span>List</label>
+                <label for="control-bookmarks-style-list">List</label>
               </div>
             </div>
           </div>
@@ -626,17 +622,17 @@
               <h1 class="menu-item-header-text">Sort</h1>
             </div>
             <div class="menu-item-form">
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-bookmarks-sort-none" class="control-bookmarks-sort-none" type="radio" name="control-bookmarks-sort" value="none" tabindex="1">
-                <label for="control-bookmarks-sort-none"><span class="label-icon"></span>None (as added)</label>
+                <label for="control-bookmarks-sort-none">None (as added)</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-bookmarks-sort-name" class="control-bookmarks-sort-name" type="radio" name="control-bookmarks-sort" value="name" tabindex="1">
-                <label for="control-bookmarks-sort-name"><span class="label-icon"></span>Name</label>
+                <label for="control-bookmarks-sort-name">Name</label>
               </div>
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-bookmarks-sort-letter" class="control-bookmarks-sort-letter" type="radio" name="control-bookmarks-sort" value="letter" tabindex="1">
-                <label for="control-bookmarks-sort-letter"><span class="label-icon"></span>Letter</label>
+                <label for="control-bookmarks-sort-letter">Letter</label>
               </div>
             </div>
           </div>
@@ -648,13 +644,13 @@
               <h1 class="menu-item-header-text">Style</h1>
             </div>
             <div class="menu-item-form">
-              <div class="radio-wrap">
+              <div class="input-wrap">
                 <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="1">
-                <label for="control-theme-style-dark"><span class="label-icon"></span>Dark</label>
+                <label for="control-theme-style-dark">Dark</label>
               </div>
-              <div class="radio-wrap">
+              <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"><span class="label-icon"></span>Light</label>
+                <label for="control-theme-style-light">Light</label>
                 <p class="input-helper small muted">Accent colour may need to be changed to best fit the Theme Style.</p>
               </div>
             </div>
@@ -664,30 +660,30 @@
               <h1 class="menu-item-header-text">Accent</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="1">
-                <label for="control-theme-accent-random-active"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
+                <label for="control-theme-accent-random-active">Random Accent colour on load/refresh</label>
               </div>
               <div class="form-indent">
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="1">
-                  <label for="control-theme-accent-random-style-any"><span class="label-icon"></span>Any colour</label>
+                  <label for="control-theme-accent-random-style-any">Any colour</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="1">
-                  <label for="control-theme-accent-random-style-light"><span class="label-icon"></span>Light colours</label>
+                  <label for="control-theme-accent-random-style-light">Light colours</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="1">
-                  <label for="control-theme-accent-random-style-dark"><span class="label-icon"></span>Dark colours</label>
+                  <label for="control-theme-accent-random-style-dark">Dark colours</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="1">
-                  <label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span>Pastel colours</label>
+                  <label for="control-theme-accent-random-style-pastel">Pastel colours</label>
                 </div>
-                <div class="radio-wrap">
+                <div class="input-wrap">
                   <input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="1">
-                  <label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span>Saturated colours</label>
+                  <label for="control-theme-accent-random-style-saturated">Saturated colours</label>
                 </div>
                 <hr>
                 <div class="button-wrap">
@@ -715,9 +711,9 @@
               <h1 class="menu-item-header-text">Page</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
-                <label for="control-layout-scroll-past-end"><span class="label-icon"></span>Scroll past end</label>
+                <label for="control-layout-scroll-past-end">Scroll past end</label>
               </div>
               <hr>
               <div class="input-wrap">
@@ -734,9 +730,9 @@
               <h1 class="menu-item-header-text">Image</h1>
             </div>
             <div class="menu-item-form">
-              <div class="checkbox-wrap">
+              <div class="input-wrap">
                 <input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="1">
-                <label for="control-background-image-show"><span class="label-icon"></span>Show</label>
+                <label for="control-background-image-show">Show</label>
               </div>
               <div class="form-indent">
                 <div class="input-wrap">
diff --git a/js/bookmarks.js b/js/bookmarks.js
index 6f11e55f..0554d137 100644
--- a/js/bookmarks.js
+++ b/js/bookmarks.js
@@ -4,131 +4,339 @@ var bookmarks = (function() {
     letter: "CM",
     name: "Citymapper",
     url: "https://citymapper.com/london/superrouter",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453100455
   }, {
     letter: "DEV",
     name: "Devdocs",
     url: "http://devdocs.io/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453101749
   }, {
     letter: "OD",
     name: "r/opendirectories/",
     url: "https://www.reddit.com/r/opendirectories/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453102199
   }, {
     letter: "KP",
     name: "Keep",
     url: "https://keep.google.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453102671
   }, {
     letter: "MHW",
     name: "r/monsterhunterworld/",
     url: "https://www.reddit.com/r/monsterhunterworld/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453103110
   }, {
     letter: "M",
     name: "Maps",
     url: "https://www.google.co.uk/maps",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453103560
   }, {
     letter: "AS",
     name: "awesomeSheet",
     url: "https://zombiefox.github.io/awesomeSheet/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453104010
   }, {
     letter: "N",
     name: "Netflix",
     url: "https://www.netflix.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453104460
   }, {
     letter: "P",
     name: "Photos",
     url: "https://photos.google.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453104910
   }, {
     letter: "FB",
     name: "Facebook",
     url: "https://www.facebook.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453105349
   }, {
     letter: "GOT",
     name: "r/gameofthrones/",
     url: "https://www.reddit.com/r/gameofthrones/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453105844
   }, {
     letter: "BX",
     name: "Box",
     url: "https://app.box.com/login/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453106272
   }, {
     letter: "TFL",
     name: "TFL Map",
     url: "http://content.tfl.gov.uk/standard-tube-map.pdf",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453106734
   }, {
     letter: "PRG",
     name: "r/Pathfinder_RPG/",
     url: "https://www.reddit.com/r/Pathfinder_RPG/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453107194
   }, {
     letter: "AZ",
     name: "Amazon",
     url: "https://www.amazon.co.uk/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453107633
   }, {
     letter: "YT",
     name: "Youtube",
     url: "https://www.youtube.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453108071
   }, {
     letter: "CO",
     name: "Contacts",
     url: "https://contacts.google.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453108501
   }, {
     letter: "GIT",
     name: "Github",
     url: "https://github.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453108926
   }, {
     letter: "AN",
     name: "r/Android/",
     url: "https://www.reddit.com/r/Android/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453109355
   }, {
     letter: "V",
     name: "r/videos/",
     url: "https://www.reddit.com/r/videos/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453109840
   }, {
     letter: "GM",
     name: "Gmail",
     url: "https://mail.google.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453110265
   }, {
     letter: "CAL",
     name: "Calendar",
     url: "https://www.google.com/calendar/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453110885
   }, {
     letter: "R",
     name: "Reddit",
     url: "https://www.reddit.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453111491
   }, {
     letter: "DR",
     name: "Drive",
     url: "https://drive.google.com/drive/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453111953
   }, {
     letter: "ANA",
     name: "Analytics",
     url: "https://analytics.google.com/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453112357
   }, {
     letter: "COS",
     name: "r/chromeos/",
     url: "https://www.reddit.com/r/chromeos/",
+    accent: {
+      override: false,
+      color: {
+        r: null,
+        g: null,
+        b: null
+      }
+    },
     timeStamp: 1546453112797
   }];
 
@@ -174,6 +382,7 @@ var bookmarks = (function() {
       letter: null,
       name: null,
       url: null,
+      accent: null,
       timeStamp: null
     };
     if (override) {
@@ -183,7 +392,8 @@ var bookmarks = (function() {
       letter: options.letter,
       name: options.name,
       url: options.url,
-      timeStamp: options.timeStamp
+      timeStamp: options.timeStamp,
+      accent: options.accent
     };
     all.push(newBookmark);
   };
diff --git a/js/control.js b/js/control.js
index 0d87f163..faa89a75 100644
--- a/js/control.js
+++ b/js/control.js
@@ -1197,10 +1197,10 @@ var control = (function() {
           path: object.path,
           newValue: newValue
         });
-        console.log(object.path, helper.getObject({
-          object: state.get(),
-          path: object.path
-        }));
+        // console.log(object.path, helper.getObject({
+        //   object: state.get(),
+        //   path: object.path
+        // }));
       };
     };
     var bindControl = function(object) {
diff --git a/js/link.js b/js/link.js
index f4020ab0..7b95eaed 100644
--- a/js/link.js
+++ b/js/link.js
@@ -34,6 +34,11 @@ var link = (function() {
     form.querySelector(".link-form-input-letter").value = currentBookmark.letter;
     form.querySelector(".link-form-input-name").value = currentBookmark.name;
     form.querySelector(".link-form-input-url").value = currentBookmark.url;
+    if (currentBookmark.accent.override) {
+      form.querySelector(".link-form-input-color").value = helper.rgbToHex(currentBookmark.accent.color);
+    } else {
+      form.querySelector(".link-form-input-color").value = helper.rgbToHex(state.get().theme.accent.current);
+    };
     modal.render({
       heading: "Edit " + currentBookmark.name,
       action: function() {
@@ -82,7 +87,19 @@ var link = (function() {
           letter: options.form.querySelector(".link-form-input-letter").value,
           name: options.form.querySelector(".link-form-input-name").value,
           url: options.form.querySelector(".link-form-input-url").value,
-          timeStamp: new Date().getTime()
+          timeStamp: new Date().getTime(),
+          accent: {
+            override: false,
+            color: {
+              r: null,
+              g: null,
+              b: null
+            }
+          }
+        };
+        if (options.form.querySelector(".link-form-input-color").value != helper.rgbToHex(state.get().theme.accent.current)) {
+          newBookmarkData.accent.override = true;
+          newBookmarkData.accent.color = helper.hexToRgb(options.form.querySelector(".link-form-input-color").value);
         };
         bookmarks.add(newBookmarkData);
       },
@@ -90,6 +107,17 @@ var link = (function() {
         options.bookmarkData.letter = options.form.querySelector(".link-form-input-letter").value;
         options.bookmarkData.name = options.form.querySelector(".link-form-input-name").value;
         options.bookmarkData.url = options.form.querySelector(".link-form-input-url").value;
+        if (options.form.querySelector(".link-form-input-color").value != helper.rgbToHex(state.get().theme.accent.current)) {
+          options.bookmarkData.accent.override = true;
+          options.bookmarkData.accent.color = helper.hexToRgb(options.form.querySelector(".link-form-input-color").value);
+        } else {
+          options.bookmarkData.accent.override = false;
+          options.bookmarkData.accent.color = {
+            r: null,
+            g: null,
+            b: null
+          };
+        };
         bookmarks.edit({
           bookmarkData: options.bookmarkData,
           timeStamp: options.bookmarkData.timeStamp
@@ -224,7 +252,7 @@ var link = (function() {
         value: "text"
       }, {
         key: "class",
-        value: "link-form-input-url mb-0"
+        value: "link-form-input-url"
       }, {
         key: "id",
         value: "url"
@@ -248,25 +276,111 @@ var link = (function() {
         value: "false"
       }]
     });
+    var colorInputWrap = helper.makeNode({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "input-wrap py-0"
+      }]
+    });
+    var colorFormGroup = helper.makeNode({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "form-group"
+      }]
+    });
+    var colorInputLabel = helper.makeNode({
+      tag: "label",
+      text: "Accent override",
+      attr: [{
+        key: "for",
+        value: "color"
+      }]
+    });
+    var colorInputInput = helper.makeNode({
+      tag: "input",
+      attr: [{
+        key: "id",
+        value: "color"
+      }, {
+        key: "class",
+        value: "link-form-input-color mb-0"
+      }, {
+        key: "type",
+        value: "color"
+      }, {
+        key: "value",
+        value: helper.rgbToHex(state.get().theme.accent.current)
+      }, {
+        key: "tabindex",
+        value: "1"
+      }]
+    });
+    var colorButtonRefresh = helper.makeNode({
+      tag: "button",
+      attr: [{
+        key: "class",
+        value: "button mb-0"
+      }, {
+        key: "type",
+        value: "button"
+      }, {
+        key: "tabindex",
+        value: "1"
+      }]
+    });
+    var colorButtonRefreshIcon = helper.makeNode({
+      tag: "span",
+      attr: [{
+        key: "class",
+        value: "icon-refresh"
+      }]
+    });
+    var colorPara = helper.makeNode({
+      tag: "p",
+      text: "Use this color to override the global Accent colour.",
+      attr: [{
+        key: "class",
+        value: "input-helper small muted"
+      }]
+    });
+    colorButtonRefresh.addEventListener("click", function(event) {
+      colorInputInput.value = helper.rgbToHex(state.get().theme.accent.current);
+    }, false);
     fieldset.appendChild(letterLabel);
     fieldset.appendChild(letterInput);
     fieldset.appendChild(nameLabel);
     fieldset.appendChild(nameInput);
     fieldset.appendChild(urlLabel);
     fieldset.appendChild(urlInput);
+    fieldset.appendChild(colorInputLabel);
+    colorFormGroup.appendChild(colorInputInput);
+    colorButtonRefresh.appendChild(colorButtonRefreshIcon);
+    colorFormGroup.appendChild(colorButtonRefresh);
+    colorInputWrap.appendChild(colorFormGroup);
+    fieldset.appendChild(colorInputWrap);
+    fieldset.appendChild(colorPara);
     form.appendChild(fieldset);
     return form;
   };
 
   var _makeLink = function(data) {
-    var linkItem = helper.makeNode({
+    var linkItemOptions = {
       tag: "div",
       attr: [{
         key: "class",
         value: "link-item"
       }]
-    });
-    var linkOptions = {
+    };
+    if (data.accent.override) {
+      linkItemOptions.attr.push({
+        key: "style",
+        value: "--accent: " + data.accent.color.r + ", " + data.accent.color.g + ", " + data.accent.color.b
+      });
+    };
+    var linkItem = helper.makeNode(linkItemOptions);
+    var linkPanelFrontOptions = {
       tag: "a",
       attr: [{
         key: "class",
@@ -280,12 +394,12 @@ var link = (function() {
       }]
     };
     if (state.get().bookmarks.newTab) {
-      linkOptions.attr.push({
+      linkPanelFrontOptions.attr.push({
         key: "target",
         value: "_blank"
       });
     };
-    var linkPanelFront = helper.makeNode(linkOptions);
+    var linkPanelFront = helper.makeNode(linkPanelFrontOptions);
     var linkPanelBack = helper.makeNode({
       tag: "div",
       attr: [{
diff --git a/js/update.js b/js/update.js
index c5b77049..983e4eed 100644
--- a/js/update.js
+++ b/js/update.js
@@ -304,6 +304,21 @@ var update = (function() {
     return data;
   };
 
+  var _update_2220 = function(data) {
+    data.version = "2.22.0";
+    data.bookmarks.forEach(function(item, index) {
+      item.accent = {
+        override: false,
+        color: {
+          r: null,
+          g: null,
+          b: null
+        }
+      };
+    });
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -390,6 +405,10 @@ var update = (function() {
         console.log("\t= running update 2.21.0");
         data = _update_2210(data);
       };
+      if (version.compare(data.version, "2.22.0") == -1) {
+        console.log("\t= running update 2.22.0");
+        data = _update_2220(data);
+      };
     };
     // if no update is needed
     // version bump
diff --git a/js/version.js b/js/version.js
index 369c7fa1..e21ccb93 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.21.0";
+  var current = "2.22.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");