[feature] add header item and open all opacity controls

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/css/form.css

@@ -117,9 +117,7 @@ select {
   min-height: 2.5em;
   min-width: 0;
   width: 100%;
-  border-color: rgb(var(--form-input-border));
+  border-width: 0;
-  border-width: var(--theme-line-width);
-  border-style: solid;
   border-radius: var(--theme-radius);
   cursor: pointer;
   transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@@ -133,7 +131,6 @@ select:hover {
     linear-gradient(45deg, transparent 60%, rgb(var(--form-label-hover)) 60%),
     linear-gradient(135deg, rgb(var(--form-label-hover)) 40%, transparent 40%);
   background-color: rgb(var(--form-input-background-hover));
-  border-color: rgb(var(--form-input-border-hover));
   color: rgb(var(--form-label-hover));
   outline: none;
   box-shadow: var(--form-ring-hover);
@@ -145,7 +142,6 @@ select:active {
     linear-gradient(45deg, transparent 60%, rgb(var(--form-label-focus-active)) 60%),
     linear-gradient(135deg, rgb(var(--form-label-focus-active)) 40%, transparent 40%);
   background-color: rgb(var(--form-input-background-border-focus-active));
-  border-color: rgb(var(--form-input-border-focus-active));
   color: rgb(var(--form-label-focus-active));
   outline: none;
   z-index: 2;
@@ -160,7 +156,6 @@ select:disabled:active {
   background-image:
     linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
     linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
-  border-color: rgb(var(--form-input-border-disabled));
   color: rgb(var(--form-input-text-disabled));
   cursor: default;
   box-shadow: none;
@@ -169,7 +164,7 @@ select:disabled:active {
 /* textarea */
 textarea {
   background-color: rgb(var(--form-input-background));
-  padding: 0.25em 1em;
+  padding: 0.5em 1em;
   margin: 0;
   color: rgb(var(--form-input-text));
   font-size: 1em;
@@ -181,9 +176,7 @@ textarea {
   min-height: 2.5em;
   min-width: 0;
   width: 100%;
-  border-color: rgb(var(--form-input-border));
+  border-width: 0;
-  border-width: var(--theme-line-width);
-  border-style: solid;
   border-radius: var(--theme-radius);
   cursor: text;
   resize: vertical;
@@ -194,7 +187,6 @@ textarea {
 
 textarea:hover {
   background-color: rgb(var(--form-input-background-hover));
-  border-color: rgb(var(--form-input-border-hover));
   color: rgb(var(--form-input-text-hover));
   outline: none;
   box-shadow: var(--form-ring-hover);
@@ -203,7 +195,6 @@ textarea:hover {
 textarea:focus,
 textarea:active {
   background-color: rgb(var(--form-input-background-focus-active));
-  border-color: rgb(var(--form-input-border-focus-active));
   color: rgb(var(--form-input-text-focus-active));
   outline: none;
   box-shadow: var(--form-ring-accent);
@@ -211,7 +202,6 @@ textarea:active {
 
 textarea:disabled {
   background-color: rgb(var(--form-input-background-disabled));
-  border-color: rgb(var(--form-input-border-disabled));
   color: rgb(var(--form-input-text-disabled));
   cursor: default;
   box-shadow: none;
@@ -261,9 +251,7 @@ input[type="text"] {
   height: 2.5em;
   min-width: 0;
   width: 100%;
-  border-color: rgb(var(--form-input-border));
+  border-width: 0;
-  border-width: var(--theme-line-width);
-  border-style: solid;
   border-radius: var(--theme-radius);
   cursor: text;
   transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
@@ -287,7 +275,6 @@ input[type="search"]:hover,
 input[type="tel"]:hover,
 input[type="text"]:hover {
   background-color: rgb(var(--form-input-background-hover));
-  border-color: rgb(var(--form-input-border-hover));
   color: rgb(var(--form-input-text-hover));
   outline: none;
   box-shadow: var(--form-ring-hover);
@@ -306,7 +293,6 @@ input[type="tel"]:active,
 input[type="text"]:focus,
 input[type="text"]:active {
   background-color: rgb(var(--form-input-background-focus-active));
-  border-color: rgb(var(--form-input-border-focus-active));
   color: rgb(var(--form-input-text-focus-active));
   outline: none;
   z-index: 2;
@@ -320,7 +306,6 @@ input[type="search"]:disabled,
 input[type="tel"]:disabled,
 input[type="text"]:disabled {
   background-color: rgb(var(--form-input-background-disabled));
-  border-color: rgb(var(--form-input-border-disabled));
   color: rgb(var(--form-input-text-disabled));
   cursor: default;
   box-shadow: none;
@@ -397,7 +382,6 @@ input[type="text"]:disabled:focus::placeholder {
 .input-clear[type="tel"],
 .input-clear[type="text"] {
   background-color: transparent;
-  border-color: transparent;
 }
 
 .input-clear[type="email"]:hover,
@@ -407,7 +391,6 @@ input[type="text"]:disabled:focus::placeholder {
 .input-clear[type="tel"]:hover,
 .input-clear[type="text"]:hover {
   background-color: transparent;
-  border-color: transparent;
   box-shadow: none;
 }
 
@@ -424,7 +407,6 @@ input[type="text"]:disabled:focus::placeholder {
 .input-clear[type="text"]:focus,
 .input-clear[type="text"]:active {
   background-color: transparent;
-  border-color: transparent;
   box-shadow: var(--form-ring-accent);
 }
 

src/css/group.css

@@ -152,6 +152,36 @@
   font-size: var(--group-openall-size);
 }
 
+.group-openall-item {
+  background-color: rgba(var(--button-background), var(--group-openall-opacity));
+}
+
+.group-openall-item:focus,
+.group-openall-item:hover {
+  background-color: rgba(var(--button-background-focus-hover), var(--group-openall-opacity));
+}
+
+.group-openall-item:active {
+  background-color: rgba(var(--button-background-active), var(--group-openall-opacity));
+}
+
+.group-openall-item:after {
+  background-color: rgba(var(--button-border), var(--group-openall-opacity));
+}
+
+.group-openall-item:focus:after,
+.group-openall-item:hover:after {
+  background-color: rgba(var(--button-border-focus-hover), var(--group-openall-opacity));
+}
+
+.group-openall-item:active:after {
+  background-color: rgb(var(--button-border-active));
+}
+
+.is-group-openall-opacity .group-openall-item:active:after {
+  background-color: transparent;
+}
+
 .group-body {
   background-color: transparent;
   font-size: var(--link-item-size);

src/css/header.css

@@ -247,6 +247,149 @@
   flex-grow: 1;
 }
 
+.form-input-button .header-edit[type="checkbox"]+label {
+  background-color: rgba(var(--button-background), var(--header-editadd-opacity));
+}
+
+.form-input-button .header-edit[type="checkbox"]:focus+label,
+.form-input-button .header-edit[type="checkbox"]:hover+label {
+  background-color: rgba(var(--button-background-focus-hover), var(--header-editadd-opacity));
+}
+
+.form-input-button .header-edit[type="checkbox"]:active+label {
+  background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
+}
+
+.form-input-button .header-edit[type="checkbox"]:checked+label {
+  background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
+}
+
+.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label,
+.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label {
+  background-color: transparent;
+}
+
+.form-input-button .header-edit[type="checkbox"]+label:after {
+  background-color: rgba(var(--button-border), var(--header-editadd-opacity));
+}
+
+.form-input-button .header-edit[type="checkbox"]:focus+label:after,
+.form-input-button .header-edit[type="checkbox"]:hover+label:after {
+  background-color: rgba(var(--button-border-focus-hover), var(--header-editadd-opacity));
+}
+
+.form-input-button .header-edit[type="checkbox"]:active+label:after {
+  background-color: rgb(var(--button-border-active));
+}
+
+.form-input-button .header-edit[type="checkbox"]:checked+label:after {
+  background-color: rgb(var(--button-border-active));
+}
+
+.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label:after,
+.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label:after {
+  background-color: transparent;
+}
+
+.header-add {
+  background-color: rgba(var(--button-background), var(--header-editadd-opacity));
+}
+
+.header-add:focus,
+.header-add:hover {
+  background-color: rgba(var(--button-background-focus-hover), var(--header-editadd-opacity));
+}
+
+.header-add:active {
+  background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
+}
+
+.header-add:after {
+  background-color: rgba(var(--button-border), var(--header-editadd-opacity));
+}
+
+.header-add:focus:after,
+.header-add:hover:after {
+  background-color: rgba(var(--button-border-focus-hover), var(--header-editadd-opacity));
+}
+
+.header-add:active:after {
+  background-color: rgb(var(--button-border-active));
+}
+
+.is-header-add-opacity .header-add:active:after {
+  background-color: transparent;
+}
+
+.form-input-button .header-color[type="color"]+label,
+.form-input-button .header-accent[type="color"]+label {
+  background-color: rgba(var(--button-background), var(--header-coloraccent-opacity));
+}
+
+.form-input-button .header-color[type="color"]:focus+label,
+.form-input-button .header-color[type="color"]:hover+label,
+.form-input-button .header-accent[type="color"]:focus+label,
+.form-input-button .header-accent[type="color"]:hover+label {
+  background-color: rgba(var(--button-background-focus-hover), var(--header-coloraccent-opacity));
+}
+
+.form-input-button .header-color[type="color"]:active+label,
+.form-input-button .header-accent[type="color"]:active+label {
+  background-color: rgba(var(--button-background-active), var(--header-coloraccent-opacity));
+}
+
+.form-input-button .header-color[type="color"]+label:after,
+.form-input-button .header-accent[type="color"]+label:after {
+  background-color: rgba(var(--button-border), var(--header-coloraccent-opacity));
+}
+
+.form-input-button .header-color[type="color"]:focus+label:after,
+.form-input-button .header-color[type="color"]:hover+label:after,
+.form-input-button .header-accent[type="color"]:focus+label:after,
+.form-input-button .header-accent[type="color"]:hover+label:after {
+  background-color: rgba(var(--button-border-focus-hover), var(--header-coloraccent-opacity));
+}
+
+.form-input-button .header-color[type="color"]:active+label:after,
+.form-input-button .header-accent[type="color"]:active+label:after {
+  background-color: rgb(var(--button-border-active));
+}
+
+.is-header-coloraccent-opacity .form-input-button .header-color[type="color"]:active+label:after,
+.is-header-coloraccent-opacity .form-input-button .header-accent[type="color"]:active+label:after {
+  background-color: transparent;
+}
+
+.header-menu {
+  background-color: rgba(var(--button-background), var(--header-menu-opacity));
+}
+
+.header-menu:focus,
+.header-menu:hover {
+  background-color: rgba(var(--button-background-focus-hover), var(--header-menu-opacity));
+}
+
+.header-menu:active {
+  background-color: rgba(var(--button-background-active), var(--header-menu-opacity));
+}
+
+.header-menu:after {
+  background-color: rgba(var(--button-border), var(--header-menu-opacity));
+}
+
+.header-menu:focus:after,
+.header-menu:hover:after {
+  background-color: rgba(var(--button-border-focus-hover), var(--header-menu-opacity));
+}
+
+.header-menu:active:after {
+  background-color: rgb(var(--button-border-active));
+}
+
+.is-header-menu-opacity .header-menu:active:after {
+  background-color: transparent;
+}
+
 .is-header-item-newline-search.is-header-search-width-by-custom .header-item-body-search {
   flex-grow: 0;
   width: var(--header-search-width-size);

src/css/search.css

@@ -7,6 +7,19 @@
   width: 100%;
 }
 
+.search-input[type="text"] {
+  background-color: rgba(var(--form-input-background), var(--header-search-opacity));
+}
+
+.search-input[type="text"]:hover {
+  background-color: rgba(var(--form-input-background-hover), var(--header-search-opacity));
+}
+
+.search-input[type="text"]:focus,
+.search-input[type="text"]:active {
+  background-color: rgba(var(--form-input-background-focus-active), var(--header-search-opacity));
+}
+
 .search-clear {
   position: absolute;
   top: 50%;

src/css/variables.css

@@ -87,20 +87,25 @@
   --header-color-theme:                                 var(--theme-color-01);
   --header-color-custom:                                rgb(0, 0, 0);
   --header-opacity:                                     0.95;
-  --header-search-width-size:                           30%;
   --header-border-top:                                  0;
   --header-border-bottom:                               0;
   --header-date-size:                                   1em;
   --header-clock-size:                                  1em;
   --header-search-size:                                 1em;
+  --header-search-width-size:                           30%;
+  --header-search-opacity:                              1;
   --header-editadd-size:                                1em;
+  --header-editadd-opacity:                             1;
   --header-coloraccent-size:                            1em;
+  --header-coloraccent-opacity:                         1;
   --header-menu-size:                                   1em;
+  --header-menu-opacity:                                1;
   --header-greeting-size:                               1em;
   --header-transitional-size:                           1em;
   /* group */
   --group-name-size:                                    1em;
   --group-openall-size:                                 1em;
+  --group-openall-opacity:                              1;
   --group-border:                                       0;
   /* link */
   --link-area-width:                                    100%;
@@ -164,10 +169,6 @@
   --form-input-background-hover:                        var(--theme-color-02);
   --form-input-background-focus-active:                 var(--theme-color-01);
   --form-input-background-disabled:                     var(--theme-color-01);
-  --form-input-border:                                  var(--theme-color-02);
-  --form-input-border-hover:                            var(--theme-color-02);
-  --form-input-border-focus-active:                     var(--theme-color-01);
-  --form-input-border-disabled:                         var(--theme-color-01);
   --form-group-text-background:                         var(--theme-color-02);
   --form-group-text-background-focus-hover:             var(--theme-color-02);
   --form-group-text-background-active:                  var(--theme-color-02);

src/html/menu/content/groups/openall.html

@@ -23,15 +23,12 @@
     </div>
     <hr>
     <div class="form-wrap">
-      <label class="control-group-openall-style-label">Button style</label>
+      <label for="control-group-openall-opacity-range">Opacity</label>
+      <div class="form-group form-group-block">
+        <input id="control-group-openall-opacity-range" class="control-group-openall-opacity-range mr-3" type="range" value="0" tabindex="-1">
+        <input class="control-group-openall-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+        <button class="control-group-openall-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
       </div>
-    <div class="form-wrap">
-      <input id="control-group-openall-style-box" class="control-group-openall-style-box" type="radio" name="control-group-openall-style" value="box" tabindex="-1">
-      <label for="control-group-openall-style-box"><span class="label-icon"></span> Box</label>
-    </div>
-    <div class="form-wrap">
-      <input id="control-group-openall-style-clear" class="control-group-openall-style-clear" type="radio" name="control-group-openall-style" value="clear" tabindex="-1">
-      <label for="control-group-openall-style-clear"><span class="label-icon"></span> Clear</label>
     </div>
   </div>
 </div>

src/html/menu/content/header.html

@@ -20,7 +20,7 @@
 
   @@include("./header/coloraccent.html")
 
-  @@include("./header/settings.html")
+  @@include("./header/menu.html")
 
   @@include("./header/border.html")
 

src/html/menu/content/header/coloraccent.html

@@ -17,18 +17,6 @@
           <label for="control-header-coloraccent-dot-show"><span class="label-icon"></span> Show colour dots</label>
         </div>
         <hr>
-        <div class="form-wrap">
-          <label class="control-header-coloraccent-style-label">Button style</label>
-        </div>
-        <div class="form-wrap">
-          <input id="control-header-coloraccent-style-box" class="control-header-coloraccent-style-box" type="radio" name="control-header-coloraccent-style" value="box" tabindex="-1">
-          <label for="control-header-coloraccent-style-box"><span class="label-icon"></span> Box</label>
-        </div>
-        <div class="form-wrap">
-          <input id="control-header-coloraccent-style-clear" class="control-header-coloraccent-style-clear" type="radio" name="control-header-coloraccent-style" value="clear" tabindex="-1">
-          <label for="control-header-coloraccent-style-clear"><span class="label-icon"></span> Clear</label>
-        </div>
-        <hr>
         <div class="form-wrap">
           <label for="control-header-coloraccent-size-range">Size</label>
           <div class="form-group form-group-block">
@@ -38,6 +26,15 @@
           </div>
         </div>
         <hr>
+        <div class="form-wrap">
+          <label for="control-header-coloraccent-opacity-range">Opacity</label>
+          <div class="form-group form-group-block">
+            <input id="control-header-coloraccent-opacity-range" class="control-header-coloraccent-opacity-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-header-coloraccent-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-header-coloraccent-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+        <hr>
         <div class="form-wrap">
           <input id="control-header-coloraccent-newline" class="control-header-coloraccent-newline" type="checkbox" tabindex="-1">
           <label for="control-header-coloraccent-newline"><span class="label-icon"></span> New line</label>

src/html/menu/content/header/editadd.html

@@ -9,18 +9,6 @@
     </div>
     <div class="form-wrap">
       <div class="form-indent">
-        <div class="form-wrap">
-          <label class="control-header-editadd-style-label">Button style</label>
-        </div>
-        <div class="form-wrap">
-          <input id="control-header-editadd-style-box" class="control-header-editadd-style-box" type="radio" name="control-header-editadd-style" value="box" tabindex="-1">
-          <label for="control-header-editadd-style-box"><span class="label-icon"></span> Box</label>
-        </div>
-        <div class="form-wrap">
-          <input id="control-header-editadd-style-clear" class="control-header-editadd-style-clear" type="radio" name="control-header-editadd-style" value="clear" tabindex="-1">
-          <label for="control-header-editadd-style-clear"><span class="label-icon"></span> Clear</label>
-        </div>
-        <hr>
         <div class="form-wrap">
           <label for="control-header-editadd-size-range">Size</label>
           <div class="form-group form-group-block">
@@ -30,6 +18,15 @@
           </div>
         </div>
         <hr>
+        <div class="form-wrap">
+          <label for="control-header-editadd-opacity-range">Opacity</label>
+          <div class="form-group form-group-block">
+            <input id="control-header-editadd-opacity-range" class="control-header-editadd-opacity-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-header-editadd-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-header-editadd-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+        <hr>
         <div class="form-wrap">
           <input id="control-header-editadd-newline" class="control-header-editadd-newline" type="checkbox" tabindex="-1">
           <label for="control-header-editadd-newline"><span class="label-icon"></span> New line</label>

src/html/menu/content/header/menu.html

@@ -1,20 +1,8 @@
-<div id="menu-content-header-settings" class="menu-content-item">
+<div id="menu-content-header-menu" class="menu-content-item">
   <div class="menu-item-header">
     <h1 class="menu-item-header-text">Settings menu</h1>
   </div>
   <div class="menu-item-form">
-    <div class="form-wrap">
-      <label class="control-header-menu-style-label">Button style</label>
-    </div>
-    <div class="form-wrap">
-      <input id="control-header-menu-style-box" class="control-header-menu-style-box" type="radio" name="control-header-menu-style" value="box" tabindex="-1">
-      <label for="control-header-menu-style-box"><span class="label-icon"></span> Box</label>
-    </div>
-    <div class="form-wrap">
-      <input id="control-header-menu-style-clear" class="control-header-menu-style-clear" type="radio" name="control-header-menu-style" value="clear" tabindex="-1">
-      <label for="control-header-menu-style-clear"><span class="label-icon"></span> Clear</label>
-    </div>
-    <hr>
     <div class="form-wrap">
       <label for="control-header-menu-size-range">Size</label>
       <div class="form-group form-group-block">
@@ -24,6 +12,15 @@
       </div>
     </div>
     <hr>
+    <div class="form-wrap">
+      <label for="control-header-menu-opacity-range">Opacity</label>
+      <div class="form-group form-group-block">
+        <input id="control-header-menu-opacity-range" class="control-header-menu-opacity-range mr-3" type="range" value="0" tabindex="-1">
+        <input class="control-header-menu-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+        <button class="control-header-menu-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+      </div>
+    </div>
+    <hr>
     <div class="form-wrap">
       <input id="control-header-menu-newline" class="control-header-menu-newline" type="checkbox" tabindex="-1">
       <label for="control-header-menu-newline"><span class="label-icon"></span> New line</label>

src/html/menu/content/header/search.html

@@ -39,15 +39,12 @@
         </div>
         <hr>
         <div class="form-wrap">
-          <label class="control-header-search-style-label">Input style</label>
+          <label for="control-header-search-opacity-range">Opacity</label>
+          <div class="form-group form-group-block">
+            <input id="control-header-search-opacity-range" class="control-header-search-opacity-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-header-search-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-header-search-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
           </div>
-        <div class="form-wrap">
-          <input id="control-header-search-style-box" class="control-header-search-style-box" type="radio" name="control-header-search-style" value="box" tabindex="-1">
-          <label for="control-header-search-style-box"><span class="label-icon"></span> Box</label>
-        </div>
-        <div class="form-wrap">
-          <input id="control-header-search-style-clear" class="control-header-search-style-clear" type="radio" name="control-header-search-style" value="clear" tabindex="-1">
-          <label for="control-header-search-style-clear"><span class="label-icon"></span> Clear</label>
         </div>
         <hr>
         <div class="form-wrap">

src/html/menu/nav.html

@@ -23,7 +23,7 @@
       <a href="#menu-content-header-search" class="menu-nav-sub button button-small" tabindex="-1">Search</a>
       <a href="#menu-content-header-editadd" class="menu-nav-sub button button-small" tabindex="-1">Edit/Add</a>
       <a href="#menu-content-header-coloraccent" class="menu-nav-sub button button-small" tabindex="-1">Colour/Accent</a>
-      <a href="#menu-content-header-settings" class="menu-nav-sub button button-small" tabindex="-1">Settings menu</a>
+      <a href="#menu-content-header-menu" class="menu-nav-sub button button-small" tabindex="-1">Settings menu</a>
       <a href="#menu-content-header-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
       <a href="#menu-content-header-position" class="menu-nav-sub button button-small" tabindex="-1">Position when scrolling</a>
       <a href="#menu-content-header-color" class="menu-nav-sub button button-small" tabindex="-1">Background colour</a>

src/js/control.js

@@ -2044,50 +2044,51 @@ var control = (function() {
             render.update.control.menu();
           }
         }, {
-          element: ".control-header-search-style-box",
+          element: ".control-header-search-opacity-range",
-          path: "header.search.style",
+          path: "header.search.opacity",
-          type: "radio",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-search-opacity-number",
+            path: "header.search.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
           func: function() {
-            header.render.item.clear();
+            header.render.search.opacity();
-            header.render.item.all();
+            render.class();
-            greeting.render.clear();
-            greeting.render.all();
-            clock.render.clear();
-            clock.render.all();
-            transitional.render.clear();
-            transitional.render.all();
-            date.render.clear();
-            date.render.all();
-            render.dependents();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
           }
         }, {
-          element: ".control-header-search-style-clear",
+          element: ".control-header-search-opacity-number",
-          path: "header.search.style",
+          path: "header.search.opacity",
-          type: "radio",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-search-opacity-range",
+            path: "header.search.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
           func: function() {
-            header.render.item.clear();
+            header.render.search.opacity();
-            header.render.item.all();
+            render.class();
-            greeting.render.clear();
+          }
-            greeting.render.all();
+        }, {
-            clock.render.clear();
+          element: ".control-header-search-opacity-default",
-            clock.render.all();
+          type: "button",
-            transitional.render.clear();
+          func: function() {
-            transitional.render.all();
+            mod.default("header.search.opacity");
-            date.render.clear();
+            header.render.search.opacity();
-            date.render.all();
+            render.update.control.menu();
-            render.dependents();
+            render.class();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
           }
         }, {
           element: ".control-header-search-focus",
@@ -2328,52 +2329,6 @@ var control = (function() {
             dropdown.bind.editAdd();
             render.dependents();
           }
-        }, {
-          element: ".control-header-editadd-style-box",
-          path: "header.editAdd.style",
-          type: "radio",
-          func: function() {
-            header.render.item.clear();
-            header.render.item.all();
-            greeting.render.clear();
-            greeting.render.all();
-            clock.render.clear();
-            clock.render.all();
-            transitional.render.clear();
-            transitional.render.all();
-            date.render.clear();
-            date.render.all();
-            render.dependents();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
-          }
-        }, {
-          element: ".control-header-editadd-style-clear",
-          path: "header.editAdd.style",
-          type: "radio",
-          func: function() {
-            header.render.item.clear();
-            header.render.item.all();
-            greeting.render.clear();
-            greeting.render.all();
-            clock.render.clear();
-            clock.render.all();
-            transitional.render.clear();
-            transitional.render.all();
-            date.render.clear();
-            date.render.all();
-            render.dependents();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
-          }
         }, {
           element: ".control-header-editadd-size-range",
           path: "header.editAdd.size",
@@ -2469,6 +2424,53 @@ var control = (function() {
             render.update.control.header();
             render.update.control.menu();
           }
+        }, {
+          element: ".control-header-editadd-opacity-range",
+          path: "header.editAdd.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-editadd-opacity-number",
+            path: "header.editAdd.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            header.render.editadd.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-header-editadd-opacity-number",
+          path: "header.editAdd.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-editadd-opacity-range",
+            path: "header.editAdd.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            header.render.editadd.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-header-editadd-opacity-default",
+          type: "button",
+          func: function() {
+            mod.default("header.editAdd.opacity");
+            header.render.editadd.opacity();
+            render.update.control.menu();
+            render.class();
+          }
         }, {
           element: ".control-header-editadd-newline",
           path: "header.editAdd.newLine",
@@ -2523,52 +2525,6 @@ var control = (function() {
             search.bind.clear();
             dropdown.bind.editAdd();
           }
-        }, {
-          element: ".control-header-coloraccent-style-box",
-          path: "header.colorAccent.style",
-          type: "radio",
-          func: function() {
-            header.render.item.clear();
-            header.render.item.all();
-            greeting.render.clear();
-            greeting.render.all();
-            clock.render.clear();
-            clock.render.all();
-            transitional.render.clear();
-            transitional.render.all();
-            date.render.clear();
-            date.render.all();
-            render.dependents();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
-          }
-        }, {
-          element: ".control-header-coloraccent-style-clear",
-          path: "header.colorAccent.style",
-          type: "radio",
-          func: function() {
-            header.render.item.clear();
-            header.render.item.all();
-            greeting.render.clear();
-            greeting.render.all();
-            clock.render.clear();
-            clock.render.all();
-            transitional.render.clear();
-            transitional.render.all();
-            date.render.clear();
-            date.render.all();
-            render.dependents();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
-          }
         }, {
           element: ".control-header-coloraccent-size-range",
           path: "header.colorAccent.size",
@@ -2664,6 +2620,53 @@ var control = (function() {
             render.update.control.header();
             render.update.control.menu();
           }
+        }, {
+          element: ".control-header-coloraccent-opacity-range",
+          path: "header.colorAccent.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-coloraccent-opacity-number",
+            path: "header.colorAccent.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            header.render.coloraccent.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-header-coloraccent-opacity-number",
+          path: "header.colorAccent.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-coloraccent-opacity-range",
+            path: "header.colorAccent.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            header.render.coloraccent.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-header-coloraccent-opacity-default",
+          type: "button",
+          func: function() {
+            mod.default("header.colorAccent.opacity");
+            header.render.coloraccent.opacity();
+            render.update.control.menu();
+            render.class();
+          }
         }, {
           element: ".control-header-coloraccent-newline",
           path: "header.colorAccent.newLine",
@@ -2672,53 +2675,7 @@ var control = (function() {
             render.class();
           }
         }],
-        settings: [{
+        menu: [{
-          element: ".control-header-menu-style-box",
-          path: "header.menu.style",
-          type: "radio",
-          func: function() {
-            header.render.item.clear();
-            header.render.item.all();
-            greeting.render.clear();
-            greeting.render.all();
-            clock.render.clear();
-            clock.render.all();
-            transitional.render.clear();
-            transitional.render.all();
-            date.render.clear();
-            date.render.all();
-            render.dependents();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
-          }
-        }, {
-          element: ".control-header-menu-style-clear",
-          path: "header.menu.style",
-          type: "radio",
-          func: function() {
-            header.render.item.clear();
-            header.render.item.all();
-            greeting.render.clear();
-            greeting.render.all();
-            clock.render.clear();
-            clock.render.all();
-            transitional.render.clear();
-            transitional.render.all();
-            date.render.clear();
-            date.render.all();
-            render.dependents();
-            render.update.control.header();
-            bind.control.header();
-            search.render.engine();
-            search.bind.input();
-            search.bind.clear();
-            dropdown.bind.editAdd();
-          }
-        }, {
           element: ".control-header-menu-size-range",
           path: "header.menu.size",
           type: "range",
@@ -2813,6 +2770,53 @@ var control = (function() {
             render.update.control.header();
             render.update.control.menu();
           }
+        }, {
+          element: ".control-header-menu-opacity-range",
+          path: "header.menu.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-menu-opacity-number",
+            path: "header.menu.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            header.render.menu.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-header-menu-opacity-number",
+          path: "header.menu.opacity",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-header-menu-opacity-range",
+            path: "header.menu.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
+          func: function() {
+            header.render.menu.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-header-menu-opacity-default",
+          type: "button",
+          func: function() {
+            mod.default("header.menu.opacity");
+            header.render.menu.opacity();
+            render.update.control.menu();
+            render.class();
+          }
         }, {
           element: ".control-header-menu-newline",
           path: "header.menu.newLine",
@@ -4253,18 +4257,51 @@ var control = (function() {
             render.update.control.menu();
           }
         }, {
-          element: ".control-group-openall-style-box",
+          element: ".control-group-openall-opacity-range",
-          path: "group.openAll.style",
+          path: "group.openAll.opacity",
-          type: "radio",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-group-openall-opacity-number",
+            path: "group.openAll.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
           func: function() {
-            link.groupAndItems();
+            link.render.group.openall.opacity();
+            render.class();
           }
         }, {
-          element: ".control-group-openall-style-clear",
+          element: ".control-group-openall-opacity-number",
-          path: "group.openAll.style",
+          path: "group.openAll.opacity",
-          type: "radio",
+          type: "range",
+          valueConvert: ["float"],
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-group-openall-opacity-range",
+            path: "group.openAll.opacity",
+            type: "number",
+            valueConvert: ["float"]
+          }],
           func: function() {
-            link.groupAndItems();
+            link.render.group.openall.opacity();
+            render.class();
+          }
+        }, {
+          element: ".control-group-openall-opacity-default",
+          type: "button",
+          func: function() {
+            mod.default("group.openAll.opacity");
+            link.render.group.openall.opacity();
+            render.update.control.menu();
+            render.class();
           }
         }],
         border: [{
@@ -6542,6 +6579,14 @@ var control = (function() {
             return state.get.current().header.editAdd.newLine;
           },
           name: "is-header-item-newline-editadd"
+        }, {
+          remove: [
+            "is-header-editadd-opacity"
+          ],
+          condition: function() {
+            return (state.get.current().header.editAdd.opacity == 0);
+          },
+          name: "is-header-editadd-opacity"
         }],
         coloraccent: [{
           remove: [
@@ -6551,6 +6596,14 @@ var control = (function() {
             return state.get.current().header.colorAccent.newLine;
           },
           name: "is-header-item-newline-coloraccent"
+        }, {
+          remove: [
+            "is-header-coloraccent-opacity"
+          ],
+          condition: function() {
+            return (state.get.current().header.colorAccent.opacity == 0);
+          },
+          name: "is-header-coloraccent-opacity"
         }],
         menu: [{
           remove: [
@@ -6560,6 +6613,14 @@ var control = (function() {
             return state.get.current().header.menu.newLine;
           },
           name: "is-header-item-newline-menu"
+        }, {
+          remove: [
+            "is-header-menu-opacity"
+          ],
+          condition: function() {
+            return (state.get.current().header.menu.opacity == 0);
+          },
+          name: "is-header-menu-opacity"
         }],
         color: [{
           remove: [
@@ -6638,6 +6699,15 @@ var control = (function() {
           ],
           name: "is-group-order-" + state.get.current().group.order
         }],
+        openall: [{
+          remove: [
+            "is-group-openall-opacity"
+          ],
+          condition: function() {
+            return (state.get.current().group.openAll.opacity == 0);
+          },
+          name: "is-group-openall-opacity"
+        }],
         border: [{
           remove: [
             "is-group-border"
@@ -6884,6 +6954,7 @@ var control = (function() {
     classCheck(all.header.position);
     classCheck(all.group.area);
     classCheck(all.group.order);
+    classCheck(all.group.openall);
     classCheck(all.group.border);
     classCheck(all.link);
     classCheck(all.theme);
@@ -7250,9 +7321,10 @@ var control = (function() {
               ".control-header-search-width-size-range",
               ".control-header-search-width-size-number",
               ".control-header-search-width-size-default",
-              ".control-header-search-style-label",
+              "[for=control-header-search-opacity-range]",
-              ".control-header-search-style-box",
+              ".control-header-search-opacity-range",
-              ".control-header-search-style-clear",
+              ".control-header-search-opacity-number",
+              ".control-header-search-opacity-default",
               ".control-header-search-focus",
               ".control-header-search-focus-helper",
               ".control-header-search-engine-label",
@@ -7309,9 +7381,10 @@ var control = (function() {
           dependents: function() {
             return [
               ".control-header-editadd-show-helper",
-              ".control-header-editadd-style-label",
+              "[for=control-header-editadd-opacity-range]",
-              ".control-header-editadd-style-box",
+              ".control-header-editadd-opacity-range",
-              ".control-header-editadd-style-clear",
+              ".control-header-editadd-opacity-number",
+              ".control-header-editadd-opacity-default",
               "[for=control-header-editadd-size-range]",
               ".control-header-editadd-size-range",
               ".control-header-editadd-size-number",
@@ -7329,9 +7402,10 @@ var control = (function() {
             return [
               ".control-header-coloraccent-show-helper",
               ".control-header-coloraccent-dot-show",
-              ".control-header-coloraccent-style-label",
+              "[for=control-header-coloraccent-opacity-range]",
-              ".control-header-coloraccent-style-box",
+              ".control-header-coloraccent-opacity-range",
-              ".control-header-coloraccent-style-clear",
+              ".control-header-coloraccent-opacity-number",
+              ".control-header-coloraccent-opacity-default",
               "[for=control-header-coloraccent-size-range]",
               ".control-header-coloraccent-size-range",
               ".control-header-coloraccent-size-number",
@@ -7347,9 +7421,10 @@ var control = (function() {
           },
           dependents: function() {
             return [
-              "[for=control-header-menu-style-label]",
+              "[for=control-header-menu-opacity-range]",
-              ".control-header-menu-style-box",
+              ".control-header-menu-opacity-range",
-              ".control-header-menu-style-clear",
+              ".control-header-menu-opacity-number",
+              ".control-header-menu-opacity-default",
               "[for=control-header-menu-size-range]",
               ".control-header-menu-size-range",
               ".control-header-menu-size-number",

src/js/header.js

@@ -368,7 +368,7 @@ var header = (function() {
     editAdd: function() {
       var formGroup = helper.node("div|class:header-editadd form-group form-group-nested-button");
       var formInputButton = helper.node("div|class:form-input-button form-input-hide");
-      var controlEditInput = helper.node("input|id:control-edit,class:control-edit,type:checkbox,tabindex:1");
+      var controlEditInput = helper.node("input|id:control-edit,class:header-edit control-edit,type:checkbox,tabindex:1");
       var controlEditLabel = helper.node("label|for:control-edit");
       var controlEditLabelText = helper.node("span:Edit");
       var controlEditLabelIcon = helper.node("span|class:label-icon");
@@ -378,7 +378,7 @@ var header = (function() {
       formInputButton.appendChild(controlEditLabel);
 
       var formDropdown = helper.node("div|class:form-dropdown");
-      var controlAddToggle = helper.node("button|class:control-add-toggle form-dropdown-toggle button,tabindex:1");
+      var controlAddToggle = helper.node("button|class:header-add control-add-toggle form-dropdown-toggle button,tabindex:1");
       var controlAddToggleText = helper.node("span:Add");
       controlAddToggle.appendChild(controlAddToggleText);
       var formDropdownMenu = helper.node("ul|class:list-unstyled form-dropdown-menu");
@@ -411,7 +411,7 @@ var header = (function() {
       var formGroup = helper.node("div|class:header-coloraccent form-group form-group-nested-button");
 
       var colorInputButton = helper.node("div|class:form-input-button");
-      var colorInput = helper.node("input|id:control-theme-color-rgb-color-quick,class:control-theme-color-rgb-color-quick,type:color,value:#000000,tabindex:1,autocomplete:off");
+      var colorInput = helper.node("input|id:control-theme-color-rgb-color-quick,class:control-theme-color-rgb-color-quick header-color,type:color,value:#000000,tabindex:1,autocomplete:off");
       var colorInputLabel = helper.node("label|for:control-theme-color-rgb-color-quick");
       var colorInputLabelText = helper.node("span:Colour");
       colorInputLabel.appendChild(colorInputLabelText);
@@ -419,7 +419,7 @@ var header = (function() {
       colorInputButton.appendChild(colorInputLabel);
 
       var accentInputButton = helper.node("div|class:form-input-button");
-      var accentInput = helper.node("input|id:control-theme-accent-rgb-color-quick,class:control-theme-accent-rgb-color-quick,type:color,value:#000000,tabindex:1,autocomplete:off");
+      var accentInput = helper.node("input|id:control-theme-accent-rgb-color-quick,class:control-theme-accent-rgb-color-quick header-accent,type:color,value:#000000,tabindex:1,autocomplete:off");
       var accentInputLabel = helper.node("label|for:control-theme-accent-rgb-color-quick");
       var accentInputLabelText = helper.node("span:Accent");
       accentInputLabel.appendChild(accentInputLabelText);
@@ -446,7 +446,7 @@ var header = (function() {
       return formGroup;
     },
     menu: function() {
-      var button = helper.node("button|class:control-menu-open button,tabindex:1");
+      var button = helper.node("button|class:control-menu-open header-menu button,tabindex:1");
       var baselineAlignmentCharacter = helper.node("span:-|class:baseline-alignment-icon-character,aria-hidden:true");
       var buttonIcon = helper.node("span|class:icon-settings");
       if (state.get.current().header.menu.style == "clear") {
@@ -465,19 +465,6 @@ var header = (function() {
     }
   };
 
-  render.search = {
-    width: {
-      size: function() {
-        var html = helper.e("html");
-        html.style.setProperty("--header-search-width-size", state.get.current().header.search.width.size + "%");
-      }
-    },
-    size: function() {
-      var html = helper.e("html");
-      html.style.setProperty("--header-search-size", state.get.current().header.search.size + "em");
-    }
-  };
-
   render.transitional = {
     size: function() {
       var html = helper.e("html");
@@ -499,10 +486,31 @@ var header = (function() {
     }
   };
 
+  render.search = {
+    width: {
+      size: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--header-search-width-size", state.get.current().header.search.width.size + "%");
+      }
+    },
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-search-size", state.get.current().header.search.size + "em");
+    },
+    opacity: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-search-opacity", state.get.current().header.search.opacity);
+    }
+  };
+
   render.editadd = {
     size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-editadd-size", state.get.current().header.editAdd.size + "em");
+    },
+    opacity: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-editadd-opacity", state.get.current().header.editAdd.opacity);
     }
   };
 
@@ -510,6 +518,10 @@ var header = (function() {
     size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-coloraccent-size", state.get.current().header.colorAccent.size + "em");
+    },
+    opacity: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-coloraccent-opacity", state.get.current().header.colorAccent.opacity);
     }
   };
 
@@ -517,6 +529,10 @@ var header = (function() {
     size: function() {
       var html = helper.e("html");
       html.style.setProperty("--header-menu-size", state.get.current().header.menu.size + "em");
+    },
+    opacity: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--header-menu-opacity", state.get.current().header.menu.opacity);
     }
   };
 
@@ -536,9 +552,13 @@ var header = (function() {
     render.date.size();
     render.search.width.size();
     render.search.size();
+    render.search.opacity();
     render.editadd.size();
+    render.editadd.opacity();
     render.coloraccent.size();
+    render.coloraccent.opacity();
     render.menu.size();
+    render.menu.opacity();
     render.control.all();
     bind.sort.item();
   };

src/js/link.js

@@ -685,6 +685,10 @@ var link = (function() {
       size: function() {
         var html = helper.e("html");
         html.style.setProperty("--group-openall-size", state.get.current().group.openAll.size + "em");
+      },
+      opacity: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--group-openall-opacity", state.get.current().group.openAll.opacity);
       }
     },
     border: function() {
@@ -1984,6 +1988,7 @@ var link = (function() {
     groupAndItems();
     render.group.name.size();
     render.group.openall.size();
+    render.group.openall.opacity();
     render.group.border();
     render.item.color.custom();
     render.item.size();

src/js/state.js

@@ -120,13 +120,14 @@ var state = (function() {
           justify: "center"
         },
         size: 1,
+        opacity: 1,
         newLine: false,
         newTab: false
       },
       editAdd: {
         show: true,
         size: 1,
-        style: "box",
+        opacity: 1,
         newLine: false
       },
       colorAccent: {
@@ -135,13 +136,13 @@ var state = (function() {
         },
         show: true,
         size: 1,
-        style: "box",
+        opacity: 1,
         newLine: false
       },
       menu: {
         show: true,
         size: 1,
-        style: "box",
+        opacity: 1,
         newLine: false
       },
       order: ["greeting", "transitional", "clock", "date", "search", "editAdd", "colorAccent", "menu"],
@@ -237,7 +238,7 @@ var state = (function() {
       openAll: {
         show: true,
         size: 1,
-        style: "box"
+        opacity: 1
       },
       border: 0,
       order: "headerbody",
@@ -369,16 +370,20 @@ var state = (function() {
         width: {
           size: 30
         },
-        size: 1
+        size: 1,
+        opacity: 1
       },
       editAdd: {
         size: 1,
+        opacity: 1
       },
       colorAccent: {
         size: 1,
+        opacity: 1
       },
       menu: {
-        size: 1
+        size: 1,
+        opacity: 1
       },
       color: {
         opacity: 0.95
@@ -428,7 +433,8 @@ var state = (function() {
         size: 1
       },
       openAll: {
-        size: 1
+        size: 1,
+        opacity: 1
       },
       border: 0
     },

src/js/update.js

@@ -907,6 +907,39 @@ var update = (function() {
     "5.1.0": function(data) {
       data.state.link.item.opacity = 1;
       return data;
+    },
+    "5.2.0": function(data) {
+      if (data.state.header.search.style == "box") {
+        data.state.header.search.opacity = 1;
+      } else if (data.state.header.search.style == "clear") {
+        data.state.header.search.opacity = 0;
+      };
+      if (data.state.header.editAdd.style == "box") {
+        data.state.header.editAdd.opacity = 1;
+      } else if (data.state.header.editAdd.style == "clear") {
+        data.state.header.editAdd.opacity = 0;
+      };
+      if (data.state.header.colorAccent.style == "box") {
+        data.state.header.colorAccent.opacity = 1;
+      } else if (data.state.header.colorAccent.style == "clear") {
+        data.state.header.colorAccent.opacity = 0;
+      };
+      if (data.state.header.menu.style == "box") {
+        data.state.header.menu.opacity = 1;
+      } else if (data.state.header.menu.style == "clear") {
+        data.state.header.menu.opacity = 0;
+      };
+      if (data.state.group.openAll.style == "box") {
+        data.state.group.openAll.opacity = 1;
+      } else if (data.state.group.openAll.style == "clear") {
+        data.state.group.openAll.opacity = 0;
+      };
+      delete data.state.header.search.style;
+      delete data.state.header.editAdd.style;
+      delete data.state.header.colorAccent.style;
+      delete data.state.header.menu.style;
+      delete data.state.group.openAll.style;
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.1.0";
+  var current = "5.2.0";
 
   var name = "Zonked Tarsier";
 

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"