Skip to content

Commit 27f84c5

Browse files
zombieFoxzombieFox
committed
[feature] add link opacity controls
1 parent f2e1ddf commit 27f84c5

File tree

11 files changed

+140
-31
lines changed

11 files changed

+140
-31
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nightTab",
3-
"version": "5.0.0",
3+
"version": "5.1.0",
44
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
55
"main": "index.js",
66
"scripts":{

‎src/css/link.css‎

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -183,11 +183,11 @@
183183
}
184184

185185
.is-link-item-color-by-theme .link-panel-front{
186-
background-color:rgb(var(--link-item-color-theme));
186+
background-color:rgba(var(--link-item-color-theme),var(--link-item-opacity));
187187
}
188188

189189
.is-link-item-color-by-custom .link-panel-front{
190-
background-color:rgb(var(--link-item-color-custom));
190+
background-color:rgba(var(--link-item-color-custom),var(--link-item-opacity));
191191
}
192192

193193
.is-link-style-block .link-panel-front{
@@ -234,7 +234,7 @@
234234
.is-link-item-color-by-theme .link-item:focus-within .link-panel-front,
235235
.is-link-item-color-by-theme .link-item:focus .link-panel-front,
236236
.is-link-item-color-by-theme .link-item:hover .link-panel-front{
237-
background-color:rgb(var(--theme-color-03));
237+
background-color:rgba(var(--theme-color-03),var(--link-item-opacity));
238238
}
239239

240240
.is-link-item-shadow-show.is-link-orientation-bottom .link-item:focus .link-panel-front,
@@ -735,7 +735,11 @@
735735
justify-content: flex-end;
736736
z-index:2;
737737
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);
738-
clip-path:polygon(00,100%0,100%100%,0100%);
738+
}
739+
740+
.is-edit .link-panel-back{
741+
height:100%;
742+
top:0;
739743
}
740744

741745
.is-link-orientation-top .link-panel-back{
@@ -758,42 +762,65 @@
758762
top:var(--layout-line-width);
759763
}
760764

765+
.is-edit.is-link-item-line-show .link-panel-back{
766+
height:100%;
767+
}
768+
769+
.is-edit.is-link-item-line-show.is-link-orientation-top .link-panel-back,
770+
.is-edit.is-link-item-line-show.is-link-orientation-bottom .link-panel-back{
771+
top:0;
772+
}
773+
774+
.is-link-orientation-top .link-panel-back{
775+
clip-path:polygon(00,100%0,100%calc(0%+var(--link-item-padding)),0calc(0%+var(--link-item-padding)));
776+
}
777+
778+
.is-link-orientation-bottom .link-panel-back{
779+
clip-path:polygon(0calc(100%-var(--link-item-padding)),100%calc(100%-var(--link-item-padding)),100%100%,0100%);
780+
}
781+
782+
.is-link-orientation-top.is-link-item-line-show .link-panel-back{
783+
clip-path:polygon(00,100%0,100%calc(var(--layout-line-width) +var(--link-item-padding)),0calc(var(--layout-line-width) +var(--link-item-padding)));
784+
}
785+
786+
.is-link-orientation-bottom.is-link-item-line-show .link-panel-back{
787+
clip-path:polygon(0calc(100%-var(--layout-line-width) -var(--link-item-padding)),100%calc(100%-var(--layout-line-width) -var(--link-item-padding)),100%100%,0100%);
788+
}
789+
790+
.is-link-orientation-top .link-item:focus .link-panel-back,
791+
.is-link-orientation-top .link-item:focus-within .link-panel-back,
792+
.is-link-orientation-top .link-item:hover .link-panel-back,
793+
.is-link-orientation-bottom .link-item:focus .link-panel-back,
794+
.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
795+
.is-link-orientation-bottom .link-item:hover .link-panel-back{
796+
top:0;
797+
height:100%;
798+
}
799+
761800
.is-link-item-url-show.is-link-orientation-top .link-item:focus .link-panel-back,
762801
.is-link-item-url-show.is-link-orientation-top .link-item:focus-within .link-panel-back,
763802
.is-link-item-url-show.is-link-orientation-top .link-item:hover .link-panel-back{
764-
height:100%;
765-
top:0;
766-
clip-path:polygon(00,100%0,100%calc(var(--link-item-url-height) +10%),0calc(var(--link-item-url-height) +10%));
803+
clip-path:polygon(00,100%0,100%calc(var(--link-item-url-height) +var(--link-item-padding)),0calc(var(--link-item-url-height) +var(--link-item-padding)));
767804
}
768805

