mirrors/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-07-30 17:56:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

use variables in css stylesheet

Browse Source
This commit is contained in:
EllangoK 2023-04-11 01:08:01 -04:00
parent c767e9426a
commit 40ad2d4a10
1 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/style.css
View File

@ -1,6 +1,13 @@
:root { :root {
--fg-color: #000; --fg-color: #000;
--bg-color: #fff; --bg-color: #fff;
--comfy-menu-bg: #353535;
--comfy-input-bg: #222;
--input-text: #ddd;
--descrip-text: #999;
--drag-text: #ccc;
--error-text: #ff4444;
--border-color: #4e4e4e;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -39,8 +46,8 @@ body {
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */ z-index: 100; /* Sit on top */
padding: 30px 30px 10px 30px; padding: 30px 30px 10px 30px;
background-color: #353535; /* Modal background */ background-color: var(--comfy-menu-bg); /* Modal background */
color: #ff4444; color: var(--error-text);
box-shadow: 0px 0px 20px #888888; box-shadow: 0px 0px 20px #888888;
border-radius: 10px; border-radius: 10px;
top: 50%; top: 50%;
@ -82,8 +89,8 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: #999; color: var(--descrip-text);
background-color: #353535; background-color: var(--comfy-menu-bg);
font-family: sans-serif; font-family: sans-serif;
padding: 10px; padding: 10px;
border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px 8px;
@ -103,7 +110,7 @@ body {
.comfy-menu-btns button { .comfy-menu-btns button {
font-size: 10px; font-size: 10px;
width: 50%; width: 50%;
color: #999 !important; color: var(--descrip-text) !important;
} }
.comfy-menu > button { .comfy-menu > button {
@ -114,10 +121,10 @@ body {
.comfy-menu-btns button, .comfy-menu-btns button,
.comfy-menu .comfy-list button, .comfy-menu .comfy-list button,
.comfy-modal button{ .comfy-modal button{
color: #ddd; color: var(--input-text);
background-color: #222; background-color: var(--comfy-input-bg);
border-radius: 8px; border-radius: 8px;
border-color: #4e4e4e; border-color: var(--border-color);
border-style: solid; border-style: solid;
margin-top: 2px; margin-top: 2px;
} }
@ -136,7 +143,7 @@ body {
font-size: 12px; font-size: 12px;
font-family: sans-serif; font-family: sans-serif;
letter-spacing: 2px; letter-spacing: 2px;
color: #cccccc; color: var(--drag-text);
text-shadow: 1px 0 1px black; text-shadow: 1px 0 1px black;
position: absolute; position: absolute;
top: 0; top: 0;
@ -152,7 +159,7 @@ body {
} }
.comfy-list { .comfy-list {
color: #999; color: var(--descrip-text);
background-color: #333; background-color: #333;
margin-bottom: 10px; margin-bottom: 10px;
border-color: #4e4e4e; border-color: #4e4e4e;
@ -163,7 +170,7 @@ body {
overflow-y: scroll; overflow-y: scroll;
max-height: 100px; max-height: 100px;
min-height: 25px; min-height: 25px;
background-color: #222; background-color: var(--comfy-input-bg);
padding: 5px; padding: 5px;
} }
@ -206,16 +213,16 @@ button.comfy-queue-btn {
.comfy-modal.comfy-manage-templates { .comfy-modal.comfy-manage-templates {
text-align: center; text-align: center;
font-family: sans-serif; font-family: sans-serif;
color: #999; color: var(--descrip-text);
z-index: 99; z-index: 99;
} }
.comfy-modal input, .comfy-modal input,
.comfy-modal select { .comfy-modal select {
color: #ddd; color: var(--input-text);
background-color: #222; background-color: var(--comfy-input-bg);
border-radius: 8px; border-radius: 8px;
border-color: #4e4e4e; border-color: var(--border-color);
border-style: solid; border-style: solid;
font-size: inherit; font-size: inherit;
} }
@ -240,7 +247,7 @@ button.comfy-queue-btn {
.graphdialog .name { .graphdialog .name {
font-size: 14px; font-size: 14px;
font-family: sans-serif; font-family: sans-serif;
color: #999999; color: var(--descrip-text);
} }
.graphdialog button { .graphdialog button {
@ -251,10 +258,10 @@ button.comfy-queue-btn {
} }
.graphdialog input, .graphdialog textarea, .graphdialog select { .graphdialog input, .graphdialog textarea, .graphdialog select {
background-color: #222; background-color: var(--comfy-input-bg);
border: 2px solid; border: 2px solid;
border-color: #444444; border-color: var(--border-color);
color: #ddd; color: var(--input-text);
border-radius: 12px 0 0 12px; border-radius: 12px 0 0 12px;
} }