diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index a752883..1f39629 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -180,7 +180,7 @@ DOM or live LiteGraph state. explicit graph-edit behavior. - Dual-Mode Theme Architecture (双形态主题架构与材质光影精细化): - **Base Design System Tokens (`--amb-*`)**: Scoped on `:root` and overridden under `.theme-abyssal-scarlet`. Defines unified background, panel, card, text, border, and control radii tokens (`--amb-radius-control: 6px`, `--amb-radius-card: 10px`, `--amb-radius-panel: 12px`). - - **Normal Mode (Default / 标准中性黑曜石图书档案馆模式)**: Restrained, clean, neutral dark obsidian (`#141519` / `#1c1e24` / `#24262e`) styling; overlaid with the "Anime Celestial Library Archive" AI Concept Art Watermark (`assets/archive_library_bg.webp`) on `#anomalous-content::before` at `0.08` opacity with `mix-blend-mode: luminosity`, creating a grand, atmospheric anime archival hall ambiance while ensuring zero interference with model covers; silver-white primary button (`#D7D9E0` with `#15171C` text); neutral card borders and restrained left-accent category lines. + - **Normal Mode (Default / 标准中性黑曜石图书档案馆模式)**: Restrained, clean, neutral dark obsidian (`#0b0d13` / `#141519` / `#1c1e24`) styling; overlaid with the "Anime Celestial Library Archive" AI Concept Art with glowing holographic magic circles, golden blueprint wireframes, and constellation starmap textures (`assets/archive_library_bg.webp`) at `0.65` opacity with radial dark vignette, visible through the transparent grid background (`#anomalous-grid { background: transparent; }`), creating a distinct, majestic anime archive hall atmosphere while ensuring model covers remain clear and high-contrast; silver-white primary button (`#D7D9E0` with `#15171C` text); neutral card borders and restrained left-accent category lines. - **Abyssal Scarlet Easter Egg Mode (`.theme-abyssal-scarlet` / 深海血族彩蛋领域 - 丝绒与暗血轻量质感)**: Strictly scoped under `.theme-abyssal-scarlet`; eliminates all cheap neon outer glows; deep gothic velvet backgrounds (`#161014` / `#21171d` / `#2b1e26`), razor-sharp crimson (`#dc143c`) and antique gold (`#b38728`) borders, crimson primary buttons (`#87384E` with `#FFF5F7` text), and concept art backdrops `assets/abyssal_scarlet_mansion.webp` and `assets/abyssal_bg_concept.webp`. - **Three-Tier Button Architecture**: Unifies button morphology across primary, secondary/ghost, and auxiliary actions. Primary buttons (`.anomalous-btn-primary`, `.anomalous-recipe-btn-primary-action`) feature solid fills, 32px height, 6px border-radius, clean SVG icons, and zero pseudo-element clutter (purged legacy `::before` diamonds, `::after` gradient lightbars, text-shadows, and heavy glows); secondary ghost buttons (`.anomalous-btn-ghost`) feature subtle borders and panel backgrounds; auxiliary action buttons provide clear, non-distracting tool semantics. - **Prompt Studio Dual-Column Workbench (提示词工坊两行顶栏与容器自适应)**: diff --git a/web/assets/archive_library_bg.webp b/web/assets/archive_library_bg.webp index 2898d1e..7ce7dd5 100644 Binary files a/web/assets/archive_library_bg.webp and b/web/assets/archive_library_bg.webp differ diff --git a/web/styles.css b/web/styles.css index e5e5604..6a41f48 100644 --- a/web/styles.css +++ b/web/styles.css @@ -391,7 +391,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro gap: 25px; row-gap: 40px; align-content: flex-start; - background: #0d0d11; + background: transparent; } #anomalous-grid::-webkit-scrollbar { @@ -724,7 +724,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro flex-direction: column; flex: 1; overflow: hidden; - background-color: var(--amb-bg-page, #141519); + background-color: var(--amb-bg-page, #0b0d13); position: relative; } @@ -733,11 +733,12 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro content: ''; position: absolute; inset: 0; - background-image: url('assets/archive_library_bg.webp'); + background-image: + radial-gradient(ellipse 90% 80% at 50% 50%, rgba(11, 13, 19, 0.15) 0%, rgba(11, 13, 19, 0.55) 100%), + url('assets/archive_library_bg.webp'); background-size: cover; - background-position: center; - opacity: 0.08; - mix-blend-mode: luminosity; + background-position: center 25%; + opacity: 0.65; pointer-events: none; z-index: 0; } @@ -11639,25 +11640,29 @@ button:hover .anomalous-btn-icon { box-shadow: none !important; } -/* 2. Normal Mode Gallery Container & Panels (Subtle Dark Matter Watermark Texture) */ +/* 2. Normal Mode Gallery Container & Panels (Grand Anime Archive Watermark Texture) */ #anomalous-gallery-panel, -.anomalous-gallery-grid, .anomalous-gallery-container { - background-color: #0a0a0c !important; + background-color: transparent !important; position: relative; } +.anomalous-gallery-grid { + background-color: transparent !important; +} + .anomalous-gallery-container::before, #anomalous-gallery-panel::before { display: block !important; content: '' !important; position: absolute !important; inset: 0 !important; - background-image: url('assets/normal_bg_concept.webp') !important; + background-image: + radial-gradient(ellipse 90% 80% at 50% 50%, rgba(11, 13, 19, 0.15) 0%, rgba(11, 13, 19, 0.55) 100%), + url('assets/archive_library_bg.webp') !important; background-size: cover !important; - background-position: center !important; - opacity: 0.05 !important; - mix-blend-mode: luminosity !important; + background-position: center 25% !important; + opacity: 0.65 !important; pointer-events: none !important; z-index: 0 !important; }