[feature] add background image vignette controls

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "5.3.0",
+"version": "5.4.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

@@ -33,10 +33,24 @@
 .background-accent{
 background-color:rgba(var(--theme-accent),var(--background-accent));
 position: absolute;
-top:0;
-left:0;
-width:100%;
-height:100%;
+top:-1em;
+left:-1em;
+width:calc(100%+2em);
+height:calc(100%+2em);
 pointer-events: none;
 display: block;
 }
+
+.background-vignette{
+position: absolute;
+top:-1em;
+left:-1em;
+width:calc(100%+2em);
+height:calc(100%+2em);
+pointer-events: none;
+background-image:radial-gradient(
+ circle,
+ transparent var(--background-vignette-end),
+rgba(0,0,0,var(--background-vignette-opacity)) var(--background-vignette-start)
+ );
+}

src/css/background.css

@@ -155,6 +155,9 @@
 --background-scale:1;
 --background-accent:0;
 --background-blur:0;
+--background-vignette-opacity:0%;
+--background-vignette-start:90%;
+--background-vignette-end:70%;
 /* form */
 --form-label:var(--theme-color-16);
 --form-label-hover:var(--theme-color-20);

src/css/variables.css

@@ -1,4 +1,5 @@
 <divclass="background">
 <divclass="background-image"></div>
 <divclass="background-accent"></div>
+<divclass="background-vignette"></div>
 </div>

src/html/background.html

@@ -66,6 +66,7 @@ <h1 class="menu-item-header-text">Image</h1>
 <buttonclass="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
 </div>
 </div>
+<hr>
 <divclass="form-wrap">
 <labelfor="control-background-image-grayscale-range">Greyscale</label>
 <divclass="form-group form-group-block">
@@ -74,6 +75,7 @@ <h1 class="menu-item-header-text">Image</h1>
 <buttonclass="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
 </div>
 </div>
+<hr>
 <divclass="form-wrap">
 <labelfor="control-background-image-blur-range">Blur</label>
 <divclass="form-group form-group-block">
@@ -82,6 +84,7 @@ <h1 class="menu-item-header-text">Image</h1>
 <buttonclass="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
 </div>
 </div>
+<hr>
 <divclass="form-wrap">
 <labelfor="control-background-image-accent-range">Accent overlay</label>
 <divclass="form-group form-group-block">
@@ -90,6 +93,7 @@ <h1 class="menu-item-header-text">Image</h1>
 <buttonclass="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
 </div>
 </div>
+<hr>
 <divclass="form-wrap">
 <labelfor="control-background-image-scale-range">Size</label>
 <divclass="form-group form-group-block">
@@ -98,6 +102,35 @@ <h1 class="menu-item-header-text">Image</h1>
 <buttonclass="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
 </div>
 </div>
+<hr>
+<divclass="form-wrap">
+<labelfor="control-background-image-vignette-opacity-range">Vignette</label>
+<divclass="form-group form-group-block">
+<inputid="control-background-image-vignette-opacity-range" class="control-background-image-vignette-opacity-range mr-3" type="range" value="0" tabindex="-1">
+<inputclass="control-background-image-vignette-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+<buttonclass="control-background-image-vignette-opacity-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
+</div>
+</div>
+<divclass="form-wrap">
+<divclass="form-indent">
+<divclass="form-wrap">
+<labelfor="control-background-image-vignette-start-range">Start</label>
+<divclass="form-group form-group-block">
+<inputid="control-background-image-vignette-start-range" class="control-background-image-vignette-start-range mr-3" type="range" value="0" tabindex="-1">
+<inputclass="control-background-image-vignette-start-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+<buttonclass="control-background-image-vignette-start-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
+</div>
+</div>
+<divclass="form-wrap">
+<labelfor="control-background-image-vignette-end-range">End</label>
+<divclass="form-group form-group-block">
+<inputid="control-background-image-vignette-end-range" class="control-background-image-vignette-end-range mr-3" type="range" value="0" tabindex="-1">
+<inputclass="control-background-image-vignette-end-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+<buttonclass="control-background-image-vignette-end-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
+</div>
+</div>
+</div>
+</div>
 </div>
 </div>
 </div>

src/html/menu/content/background/image.html

@@ -122,6 +122,21 @@ var background = (function(){
 html.style.setProperty("--background-accent",state.get.current().background.image.accent);
 };
 
+render.vignette={
+opacity: function(){
+varhtml=helper.e("html");
+html.style.setProperty("--background-vignette-opacity",state.get.current().background.image.vignette.opacity+"%");
+},
+start: function(){
+varhtml=helper.e("html");
+html.style.setProperty("--background-vignette-start",state.get.current().background.image.vignette.start+"%");
+},
+end: function(){
+varhtml=helper.e("html");
+html.style.setProperty("--background-vignette-end",state.get.current().background.image.vignette.end+"%");
+}
+};
+
 render.input={
 clear: function(){
 helper.e(".control-background-image-file").value="";
@@ -231,6 +246,9 @@ var background = (function(){
 render.opacity();
 render.scale();
 render.accent();
+render.vignette.opacity();
+render.vignette.start();
+render.vignette.end();
 render.feedback.init();
 };