fix(ui): eliminate ugly scrollbars and prevent overflow in toolbox modal
This commit is contained in:
+1
-1
@@ -81,7 +81,7 @@ DOM or live LiteGraph state.
|
||||
primary model-browser surfaces, including the frosted-glass capsule parameter inspection
|
||||
button with lightweight vector SVG icons and GPU-accelerated micro-interactions;
|
||||
the sidebar bottom action bar (`#anomalous-sidebar-actions`) features intuitive, highly restrained glyphic vector SVG icons (`SIDEBAR_ICONS`):
|
||||
(1) Toolbox Hub (`#anomalous-toolbox-btn`): Precision 18px vector toolbox icon (`TOOLBOX`) anchoring the leftmost action slot, triggering an elevated 232px micro-utility drawer popover (`#anomalous-toolbox-modal`, z-index 999999) anchored directly above the action bar in the bottom-left corner (`bottom: 50px; left: 10px;`, collapsed `left: 68px`), presenting a high-density 3-column app/utility icon grid palette (`.anomalous-toolbox-grid`, `.anomalous-toolbox-tile`) with instant tooltips, amber status indicator dots, extensible tool registry (`this.registerToolboxItem`), zero obstruction to the central model grid, and mutual exclusivity against Settings Hub;
|
||||
(1) Toolbox Hub (`#anomalous-toolbox-btn`): Precision 18px vector toolbox icon (`TOOLBOX`) anchoring the leftmost action slot, triggering an elevated 236px zero-scrollbar micro-utility drawer popover (`#anomalous-toolbox-modal`, z-index 999999, `overflow: hidden`) anchored directly above the action bar in the bottom-left corner (`bottom: 50px; left: 10px;`, collapsed `left: 68px`), presenting a high-density 3-column app/utility icon grid palette (`.anomalous-toolbox-grid`, `.anomalous-toolbox-tile`) with instant tooltips, amber status indicator dots, extensible tool registry (`this.registerToolboxItem`), zero obstruction to the central model grid, and mutual exclusivity against Settings Hub;
|
||||
(2) Scan Wizard (`#anomalous-scan-btn`): Clean circular radar scope with range ring, crosshairs, and sweep beacon (`SCAN_RADAR_ICON_SVG`), animated only during active scanning;
|
||||
(3) Model Doctor (`#anomalous-doctor-btn`): Sleek diagnostic medical stethoscope, instantly conveying health check semantics;
|
||||
(4) AI Assistant (`#anomalous-assistant-btn`): Radiant AI copilot sparkles (`✦`), representing copilot intelligence;
|
||||
|
||||
@@ -2047,6 +2047,10 @@ export function createDOM() {
|
||||
hintFooter.style.textAlign = 'center';
|
||||
hintFooter.style.padding = '4px 2px 0';
|
||||
hintFooter.style.borderTop = '1px solid rgba(255, 255, 255, 0.05)';
|
||||
hintFooter.style.whiteSpace = 'nowrap';
|
||||
hintFooter.style.overflow = 'hidden';
|
||||
hintFooter.style.textOverflow = 'ellipsis';
|
||||
hintFooter.style.flexShrink = '0';
|
||||
|
||||
toolboxModal.appendChild(hintFooter);
|
||||
};
|
||||
|
||||
+15
-8
@@ -1033,22 +1033,29 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 10px;
|
||||
width: 232px;
|
||||
max-height: calc(100% - 64px);
|
||||
overflow-y: auto;
|
||||
width: 236px;
|
||||
box-sizing: border-box;
|
||||
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-radius: 10px;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 8px;
|
||||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
z-index: 999999 !important;
|
||||
transition: left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
overflow: hidden !important;
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none !important;
|
||||
}
|
||||
|
||||
#anomalous-toolbox-modal::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.anomalous-sidebar-closed #anomalous-toolbox-modal {
|
||||
@@ -1060,7 +1067,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6px;
|
||||
margin: 2px 0 4px;
|
||||
margin: 2px 0 2px;
|
||||
}
|
||||
|
||||
.anomalous-toolbox-tile {
|
||||
@@ -1069,8 +1076,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 9px 4px 7px;
|
||||
min-height: 58px;
|
||||
padding: 8px 3px 6px;
|
||||
min-height: 54px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
|
||||
Reference in New Issue
Block a user