769806
.is-link-item-url-show.is-link-orientation-bottom .link-item:focus .link-panel-back,
770807
.is-link-item-url-show.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
771808
.is-link-item-url-show.is-link-orientation-bottom .link-item:hover .link-panel-back{
772-
height:100%;
773-
top:0;
774-
clip-path:polygon(0calc(100%-calc(var(--link-item-url-height) +10%)),100%calc(100%-calc(var(--link-item-url-height) +10%)),100%100%,0100%);
809+
clip-path:polygon(0calc(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%,0100%);
775810
}
776811

777-
.is-edit.is-link-orientation-top .link-panel-back,
778-
.is-edit.is-link-orientation-top .link-panel-back,
779812
.is-edit.is-link-orientation-top .link-panel-back,
780813
.is-edit.is-link-orientation-top .link-item:focus .link-panel-back,
781814
.is-edit.is-link-orientation-top .link-item:focus-within .link-panel-back,
782815
.is-edit.is-link-orientation-top .link-item:hover .link-panel-back{
783-
height:100%;
784-
top:0;
785-
clip-path:polygon(00,100%0,100%calc(100%-calc(var(--link-item-edit-height) -10%)),0calc(100%-calc(var(--link-item-edit-height) -10%)))
816+
clip-path:polygon(00,100%0,100%calc(var(--link-item-edit-height) +var(--link-item-padding)),0calc(var(--link-item-edit-height) +var(--link-item-padding)));
786817
}
787818

788-
.is-edit.is-link-orientation-bottom .link-panel-back,
789-
.is-edit.is-link-orientation-bottom .link-panel-back,
790819
.is-edit.is-link-orientation-bottom .link-panel-back,
791820
.is-edit.is-link-orientation-bottom .link-item:focus .link-panel-back,
792821
.is-edit.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
793822
.is-edit.is-link-orientation-bottom .link-item:hover .link-panel-back{
794-
height:100%;
795-
top:0;
796-
clip-path:polygon(0calc(100%-calc(var(--link-item-edit-height) +10%)),100%calc(100%-calc(var(--link-item-edit-height) +10%)),100%100%,0100%);
823+
clip-path:polygon(0calc(100%-var(--link-item-edit-height) -var(--link-item-padding)),100%calc(100%-var(--link-item-edit-height) -var(--link-item-padding)),100%100%,0100%);
797824
}
798825

799826
.link-control{

‎src/css/variables.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@
116116
--link-item-display-translate-y:0em;
117117
--link-item-display-name-size:0.9em;
118118
--link-item-border:0;
119+
--link-item-opacity:1;
120+
--link-item-padding:1em;
119121
/* layout */
120122
--layout-size:1;
121123
--layout-width:80%;
@@ -339,6 +341,10 @@
339341
--link-item-edit-height:50%;
340342
}
341343

344+
.is-link-item-opacity{
345+
--link-item-padding:0em;
346+
}
347+
342348
@media (min-width:700px){
343349
:root{
344350
/* theme */

‎src/html/menu/content/bookmarks/color.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,14 @@ <h1 class="menu-item-header-text">Colour</h1>
3030
</div>
3131
</div>
3232
</div>
33+
<hr>
34+
<divclass="form-wrap">
35+
<labelfor="control-link-item-opacity-range">Opacity</label>
36+
<divclass="form-group form-group-block">
37+
<inputid="control-link-item-opacity-range" class="control-link-item-opacity-range mr-3" type="range" value="0" tabindex="-1">
38+
<inputclass="control-link-item-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
39+
<buttonclass="control-link-item-opacity-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
40+
</div>
41+
</div>
3342
</div>
3443
</div>

‎src/js/control.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3848,6 +3848,54 @@ var control = (function(){
38483848
func: function(){
38493849
link.render.item.color.custom();
38503850
}
3851+
},{
3852+
element: ".control-link-item-opacity-range",
3853+
path: "link.item.opacity",
3854+
type: "range",
3855+
valueConvert: ["float"],
3856+
valueModify: {
3857+
min: 0,
3858+
max: 100
3859+
},
3860+
mirrorElement: [{
3861+
element: ".control-link-item-opacity-number",
3862+
path: "link.item.opacity",
3863+
type: "number",
3864+
valueConvert: ["float"]
3865+
}],
3866+
func: function(){
3867+
link.render.item.opacity();
3868+
render.class();
3869+
}
3870+
},{
3871+
element: ".control-link-item-opacity-number",
3872+
path: "link.item.opacity",
3873+
type: "range",
3874+
valueConvert: ["float"],
3875+
valueModify: {
3876+
min: 0,
3877+
max: 100
3878+
},
3879+
mirrorElement: [{
3880+
element: ".control-link-item-opacity-range",
3881+
path: "link.item.opacity",
3882+
type: "number",
3883+
valueConvert: ["float"]
3884+
}],
3885+
func: function(){
3886+
link.render.item.opacity();
3887+
render.class();
3888+
}
3889+
},{
3890+
element: ".control-link-item-opacity-default",
3891+
type: "button",
3892+
func: function(){
3893+
mod.default("link.item.opacity");
3894+
link.render.item.opacity();
3895+
render.update.control.header();
3896+
render.update.control.menu();
3897+
render.class();
3898+
}
38513899
}],
38523900
border: [{
38533901
element: ".control-link-item-border-range",
@@ -6652,6 +6700,14 @@ var control = (function(){
66526700
returnstate.get.current().link.show;
66536701
},
66546702
name: "is-link-item-color-by-"+state.get.current().link.item.color.by
6703+
},{
6704+
remove: [
6705+
"is-link-item-opacity"
6706+
],
6707+
condition: function(){
6708+
return(state.get.current().link.item.opacity<1);
6709+
},
6710+
name: "is-link-item-opacity"
66556711
},{
66566712
remove: [
66576713
"is-link-item-display-direction-horizontal",

‎src/js/link.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -706,11 +706,6 @@ var link = (function(){
706706
};
707707

708708
render.item={
709-
color: {
710-
custom: function(){
711-
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);
712-
}
713-
},
714709
link: function(){
715710
varlinkItemOptions={
716711
tag: "div",
@@ -1296,6 +1291,11 @@ var link = (function(){
12961291
});
12971292
};
12981293
},
1294+
color: {
1295+
custom: function(){
1296+
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);
1297+
}
1298+
},
12991299
border: function(){
13001300
varhtml=helper.e("html");
13011301
html.style.setProperty("--link-item-border",state.get.current().link.item.border);
@@ -1317,6 +1317,10 @@ var link = (function(){
13171317
gutter: function(){
13181318
varhtml=helper.e("html");
13191319
html.style.setProperty("--link-item-display-gutter",state.get.current().link.item.display.gutter);
1320+
},
1321+
opacity: function(){
1322+
varhtml=helper.e("html");
1323+
html.style.setProperty("--link-item-opacity",state.get.current().link.item.opacity);
13201324
}
13211325
};
13221326

@@ -1991,6 +1995,7 @@ var link = (function(){
19911995
render.item.translate.x();
19921996
render.item.translate.y();
19931997
render.item.gutter();
1998+
render.item.opacity();
19941999
render.area.width();
19952000
};
19962001

‎src/js/state.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,8 @@ var state = (function(){
217217
},
218218
newTab: false,
219219
size: 1,
220-
border: 0
220+
border: 0,
221+
opacity: 1
221222
},
222223
show: true,
223224
add: false,
@@ -418,7 +419,8 @@ var state = (function(){
418419
}
419420
},
420421
size: 1,
421-
border: 0
422+
border: 0,
423+
opacity: 1
422424
}
423425
},
424426
group: {

‎src/js/update.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -903,6 +903,10 @@ var update = (function(){
903903
data.state.header.clock.separator.text=":";
904904
data.state.header.date.separator.text="/";
905905
returndata;
906+
},
907+
"5.1.0": function(data){
908+
data.state.link.item.opacity=1;
909+
returndata;
906910
}
907911
};
908912

‎src/js/version.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
varversion=(function(){
22

3-
varcurrent="5.0.0";
3+
varcurrent="5.1.0";
44

55
varname="Zonked Tarsier";
66

0 commit comments

Comments
(0)