[feature] add header background colour controls

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nighttab",
-"version": "4.22.0",
+"version": "4.23.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":{

package.json

@@ -6,7 +6,7 @@
 pointer-events: none;
 }
 
-.is-header-shade-show .header{
+.is-header-color-show .header{
 pointer-events: all;
 }
 
@@ -40,7 +40,7 @@
 bottom:0;
 }
 
-.header-shade{
+.header-color{
 background-color: transparent;
 content:"";
 width:100%;
@@ -53,18 +53,24 @@
 transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast);
 }
 
-.is-header-radius .header-shade{
+.is-header-radius .header-color{
 border-radius:calc(var(--theme-radius) *4);
 }
 
-.is-background-color-by-theme.is-header-shade-style-always .header-shade,
-.is-background-color-by-theme.is-header-shade-style-scroll .header-shade{
-background-color:rgba(var(--header-shade-color),var(--header-shade-opacity));
+.is-header-color-by-theme.is-header-color-style-always .header-color{
+background-color:rgba(var(--header-color-theme),var(--header-opacity));
 }
 
-.is-background-color-by-custom.is-header-shade-style-always .header-shade,
-.is-background-color-by-custom.is-header-shade-style-scroll .header-shade{
-background-color:rgba(var(--background-color-custom),var(--header-shade-opacity));
+.is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-color{
+background-color:rgba(var(--header-color-theme),var(--header-opacity));
+}
+
+.is-header-color-by-custom.is-header-color-style-always .header-color{
+background-color:rgba(var(--header-color-custom),var(--header-opacity));
+}
+
+.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-color{
+background-color:rgba(var(--header-color-custom),var(--header-opacity));
 }
 
 .header-area{
@@ -100,7 +106,7 @@
 border-bottom:calc(var(--layout-line-width) *var(--header-border-bottom)) solid rgb(var(--theme-accent));
 }
 
-.is-header-radius .header-shade{
+.is-header-radius .header-color{
 border-radius:calc(var(--theme-radius) *4);
 }
 

src/css/header.css

@@ -30,12 +30,12 @@
 }
 
 .is-layout-order-headerlink.is-header-border-bottom .link,
-.is-layout-order-headerlink.is-header-shade-style-always .link{
+.is-layout-order-headerlink.is-header-color-style-always .link{
 margin-top:0;
 }
 
 .is-layout-order-linkheader.is-header-border-top .link,
-.is-layout-order-linkheader.is-header-shade-style-always .link{
+.is-layout-order-linkheader.is-header-color-style-always .link{
 margin-bottom:0;
 }
 

src/css/link.css

@@ -74,8 +74,9 @@
 --theme-shade-opacity:0.4;
 /* header */
 --header-area-width:100%;
---header-shade-color:var(--theme-color-01);
---header-shade-opacity:0.95;
+--header-color-theme:var(--theme-color-01);
+--header-color-custom:rgb(0,0,0);
+--header-opacity:0.95;
 --header-search-width:0%;
 --header-border-top:0;
 --header-border-bottom:0;

src/css/variables.css

@@ -50,7 +50,7 @@
 <mainclass="layout">
 
 <headerclass="header">
-<divclass="header-shade"></div>
+<divclass="header-color"></div>
 <divclass="header-border"></div>
 <divclass="header-area">
 <divclass="header-item-grid">
@@ -925,36 +925,61 @@ <h1 class="menu-item-header-text">Position when scrolling</h1>
 </div>
 <divclass="menu-item">
 <divclass="menu-item-header">
-<h1class="menu-item-header-text">Shade</h1>
+<h1class="menu-item-header-text">Background colour</h1>
 </div>
 <divclass="menu-item-form">
 <divclass="form-wrap">
-<inputid="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="-1">
-<labelfor="control-header-shade-show"><spanclass="label-icon"></span> Show</label>
+<inputid="control-header-color-show" class="control-header-color-show" type="checkbox" tabindex="-1">
+<labelfor="control-header-color-show"><spanclass="label-icon"></span> Show</label>
 </div>
 <divclass="form-wrap">
 <divclass="form-indent">
 <divclass="form-wrap">
-<inputid="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="-1">
-<labelfor="control-header-shade-style-always"><spanclass="label-icon"></span> Always visible</label>
+<inputid="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
+<labelfor="control-header-color-style-always"><spanclass="label-icon"></span> Always visible</label>
+</div>
+<divclass="form-helper">
+<pclass="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
+</div>
+<divclass="form-wrap">
+<inputid="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
+<labelfor="control-header-color-style-scroll"><spanclass="label-icon"></span> Visible on scroll</label>
 </div>
 <divclass="form-helper">
-<pclass="control-header-shade-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
+<pclass="control-header-color-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
 </div>
+<hr>
 <divclass="form-wrap">
-<inputid="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="-1">
-<labelfor="control-header-shade-style-scroll"><spanclass="label-icon"></span>Visible on scroll</label>
+<inputid="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
+<labelfor="control-header-color-by-theme"><spanclass="label-icon"></span>Theme colour</label>
 </div>
 <divclass="form-helper">
-<pclass="control-header-shade-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
+<pclass="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
+</div>
+<divclass="form-wrap">
+<inputid="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
+<labelfor="control-header-color-by-custom"><spanclass="label-icon"></span> Custom colour</label>
+</div>
+<divclass="form-helper">
+<pclass="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
+</div>
+<divclass="form-wrap">
+<divclass="form-indent">
+<divclass="form-wrap">
+<divclass="form-group form-group-block">
+<inputid="control-header-color-rgb-picker" class="form-group-item-half control-header-color-rgb-picker" type="color" value="#000000" tabindex="1">
+<inputid="control-header-color-rgb-hex" class="form-group-item-half control-header-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+</div>
+</div>
+</div>
 </div>
 <hr>
 <divclass="form-wrap">
-<labelfor="control-header-shade-opacity">Opacity</label>
+<labelfor="control-header-color-opacity">Opacity</label>
 <divclass="form-group form-group-block">
-<inputid="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
-<divclass="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
-<buttonclass="control-header-shade-opacity-default button" tabindex="-1" title="Reset to default"><spanclass="icon-undo"></span></button>
+<inputid="control-header-color-opacity" class="control-header-color-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
+<divclass="control-header-color-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
+<buttonclass="control-header-color-opacity-default button" tabindex="-1" title="Reset to default"><spanclass="icon-undo"></span></button>
 </div>
 </div>
 <hr>
@@ -1871,8 +1896,8 @@ <h1 class="menu-item-header-text">Colour</h1>
 <divclass="form-indent">
 <divclass="form-wrap">
 <divclass="form-group form-group-block">
-<inputid="control-background-color-picker" class="form-group-item-half control-background-color-picker" type="color" value="#000000" tabindex="1">
-<inputid="control-background-color-hex" class="form-group-item-half control-background-color-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+<inputid="control-background-color-rgb-picker" class="form-group-item-half control-background-color-rgb-picker" type="color" value="#000000" tabindex="1">
+<inputid="control-background-color-rgb-hex" class="form-group-item-half control-background-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
 </div>
 </div>
 </div>

src/index.html

@@ -127,10 +127,10 @@ var background = (function(){
 helper.e(".control-background-image-file").value="";
 },
 picker: function(){
-helper.e(".control-background-color-picker").value=helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
+helper.e(".control-background-color-rgb-picker").value=helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
 },
 hex: function(){
-helper.e(".control-background-color-hex").value=helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
+helper.e(".control-background-color-rgb-hex").value=helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
 }
 };