[feature] add shade theme controls

Author: zombieFox

package-lock.json

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

@@ -1,5 +1,5 @@
 .shade{
-background-color:rgba(var(--theme-accent),0.4);
+background-color:rgba(var(--theme-accent),var(--theme-shade-opacity));
 position: fixed;
 top:-1em;
 left:-1em;

src/css/shade.css

@@ -71,6 +71,7 @@
 0calc(var(--theme-shadow-size-large) *calc(calc(var(--theme-shadow-offset-y) *-1) *4)) calc(var(--theme-shadow-size-large) *calc(var(--theme-shadow-blur) *8)) rgba(0,0,0,calc(var(--theme-shadow-size-large) *calc(var(--theme-shadow-opacity) *2))),
 0calc(var(--theme-shadow-size-large) *calc(calc(var(--theme-shadow-offset-y) *-1) *8)) calc(var(--theme-shadow-size-large) *calc(var(--theme-shadow-blur) *16)) rgba(0,0,0,calc(var(--theme-shadow-size-large) *calc(var(--theme-shadow-opacity) *3))),
 0calc(var(--theme-shadow-size-large) *calc(calc(var(--theme-shadow-offset-y) *-1) *16)) calc(var(--theme-shadow-size-large) *calc(var(--theme-shadow-blur) *32)) rgba(0,0,0,calc(var(--theme-shadow-size-large) *calc(var(--theme-shadow-opacity) *4)));
+--theme-shade-opacity:0.4;
 /* header */
 --header-area-width:100%;
 --header-shade-color:var(--theme-color-01);

src/css/variables.css

@@ -1877,7 +1877,27 @@ <h1 class="menu-item-header-text">Shadow</h1>
 </div>
 </div>
 <divclass="form-helper">
-<pclass="control-theme-shadow-helper form-helper-item">Bookmarks and Modals will use the Large shadow.</p>
+<pclass="control-theme-shadow-helper form-helper-item">Bookmarks and Modals use the Large shadow.</p>
+</div>
+</div>
+</div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Shade</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="form-wrap">
+<labelfor="control-theme-shade-opacity">Opacity</label>
+<divclass="form-group form-group-block">
+<inputid="control-theme-shade-opacity" class="control-theme-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
+<divclass="control-theme-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
+</div>
+</div>
+<divclass="form-wrap">
+<buttonclass="control-theme-shade-opacity-default button" tabindex="-1">Default opacity</button>
+</div>
+<divclass="form-helper">
+<pclass="control-theme-shade-opacity-helper form-helper-item">The shade appears behind Modals and the Menu.</p>
 </div>
 </div>
 </div>

src/index.html

@@ -2984,6 +2984,28 @@ var control = (function(){
 theme.render.shadow();
 render.range.count(this);
 }
+},{
+element: helper.e(".control-theme-shade-opacity"),
+path: "theme.shade.opacity",
+type: "range",
+valueMod: ["reverse","float"],
+rangeCountElement: helper.e(".control-theme-shade-opacity-count"),
+func: function(){
+theme.render.shade.opacity();
+render.class();
+render.range.count(this);
+}
+},{
+element: helper.e(".control-theme-shade-opacity-default"),
+type: "button",
+func: function(){
+mod.setValue("theme.shade.opacity",helper.getObject({
+object: state.get.default(),
+path: "theme.shade.opacity"
+}));
+theme.render.shade.opacity();
+render.update();
+}
 },{
 element: helper.e(".control-theme-shadow-default"),
 type: "button",

src/js/control.js

@@ -262,6 +262,9 @@ var state = (function(){
 style: "dark",
 radius: 0.25,
 shadow: 1,
+shade: {
+opacity: 0.4
+},
 custom: {
 all: [],
 edit: false
@@ -402,7 +405,10 @@ var state = (function(){
 },
 style: "dark",
 radius: 0.25,
-shadow: 1
+shadow: 1,
+shade: {
+opacity: 0.4
+}
 }
 };