ComfyBox/src/scss/global.scss

@import "gradio";
@import "litegraph";

body {
    overflow: hidden;

    // Disable pull to refresh
    overscroll-behavior-y: contain;
}

#app-root {
    background: var(--body-background-fill);
}

:root {
    --color-blue-500: #3985f5;

    --input-border-color-focus: var(--neutral-400);

    --comfy-accent-soft: var(--neutral-300);
    --comfy-widget-selected-background-fill: var(--color-yellow-100);
    --comfy-widget-hovered-background-fill: var(--secondary-200);
    --comfy-container-selected-background-fill: var(--color-yellow-300);
    --comfy-container-hovered-background-fill: var(--secondary-300);
    --comfy-container-empty-background-fill: var(--color-grey-300);
    --comfy-container-empty-border-color: var(--color-grey-400);
    --comfy-disabled-label-color: var(--neutral-400);
    --comfy-disabled-textbox-background-fill: var(--neutral-200);
    --comfy-disabled-textbox-border-color: var(--neutral-300);
    --comfy-disabled-textbox-text-color: var(--neutral-500);
    --comfy-splitpanes-background-fill: var(--secondary-100);
    --comfy-splitpanes-background-fill-hover: var(--secondary-300);
    --comfy-splitpanes-background-fill-active: var(--secondary-400);
    --comfy-dropdown-list-background: white;
    --comfy-dropdown-item-color-hover: white;
    --comfy-dropdown-item-background-hover: var(--neutral-400);
    --comfy-dropdown-item-color-active: var(--neutral-100);
    --comfy-dropdown-item-background-active: var(--secondary-600);
    --comfy-progress-bar-background: var(--neutral-300);
    --comfy-progress-bar-foreground: var(--secondary-300);
    --comfy-node-name-background: var(--color-red-300);
    --comfy-node-name-foreground: var(--body-text-color);
    --comfy-spinner-main-color: var(--neutral-400);
    --comfy-spinner-accent-color: var(--secondary-500);
}

.dark {
    color-scheme: dark;

    --input-border-color-focus: var(--neutral-500);

    --comfy-accent-soft: var(--neutral-600);
    --comfy-widget-selected-background-fill: var(--primary-500);
    --comfy-widget-hovered-background-fill: var(--neutral-600);
    --comfy-container-selected-background-fill: var(--primary-700);
    --comfy-container-hovered-background-fill: var(--neutral-500);
    --comfy-container-empty-background-fill: var(--color-grey-800);
    --comfy-container-empty-border-color: var(--color-grey-600);
    --comfy-disabled-label-color: var(--neutral-500);
    --comfy-disabled-textbox-background-fill: var(--neutral-800);
    --comfy-disabled-textbox-border-color: var(--neutral-700);
    --comfy-disabled-textbox-text-color: var(--neutral-500);
    --comfy-splitpanes-background-fill: var(--panel-border-color);
    --comfy-splitpanes-background-fill-hover: var(--secondary-500);
    --comfy-splitpanes-background-fill-active: var(--secondary-300);
    --comfy-dropdown-list-background: var(--neutral-800);
    --comfy-dropdown-item-color-hover: var(--neutral-400);
    --comfy-dropdown-item-background-hover: var(--neutral-600);
    --comfy-dropdown-item-background-active: var(--secondary-600);
    --comfy-dropdown-border-color: var(--neutral-600);
    --comfy-progress-bar-background: var(--neutral-500);
    --comfy-progress-bar-foreground: var(--secondary-400);
    --comfy-node-name-background: var(--neutral-700);
    --comfy-node-name-foreground: var(--body-text-color);
    --comfy-spinner-main-color: var(--neutral-600);
    --comfy-spinner-accent-color: var(--secondary-600);
}

.mobile {
    --comfy-progress-bar-background: lightgrey;
    --comfy-progress-bar-foreground: #B3D8A9
}

@mixin disable-input {
    -webkit-text-fill-color: var(--comfy-disabled-textbox-text-color);
    background-color: var(--comfy-disabled-textbox-background-fill);
    border-color: var(--comfy-disabled-textbox-border-color);
    box-shadow: 0 0 0 var(--shadow-spread) transparent, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
    cursor: not-allowed;
}

@mixin disable-inputs {
    :global(input[type=text]:disabled) {
        @include disable-input;
    }
    :global(textarea:disabled) {
        @include disable-input;
    }
    :global(label:has(input:disabled) > span) {
        color: var(--comfy-disabled-label-color);
    }
    :global(label:has(textarea:disabled) > span) {
        color: var(--comfy-disabled-label-color);
    }
}

hr {
    color: var(--panel-border-color);
}

input {
    color: var(--body-text-color);
    background: var(--input-background-fill);
    border: var(--input-border-width) solid var(--input-border-color)
}

input:not(input[type=radio]), textarea {
    border-radius: 0 !important;
}

:not(.litegraph) {
    select {
        color: var(--body-text-color);
        background: var(--input-background-fill);
        border: var(--input-border-width) solid var(--input-border-color)
    }
}

.container {
    background: var(--body-background-fill) !important;
    &.selected {
        background: var(--ae-primary-color) !important;
        > .block.padded {
            background: var(--ae-primary-color) !important;
        }
    }
    > .block {
        background: var(--body-background-fill) !important;
        // border-radius: var(--ae-panel-border-radius) !important;
    }
    &.z-index0 {
        > .block {
            background: var(--panel-background-fill) !important;
        }
    }

    // &:not(.edit) {
    //     &.z-index1 > .block {
    //         padding: calc(var(--ae-outside-gap-size) / 2) !important;
    //         border-width: 0px !important;
    //     }

    //     > .block {
    //         border: solid var(--ae-panel-border-width) var(--ae-panel-border-color) !important;
    //     }
    // }
}

button {
    &.primary:active {
        border-color: var(--button-primary-border-color-active) !important;
        background: var(--button-primary-background-fill-active) !important;
        color: var(--button-primary-text-color-active) !important;
    }
    &.secondary:active {
        border-color: var(--button-secondary-border-color-active) !important;
        background: var(--button-secondary-background-fill-active) !important;
        color: var(--button-secondary-text-color-active) !important;
    }
}

.widget {
    // padding: var(--ae-outside-gap-size);
    // border: 1px solid var(--ae-panel-border-color);
    .block {
        // background: var(--ae-frame-bg-color) !important;
        background: var(--block-background-fill) !important;
    }

}