extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-27 00:08:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve link item name colour

Browse Source
This commit is contained in:
zombieFox 2020-07-23 10:56:16 +01:00
parent 7d9ffd176d
commit 2dbf22c1dc
9 changed files with 68 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.62.0", "version": "5.63.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.62.0", "version": "5.63.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

1
src/css/form.css
View File

@ -5,6 +5,7 @@ fieldset:not(:only-child):not(:last-child),
position: relative; position: relative;
width: 100%; width: 100%;
display: block; display: block;
transition: border-color var(--layout-transition-extra-fast);
} }
fieldset:not(:first-child), fieldset:not(:first-child),

10
src/css/link.css
View File

@ -681,14 +681,14 @@
font-family: var(--theme-font-display-name); font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight); font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style); font-style: var(--theme-font-display-style);
color: rgb(var(--theme-accent)); color: rgb(var(--link-item-visual-element-color));
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
transition: color var(--layout-transition-extra-fast); transition: color var(--layout-transition-extra-fast);
} }
.link-display-icon { .link-display-icon {
color: rgb(var(--theme-accent)); color: rgb(var(--link-item-visual-element-color));
transition: color var(--layout-transition-extra-fast); transition: color var(--layout-transition-extra-fast);
} }
@ -725,12 +725,12 @@
.link-item:focus .link-display-letter, .link-item:focus .link-display-letter,
.link-item:hover .link-display-icon, .link-item:hover .link-display-icon,
.link-item:focus .link-display-icon { .link-item:focus .link-display-icon {
color: rgb(var(--theme-style-text)); color: rgb(var(--link-item-visual-element-color-focus-hover));
} }
.link-panel-front:focus .link-display-letter, .link-panel-front:focus .link-display-letter,
.link-panel-front:focus .link-display-icon { .link-panel-front:focus .link-display-icon {
color: rgb(var(--theme-style-text)); color: rgb(var(--link-item-visual-element-color-focus-hover));
} }
/* link name */ /* link name */
@ -778,7 +778,7 @@
} }
.link-panel-front:focus .link-display-name { .link-panel-front:focus .link-display-name {
color: rgb(var(--link-item-mame-color-focus-hover)); color: rgb(var(--link-item-name-color-focus-hover));
} }
/* link panel back */ /* link panel back */

3
src/css/modal.css
View File

