mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-10 16:08:12 +01:00
[refactor] improve theme preset and custom buttons
This commit is contained in:
zombieFox
parent
9fe3f50cbc
commit
dd74ded1f9
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.17.0",
|
||||
"version": "5.18.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.17.0",
|
||||
"version": "5.18.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": {
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
|
||||
.theme-custom-control {
|
||||
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
|
||||
width: 100%;
|
||||
@ -100,6 +99,14 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.theme-preset-background-01 {
|
||||
background-color: rgb(var(--theme-preset-background-01));
|
||||
}
|
||||
|
||||
.theme-custom-background-01 {
|
||||
background-color: rgb(var(--theme-custom-background-01));
|
||||
}
|
||||
|
||||
.theme-preset-background-02,
|
||||
.theme-custom-background-02 {
|
||||
z-index: 2;
|
||||
@ -107,6 +114,14 @@
|
||||
transition-delay: var(--layout-duration-03);
|
||||
}
|
||||
|
||||
.theme-preset-background-02 {
|
||||
background-color: rgb(var(--theme-preset-background-02));
|
||||
}
|
||||
|
||||
.theme-custom-background-02 {
|
||||
background-color: rgb(var(--theme-custom-background-02));
|
||||
}
|
||||
|
||||
.theme-preset-background-03,
|
||||
.theme-custom-background-03 {
|
||||
z-index: 3;
|
||||
@ -114,6 +129,14 @@
|
||||
transition-delay: var(--layout-duration-02);
|
||||
}
|
||||
|
||||
.theme-preset-background-03 {
|
||||
background-color: rgb(var(--theme-preset-background-03));
|
||||
}
|
||||
|
||||
.theme-custom-background-03 {
|
||||
background-color: rgb(var(--theme-custom-background-03));
|
||||
}
|
||||
|
||||
.theme-preset-background-04,
|
||||
.theme-custom-background-04 {
|
||||
z-index: 4;
|
||||
@ -121,12 +144,28 @@
|
||||
transition-delay: var(--layout-duration-01);
|
||||
}
|
||||
|
||||
.theme-preset-background-04 {
|
||||
background-color: rgb(var(--theme-preset-background-04));
|
||||
}
|
||||
|
||||
.theme-custom-background-04 {
|
||||
background-color: rgb(var(--theme-custom-background-04));
|
||||
}
|
||||
|
||||
.theme-preset-accent,
|
||||
.theme-custom-accent {
|
||||
z-index: 5;
|
||||
clip-path: circle(30% at 100% 100%);
|
||||
}
|
||||
|
||||
.theme-preset-accent {
|
||||
background-color: rgb(var(--theme-preset-accent));
|
||||
}
|
||||
|
||||
.theme-custom-accent {
|
||||
background-color: rgb(var(--theme-custom-accent));
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-accent {
|
||||
clip-path: circle(30% at 100% 60%);
|
||||
}
|
||||
@ -288,7 +327,6 @@
|
||||
height: 1.5em;
|
||||
min-width: 1.5em;
|
||||
min-height: 1.5em;
|
||||
min-height: initial;
|
||||
}
|
||||
|
||||
.theme-accent-preset-item:focus,
|
||||
@ -297,7 +335,6 @@
|
||||
background-color: hsl(var(--theme-accent-preset-item-color-h), calc(var(--theme-accent-preset-item-color-s) * 1%), calc(var(--theme-accent-preset-item-color-l) * 1%));
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.theme-accent-preset-item {
|
||||
width: 2em;
|
||||
|
||||
@ -2080,19 +2080,31 @@ var theme = (function() {
|
||||
var hsl = arrayItem.color.hsl;
|
||||
for (var i = 1; i <= shadeSteps; i++) {
|
||||
if (i > 1) {
|
||||
if (arrayItem.style == "dark") {
|
||||
var shiftDark = function() {
|
||||
rgb = helper.convertColor.hsl.rgb({
|
||||
h: hsl.h,
|
||||
s: hsl.s,
|
||||
l: hsl.l - ((arrayItem.color.contrast.dark) * (i * 2))
|
||||
});
|
||||
} else if (arrayItem.style == "light") {
|
||||
};
|
||||
var shiftLight = function() {
|
||||
rgb = helper.convertColor.hsl.rgb({
|
||||
h: hsl.h,
|
||||
s: hsl.s,
|
||||
l: hsl.l + ((arrayItem.color.contrast.light) * (i * 2))
|
||||
});
|
||||
};
|
||||
if (arrayItem.style == "dark") {
|
||||
shiftDark();
|
||||
} else if (arrayItem.style == "light") {
|
||||
shiftLight();
|
||||
} else if (arrayItem.style == "system") {
|
||||
if (window.matchMedia("(prefers-color-scheme:dark)").matches) {
|
||||
shiftDark();
|
||||
} else if (window.matchMedia("(prefers-color-scheme:light)").matches) {
|
||||
shiftLight();
|
||||
};
|
||||
};
|
||||
};
|
||||
for (var colorKey in rgb) {
|
||||
if (rgb[colorKey] < 0) {
|
||||
@ -2103,11 +2115,11 @@ var theme = (function() {
|
||||
rgb[colorKey] = Math.round(rgb[colorKey]);
|
||||
};
|
||||
var themePresetBackground = helper.node("span|class:theme-preset-background-0" + i);
|
||||
themePresetBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")");
|
||||
themePresetPreview.style.setProperty("--theme-preset-background-0" + i, rgb.r + ", " + rgb.g + ", " + rgb.b);
|
||||
themePresetPreview.appendChild(themePresetBackground);
|
||||
};
|
||||
var themePresetAccent = helper.node("span|class:theme-preset-accent");
|
||||
themePresetAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b + ")");
|
||||
themePresetPreview.style.setProperty("--theme-preset-accent", arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b);
|
||||
themePresetPreview.appendChild(themePresetAccent);
|
||||
if (arrayItem.name != null && arrayItem.name != "") {
|
||||
var themePresetName = helper.node("span:" + arrayItem.name + "|class:theme-preset-name");
|
||||
@ -2200,11 +2212,11 @@ var theme = (function() {
|
||||
rgb[colorKey] = Math.round(rgb[colorKey]);
|
||||
};
|
||||
var themeCustomBackground = helper.node("span|class:theme-custom-background-0" + i);
|
||||
themeCustomBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")");
|
||||
themeCustomPreview.style.setProperty("--theme-custom-background-0" + i, rgb.r + ", " + rgb.g + ", " + rgb.b);
|
||||
themeCustomPreview.appendChild(themeCustomBackground);
|
||||
};
|
||||
var themeCustomAccent = helper.node("span|class:theme-custom-accent");
|
||||
themeCustomAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b + ")");
|
||||
themeCustomPreview.style.setProperty("--theme-custom-accent", arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b);
|
||||
themeCustomPreview.appendChild(themeCustomAccent);
|
||||
if (arrayItem.name != null && arrayItem.name != "") {
|
||||
var themeCustomName = helper.node("span:" + arrayItem.name + "|class:theme-custom-name");
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.17.0";
|
||||
var current = "5.18.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.17.0",
|
||||
"version": "5.18.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user