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 @@
+
+
+
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"