Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Alex Furer
|
9fa5d1b3d9 | ||
|
Alex Furer
|
4b8d36c51c | ||
|
Alex Furer
|
106d1835fa |
+18
-1
@@ -1,2 +1,19 @@
|
|||||||
# Auto detect text files and perform LF normalization
|
# Set default behavior to automatically normalize line endings
|
||||||
* text=auto
|
* text=auto
|
||||||
|
|
||||||
|
# Explicitly declare text files you want to always be normalized and converted
|
||||||
|
*.md text
|
||||||
|
*.py text
|
||||||
|
*.js text
|
||||||
|
*.css text
|
||||||
|
*.html text
|
||||||
|
|
||||||
|
# Declare files that will always have CRLF line endings on checkout
|
||||||
|
*.bat text eol=crlf
|
||||||
|
|
||||||
|
# Denote all files that are truly binary and should not be modified
|
||||||
|
*.png binary
|
||||||
|
*.jpg binary
|
||||||
|
*.gif binary
|
||||||
|
*.ico binary
|
||||||
|
*.zip binary
|
||||||
+4
-1
@@ -84,4 +84,7 @@ yarn-debug.log*
|
|||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
# AF specific
|
# AF specific
|
||||||
Status.txt
|
Status.txt
|
||||||
|
*.psd
|
||||||
|
*.docx
|
||||||
|
helpers/
|
||||||
+171
-184
@@ -1,184 +1,171 @@
|
|||||||
# ****** ComfyUI-AF - Enhanced HTML-NOTE ******
|
# ****** ComfyUI-AF - Enhanced HTML-NOTE ******
|
||||||
#
|
#
|
||||||
# Creator: Alex Furer - Co-Creator(s): Claude AI & DeepSeek
|
# Creator: Alex Furer - Co-Creator(s): Claude AI & DeepSeek
|
||||||
#
|
#
|
||||||
# Description:
|
# Description: A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
|
||||||
# A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
|
#
|
||||||
#
|
# Repo and ReadMe URL: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note
|
||||||
# Repo and ReadMe URL: https://github.com/alFrame/ComfyUI-AF-Find-Nodes
|
#
|
||||||
#
|
# Issues praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note/issues
|
||||||
# Praise, comment, bugs, improvements: https://github.com/alFrame/ComfyUI-AF-Find-Nodes/issues
|
#
|
||||||
#
|
# LICENSE: MIT License
|
||||||
# LICENSE: MIT License
|
#
|
||||||
#
|
# Usage: https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note
|
||||||
# v0.0.07
|
#
|
||||||
#
|
# Feature Requests / Wet Dreams
|
||||||
# Usage:
|
# -
|
||||||
# Read Me on Github
|
|
||||||
#
|
class AF_Enhanced_HTML_Note:
|
||||||
# Changelog:
|
"""
|
||||||
# "v0.0.07 - Comsetics, making tis a version",
|
AF Enhanced HTML-Note node with colored sections and rich formatting
|
||||||
# "v0.0.06 - Removed all Java Script functionality for links and updated README",
|
"""
|
||||||
# "v0.0.05 - Made edit mode less intrusive and keep ComfyUI canvas navigation (panning, zooming [space bar] and [H] now work to pan around the canvas)",
|
|
||||||
# "v0.0.04 - Fixed node selection and resizing by removing OUTPUT_NODE and using proper widget approach. Double clicking is now used to edit the html Mouse interaction is now persistent to ComfyUI behavior. Except middle mouse button for panning.",
|
@classmethod
|
||||||
# "v0.0.03 - Fixed node resizing issues on save/reload. Improved selection and edit mode behavior to match ComfyUI core notes. Fixed middle mouse button panning over the node. Improved HTML indentation in default content",
|
def INPUT_TYPES(cls):
|
||||||
# "v0.0.02 - Fixed naming consistency to HTML_Note Implemented single-window toggle behavior",
|
return {
|
||||||
# "v0.0.01 - Initial Version"
|
"required": {
|
||||||
#
|
"html_content": ("STRING", {
|
||||||
# Feature Requests / Wet Dreams
|
"multiline": True,
|
||||||
# -
|
"default": """<h2>Positive Prompt Section</h2>
|
||||||
|
<div class="af-section af-positive">
|
||||||
class AF_Enhanced_HTML_Note:
|
<h2>🟢 Positive Prompts</h2>
|
||||||
"""
|
<p><strong>masterpiece, best quality, highly detailed</strong></p>
|
||||||
AF Enhanced HTML-Note node with colored sections and rich formatting
|
<ul>
|
||||||
"""
|
<li>Professional lighting</li>
|
||||||
|
<li>Sharp focus</li>
|
||||||
@classmethod
|
<li>8K resolution</li>
|
||||||
def INPUT_TYPES(cls):
|
</ul>
|
||||||
return {
|
</div>
|
||||||
"required": {
|
|
||||||
"html_content": ("STRING", {
|
|
||||||
"multiline": True,
|
<h2>Negative Prompt Section</h2>
|
||||||
"default": """<h2>Positive Prompt Section</h2>
|
<div class="af-section af-negative">
|
||||||
<div class="af-section af-positive">
|
<h2>🔴 Negative Prompts</h2>
|
||||||
<h2>🟢 Positive Prompts</h2>
|
<p><em>low quality, blurry, distorted</em></p>
|
||||||
<p><strong>masterpiece, best quality, highly detailed</strong></p>
|
<p><code>nsfw, watermark, signature, bad anatomy</code></p>
|
||||||
<ul>
|
</div>
|
||||||
<li>Professional lighting</li>
|
|
||||||
<li>Sharp focus</li>
|
|
||||||
<li>8K resolution</li>
|
<h2>Neutral Prompt Section</h2>
|
||||||
</ul>
|
<div class="af-section af-neutral">
|
||||||
</div>
|
<h3>📝 Notes</h3>
|
||||||
|
<p>General notes and information...</p>
|
||||||
|
<ul>
|
||||||
<h2>Negative Prompt Section</h2>
|
<li>Item 1</li>
|
||||||
<div class="af-section af-negative">
|
<li>Item 2</li>
|
||||||
<h2>🔴 Negative Prompts</h2>
|
<li>Item 3</li>
|
||||||
<p><em>low quality, blurry, distorted</em></p>
|
</ul>
|
||||||
<p><code>nsfw, watermark, signature, bad anatomy</code></p>
|
</div>
|
||||||
</div>
|
|
||||||
|
<h2>Info Section</h2>
|
||||||
|
<div class="af-section af-info">
|
||||||
<h2>Neutral Prompt Section</h2>
|
<h3>ℹ️ Information</h3>
|
||||||
<div class="af-section af-neutral">
|
<p>Using: <strong>SDXL 1.0</strong></p>
|
||||||
<h3>📝 Notes</h3>
|
<p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
|
||||||
<p>General notes and information...</p>
|
</div>
|
||||||
<ul>
|
|
||||||
<li>Item 1</li>
|
<h2>Warning Section</h2>
|
||||||
<li>Item 2</li>
|
<div class="af-section af-warning">
|
||||||
<li>Item 3</li>
|
<h3>⚠️ Warning</h3>
|
||||||
</ul>
|
<p>This workflow requires:</p>
|
||||||
</div>
|
<ol>
|
||||||
|
<li>High VRAM (8GB+)</li>
|
||||||
<h2>Info Section</h2>
|
<li>Latest ComfyUI version</li>
|
||||||
<div class="af-section af-info">
|
<li>SDXL compatible models</li>
|
||||||
<h3>ℹ️ Information</h3>
|
</ol>
|
||||||
<p>Using: <strong>SDXL 1.0</strong></p>
|
</div>
|
||||||
<p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
|
|
||||||
</div>
|
<h2>Column Layouts</h2>
|
||||||
|
<div class="row">
|
||||||
<h2>Warning Section</h2>
|
<div class="af-column-half-left">
|
||||||
<div class="af-section af-warning">
|
<div class="af-section af-positive">
|
||||||
<h3>⚠️ Warning</h3>
|
<h3>🎨 Style Settings</h3>
|
||||||
<p>This workflow requires:</p>
|
<ul>
|
||||||
<ol>
|
<li>Style: Photorealistic</li>
|
||||||
<li>High VRAM (8GB+)</li>
|
<li>Aspect: 16:9</li>
|
||||||
<li>Latest ComfyUI version</li>
|
<li>Quality: Ultra High</li>
|
||||||
<li>SDXL compatible models</li>
|
</ul>
|
||||||
</ol>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="af-spacer"></div>
|
||||||
<h2>Column Layouts</h2>
|
|
||||||
<div class="row">
|
<div class="af-section af-info">
|
||||||
<div class="af-column-half-left">
|
<h3>⚙️ Technical</h3>
|
||||||
<div class="af-section af-positive">
|
<p>Resolution: <code>1920x1080</code></p>
|
||||||
<h3>🎨 Style Settings</h3>
|
<p>Batch: <code>4</code></p>
|
||||||
<ul>
|
</div>
|
||||||
<li>Style: Photorealistic</li>
|
</div>
|
||||||
<li>Aspect: 16:9</li>
|
|
||||||
<li>Quality: Ultra High</li>
|
<div class="af-column-half-right">
|
||||||
</ul>
|
<div class="af-section af-negative">
|
||||||
</div>
|
<h3>🚫 Exclusions</h3>
|
||||||
|
<ul>
|
||||||
<div class="af-spacer"></div>
|
<li>No text in image</li>
|
||||||
|
<li>Avoid oversaturation</li>
|
||||||
<div class="af-section af-info">
|
<li>No watermarks</li>
|
||||||
<h3>⚙️ Technical</h3>
|
</ul>
|
||||||
<p>Resolution: <code>1920x1080</code></p>
|
</div>
|
||||||
<p>Batch: <code>4</code></p>
|
|
||||||
</div>
|
<div class="af-spacer"></div>
|
||||||
</div>
|
|
||||||
|
<div class="af-section af-warning">
|
||||||
<div class="af-column-half-right">
|
<h3>💡 Tips</h3>
|
||||||
<div class="af-section af-negative">
|
<p>Use lower CFG for more creative results</p>
|
||||||
<h3>🚫 Exclusions</h3>
|
</div>
|
||||||
<ul>
|
</div>
|
||||||
<li>No text in image</li>
|
</div>
|
||||||
<li>Avoid oversaturation</li>
|
|
||||||
<li>No watermarks</li>
|
<h2>Clickable Links & Actions</h2>
|
||||||
</ul>
|
<div class="af-section af-info">
|
||||||
</div>
|
<h3>🔗 Interactive Links</h3>
|
||||||
|
|
||||||
<div class="af-spacer"></div>
|
<!-- External links (opens in new tab with Ctrl+click) -->
|
||||||
|
<h4>External link (opens in new tab with Ctrl+click)</h4>
|
||||||
<div class="af-section af-warning">
|
<p><a href="https://www.fullframestudios.ch/">Full Frame Studios - Alex Furer</a></p>
|
||||||
<h3>💡 Tips</h3>
|
|
||||||
<p>Use lower CFG for more creative results</p>
|
<h4>Anchor Links</h4>
|
||||||
</div>
|
<p><a href="https://www.fullframestudios.ch/#ThreeDee">Full Frame Studios - Alex Furer - 3D</a></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<h2>Custom Info Cards</h2>
|
||||||
<h2>Clickable Links & Actions</h2>
|
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||||||
<div class="af-section af-info">
|
<div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
|
||||||
<h3>🔗 Interactive Links</h3>
|
<strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
|
||||||
|
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
|
||||||
<!-- External links (opens in new tab with Ctrl+click) -->
|
</div>
|
||||||
<h4>External link (opens in new tab with Ctrl+click)</h4>
|
|
||||||
<p><a href="https://www.fullframestudios.ch/">Full Frame Studios - Alex Furer</a></p>
|
<div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
|
||||||
|
<strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
|
||||||
<h4>Anchor Links</h4>
|
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
|
||||||
<p><a href="https://www.fullframestudios.ch/#ThreeDee">Full Frame Studios - Alex Furer - 3D</a></p>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
|
||||||
<h2>Custom Info Cards</h2>
|
<strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
|
||||||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
|
||||||
<div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
|
</div>
|
||||||
<strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
|
</div>""",
|
||||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
|
"placeholder": "Enter your HTML content here..."
|
||||||
</div>
|
}),
|
||||||
|
}
|
||||||
<div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
|
}
|
||||||
<strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
|
|
||||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
|
RETURN_TYPES = ()
|
||||||
</div>
|
FUNCTION = "display_html"
|
||||||
|
CATEGORY = "AF - Nodes"
|
||||||
<div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
|
OUTPUT_NODE = False
|
||||||
<strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
|
|
||||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
|
def display_html(self, html_content):
|
||||||
</div>
|
"""
|
||||||
</div>""",
|
Display enhanced HTML content
|
||||||
"placeholder": "Enter your HTML content here..."
|
"""
|
||||||
}),
|
return {"ui": {"text": html_content}, "result": (html_content,)}
|
||||||
}
|
|
||||||
}
|
# Node mappings for ComfyUI
|
||||||
|
NODE_CLASS_MAPPINGS = {
|
||||||
RETURN_TYPES = ()
|
"AF_Enhanced_HTML_Note": AF_Enhanced_HTML_Note,
|
||||||
FUNCTION = "display_html"
|
}
|
||||||
CATEGORY = "AF - Nodes"
|
|
||||||
OUTPUT_NODE = False
|
NODE_DISPLAY_NAME_MAPPINGS = {
|
||||||
|
"AF_Enhanced_HTML_Note": "AF - Enhanced HTML Note",
|
||||||
def display_html(self, html_content):
|
}
|
||||||
"""
|
|
||||||
Display enhanced HTML content
|
|
||||||
"""
|
|
||||||
return {"ui": {"text": html_content}, "result": (html_content,)}
|
|
||||||
|
|
||||||
# Node mappings for ComfyUI
|
|
||||||
NODE_CLASS_MAPPINGS = {
|
|
||||||
"AF_Enhanced_HTML_Note": AF_Enhanced_HTML_Note,
|
|
||||||
}
|
|
||||||
|
|
||||||
NODE_DISPLAY_NAME_MAPPINGS = {
|
|
||||||
"AF_Enhanced_HTML_Note": "AF - Enhanced HTML Note",
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
## Changelog
|
||||||
|
|
||||||
|
### v0.0.08
|
||||||
|
- Moved the CSS from the JS file to it's own file.
|
||||||
|
- Added CHANGELOG.md
|
||||||
|
- Added package.json for ComfyUI Manager compliance
|
||||||
|
- Added pyproject.toml for registry compliance
|
||||||
|
- Reworked the README
|
||||||
|
- Added the "helpers" folder to the .gitignore
|
||||||
|
- Added an icon to the pyproject.toml
|
||||||
|
|
||||||
|
### v0.0.07
|
||||||
|
- Comsetics, making tis a version
|
||||||
|
|
||||||
|
### v0.0.06
|
||||||
|
- Removed all Java Script functionality for links and updated README
|
||||||
|
|
||||||
|
### v0.0.05
|
||||||
|
- Made edit mode less intrusive and keep ComfyUI canvas navigation (panning, zooming [space bar] and [H] now work to pan around the canvas)
|
||||||
|
|
||||||
|
### v0.0.04
|
||||||
|
- Fixed node selection and resizing by removing OUTPUT_NODE and using proper widget approach. Double clicking is now used to edit the html Mouse interaction is now persistent to ComfyUI behavior. Except middle mouse button for panning.
|
||||||
|
|
||||||
|
### v0.0.03
|
||||||
|
- Fixed node resizing issues on save/reload. Improved selection and edit mode behavior to match ComfyUI core notes. Fixed middle mouse button panning over the node. Improved HTML indentation in default content
|
||||||
|
|
||||||
|
### v0.0.02
|
||||||
|
- Fixed naming consistency to HTML_Note Implemented single-window toggle behavior
|
||||||
|
|
||||||
|
### v0.0.01
|
||||||
|
- Initial Version
|
||||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
@@ -2,10 +2,6 @@
|
|||||||
|
|
||||||
A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting.
|
A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## ✨ Key Features
|
## ✨ Key Features
|
||||||
@@ -89,7 +85,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -106,7 +102,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -127,7 +123,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -144,7 +140,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -165,7 +161,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -181,7 +177,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -197,7 +193,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -213,7 +209,7 @@ The node comes with several predefined colored section styles. Click each sectio
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -262,7 +258,7 @@ Use these spacer classes to control vertical spacing between elements.
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
### Size Reference:
|
### Size Reference:
|
||||||
- `af-spacer-top` → 2px
|
- `af-spacer-top` → 2px
|
||||||
@@ -326,7 +322,7 @@ Create two-column layouts using the predefined column classes.
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
**Note:** The `row` class ensures proper column wrapping, and each column is 49% width with 1% margin.
|
**Note:** The `row` class ensures proper column wrapping, and each column is 49% width with 1% margin.
|
||||||
|
|
||||||
@@ -363,7 +359,7 @@ All links require **Ctrl+Click** to activate for safety and to prevent accidenta
|
|||||||
**Remember:** Hold **Ctrl** while clicking any link to activate it!
|
**Remember:** Hold **Ctrl** while clicking any link to activate it!
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -431,7 +427,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -460,7 +456,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -493,7 +489,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -522,7 +518,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -551,7 +547,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -579,7 +575,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -652,7 +648,7 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Rendered Result:
|
### Rendered Result:
|
||||||
|
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -734,10 +730,26 @@ The node supports **standard HTML** with **inline CSS styling**. You can write c
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 📞 Support & Credits
|
## ⚠️ Disclaimer
|
||||||
|
|
||||||
- **Creator:** Alex Furer
|
This ComfyUI custom node is developed through AI-assisted coding. While carefully tested, it is provided **"as is" without warranty**.
|
||||||
- **Co-Creators:** Claude AI & DeepSeek
|
|
||||||
- **GitHub:** [ComfyUI_AF_FindNodes](https://github.com/alFrame/ComfyUI-AF-Find-Nodes)
|
**By using this node pack:**
|
||||||
- **License:** MIT License
|
- You install and run at your own risk
|
||||||
- **Version:** 0.0.5
|
- The creator is not liable for damages or data loss
|
||||||
|
- Compatibility with your setup is not guaranteed
|
||||||
|
- Test in a safe environment before production use
|
||||||
|
|
||||||
|
Report issues on GitHub - we appreciate your feedback!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📚 Additional Resources
|
||||||
|
|
||||||
|
- **[Changelog](CHANGELOG.md)** - Version history and updates
|
||||||
|
- [GitHub Issues](https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note) - Report bugs & request features
|
||||||
|
- [License](LICENSE) - MIT License details
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Made with ❤️ by Alex Furer & Qwen3, Claude AI, DeepSeek**
|
||||||
Binary file not shown.
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"name": "af-enhanced-html-note",
|
||||||
|
"version": "0.0.08",
|
||||||
|
"description": "A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting.",
|
||||||
|
"author": "Alex Furer",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note"
|
||||||
|
},
|
||||||
|
"nodepath": "custom_nodes/ComfyUI-AF-Enhanced_HTML_Note"
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
[project]
|
||||||
|
name = "af-enhanced-html-note"
|
||||||
|
description = "A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting."
|
||||||
|
version = "0.0.08"
|
||||||
|
license = {file = "LICENSE"}
|
||||||
|
dependencies = []
|
||||||
|
|
||||||
|
[project.urls]
|
||||||
|
Repository = "https://github.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note"
|
||||||
|
|
||||||
|
[tool.comfy]
|
||||||
|
PublisherId = "alframe"
|
||||||
|
DisplayName = "ComfyUI AF - Enhanced HTML Note"
|
||||||
|
Icon = "https://raw.githubusercontent.com/alFrame/ComfyUI-AF-Enhanced_HTML_Note/main/Docs/icon.png"
|
||||||
@@ -0,0 +1,276 @@
|
|||||||
|
.af-html-note-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
background: var(--comfy-menu-bg, #2a2a2a);
|
||||||
|
/* border: 1px solid var(--border-color, #555); */
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: default;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--input-text, #ffffff);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
|
/* Prevent text selection */
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
cursor: default;
|
||||||
|
/* Prevent keyboard focus */
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure content area can't be focused */
|
||||||
|
.af-html-note-content:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-editor {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--comfy-menu-bg, #2a2a2a);
|
||||||
|
border: 1px solid var(--border-color, #555);
|
||||||
|
padding: 8px;
|
||||||
|
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--input-text, #ffffff);
|
||||||
|
box-sizing: border-box;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: 14px;
|
||||||
|
display: none;
|
||||||
|
flex: 1;
|
||||||
|
/* Add text selection capabilities */
|
||||||
|
user-select: auto;
|
||||||
|
-webkit-user-select: auto;
|
||||||
|
-moz-user-select: auto;
|
||||||
|
-ms-user-select: auto;
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Floating edit button */
|
||||||
|
.af-floating-edit-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 4px;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
border: 1px solid var(--border-color, #555);
|
||||||
|
color: var(--input-text, #ffffff);
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
font-size: 11px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-floating-edit-btn:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
border-color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Enable link interactions only when Ctrl is held */
|
||||||
|
.af-html-note-content a {
|
||||||
|
color: #58a6ff;
|
||||||
|
text-decoration: none;
|
||||||
|
/* Links are never directly clickable - only via Ctrl */
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.af-ctrl-active .af-html-note-content a {
|
||||||
|
/* Only become clickable when Ctrl is held globally */
|
||||||
|
pointer-events: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.af-ctrl-active .af-html-note-content a:hover {
|
||||||
|
color: #79c0ff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-container.edit-mode .af-html-note-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-container.edit-mode .af-html-note-editor {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide edit button in edit mode */
|
||||||
|
.af-html-note-container.edit-mode .af-floating-edit-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rest of your CSS remains the same... */
|
||||||
|
.af-html-note-content h1, .af-html-note-content h2, .af-html-note-content h3,
|
||||||
|
.af-html-note-content h4, .af-html-note-content h5, .af-html-note-content h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content h1 { font-size: 1.5em; }
|
||||||
|
.af-html-note-content h2 { font-size: 1.3em; }
|
||||||
|
.af-html-note-content h3 { font-size: 1.1em; }
|
||||||
|
|
||||||
|
.af-html-note-content .af-section {
|
||||||
|
padding: 8px 16px;
|
||||||
|
margin: 8px 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
border-left: 4px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-positive {
|
||||||
|
background: rgba(144, 238, 144, 0.1);
|
||||||
|
border-left-color: #90EE90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-negative {
|
||||||
|
background: rgba(255, 107, 107, 0.1);
|
||||||
|
border-left-color: #FF6B6B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-neutral {
|
||||||
|
background: rgba(224, 224, 224, 0.1);
|
||||||
|
border-left-color: #E0E0E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-info {
|
||||||
|
background: rgba(135, 206, 235, 0.1);
|
||||||
|
border-left-color: #87CEEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-warning {
|
||||||
|
background: rgba(255, 128, 0, 0.1);
|
||||||
|
border-left-color: #FFD700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-yellow {
|
||||||
|
background: rgba(255, 128, 0, 0.1);
|
||||||
|
border-left-color: #FFD700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-blue {
|
||||||
|
background: rgba(102, 105, 255, 0.1);
|
||||||
|
border-left-color: #000099;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-section.af-custom {
|
||||||
|
background: rgba(186, 85, 211, 0.1);
|
||||||
|
border-left-color: #BA55D3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content .af-spacer-top { height: 2px; margin: 4px 0; }
|
||||||
|
.af-html-note-content .af-spacer-mini { height: 4px; margin: 4px 0; }
|
||||||
|
.af-html-note-content .af-spacer-small { height: 8px; margin: 4px 0; }
|
||||||
|
.af-html-note-content .af-spacer { height: 16px; margin: 8px 0; }
|
||||||
|
.af-html-note-content .af-spacer-large { height: 32px; margin: 16px 0; }
|
||||||
|
.af-html-note-content .af-spacer-xl { height: 48px; margin: 24px 0; }
|
||||||
|
|
||||||
|
.af-html-note-content code {
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #f0f6fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content pre {
|
||||||
|
background: rgba(0,0,0,0.4);
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 12px;
|
||||||
|
margin: 16px 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content pre code {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content ul, .af-html-note-content ol {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content li { margin: 4px 0; }
|
||||||
|
.af-html-note-content p { margin: 8px 0; }
|
||||||
|
|
||||||
|
.af-html-note-content table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content th, .af-html-note-content td {
|
||||||
|
border: 1px solid var(--border-color, #555);
|
||||||
|
padding: 8px 12px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content th {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-content hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border-color, #555);
|
||||||
|
margin: 16px 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.af-html-note-container::-webkit-scrollbar { width: 8px; }
|
||||||
|
.af-html-note-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
|
||||||
|
.af-html-note-container::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-color, #555);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.af-html-note-container::-webkit-scrollbar-thumb:hover { background: #777; }
|
||||||
|
|
||||||
|
.af-html-note-editor::-webkit-scrollbar { width: 8px; }
|
||||||
|
.af-html-note-editor::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
|
||||||
|
.af-html-note-editor::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-color, #555);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.af-html-note-editor::-webkit-scrollbar-thumb:hover { background: #777; }
|
||||||
|
|
||||||
|
/* ****** MY OWN STYLES ****** */
|
||||||
|
.af-column-half-left {
|
||||||
|
box-sizing: border-box;
|
||||||
|
float: left;
|
||||||
|
width: 49%;
|
||||||
|
margin-right: 1% !important;
|
||||||
|
}
|
||||||
|
.af-column-half-right {
|
||||||
|
box-sizing: border-box;
|
||||||
|
float: left;
|
||||||
|
width: 49%;
|
||||||
|
margin-left: 1% !important;
|
||||||
|
}
|
||||||
|
.row:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
+10
-278
@@ -2,285 +2,17 @@
|
|||||||
|
|
||||||
import { app } from "../../scripts/app.js";
|
import { app } from "../../scripts/app.js";
|
||||||
|
|
||||||
// Define inline CSS styles
|
// Inject styles from external CSS file
|
||||||
const AF_HTML_NOTE_STYLES = `
|
function injectStyles() {
|
||||||
.af-html-note-container {
|
const styleId = 'af-html-note-styles';
|
||||||
width: 100%;
|
if (!document.getElementById(styleId)) {
|
||||||
height: 100%;
|
const link = document.createElement('link');
|
||||||
min-height: 100px;
|
link.id = styleId;
|
||||||
background: var(--comfy-menu-bg, #2a2a2a);
|
link.rel = 'stylesheet';
|
||||||
/* border: 1px solid var(--border-color, #555); */
|
link.href = './web/AF_Enhanced_HTML_Note.css';
|
||||||
padding: 8px;
|
document.head.appendChild(link);
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: default;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--input-text, #ffffff);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.af-html-note-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex: 1;
|
|
||||||
/* Prevent text selection */
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
cursor: default;
|
|
||||||
/* Prevent keyboard focus */
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure content area can't be focused */
|
|
||||||
.af-html-note-content:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-editor {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--comfy-menu-bg, #2a2a2a);
|
|
||||||
border: 1px solid var(--border-color, #555);
|
|
||||||
padding: 8px;
|
|
||||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
|
||||||
line-height: 1.4;
|
|
||||||
color: var(--input-text, #ffffff);
|
|
||||||
box-sizing: border-box;
|
|
||||||
resize: none;
|
|
||||||
outline: none;
|
|
||||||
font-size: 14px;
|
|
||||||
display: none;
|
|
||||||
flex: 1;
|
|
||||||
/* Add text selection capabilities */
|
|
||||||
user-select: auto;
|
|
||||||
-webkit-user-select: auto;
|
|
||||||
-moz-user-select: auto;
|
|
||||||
-ms-user-select: auto;
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Floating edit button */
|
|
||||||
.af-floating-edit-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 4px;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
border: 1px solid var(--border-color, #555);
|
|
||||||
color: var(--input-text, #ffffff);
|
|
||||||
border-radius: 3px;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1000;
|
|
||||||
font-size: 11px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0.7;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-floating-edit-btn:hover {
|
|
||||||
opacity: 1;
|
|
||||||
background: rgba(0, 0, 0, 0.9);
|
|
||||||
border-color: #777;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enable link interactions only when Ctrl is held */
|
|
||||||
.af-html-note-content a {
|
|
||||||
color: #58a6ff;
|
|
||||||
text-decoration: none;
|
|
||||||
/* Links are never directly clickable - only via Ctrl */
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.af-ctrl-active .af-html-note-content a {
|
|
||||||
/* Only become clickable when Ctrl is held globally */
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.af-ctrl-active .af-html-note-content a:hover {
|
|
||||||
color: #79c0ff;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-container.edit-mode .af-html-note-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-container.edit-mode .af-html-note-editor {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide edit button in edit mode */
|
|
||||||
.af-html-note-container.edit-mode .af-floating-edit-btn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rest of your CSS remains the same... */
|
|
||||||
.af-html-note-content h1, .af-html-note-content h2, .af-html-note-content h3,
|
|
||||||
.af-html-note-content h4, .af-html-note-content h5, .af-html-note-content h6 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content h1 { font-size: 1.5em; }
|
|
||||||
.af-html-note-content h2 { font-size: 1.3em; }
|
|
||||||
.af-html-note-content h3 { font-size: 1.1em; }
|
|
||||||
|
|
||||||
.af-html-note-content .af-section {
|
|
||||||
padding: 8px 16px;
|
|
||||||
margin: 8px 0;
|
|
||||||
border-radius: 6px;
|
|
||||||
border-left: 4px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-positive {
|
|
||||||
background: rgba(144, 238, 144, 0.1);
|
|
||||||
border-left-color: #90EE90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-negative {
|
|
||||||
background: rgba(255, 107, 107, 0.1);
|
|
||||||
border-left-color: #FF6B6B;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-neutral {
|
|
||||||
background: rgba(224, 224, 224, 0.1);
|
|
||||||
border-left-color: #E0E0E0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-info {
|
|
||||||
background: rgba(135, 206, 235, 0.1);
|
|
||||||
border-left-color: #87CEEB;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-warning {
|
|
||||||
background: rgba(255, 128, 0, 0.1);
|
|
||||||
border-left-color: #FFD700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-yellow {
|
|
||||||
background: rgba(255, 128, 0, 0.1);
|
|
||||||
border-left-color: #FFD700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-blue {
|
|
||||||
background: rgba(102, 105, 255, 0.1);
|
|
||||||
border-left-color: #000099;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-section.af-custom {
|
|
||||||
background: rgba(186, 85, 211, 0.1);
|
|
||||||
border-left-color: #BA55D3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content .af-spacer-top { height: 2px; margin: 4px 0; }
|
|
||||||
.af-html-note-content .af-spacer-mini { height: 4px; margin: 4px 0; }
|
|
||||||
.af-html-note-content .af-spacer-small { height: 8px; margin: 4px 0; }
|
|
||||||
.af-html-note-content .af-spacer { height: 16px; margin: 8px 0; }
|
|
||||||
.af-html-note-content .af-spacer-large { height: 32px; margin: 16px 0; }
|
|
||||||
.af-html-note-content .af-spacer-xl { height: 48px; margin: 24px 0; }
|
|
||||||
|
|
||||||
.af-html-note-content code {
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: #f0f6fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content pre {
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
border: 1px solid #444;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 12px;
|
|
||||||
margin: 16px 0;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content pre code {
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content ul, .af-html-note-content ol {
|
|
||||||
padding-left: 20px;
|
|
||||||
margin: 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content li { margin: 4px 0; }
|
|
||||||
.af-html-note-content p { margin: 8px 0; }
|
|
||||||
|
|
||||||
.af-html-note-content table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
margin: 16px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content th, .af-html-note-content td {
|
|
||||||
border: 1px solid var(--border-color, #555);
|
|
||||||
padding: 8px 12px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content th {
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-content hr {
|
|
||||||
border: none;
|
|
||||||
border-top: 1px solid var(--border-color, #555);
|
|
||||||
margin: 16px 0;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.af-html-note-container::-webkit-scrollbar { width: 8px; }
|
|
||||||
.af-html-note-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
|
|
||||||
.af-html-note-container::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--border-color, #555);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.af-html-note-container::-webkit-scrollbar-thumb:hover { background: #777; }
|
|
||||||
|
|
||||||
.af-html-note-editor::-webkit-scrollbar { width: 8px; }
|
|
||||||
.af-html-note-editor::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
|
|
||||||
.af-html-note-editor::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--border-color, #555);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.af-html-note-editor::-webkit-scrollbar-thumb:hover { background: #777; }
|
|
||||||
|
|
||||||
/* ****** MY OWN STYLES ****** */
|
|
||||||
.af-column-half-left {
|
|
||||||
box-sizing: border-box;
|
|
||||||
float: left;
|
|
||||||
width: 49%;
|
|
||||||
margin-right: 1% !important;
|
|
||||||
}
|
|
||||||
.af-column-half-right {
|
|
||||||
box-sizing: border-box;
|
|
||||||
float: left;
|
|
||||||
width: 49%;
|
|
||||||
margin-left: 1% !important;
|
|
||||||
}
|
|
||||||
.row:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Inject styles
|
// Inject styles
|
||||||
function injectStyles() {
|
function injectStyles() {
|
||||||
|
|||||||
Reference in New Issue
Block a user