diff --git a/.pylintrc b/.pylintrc index b6271a0..8a082e8 100644 --- a/.pylintrc +++ b/.pylintrc @@ -428,7 +428,9 @@ disable=raw-checker-failed, suppressed-message, useless-suppression, deprecated-pragma, - use-symbolic-message-instead + use-symbolic-message-instead, + C0103, # invalid-name :: constant case + W0603 # global-statements # Enable the message, report, category or checker with the given id(s). You can # either give multiple identifier separated by comma (,) or put this option diff --git a/__build__.py b/__build__.py index eb52392..a07c1e6 100644 --- a/__build__.py +++ b/__build__.py @@ -4,11 +4,14 @@ import subprocess import os from shutil import rmtree, copytree, ignore_patterns from glob import glob -import json +import time import re +from py.log import COLORS from py.config import RGTHREE_CONFIG +start = time.time() + THIS_DIR = os.path.dirname(os.path.abspath(__file__)) DIR_SRC_WEB = os.path.abspath(f'{THIS_DIR}/src_web/') DIR_WEB = os.path.abspath(f'{THIS_DIR}/web/') @@ -16,15 +19,52 @@ DIR_WEB_COMFYUI = os.path.abspath(f'{DIR_WEB}/comfyui/') rmtree(DIR_WEB) -copytree(DIR_SRC_WEB, DIR_WEB, ignore=ignore_patterns("typings*", "*.ts")) -subprocess.run(["./node_modules/typescript/bin/tsc"]) +def log_step(msg=None, status=None): + """ Logs a step keeping track of timing and initial msg. """ + global step_msg # pylint: disable=W0601 + global step_start # pylint: disable=W0601 + if msg: + step_msg = f'โ–ป [Starting] {msg}...' + step_start = time.time() + print(step_msg, end="\r") + elif status: + step_time = round(time.time() - step_start, 3) + if status == 'Error': + status_msg=f'{COLORS["RED"]}โคซ {status}{COLORS["RESET"]}' + else: + status_msg=f'{COLORS["BRIGHT_GREEN"]}๐Ÿ—ธ {status}{COLORS["RESET"]}' + print( + f'{step_msg.ljust(50, ".")} {COLORS["BRIGHT_GREEN"]}๐Ÿ—ธ {status}{COLORS["RESET"]} ({step_time}s)' + ) + + +log_step(msg='Copying web directory') +copytree(DIR_SRC_WEB, DIR_WEB, ignore=ignore_patterns("typings*", "*.ts", "*.scss")) +log_step(status="Done") + +log_step(msg='TypeScript') +checked = subprocess.run(["./node_modules/typescript/bin/tsc"], check=True) +log_step(status="Done") + +scsss = glob(os.path.join(DIR_SRC_WEB, "**", "*.scss"), recursive=True) +log_step(msg=f'SASS for {len(scsss)} files') +scsss = [i.replace(THIS_DIR, '.') for i in scsss] +cmds = ["node", "./node_modules/sass/sass"] +for scss in scsss: + out = scss.replace('src_web', 'web').replace('.scss', '.css') + cmds.append(f'{scss}:{out}') +cmds.append('--no-source-map') +checked = subprocess.run(cmds, check=True) +log_step(status="Done") # Handle the common directories. Because ComfyUI loads under /extensions/rgthree-comfy we can't # easily share sources outside of the `DIR_WEB_COMFYUI` _and_ allow typescript to resolve them in # src view, so we set the path in the tsconfig to map an import of "rgthree/common" to the # "src_web/common" directory, but then need to rewrite the comfyui JS files to load from # "../../rgthree/common" (which we map correctly in rgthree_server.py). +log_step(msg='Cleaning Imports') +print('โ–ป [Starting] Cleaning Imports...', end="\r") web_subfolders = [f.name for f in os.scandir(DIR_WEB) if f.is_dir()] for subfolder in web_subfolders: js_files = glob(os.path.join(DIR_WEB, subfolder, '*.js'), recursive=True) @@ -37,3 +77,6 @@ for subfolder in web_subfolders: filedata = re.sub(r'(from\s+["\'])rgthree/', '\\1../', filedata) with open(file, 'w', encoding="utf-8") as f: f.write(filedata) +log_step(status="Done") + +print(f'Finished all in {round(time.time() - start, 3)}s') diff --git a/package-lock.json b/package-lock.json index c93a178..cc62e50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,9 +6,178 @@ "": { "devDependencies": { "prettier": "3.0.3", + "sass": "^1.70.0", "typescript": "^5.2.2" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "dev": true + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/prettier": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", @@ -24,6 +193,56 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/sass": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz", + "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/typescript": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", diff --git a/package.json b/package.json index 82e4cc8..7ce672b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,10 @@ { "devDependencies": { "prettier": "3.0.3", - "typescript": "^5.2.2" + "typescript": "^5.2.2", + "sass": "^1.70.0" + }, + "scripts": { + "build": "./__build__.py" } } diff --git a/py/log.py b/py/log.py index 07bcb27..712ac19 100644 --- a/py/log.py +++ b/py/log.py @@ -1,6 +1,6 @@ # https://stackoverflow.com/questions/4842424/list-of-ansi-color-escape-sequences # https://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit -COLORS_FG = { +COLORS = { 'BLACK': '\33[30m', 'RED': '\33[31m', 'GREEN': '\33[32m', @@ -17,8 +17,7 @@ COLORS_FG = { 'BRIGHT_MAGENTA': '\33[95m', 'BRIGHT_CYAN': '\33[96m', 'BRIGHT_WHITE': '\33[97m', -} -COLORS_STYLE = { + # Styles. 'RESET': '\33[0m', 'BOLD': '\33[1m', 'NORMAL': '\33[22m', @@ -27,45 +26,44 @@ COLORS_STYLE = { 'BLINK': '\33[5m', 'BLINK2': '\33[6m', 'SELECTED': '\33[7m', -} -COLORS_BG = { - 'BLACK': '\33[40m', - 'RED': '\33[41m', - 'GREEN': '\33[42m', - 'YELLOW': '\33[43m', - 'BLUE': '\33[44m', - 'MAGENTA': '\33[45m', - 'CYAN': '\33[46m', - 'WHITE': '\33[47m', - 'GREY': '\33[100m', - 'BRIGHT_RED': '\33[101m', - 'BRIGHT_GREEN': '\33[102m', - 'BRIGHT_YELLOW': '\33[103m', - 'BRIGHT_BLUE': '\33[104m', - 'BRIGHT_MAGENTA': '\33[105m', - 'BRIGHT_CYAN': '\33[106m', - 'BRIGHT_WHITE': '\33[107m', + # Backgrounds + 'BG_BLACK': '\33[40m', + 'BG_RED': '\33[41m', + 'BG_GREEN': '\33[42m', + 'BG_YELLOW': '\33[43m', + 'BG_BLUE': '\33[44m', + 'BG_MAGENTA': '\33[45m', + 'BG_CYAN': '\33[46m', + 'BG_WHITE': '\33[47m', + 'BG_GREY': '\33[100m', + 'BG_BRIGHT_RED': '\33[101m', + 'BG_BRIGHT_GREEN': '\33[102m', + 'BG_BRIGHT_YELLOW': '\33[103m', + 'BG_BRIGHT_BLUE': '\33[104m', + 'BG_BRIGHT_MAGENTA': '\33[105m', + 'BG_BRIGHT_CYAN': '\33[106m', + 'BG_BRIGHT_WHITE': '\33[107m', } def log_node_success(node_name, message): """Logs a success message.""" - _log_node(COLORS_FG["GREEN"], node_name, message) + _log_node(COLORS["GREEN"], node_name, message) def log_node_info(node_name, message): """Logs an info message.""" - _log_node(COLORS_FG["CYAN"], node_name, message) + _log_node(COLORS["CYAN"], node_name, message) def log_node_warn(node_name, message): """Logs an warn message.""" - _log_node(COLORS_FG["YELLOW"], node_name, message) + _log_node(COLORS["YELLOW"], node_name, message) def log_node(node_name, message): """Logs a message.""" - _log_node(COLORS_FG["CYAN"], node_name, message) + _log_node(COLORS["CYAN"], node_name, message) def _log_node(color, node_name, message, prefix=''): @@ -73,16 +71,15 @@ def _log_node(color, node_name, message, prefix=''): def _get_log_msg(color, node_name, message, prefix=''): - msg = f'{COLORS_STYLE["BOLD"]}{color}{prefix}[rgthree] {node_name.replace(" (rgthree)", "")}' - msg += f':{COLORS_STYLE["RESET"]} {message}' + msg = f'{COLORS["BOLD"]}{color}{prefix}[rgthree] {node_name.replace(" (rgthree)", "")}' + msg += f':{COLORS["RESET"]} {message}' return msg def log(message, color=None, msg_color=None, prefix=None): - color = COLORS_FG[color] if color is not None and color in COLORS_FG else COLORS_FG["BRIGHT_GREEN"] - msg_color = COLORS_STYLE["RESET"] if msg_color == 'RESET' else COLORS_FG[ - msg_color] if msg_color is not None and msg_color in COLORS_FG else '' + color = COLORS[color] if color is not None and color in COLORS else COLORS["BRIGHT_GREEN"] + msg_color = COLORS[msg_color] if msg_color is not None and msg_color in COLORS else '' prefix = f'[{prefix}]' if prefix is not None else '' msg = f'{color}[rgthree]{prefix}' - msg += f'{msg_color} {message}{COLORS_STYLE["RESET"]}' + msg += f'{msg_color} {message}{COLORS["RESET"]}' print(msg) diff --git a/src_web/comfyui/rgthree.css b/src_web/comfyui/rgthree.scss similarity index 72% rename from src_web/comfyui/rgthree.css rename to src_web/comfyui/rgthree.scss index 7c2aa7f..b8094ca 100644 --- a/src_web/comfyui/rgthree.css +++ b/src_web/comfyui/rgthree.scss @@ -218,101 +218,8 @@ justify-content: center; } -:not(#fakeid) .rgthree-button { - --padding-top: 7px; - --padding-bottom: 9px; - --padding-x: 16px; - position: relative; - cursor: pointer; - border: 0; - border-radius: 0.25rem; - background: rgba(0, 0, 0, 0.5); - color: white; - font-family: system-ui, sans-serif; - font-size: calc(16rem / 16); - line-height: 1; - white-space: nowrap; - text-decoration: none; - margin: 0.25rem; - cursor: pointer; - box-shadow: 0px 0px 2px rgb(0, 0, 0); - background: #212121; - transition: all 0.1s ease-in-out; - padding: var(--padding-top) var(--padding-x) var(--padding-bottom); - display: inline-flex; - flex-direction: row; - align-items: center; - justify-content: center; -} - -:not(#fakeid) .rgthree-button::before, -:not(#fakeid) .rgthree-button::after { - content: ""; - display: block; - position: absolute; - border-radius: 0.25rem; - left: 0; - top: 0; - width: 100%; - height: 100%; - box-shadow: - inset 1px 1px 0px rgba(255, 255, 255, 0.12), - inset -1px -1px 0px rgba(0, 0, 0, 0.75); - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)); - mix-blend-mode: screen; -} -:not(#fakeid) .rgthree-button::after { - mix-blend-mode: multiply; -} - -:not(#fakeid) .rgthree-button:hover { - background: #303030; -} -:not(#fakeid) .rgthree-button:active { - box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); - background: #121212; - padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px) - calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px); -} - -:not(#fakeid) .rgthree-button:active::before, -:not(#fakeid) .rgthree-button:active::after { - box-shadow: - 1px 1px 0px rgba(255, 255, 255, 0.15), - inset 1px 1px 0px rgba(0, 0, 0, 0.5), - inset 1px 3px 5px rgba(0, 0, 0, 0.33); -} - -:not(#fakeid) .rgthree-button.-blue { - background: #346599 !important; -} -:not(#fakeid) .rgthree-button.-blue:hover { - background: #3b77b8 !important; -} -:not(#fakeid) .rgthree-button.-blue:active { - background: #1d5086 !important; -} - -:not(#fakeid) .rgthree-button.-green { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b; -} -:not(#fakeid) .rgthree-button.-green:hover { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f; -} -:not(#fakeid) .rgthree-button.-green:active { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09; -} - -:not(#fakeid) .rgthree-button[disabled] { - box-shadow: none; - background: #666 !important; - color: #aaa; - pointer-events: none; -} -:not(#fakeid) .rgthree-button[disabled]::before, -:not(#fakeid) .rgthree-button[disabled]::after { - display: none; -} +@import '../common/css/buttons.scss'; +@import '../common/css/dialog.scss'; body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) { filter: blur(5px); diff --git a/src_web/common/css/buttons.scss b/src_web/common/css/buttons.scss new file mode 100644 index 0000000..4017eb2 --- /dev/null +++ b/src_web/common/css/buttons.scss @@ -0,0 +1,96 @@ + +:not(#fakeid) .rgthree-button { + --padding-top: 7px; + --padding-bottom: 9px; + --padding-x: 16px; + position: relative; + cursor: pointer; + border: 0; + border-radius: 0.25rem; + background: rgba(0, 0, 0, 0.5); + color: white; + font-family: system-ui, sans-serif; + font-size: calc(16rem / 16); + line-height: 1; + white-space: nowrap; + text-decoration: none; + margin: 0.25rem; + box-shadow: 0px 0px 2px rgb(0, 0, 0); + background: #212121; + transition: all 0.1s ease-in-out; + padding: var(--padding-top) var(--padding-x) var(--padding-bottom); + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &::before, + &::after { + content: ""; + display: block; + position: absolute; + border-radius: 0.25rem; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-shadow: + inset 1px 1px 0px rgba(255, 255, 255, 0.12), + inset -1px -1px 0px rgba(0, 0, 0, 0.75); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)); + mix-blend-mode: screen; + } + + &::after { + mix-blend-mode: multiply; + } + + &:hover { + background: #303030; + } + &:active { + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + background: #121212; + padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px) + calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px); + } + + &:active::before, + &:active::after { + box-shadow: + 1px 1px 0px rgba(255, 255, 255, 0.15), + inset 1px 1px 0px rgba(0, 0, 0, 0.5), + inset 1px 3px 5px rgba(0, 0, 0, 0.33); + } + + &.-blue { + background: #346599 !important; + } + &.-blue:hover { + background: #3b77b8 !important; + } + &.-blue:active { + background: #1d5086 !important; + } + + &.-green { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b; + } + &.-green:hover { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f; + } + &.-green:active { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09; + } + + &[disabled] { + box-shadow: none; + background: #666 !important; + color: #aaa; + pointer-events: none; + } + &[disabled]::before, + &[disabled]::after { + display: none; + } +} \ No newline at end of file diff --git a/src_web/common/css/dialog.scss b/src_web/common/css/dialog.scss new file mode 100644 index 0000000..a3ac488 --- /dev/null +++ b/src_web/common/css/dialog.scss @@ -0,0 +1,192 @@ + +.rgthree-dialog { + outline: 0; + border: 0; + border-radius: 6px; + background: #414141; + color: #fff; + box-shadow: + inset 1px 1px 0px rgba(255, 255, 255, 0.05), + inset -1px -1px 0px rgba(0, 0, 0, 0.5), + 2px 2px 20px rgb(0, 0, 0); + max-width: 800px; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 1rem; + padding: 0; + max-height: calc(100% - 32px); +} +.rgthree-dialog-container { + padding: 16px; +} + +.rgthree-dialog.-iconed::after { + content: ""; + font-size: 276px; + position: absolute; + right: 0px; + bottom: 0px; + opacity: 0.15; + display: block; + width: 237px; + overflow: hidden; + height: 186px; + line-height: 1; + pointer-events: none; + z-index: -1; +} +.rgthree-dialog.-iconed.-help::after { + content: "๐Ÿ›Ÿ"; +} +.rgthree-dialog.-iconed.-settings::after { + content: "โš™๏ธ"; +} + +@media (max-width: 832px) { + .rgthree-dialog { + max-width: calc(100% - 32px); + } +} + +.rgthree-dialog-container-title { + margin-bottom: 16px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; +} +.rgthree-dialog-container-title > svg:first-child { + width: 36px; + height: 36px; + margin-right: 16px; +} +.rgthree-dialog-container-title h2 { + font-size: calc(22rem / 16); + margin: 0; + font-weight: bold; +} + +.rgthree-dialog-container-title h2 small { + font-size: calc(13rem / 16); + font-weight: normal; + opacity: 0.75; +} + +.rgthree-dialog-container-content { + overflow: auto; + max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/ +} +.rgthree-dialog-container-content p { + font-size: calc(13rem / 16); + margin-top: 0; +} + +.rgthree-dialog-container-content ul li p { + margin-bottom: 4px; +} + +.rgthree-dialog-container-content ul li p + p { + margin-top: 0.5em; +} + +.rgthree-dialog-container-content ul li ul { + margin-top: 0.5em; + margin-bottom: 1em; +} + +.rgthree-dialog-container-content p code { + display: inline-block; + padding: 2px 4px; + margin: 0px 2px; + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 3px; + background: rgba(255, 255, 255, 0.1); +} + +.rgthree-dialog-container-footer { + display: flex; + align-items: center; + justify-content: center; +} + +body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) { + filter: blur(5px); +} + +.rgthree-dialog.-settings { + width: 100%; +} +.rgthree-dialog.-settings fieldset { + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 0 12px 8px; + margin-bottom: 16px; +} +.rgthree-dialog.-settings fieldset > legend { + margin-left: 8px; + padding: 0 8px; + opacity: 0.5; +} +.rgthree-dialog.-settings .formrow { + display: flex; + flex-direction: column; +} +.rgthree-dialog.-settings .formrow + .formrow { + border-top: 1px solid rgba(255, 255, 255, 0.25); +} +.rgthree-dialog.-settings .fieldrow { + display: flex; + flex-direction: row; +} +.rgthree-dialog.-settings .fieldrow > label { + flex: 1 1 auto; + user-select: none; + padding: 8px 12px 12px; +} +.rgthree-dialog.-settings .fieldrow > label span { + font-weight: bold; +} +.rgthree-dialog.-settings .fieldrow > label small { + display: block; + margin-top: 4px; + font-size: calc(11rem / 16); + opacity: 0.75; + padding-left: 16px; +} +.rgthree-dialog.-settings .fieldrow ~ .fieldrow { + font-size: 0.9rem; + border-top: 1px dotted rgba(255, 255, 255, 0.25); +} +.rgthree-dialog.-settings .fieldrow ~ .fieldrow label { + padding-left: 28px; +} +.rgthree-dialog.-settings .fieldrow:not(.-checked) ~ .fieldrow { + display: none; +} +.rgthree-dialog.-settings .fieldrow:hover { + background: rgba(255,255,255,0.1); +} +.rgthree-dialog.-settings .fieldrow ~ .fieldrow span { + font-weight: normal; +} + +.rgthree-dialog.-settings .fieldrow > .fieldrow-value { + display: flex; + align-items: center; + justify-content: end; + flex: 0 0 auto; + width: 50%; + max-width: 230px; +} +.rgthree-dialog.-settings .fieldrow.-type-boolean > .fieldrow-value { + max-width: 64px; +} +.rgthree-dialog.-settings .fieldrow.-type-number input { + width: 48px; + text-align: right; +} + +.rgthree-dialog.-settings .fieldrow input[type="checkbox"] { + width: 24px; + height: 24px; + cursor: pointer; +} diff --git a/src_web/common/css/pages_base.css b/src_web/common/css/pages_base.scss similarity index 100% rename from src_web/common/css/pages_base.css rename to src_web/common/css/pages_base.scss diff --git a/web/comfyui/rgthree.css b/web/comfyui/rgthree.css index 7c2aa7f..567c27f 100644 --- a/web/comfyui/rgthree.css +++ b/web/comfyui/rgthree.css @@ -1,465 +1,683 @@ -.rgthree-top-messages-container { - position: fixed; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - height: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: start; -} - -.rgthree-top-messages-container > div { - position: relative; - height: fit-content; - padding: 4px; - margin-top: -100px; /* re-set by JS */ - opacity: 0; - transition: all 0.33s ease-in-out; - z-index: 3; -} -.rgthree-top-messages-container > div:last-child { - z-index: 2; -} -.rgthree-top-messages-container > div:not(.-show) { - z-index: 1; -} - -.rgthree-top-messages-container > div.-show { - opacity: 1; - margin-top: 0px !important; -} - -.rgthree-top-messages-container > div.-show { - opacity: 1; - transform: translateY(0%); -} - -.rgthree-top-messages-container > div > div { - position: relative; - background: #353535; - color: #fff; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - height: fit-content; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.88); - padding: 6px 12px; - border-radius: 4px; - font-family: Arial, sans-serif; - font-size: 14px; -} -.rgthree-top-messages-container > div > div > span { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; -} -.rgthree-top-messages-container > div > div > span svg { - width: 20px; - height: auto; - margin-right: 8px; -} -.rgthree-top-messages-container > div > div > span svg.icon-checkmark { - fill: #2e9720; -} - -.rgthree-top-messages-container [type="warn"]::before { - content: "โš ๏ธ"; - display: inline-block; - flex: 0 0 auto; - font-size: 18px; - margin-right: 4px; - line-height: 1; -} - -.rgthree-top-messages-container a { - cursor: pointer; - text-decoration: underline; - color: #fc0; - margin-left: 4px; - display: inline-block; - line-height: 1; -} - -.rgthree-top-messages-container a:hover { - color: #fc0; - text-decoration: none; -} - -/* Fix node selector being crazy long b/c of array types. */ -.litegraph.litesearchbox input, -.litegraph.litesearchbox select { - max-width: 250px; -} - -/* There's no reason for this z-index to be so high. It layers on top of things it shouldn't, - (like pythongssss' image gallery, the properties panel, etc.) */ -.comfy-multiline-input { - z-index: 1 !important; -} -.comfy-multiline-input:focus { - z-index: 2 !important; -} -.litegraph .dialog { - z-index: 3 !important; /* This is set to 1, but goes under the multi-line inputs, so bump it. */ -} - -.rgthree-dialog { - outline: 0; - border: 0; - border-radius: 6px; - background: #414141; - color: #fff; - box-shadow: - inset 1px 1px 0px rgba(255, 255, 255, 0.05), - inset -1px -1px 0px rgba(0, 0, 0, 0.5), - 2px 2px 20px rgb(0, 0, 0); - max-width: 800px; - box-sizing: border-box; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-size: 1rem; - padding: 0; - max-height: calc(100% - 32px); -} -.rgthree-dialog-container { - padding: 16px; -} - -.rgthree-dialog.-iconed::after { - content: ""; - font-size: 276px; - position: absolute; - right: 0px; - bottom: 0px; - opacity: 0.15; - display: block; - width: 237px; - overflow: hidden; - height: 186px; - line-height: 1; - pointer-events: none; - z-index: -1; -} -.rgthree-dialog.-iconed.-help::after { - content: "๐Ÿ›Ÿ"; -} -.rgthree-dialog.-iconed.-settings::after { - content: "โš™๏ธ"; -} - -@media (max-width: 832px) { - .rgthree-dialog { - max-width: calc(100% - 32px); - } -} - -.rgthree-dialog-container-title { - margin-bottom: 16px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: start; -} -.rgthree-dialog-container-title > svg:first-child { - width: 36px; - height: 36px; - margin-right: 16px; -} -.rgthree-dialog-container-title h2 { - font-size: calc(22rem / 16); - margin: 0; - font-weight: bold; -} - -.rgthree-dialog-container-title h2 small { - font-size: calc(13rem / 16); - font-weight: normal; - opacity: 0.75; -} - -.rgthree-dialog-container-content { - overflow: auto; - max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/ -} -.rgthree-dialog-container-content p { - font-size: calc(13rem / 16); - margin-top: 0; -} - -.rgthree-dialog-container-content ul li p { - margin-bottom: 4px; -} - -.rgthree-dialog-container-content ul li p + p { - margin-top: 0.5em; -} - -.rgthree-dialog-container-content ul li ul { - margin-top: 0.5em; - margin-bottom: 1em; -} - -.rgthree-dialog-container-content p code { - display: inline-block; - padding: 2px 4px; - margin: 0px 2px; - border: 1px solid rgba(255, 255, 255, 0.25); - border-radius: 3px; - background: rgba(255, 255, 255, 0.1); -} - -.rgthree-dialog-container-footer { - display: flex; - align-items: center; - justify-content: center; -} - -:not(#fakeid) .rgthree-button { - --padding-top: 7px; - --padding-bottom: 9px; - --padding-x: 16px; - position: relative; - cursor: pointer; - border: 0; - border-radius: 0.25rem; - background: rgba(0, 0, 0, 0.5); - color: white; - font-family: system-ui, sans-serif; - font-size: calc(16rem / 16); - line-height: 1; - white-space: nowrap; - text-decoration: none; - margin: 0.25rem; - cursor: pointer; - box-shadow: 0px 0px 2px rgb(0, 0, 0); - background: #212121; - transition: all 0.1s ease-in-out; - padding: var(--padding-top) var(--padding-x) var(--padding-bottom); - display: inline-flex; - flex-direction: row; - align-items: center; - justify-content: center; -} - -:not(#fakeid) .rgthree-button::before, -:not(#fakeid) .rgthree-button::after { - content: ""; - display: block; - position: absolute; - border-radius: 0.25rem; - left: 0; - top: 0; - width: 100%; - height: 100%; - box-shadow: - inset 1px 1px 0px rgba(255, 255, 255, 0.12), - inset -1px -1px 0px rgba(0, 0, 0, 0.75); - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)); - mix-blend-mode: screen; -} -:not(#fakeid) .rgthree-button::after { - mix-blend-mode: multiply; -} - -:not(#fakeid) .rgthree-button:hover { - background: #303030; -} -:not(#fakeid) .rgthree-button:active { - box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); - background: #121212; - padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px) - calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px); -} - -:not(#fakeid) .rgthree-button:active::before, -:not(#fakeid) .rgthree-button:active::after { - box-shadow: - 1px 1px 0px rgba(255, 255, 255, 0.15), - inset 1px 1px 0px rgba(0, 0, 0, 0.5), - inset 1px 3px 5px rgba(0, 0, 0, 0.33); -} - -:not(#fakeid) .rgthree-button.-blue { - background: #346599 !important; -} -:not(#fakeid) .rgthree-button.-blue:hover { - background: #3b77b8 !important; -} -:not(#fakeid) .rgthree-button.-blue:active { - background: #1d5086 !important; -} - -:not(#fakeid) .rgthree-button.-green { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b; -} -:not(#fakeid) .rgthree-button.-green:hover { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f; -} -:not(#fakeid) .rgthree-button.-green:active { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09; -} - -:not(#fakeid) .rgthree-button[disabled] { - box-shadow: none; - background: #666 !important; - color: #aaa; - pointer-events: none; -} -:not(#fakeid) .rgthree-button[disabled]::before, -:not(#fakeid) .rgthree-button[disabled]::after { - display: none; -} - -body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) { - filter: blur(5px); -} - -.rgthree-dialog.-settings { - width: 100%; -} -.rgthree-dialog.-settings fieldset { - border: 1px solid rgba(255, 255, 255, 0.25); - padding: 0 12px 8px; - margin-bottom: 16px; -} -.rgthree-dialog.-settings fieldset > legend { - margin-left: 8px; - padding: 0 8px; - opacity: 0.5; -} -.rgthree-dialog.-settings .formrow { - display: flex; - flex-direction: column; -} -.rgthree-dialog.-settings .formrow + .formrow { - border-top: 1px solid rgba(255, 255, 255, 0.25); -} -.rgthree-dialog.-settings .fieldrow { - display: flex; - flex-direction: row; -} -.rgthree-dialog.-settings .fieldrow > label { - flex: 1 1 auto; - user-select: none; - padding: 8px 12px 12px; -} -.rgthree-dialog.-settings .fieldrow > label span { - font-weight: bold; -} -.rgthree-dialog.-settings .fieldrow > label small { - display: block; - margin-top: 4px; - font-size: calc(11rem / 16); - opacity: 0.75; - padding-left: 16px; -} -.rgthree-dialog.-settings .fieldrow ~ .fieldrow { - font-size: 0.9rem; - border-top: 1px dotted rgba(255, 255, 255, 0.25); -} -.rgthree-dialog.-settings .fieldrow ~ .fieldrow label { - padding-left: 28px; -} -.rgthree-dialog.-settings .fieldrow:not(.-checked) ~ .fieldrow { - display: none; -} -.rgthree-dialog.-settings .fieldrow:hover { - background: rgba(255,255,255,0.1); -} -.rgthree-dialog.-settings .fieldrow ~ .fieldrow span { - font-weight: normal; -} - -.rgthree-dialog.-settings .fieldrow > .fieldrow-value { - display: flex; - align-items: center; - justify-content: end; - flex: 0 0 auto; - width: 50%; - max-width: 230px; -} -.rgthree-dialog.-settings .fieldrow.-type-boolean > .fieldrow-value { - max-width: 64px; -} -.rgthree-dialog.-settings .fieldrow.-type-number input { - width: 48px; - text-align: right; -} - -.rgthree-dialog.-settings .fieldrow input[type="checkbox"] { - width: 24px; - height: 24px; - cursor: pointer; -} - -.rgthree-comfyui-settings-row div { - display: flex; - flex-direction: row; - align-items: center; - justify-content: end; -} -.rgthree-comfyui-settings-row div svg { - width: 36px; - height: 36px; - margin-right: 16px; -} - - -.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy, -.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item { - display: flex; - flex-direction: row; - align-items: center; - justify-content: start; -} - -.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy svg, -.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg { - fill: currentColor; - width: auto; - height: 16px; - margin-right: 6px; -} -.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg.github-star { - fill: rgb(227, 179, 65); -} - -.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy, -.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-label { - color: #dde; - background-color: #212121 !important; - margin: 0; - padding: 2px; - cursor: default; - opacity: 1; - padding: 4px; - font-weight: bold; -} -.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy { - font-size: 1.1em; - color: #fff; - background-color: #090909 !important; - justify-content: center; - padding: 4px 8px; -} - -rgthree-progress-bar { - display: block; - position: fixed; - z-index: 999; - top: 0; - left: 0; - height: 14px; - 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); -} +@charset "UTF-8"; +.rgthree-top-messages-container { + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: start; +} + +.rgthree-top-messages-container > div { + position: relative; + height: fit-content; + padding: 4px; + margin-top: -100px; /* re-set by JS */ + opacity: 0; + transition: all 0.33s ease-in-out; + z-index: 3; +} + +.rgthree-top-messages-container > div:last-child { + z-index: 2; +} + +.rgthree-top-messages-container > div:not(.-show) { + z-index: 1; +} + +.rgthree-top-messages-container > div.-show { + opacity: 1; + margin-top: 0px !important; +} + +.rgthree-top-messages-container > div.-show { + opacity: 1; + transform: translateY(0%); +} + +.rgthree-top-messages-container > div > div { + position: relative; + background: #353535; + color: #fff; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: fit-content; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.88); + padding: 6px 12px; + border-radius: 4px; + font-family: Arial, sans-serif; + font-size: 14px; +} + +.rgthree-top-messages-container > div > div > span { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.rgthree-top-messages-container > div > div > span svg { + width: 20px; + height: auto; + margin-right: 8px; +} + +.rgthree-top-messages-container > div > div > span svg.icon-checkmark { + fill: #2e9720; +} + +.rgthree-top-messages-container [type=warn]::before { + content: "โš ๏ธ"; + display: inline-block; + flex: 0 0 auto; + font-size: 18px; + margin-right: 4px; + line-height: 1; +} + +.rgthree-top-messages-container a { + cursor: pointer; + text-decoration: underline; + color: #fc0; + margin-left: 4px; + display: inline-block; + line-height: 1; +} + +.rgthree-top-messages-container a:hover { + color: #fc0; + text-decoration: none; +} + +/* Fix node selector being crazy long b/c of array types. */ +.litegraph.litesearchbox input, +.litegraph.litesearchbox select { + max-width: 250px; +} + +/* There's no reason for this z-index to be so high. It layers on top of things it shouldn't, + (like pythongssss' image gallery, the properties panel, etc.) */ +.comfy-multiline-input { + z-index: 1 !important; +} + +.comfy-multiline-input:focus { + z-index: 2 !important; +} + +.litegraph .dialog { + z-index: 3 !important; /* This is set to 1, but goes under the multi-line inputs, so bump it. */ +} + +.rgthree-dialog { + outline: 0; + border: 0; + border-radius: 6px; + background: #414141; + color: #fff; + box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.05), inset -1px -1px 0px rgba(0, 0, 0, 0.5), 2px 2px 20px rgb(0, 0, 0); + max-width: 800px; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 1rem; + padding: 0; + max-height: calc(100% - 32px); +} + +.rgthree-dialog-container { + padding: 16px; +} + +.rgthree-dialog.-iconed::after { + content: ""; + font-size: 276px; + position: absolute; + right: 0px; + bottom: 0px; + opacity: 0.15; + display: block; + width: 237px; + overflow: hidden; + height: 186px; + line-height: 1; + pointer-events: none; + z-index: -1; +} + +.rgthree-dialog.-iconed.-help::after { + content: "๐Ÿ›Ÿ"; +} + +.rgthree-dialog.-iconed.-settings::after { + content: "โš™๏ธ"; +} + +@media (max-width: 832px) { + .rgthree-dialog { + max-width: calc(100% - 32px); + } +} +.rgthree-dialog-container-title { + margin-bottom: 16px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; +} + +.rgthree-dialog-container-title > svg:first-child { + width: 36px; + height: 36px; + margin-right: 16px; +} + +.rgthree-dialog-container-title h2 { + font-size: 1.375rem; + margin: 0; + font-weight: bold; +} + +.rgthree-dialog-container-title h2 small { + font-size: 0.8125rem; + font-weight: normal; + opacity: 0.75; +} + +.rgthree-dialog-container-content { + overflow: auto; + max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/ +} + +.rgthree-dialog-container-content p { + font-size: 0.8125rem; + margin-top: 0; +} + +.rgthree-dialog-container-content ul li p { + margin-bottom: 4px; +} + +.rgthree-dialog-container-content ul li p + p { + margin-top: 0.5em; +} + +.rgthree-dialog-container-content ul li ul { + margin-top: 0.5em; + margin-bottom: 1em; +} + +.rgthree-dialog-container-content p code { + display: inline-block; + padding: 2px 4px; + margin: 0px 2px; + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 3px; + background: rgba(255, 255, 255, 0.1); +} + +.rgthree-dialog-container-footer { + display: flex; + align-items: center; + justify-content: center; +} + +:not(#fakeid) .rgthree-button { + --padding-top: 7px; + --padding-bottom: 9px; + --padding-x: 16px; + position: relative; + cursor: pointer; + border: 0; + border-radius: 0.25rem; + background: rgba(0, 0, 0, 0.5); + color: white; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1; + white-space: nowrap; + text-decoration: none; + margin: 0.25rem; + box-shadow: 0px 0px 2px rgb(0, 0, 0); + background: #212121; + transition: all 0.1s ease-in-out; + padding: var(--padding-top) var(--padding-x) var(--padding-bottom); + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +:not(#fakeid) .rgthree-button::before, :not(#fakeid) .rgthree-button::after { + content: ""; + display: block; + position: absolute; + border-radius: 0.25rem; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.12), inset -1px -1px 0px rgba(0, 0, 0, 0.75); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)); + mix-blend-mode: screen; +} +:not(#fakeid) .rgthree-button::after { + mix-blend-mode: multiply; +} +:not(#fakeid) .rgthree-button:hover { + background: #303030; +} +:not(#fakeid) .rgthree-button:active { + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + background: #121212; + padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px) calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px); +} +:not(#fakeid) .rgthree-button:active::before, :not(#fakeid) .rgthree-button:active::after { + box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), inset 1px 1px 0px rgba(0, 0, 0, 0.5), inset 1px 3px 5px rgba(0, 0, 0, 0.33); +} +:not(#fakeid) .rgthree-button.-blue { + background: #346599 !important; +} +:not(#fakeid) .rgthree-button.-blue:hover { + background: #3b77b8 !important; +} +:not(#fakeid) .rgthree-button.-blue:active { + background: #1d5086 !important; +} +:not(#fakeid) .rgthree-button.-green { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b; +} +:not(#fakeid) .rgthree-button.-green:hover { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f; +} +:not(#fakeid) .rgthree-button.-green:active { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09; +} +:not(#fakeid) .rgthree-button[disabled] { + box-shadow: none; + background: #666 !important; + color: #aaa; + pointer-events: none; +} +:not(#fakeid) .rgthree-button[disabled]::before, :not(#fakeid) .rgthree-button[disabled]::after { + display: none; +} + +.rgthree-dialog { + outline: 0; + border: 0; + border-radius: 6px; + background: #414141; + color: #fff; + box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.05), inset -1px -1px 0px rgba(0, 0, 0, 0.5), 2px 2px 20px rgb(0, 0, 0); + max-width: 800px; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 1rem; + padding: 0; + max-height: calc(100% - 32px); +} + +.rgthree-dialog-container { + padding: 16px; +} + +.rgthree-dialog.-iconed::after { + content: ""; + font-size: 276px; + position: absolute; + right: 0px; + bottom: 0px; + opacity: 0.15; + display: block; + width: 237px; + overflow: hidden; + height: 186px; + line-height: 1; + pointer-events: none; + z-index: -1; +} + +.rgthree-dialog.-iconed.-help::after { + content: "๐Ÿ›Ÿ"; +} + +.rgthree-dialog.-iconed.-settings::after { + content: "โš™๏ธ"; +} + +@media (max-width: 832px) { + .rgthree-dialog { + max-width: calc(100% - 32px); + } +} +.rgthree-dialog-container-title { + margin-bottom: 16px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; +} + +.rgthree-dialog-container-title > svg:first-child { + width: 36px; + height: 36px; + margin-right: 16px; +} + +.rgthree-dialog-container-title h2 { + font-size: 1.375rem; + margin: 0; + font-weight: bold; +} + +.rgthree-dialog-container-title h2 small { + font-size: 0.8125rem; + font-weight: normal; + opacity: 0.75; +} + +.rgthree-dialog-container-content { + overflow: auto; + max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/ +} + +.rgthree-dialog-container-content p { + font-size: 0.8125rem; + margin-top: 0; +} + +.rgthree-dialog-container-content ul li p { + margin-bottom: 4px; +} + +.rgthree-dialog-container-content ul li p + p { + margin-top: 0.5em; +} + +.rgthree-dialog-container-content ul li ul { + margin-top: 0.5em; + margin-bottom: 1em; +} + +.rgthree-dialog-container-content p code { + display: inline-block; + padding: 2px 4px; + margin: 0px 2px; + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 3px; + background: rgba(255, 255, 255, 0.1); +} + +.rgthree-dialog-container-footer { + display: flex; + align-items: center; + justify-content: center; +} + +body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) { + filter: blur(5px); +} + +.rgthree-dialog.-settings { + width: 100%; +} + +.rgthree-dialog.-settings fieldset { + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 0 12px 8px; + margin-bottom: 16px; +} + +.rgthree-dialog.-settings fieldset > legend { + margin-left: 8px; + padding: 0 8px; + opacity: 0.5; +} + +.rgthree-dialog.-settings .formrow { + display: flex; + flex-direction: column; +} + +.rgthree-dialog.-settings .formrow + .formrow { + border-top: 1px solid rgba(255, 255, 255, 0.25); +} + +.rgthree-dialog.-settings .fieldrow { + display: flex; + flex-direction: row; +} + +.rgthree-dialog.-settings .fieldrow > label { + flex: 1 1 auto; + user-select: none; + padding: 8px 12px 12px; +} + +.rgthree-dialog.-settings .fieldrow > label span { + font-weight: bold; +} + +.rgthree-dialog.-settings .fieldrow > label small { + display: block; + margin-top: 4px; + font-size: 0.6875rem; + opacity: 0.75; + padding-left: 16px; +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow { + font-size: 0.9rem; + border-top: 1px dotted rgba(255, 255, 255, 0.25); +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow label { + padding-left: 28px; +} + +.rgthree-dialog.-settings .fieldrow:not(.-checked) ~ .fieldrow { + display: none; +} + +.rgthree-dialog.-settings .fieldrow:hover { + background: rgba(255, 255, 255, 0.1); +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow span { + font-weight: normal; +} + +.rgthree-dialog.-settings .fieldrow > .fieldrow-value { + display: flex; + align-items: center; + justify-content: end; + flex: 0 0 auto; + width: 50%; + max-width: 230px; +} + +.rgthree-dialog.-settings .fieldrow.-type-boolean > .fieldrow-value { + max-width: 64px; +} + +.rgthree-dialog.-settings .fieldrow.-type-number input { + width: 48px; + text-align: right; +} + +.rgthree-dialog.-settings .fieldrow input[type=checkbox] { + width: 24px; + height: 24px; + cursor: pointer; +} + +body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) { + filter: blur(5px); +} + +.rgthree-dialog.-settings { + width: 100%; +} + +.rgthree-dialog.-settings fieldset { + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 0 12px 8px; + margin-bottom: 16px; +} + +.rgthree-dialog.-settings fieldset > legend { + margin-left: 8px; + padding: 0 8px; + opacity: 0.5; +} + +.rgthree-dialog.-settings .formrow { + display: flex; + flex-direction: column; +} + +.rgthree-dialog.-settings .formrow + .formrow { + border-top: 1px solid rgba(255, 255, 255, 0.25); +} + +.rgthree-dialog.-settings .fieldrow { + display: flex; + flex-direction: row; +} + +.rgthree-dialog.-settings .fieldrow > label { + flex: 1 1 auto; + user-select: none; + padding: 8px 12px 12px; +} + +.rgthree-dialog.-settings .fieldrow > label span { + font-weight: bold; +} + +.rgthree-dialog.-settings .fieldrow > label small { + display: block; + margin-top: 4px; + font-size: 0.6875rem; + opacity: 0.75; + padding-left: 16px; +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow { + font-size: 0.9rem; + border-top: 1px dotted rgba(255, 255, 255, 0.25); +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow label { + padding-left: 28px; +} + +.rgthree-dialog.-settings .fieldrow:not(.-checked) ~ .fieldrow { + display: none; +} + +.rgthree-dialog.-settings .fieldrow:hover { + background: rgba(255, 255, 255, 0.1); +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow span { + font-weight: normal; +} + +.rgthree-dialog.-settings .fieldrow > .fieldrow-value { + display: flex; + align-items: center; + justify-content: end; + flex: 0 0 auto; + width: 50%; + max-width: 230px; +} + +.rgthree-dialog.-settings .fieldrow.-type-boolean > .fieldrow-value { + max-width: 64px; +} + +.rgthree-dialog.-settings .fieldrow.-type-number input { + width: 48px; + text-align: right; +} + +.rgthree-dialog.-settings .fieldrow input[type=checkbox] { + width: 24px; + height: 24px; + cursor: pointer; +} + +.rgthree-comfyui-settings-row div { + display: flex; + flex-direction: row; + align-items: center; + justify-content: end; +} + +.rgthree-comfyui-settings-row div svg { + width: 36px; + height: 36px; + margin-right: 16px; +} + +.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy, +.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; +} + +.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy svg, +.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg { + fill: currentColor; + width: auto; + height: 16px; + margin-right: 6px; +} + +.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-item svg.github-star { + fill: rgb(227, 179, 65); +} + +.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy, +.litegraph.litecontextmenu .litemenu-entry.rgthree-contextmenu-label { + color: #dde; + background-color: #212121 !important; + margin: 0; + padding: 2px; + cursor: default; + opacity: 1; + padding: 4px; + font-weight: bold; +} + +.litegraph.litecontextmenu .litemenu-title .rgthree-contextmenu-title-rgthree-comfy { + font-size: 1.1em; + color: #fff; + background-color: #090909 !important; + justify-content: center; + padding: 4px 8px; +} + +rgthree-progress-bar { + display: block; + position: fixed; + z-index: 999; + top: 0; + left: 0; + height: 14px; + 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); +} diff --git a/web/common/css/buttons.css b/web/common/css/buttons.css new file mode 100644 index 0000000..6b44952 --- /dev/null +++ b/web/common/css/buttons.css @@ -0,0 +1,79 @@ +:not(#fakeid) .rgthree-button { + --padding-top: 7px; + --padding-bottom: 9px; + --padding-x: 16px; + position: relative; + cursor: pointer; + border: 0; + border-radius: 0.25rem; + background: rgba(0, 0, 0, 0.5); + color: white; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1; + white-space: nowrap; + text-decoration: none; + margin: 0.25rem; + box-shadow: 0px 0px 2px rgb(0, 0, 0); + background: #212121; + transition: all 0.1s ease-in-out; + padding: var(--padding-top) var(--padding-x) var(--padding-bottom); + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +:not(#fakeid) .rgthree-button::before, :not(#fakeid) .rgthree-button::after { + content: ""; + display: block; + position: absolute; + border-radius: 0.25rem; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.12), inset -1px -1px 0px rgba(0, 0, 0, 0.75); + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)); + mix-blend-mode: screen; +} +:not(#fakeid) .rgthree-button::after { + mix-blend-mode: multiply; +} +:not(#fakeid) .rgthree-button:hover { + background: #303030; +} +:not(#fakeid) .rgthree-button:active { + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); + background: #121212; + padding: calc(var(--padding-top) + 1px) calc(var(--padding-x) - 1px) calc(var(--padding-bottom) - 1px) calc(var(--padding-x) + 1px); +} +:not(#fakeid) .rgthree-button:active::before, :not(#fakeid) .rgthree-button:active::after { + box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15), inset 1px 1px 0px rgba(0, 0, 0, 0.5), inset 1px 3px 5px rgba(0, 0, 0, 0.33); +} +:not(#fakeid) .rgthree-button.-blue { + background: #346599 !important; +} +:not(#fakeid) .rgthree-button.-blue:hover { + background: #3b77b8 !important; +} +:not(#fakeid) .rgthree-button.-blue:active { + background: #1d5086 !important; +} +:not(#fakeid) .rgthree-button.-green { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #14580b; +} +:not(#fakeid) .rgthree-button.-green:hover { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.15)), #1a6d0f; +} +:not(#fakeid) .rgthree-button.-green:active { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.06)), #0f3f09; +} +:not(#fakeid) .rgthree-button[disabled] { + box-shadow: none; + background: #666 !important; + color: #aaa; + pointer-events: none; +} +:not(#fakeid) .rgthree-button[disabled]::before, :not(#fakeid) .rgthree-button[disabled]::after { + display: none; +} diff --git a/web/common/css/dialog.css b/web/common/css/dialog.css new file mode 100644 index 0000000..76e20c6 --- /dev/null +++ b/web/common/css/dialog.css @@ -0,0 +1,209 @@ +@charset "UTF-8"; +.rgthree-dialog { + outline: 0; + border: 0; + border-radius: 6px; + background: #414141; + color: #fff; + box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.05), inset -1px -1px 0px rgba(0, 0, 0, 0.5), 2px 2px 20px rgb(0, 0, 0); + max-width: 800px; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-size: 1rem; + padding: 0; + max-height: calc(100% - 32px); +} + +.rgthree-dialog-container { + padding: 16px; +} + +.rgthree-dialog.-iconed::after { + content: ""; + font-size: 276px; + position: absolute; + right: 0px; + bottom: 0px; + opacity: 0.15; + display: block; + width: 237px; + overflow: hidden; + height: 186px; + line-height: 1; + pointer-events: none; + z-index: -1; +} + +.rgthree-dialog.-iconed.-help::after { + content: "๐Ÿ›Ÿ"; +} + +.rgthree-dialog.-iconed.-settings::after { + content: "โš™๏ธ"; +} + +@media (max-width: 832px) { + .rgthree-dialog { + max-width: calc(100% - 32px); + } +} +.rgthree-dialog-container-title { + margin-bottom: 16px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; +} + +.rgthree-dialog-container-title > svg:first-child { + width: 36px; + height: 36px; + margin-right: 16px; +} + +.rgthree-dialog-container-title h2 { + font-size: 1.375rem; + margin: 0; + font-weight: bold; +} + +.rgthree-dialog-container-title h2 small { + font-size: 0.8125rem; + font-weight: normal; + opacity: 0.75; +} + +.rgthree-dialog-container-content { + overflow: auto; + max-height: calc(100vh - 200px); /* Arbitrary height to copensate for margin, title, and footer.*/ +} + +.rgthree-dialog-container-content p { + font-size: 0.8125rem; + margin-top: 0; +} + +.rgthree-dialog-container-content ul li p { + margin-bottom: 4px; +} + +.rgthree-dialog-container-content ul li p + p { + margin-top: 0.5em; +} + +.rgthree-dialog-container-content ul li ul { + margin-top: 0.5em; + margin-bottom: 1em; +} + +.rgthree-dialog-container-content p code { + display: inline-block; + padding: 2px 4px; + margin: 0px 2px; + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 3px; + background: rgba(255, 255, 255, 0.1); +} + +.rgthree-dialog-container-footer { + display: flex; + align-items: center; + justify-content: center; +} + +body.rgthree-dialog-open > *:not(.rgthree-dialog):not(.rgthree-top-messages-container) { + filter: blur(5px); +} + +.rgthree-dialog.-settings { + width: 100%; +} + +.rgthree-dialog.-settings fieldset { + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 0 12px 8px; + margin-bottom: 16px; +} + +.rgthree-dialog.-settings fieldset > legend { + margin-left: 8px; + padding: 0 8px; + opacity: 0.5; +} + +.rgthree-dialog.-settings .formrow { + display: flex; + flex-direction: column; +} + +.rgthree-dialog.-settings .formrow + .formrow { + border-top: 1px solid rgba(255, 255, 255, 0.25); +} + +.rgthree-dialog.-settings .fieldrow { + display: flex; + flex-direction: row; +} + +.rgthree-dialog.-settings .fieldrow > label { + flex: 1 1 auto; + user-select: none; + padding: 8px 12px 12px; +} + +.rgthree-dialog.-settings .fieldrow > label span { + font-weight: bold; +} + +.rgthree-dialog.-settings .fieldrow > label small { + display: block; + margin-top: 4px; + font-size: 0.6875rem; + opacity: 0.75; + padding-left: 16px; +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow { + font-size: 0.9rem; + border-top: 1px dotted rgba(255, 255, 255, 0.25); +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow label { + padding-left: 28px; +} + +.rgthree-dialog.-settings .fieldrow:not(.-checked) ~ .fieldrow { + display: none; +} + +.rgthree-dialog.-settings .fieldrow:hover { + background: rgba(255, 255, 255, 0.1); +} + +.rgthree-dialog.-settings .fieldrow ~ .fieldrow span { + font-weight: normal; +} + +.rgthree-dialog.-settings .fieldrow > .fieldrow-value { + display: flex; + align-items: center; + justify-content: end; + flex: 0 0 auto; + width: 50%; + max-width: 230px; +} + +.rgthree-dialog.-settings .fieldrow.-type-boolean > .fieldrow-value { + max-width: 64px; +} + +.rgthree-dialog.-settings .fieldrow.-type-number input { + width: 48px; + text-align: right; +} + +.rgthree-dialog.-settings .fieldrow input[type=checkbox] { + width: 24px; + height: 24px; + cursor: pointer; +} diff --git a/web/common/css/pages_base.css b/web/common/css/pages_base.css index 09f292e..4923323 100644 --- a/web/common/css/pages_base.css +++ b/web/common/css/pages_base.css @@ -1,69 +1,66 @@ - -html, body { - -} -html { - font-size: 100%; - overflow-y: scroll; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - box-sizing: border-box; -} -*, *:before, *:after { - box-sizing: inherit -} - -:root { - --header-height: 56px; - --progress-height: 12px; -} - -button { - all: unset; -} - -.-bevel { - position: relative; -} -.-bevel::before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - border: 1px solid red; - border-color: rgba(255,255,255,0.15) rgba(255,255,255,0.15) rgba(0,0,0,0.5) rgba(0,0,0,0.5); - z-index: 5; - pointer-events: none; -} - - -body { - background: #202020; - font-family: Arial, sans-serif; - font-size: calc(16 * 0.0625rem); - font-weight: 400; - margin: 0; - padding-top: calc(var(--header-height) + var(--progress-height)); - color: #ffffff; - display: flex; - flex-direction: column; - align-items: center; - justify-content: start; -} - -.app-header { - height: var( --header-height); - padding: 0; - position: fixed; - z-index: 99; - top: 0; - left: 0; - width: 100%; - background: #353535; - display: flex; - flex-direction: row; - align-items: center; - justify-content: start; -} +html { + font-size: 100%; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +:root { + --header-height: 56px; + --progress-height: 12px; +} + +button { + all: unset; +} + +.-bevel { + position: relative; +} + +.-bevel::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: 1px solid red; + border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5); + z-index: 5; + pointer-events: none; +} + +body { + background: #202020; + font-family: Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + margin: 0; + padding-top: calc(var(--header-height) + var(--progress-height)); + color: #ffffff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: start; +} + +.app-header { + height: var(--header-height); + padding: 0; + position: fixed; + z-index: 99; + top: 0; + left: 0; + width: 100%; + background: #353535; + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; +} diff --git a/web/common/progress_bar.js b/web/common/progress_bar.js index dd37bc8..5bd9b5e 100644 --- a/web/common/progress_bar.js +++ b/web/common/progress_bar.js @@ -234,71 +234,71 @@ 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; - } - :host * { - box-sizing: inherit; - } - - :host > div.bar { - background: rgba(0, 128, 0); - position: absolute; - left: 0; - top: 0; - width: 0%; - height: 50%; - z-index: 1; - transition: width 50ms ease-in-out; - } - :host > div.bar + div.bar { - top: 50%; - height: 50%; - z-index: 2; - } - :host > div.bar.-error { - background: rgba(128, 0, 0); - } - - :host > .overlay { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 5; - background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(0,0,0,0.25)); - mix-blend-mode: overlay; - } - - :host > span { - position: relative; - z-index: 4; - text-align: left; - font-size: inherit; - height: 100%; - font-family: sans-serif; - text-shadow: 1px 1px 0px #000; - display: flex; - flex-direction: row; - padding: 0 6px; - align-items: center; - justify-content: start; - color: #fff; - text-shadow: black 0px 0px 2px; - } - - :host > div.bar[style*="width: 0%"]:first-child, - :host > div.bar[style*="width:0%"]:first-child { - height: 0%; - } - :host > div.bar[style*="width: 0%"]:first-child + div, - :host > div.bar[style*="width:0%"]:first-child + div { - bottom: 0%; - } + sheet.replaceSync(` + :host { + position: relative; + overflow: hidden; + box-sizing: border-box; + } + :host * { + box-sizing: inherit; + } + + :host > div.bar { + background: rgba(0, 128, 0); + position: absolute; + left: 0; + top: 0; + width: 0%; + height: 50%; + z-index: 1; + transition: width 50ms ease-in-out; + } + :host > div.bar + div.bar { + top: 50%; + height: 50%; + z-index: 2; + } + :host > div.bar.-error { + background: rgba(128, 0, 0); + } + + :host > .overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 5; + background: linear-gradient(to bottom, rgba(255,255,255,0.25), rgba(0,0,0,0.25)); + mix-blend-mode: overlay; + } + + :host > span { + position: relative; + z-index: 4; + text-align: left; + font-size: inherit; + height: 100%; + font-family: sans-serif; + text-shadow: 1px 1px 0px #000; + display: flex; + flex-direction: row; + padding: 0 6px; + align-items: center; + justify-content: start; + color: #fff; + text-shadow: black 0px 0px 2px; + } + + :host > div.bar[style*="width: 0%"]:first-child, + :host > div.bar[style*="width:0%"]:first-child { + height: 0%; + } + :host > div.bar[style*="width: 0%"]:first-child + div, + :host > div.bar[style*="width:0%"]:first-child + div { + bottom: 0%; + } `); this.shadow.adoptedStyleSheets = [sheet]; const overlayEl = document.createElement("div");