style(ui): make anime archive background vivid and clear with runic blueprints and transparent grid
This commit is contained in:
+1
-1
@@ -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
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user