Public/stable-diffusion-webui-ux
1
0
Fork 0
mirror of https://github.com/anapnoe/stable-diffusion-webui-ux.git synced 2026-09-20 01:31:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix default theme group color

Browse Source
This commit is contained in:
anapnoe
2023-10-31 16:58:49 +02:00
parent 8bd7b929a7
commit 2fadc2a6ea
3 changed files with 132 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extensions-builtin/anapnoe-sd-theme-editor/javascript/ui_theme.js
+130 -113
View File
@@ -1,24 +1,26 @@
"use strict";
function hexToRgb(color) {
var hex = color[0] === "#" ? color.slice(1) : color;
var c; // expand the short hex by doubling each character, fc0 -> ffcc00
if (hex.length !== 6) {
hex = function () {
hex = (function() {
var result = [];
for (var _i = 0, _Array$from = Array.from(hex); _i < _Array$from.length; _i++) {
for (
var _i = 0, _Array$from = Array.from(hex);
_i < _Array$from.length;
_i++
) {
c = _Array$from[_i];
result.push("".concat(c).concat(c));
}
return result;
}().join("");
})().join("");
}
var colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1);
var rgb = colorStr.map(function (col) {
var rgb = colorStr.map(function(col) {
return parseInt(col, 16);
});
rgb.push(1);
@@ -33,9 +35,15 @@ function rgbToHsl(rgb) {
var min = Math.min(r, g, b);
var diff = max - min;
var add = max + min;
var hue = min === max ? 0 : r === max ? (60 * (g - b) / diff + 360) % 360 : g === max ? 60 * (b - r) / diff + 120 : 60 * (r - g) / diff + 240;
var hue =
min === max
? 0
: r === max
? (60 * (g - b) / diff + 360) % 360
: g === max ? 60 * (b - r) / diff + 120 : 60 * (r - g) / diff + 240;
var lum = 0.5 * add;
var sat = lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add);
var sat =
lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add);
var h = Math.round(hue);
var s = Math.round(sat * 100);
var l = Math.round(lum * 100);
@@ -56,7 +64,9 @@ function hslToHex(h, s, l) {
var f = function f(n) {
var k = (n + h / 30) % 12;
var color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * Math.max(0, Math.min(color, 1))).toString(16).padStart(2, "0"); // convert to Hex and prefix "0" if needed
return Math.round(255 * Math.max(0, Math.min(color, 1)))
.toString(16)
.padStart(2, "0"); // convert to Hex and prefix "0" if needed
};
return "#".concat(f(0)).concat(f(8)).concat(f(4));
@@ -66,7 +76,10 @@ function hsl2rgb(h, s, l) {
var a = s * Math.min(l, 1 - l);
var f = function f(n) {
var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
var k =
arguments.length > 1 && arguments[1] !== undefined
? arguments[1]
: (n + h / 30) % 12;
return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
};
@@ -78,7 +91,6 @@ function invertColor(hex) {
hex = hex.slice(1);
} // convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
@@ -87,10 +99,9 @@ function invertColor(hex) {
throw new Error("Invalid HEX color.");
} // invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16); // pad each with zeros and return
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16); // pad each with zeros and return
return "#" + padZero(r) + padZero(g) + padZero(b);
}
@@ -152,7 +163,11 @@ function offsetColorsHSV(ohsl) {
var h = (parseInt(hsl[0]) + parseInt(ohsl[0])) % 360;
var s = parseInt(hsl[1]) + parseInt(ohsl[1]);
var l = parseInt(hsl[2]) + parseInt(ohsl[2]);
var hex = hslToHex(h, Math.min(Math.max(s, 0), 100), Math.min(Math.max(l, 0), 100));
var hex = hslToHex(
h,
Math.min(Math.max(s, 0), 100),
Math.min(Math.max(l, 0), 100)
);
colcomp.value = hex;
hslobj[key] = "hsl(" + h + "deg " + s + "% " + l + "%)";
inner_styles += key + ":" + hslobj[key] + ";";
@@ -165,15 +180,11 @@ function offsetColorsHSV(ohsl) {
isColorsInv = false;
var preview_styles = document.body.querySelector("#preview-styles");
preview_styles.innerHTML = ":root {" + inner_styles + "}";
preview_styles.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
preview_styles.innerHTML +=
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
var vars_textarea = document.body.querySelector("#theme_vars textarea");
vars_textarea.value = inner_styles;
window.updateInput(vars_textarea);
/*
const inputEvent = new Event("input");
Object.defineProperty(inputEvent, "target", { value: vars_textarea });
vars_textarea.dispatchEvent(inputEvent);
*/
}
function updateTheme(vars) {
@@ -185,7 +196,7 @@ function updateTheme(vars) {
var val = key[1].trim();
styleobj[id] = val;
inner_styles += id + ":" + val + ";";
document.body.querySelectorAll("#" + id + " input").forEach(function (elem) {
document.body.querySelectorAll("#" + id + " input").forEach(function(elem) {
if (val.indexOf("hsl") != -1) {
var hsl = toHSLArray(val);
var hex = hslToHex(hsl[0], hsl[1], hsl[2]);
@@ -204,13 +215,15 @@ function updateTheme(vars) {
if (preview_styles) {
preview_styles.innerHTML = ":root {" + inner_styles + "}";
preview_styles.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
preview_styles.innerHTML +=
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
} else {
var r = document.body;
var style = document.createElement("style");
style.id = "preview-styles";
style.innerHTML = ":root {" + inner_styles + "}";
style.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
style.innerHTML +=
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
r.appendChild(style);
}
@@ -219,15 +232,6 @@ function updateTheme(vars) {
vars_textarea.value = inner_styles;
css_textarea.value = css_textarea.value; //console.log(Object);
/*
const vEvent = new Event("input");
const cEvent = new Event("input");
Object.defineProperty(vEvent, "target", { value: vars_textarea });
Object.defineProperty(cEvent, "target", { value: css_textarea });
vars_textarea.dispatchEvent(vEvent);
css_textarea.dispatchEvent(cEvent);
*/
window.updateInput(vars_textarea);
window.updateInput(css_textarea);
}
@@ -247,7 +251,10 @@ function initTheme(styles) {
var css_textarea = document.body.querySelector("#theme_css textarea");
vars_textarea.value = init_css_vars;
var additional_styles = css_styles[1] !== undefined ? css_styles[1] : "";
css_textarea.value = "/*BREAKPOINT_CSS_CONTENT*/" + additional_styles + "/*BREAKPOINT_CSS_CONTENT*/";
css_textarea.value =
"/*BREAKPOINT_CSS_CONTENT*/" +
additional_styles +
"/*BREAKPOINT_CSS_CONTENT*/";
updateTheme(vars);
var preview_styles = document.body.querySelector("#preview-styles");
@@ -259,65 +266,65 @@ function initTheme(styles) {
}
var intervalChange;
document.body.querySelectorAll("#ui_theme_settings input").forEach(function (elem) {
elem.addEventListener("input", function (e) {
var celem = e.currentTarget;
var val = e.currentTarget.value;
var curr_val;
document.body
.querySelectorAll("#ui_theme_settings input")
.forEach(function(elem) {
elem.addEventListener("input", function(e) {
var celem = e.currentTarget;
var val = e.currentTarget.value;
var curr_val;
switch (e.currentTarget.type) {
case "range":
celem = celem.parentElement;
val = e.currentTarget.value + "px";
break;
switch (e.currentTarget.type) {
case "range":
celem = celem.parentElement;
val = e.currentTarget.value + "px";
break;
case "color":
celem = celem.parentElement.parentElement;
val = e.currentTarget.value;
break;
case "color":
celem = celem.parentElement.parentElement;
val = e.currentTarget.value;
break;
case "number":
celem = celem.parentElement.parentElement.parentElement;
val = e.currentTarget.value + "px";
break;
}
if (celem.id === "--ae-input-slider-height") {
val = e.currentTarget.value;
}
styleobj[celem.id] = val; //console.log(styleobj);
if (intervalChange != null) clearInterval(intervalChange);
intervalChange = setTimeout(function () {
var inner_styles = "";
for (var key in styleobj) {
inner_styles += key + ":" + styleobj[key] + ";";
case "number":
celem = celem.parentElement.parentElement.parentElement;
val = e.currentTarget.value + "px";
break;
}
vars = inner_styles.split(";");
preview_styles.innerHTML = ":root {" + inner_styles + "}";
preview_styles.innerHTML += "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
vars_textarea.value = inner_styles;
window.updateInput(vars_textarea);
/*
const vEvent = new Event("input");
Object.defineProperty(vEvent, "target", { value: vars_textarea });
vars_textarea.dispatchEvent(vEvent);
*/
if (celem.id === "--ae-input-slider-height") {
val = e.currentTarget.value;
}
offsetColorsHSV(hsloffset);
}, 1000);
styleobj[celem.id] = val; //console.log(styleobj);
if (intervalChange != null) clearInterval(intervalChange);
intervalChange = setTimeout(function() {
var inner_styles = "";
for (var key in styleobj) {
inner_styles += key + ":" + styleobj[key] + ";";
}
vars = inner_styles.split(";");
preview_styles.innerHTML = ":root {" + inner_styles + "}";
preview_styles.innerHTML +=
"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
vars_textarea.value = inner_styles;
window.updateInput(vars_textarea);
offsetColorsHSV(hsloffset);
}, 1000);
});
});
});
var reset_btn = document.getElementById("theme_reset_btn");
reset_btn.addEventListener("click", function (e) {
reset_btn.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
document.body.querySelectorAll("#ui_theme_hsv input").forEach(function (elem) {
elem.value = 0;
});
document.body
.querySelectorAll("#ui_theme_hsv input")
.forEach(function(elem) {
elem.value = 0;
});
hsloffset = [0, 0, 0];
updateTheme(init_vars);
});
@@ -335,38 +342,44 @@ function initTheme(styles) {
}
var drop_down = document.body.querySelector("#themes_drop_down input");
drop_down.addEventListener("click", function (e) {
drop_down.addEventListener("click", function(e) {
if (intervalCheck !== null) clearInterval(intervalCheck);
vars_textarea.value = init_css_vars;
intervalCheck = setInterval(dropDownOnChange, 500);
});
var hsloffset = [0, 0, 0];
var hue = document.body.querySelectorAll("#theme_hue input").forEach(function (elem) {
elem.addEventListener("change", function (e) {
e.preventDefault();
e.stopPropagation();
hsloffset[0] = e.currentTarget.value;
offsetColorsHSV(hsloffset);
var hue = document.body
.querySelectorAll("#theme_hue input")
.forEach(function(elem) {
elem.addEventListener("change", function(e) {
e.preventDefault();
e.stopPropagation();
hsloffset[0] = e.currentTarget.value;
offsetColorsHSV(hsloffset);
});
});
});
var sat = document.body.querySelectorAll("#theme_sat input").forEach(function (elem) {
elem.addEventListener("change", function (e) {
e.preventDefault();
e.stopPropagation();
hsloffset[1] = e.currentTarget.value;
offsetColorsHSV(hsloffset);
var sat = document.body
.querySelectorAll("#theme_sat input")
.forEach(function(elem) {
elem.addEventListener("change", function(e) {
e.preventDefault();
e.stopPropagation();
hsloffset[1] = e.currentTarget.value;
offsetColorsHSV(hsloffset);
});
});
});
var brt = document.body.querySelectorAll("#theme_brt input").forEach(function (elem) {
elem.addEventListener("change", function (e) {
e.preventDefault();
e.stopPropagation();
hsloffset[2] = e.currentTarget.value;
offsetColorsHSV(hsloffset);
var brt = document.body
.querySelectorAll("#theme_brt input")
.forEach(function(elem) {
elem.addEventListener("change", function(e) {
e.preventDefault();
e.stopPropagation();
hsloffset[2] = e.currentTarget.value;
offsetColorsHSV(hsloffset);
});
});
});
var inv_btn = document.getElementById("theme_invert_btn");
inv_btn.addEventListener("click", function (e) {
inv_btn.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
isColorsInv = !isColorsInv;
@@ -375,15 +388,19 @@ function initTheme(styles) {
}
function observeGradioApp() {
var observer = new MutationObserver(function () {
var css = document.querySelector("[rel=\"stylesheet\"][href*=\"user\"]");
var observer = new MutationObserver(function() {
var css = document.querySelector('[rel="stylesheet"][href*="user"]');
var block = gradioApp().getElementById("tab_ui_theme");
if (css && block) {
observer.disconnect();
setTimeout(function () {
var rootRules = Array.from(css.sheet.cssRules).filter(function (cssRule) {
return cssRule instanceof CSSStyleRule && cssRule.selectorText === ":root";
setTimeout(function() {
var rootRules = Array.from(css.sheet.cssRules).filter(function(
cssRule
) {
return (
cssRule instanceof CSSStyleRule && cssRule.selectorText === ":root"
);
});
var rootCssText = rootRules[0].cssText; //console.log("Loading theme vars", rootCssText);
@@ -397,6 +414,6 @@ function observeGradioApp() {
});
}
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function() {
observeGradioApp();
});
});
extensions-builtin/anapnoe-sd-uiux/style.css
+2 -2
View File
@@ -39,11 +39,11 @@
--ae-border-size-neg: calc(var(--ae-border-size) * -1);
--ae-border-size-x2: calc((var(--ae-border-size) * 2) + 0px);
--ae-group-bg-color: #0c171e;
--ae-group-bg-color: rgba(0, 0, 0, 0.25);
--ae-group-padding: 2px;
--ae-group-radius: 7px;
--ae-group-border-size: 2px;
--ae-group-border-color: #0c171e;
--ae-group-border-color: rgba(0, 0, 0, 0.25);
--ae-group-gap: 6px;
}
screenshot.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB