From bea7c24ebd0c2149bf46c52897bbe5d15ec61bba Mon Sep 17 00:00:00 2001 From: "Alexander G. Morano" Date: Sat, 17 May 2025 04:26:15 -0400 Subject: [PATCH] * cleaned up the css --- README.md | 3 +- pyproject.toml | 2 +- web/core_color.js | 45 +++-- web/jovi_colorizer.css | 397 ++--------------------------------------- 4 files changed, 50 insertions(+), 397 deletions(-) diff --git a/README.md b/README.md index 559eef6..d78d694 100644 --- a/README.md +++ b/README.md @@ -38,8 +38,9 @@ Please consider sponsoring me if you enjoy the results of my work, code or docum ## UPDATES -**2025/05/16** @1.0.1: +**2025/05/17** @1.0.2: * removed old Jovimetrix colorizer init code +* cleaned up the css **2025/03/08** @1.0.0: * intial breakout from Jovimetrix diff --git a/pyproject.toml b/pyproject.toml index 0f48fca..a969ac4 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,7 +1,7 @@ [project] name = "jovi_colorizer" description = "Colorize ComfyUI nodes with defaults per node, node category or via regex filtering." -version = "1.0.1" +version = "1.0.2" license = { file = "LICENSE" } readme = "README.md" authors = [{ name = "Alexander G. Morano", email = "amorano@gmail.com" }] diff --git a/web/core_color.js b/web/core_color.js index 79a9c0d..0ea4ff2 100644 --- a/web/core_color.js +++ b/web/core_color.js @@ -97,8 +97,8 @@ function getColor(node) { } function applyTheme(theme) { - const majorElements = document.querySelectorAll('.jov-panel-color-cat_major'); - const minorElements = document.querySelectorAll('.jov-panel-color-cat_minor'); + const majorElements = document.querySelectorAll('.jov-color-panel-cat_major'); + const minorElements = document.querySelectorAll('.jov-color-panel-cat_minor'); majorElements.forEach(el => el.classList.remove('light', 'dark')); minorElements.forEach(el => el.classList.remove('light', 'dark')); majorElements.forEach(el => el.classList.add(theme)); @@ -121,7 +121,7 @@ class JovimetrixPanelColorize { this.searchInput = $el("input", { type: "text", placeholder: "Filter nodes...", - className: "jov-search-input", + className: "jov-color-search-input", oninput: (e) => this.filterItems(e.target.value) }); return this.searchInput; @@ -138,8 +138,8 @@ class JovimetrixPanelColorize { if (!nameCell) return; const text = nameCell.textContent.toLowerCase(); - const categoryMatch = row.classList.contains('jov-panel-color-cat_major') || - row.classList.contains('jov-panel-color-cat_minor'); + const categoryMatch = row.classList.contains('jov-color-panel-cat_major') || + row.classList.contains('jov-color-panel-cat_minor'); // Show categories if they or their children match if (categoryMatch) { @@ -161,8 +161,8 @@ class JovimetrixPanelColorize { let currentRow = categoryRow.nextElementSibling; while (currentRow && - !currentRow.classList.contains('jov-panel-color-cat_major') && - !currentRow.classList.contains('jov-panel-color-cat_minor')) { + !currentRow.classList.contains('jov-color-panel-cat_major') && + !currentRow.classList.contains('jov-color-panel-cat_minor')) { siblings.push(currentRow); currentRow = currentRow.nextElementSibling; } @@ -381,7 +381,7 @@ class JovimetrixPanelColorize { }); } - templateColorRow(data, type, classList = "jov-panel-color-category") { + templateColorRow(data, type, classList = "jov-color-panel-category") { const titleColor = data.title || LiteGraph.NODE_DEFAULT_COLOR; const bodyColor = data.body || LiteGraph.NODE_DEFAULT_BGCOLOR; const textColor = data.text || LiteGraph.NODE_TEXT_COLOR; @@ -390,10 +390,10 @@ class JovimetrixPanelColorize { let rowClass = classList; let style = {}; - if (classList === "jov-panel-color-cat_major") { + if (classList === "jov-color-panel-cat_major") { // Darker background for major categories style.backgroundColor = "var(--border-color)"; - } else if (classList === "jov-panel-color-cat_minor") { + } else if (classList === "jov-color-panel-cat_minor") { style.backgroundColor = "var(--tr-odd-bg-color)"; } @@ -449,7 +449,7 @@ class JovimetrixPanelColorize { body: CONFIG_THEME?.[majorCategory]?.body, text: CONFIG_THEME?.[majorCategory]?.text }; - this.tbody.appendChild(this.templateColorRow(element, null, "jov-panel-color-cat_major")); + this.tbody.appendChild(this.templateColorRow(element, null, "jov-color-panel-cat_major")); categories.push(majorCategory); } @@ -461,7 +461,7 @@ class JovimetrixPanelColorize { body: CONFIG_THEME?.[category]?.body, text: CONFIG_THEME?.[category]?.text }; - this.tbody.appendChild(this.templateColorRow(element, null, "jov-panel-color-cat_minor")); + this.tbody.appendChild(this.templateColorRow(element, null, "jov-color-panel-cat_minor")); categories.push(category); } @@ -485,11 +485,11 @@ class JovimetrixPanelColorize { const table = this.createRegexPalettes(); this.createColorPalettes(); - this.title_content = $el("div.jov-title-header", { textContent: "EMPTY" }); - this.content = $el("div.jov-panel-color", [ - $el("div.jov-title", [this.title_content]), + this.title_content = $el("div.jov-color-header", { textContent: "EMPTY" }); + this.content = $el("div.jov-color-panel", [ + $el("div.jov-color", [this.title_content]), this.createSearchInput(), // Add search input - $el("div.jov-config-color", [table]), + $el("div", [table]), $el("div.button", []), ]); @@ -541,6 +541,19 @@ app.registerExtension({ }, ], async init() { + const styleTagId = 'jovi_color-stylesheet'; + let styleTag = document.getElementById(styleTagId); + if (styleTag) { + return; + } + + document.head.appendChild(Object.assign(document.createElement('link'), { + id: styleTagId, + rel: 'stylesheet', + type: 'text/css', + href: 'extensions/jovi_colorizer/jovi_colorizer.css' + })); + document.head.appendChild(Object.assign(document.createElement('script'), { src: "https://cdn.jsdelivr.net/npm/@jaames/iro@5" })); diff --git a/web/jovi_colorizer.css b/web/jovi_colorizer.css index 994507b..b402adb 100644 --- a/web/jovi_colorizer.css +++ b/web/jovi_colorizer.css @@ -1,65 +1,10 @@ -/** - * File: jovi_help.css - */ +/**/ - #jov-manager-dialog { - height: 620px; - padding: 0px; - margin: 0px; -} - -#jov-manager-dialog td { - color: white; - text-align: right; -} - -.jov-modal-content { - display: flex; - flex-direction: column; - align-items: center; - background-color: #111; - border: 3px solid #AAA; -} - -#jov-submit-cancel { - width: 100%; - padding: 10px; - margin: 5px; - background-color: #C43E3E; - color: #222; - border: none; - border-radius: 5px; -} - -#jov-submit-continue { - width: 100%; - padding: 5px; - margin: 5px; - background-color: #3EC43E; - color: #222; - border: none; - border-radius: 5px; -} - -.jov-modal-content h3, h4 { - padding: 2px; - margin: 2px; -} - -.jov-config-color-header { - text-align: right; -} - -.jov-config-color { - overflow-x: auto; - overflow-y: auto; -} - -.jov-title { +.jov-color { text-align: center; } -.jov-title-header { +.jov-color-header { font-weight: bold; font-size: 1.5em; text-align: center; @@ -70,269 +15,7 @@ -webkit-text-fill-color: transparent; } -#jov-apply-button { - text-align: center; -} - -#jov-manager-dialog button { - background-color: #300000; - color: #FFFFFF; - padding: 4px; - border-radius: 0px; - -moz-border-radius: 0px; - margin:0px -} - -#jov-close-button button { - background-color: #202020; - width: calc(100% - 2px); - bottom: 2px; - border: 2px solid #ccc; - border-radius: 0px; - position: absolute; - overflow: hidden; -} - -#jov-manager-dialog input { - border-style: none; - border-radius: 0px; - font-size: unset; -} - -.jov-color { - text-align: center; - -} - -.jov-color tbody { - user-select: none; -} - -.jov-color tr, td { - user-select: none; -} - -.jov-color .foldable-title { - cursor: pointer; - font-weight: bold; - user-select: none; -} - -.jov-color .foldable-symbol { - margin-right: 10px; -} - -.jov-color .foldable-content { - display: none; - flex-direction: column; - margin-left: 20px; -} - -.jov-hidden { - visibility: hidden; -} - -.jov-graph-tooltip { - z-index: 99999; - padding: 3px; - margin: 3px; - background: var(--border-color); - color: var(--fg-color); - position: absolute; - left: 0; - top: 0; - display: none; - transform: translate(5px, calc(-100% - 5px)); - max-width: 30vw; - border-radius: 5px; - border: 1px solid var(--fg-color); - font-family: sans-serif; - font-size: 0.95em; - white-space: pre-wrap; -} - -.jov-panel-doc { - background: var(--comfy-menu-bg); - color: var(--fg-color); - font: 0.9em monospace; - overflow: auto; - width: 100%; - margin: 4px; - padding: 4px; - box-sizing: border-box; - scrollbar-width: thin; - scrollbar-color: var(--fg-color) var(--bg-color); -} - -.jov-panel-doc h2, .jov-panel-doc h3 { - width: 100%; - text-align: center; -} - -.jov-panel-doc p { - max-width: 100%; -} - -.jov-panel-doc img { - display: block; - width: 95%; - height: auto; - object-fit: contain; -} - -.jov-panel-doc table { - width: 100%; - border-collapse: separate; - border: 1px solid var(--border-color); -} - -.jov-panel-doc table td:first-child -.jov-panel-doc table td:nth-child(2) { - max-width: 75px; - min-width: 50px; -} - -.jov-panel-doc table td:nth-child(3) { - min-width: 150px; - max-width: 400px; -} - -.jov-panel-doc table td:nth-child(4) { - max-width: 250px; - min-width: 50px; -} - -.jov-panel-doc table td:nth-child(5) { - max-width: 400px; - min-width: 50px; -} - -.jov-panel-doc th, .jov-panel-doc td { - padding: 2px; - text-align: left; -} - -.jov-panel-doc th { - text-align: center; - background-color: var(--comfy-input-bg); - color: var(--input-text); -} - -.jov-panel-doc tr:nth-child(even) { - background-color: rgba(255, 255, 255, 0.1); -} - -.jov-panel-doc tr:nth-child(odd) { - background-color: rgba(0, 0, 0, 0.05); -} - -.jov-panel-doc footer { - margin-top: 4px; - text-align: center; -} - -.jov-panel-doc a { - color: yellow; - text-decoration: none; -} - -.jov-panel-doc a:visited { - color: orange; -} - -.jov-panel-doc a:hover { - color: red; - text-decoration: underline; -} - -/* Scrollbar styling */ -.jov-panel-doc::-webkit-scrollbar { - width: 6px; -} - -.jov-panel-doc::-webkit-scrollbar-track { - background: var(--bg-color); -} - -.jov-panel-doc::-webkit-scrollbar-thumb { - background-color: var(--fg-color); - border-radius: 6px; - border: 3px solid var(--bg-color); -} - -/* Embedded content */ -.jov-panel-doc iframe, -.jov-panel-doc video, -.jov-panel-doc object, -.jov-panel-doc embed { - max-width: 100%; - max-height: 70vh; - width: auto; - height: auto; - object-fit: contain; -} - -/* Media query for responsiveness */ -@media screen and (max-width: 640px) { - .jov-panel-doc { - font-size: 12px; - padding: 5px; - width: 100%; - height: 95vh; - } - - .jov-panel-doc table { - width: 100%; - } - - .jov-panel-doc img, - .jov-panel-doc iframe, - .jov-panel-doc video, - .jov-panel-doc object, - .jov-panel-doc embed { - max-height: 50vh; - width: 100%; - } -} - -.jov-panel-doc-popup { - position: absolute; - line-height: 1.5em; - z-index: 925; - width: 315px; - height: 295px; - min-width: 215px; - min-height: 85px; - overflow: hidden; -} - -.jov-panel-doc-popup img { - display: block; - margin: 5px; - width: 95%; -} - -.jov-panel-doc-popup table { - border-collapse: collapse; - border: 1px var(--border-color) solid; -} - -.jov-panel-doc-popup th, -.jov-panel-doc-popup td { - border: 1px var(--border-color) solid; -} - -.jov-panel-doc-popup th { - background-color: var(--comfy-input-bg); -} - - -/* -COLORIZATION STYLE -COLORIZATION STYLE -COLORIZATION STYLE -*/ -.jov-panel-color { +.jov-color-panel { max-width: 100%; max-height: 100%; overflow: visible; @@ -344,56 +27,48 @@ COLORIZATION STYLE background-color: var(--bg-color); } -.jov-panel-color-title { - text-align: center; -} - -.jov-panel-color-header { - text-transform: uppercase; -} - /* Light Theme */ -.jov-panel-color-cat_major.light { +.jov-color-panel-cat_major.light { background-color: #D3D3D3; color: #333; text-transform: uppercase; } -.jov-panel-color-cat_minor.light { +.jov-color-panel-cat_minor.light { background-color: #A9A9A9; color: #333; text-transform: uppercase; } /* Dark Theme */ -.jov-panel-color-cat_major.dark { +.jov-color-panel-cat_major.dark { background-color: #4B4B4B; color: #F1F1F1; text-transform: uppercase; } -.jov-panel-color-cat_minor.dark { +.jov-color-panel-cat_minor.dark { background-color: #2E2E2E; color: #F1F1F1; text-transform: uppercase; } -.jov-panel-color table { +.jov-color-panel table { width: 100%; border-collapse: collapse; } -.jov-panel-color th, -.jov-panel-color td { +.jov-color-panel th, +.jov-color-panel td { vertical-align: middle; } -.jov-panel-color td.fixed-size { +.jov-color-panel td.fixed-size { width: 24px; height: 24px; } -.jov-panel-color td button { +.jov-color-panel td button { border: 0px outset; display: flex; justify-content: center; @@ -402,12 +77,12 @@ COLORIZATION STYLE height: 24px; } -.jov-panel-color input[type="checkbox"] { +.jov-color-panel input[type="checkbox"] { text-align: center; margin-right: 5px; } -.jov-panel-color #jov-color-apply { +.jov-color-panel #jov-color-apply { text-align: center; font-size: 0.9em; display: flex; @@ -416,7 +91,7 @@ COLORIZATION STYLE margin-top: 10px; } -.jov-search-input { +.jov-color-search-input { width: calc(100% - 16px); margin: 8px; padding: 8px; @@ -427,48 +102,12 @@ COLORIZATION STYLE font-size: 14px; } -.jov-search-input:focus { +.jov-color-search-input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.2); } -.jov-search-input::placeholder { +.jov-color-search-input::placeholder { color: var(--text-color-secondary); } - -@media screen and (max-width: 600px) { - .flexible-table, .flexible-table tbody, .flexible-table tr, .flexible-table td { - display: block; - width: 100%; - } - - .flexible-table tbody { - text-align: left; - } - - .flexible-table tr { - margin-bottom: 5px; - } - - .flexible-table td { - border: none; - position: relative; - padding-left: 50%; - } - - .flexible-table td:before { - content: attr(data-label); - position: absolute; - left: 3px; - width: 45%; - padding-right: 5px; - white-space: nowrap; - font-weight: bold; - } -} - -article { - margin: 4px; - padding: 4px; -} \ No newline at end of file