extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-22 16:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1369 from JeLuF/css

Browse Source 
move (some) hardcoded colors to variables
This commit is contained in:
cmdr2 2023-06-27 16:05:32 +05:30 committed by GitHub
commit 845e6d1528
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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);
}
a {
color: rgb(0, 102, 204);
color: var(--link-color);
}
a:visited {
color: rgb(0, 102, 204);
color: var(--link-color);
}
label {
font-size: 10pt;
@ -144,7 +144,7 @@ code {
opacity: 0;
}
.imgPreviewItemClearBtn:hover {
background: rgb(177, 27, 0);
background: var(--button-hover-background);
}
.imgContainer:hover > .imgItemInfo {
opacity: 1;
@ -192,7 +192,7 @@ code {
width: 100%;
}
.settings-box label small {
color: rgb(153, 153, 153);
color: var(--small-label-color);
margin-right: 10px;
}
#preview {
@ -220,11 +220,11 @@ code {
height: 30pt;
}
#makeImage:hover {
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
background: var(--button-hover-background);
}
#stopImage {
flex: 0 0 70px;
background: rgb(132, 8, 0);
background: var(--secondary-button-background);
border: 2px solid rgb(122, 29, 0);
color: rgb(255, 221, 255);
height: 30pt;
@ -232,7 +232,7 @@ code {
flex-grow: 2;
}
#stopImage:hover {
background: rgb(177, 27, 0);
background: var(--secondary-button-hover-background);
}
#undo {
float: right;
@ -496,11 +496,11 @@ div.img-preview img {
}
#server-status-color {
font-size: 14pt;
color: rgb(200, 139, 0);
color: var(--status-orange);
display: inline;
}
#server-status-msg {
color: rgb(200, 139, 0);
color: var(--status-orange);
padding-left: 2pt;
font-size: 10pt;
}
@ -707,14 +707,14 @@ div.img-preview img {
padding: 3pt 6pt;
}
.secondaryButton {
background: rgb(132, 8, 0);
background: var(--secondary-button-background);
border: 1px solid rgb(122, 29, 0);
color: rgb(255, 221, 255);
padding: 3pt 6pt;
border-radius: 5px;
}
.secondaryButton:hover {
background: rgb(177, 27, 0);
background: var(--secondary-button-hover-background);
}
.tertiaryButton {
background: var(--tertiary-background-color);
@ -724,12 +724,12 @@ div.img-preview img {
border-radius: 5px;
}
.tertiaryButton:hover {
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
background: var(--button-hover-background);
color: var(--accent-text-color);
}
.tertiaryButton.pressed {
border-style: inset;
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
background: var(--button-hover-background);
color: var(--accent-text-color);
}
.useSettings {
@ -949,7 +949,7 @@ input::file-selector-button,
button:hover,
.button:hover {
transition-duration: 0.1s;
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
background: var(--button-hover-background);
}
input::file-selector-button {
@ -1266,7 +1266,7 @@ input::file-selector-button {
.popup {
position: absolute;
background: rgba(32, 33, 36, 50%);
background: var(--backdrop-color);
top: 0px;
left: 0px;
right: 0px;

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

@ -13,6 +13,8 @@
--accent-lightness-hover: 40%;
--text-color: #eee;
--link-color: rgb(0, 102, 204);
--small-label-color: rgb(153, 153, 153);
--input-text-color: #eee;
--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-color: var(--input-background-color);
--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 */
--input-border-radius: 4px;
@ -40,6 +45,7 @@
--status-orange: rgb(200, 139, 0);
--status-green: green;
--status-red: red;
--backdrop-color: rgba(32, 33, 36, 50%);
}
.theme-light {