161 lines
4.6 KiB
CSS
161 lines
4.6 KiB
CSS
/* ==UserStyle==
|
||
@name comfyui custom css
|
||
@version 1.1
|
||
@namespace ?
|
||
@-moz-document domain("127.0.0.1")
|
||
==/UserStyle== */
|
||
|
||
/*
|
||
Original post: https://www.reddit.com/r/comfyui/comments/15yd0vw/theme_the_comfyui_menu_and_fix_some_annoying/
|
||
Original userstyle by knigitz: https://codefile.io/f/seArZMvMyP
|
||
|
||
Version 1.1
|
||
By: Sample_Text (discord)
|
||
https://github.com/SampleTexting/ComfyUI-Userstyle
|
||
To be used in conjuction with the custom color palette from "https://github.com/yolain/ComfyUI-Easy-Use". Works with the others as well, but I used this as my base.
|
||
Also use Comfy Workspace Manager "https://github.com/11cafe/comfyui-workspace-manager"
|
||
|
||
Notes: I'd like to find a way to change the red box in the upper left hand corner to be a cyan box, so it reflects with all of the other borders.
|
||
However, I don't believe that's possible and would likely require an HTML edit. That would be against what this stylesheet is for.
|
||
*/
|
||
|
||
/* Reomiving buttons I don't use on the menu panel */
|
||
|
||
.comfy-menu div label {
|
||
display: none !important;
|
||
}
|
||
|
||
hr {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Choose the color of your menu panel buttons */
|
||
.comfy-menu button {
|
||
background-color: rgba(57, 57, 57, .58) !important;
|
||
font-size: 14px;
|
||
}
|
||
|
||
#queue-front-button,
|
||
#comfy-view-queue-button,
|
||
#comfy-view-history-button,
|
||
.comfy-list-actions button {
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
|
||
.comfy-list-items button {
|
||
background-color: rgba(68, 61, 61, .58) !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
|
||
.comfy-menu button.comfy-queue-btn {
|
||
background-color: rgba(255, 0, 0, .75) !important;
|
||
}
|
||
|
||
/* stylize the menu panel */
|
||
.comfy-menu {
|
||
border: 1px solid rgb(126, 179, 189) !important;
|
||
border-radius: 0px 0px 0px 10px !important;
|
||
backdrop-filter: blur(2px);
|
||
background-color: rgba(0, 0, 0, .5) !important;
|
||
transition: background-color .5s;
|
||
|
||
}
|
||
|
||
.comfy-menu:hover {
|
||
background-color: rgba(0, 0, 0, 1) !important;
|
||
transition: background-color .5s;
|
||
}
|
||
|
||
/* hide the drag handle because it's stuck in place anyway */
|
||
.comfy-menu span.drag-handle {
|
||
visibility:hidden
|
||
}
|
||
|
||
/* font */
|
||
.comfy-menu * {
|
||
/* Global font: */
|
||
font-family: 'Source Sans Pro', sans-serif;
|
||
font-variant-ligatures: common-ligatures;
|
||
/* Disable tap highlight (for touchscreens): */
|
||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||
-webkit-tap-highlight-color: transparent;
|
||
/* Disable text selection: */
|
||
-webkit-user-select: none;
|
||
/* Safari */
|
||
-moz-user-select: none;
|
||
/* Firefox */
|
||
-ms-user-select: none;
|
||
/* Internet Explorer/Edge */
|
||
user-select: none;
|
||
/* Chrome and Opera */
|
||
}
|
||
|
||
/* this is ugly, don't look at it
|
||
.comfy-menu:after {
|
||
font-weight: bold;
|
||
content: "_______________ Welcome to ComfyUI ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ Useful hotkeys: Space+Move Mouse Ctrl/Shift+Click Ctrl+Z/Ctrl+Y Shift+Drag DoubleCLick LMB";
|
||
}*/
|
||
|
||
/* Stylize the ComfyUI Manager Menu */
|
||
.comfy-modal {
|
||
background-color: rgba(0, 0, 0, .95) !important;
|
||
border: 1px solid rgb(126, 179, 189) !important;
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
/* Stylize the doubleclick searchbox */
|
||
.litesearchbox {
|
||
border: 1px solid rgb(126, 179, 189) !important;
|
||
}
|
||
|
||
.litegraph {
|
||
background-color: rgba(0, 0, 0, .53) !important;
|
||
}
|
||
|
||
.litegraph div.helper {
|
||
background-color: rgba(0, 0, 0, .11) !important;
|
||
border-radius: 5px 0px 0px 5px !important;
|
||
}
|
||
|
||
.litegraph div.helper div.lite-search-item:hover {
|
||
background-color: rgba(74, 70, 70, .75) !important;
|
||
border-radius: 13px 0px 0px 13px !important;
|
||
}
|
||
|
||
/* Stylize the options menu (This isn't done as well as I'd like, thanks to my lack of care for actually understanding CSS) */
|
||
.comfy-table {
|
||
background-color: rgba(0, 0, 0, .42) !important;
|
||
color: rgb(255, 255, 255) !important;
|
||
}
|
||
|
||
/* Stylize the menu from Comfy Workspace Manager (If it doesn't work, try switching to dark mode in this nodes settings panel) */
|
||
.chakra-card {
|
||
border: 1px solid rgb(126, 179, 189) !important;
|
||
background-color: rgba(0, 0, 0, .58) !important;
|
||
border-radius: 0px 0px 10px 0px !important;
|
||
backdrop-filter: blur(2px);
|
||
transition: background-color .5s;
|
||
}
|
||
|
||
.chakra-card:hover {
|
||
background-color: rgba(0, 0, 0, 1) !important;
|
||
transition: background-color .5s;
|
||
}
|
||
|
||
.css-1kubmca {
|
||
background-color: rgba(145, 144, 144, .21) !important;
|
||
color: rgb(255, 255, 255) !important;
|
||
border: 2px solid rgb(126, 179, 189) !important;
|
||
border-radius: 10px 0px 10px 0px !important;
|
||
}
|
||
|
||
.css-1an9aux:hover {
|
||
background-color: rgba(145, 144, 144, .21) !important;
|
||
}
|
||
|
||
.comfy-multiline-input {
|
||
/* font-size: 16px !important; */
|
||
font-family: consolas;
|
||
} |