diff --git a/package-lock.json b/package-lock.json index da2c7a12..b361e34f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.3.0", + "version": "4.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 881f2bb4..fbf63e3e 100644 --- a/package.json +++ b/package.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": { diff --git a/src/css/link.css b/src/css/link.css index 022ca8bd..3878c688 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -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 { diff --git a/src/css/variables.css b/src/css/variables.css index ee7d01cd..c3abc385 100644 --- a/src/css/variables.css +++ b/src/css/variables.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; diff --git a/src/index.html b/src/index.html index a76f870c..150e2265 100644 --- a/src/index.html +++ b/src/index.html @@ -1190,6 +1190,32 @@ +
+
+

Background colour

+
+
+
+ + +
+

Use the Background colour defined by the Theme.

+
+ + +
+

Use a custom Background colour.

+

Take care as some colours may make the Letter/Icon and Name unreadable.

+
+
+
+ + +
+
+
+
+

Border

@@ -1486,7 +1512,7 @@
-

Use the Background colour defined by the Dark or Light Theme.

+

Use the Background colour defined by the Theme.

@@ -1496,8 +1522,8 @@
- - + +
diff --git a/src/js/background.js b/src/js/background.js index 0be9a054..478a80c1 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -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); } }; diff --git a/src/js/control.js b/src/js/control.js index 2aeb03f7..5dee416a 100644 --- a/src/js/control.js +++ b/src/js/control.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,7 +2763,7 @@ 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() { @@ -2738,7 +2771,7 @@ var control = (function() { 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); } else if (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(); diff --git a/src/js/link.js b/src/js/link.js index 4d8d6f71..3693ecd1 100644 --- a/src/js/link.js +++ b/src/js/link.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() { var linkItemOptions = { 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); + } + }; + var add = { 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(); diff --git a/src/js/state.js b/src/js/state.js index eb5f932f..d9d933ac 100644 --- a/src/js/state.js +++ b/src/js/state.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, diff --git a/src/js/update.js b/src/js/update.js index 5f2e5322..f0dfe1c5 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -711,6 +711,17 @@ var update = (function() { data.state.header.button.colorAccent = data.state.header.button.accent; delete data.state.header.button.accent; return data; + }, + "4.5.0": function(data) { + data.state.link.item.color = { + by: "theme", + custom: { + r: 0, + g: 0, + b: 0 + } + }; + return data; } }; diff --git a/src/js/version.js b/src/js/version.js index f5a9c8ef..33664f21 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.4.1"; + var current = "4.5.0"; var name = "Enchanting Aardvark"; diff --git a/src/manifest.json b/src/manifest.json index 381a3e82..3c8fbd7f 100644 --- a/src/manifest.json +++ b/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": "4.4.1", + "version": "4.5.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"