style(ui): make anime archive background vivid and clear with runic blueprints and transparent grid

This commit is contained in:
DemonGatanjieu
2026-09-10 23:27:46 +08:00
parent 896cd3d20d
commit 93bb46cef9
3 changed files with 19 additions and 14 deletions
+1 -1
View File
@@ -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 (提示词工坊两行顶栏与容器自适应)**:
Binary file not shown.

Before

Width:  |  Height:  |  Size: 260 KiB

After

Width:  |  Height:  |  Size: 267 KiB

+18 -13
View File
@@ -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;
}