diff --git a/package-lock.json b/package-lock.json
index 298df8ad..2c6a28c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "nightTab",
- "version": "5.43.0",
+ "version": "5.44.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 18a9aa75..770e8fcf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "nightTab",
- "version": "5.43.0",
+ "version": "5.44.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 605653fd..48405485 100755
--- a/src/css/link.css
+++ b/src/css/link.css
@@ -169,6 +169,7 @@
/* link panel front */
.link-panel-front {
+ background-color: rgba(var(--link-item-color), var(--link-item-color-opacity));
position: absolute;
left: 0;
width: 100%;
@@ -188,7 +189,7 @@
background-size: cover;
background-position: center;
background-repeat: no-repeat;
- opacity: var(--link-item-opacity);
+ opacity: var(--link-item-image-opacity);
position: absolute;
top: 0;
left: 0;
@@ -229,27 +230,16 @@
height: calc(100% - var(--layout-line-width));
}
-.link-item:not(.link-item-image) .link-panel-front {
- background-color: rgba(var(--link-item-color), var(--link-item-opacity));
-}
-
.link-panel-front:hover,
.link-panel-front:focus,
.link-item:focus-within .link-panel-front,
.link-item:focus .link-panel-front,
.link-item:hover .link-panel-front {
+ background-color: rgba(var(--link-item-color-focus-hover), var(--link-item-color-opacity));
outline: none;
text-decoration: none;
}
-.link-item:not(.link-item-image) .link-panel-front:hover,
-.link-item:not(.link-item-image) .link-panel-front:focus,
-.link-item:not(.link-item-image):focus-within .link-panel-front,
-.link-item:not(.link-item-image):focus .link-panel-front,
-.link-item:not(.link-item-image):hover .link-panel-front {
- background-color: rgba(var(--link-item-color-focus-hover), var(--link-item-opacity));
-}
-
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus-within .link-panel-front,
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:hover .link-panel-front {
diff --git a/src/css/variables.css b/src/css/variables.css
index 780306a5..0b25947e 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -110,6 +110,8 @@
/* link */
--link-area-width: 100%;
--link-item-color: var(--theme-color-02);
+ --link-item-color-opacity: 1;
+ --link-item-image-opacity: 1;
--link-item-color-focus-hover: var(--theme-color-03);
--link-item-size: 1em;
--link-item-display-space: 0.25em;
@@ -122,7 +124,6 @@
--link-item-display-translate-y: 0em;
--link-item-display-name-size: 0.9em;
--link-item-border: 0;
- --link-item-opacity: 1;
--link-item-padding: 1;
--link-item-clip-padding: 1em;
--link-item-display-visual-shadow-size: 1;
@@ -130,7 +131,6 @@
--link-item-display-visual-shadow-blur: 0.02em;
--link-item-display-visual-shadow-opacity: 0.01;
--link-item-display-visual-shadow:
-
0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 1)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 2)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 1))),
0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 2)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 2))),
0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 4)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 6)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 3)));
@@ -418,7 +418,7 @@
--link-item-edit-height: 50%;
}
-.is-link-item-opacity {
+.is-link-item-color-opacity {
--link-item-clip-padding: calc(0 * 1em);
}
diff --git a/src/html/menu/content/bookmarks.html b/src/html/menu/content/bookmarks.html
index e1ce067c..a9e6853e 100644
--- a/src/html/menu/content/bookmarks.html
+++ b/src/html/menu/content/bookmarks.html
@@ -18,7 +18,7 @@
@@include("./bookmarks/accent.html")
- @@include("./bookmarks/opacity.html")
+ @@include("./bookmarks/image.html")
@@include("./bookmarks/border.html")
diff --git a/src/html/menu/content/bookmarks/color.html b/src/html/menu/content/bookmarks/color.html
index ed23db40..8042c0bf 100644
--- a/src/html/menu/content/bookmarks/color.html
+++ b/src/html/menu/content/bookmarks/color.html
@@ -75,5 +75,17 @@
+
+
+
diff --git a/src/html/menu/content/bookmarks/image.html b/src/html/menu/content/bookmarks/image.html
new file mode 100644
index 00000000..af806ee8
--- /dev/null
+++ b/src/html/menu/content/bookmarks/image.html
@@ -0,0 +1,24 @@
+
diff --git a/src/html/menu/content/bookmarks/opacity.html b/src/html/menu/content/bookmarks/opacity.html
deleted file mode 100644
index 5f9da7fa..00000000
--- a/src/html/menu/content/bookmarks/opacity.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/src/html/menu/nav.html b/src/html/menu/nav.html
index 6c837c4d..f59637fd 100644
--- a/src/html/menu/nav.html
+++ b/src/html/menu/nav.html
@@ -41,7 +41,7 @@
-
+
diff --git a/src/js/control.js b/src/js/control.js
index 1f59e3c9..0ee3595f 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -5401,8 +5401,8 @@ var control = (function() {
link.groupAndItems();
}
}, {
- element: ".control-link-item-opacity-range",
- path: "link.item.opacity",
+ element: ".control-link-item-color-opacity-range",
+ path: "link.item.color.opacity",
type: "range",
valueConvert: ["float"],
valueModify: {
@@ -5410,18 +5410,18 @@ var control = (function() {
max: 100
},
mirrorElement: [{
- element: ".control-link-item-opacity-number",
- path: "link.item.opacity",
+ element: ".control-link-item-color-opacity-number",
+ path: "link.item.color.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
- link.render.item.opacity();
+ link.render.item.color.opacity();
render.class();
}
}, {
- element: ".control-link-item-opacity-number",
- path: "link.item.opacity",
+ element: ".control-link-item-color-opacity-number",
+ path: "link.item.color.opacity",
type: "number",
valueConvert: ["float"],
valueModify: {
@@ -5429,21 +5429,21 @@ var control = (function() {
max: 100
},
mirrorElement: [{
- element: ".control-link-item-opacity-range",
- path: "link.item.opacity",
+ element: ".control-link-item-color-opacity-range",
+ path: "link.item.color.opacity",
type: "number",
valueConvert: ["float"]
}],
func: function() {
- link.render.item.opacity();
+ link.render.item.color.opacity();
render.class();
}
}, {
- element: ".control-link-item-opacity-default",
+ element: ".control-link-item-color-opacity-default",
type: "button",
func: function() {
- mod.default("link.item.opacity");
- link.render.item.opacity();
+ mod.default("link.item.color.opacity");
+ link.render.item.color.opacity();
render.update.control.menu();
render.class();
}
@@ -6180,6 +6180,61 @@ var control = (function() {
link.groupAndItems();
}
}],
+ image: [{
+ element: ".control-link-item-image-clear",
+ type: "button",
+ func: function() {
+ link.mod.image.clear();
+ link.groupAndItems();
+ }
+ }, {
+ element: ".control-link-item-image-opacity-range",
+ path: "link.item.image.opacity",
+ type: "range",
+ valueConvert: ["float"],
+ valueModify: {
+ min: 0,
+ max: 100
+ },
+ mirrorElement: [{
+ element: ".control-link-item-image-opacity-number",
+ path: "link.item.image.opacity",
+ type: "number",
+ valueConvert: ["float"]
+ }],
+ func: function() {
+ link.render.item.image.opacity();
+ render.class();
+ }
+ }, {
+ element: ".control-link-item-image-opacity-number",
+ path: "link.item.image.opacity",
+ type: "number",
+ valueConvert: ["float"],
+ valueModify: {
+ min: 0,
+ max: 100
+ },
+ mirrorElement: [{
+ element: ".control-link-item-image-opacity-range",
+ path: "link.item.image.opacity",
+ type: "number",
+ valueConvert: ["float"]
+ }],
+ func: function() {
+ link.render.item.image.opacity();
+ render.class();
+ }
+ }, {
+ element: ".control-link-item-image-opacity-default",
+ type: "button",
+ func: function() {
+ mod.default("link.item.image.opacity");
+ link.render.item.image.opacity();
+ render.update.control.menu();
+ render.class();
+ }
+ }],
border: [{
element: ".control-link-item-border-range",
path: "link.item.border",
@@ -10641,12 +10696,20 @@ var control = (function() {
name: "is-link-item-color-by-" + state.get.current().link.item.color.by
}, {
remove: [
- "is-link-item-opacity"
+ "is-link-item-color-opacity"
],
condition: function() {
- return (state.get.current().link.item.opacity < 1);
+ return (state.get.current().link.item.color.opacity < 1);
},
- name: "is-link-item-opacity"
+ name: "is-link-item-color-opacity"
+ }, {
+ remove: [
+ "is-link-item-image-opacity"
+ ],
+ condition: function() {
+ return (state.get.current().link.item.image.opacity < 1);
+ },
+ name: "is-link-item-image-opacity"
}, {
remove: [
"is-link-item-display-direction-horizontal",
@@ -11433,11 +11496,11 @@ var control = (function() {
".control-link-item-color-apply",
".control-link-item-color-clear",
".control-link-item-color-rainbow",
- "[for=control-link-item-opacity-range]",
- ".control-link-item-opacity-range",
- ".control-link-item-opacity-number",
- ".control-link-item-opacity-default",
- ".control-link-item-opacity-helper",
+ "[for=control-link-item-color-opacity-range]",
+ ".control-link-item-color-opacity-range",
+ ".control-link-item-color-opacity-number",
+ ".control-link-item-color-opacity-default",
+ ".control-link-item-color-opacity-helper",
".control-link-item-accent-rgb-color",
".control-link-item-accent-rgb-text",
".control-link-item-accent-helper",
@@ -11462,6 +11525,11 @@ var control = (function() {
".control-link-item-accent-apply",
".control-link-item-accent-clear",
".control-link-item-accent-rainbow",
+ "[for=control-link-item-image-opacity-range]",
+ ".control-link-item-image-opacity-range",
+ ".control-link-item-image-opacity-number",
+ ".control-link-item-image-opacity-default",
+ ".control-link-item-image-opacity-helper",
".control-link-orientation-top",
".control-link-orientation-bottom",
".control-link-orientation-helper",
diff --git a/src/js/link.js b/src/js/link.js
index 14e4f6cb..d8785a27 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -347,6 +347,16 @@ var link = (function() {
}
};
+ mod.image = {
+ clear: function() {
+ bookmarks.get().forEach(function(arrayItem, index) {
+ arrayItem.items.forEach(function(arrayItem, index) {
+ arrayItem.image = "";
+ });
+ });
+ }
+ };
+
mod.name = {
show: function() {
bookmarks.get().forEach(function(arrayItem, index) {
@@ -941,7 +951,6 @@ var link = (function() {
"--link-item-color-focus-hover: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";";
};
if (helper.checkIfValidString(stagedLink.link.image)) {
- linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-image";
linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + "--link-item-image-url: url(" + helper.trimString(stagedLink.link.image) + ");"
};
};
@@ -2538,9 +2547,17 @@ var link = (function() {
var html = helper.e("html");
html.style.setProperty("--link-item-display-gutter", state.get.current().link.item.display.gutter);
},
- opacity: function() {
- var html = helper.e("html");
- html.style.setProperty("--link-item-opacity", state.get.current().link.item.opacity);
+ color: {
+ opacity: function() {
+ var html = helper.e("html");
+ html.style.setProperty("--link-item-color-opacity", state.get.current().link.item.color.opacity);
+ }
+ },
+ image: {
+ opacity: function() {
+ var html = helper.e("html");
+ html.style.setProperty("--link-item-image-opacity", state.get.current().link.item.image.opacity);
+ }
}
};
@@ -3230,7 +3247,8 @@ var link = (function() {
render.item.translate.x();
render.item.translate.y();
render.item.gutter();
- render.item.opacity();
+ render.item.color.opacity();
+ render.item.image.opacity();
render.area.width();
};
diff --git a/src/js/state.js b/src/js/state.js
index 1d92f794..afa752e5 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -188,7 +188,8 @@ var state = (function() {
r: 0,
g: 0,
b: 0
- }
+ },
+ opacity: 1
},
accent: {
hsl: {
@@ -202,6 +203,9 @@ var state = (function() {
b: 0
}
},
+ image: {
+ opacity: 1
+ },
display: {
visual: {
show: true,
@@ -246,8 +250,7 @@ var state = (function() {
},
newTab: false,
size: 1,
- border: 0,
- opacity: 1
+ border: 0
},
show: true,
add: false,
@@ -447,6 +450,12 @@ var state = (function() {
width: 100
},
item: {
+ color: {
+ opacity: 1
+ },
+ image: {
+ opacity: 1
+ },
display: {
visual: {
letter: {
@@ -473,8 +482,7 @@ var state = (function() {
}
},
size: 1,
- border: 0,
- opacity: 1
+ border: 0
}
},
group: {
diff --git a/src/js/update.js b/src/js/update.js
index f82b0f7e..537b042a 100644
--- a/src/js/update.js
+++ b/src/js/update.js
@@ -1094,6 +1094,14 @@ var update = (function() {
data.state.link.item.display.order = "namevisual";
};
return data;
+ },
+ "5.44.0": function(data) {
+ data.state.link.item.color.opacity = data.state.link.item.opacity;
+ delete data.state.link.item.opacity;
+ data.state.link.item.image = {
+ opacity: 1
+ };
+ return data;
}
};
diff --git a/src/js/version.js b/src/js/version.js
index 20e16207..407235a4 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
var version = (function() {
- var current = "5.43.0";
+ var current = "5.44.0";
var name = "Macabre Caterpillar";
diff --git a/src/manifest.json b/src/manifest.json
index e7bba907..fccc59ac 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": "5.43.0",
+ "version": "5.44.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"