diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 3e10eb0..d12e036 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -86,7 +86,7 @@ DOM or live LiteGraph state. - `sidebar_actions.js` owns the sidebar bottom action hover-reveal short labels (100ms), singleton dynamic DOM tooltip bubbles (`#anomalous-sidebar-tooltip-bubble`, 600ms), click/pointerdown instant text/tooltip suppression guards, `isBottomModalOpen` tooltip occlusion guards, and anti-flicker pointer stability. - `tool_registry.js` centralizes metadata, SVG icons (enlarged 20px crisp vector outlines with 2px stroke, #cbd5e1 contrast), and stable IDs for the 9 catalog tools (including Prompt Notes / 提示词笔记) and 2 fixed anchors (Toolbox and Settings). - `shortcut_layout.js` provides tool layout utilities and fallbacks. The bottom shortcut bar maintains the clean fixed 4-tool setup (`scan`, `doctor`, `assistant`, `materials`) plus two anchors (`toolbox`, `settings`) housed in prominent 36px buttons with full click/active text suppression and `.is-active` toggled styling. -- `ui_sidebar.js`'s Toolbox modal strictly filters out all tools already present on the bottom bar, presenting a sleek 216px auto-height utility catalog with compact, frameless 40px tiles, downward anchor caret pointing to the toolbox trigger button, 0.18s smooth spring pop-in animation, clean click action execution, and zero obstructive text or beta footers. +- `ui_sidebar.js`'s Toolbox modal strictly filters out all tools already present on the bottom bar, presenting a sleek 216px 3-row utility catalog with compact, frameless 44px tiles (providing an elevated silhouette with breathing room for catalog discovery), downward anchor caret pointing to the toolbox trigger button, 0.18s smooth spring pop-in animation, clean click action execution, and zero obstructive text or beta footers. - `ui_grid.js` and model-detail modules own model presentation; `ui_gallery.js` and `ui_gallery_detail.js` own generated-image browsing and inspection. - `ui_recipes.js` / `ui_recipe_detail.js`, `ui_notebooks.js`, and `ui_materials.js` diff --git a/web/modules/ui_sidebar.js b/web/modules/ui_sidebar.js index 7e9e77c..8256842 100644 --- a/web/modules/ui_sidebar.js +++ b/web/modules/ui_sidebar.js @@ -2083,13 +2083,17 @@ export function createDOM() { titleBox.style.alignItems = 'center'; titleBox.style.gap = '5px'; + const titleIcon = document.createElement('span'); + titleIcon.textContent = '🧰'; + titleIcon.style.fontSize = '11px'; + const titleText = document.createElement('span'); titleText.textContent = t('toolboxTitle'); titleText.style.fontWeight = '600'; - titleText.style.fontSize = '10.5px'; + titleText.style.fontSize = '11px'; titleText.style.color = '#fff'; - titleBox.appendChild(titleText); + titleBox.append(titleIcon, titleText); const closeModalBtn = document.createElement('div'); closeModalBtn.innerHTML = '×'; diff --git a/web/styles.css b/web/styles.css index ac976ed..aa6d4dc 100644 --- a/web/styles.css +++ b/web/styles.css @@ -1053,10 +1053,10 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro background: rgba(22, 22, 26, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 9px; padding: 7px 7px 6px; - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); z-index: 999999 !important; display: none; flex-direction: column; @@ -1101,6 +1101,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro .anomalous-toolbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 44px); + grid-auto-rows: 44px; gap: 4px; margin: 3px 0 1px; align-content: start;