mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-25 07:19:13 +01:00
[feature] add theme accent preset colours
This commit is contained in:
zombieFox
parent
79685343f5
commit
15e6650079
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.15.0",
|
||||
"version": "5.16.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.15.0",
|
||||
"version": "5.16.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": {
|
||||
|
||||
@ -191,6 +191,19 @@ button [class*=" button-"]:last-child,
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.button-ring {
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.button-ring:hover {
|
||||
box-shadow: var(--form-ring-hover);
|
||||
}
|
||||
|
||||
.button-ring:focus,
|
||||
.button-ring:active {
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
.button-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
@ -2,25 +2,22 @@
|
||||
.theme-custom-item {
|
||||
width: var(--theme-preview-size);
|
||||
height: var(--theme-preview-size);
|
||||
border-radius: var(--theme-radius);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-preset-button,
|
||||
.theme-custom-button {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
width: var(--theme-preview-size);
|
||||
height: var(--theme-preview-size);
|
||||
border-radius: var(--theme-radius);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 1.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.theme-preset-button:after,
|
||||
@ -29,10 +26,12 @@
|
||||
}
|
||||
|
||||
.theme-custom-control {
|
||||
width: var(--theme-preview-size);
|
||||
border-radius: 0 0 var(--theme-radius) var(--theme-radius);
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
@ -51,21 +50,38 @@
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-button {
|
||||
height: calc(var(--theme-preview-size) - var(--theme-custom-edit-height));
|
||||
border-radius: var(--theme-radius) var(--theme-radius) 0 0;
|
||||
height: calc(100% - var(--theme-custom-edit-height));
|
||||
box-shadow: var(--theme-shadow-bottom-medium);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-button:hover {
|
||||
box-shadow: var(--form-ring-hover);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-button:focus,
|
||||
.is-theme-custom-edit .theme-custom-button:active {
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-control {
|
||||
height: var(--theme-custom-edit-height);
|
||||
}
|
||||
|
||||
.theme-preset-preview,
|
||||
.theme-custom-preview {
|
||||
width: var(--theme-preview-size);
|
||||
height: var(--theme-preview-size);
|
||||
border-radius: var(--theme-radius);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
transition: border-radius var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-theme-custom-edit .theme-custom-preview {
|
||||
border-radius: var(--theme-radius) var(--theme-radius) 0 0;
|
||||
}
|
||||
|
||||
.theme-preset-background-01,
|
||||
@ -265,27 +281,48 @@
|
||||
background-color: rgb(var(--theme-color-20));
|
||||
}
|
||||
|
||||
.theme-shadow-box {
|
||||
background-color: rgb(var(--theme-color-02));
|
||||
border-radius: var(--theme-radius);
|
||||
padding: 0.5em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
.theme-accent-preset-grid {
|
||||
display: grid;
|
||||
grid-gap: var(--form-wrap-space);
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.theme-shadow-box-small {
|
||||
box-shadow: var(--theme-shadow-bottom-small);
|
||||
.theme-accent-preset-item {
|
||||
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%));
|
||||
padding: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
min-width: 1.5em;
|
||||
min-height: 1.5em;
|
||||
min-height: initial;
|
||||
}
|
||||
|
||||
.theme-shadow-box-medium {
|
||||
box-shadow: var(--theme-shadow-bottom-medium);
|
||||
.theme-accent-preset-item:focus,
|
||||
.theme-accent-preset-item:hover,
|
||||
.theme-accent-preset-item:active {
|
||||
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%));
|
||||
}
|
||||
|
||||
.theme-shadow-box-large {
|
||||
box-shadow: var(--theme-shadow-bottom-large);
|
||||
.theme-accent-preset-item:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.theme-accent-preset-item {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.theme-accent-preset-item {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
min-width: 2.5em;
|
||||
min-height: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
<h1 class="menu-item-header-text">Accent</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="theme-accent-preset"></div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-theme-accent-rgb-color">Colour</label>
|
||||
<div class="form-group form-group-block">
|
||||
|
||||
216
src/js/theme.js
216
src/js/theme.js
@ -265,6 +265,176 @@ var theme = (function() {
|
||||
l: Math.round(hsl.l)
|
||||
}
|
||||
});
|
||||
},
|
||||
preset: {
|
||||
all: [
|
||||
[{
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 90
|
||||
}, {
|
||||
h: 0,
|
||||
s: 80,
|
||||
l: 90
|
||||
}, {
|
||||
h: 60,
|
||||
s: 80,
|
||||
l: 90
|
||||
}, {
|
||||
h: 120,
|
||||
s: 80,
|
||||
l: 90
|
||||
}, {
|
||||
h: 180,
|
||||
s: 80,
|
||||
l: 90
|
||||
}, {
|
||||
h: 240,
|
||||
s: 80,
|
||||
l: 90
|
||||
}, {
|
||||
h: 300,
|
||||
s: 80,
|
||||
l: 90
|
||||
}],
|
||||
[{
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 70
|
||||
}, {
|
||||
h: 0,
|
||||
s: 80,
|
||||
l: 70
|
||||
}, {
|
||||
h: 60,
|
||||
s: 80,
|
||||
l: 70
|
||||
}, {
|
||||
h: 120,
|
||||
s: 80,
|
||||
l: 70
|
||||
}, {
|
||||
h: 180,
|
||||
s: 80,
|
||||
l: 70
|
||||
}, {
|
||||
h: 240,
|
||||
s: 80,
|
||||
l: 70
|
||||
}, {
|
||||
h: 300,
|
||||
s: 80,
|
||||
l: 70
|
||||
}],
|
||||
[{
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 50
|
||||
}, {
|
||||
h: 0,
|
||||
s: 80,
|
||||
l: 50
|
||||
}, {
|
||||
h: 60,
|
||||
s: 80,
|
||||
l: 50
|
||||
}, {
|
||||
h: 120,
|
||||
s: 80,
|
||||
l: 50
|
||||
}, {
|
||||
h: 180,
|
||||
s: 80,
|
||||
l: 50
|
||||
}, {
|
||||
h: 240,
|
||||
s: 80,
|
||||
l: 50
|
||||
}, {
|
||||
h: 300,
|
||||
s: 80,
|
||||
l: 50
|
||||
}],
|
||||
[{
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 30
|
||||
}, {
|
||||
h: 0,
|
||||
s: 60,
|
||||
l: 30
|
||||
}, {
|
||||
h: 60,
|
||||
s: 60,
|
||||
l: 30
|
||||
}, {
|
||||
h: 120,
|
||||
s: 60,
|
||||
l: 30
|
||||
}, {
|
||||
h: 180,
|
||||
s: 60,
|
||||
l: 30
|
||||
}, {
|
||||
h: 240,
|
||||
s: 60,
|
||||
l: 30
|
||||
}, {
|
||||
h: 300,
|
||||
s: 60,
|
||||
l: 30
|
||||
}],
|
||||
[{
|
||||
h: 0,
|
||||
s: 0,
|
||||
l: 10
|
||||
}, {
|
||||
h: 0,
|
||||
s: 20,
|
||||
l: 10
|
||||
}, {
|
||||
h: 60,
|
||||
s: 20,
|
||||
l: 10
|
||||
}, {
|
||||
h: 120,
|
||||
s: 20,
|
||||
l: 10
|
||||
}, {
|
||||
h: 180,
|
||||
s: 20,
|
||||
l: 10
|
||||
}, {
|
||||
h: 240,
|
||||
s: 20,
|
||||
l: 10
|
||||
}, {
|
||||
h: 300,
|
||||
s: 20,
|
||||
l: 10
|
||||
}]
|
||||
],
|
||||
set: function(hsl) {
|
||||
var rgb = helper.convertColor.hsl.rgb(hsl);
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.accent.hsl",
|
||||
newValue: {
|
||||
h: hsl.h,
|
||||
s: hsl.s,
|
||||
l: hsl.l
|
||||
}
|
||||
});
|
||||
helper.setObject({
|
||||
object: state.get.current(),
|
||||
path: "theme.accent.rgb",
|
||||
newValue: {
|
||||
r: Math.round(rgb.r),
|
||||
g: Math.round(rgb.g),
|
||||
b: Math.round(rgb.b)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1730,6 +1900,31 @@ var theme = (function() {
|
||||
html.style.setProperty("--theme-accent-r", rgb.r);
|
||||
html.style.setProperty("--theme-accent-g", rgb.g);
|
||||
html.style.setProperty("--theme-accent-b", rgb.b);
|
||||
},
|
||||
preset: function() {
|
||||
var themeAccentPreset = helper.e(".theme-accent-preset");
|
||||
var formWrap = helper.node("div|class:form-wrap");
|
||||
var themeAccentPresetGrid = helper.node("div|class:theme-accent-preset-grid");
|
||||
|
||||
mod.accent.preset.all.forEach(function(arrayItem, index) {
|
||||
arrayItem.forEach(function(arrayItem, index) {
|
||||
var themeAccentPresetItem = helper.node("button|class:theme-accent-preset-item button button-block button-ring,tabindex:-1");
|
||||
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", arrayItem.h);
|
||||
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", arrayItem.s);
|
||||
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", arrayItem.l);
|
||||
themeAccentPresetItem.addEventListener("click", function() {
|
||||
mod.accent.preset.set(arrayItem);
|
||||
data.save();
|
||||
render.accent.color();
|
||||
control.render.update.control.header();
|
||||
control.render.update.control.menu();
|
||||
});
|
||||
themeAccentPresetGrid.appendChild(themeAccentPresetItem);
|
||||
});
|
||||
});
|
||||
|
||||
formWrap.appendChild(themeAccentPresetGrid);
|
||||
themeAccentPreset.appendChild(formWrap);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1878,7 +2073,7 @@ var theme = (function() {
|
||||
allThemePreset.forEach(function(arrayItem, index) {
|
||||
var themePresetItem = helper.node("div|class:theme-preset-item");
|
||||
var themePresetTile = helper.node("div|class:theme-preset-tile");
|
||||
var themePresetButton = helper.node("button|class:theme-preset-button button,tabindex:-1");
|
||||
var themePresetButton = helper.node("button|class:theme-preset-button button button-block button-ring,tabindex:-1");
|
||||
var themePresetPreview = helper.node("span|class:theme-preset-preview");
|
||||
var shadeSteps = 4;
|
||||
var rgb = arrayItem.color.rgb;
|
||||
@ -1958,7 +2153,7 @@ var theme = (function() {
|
||||
allThemeCuston.forEach(function(arrayItem, index) {
|
||||
var themeCustomItem = helper.node("div|class:theme-custom-item");
|
||||
var themeCustomTile = helper.node("div|class:theme-custom-tile");
|
||||
var themeCustomButton = helper.node("button|class:theme-custom-button button,tabindex:-1");
|
||||
var themeCustomButton = helper.node("button|class:theme-custom-button button button-block button-ring,tabindex:-1");
|
||||
var themeCustomPreview = helper.node("span|class:theme-custom-preview");
|
||||
var themeCustomControl = helper.node("div|class:theme-custom-control");
|
||||
var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-2");
|
||||
@ -1970,19 +2165,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) {
|
||||
@ -2361,6 +2568,7 @@ var theme = (function() {
|
||||
render.font.ui.style();
|
||||
render.color.shade();
|
||||
render.accent.color();
|
||||
render.accent.preset();
|
||||
render.radius();
|
||||
render.shadow();
|
||||
render.shade.opacity();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.15.0";
|
||||
var current = "5.16.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.15.0",
|
||||
"version": "5.16.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user