holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated themes to work nicely with the new stuff

Browse Source
This commit is contained in:
Malcolm Diller 2022-11-17 20:15:39 -08:00
parent bfc21220a7
commit 2db0023653
2 changed files with 17 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/media/css/auto-save.css
View File

@ -36,6 +36,7 @@
.parameters-table > div { .parameters-table > div {
background: var(--background-color2); background: var(--background-color2);
display: flex; display: flex;
padding: 0px 4px;
} }
.parameters-table > div > div { .parameters-table > div > div {

75
ui/media/css/themes.css
View File

@ -1,22 +1,26 @@
:root { :root {
--background-color1: rgb(32, 33, 36); /* main parts of the page */ --main-hue: 222;
--background-color2: rgb(44, 45, 48); /* main panels */ --main-saturation: 4%;
--background-color3: rgb(47, 49, 53); --value-base: 13%;
--background-color4: rgb(18, 18, 19); /* settings dropdowns */ --value-step: 5%;
--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.5 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1.5 * var(--value-step))));
--accent-hue: 266; --accent-hue: 263;
--accent-lightness: 36%; --accent-lightness: 36%;
--accent-lightness-hover: 40%; --accent-lightness-hover: 40%;
--text-color: #eee; --text-color: #eee;
--input-text-color: black; --input-text-color: #ccc;
--input-background-color: #e9e9ed; --input-background-color: var(--background-color3);
--input-border-color: #8f8f9d; --input-border-color: var(--background-color4);
--button-text-color: var(--input-text-color); --button-text-color: var(--input-text-color);
--button-color: #e9e9ed; --button-color: var(--accent-color);
--button-border: 1px solid #8f8f9d; --button-border: none;
/* other */ /* other */
--input-border-radius: 4px; --input-border-radius: 4px;
@ -28,16 +32,6 @@
--input-height: 24px; --input-height: 24px;
} }
.theme-default-modified {
--button-text-color: black;
--input-switch-padding: 2px;
--input-text-color: #ccc;
--input-border-size: 0px;
--input-background-color: #16191c;
--input-border-color: var(--input-background-color);
}
.theme-light { .theme-light {
--background-color1: white; --background-color1: white;
--background-color2: #ececec; --background-color2: #ececec;
@ -45,6 +39,7 @@
--background-color4: #cccccc; --background-color4: #cccccc;
--text-color: black; --text-color: black;
--button-text-color: white;
--input-text-color: black; --input-text-color: black;
--input-background-color: #f8f9fa; --input-background-color: #f8f9fa;
@ -59,12 +54,7 @@
--accent-hue: 235; --accent-hue: 235;
--accent-lightness: 65%; --accent-lightness: 65%;
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-text-color: #ccc;
--input-border-size: 2px; --input-border-size: 2px;
--input-background-color: #202225; --input-background-color: #202225;
--input-border-color: var(--input-background-color); --input-border-color: var(--input-background-color);
@ -81,15 +71,6 @@
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step)))); --background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--accent-hue: 212; --accent-hue: 212;
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 1px;
--input-background-color: var(--background-color3);
--input-text-color: #ccc;
--input-border-color: var(--background-color4);
} }
@ -102,16 +83,6 @@
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step)))); --background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step)))); --background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step)))); --background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 1px;
--input-background-color: var(--background-color3);
--input-text-color: #ccc;
--input-border-color: var(--background-color4);
} }
.theme-super-dark { .theme-super-dark {
@ -124,15 +95,7 @@
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step)))); --background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step)))); --background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step))));
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 0px; --input-border-size: 0px;
--input-background-color: var(--background-color3);
--input-text-color: #ccc;
--input-border-color: var(--background-color4);
} }
.theme-wild { .theme-wild {
@ -146,10 +109,6 @@
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step)))); --background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--accent-hue: 212; --accent-hue: 212;
--primary-button-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 1px; --input-border-size: 1px;
--input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step)))); --input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
@ -166,10 +125,6 @@
--accent-hue: 213; --accent-hue: 213;
--accent-lightness: 76.8%; --accent-lightness: 76.8%;
--accent-color: #3584e4; --accent-color: #3584e4;
--make-image-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-radius: 6px; --input-border-radius: 6px;
--input-text-color: #ffffff; --input-text-color: #ffffff;