From 6de48fe6ab29174e21e980d9f532d4ee5120bd4e Mon Sep 17 00:00:00 2001
From: "Alexander G. Morano" <amorano@gmail.com>
Date: Sun, 2 Mar 2025 21:31:18 -0500
Subject: [PATCH] migrated stylesheet

---
 README.md              |  11 +-
 web/core_color.js      |  13 ++
 web/jovi_colorizer.css | 474 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 490 insertions(+), 8 deletions(-)
 create mode 100644 web/jovi_colorizer.css

diff --git a/README.md b/README.md
index 98ac212..2c6d5ac 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,11 @@
 <div align="center">
-
 <picture>
   <source srcset="https://raw.githubusercontent.com/Amorano/Jovimetrix-examples/refs/heads/master/res/logo-jovi_colorizer.png">
-  <img alt="Colorize ComfyUI nodes with defaults per node, node category or via regex filtering " width="256" height="256">
+  <img alt="Colorize ComfyUI nodes with defaults per node, node category or via regex filtering " width="384" height="384">
 </picture>
-
 </div>
-
 <div align="center">
-
-<a href="https://github.com/comfyanonymous/ComfyUI">COMFYUI</a> Colorize ComfyUI nodes with defaults per node, node category or via regex filtering
-
+<a href="https://github.com/comfyanonymous/ComfyUI">COMFYUI</a> Colorize ComfyUI nodes with defaults per node, node category or via regex filtering<br><br>
 </div>
 
 <div align="center">
@@ -43,7 +38,7 @@ Please consider sponsoring me if you enjoy the results of my work, code or docum
 
 ## UPDATES
 
-**2025/03/02** @1.0.0:
+**2025/03/03** @1.0.0:
 * intial breakout from Jovimetrix
 
 # INSTALLATION
diff --git a/web/core_color.js b/web/core_color.js
index 2690ade..ca0ba40 100644
--- a/web/core_color.js
+++ b/web/core_color.js
@@ -594,6 +594,19 @@ app.registerExtension({
         document.head.appendChild(Object.assign(document.createElement('script'), {
             src: "https://cdn.jsdelivr.net/npm/@jaames/iro@5"
         }));
+
+        const styleTagId = 'jovimetrix-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'
+        }));
     },
     async setup() {
 
diff --git a/web/jovi_colorizer.css b/web/jovi_colorizer.css
new file mode 100644
index 0000000..994507b
--- /dev/null
+++ b/web/jovi_colorizer.css
@@ -0,0 +1,474 @@
+/**
+ * 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 {
+  text-align: center;
+}
+
+.jov-title-header {
+  font-weight: bold;
+  font-size: 1.5em;
+  text-align: center;
+  background: linear-gradient(22deg, #ff0000 25%, #4c67dd 40%, #5ddd4c 50%, #dd4c4c 65%);
+  clip: text;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -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 {
+  max-width: 100%;
+  max-height: 100%;
+  overflow: visible;
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+  table-layout: fixed;
+  text-align: left;
+  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 {
+  background-color: #D3D3D3;
+  color: #333;
+  text-transform: uppercase;
+}
+
+.jov-panel-color-cat_minor.light {
+  background-color: #A9A9A9;
+  color: #333;
+  text-transform: uppercase;
+}
+
+/* Dark Theme */
+.jov-panel-color-cat_major.dark {
+  background-color: #4B4B4B;
+  color: #F1F1F1;
+  text-transform: uppercase;
+}
+
+.jov-panel-color-cat_minor.dark {
+  background-color: #2E2E2E;
+  color: #F1F1F1;
+  text-transform: uppercase;
+}
+
+.jov-panel-color table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.jov-panel-color th,
+.jov-panel-color td {
+  vertical-align: middle;
+}
+
+.jov-panel-color td.fixed-size {
+  width: 24px;
+  height: 24px;
+}
+
+.jov-panel-color td button {
+  border: 0px outset;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+}
+
+.jov-panel-color input[type="checkbox"] {
+  text-align: center;
+  margin-right: 5px;
+}
+
+.jov-panel-color #jov-color-apply {
+  text-align: center;
+  font-size: 0.9em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.jov-search-input {
+  width: calc(100% - 16px);
+  margin: 8px;
+  padding: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--input-background-color);
+  color: var(--input-text-color);
+  font-size: 14px;
+}
+
+.jov-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 {
+  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