[feature] add link background colour controls

Author: zombieFox

package-lock.json

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

@@ -115,7 +115,6 @@
 
 /* link panel front */
 .link-panel-front{
-background-color:rgb(var(--theme-color-02));
 position: absolute;
 left:0;
 width:100%;
@@ -128,6 +127,14 @@
 transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
 
+.is-link-item-color-by-theme .link-panel-front{
+background-color:rgb(var(--link-item-color-theme));
+}
+
+.is-link-item-color-by-custom .link-panel-front{
+background-color:rgb(var(--link-item-color-custom));
+}
+
 .is-link-style-block .link-panel-front{
 padding:1em;
 }
@@ -163,11 +170,18 @@
 .link-item:focus-within .link-panel-front,
 .link-item:focus .link-panel-front,
 .link-item:hover .link-panel-front{
-background-color:rgb(var(--theme-color-03));
 outline: none;
 text-decoration: none;
 }
 
+.is-link-item-color-by-theme .link-panel-front:hover,
+.is-link-item-color-by-theme .link-panel-front:focus,
+.is-link-item-color-by-theme .link-item:focus-within .link-panel-front,
+.is-link-item-color-by-theme .link-item:focus .link-panel-front,
+.is-link-item-color-by-theme .link-item:hover .link-panel-front{
+background-color:rgb(var(--theme-color-03));
+}
+
 .is-link-item-shadow-show .link-item:focus .link-panel-front,
 .is-link-item-shadow-show .link-item:focus-within .link-panel-front,
 .is-link-item-shadow-show .link-item:hover .link-panel-front{

src/css/link.css

@@ -44,6 +44,8 @@
 --group-border:0;
 /* link */
 --link-area-width:100%;
+--link-item-color-theme:var(--theme-color-02);
+--link-item-color-custom:rgb(0,0,0);
 --link-item-size:1em;
 --link-item-display-space:0.25em;
 --link-item-display-gutter:2;

src/css/variables.css

@@ -1190,6 +1190,32 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
 </div>
 </div>
 </div>
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Background colour</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="input-wrap">
+<inputid="control-link-item-color-by-theme" class="control-link-item-color-by-theme" type="radio" name="control-link-item-color-by" value="theme" tabindex="-1">
+<labelfor="control-link-item-color-by-theme"><spanclass="label-icon"></span> Theme background colour</label>
+</div>
+<pclass="control-link-item-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
+<divclass="input-wrap">
+<inputid="control-link-item-color-by-custom" class="control-link-item-color-by-custom" type="radio" name="control-link-item-color-by" value="custom" tabindex="-1">
+<labelfor="control-link-item-color-by-custom"><spanclass="label-icon"></span> Custom background colour</label>
+</div>
+<pclass="control-link-item-color-by-custom-helper form-helper small">Use a custom Background colour.</p>
+<pclass="control-link-item-color-by-custom-helper form-helper small">Take care as some colours may make the Letter/Icon and Name unreadable.</p>
+<divclass="form-indent">
+<divclass="input-wrap">
+<divclass="form-group form-group-block mb-0">
+<inputid="control-link-item-color-by-picker" class="form-group-item-half control-link-item-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
+<inputid="control-link-item-color-by-hex" class="form-group-item-half control-link-item-color-by-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+</div>
+</div>
+</div>
+</div>
+</div>
 <divclass="menu-item">
 <divclass="menu-item-header">
 <h1class="menu-item-header-text">Border</h1>
@@ -1486,7 +1512,7 @@ <h1 class="menu-item-header-text">Colour</h1>
 <inputid="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
 <labelfor="control-background-color-by-theme"><spanclass="label-icon"></span> Theme background colour</label>
 </div>
-<pclass="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Dark or Light Theme.</p>
+<pclass="control-background-color-by-theme-helper form-helper small">Use the Background colour defined by the Theme.</p>
 <divclass="input-wrap">
 <inputid="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
 <labelfor="control-background-color-by-custom"><spanclass="label-icon"></span> Custom background colour</label>
@@ -1496,8 +1522,8 @@ <h1 class="menu-item-header-text">Colour</h1>
 <divclass="form-indent">
 <divclass="input-wrap">
 <divclass="form-group form-group-block mb-0">
-<inputid="control-background-color-custom-current-picker" class="form-group-item-half control-background-color-custom-current-picker mb-0" type="color" value="#000000" tabindex="1">
-<inputid="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+<inputid="control-background-color-by-picker" class="form-group-item-half control-background-color-by-picker mb-0" type="color" value="#000000" tabindex="1">
+<inputid="control-background-color-by-hex" class="form-group-item-half control-background-color-by-hex mb-0" 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-custom-current-picker").value=helper.rgbToHex(state.get.current().background.color.custom);
+helper.e(".control-background-color-by-picker").value=helper.rgbToHex(state.get.current().background.color.custom);
 },
 hex: function(){
-helper.e(".control-background-color-custom-current-hex").value=helper.rgbToHex(state.get.current().background.color.custom);
+helper.e(".control-background-color-by-hex").value=helper.rgbToHex(state.get.current().background.color.custom);
 }
 };
 

