forked from extern/easydiffusion
Merge pull request #557 from madrang/webmanifest
Added web manifest to allow installing the Url as a web app.
This commit is contained in:
commit
141ff74ece
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<title>Stable Diffusion UI</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#673AB6">
|
||||
<link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="stylesheet" href="/media/css/fonts.css">
|
||||
@ -13,6 +14,7 @@
|
||||
<link rel="stylesheet" href="/media/css/fontawesome-all.min.css">
|
||||
<link rel="stylesheet" href="/media/css/drawingboard.min.css">
|
||||
<link rel="stylesheet" href="/media/css//jquery-confirm.min.css">
|
||||
<link rel="manifest" href="/media/manifest.webmanifest">
|
||||
<script src="/media/js/jquery-3.6.1.min.js"></script>
|
||||
<script src="/media/js/jquery-confirm.min.js"></script>
|
||||
<script src="/media/js/drawingboard.min.js"></script>
|
||||
|
@ -30,6 +30,9 @@
|
||||
--primary-button-border: none;
|
||||
--input-switch-padding: 1px;
|
||||
--input-height: 18px;
|
||||
|
||||
/* Main theme color, hex color fallback. */
|
||||
--theme-color-fallback: #673AB6;
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
@ -44,6 +47,8 @@
|
||||
--input-text-color: black;
|
||||
--input-background-color: #f8f9fa;
|
||||
--input-border-color: grey;
|
||||
|
||||
--theme-color-fallback: #aaaaaa;
|
||||
}
|
||||
|
||||
.theme-discord {
|
||||
@ -58,6 +63,8 @@
|
||||
--input-border-size: 2px;
|
||||
--input-background-color: #202225;
|
||||
--input-border-color: var(--input-background-color);
|
||||
|
||||
--theme-color-fallback: #202225;
|
||||
}
|
||||
|
||||
.theme-cool-blue {
|
||||
@ -71,8 +78,10 @@
|
||||
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
|
||||
|
||||
--input-background-color: var(--background-color3);
|
||||
|
||||
|
||||
--accent-hue: 212;
|
||||
|
||||
--theme-color-fallback: #0056b8;
|
||||
}
|
||||
|
||||
|
||||
@ -87,6 +96,8 @@
|
||||
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
|
||||
|
||||
--input-background-color: var(--background-color3);
|
||||
|
||||
--theme-color-fallback: #5300b8;
|
||||
}
|
||||
|
||||
.theme-super-dark {
|
||||
@ -101,6 +112,8 @@
|
||||
|
||||
--input-background-color: var(--background-color3);
|
||||
--input-border-size: 0px;
|
||||
|
||||
--theme-color-fallback: #000000;
|
||||
}
|
||||
|
||||
.theme-wild {
|
||||
@ -117,8 +130,8 @@
|
||||
|
||||
--input-border-size: 1px;
|
||||
--input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
|
||||
--input-text-color: red;
|
||||
--input-border-color: green;
|
||||
--input-text-color: #FF0000;
|
||||
--input-border-color: #005E05;
|
||||
}
|
||||
|
||||
.theme-gnomie {
|
||||
@ -136,6 +149,8 @@
|
||||
--input-background-color: #2a2a2a;
|
||||
--input-border-size: 0px;
|
||||
--input-border-color: var(--input-background-color);
|
||||
|
||||
--theme-color-fallback: #2168bf;
|
||||
}
|
||||
|
||||
.theme-gnomie .panel-box {
|
||||
|
@ -60,6 +60,7 @@ function themeFieldChanged() {
|
||||
|
||||
body.style = "";
|
||||
var theme = THEMES.find(t => t.key == theme_key);
|
||||
let borderColor = undefined
|
||||
if (theme) {
|
||||
// refresh variables incase they are back referencing
|
||||
Array.from(DEFAULT_THEME.rule.style)
|
||||
@ -67,7 +68,14 @@ function themeFieldChanged() {
|
||||
.forEach(cssVariable => {
|
||||
body.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable));
|
||||
});
|
||||
borderColor = theme.rule.style.getPropertyValue('--input-border-color').trim()
|
||||
if (!borderColor.startsWith('#')) {
|
||||
borderColor = theme.rule.style.getPropertyValue('--theme-color-fallback')
|
||||
}
|
||||
} else {
|
||||
borderColor = DEFAULT_THEME.rule.style.getPropertyValue('--theme-color-fallback')
|
||||
}
|
||||
document.querySelector('meta[name="theme-color"]').setAttribute("content", borderColor)
|
||||
}
|
||||
|
||||
themeField.addEventListener('change', themeFieldChanged);
|
||||
|
8
ui/media/manifest.webmanifest
Normal file
8
ui/media/manifest.webmanifest
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "Stable Diffusion UI",
|
||||
"display": "standalone",
|
||||
"display_override": [
|
||||
"window-controls-overlay"
|
||||
],
|
||||
"theme_color": "#000000"
|
||||
}
|
Loading…
Reference in New Issue
Block a user