mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-10 07:58:53 +01:00
[feature] add link background opacity controls
This commit is contained in:
zombieFox
parent
38159876c4
commit
caa63bf30b
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.43.0",
|
||||
"version": "5.44.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
@@include("./bookmarks/accent.html")
|
||||
|
||||
@@include("./bookmarks/opacity.html")
|
||||
@@include("./bookmarks/image.html")
|
||||
|
||||
@@include("./bookmarks/border.html")
|
||||
|
||||
|
||||
@ -75,5 +75,17 @@
|
||||
<button class="control-link-item-color-rainbow button button-line" tabindex="-1">Apply unique colour to each</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-color-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-color-opacity-range" class="control-link-item-color-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-color-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-color-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-color-opacity-helper form-helper-item">Change the Colour opacity of all Bookmark tiles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
24
src/html/menu/content/bookmarks/image.html
Normal file
24
src/html/menu/content/bookmarks/image.html
Normal file
@ -0,0 +1,24 @@
|
||||
<div id="menu-content-bookmarks-image" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Background image</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="control-link-item-image-clear button button-line" tabindex="-1">Clear all</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-image-opacity-range">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-image-opacity-range" class="control-link-item-image-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-image-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-image-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-image-opacity-helper form-helper-item">Change the Background image opacity of all Bookmark tiles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,18 +0,0 @@
|
||||
<div id="menu-content-bookmarks-opacity" class="menu-content-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Opacity</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-opacity-range">Colour or background image</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
|
||||
<input class="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
|
||||
<button class="control-link-item-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-link-item-opacity-helper form-helper-item">Change the Colour or Background image Opacity of all Bookmark tiles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,7 +41,7 @@
|
||||
<a href="#menu-content-bookmarks-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
|
||||
<a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Colour override</a>
|
||||
<a href="#menu-content-bookmarks-accent" class="menu-nav-sub button button-small" tabindex="-1">Accent override</a>
|
||||
<a href="#menu-content-bookmarks-opacity" class="menu-nav-sub button button-small" tabindex="-1">Opacity</a>
|
||||
<a href="#menu-content-bookmarks-image" class="menu-nav-sub button button-small" tabindex="-1">Background image</a>
|
||||
<a href="#menu-content-bookmarks-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
|
||||
<a href="#menu-content-bookmarks-orientation" class="menu-nav-sub button button-small" tabindex="-1">Orientation</a>
|
||||
<a href="#menu-content-bookmarks-sort" class="menu-nav-sub button button-small" tabindex="-1">Sort</a>
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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();
|
||||
};
|
||||
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.43.0";
|
||||
var current = "5.44.0";
|
||||
|
||||
var name = "Macabre Caterpillar";
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user