mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-10 07:19:38 +01:00
[feature] add link opacity controls
This commit is contained in:
zombieFox
parent
f2e1ddf541
commit
27f84c55ff
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.0.0",
|
||||
"version": "5.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.0.0",
|
||||
"version": "5.1.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": {
|
||||
|
||||
@ -183,11 +183,11 @@
|
||||
}
|
||||
|
||||
.is-link-item-color-by-theme .link-panel-front {
|
||||
background-color: rgb(var(--link-item-color-theme));
|
||||
background-color: rgba(var(--link-item-color-theme), var(--link-item-opacity));
|
||||
}
|
||||
|
||||
.is-link-item-color-by-custom .link-panel-front {
|
||||
background-color: rgb(var(--link-item-color-custom));
|
||||
background-color: rgba(var(--link-item-color-custom), var(--link-item-opacity));
|
||||
}
|
||||
|
||||
.is-link-style-block .link-panel-front {
|
||||
@ -234,7 +234,7 @@
|
||||
.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));
|
||||
background-color: rgba(var(--theme-color-03), var(--link-item-opacity));
|
||||
}
|
||||
|
||||
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
|
||||
@ -735,7 +735,11 @@
|
||||
justify-content: flex-end;
|
||||
z-index: 2;
|
||||
transition: height var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-edit .link-panel-back {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.is-link-orientation-top .link-panel-back {
|
||||
@ -758,42 +762,65 @@
|
||||
top: var(--layout-line-width);
|
||||
}
|
||||
|
||||
.is-edit.is-link-item-line-show .link-panel-back {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-edit.is-link-item-line-show.is-link-orientation-top .link-panel-back,
|
||||
.is-edit.is-link-item-line-show.is-link-orientation-bottom .link-panel-back {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.is-link-orientation-top .link-panel-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(0% + var(--link-item-padding)), 0 calc(0% + var(--link-item-padding)));
|
||||
}
|
||||
|
||||
.is-link-orientation-bottom .link-panel-back {
|
||||
clip-path: polygon(0 calc(100% - var(--link-item-padding)), 100% calc(100% - var(--link-item-padding)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-link-orientation-top.is-link-item-line-show .link-panel-back {
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(var(--layout-line-width) + var(--link-item-padding)), 0 calc(var(--layout-line-width) + var(--link-item-padding)));
|
||||
}
|
||||
|
||||
.is-link-orientation-bottom.is-link-item-line-show .link-panel-back {
|
||||
clip-path: polygon(0 calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% calc(100% - var(--layout-line-width) - var(--link-item-padding)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-link-orientation-top .link-item:focus .link-panel-back,
|
||||
.is-link-orientation-top .link-item:focus-within .link-panel-back,
|
||||
.is-link-orientation-top .link-item:hover .link-panel-back,
|
||||
.is-link-orientation-bottom .link-item:focus .link-panel-back,
|
||||
.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
|
||||
.is-link-orientation-bottom .link-item:hover .link-panel-back {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-link-item-url-show.is-link-orientation-top .link-item:focus .link-panel-back,
|
||||
.is-link-item-url-show.is-link-orientation-top .link-item:focus-within .link-panel-back,
|
||||
.is-link-item-url-show.is-link-orientation-top .link-item:hover .link-panel-back {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + 10%), 0 calc(var(--link-item-url-height) + 10%));
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-url-height) + var(--link-item-padding)), 0 calc(var(--link-item-url-height) + var(--link-item-padding)));
|
||||
}
|
||||
|
||||
.is-link-item-url-show.is-link-orientation-bottom .link-item:focus .link-panel-back,
|
||||
.is-link-item-url-show.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
|
||||
.is-link-item-url-show.is-link-orientation-bottom .link-item:hover .link-panel-back {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
clip-path: polygon(0 calc(100% - calc(var(--link-item-url-height) + 10%)), 100% calc(100% - calc(var(--link-item-url-height) + 10%)), 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 calc(100% - calc(var(--link-item-url-height) + var(--link-item-padding))), 100% calc(100% - calc(var(--link-item-url-height) + var(--link-item-padding))), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.is-edit.is-link-orientation-top .link-panel-back,
|
||||
.is-edit.is-link-orientation-top .link-panel-back,
|
||||
.is-edit.is-link-orientation-top .link-panel-back,
|
||||
.is-edit.is-link-orientation-top .link-item:focus .link-panel-back,
|
||||
.is-edit.is-link-orientation-top .link-item:focus-within .link-panel-back,
|
||||
.is-edit.is-link-orientation-top .link-item:hover .link-panel-back {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(var(--link-item-edit-height) - 10%)), 0 calc(100% - calc(var(--link-item-edit-height) - 10%)))
|
||||
clip-path: polygon(0 0, 100% 0, 100% calc(var(--link-item-edit-height) + var(--link-item-padding)), 0 calc(var(--link-item-edit-height) + var(--link-item-padding)));
|
||||
}
|
||||
|
||||
.is-edit.is-link-orientation-bottom .link-panel-back,
|
||||
.is-edit.is-link-orientation-bottom .link-panel-back,
|
||||
.is-edit.is-link-orientation-bottom .link-panel-back,
|
||||
.is-edit.is-link-orientation-bottom .link-item:focus .link-panel-back,
|
||||
.is-edit.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
|
||||
.is-edit.is-link-orientation-bottom .link-item:hover .link-panel-back {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
clip-path: polygon(0 calc(100% - calc(var(--link-item-edit-height) + 10%)), 100% calc(100% - calc(var(--link-item-edit-height) + 10%)), 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% calc(100% - var(--link-item-edit-height) - var(--link-item-padding)), 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.link-control {
|
||||
|
||||
@ -116,6 +116,8 @@
|
||||
--link-item-display-translate-y: 0em;
|
||||
--link-item-display-name-size: 0.9em;
|
||||
--link-item-border: 0;
|
||||
--link-item-opacity: 1;
|
||||
--link-item-padding: 1em;
|
||||
/* layout */
|
||||
--layout-size: 1;
|
||||
--layout-width: 80%;
|
||||
@ -339,6 +341,10 @@
|
||||
--link-item-edit-height: 50%;
|
||||
}
|
||||
|
||||
.is-link-item-opacity {
|
||||
--link-item-padding: 0em;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
:root {
|
||||
/* theme */
|
||||
|
||||
@ -30,5 +30,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-link-item-opacity-range">Opacity</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" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3848,6 +3848,54 @@ var control = (function() {
|
||||
func: function() {
|
||||
link.render.item.color.custom();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-opacity-range",
|
||||
path: "link.item.opacity",
|
||||
type: "range",
|
||||
valueConvert: ["float"],
|
||||
valueModify: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
mirrorElement: [{
|
||||
element: ".control-link-item-opacity-number",
|
||||
path: "link.item.opacity",
|
||||
type: "number",
|
||||
valueConvert: ["float"]
|
||||
}],
|
||||
func: function() {
|
||||
link.render.item.opacity();
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-opacity-number",
|
||||
path: "link.item.opacity",
|
||||
type: "range",
|
||||
valueConvert: ["float"],
|
||||
valueModify: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
mirrorElement: [{
|
||||
element: ".control-link-item-opacity-range",
|
||||
path: "link.item.opacity",
|
||||
type: "number",
|
||||
valueConvert: ["float"]
|
||||
}],
|
||||
func: function() {
|
||||
link.render.item.opacity();
|
||||
render.class();
|
||||
}
|
||||
}, {
|
||||
element: ".control-link-item-opacity-default",
|
||||
type: "button",
|
||||
func: function() {
|
||||
mod.default("link.item.opacity");
|
||||
link.render.item.opacity();
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
render.class();
|
||||
}
|
||||
}],
|
||||
border: [{
|
||||
element: ".control-link-item-border-range",
|
||||
@ -6652,6 +6700,14 @@ var control = (function() {
|
||||
return state.get.current().link.show;
|
||||
},
|
||||
name: "is-link-item-color-by-" + state.get.current().link.item.color.by
|
||||
}, {
|
||||
remove: [
|
||||
"is-link-item-opacity"
|
||||
],
|
||||
condition: function() {
|
||||
return (state.get.current().link.item.opacity < 1);
|
||||
},
|
||||
name: "is-link-item-opacity"
|
||||
}, {
|
||||
remove: [
|
||||
"is-link-item-display-direction-horizontal",
|
||||
|
||||
@ -706,11 +706,6 @@ var link = (function() {
|
||||
};
|
||||
|
||||
render.item = {
|
||||
color: {
|
||||
custom: function() {
|
||||
helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.rgb.r + ", " + state.get.current().link.item.color.rgb.g + ", " + state.get.current().link.item.color.rgb.b);
|
||||
}
|
||||
},
|
||||
link: function() {
|
||||
var linkItemOptions = {
|
||||
tag: "div",
|
||||
@ -1296,6 +1291,11 @@ var link = (function() {
|
||||
});
|
||||
};
|
||||
},
|
||||
color: {
|
||||
custom: function() {
|
||||
helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.rgb.r + ", " + state.get.current().link.item.color.rgb.g + ", " + state.get.current().link.item.color.rgb.b);
|
||||
}
|
||||
},
|
||||
border: function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--link-item-border", state.get.current().link.item.border);
|
||||
@ -1317,6 +1317,10 @@ var link = (function() {
|
||||
gutter: 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);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1991,6 +1995,7 @@ var link = (function() {
|
||||
render.item.translate.x();
|
||||
render.item.translate.y();
|
||||
render.item.gutter();
|
||||
render.item.opacity();
|
||||
render.area.width();
|
||||
};
|
||||
|
||||
|
||||
@ -217,7 +217,8 @@ var state = (function() {
|
||||
},
|
||||
newTab: false,
|
||||
size: 1,
|
||||
border: 0
|
||||
border: 0,
|
||||
opacity: 1
|
||||
},
|
||||
show: true,
|
||||
add: false,
|
||||
@ -418,7 +419,8 @@ var state = (function() {
|
||||
}
|
||||
},
|
||||
size: 1,
|
||||
border: 0
|
||||
border: 0,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
group: {
|
||||
|
||||
@ -903,6 +903,10 @@ var update = (function() {
|
||||
data.state.header.clock.separator.text = ":";
|
||||
data.state.header.date.separator.text = "/";
|
||||
return data;
|
||||
},
|
||||
"5.1.0": function(data) {
|
||||
data.state.link.item.opacity = 1;
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.0.0";
|
||||
var current = "5.1.0";
|
||||
|
||||
var name = "Zonked Tarsier";
|
||||
|
||||
|
||||
@ -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.0.0",
|
||||
"version": "5.1.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user