src/js/background.js

@@ -2417,6 +2417,39 @@ var control = (function(){
 func: function(){
 link.groupAndItems();
 }
+},{
+element: helper.e(".control-link-item-color-by-theme"),
+path: "link.item.color.by",
+type: "radio",
+func: function(){
+render.dependents();
+render.class();
+}
+},{
+element: helper.e(".control-link-item-color-by-custom"),
+path: "link.item.color.by",
+type: "radio",
+func: function(){
+render.dependents();
+render.class();
+}
+},{
+element: helper.e(".control-link-item-color-by-picker"),
+path: "link.item.color.custom",
+type: "color",
+func: function(){
+link.render.item.color.custom();
+link.render.input.hex();
+}
+},{
+element: helper.e(".control-link-item-color-by-hex"),
+path: "link.item.color.custom",
+type: "text",
+valueMod: ["hexTextString"],
+func: function(){
+link.render.item.color.custom();
+link.render.input.picker();
+}
 },{
 element: helper.e(".control-link-item-border"),
 path: "link.item.border",
@@ -2730,15 +2763,15 @@ var control = (function(){
 render.class();
 }
 },{
-element: helper.e(".control-background-color-custom-current-picker"),
+element: helper.e(".control-background-color-by-picker"),
 path: "background.color.custom",
 type: "color",
 func: function(){
 background.render.color.custom();
 background.render.input.hex();
 }
 },{
-element: helper.e(".control-background-color-custom-current-hex"),
+element: helper.e(".control-background-color-by-hex"),
 path: "background.color.custom",
 type: "text",
 valueMod: ["hexTextString"],
@@ -3150,6 +3183,8 @@ var control = (function(){
 helper.removeClass(html,"is-link-display-alignment-bottomleft");
 helper.removeClass(html,"is-link-display-alignment-bottomcenter");
 helper.removeClass(html,"is-link-display-alignment-bottomright");
+helper.removeClass(html,"is-link-item-color-by-theme");
+helper.removeClass(html,"is-link-item-color-by-custom");
 helper.removeClass(html,"is-link-item-display-direction-horizontal");
 helper.removeClass(html,"is-link-item-display-direction-vertical");
 helper.removeClass(html,"is-link-item-display-order-letconname");
@@ -3168,6 +3203,7 @@ var control = (function(){
 if(state.get.current().link.show){
 helper.addClass(html,"is-link-show");
 helper.addClass(html,"is-link-area-alignment-"+state.get.current().link.area.alignment);
+helper.addClass(html,"is-link-item-color-by-"+state.get.current().link.item.color.by);
 helper.addClass(html,"is-link-item-display-direction-"+state.get.current().link.item.display.direction);
 helper.addClass(html,"is-link-item-display-order-"+state.get.current().link.item.display.order);
 helper.addClass(html,"is-link-display-alignment-"+state.get.current().link.item.display.alignment);
@@ -3672,6 +3708,12 @@ var control = (function(){
 _disable.input(".control-link-item-display-alignment-bottomcenter",true);
 _disable.input(".control-link-item-display-alignment-bottomright",true);
 _disable.input(".control-link-newtab",true);
+_disable.input(".control-link-item-color-by-theme",true);
+_disable.element(".control-link-item-color-by-theme-helper",true);
+_disable.input(".control-link-item-color-by-custom",true);
+_disable.element(".control-link-item-color-by-custom-helper",true);
+_disable.input(".control-link-item-color-by-picker",true);
+_disable.input(".control-link-item-color-by-hex",true);
 _disable.element("[for=control-link-item-border]",true);
 _disable.input(".control-link-item-border",true);
 _disable.element(".control-link-item-border-count",true);
@@ -3714,6 +3756,10 @@ var control = (function(){
 _disable.input(".control-link-item-shadow-show",false);
 _disable.input(".control-link-item-hoverscale",false);
 _disable.input(".control-link-newtab",false);
+_disable.input(".control-link-item-color-by-theme",false);
+_disable.element(".control-link-item-color-by-theme-helper",false);
+_disable.input(".control-link-item-color-by-custom",false);
+_disable.element(".control-link-item-color-by-custom-helper",false);
 _disable.element("[for=control-link-item-border]",false);
 _disable.input(".control-link-item-border",false);
 _disable.element(".control-link-item-border-count",false);
@@ -3783,6 +3829,10 @@ var control = (function(){
 _disable.element(".control-link-item-display-gutter-count",false);
 _disable.input(".control-link-item-display-gutter-default",false);
 };
+if(state.get.current().link.item.color.by=="custom"){
+_disable.input(".control-link-item-color-by-picker",false);
+_disable.input(".control-link-item-color-by-hex",false);
+};
 };
 };
 var_theme=function(){
@@ -3859,13 +3909,11 @@ var control = (function(){
 _disable.element(".control-background-image-url-helper",true);
 };
 if(state.get.current().background.color.by=="theme"){
-_disable.input(".control-background-color-custom-current-picker",true);
-_disable.input(".control-background-color-custom-current-hex",true);
-_disable.element(".control-background-color-theme-helper",true);
+_disable.input(".control-background-color-by-picker",true);
+_disable.input(".control-background-color-by-hex",true);
 }elseif(state.get.current().background.color.by=="custom"){
-_disable.input(".control-background-color-custom-current-picker",false);
-_disable.input(".control-background-color-custom-current-hex",false);
-_disable.element(".control-background-color-theme-helper",false);
+_disable.input(".control-background-color-by-picker",false);
+_disable.input(".control-background-color-by-hex",false);
 };
 };
 _header();

src/js/control.js

@@ -523,6 +523,11 @@ var link = (function(){
 };
 
 render.item={
+color: {
+custom: function(){
+helper.e("html").style.setProperty("--link-item-color-custom",state.get.current().link.item.color.custom.r+", "+state.get.current().link.item.color.custom.g+", "+state.get.current().link.item.color.custom.b);
+}
+},
 link: function(){
 varlinkItemOptions={
 tag: "div",
@@ -1661,6 +1666,15 @@ var link = (function(){
 }
 };
 
+render.input={
+picker: function(){
+helper.e(".control-link-item-color-by-picker").value=helper.rgbToHex(state.get.current().link.item.color.custom);
+},
+hex: function(){
+helper.e(".control-link-item-color-by-hex").value=helper.rgbToHex(state.get.current().link.item.color.custom);
+}
+};
+
 varadd={
 item: {
 open: function(){
@@ -1756,6 +1770,7 @@ var link = (function(){
 groupAndItems();
 render.group.size();
 render.group.border();
+render.item.color.custom();
 render.item.size();
 render.item.display.letter();
 render.item.display.icon();

src/js/link.js

@@ -139,6 +139,14 @@ var state = (function(){
 alignment: "center"
 },
 item: {
+color: {
+by: "theme",
+custom: {
+r: 0,
+g: 0,
+b: 0
+}
+},
 display: {
 letcon: {
 show: true,

src/js/state.js

@@ -711,6 +711,17 @@ var update = (function(){
 data.state.header.button.colorAccent=data.state.header.button.accent;
 deletedata.state.header.button.accent;
 returndata;
+},
+"4.5.0": function(data){
+data.state.link.item.color={
+by: "theme",
+custom: {
+r: 0,
+g: 0,
+b: 0
+}
+};
+returndata;
 }
 };