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

move (some) hardcoded colors to variables

Browse Source
This commit is contained in:
JeLuF 2023-06-27 00:31:48 +02:00
parent 3a7281df3c
commit 2e4807312a
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/media/css/main.css
View File

@ -14,10 +14,10 @@ body {
color: var(--text-color); color: var(--text-color);
} }
a { a {
color: rgb(0, 102, 204); color: var(--link-color);
} }
a:visited { a:visited {
color: rgb(0, 102, 204); color: var(--link-color);
} }
label { label {
font-size: 10pt; font-size: 10pt;
@ -144,7 +144,7 @@ code {
opacity: 0; opacity: 0;
} }
.imgPreviewItemClearBtn:hover { .imgPreviewItemClearBtn:hover {
background: rgb(177, 27, 0); background: var(--button-hover-background);
} }
.imgContainer:hover > .imgItemInfo { .imgContainer:hover > .imgItemInfo {
opacity: 1; opacity: 1;
@ -192,7 +192,7 @@ code {
width: 100%; width: 100%;
} }
.settings-box label small { .settings-box label small {
color: rgb(153, 153, 153); color: var(--small-label-color);
margin-right: 10px; margin-right: 10px;
} }
#preview { #preview {
@ -220,11 +220,11 @@ code {
height: 30pt; height: 30pt;
} }
#makeImage:hover { #makeImage:hover {
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
} }
#stopImage { #stopImage {
flex: 0 0 70px; flex: 0 0 70px;
background: rgb(132, 8, 0); background: var(--secondary-button-background);
border: 2px solid rgb(122, 29, 0); border: 2px solid rgb(122, 29, 0);
color: rgb(255, 221, 255); color: rgb(255, 221, 255);
height: 30pt; height: 30pt;
@ -232,7 +232,7 @@ code {
flex-grow: 2; flex-grow: 2;
} }
#stopImage:hover { #stopImage:hover {
background: rgb(177, 27, 0); background: var(--secondary-button-hover-background);
} }
#undo { #undo {
float: right; float: right;
@ -496,11 +496,11 @@ div.img-preview img {
} }
#server-status-color { #server-status-color {
font-size: 14pt; font-size: 14pt;
color: rgb(200, 139, 0); color: var(--status-orange);
display: inline; display: inline;
} }
#server-status-msg { #server-status-msg {
color: rgb(200, 139, 0); color: var(--status-orange);
padding-left: 2pt; padding-left: 2pt;
font-size: 10pt; font-size: 10pt;
} }
@ -707,14 +707,14 @@ div.img-preview img {
padding: 3pt 6pt; padding: 3pt 6pt;
} }
.secondaryButton { .secondaryButton {
background: rgb(132, 8, 0); background: var(--secondary-button-background);
border: 1px solid rgb(122, 29, 0); border: 1px solid rgb(122, 29, 0);
color: rgb(255, 221, 255); color: rgb(255, 221, 255);
padding: 3pt 6pt; padding: 3pt 6pt;
border-radius: 5px; border-radius: 5px;
} }
.secondaryButton:hover { .secondaryButton:hover {
background: rgb(177, 27, 0); background: var(--secondary-button-hover-background);
} }
.tertiaryButton { .tertiaryButton {
background: var(--tertiary-background-color); background: var(--tertiary-background-color);
@ -724,12 +724,12 @@ div.img-preview img {
border-radius: 5px; border-radius: 5px;
} }
.tertiaryButton:hover { .tertiaryButton:hover {
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
color: var(--accent-text-color); color: var(--accent-text-color);
} }
.tertiaryButton.pressed { .tertiaryButton.pressed {
border-style: inset; border-style: inset;
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
color: var(--accent-text-color); color: var(--accent-text-color);
} }
.useSettings { .useSettings {
@ -949,7 +949,7 @@ input::file-selector-button,
button:hover, button:hover,
.button:hover { .button:hover {
transition-duration: 0.1s; transition-duration: 0.1s;
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
} }
input::file-selector-button { input::file-selector-button {
@ -1266,7 +1266,7 @@ input::file-selector-button {
.popup { .popup {
position: absolute; position: absolute;
background: rgba(32, 33, 36, 50%); background: var(--backdrop-color);
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;

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

@ -13,6 +13,8 @@
--accent-lightness-hover: 40%; --accent-lightness-hover: 40%;
--text-color: #eee; --text-color: #eee;
--link-color: rgb(0, 102, 204);
--small-label-color: rgb(153, 153, 153);
--input-text-color: #eee; --input-text-color: #eee;
--input-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.7 * var(--value-step)))); --input-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.7 * var(--value-step))));
@ -21,6 +23,9 @@
--button-text-color: var(--input-text-color); --button-text-color: var(--input-text-color);
--button-color: var(--input-background-color); --button-color: var(--input-background-color);
--button-border: none; --button-border: none;
--button-hover-background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
--secondary-button-background: rgb(132, 8, 0);
--secondary-button-hover-background: rgb(177, 27, 0);
/* other */ /* other */
--input-border-radius: 4px; --input-border-radius: 4px;
@ -40,6 +45,7 @@
--status-orange: rgb(200, 139, 0); --status-orange: rgb(200, 139, 0);
--status-green: green; --status-green: green;
--status-red: red; --status-red: red;
--backdrop-color: rgba(32, 33, 36, 50%);
} }
.theme-light { .theme-light {