@ -34,7 +34,7 @@
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
justify-items: stretch; justify-items: stretch;
align-items: stretch; align-items: stretch;
transition: opacity var(--layout-transition-extra-fast); transition: background-color var(--layout-transition-extra-fast), opacity var(--layout-transition-extra-fast);
} }
.modal-wrapper .container { .modal-wrapper .container {
@ -63,6 +63,7 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
display: flex; display: flex;
transition: background-color var(--layout-transition-extra-fast);
} }
.modal-button { .modal-button {

6
src/css/variables.css
View File

@ -112,8 +112,10 @@
--link-item-color: var(--theme-color-02); --link-item-color: var(--theme-color-02);
--link-item-color-opacity: 1; --link-item-color-opacity: 1;
--link-item-color-focus-hover: var(--theme-color-03); --link-item-color-focus-hover: var(--theme-color-03);
--link-item-mame-color: var(--theme-color-18); --link-item-visual-element-color: var(--theme-accent);
--link-item-mame-color-focus-hover: var(--theme-style-text); --link-item-visual-element-color-focus-hover: var(--theme-style-text);
--link-item-name-color: var(--theme-color-19);
--link-item-name-color-focus-hover: var(--theme-style-text);
--link-item-image-opacity: 1; --link-item-image-opacity: 1;
--link-item-size: 1em; --link-item-size: 1em;
--link-item-display-space: 0.25em; --link-item-display-space: 0.25em;

105
src/js/link.js
View File

@ -1291,92 +1291,91 @@ var link = (function() {
options = helper.applyOptions(options, override); options = helper.applyOptions(options, override);
}; };
var liniItemClass = ["link-item"]; var linkItemClass = ["link-item"];
var liniItemStyle = []; var linkItemStyle = [];
if (options.preview) { if (options.preview) {
liniItemClass.push("link-item-preview"); linkItemClass.push("link-item-preview");
}; };
if (stagedLink.link.display.visual.show) { if (stagedLink.link.display.visual.show) {
liniItemClass.push("link-item-visual"); linkItemClass.push("link-item-visual");
}; };
if (stagedLink.link.display.name.show) { if (stagedLink.link.display.name.show) {
liniItemClass.push("link-item-name"); linkItemClass.push("link-item-name");
}; };
if (stagedLink.link.display.visual.show || stagedLink.link.display.name.show) { if (stagedLink.link.display.visual.show || stagedLink.link.display.name.show) {
liniItemClass.push("link-item-alignment-" + stagedLink.link.display.alignment); linkItemClass.push("link-item-alignment-" + stagedLink.link.display.alignment);
liniItemClass.push("link-item-order-" + stagedLink.link.display.order); linkItemClass.push("link-item-order-" + stagedLink.link.display.order);
liniItemClass.push("link-item-direction-" + stagedLink.link.display.direction); linkItemClass.push("link-item-direction-" + stagedLink.link.display.direction);
}; };
if (stagedLink.link.wide) { if (stagedLink.link.wide) {
liniItemClass.push("link-item-wide"); linkItemClass.push("link-item-wide");
}; };
if (stagedLink.link.tall) { if (stagedLink.link.tall) {
liniItemClass.push("link-item-tall"); linkItemClass.push("link-item-tall");
}; };
if (stagedLink.link.color.opacity < 1) { if (stagedLink.link.color.opacity < 1) {
liniItemStyle.push("--link-item-clip-padding: 0em;"); linkItemStyle.push("--link-item-clip-padding: 0em;");
}; };
if (stagedLink.link.display.visual.shadow.size > 0) { if (stagedLink.link.display.visual.shadow.size > 0) {
liniItemClass.push("link-item-display-visual-shadow"); linkItemClass.push("link-item-display-visual-shadow");
liniItemStyle.push("--link-item-display-visual-shadow-size: " + stagedLink.link.display.visual.shadow.size + ";"); linkItemStyle.push("--link-item-display-visual-shadow-size: " + stagedLink.link.display.visual.shadow.size + ";");
liniItemStyle.push("--link-item-display-visual-shadow-offset: 0.02em;"); linkItemStyle.push("--link-item-display-visual-shadow-offset: 0.02em;");
liniItemStyle.push("--link-item-display-visual-shadow-blur: 0.02em;"); linkItemStyle.push("--link-item-display-visual-shadow-blur: 0.02em;");
liniItemStyle.push("--link-item-display-visual-shadow-opacity: 0.01;"); linkItemStyle.push("--link-item-display-visual-shadow-opacity: 0.01;");
liniItemStyle.push("--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)));"); linkItemStyle.push("--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)));");
}; };
liniItemStyle.push("--link-item-color-opacity: " + stagedLink.link.color.opacity + ";"); linkItemStyle.push("--link-item-color-opacity: " + stagedLink.link.color.opacity + ";");
liniItemStyle.push("--link-item-image-opacity: " + stagedLink.link.image.opacity + ";"); linkItemStyle.push("--link-item-image-opacity: " + stagedLink.link.image.opacity + ";");
liniItemStyle.push("--link-item-display-rotate: " + stagedLink.link.display.rotate + "deg;"); linkItemStyle.push("--link-item-display-rotate: " + stagedLink.link.display.rotate + "deg;");
liniItemStyle.push("--link-item-display-gutter: " + stagedLink.link.display.gutter + ";"); linkItemStyle.push("--link-item-display-gutter: " + stagedLink.link.display.gutter + ";");
liniItemStyle.push("--link-item-display-translate-x: " + stagedLink.link.display.translate.x + "em;"); linkItemStyle.push("--link-item-display-translate-x: " + stagedLink.link.display.translate.x + "em;");
liniItemStyle.push("--link-item-display-translate-y: " + stagedLink.link.display.translate.y + "em;"); linkItemStyle.push("--link-item-display-translate-y: " + stagedLink.link.display.translate.y + "em;");
if (stagedLink.link.display.visual.type == "letter") { if (stagedLink.link.display.visual.type == "letter") {
liniItemStyle.push("--link-item-display-visual-letter-size: " + stagedLink.link.display.visual.letter.size + "em;"); linkItemStyle.push("--link-item-display-visual-letter-size: " + stagedLink.link.display.visual.letter.size + "em;");
} else if (stagedLink.link.display.visual.type == "icon") { } else if (stagedLink.link.display.visual.type == "icon") {
liniItemStyle.push("--link-item-display-visual-icon-size: " + stagedLink.link.display.visual.icon.size + "em;"); linkItemStyle.push("--link-item-display-visual-icon-size: " + stagedLink.link.display.visual.icon.size + "em;");
} else if (stagedLink.link.display.visual.type == "image") { } else if (stagedLink.link.display.visual.type == "image") {
liniItemStyle.push("--link-item-display-visual-image-size: " + stagedLink.link.display.visual.image.size + "em;"); linkItemStyle.push("--link-item-display-visual-image-size: " + stagedLink.link.display.visual.image.size + "em;");
}; };
if (stagedLink.link.display.name.show) { if (stagedLink.link.display.name.show) {
liniItemStyle.push("--link-item-display-name-size: " + stagedLink.link.display.name.size + "em;"); linkItemStyle.push("--link-item-display-name-size: " + stagedLink.link.display.name.size + "em;");
}; };
if (stagedLink.link.accent.by == "custom" || stagedLink.link.color.by == "custom" || helper.checkIfValidString(stagedLink.link.image.url)) { if (stagedLink.link.accent.by == "custom" || stagedLink.link.color.by == "custom" || helper.checkIfValidString(stagedLink.link.image.url)) {
if (stagedLink.link.accent.by == "custom") { if (stagedLink.link.accent.by == "custom") {
liniItemStyle.push("--theme-accent-r: " + stagedLink.link.accent.rgb.r + ";"); linkItemStyle.push("--theme-accent-r: " + stagedLink.link.accent.rgb.r + ";");
liniItemStyle.push("--theme-accent-g: " + stagedLink.link.accent.rgb.g + ";"); linkItemStyle.push("--theme-accent-g: " + stagedLink.link.accent.rgb.g + ";");
liniItemStyle.push("--theme-accent-b: " + stagedLink.link.accent.rgb.b + ";"); linkItemStyle.push("--theme-accent-b: " + stagedLink.link.accent.rgb.b + ";");
liniItemStyle.push("--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);"); linkItemStyle.push("--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);");
liniItemStyle.push("--theme-accent-accessible-threshold: 0.5;"); linkItemStyle.push("--theme-accent-accessible-threshold: 0.5;");
liniItemStyle.push("--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);"); linkItemStyle.push("--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);");
liniItemStyle.push("--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);"); linkItemStyle.push("--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);");
liniItemStyle.push("--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);"); linkItemStyle.push("--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);");
liniItemStyle.push("--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));"); linkItemStyle.push("--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));");
liniItemStyle.push("--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);"); linkItemStyle.push("--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);");
liniItemStyle.push("--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);"); linkItemStyle.push("--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);");
linkItemStyle.push("--link-item-visual-element-color: var(--theme-accent);");
}; };
if (stagedLink.link.color.by == "custom") { if (stagedLink.link.color.by == "custom") {
var hsl = helper.convertColor.rgb.hsl(stagedLink.link.color.rgb); var hsl = helper.convertColor.rgb.hsl(stagedLink.link.color.rgb);
var shades = theme.mod.color.shades(stagedLink.link.color.rgb);
var rgb;
if (hsl.l < 50) { if (hsl.l < 50) {
hsl.l = hsl.l + 40; rgb = shades.positive["9"];
linkItemStyle.push("--theme-style-text: var(--theme-white);");
} else { } else {
hsl.l = hsl.l - 40; rgb = shades.negative["9"];
linkItemStyle.push("--theme-style-text: var(--theme-black);");
}; };
var rgb = helper.convertColor.hsl.rgb(hsl); linkItemStyle.push("--link-item-visual-element-color-focus-hover: var(--theme-style-text);");
rgb = { linkItemStyle.push("--link-item-color: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";");
r: Math.round(rgb.r), linkItemStyle.push("--link-item-color-focus-hover: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";");
g: Math.round(rgb.g), linkItemStyle.push("--link-item-name-color: " + rgb.r + ", " + rgb.g + ", " + rgb.b + ";");
b: Math.round(rgb.b)
};
liniItemStyle.push("--link-item-color: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";");
liniItemStyle.push("--link-item-color-focus-hover: " + stagedLink.link.color.rgb.r + ", " + stagedLink.link.color.rgb.g + ", " + stagedLink.link.color.rgb.b + ";");
liniItemStyle.push("--link-item-name-color: " + rgb.r + ", " + rgb.g + ", " + rgb.b + ";");
liniItemStyle.push("--link-item-name-color-focus-hover: " + rgb.r + ", " + rgb.g + ", " + rgb.b + ";");
}; };
if (helper.checkIfValidString(stagedLink.link.image.url)) { if (helper.checkIfValidString(stagedLink.link.image.url)) {
liniItemStyle.push("--link-item-image-url: url(" + helper.trimString(stagedLink.link.image.url) + ");"); linkItemStyle.push("--link-item-image-url: url(" + helper.trimString(stagedLink.link.image.url) + ");");
}; };
}; };
@ -1384,10 +1383,10 @@ var link = (function() {
tag: "div", tag: "div",
attr: [{ attr: [{
key: "class", key: "class",
value: liniItemClass.join(" ") value: linkItemClass.join(" ")
}, { }, {
key: "style", key: "style",
value: liniItemStyle.join(" ") value: linkItemStyle.join(" ")
}] }]
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "5.62.0"; var current = "5.63.0";
var name = "Jaded Raven"; var name = "Jaded Raven";

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "5.62.0", "version": "5.63.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"