diff --git a/package-lock.json b/package-lock.json index 9efa4191..344b70bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.16.1", + "version": "4.17.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index bd223331..63fb2cbc 100644 --- a/package.json +++ b/package.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": { diff --git a/src/css/shade.css b/src/css/shade.css index 47cd7b7d..5bba89ff 100755 --- a/src/css/shade.css +++ b/src/css/shade.css @@ -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; diff --git a/src/css/variables.css b/src/css/variables.css index 983d96f5..1f05f580 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -71,6 +71,7 @@ 0 calc(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))), 0 calc(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))), 0 calc(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); diff --git a/src/index.html b/src/index.html index 43ab8a41..6dd8ad4f 100644 --- a/src/index.html +++ b/src/index.html @@ -1877,7 +1877,27 @@
-

Bookmarks and Modals will use the Large shadow.

+

Bookmarks and Modals use the Large shadow.

+
+ + + diff --git a/src/js/control.js b/src/js/control.js index b31ec315..81a3cc6a 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -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", diff --git a/src/js/state.js b/src/js/state.js index 40118873..0d4033cf 100644 --- a/src/js/state.js +++ b/src/js/state.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 + } } }; diff --git a/src/js/theme.js b/src/js/theme.js index 4a06b5a2..2abfc8f2 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -9,11 +9,13 @@ var theme = (function() { }, theme: { name: null, - style: null, font: null, color: null, accent: null, radius: null, + shadow: null, + style: null, + shade: null, timestamp: null } }; @@ -27,6 +29,7 @@ var theme = (function() { stagedThemeCustom.theme.radius = null; stagedThemeCustom.theme.shadow = null; stagedThemeCustom.theme.style = null; + stagedThemeCustom.theme.shade = null; stagedThemeCustom.theme.timestamp = null; }; @@ -53,6 +56,11 @@ var theme = (function() { path: "theme.radius", newValue: data.radius }); + helper.setObject({ + object: state.get.current(), + path: "theme.shadow", + newValue: data.shadow + }); helper.setObject({ object: state.get.current(), path: "theme.style", @@ -60,8 +68,8 @@ var theme = (function() { }); helper.setObject({ object: state.get.current(), - path: "theme.shadow", - newValue: data.shadow + path: "theme.shade", + newValue: data.shade }); }; @@ -178,7 +186,8 @@ var theme = (function() { accent: state.get.default().theme.accent.current, radius: state.get.default().theme.radius, shadow: state.get.default().theme.shadow, - style: state.get.default().theme.style + style: state.get.default().theme.style, + shade: state.get.default().theme.shade }, { name: "Black", font: state.get.default().theme.font, @@ -205,7 +214,8 @@ var theme = (function() { }, radius: state.get.default().theme.radius, shadow: state.get.default().theme.shadow, - style: "dark" + style: "dark", + shade: state.get.default().theme.shade }, { name: "White", font: state.get.default().theme.font, @@ -232,7 +242,8 @@ var theme = (function() { }, radius: state.get.default().theme.radius, shadow: state.get.default().theme.shadow, - style: "light" + style: "light", + shade: state.get.default().theme.shade }, { name: "Midnight", font: { @@ -270,7 +281,10 @@ var theme = (function() { }, radius: 0.5, shadow: 0.75, - style: "dark" + style: "dark", + shade: { + opacity: 0.1 + } }, { name: "Lex", font: { @@ -308,7 +322,10 @@ var theme = (function() { }, radius: 0.1, shadow: 1, - style: "dark" + style: "dark", + shade: { + opacity: 0.9 + } }, { name: "Cruiser", font: { @@ -346,7 +363,10 @@ var theme = (function() { }, radius: 0.2, shadow: 1.5, - style: "dark" + style: "dark", + shade: { + opacity: 0.7 + } }, { name: "Sharp Mint", font: { @@ -384,7 +404,10 @@ var theme = (function() { }, radius: 0.8, shadow: 1, - style: "dark" + style: "dark", + shade: { + opacity: 0.4 + } }, { name: "Snow Glow", font: { @@ -422,7 +445,10 @@ var theme = (function() { }, radius: 0, shadow: 0.5, - style: "light" + style: "light", + shade: { + opacity: 0.6 + } }, { name: "Rumble", font: { @@ -460,7 +486,10 @@ var theme = (function() { }, radius: 0.75, shadow: 1.75, - style: "dark" + style: "dark", + shade: { + opacity: 0.5 + } }, { name: "Sol", font: { @@ -498,7 +527,10 @@ var theme = (function() { }, radius: 0.5, shadow: 0.25, - style: "light" + style: "light", + shade: { + opacity: 0.9 + } }, { name: "Art Deco", font: { @@ -536,7 +568,10 @@ var theme = (function() { }, radius: 2, shadow: 0.5, - style: "dark" + style: "dark", + shade: { + opacity: 0.1 + } }, { name: "Grimm", font: { @@ -574,7 +609,10 @@ var theme = (function() { }, radius: 1, shadow: 1.5, - style: "dark" + style: "dark", + shade: { + opacity: 0.9 + } }, { name: "Macaroon", font: { @@ -612,7 +650,10 @@ var theme = (function() { }, radius: 0.40, shadow: 0.5, - style: "light" + style: "light", + shade: { + opacity: 0.3 + } }, { name: "Hot Pepper", font: { @@ -650,7 +691,10 @@ var theme = (function() { }, radius: 0.6, shadow: 1, - style: "dark" + style: "dark", + shade: { + opacity: 0.1 + } }, { name: "Steel", font: { @@ -688,7 +732,10 @@ var theme = (function() { }, radius: 0.3, shadow: 0.5, - style: "light" + style: "light", + shade: { + opacity: 0.7 + } }, { name: "Outrun", font: { @@ -726,7 +773,10 @@ var theme = (function() { }, radius: 0, shadow: 0, - style: "dark" + style: "dark", + shade: { + opacity: 0.4 + } }, { name: "Pumpkin", font: { @@ -764,7 +814,10 @@ var theme = (function() { }, radius: 0.2, shadow: 1, - style: "dark" + style: "dark", + shade: { + opacity: 0.1 + } }, { name: "Funkadelic", font: { @@ -802,7 +855,10 @@ var theme = (function() { }, radius: 1.2, shadow: 0, - style: "dark" + style: "dark", + shade: { + opacity: 0.8 + } }, { name: "Elder Bean", font: { @@ -840,7 +896,10 @@ var theme = (function() { }, radius: 0.5, shadow: 1.75, - style: "dark" + style: "dark", + shade: { + opacity: 0.1 + } }, { name: "Marker", font: { @@ -878,7 +937,10 @@ var theme = (function() { }, radius: 0.3, shadow: 0.25, - style: "light" + style: "light", + shade: { + opacity: 0.9 + } }, { name: "Kapow", font: { @@ -916,7 +978,10 @@ var theme = (function() { }, radius: 0.4, shadow: 1, - style: "dark" + style: "dark", + shade: { + opacity: 0.7 + } }, { name: "Dash", font: { @@ -954,7 +1019,10 @@ var theme = (function() { }, radius: 0, shadow: 0, - style: "light" + style: "light", + shade: { + opacity: 0.5 + } }, { name: "Savage", font: { @@ -992,7 +1060,10 @@ var theme = (function() { }, radius: 0, shadow: 2.5, - style: "dark" + style: "dark", + shade: { + opacity: 0.8 + } }, { name: "Trine", font: { @@ -1030,7 +1101,10 @@ var theme = (function() { }, radius: 0.5, shadow: 1.25, - style: "dark" + style: "dark", + shade: { + opacity: 0.1 + } }, { name: "Obsidian", font: { @@ -1068,7 +1142,10 @@ var theme = (function() { }, radius: 0.25, shadow: 2, - style: "dark" + style: "dark", + shade: { + opacity: 0.05 + } }, { name: "Earthquake", font: { @@ -1106,7 +1183,10 @@ var theme = (function() { }, radius: 0.80, shadow: 1, - style: "dark" + style: "dark", + shade: { + opacity: 0.8 + } }] }; @@ -1466,8 +1546,9 @@ var theme = (function() { render.font.ui.style(); render.color.shade(); render.accent.color(); - render.shadow(); render.radius(); + render.shadow(); + render.shade.opacity(); style.check(); link.groupAndItems(); control.render.update(); @@ -1557,8 +1638,9 @@ var theme = (function() { render.font.ui.style(); render.color.shade(); render.accent.color(); - render.shadow(); render.radius(); + render.shadow(); + render.shade.opacity(); style.check(); link.groupAndItems(); control.render.update(); @@ -1621,6 +1703,7 @@ var theme = (function() { stagedThemeCustom.theme.radius = state.get.current().theme.radius; stagedThemeCustom.theme.shadow = state.get.current().theme.shadow; stagedThemeCustom.theme.style = state.get.current().theme.style; + stagedThemeCustom.theme.shade = state.get.current().theme.shade; stagedThemeCustom.theme.timestamp = new Date().getTime(); mod.custom.add(); data.save(); @@ -1770,6 +1853,13 @@ var theme = (function() { } }; + render.shade = { + opacity: function() { + var html = helper.e("html"); + html.style.setProperty("--theme-shade-opacity", state.get.current().theme.shade.opacity); + } + }; + var accent = { random: function() { mod.accent.random(); @@ -1835,6 +1925,7 @@ var theme = (function() { render.accent.color(); render.radius(); render.shadow(); + render.shade.opacity(); render.preset(); render.custom.all(); custom.check(); diff --git a/src/js/update.js b/src/js/update.js index df22f3ce..51eb69c9 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -764,6 +764,12 @@ var update = (function() { edit: false }; return data; + }, + "4.17.0": function(data) { + data.state.theme.shade = { + opacity: 0.4 + }; + return data; } }; diff --git a/src/js/version.js b/src/js/version.js index 736ddd43..4d285c6b 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.16.1"; + var current = "4.17.0"; var name = "Naughty Goose"; diff --git a/src/manifest.json b/src/manifest.json index 6ddd9042..dd02c96a 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.16.1", + "version": "4.17.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"