diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 7e10cf1..9b83937 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -93,11 +93,12 @@ DOM or live LiteGraph state. the sidebar action bar's circular astrological runic compass watermark (`#anomalous-sidebar-actions::before`) is completely disabled (`display: none !important`), and any backdrop textures are desaturated with `grayscale(100%)` to prevent blue color bleeding; all primary action highlights, scan wizard controls, and switches use titanium white (`#e5e7eb` / `#ffffff`) with warm studio amber (`#f59e0b`) accents instead of cold blue/cyan; the modal adopts a disciplined "workshop / archive" aesthetic: removing exaggerated `clip-path` chamfers in favor of clean 8px architectural engineering geometry (`border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1)`); + the master header (`#anomalous-header`) and sidebar brand bar (`#anomalous-brand-bar`) are tightly calibrated to a 48px slim industrial profile with 32px compact controls, maximizing vertical canvas real estate for model thumbnails; supports 3 unified Display Modes sharing identical DOM structure and UX logic: - - Standard Mode (标准模式, default): Balanced 200px cards, 340px height, pure solid obsidian canvas with zero wallpaper distraction; - - Compact Mode (高密度模式, power users): 140px min-width, 220px card height, 10px gaps, optimized for high-density scanning; + - Compact Mode (紧凑模式, primary default): 140px min-width, 220px card height, tight 10px gaps/14px rows, 5px sidebar folder rows, optimized for high-density scanning and instant visual discovery (Blender Asset Browser inspired); + - Standard Mode (标准模式, comfortable): Balanced 200px cards, 340px height, comfortable whitespace rhythm; - Aesthetic Mode (沉浸模式): Subtle 8% grayscale ambient archive watermark with frosted glass borders; - cards feature unified 8px geometry (`border-radius: 8px`), restrained elevation (`translateY(-2px)`, `scale(1.02)`), spatial depth shadows (`0 4px 14px rgba(0,0,0,0.35)`), + cards feature unified 6px/8px geometry, restrained elevation (`translateY(-2px)`, `scale(1.02)`), spatial depth shadows (`0 4px 14px rgba(0,0,0,0.35)`), seamless docking fallbacks, and a micro-floating capsule tooltip system (`.anomalous-tooltip-target`) providing unambiguous, bilingual action semantics across all vector tools. - `ui_gallery_detail.js` owns the studio modal Image Detail Workbench, diff --git a/web/modules/locales.js b/web/modules/locales.js index ae58acf..fa5ce84 100644 --- a/web/modules/locales.js +++ b/web/modules/locales.js @@ -709,8 +709,8 @@ export const i18n = { sidebarAllInfoComplete: '✨ 所有模型信息已完整', sidebarUiScale: 'UI 缩放', sidebarViewMode: '展示模式', + sidebarViewModeCompact: '紧凑模式', sidebarViewModeStandard: '标准模式', - sidebarViewModeCompact: '高密度', sidebarViewModeAesthetic: '沉浸模式', sidebarBgAtmosphere: '背景氛围', sidebarBgAtmosphereHelp: '调节底图星图蓝图的可见度(0%为纯净黑曜石)', @@ -1775,8 +1775,8 @@ export const i18n = { sidebarAllInfoComplete: '✨ All Model Info is Complete', sidebarUiScale: 'UI Scale', sidebarViewMode: 'View Mode', - sidebarViewModeStandard: 'Standard', sidebarViewModeCompact: 'Compact', + sidebarViewModeStandard: 'Standard', sidebarViewModeAesthetic: 'Aesthetic', sidebarBgAtmosphere: 'Background Atmosphere', sidebarBgAtmosphereHelp: 'Adjust blueprint backdrop opacity (0% is pure solid dark)', diff --git a/web/modules/ui_sidebar.js b/web/modules/ui_sidebar.js index 9f4f2c9..97e76d3 100644 --- a/web/modules/ui_sidebar.js +++ b/web/modules/ui_sidebar.js @@ -56,7 +56,7 @@ export function createDOM() { const savedBgOpacity = localStorage.getItem('anomalous_bg_opacity') || '0.2'; container.style.setProperty('--anomalous-bg-opacity', savedBgOpacity); - const savedViewMode = localStorage.getItem('anomalous_view_mode') || 'standard'; + const savedViewMode = localStorage.getItem('anomalous_view_mode') || 'compact'; container.classList.add(`view-mode-${savedViewMode}`); // Sidebar @@ -65,7 +65,10 @@ export function createDOM() { this.sidebarWrapper.style.position = 'relative'; const brandBar = document.createElement('div'); - brandBar.style.padding = '15px 15px 10px 15px'; + brandBar.id = 'anomalous-brand-bar'; + brandBar.style.padding = '0 14px'; + brandBar.style.height = '48px'; + brandBar.style.boxSizing = 'border-box'; brandBar.style.display = 'flex'; brandBar.style.alignItems = 'center'; brandBar.style.justifyContent = 'space-between'; @@ -1559,14 +1562,14 @@ export function createDOM() { viewModeGroup.style.border = '1px solid rgba(255, 255, 255, 0.06)'; const modeDefinitions = [ - { id: 'standard', key: 'sidebarViewModeStandard' }, { id: 'compact', key: 'sidebarViewModeCompact' }, + { id: 'standard', key: 'sidebarViewModeStandard' }, { id: 'aesthetic', key: 'sidebarViewModeAesthetic' } ]; - let currentViewMode = localStorage.getItem('anomalous_view_mode') || 'standard'; - if (!['standard', 'compact', 'aesthetic'].includes(currentViewMode)) { - currentViewMode = 'standard'; + let currentViewMode = localStorage.getItem('anomalous_view_mode') || 'compact'; + if (!['compact', 'standard', 'aesthetic'].includes(currentViewMode)) { + currentViewMode = 'compact'; } const modeBtnElements = []; @@ -1754,7 +1757,7 @@ export function createDOM() { localStorage.removeItem('anomalous_ui_scale'); localStorage.removeItem('anomalous_bg_opacity'); localStorage.removeItem('anomalous_view_mode'); - applyViewMode('standard'); + applyViewMode('compact'); container.style.left = '5%'; container.style.top = '5%'; container.style.width = '90%'; diff --git a/web/styles.css b/web/styles.css index d644f76..047c164 100644 --- a/web/styles.css +++ b/web/styles.css @@ -313,7 +313,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro } #anomalous-header { - height: 60px; + height: 48px; background: var(--comfy-menu-bg, #333); display: flex; align-items: center; @@ -514,56 +514,96 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro Display Modes: Standard, Compact, Aesthetic ========================================================================== */ -/* Mode 1: Standard (Default) - Clean, balanced, 8px architectural geometry */ -#anomalous-container.view-mode-standard #anomalous-grid, -#anomalous-container:not(.view-mode-compact):not(.view-mode-aesthetic) #anomalous-grid { - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 20px; - row-gap: 28px; - padding: 20px; -} - -#anomalous-container.view-mode-standard .anomalous-card, -#anomalous-container:not(.view-mode-compact):not(.view-mode-aesthetic) .anomalous-card { - height: 340px; - border-radius: 8px; -} - -/* Mode 2: Compact (Power User / High Density) */ -#anomalous-container.view-mode-compact #anomalous-grid { +/* Mode 2: Compact (Primary / Default / High Density) */ +#anomalous-container.view-mode-compact #anomalous-grid, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) #anomalous-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 10px !important; row-gap: 14px !important; padding: 12px !important; } -#anomalous-container.view-mode-compact .anomalous-card { +#anomalous-container.view-mode-compact .anomalous-card, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card { height: 220px !important; border-radius: 6px !important; } -#anomalous-container.view-mode-compact .anomalous-card-labels { - padding: 6px 8px 6px !important; +#anomalous-container.view-mode-compact .anomalous-card-labels, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-labels { + padding: 18px 8px 6px !important; } -#anomalous-container.view-mode-compact .anomalous-card-title { +#anomalous-container.view-mode-compact .anomalous-card-title, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-title { font-size: 0.82em !important; - line-height: 1.2 !important; + line-height: 1.25 !important; + margin-bottom: 2px !important; } -#anomalous-container.view-mode-compact .anomalous-card-filename { +#anomalous-container.view-mode-compact .anomalous-card-filename, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-filename { font-size: 0.72em !important; + opacity: 0.85 !important; } -#anomalous-container.view-mode-compact .anomalous-card-badge { +#anomalous-container.view-mode-compact .anomalous-card-badge, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-badge { + top: 6px !important; + left: 6px !important; + max-width: 65px !important; font-size: 0.65em !important; padding: 1px 4px !important; + border-radius: 3px !important; } -#anomalous-container.view-mode-compact .anomalous-card-action-btn { +#anomalous-container.view-mode-compact .anomalous-card-action-btn, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn { width: 22px !important; height: 22px !important; - font-size: 0.72em !important; + top: 6px !important; + font-size: 11px !important; + border-radius: 4px !important; +} + +#anomalous-container.view-mode-compact .anomalous-card-action-btn.action-apply, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-apply { + right: 6px !important; +} + +#anomalous-container.view-mode-compact .anomalous-card-action-btn.action-scan, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-scan { + right: 32px !important; +} + +#anomalous-container.view-mode-compact .anomalous-card-action-btn.action-edit, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-edit { + right: 58px !important; +} + +#anomalous-container.view-mode-compact .anomalous-folder-item, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-folder-item { + padding: 5px 12px !important; + font-size: 0.86em !important; +} + +#anomalous-container.view-mode-compact .anomalous-type-header, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-type-header { + padding: 6px 12px !important; + font-size: 0.85em !important; +} + +/* Mode 1: Standard - Clean, balanced, 8px architectural geometry */ +#anomalous-container.view-mode-standard #anomalous-grid { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + row-gap: 28px; + padding: 20px; +} + +#anomalous-container.view-mode-standard .anomalous-card { + height: 340px; + border-radius: 8px; } /* Mode 3: Aesthetic (Subtle Ambient Depth) */ @@ -11718,15 +11758,25 @@ button:hover .anomalous-btn-icon { ========================================================================== */ /* 1. Normal Mode Master Header (Neutral Charcoal Frosted Glass) */ +#anomalous-brand-bar { + height: 48px !important; + padding: 0 14px !important; + box-sizing: border-box !important; + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; +} + #anomalous-header { - height: 60px; + height: 48px !important; background: rgba(20, 20, 23, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; - padding: 0 20px !important; + padding: 0 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; cursor: move; @@ -11766,7 +11816,9 @@ button:hover .anomalous-btn-icon { #anomalous-header button { margin-right: 0; - padding: 8px 18px; + padding: 6px 14px; + height: 32px; + box-sizing: border-box; background: rgba(255, 255, 255, 0.05); color: #d1d5db; border: 1px solid rgba(255, 255, 255, 0.1); @@ -11776,7 +11828,7 @@ button:hover .anomalous-btn-icon { display: flex; align-items: center; gap: 8px; - font-size: 0.96em; + font-size: 0.9em; font-weight: 500; backdrop-filter: blur(8px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); @@ -11791,7 +11843,9 @@ button:hover .anomalous-btn-icon { } #anomalous-dock-btn { - padding: 8px 12px !important; + padding: 6px 10px !important; + height: 32px !important; + box-sizing: border-box !important; display: inline-flex !important; align-items: center; justify-content: center;