mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-07 22:49:28 +01:00
[refactor] improve theme accent hue cycle
This commit is contained in:
Kombie
GitHub
parent
b47f134736
commit
22bb553182
@ -1,3 +1,88 @@
|
||||
@keyframes rainbow-variables {
|
||||
0%, 100% {
|
||||
--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);
|
||||
--theme-accent-accessible-threshold: 0.5;
|
||||
--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);
|
||||
--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);
|
||||
--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);
|
||||
--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));
|
||||
--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);
|
||||
--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);
|
||||
}
|
||||
|
||||
0% {
|
||||
--theme-accent-r: 255;
|
||||
--theme-accent-g: 0;
|
||||
--theme-accent-b: 0;
|
||||
}
|
||||
|
||||
16.666666666666668% {
|
||||
--theme-accent-r: 255;
|
||||
--theme-accent-g: 255;
|
||||
--theme-accent-b: 0;
|
||||
}
|
||||
|
||||
33.333333333333336% {
|
||||
--theme-accent-r: 0;
|
||||
--theme-accent-g: 255;
|
||||
--theme-accent-b: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
--theme-accent-r: 0;
|
||||
--theme-accent-g: 255;
|
||||
--theme-accent-b: 255;
|
||||
}
|
||||
|
||||
66.66666666666667% {
|
||||
--theme-accent-r: 0;
|
||||
--theme-accent-g: 0;
|
||||
--theme-accent-b: 255;
|
||||
}
|
||||
|
||||
83.33333333333334% {
|
||||
--theme-accent-r: 255;
|
||||
--theme-accent-g: 0;
|
||||
--theme-accent-b: 255;
|
||||
}
|
||||
|
||||
100% {
|
||||
--theme-accent-r: 255;
|
||||
--theme-accent-g: 0;
|
||||
--theme-accent-b: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: hsl(0, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
|
||||
}
|
||||
|
||||
16.666666666666668% {
|
||||
background-color: hsl(60, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
|
||||
}
|
||||
|
||||
33.333333333333336% {
|
||||
background-color: hsl(120, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: hsl(180, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
|
||||
}
|
||||
|
||||
66.66666666666667% {
|
||||
background-color: hsl(240, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
|
||||
}
|
||||
|
||||
83.33333333333334% {
|
||||
background-color: hsl(300, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: hsl(360, calc(var(--theme-accent-s) * 1%), calc(var(--theme-accent-l) * 1%));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
@ -639,10 +639,6 @@
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-theme-accent-cycle .link-display-letter {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.link-display-icon {
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
@ -650,6 +646,7 @@
|
||||
transition: color var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-theme-accent-cycle .link-display-letter,
|
||||
.is-theme-accent-cycle .link-display-icon {
|
||||
transition: none;
|
||||
}
|
||||
@ -842,31 +839,31 @@
|
||||
}
|
||||
|
||||
.link-control-item {
|
||||
color: rgb(var(--theme-accent-text));
|
||||
color: hsl(var(--theme-accent-accessible-color));
|
||||
}
|
||||
|
||||
.link-control-item:focus,
|
||||
.link-control-item:hover {
|
||||
color: rgb(var(--theme-accent-text));
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: hsl(var(--theme-accent-accessible-color));
|
||||
background-color: hsla(var(--theme-accent-accessible-color), 0.2);
|
||||
}
|
||||
|
||||
.link-control-item.disabled:focus,
|
||||
.link-control-item.disabled:hover,
|
||||
.link-control-item:disabled:focus,
|
||||
.link-control-item:disabled:hover {
|
||||
color: rgba(var(--theme-accent-text), 0.25);
|
||||
color: hsla(var(--theme-accent-accessible-color), 0.25);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.link-control-item:active {
|
||||
color: rgb(var(--theme-accent-text));
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: hsl(var(--theme-accent-accessible-color));
|
||||
background-color: hsla(var(--theme-accent-accessible-color), 0.1);
|
||||
}
|
||||
|
||||
.link-control-item.disabled,
|
||||
.link-control-item:disabled {
|
||||
color: rgb(var(--theme-accent-text), 0.25);
|
||||
color: hsla(var(--theme-accent-accessible-color), 0.25);
|
||||
}
|
||||
|
||||
.is-link-orientation-top.is-link-style-list .link-control-item:nth-child(1) {
|
||||
@ -961,10 +958,7 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.link-url-text {
|
||||
color: rgb(var(--theme-accent-text));
|
||||
color: hsl(var(--theme-accent-accessible-color));
|
||||
}
|
||||
|
||||
.is-edit.is-link-item-url-show .link-item:focus .link-panel-front,
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
:root {
|
||||
/* theme */
|
||||
--theme-root-font-size: 14px;
|
||||
--theme-accent: 250, 130, 0;
|
||||
--theme-accent-text: var(--theme-black);
|
||||
--theme-accent-r: 250;
|
||||
--theme-accent-g: 130;
|
||||
--theme-accent-b: 0;
|
||||
--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);
|
||||
--theme-accent-accessible-threshold: 0.5;
|
||||
--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);
|
||||
--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);
|
||||
--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);
|
||||
--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));
|
||||
--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);
|
||||
--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);
|
||||
--theme-radius: 0.2rem;
|
||||
--theme-font-display-name: "Fjalla One", sans-serif;
|
||||
--theme-font-display-weight: 400;
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-accent-cycle-helper form-helper-item">A small delay and small step in Accent hue change may cause performance issues.</p>
|
||||
<p class="control-theme-accent-cycle-helper form-helper-item">Take casre as a small delay in Accent hue change may cause performance issues.</p>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-theme-accent-cycle-helper form-helper-item">Auto change Accent hue will not work when the Accent colour is a grey or black.</p>
|
||||
|
||||
@ -5599,8 +5599,8 @@ var control = (function() {
|
||||
type: "button",
|
||||
func: function() {
|
||||
mod.default("theme.accent.cycle.step");
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
theme.bind.accent.cycle.remove();
|
||||
theme.bind.accent.cycle.add();
|
||||
render.update.control.header();
|
||||
render.update.control.menu();
|
||||
}
|
||||
|
||||
@ -722,13 +722,18 @@ var link = (function() {
|
||||
if (stagedLink.link.accent.override) {
|
||||
linkItemOptions.attr.push({
|
||||
key: "style",
|
||||
value: "--theme-accent: " + stagedLink.link.accent.color.r + ", " + stagedLink.link.accent.color.g + ", " + stagedLink.link.accent.color.b + ";"
|
||||
value: "--theme-accent-r: " + stagedLink.link.accent.color.r + ";" +
|
||||
"--theme-accent-g: " + stagedLink.link.accent.color.g + ";" +
|
||||
"--theme-accent-b: " + stagedLink.link.accent.color.b + ";" +
|
||||
"--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);" +
|
||||
"--theme-accent-accessible-threshold: 0.5;" +
|
||||
"--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);" +
|
||||
"--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);" +
|
||||
"--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);" +
|
||||
"--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));" +
|
||||
"--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);" +
|
||||
"--theme-accent-accessible-color: 0, 0%, calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);"
|
||||
});
|
||||
if (invert(stagedLink.link.accent.color, true) == "#000000") {
|
||||
linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + " --theme-accent-text: var(--theme-black);"
|
||||
} else if (invert(stagedLink.link.accent.color, true) == "#ffffff") {
|
||||
linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + " --theme-accent-text: var(--theme-white);"
|
||||
};
|
||||
};
|
||||
var linkItem = helper.makeNode(linkItemOptions);
|
||||
var linkPanelFrontOptions = {
|
||||
|
||||
@ -266,7 +266,7 @@ var state = (function() {
|
||||
},
|
||||
cycle: {
|
||||
active: false,
|
||||
speed: 150,
|
||||
speed: 300,
|
||||
step: 10
|
||||
}
|
||||
},
|
||||
@ -436,7 +436,7 @@ var state = (function() {
|
||||
b: 255
|
||||
},
|
||||
cycle: {
|
||||
speed: 150,
|
||||
speed: 300,
|
||||
step: 10
|
||||
}
|
||||
},
|
||||
|
||||
@ -47,7 +47,7 @@ var theme = (function() {
|
||||
},
|
||||
add: function() {
|
||||
_timerAccentCycle = setInterval(function() {
|
||||
theme.accent.cycle();
|
||||
accent.cycle();
|
||||
control.render.update.control.header(control.mod.header[5]);
|
||||
control.render.update.control.menu(control.mod.menu.controls.theme.accent[0]);
|
||||
control.render.update.control.menu(control.mod.menu.controls.theme.accent[1]);
|
||||
@ -1452,14 +1452,10 @@ var theme = (function() {
|
||||
render.accent = {
|
||||
color: function() {
|
||||
var html = helper.e("html");
|
||||
var color = state.get.current().theme.accent.rgb;
|
||||
html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
|
||||
html.style.removeProperty("--theme-accent-text");
|
||||
if (invert(state.get.current().theme.accent.rgb, true) == "#000000") {
|
||||
html.style.setProperty("--theme-accent-text", "var(--theme-black)");
|
||||
} else if (invert(state.get.current().theme.accent.rgb, true) == "#ffffff") {
|
||||
html.style.setProperty("--theme-accent-text", "var(--theme-white)");
|
||||
};
|
||||
var rgb = state.get.current().theme.accent.rgb;
|
||||
html.style.setProperty("--theme-accent-r", rgb.r);
|
||||
html.style.setProperty("--theme-accent-g", rgb.g);
|
||||
html.style.setProperty("--theme-accent-b", rgb.b);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user