nodes/rgthree-rgthree-comfy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add css vars for colors for custom themeing. For #239

Browse Source
This commit is contained in:
rgthree
2024-06-09 15:29:16 -04:00
parent 754107ccf6
commit 7b8ea34347
4 changed files with 32 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src_web/comfyui/rgthree.scss
-1
View File
@@ -256,7 +256,6 @@ rgthree-progress-bar {
font-size: 10px;
width: 100%;
overflow: hidden;
background: rgba(23, 23, 23, 0.9);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
box-shadow:
inset 0px -1px 0px rgba(0, 0, 0, 0.25),
src_web/common/progress_bar.ts
+16 -18
View File
@@ -3,6 +3,7 @@
*/
import { SERVICE as PROMPT_SERVICE, type PromptExecution } from "rgthree/common/prompt_service.js";
import { createElement } from "./utils_dom.js";
/**
* The progress bar web component.
@@ -121,17 +122,24 @@ export class RgthreeProgressBar extends HTMLElement {
this.shadow = this.attachShadow({ mode: "open" });
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
:host {
position: relative;
overflow: hidden;
box-sizing: border-box;
background: var(--rgthree-progress-bg-color);
--rgthree-progress-bg-color: rgba(23, 23, 23, 0.9);
--rgthree-progress-nodes-bg-color: rgb(0, 128, 0);
--rgthree-progress-steps-bg-color: rgb(0, 128, 0);
--rgthree-progress-error-bg-color: rgb(128, 0, 0);
--rgthree-progress-text-color: #fff;
}
:host * {
box-sizing: inherit;
}
:host > div.bar {
background: rgba(0, 128, 0);
background: var(--rgthree-progress-nodes-bg-color);
position: absolute;
left: 0;
top: 0;
@@ -141,12 +149,13 @@ export class RgthreeProgressBar extends HTMLElement {
transition: width 50ms ease-in-out;
}
:host > div.bar + div.bar {
background: var(--rgthree-progress-steps-bg-color);
top: 50%;
height: 50%;
z-index: 2;
}
:host > div.bar.-error {
background: rgba(128, 0, 0);
background: var(--rgthree-progress-error-bg-color);
}
:host > .overlay {
@@ -173,7 +182,7 @@ export class RgthreeProgressBar extends HTMLElement {
padding: 0 6px;
align-items: center;
justify-content: start;
color: #fff;
color: var(--rgthree-progress-text-color);
text-shadow: black 0px 0px 2px;
}
@@ -188,21 +197,10 @@ export class RgthreeProgressBar extends HTMLElement {
`);
this.shadow.adoptedStyleSheets = [sheet];
const overlayEl = document.createElement("div");
overlayEl.classList.add("overlay");
this.shadow.appendChild(overlayEl);
this.progressNodesEl = document.createElement("div");
this.progressNodesEl.classList.add("bar");
this.shadow.appendChild(this.progressNodesEl);
this.progressStepsEl = document.createElement("div");
this.progressStepsEl.classList.add("bar");
this.shadow.appendChild(this.progressStepsEl);
this.progressTextEl = document.createElement("span");
this.progressTextEl.innerText = "Idle";
this.shadow.appendChild(this.progressTextEl);
const overlayEl = createElement(`div.overlay[part="overlay"]`, {parent: this.shadow});
this.progressNodesEl = createElement(`div.bar[part="progress-nodes"]`, {parent: this.shadow});
this.progressStepsEl = createElement(`div.bar[part="progress-steps"]`, {parent: this.shadow});
this.progressTextEl = createElement(`span[part="text"]`, {text: 'Idle', parent: this.shadow});
}
disconnectedCallback() {
web/comfyui/rgthree.css
-1
View File
@@ -530,7 +530,6 @@ rgthree-progress-bar {
font-size: 10px;
width: 100%;
overflow: hidden;
background: rgba(23, 23, 23, 0.9);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.125);
}
web/common/progress_bar.js
+16 -15
View File
@@ -1,4 +1,5 @@
import { SERVICE as PROMPT_SERVICE } from "../common/prompt_service.js";
import { createElement } from "./utils_dom.js";
export class RgthreeProgressBar extends HTMLElement {
static create() {
return document.createElement(RgthreeProgressBar.NAME);
@@ -90,17 +91,24 @@ export class RgthreeProgressBar extends HTMLElement {
this.shadow = this.attachShadow({ mode: "open" });
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
:host {
position: relative;
overflow: hidden;
box-sizing: border-box;
background: var(--rgthree-progress-bg-color);
--rgthree-progress-bg-color: rgba(23, 23, 23, 0.9);
--rgthree-progress-nodes-bg-color: rgb(0, 128, 0);
--rgthree-progress-steps-bg-color: rgb(0, 128, 0);
--rgthree-progress-error-bg-color: rgb(128, 0, 0);
--rgthree-progress-text-color: #fff;
}
:host * {
box-sizing: inherit;
}
:host > div.bar {
background: rgba(0, 128, 0);
background: var(--rgthree-progress-nodes-bg-color);
position: absolute;
left: 0;
top: 0;
@@ -110,12 +118,13 @@ export class RgthreeProgressBar extends HTMLElement {
transition: width 50ms ease-in-out;
}
:host > div.bar + div.bar {
background: var(--rgthree-progress-steps-bg-color);
top: 50%;
height: 50%;
z-index: 2;
}
:host > div.bar.-error {
background: rgba(128, 0, 0);
background: var(--rgthree-progress-error-bg-color);
}
:host > .overlay {
@@ -142,7 +151,7 @@ export class RgthreeProgressBar extends HTMLElement {
padding: 0 6px;
align-items: center;
justify-content: start;
color: #fff;
color: var(--rgthree-progress-text-color);
text-shadow: black 0px 0px 2px;
}
@@ -156,18 +165,10 @@ export class RgthreeProgressBar extends HTMLElement {
}
`);
this.shadow.adoptedStyleSheets = [sheet];
const overlayEl = document.createElement("div");
overlayEl.classList.add("overlay");
this.shadow.appendChild(overlayEl);
this.progressNodesEl = document.createElement("div");
this.progressNodesEl.classList.add("bar");
this.shadow.appendChild(this.progressNodesEl);
this.progressStepsEl = document.createElement("div");
this.progressStepsEl.classList.add("bar");
this.shadow.appendChild(this.progressStepsEl);
this.progressTextEl = document.createElement("span");
this.progressTextEl.innerText = "Idle";
this.shadow.appendChild(this.progressTextEl);
const overlayEl = createElement(`div.overlay[part="overlay"]`, { parent: this.shadow });
this.progressNodesEl = createElement(`div.bar[part="progress-nodes"]`, { parent: this.shadow });
this.progressStepsEl = createElement(`div.bar[part="progress-steps"]`, { parent: this.shadow });
this.progressTextEl = createElement(`span[part="text"]`, { text: 'Idle', parent: this.shadow });
}
disconnectedCallback() {
this.connected = false;