From e8b50ecaf5fc0bd388b3abaa6a80e4cf4b65bfa6 Mon Sep 17 00:00:00 2001 From: DemonGatanjieu <1027066412@qq.com> Date: Fri, 18 Sep 2026 01:36:13 +0800 Subject: [PATCH] refactor(styles): split ordered stylesheet bundle --- .gitignore | 1 + tests/css_bundle_order.mjs | 20 + web/styles.css | 14631 +------------------- web/styles/00-foundation-models.css | 924 ++ web/styles/01-shell-tools.css | 635 + web/styles/02-notebooks.css | 583 + web/styles/03-gallery-recipes.css | 2749 ++++ web/styles/04-dialogs-materials.css | 2214 +++ web/styles/05-recipe-studio-overrides.css | 587 + web/styles/06-material-workbench.css | 2198 +++ web/styles/07-prompt-studio.css | 1835 +++ web/styles/08-theme-gallery-overrides.css | 1006 ++ web/styles/09-prompt-drawers.css | 1192 ++ web/styles/10-model-sources.css | 697 + 14 files changed, 14652 insertions(+), 14620 deletions(-) create mode 100644 tests/css_bundle_order.mjs create mode 100644 web/styles/00-foundation-models.css create mode 100644 web/styles/01-shell-tools.css create mode 100644 web/styles/02-notebooks.css create mode 100644 web/styles/03-gallery-recipes.css create mode 100644 web/styles/04-dialogs-materials.css create mode 100644 web/styles/05-recipe-studio-overrides.css create mode 100644 web/styles/06-material-workbench.css create mode 100644 web/styles/07-prompt-studio.css create mode 100644 web/styles/08-theme-gallery-overrides.css create mode 100644 web/styles/09-prompt-drawers.css create mode 100644 web/styles/10-model-sources.css diff --git a/.gitignore b/.gitignore index e48a9bc..1f39ef0 100644 --- a/.gitignore +++ b/.gitignore @@ -95,6 +95,7 @@ tests/* !tests/image_workbench_modules.mjs !tests/material_feature_modules.mjs !tests/notebook_feature_modules.mjs +!tests/css_bundle_order.mjs !tests/notebook_render_test.mjs !tests/notebook_save_roundtrip.mjs diff --git a/tests/css_bundle_order.mjs b/tests/css_bundle_order.mjs new file mode 100644 index 0000000..ed5a814 --- /dev/null +++ b/tests/css_bundle_order.mjs @@ -0,0 +1,20 @@ +import assert from 'node:assert/strict'; +import crypto from 'node:crypto'; +import fs from 'node:fs/promises'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..'); +const entry = await fs.readFile(path.join(root, 'web/styles.css'), 'utf8'); +const imports = [...entry.matchAll(/@import\s+url\("\.\/styles\/([^?"\s]+)\?v=([^"\s]+)"\);/g)]; + +assert.equal(imports.length, 11, 'the stylesheet entry must contain the full ordered import list'); +assert.equal(imports.map(match => match[1]).length, new Set(imports.map(match => match[1])).size, 'imports must be unique'); +assert.equal(new Set(imports.map(match => match[2])).size, 1, 'child stylesheets must share one cache version'); +assert.equal(entry.replace(/@import[^;]+;\s*/g, ''), '', 'styles.css must remain an import-only external entry'); + +const chunks = await Promise.all(imports.map(match => fs.readFile(path.join(root, 'web/styles', match[1])))); +const digest = crypto.createHash('sha256').update(Buffer.concat(chunks)).digest('hex'); +assert.equal(digest, 'd014a9d1826e2c48a46ac72389fe4e5bdd0b2ba85618f653d13852cd93812bc1', 'CSS rule bytes or cascade order changed'); + +console.log('CSS bundle: ordered imports preserve the original stylesheet byte-for-byte.'); diff --git a/web/styles.css b/web/styles.css index 882b322..b08a933 100644 --- a/web/styles.css +++ b/web/styles.css @@ -1,14620 +1,11 @@ -/* ========================================================================== - ANOMALOUS UI GLOBAL DESIGN SYSTEM (Design Tokens & Semantic Colors) - ========================================================================== */ -:root { - --c-amber: #d97706; - --c-amber-glow: rgba(217, 119, 6, 0.25); - --c-cyan: #06b6d4; - --c-cyan-glow: rgba(6, 182, 212, 0.25); - --c-purple: #8b5cf6; - --c-purple-glow: rgba(139, 92, 246, 0.25); - --c-silver: #9ca3af; - --c-silver-glow: rgba(156, 163, 175, 0.2); - --c-blue: #9ca3af; - --c-blue-glow: rgba(156, 163, 175, 0.2); - --c-crimson: #ef4444; - --c-crimson-glow: rgba(239, 68, 68, 0.25); - --c-wine: #4b5563; - --c-wine-glow: rgba(75, 85, 99, 0.2); - --c-emerald: #10b981; - --c-emerald-glow: rgba(16, 185, 129, 0.25); - - /* AMB Base Design System Tokens - Normal Mode (Neutral Dark Charcoal & Obsidian Studio) */ - --amb-bg-page: #131315; - --amb-bg-panel: #1a1a1d; - --amb-bg-card: #202024; - --amb-bg-card-hover: #28282d; - --amb-bg-input: #151517; - --amb-text-main: #f3f4f6; - --amb-text-muted: #9ca3af; - --amb-border: rgba(255, 255, 255, 0.08); - --amb-border-hover: rgba(255, 255, 255, 0.16); - --amb-btn-primary-bg: #e5e7eb; - --amb-btn-primary-hover: #ffffff; - --amb-btn-primary-text: #111827; - --amb-accent-gold: rgba(234, 179, 8, 0.65); - --amb-accent-line: rgba(229, 231, 235, 0.35); - --amb-accent: #f59e0b; - --amb-radius-control: 6px; - --amb-radius-card: 8px; - --amb-radius-panel: 10px; -} - -/* Abyssal Scarlet Gothic Theme Overrides */ -.theme-abyssal-scarlet, -html.theme-abyssal-scarlet, -#anomalous-container.theme-abyssal-scarlet { - --amb-bg-page: #161014; - --amb-bg-panel: #21171D; - --amb-bg-card: #2B1E26; - --amb-bg-card-hover: #362530; - --amb-bg-input: #1c1319; - --amb-text-main: #ECE4E8; - --amb-text-muted: #B9A7B0; - --amb-border: rgba(255, 245, 247, 0.10); - --amb-border-hover: rgba(220, 20, 60, 0.35); - --amb-btn-primary-bg: #87384E; - --amb-btn-primary-hover: #9c425b; - --amb-btn-primary-text: #FFF5F7; - --amb-accent-gold: #b38728; - --amb-accent-line: #dc143c; -} - -/* Skeleton Shimmer Loading Placeholder */ -.anomalous-skeleton-shimmer { - background: linear-gradient(90deg, #15171e 25%, #232733 50%, #15171e 75%) !important; - background-size: 200% 100% !important; - animation: anomalousSkeletonShimmer 1.8s infinite ease-in-out !important; -} - -@keyframes anomalousSkeletonShimmer { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -#anomalous-trigger-btn { - --anomalous-trigger-size: 60px; - --anomalous-trigger-font-size: 28px; - --anomalous-trigger-pill-padding: 18px; - position: fixed; - bottom: 30px; - right: 30px; - width: var(--anomalous-trigger-size); - height: var(--anomalous-trigger-size); - border-radius: 50%; - background: rgba(18, 21, 30, 0.85); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - color: var(--fg-color, #f1f5f9); - border: 1px solid rgba(255, 255, 255, 0.16); - font-size: var(--anomalous-trigger-font-size); - cursor: pointer; - z-index: 2147483000 !important; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); - display: flex !important; - visibility: visible !important; - opacity: 1 !important; - align-items: center !important; - justify-content: center !important; - user-select: none; - transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); - gap: 8px; - white-space: nowrap; -} - -#anomalous-trigger-btn .anomalous-trigger-icon { - display: flex; - align-items: center; - justify-content: center; - line-height: 1; - font-size: var(--anomalous-trigger-font-size); - flex-shrink: 0; - transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; -} - -#anomalous-trigger-btn .anomalous-trigger-icon svg { - width: 1em; - height: 1em; - display: block; - stroke: currentColor; -} - -html.theme-abyssal-scarlet #anomalous-trigger-btn { - background: rgba(28, 10, 18, 0.88) !important; - border: 1px solid rgba(220, 20, 60, 0.45) !important; - color: #ffe4e6 !important; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(220, 20, 60, 0.2) !important; -} - -html.theme-abyssal-scarlet #anomalous-trigger-btn:hover { - border-color: #dc143c !important; - background: rgba(45, 12, 26, 0.95) !important; - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(220, 20, 60, 0.4) !important; - color: #ffffff !important; -} - -#anomalous-trigger-btn[data-size="small"] { - --anomalous-trigger-size: 44px; - --anomalous-trigger-font-size: 20px; - --anomalous-trigger-pill-padding: 13px; -} - -#anomalous-trigger-btn[data-size="large"] { - --anomalous-trigger-size: 76px; - --anomalous-trigger-font-size: 34px; - --anomalous-trigger-pill-padding: 22px; -} - -#anomalous-trigger-btn .anomalous-trigger-label { - display: none; - font-size: 14px; - font-weight: 600; - letter-spacing: 0.01em; -} - -#anomalous-trigger-btn[data-style="pill"] { - width: auto; - min-width: calc(var(--anomalous-trigger-size) * 1.8); - padding: 0 var(--anomalous-trigger-pill-padding); - border-radius: 999px; -} - -#anomalous-trigger-btn[data-style="pill"] .anomalous-trigger-label { - display: inline; -} - -#anomalous-trigger-btn:hover { - transform: scale(1.08) translateY(-4px); - background: rgba(25, 29, 42, 0.94); - border-color: rgba(100, 200, 255, 0.45); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px rgba(80, 190, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2); - color: #ffffff; -} - -#anomalous-trigger-btn:hover .anomalous-trigger-icon { - transform: rotate(12deg) scale(1.06); - filter: drop-shadow(0 0 6px rgba(100, 200, 255, 0.6)); -} - -html.theme-abyssal-scarlet #anomalous-trigger-btn:hover .anomalous-trigger-icon { - filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.7)) !important; -} - -#anomalous-trigger-btn.anomalous-trigger-hidden, -body.anomalous-prompt-studio-open #anomalous-trigger-btn, -body:has(.anomalous-prompt-studio-drawer) #anomalous-trigger-btn { - visibility: hidden !important; - opacity: 0 !important; - pointer-events: none !important; - display: none !important; - transform: scale(0.7); -} - -#anomalous-trigger-btn.anomalous-trigger-error { - border-color: #ff9f43; - box-shadow: none; -} - -.anomalous-topbar-entry { - display: none !important; -} - -html.anomalous-topbar-entry-enabled .anomalous-topbar-entry { - display: inline-flex !important; -} - -html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBrowser.FloatingTriggerSize"], -html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBrowser.FloatingTriggerStyle"] { - display: none !important; -} - -.anomalous-shortcut-setting { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 0.5rem; -} - -.anomalous-shortcut-current { - min-width: 8.5rem; - padding: 0.38rem 0.65rem; - border: 1px solid var(--border-default, #4b5563); - border-radius: 0.4rem; - background: var(--comfy-input-bg, #101113); - color: var(--fg-color, #f3f4f6); - font: 600 0.78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; - text-align: center; - white-space: nowrap; -} - -.anomalous-shortcut-customize { - padding: 0.42rem 0.72rem; - border: 1px solid var(--border-default, #4b5563); - border-radius: 0.4rem; - background: var(--comfy-input-bg, #24262b); - color: var(--fg-color, #f3f4f6); - cursor: pointer; -} - -.anomalous-shortcut-customize:hover:not(:disabled) { - border-color: var(--p-primary-color, #60a5fa); -} - -.anomalous-shortcut-customize:disabled { - cursor: wait; - opacity: 0.6; -} - -#anomalous-modal { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - pointer-events: none; - z-index: 10000; - display: none; - filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.85)); -} - -#anomalous-modal.visible { - display: block; -} - -#anomalous-container { - width: 90%; - height: 90%; - background-color: var(--amb-bg-page, #131315); - border: 1px solid rgba(255, 255, 255, 0.09); - border-radius: 8px; - display: flex; - flex-direction: row; - overflow: hidden; - pointer-events: auto; - position: absolute; - left: 5%; - top: 5%; - container-type: inline-size; - font-size: calc(16px * var(--anomalous-scale, 1)); - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7); -} - -#anomalous-container::before { - display: none; - content: ''; - position: absolute; - inset: 0; - background-image: - radial-gradient(ellipse 95% 85% at 50% 35%, rgba(19, 19, 21, 0.2) 0%, rgba(19, 19, 21, 0.75) 100%), - url('assets/archive_library_bg.webp'); - background-size: cover; - background-position: center 25%; - filter: grayscale(100%) brightness(0.55) contrast(1.15); - opacity: var(--anomalous-bg-opacity, 0.08); - transition: opacity 0.3s ease; - pointer-events: none; - z-index: 0; -} - -#anomalous-container.view-mode-aesthetic::before { - display: block; -} - -/* Only the main columns sit above the decorative background. Keep overlays - and resize handles in their own positioning and stacking layers. */ -#anomalous-container > #anomalous-sidebar-wrapper, -#anomalous-container > #anomalous-content { - position: relative; - z-index: 1; -} - -.anomalous-docked { - left: 0 !important; - top: 0 !important; - height: 100% !important; - width: 660px !important; - border-radius: 0 !important; - clip-path: none !important; - transition: all 0.3s ease; -} - -#anomalous-header { - height: 48px; - background: var(--comfy-menu-bg, #333); - display: flex; - align-items: center; - padding: 0 50px 0 20px; - border-bottom: 1px solid var(--border-color, #555); - cursor: move; - position: relative; -} - -#anomalous-settings-panel { - display: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.85); - z-index: 9999; - align-items: center; - justify-content: center; -} - -#anomalous-settings-box { - background: var(--comfy-menu-bg, #2a2a2a); - border: 1px solid var(--border-color, #444); - padding: 30px; - border-radius: 12px; - display: flex; - flex-direction: column; - gap: 15px; - min-width: 300px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); -} - -.anomalous-resize-handle { - position: absolute; - bottom: 0; - right: 0; - width: 20px; - height: 20px; - cursor: se-resize; - z-index: 10000; -} - -.anomalous-resize-handle::after { - content: ''; - position: absolute; - bottom: 4px; - right: 4px; - width: 10px; - height: 10px; - border-right: 2px solid #666; - border-bottom: 2px solid #666; -} - -.anomalous-header-group { - display: flex; - align-items: center; - gap: 6px; -} - -#anomalous-header button { - margin-right: 0; - padding: 0 10px; - height: 28px; - box-sizing: border-box; - background: rgba(255, 255, 255, 0.04); - color: #c0c4cc; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 6px; - cursor: pointer; - white-space: nowrap; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 5px; - font-size: 11.5px; - font-weight: 500; - letter-spacing: 0.2px; - transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); -} - -#anomalous-header button:hover { - background: rgba(255, 255, 255, 0.09); - border-color: rgba(255, 255, 255, 0.2); - color: #ffffff; - transform: translateY(-1px); - box-shadow: none; -} - -#anomalous-header button.active { - background: rgba(255, 255, 255, 0.14) !important; - border-color: rgba(255, 255, 255, 0.28) !important; - color: #ffffff !important; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; -} - -#anomalous-close { - width: 28px; - height: 28px; - box-sizing: border-box; - font-size: 18px; - cursor: pointer; - color: var(--error-text, #ff5555); - line-height: 1; - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - border-radius: 6px; - border: 1px solid transparent; - transition: all 0.15s ease; -} - -#anomalous-close:hover { - color: #ff6b6b; - background: rgba(255, 85, 85, 0.12); - border-color: rgba(255, 85, 85, 0.25); - transform: scale(1.05); -} - -#anomalous-grid { - flex: 1; - padding: 20px; - overflow-y: auto; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 25px; - row-gap: 40px; - align-content: flex-start; - background: transparent; -} - -#anomalous-grid::-webkit-scrollbar { - width: 8px; -} - -#anomalous-grid::-webkit-scrollbar-track { - background: rgba(20, 20, 26, 0.8); -} - -#anomalous-grid::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.16); - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.08); -} - -#anomalous-grid::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.3); - box-shadow: 0 0 6px rgba(255, 255, 255, 0.18); -} - -.anomalous-card { - position: relative; - background: var(--amb-bg-card, #202024); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 8px; - overflow: hidden; - display: flex; - flex-direction: column; - height: 340px; - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); - transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease; - will-change: transform, box-shadow; - cursor: pointer; -} - -.anomalous-card:hover { - transform: translateY(-2px); - border-color: rgba(255, 255, 255, 0.2); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.theme-abyssal-scarlet .anomalous-card { - border-color: rgba(220, 20, 60, 0.22); - background: linear-gradient(180deg, rgba(25, 12, 20, 0.9) 0%, rgba(14, 6, 14, 0.98) 100%); - box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6); -} - -.theme-abyssal-scarlet .anomalous-card:hover { - border-color: #dc143c; - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9), inset 0 0 12px rgba(0, 0, 0, 0.7); -} - -.anomalous-card img, -.anomalous-card video { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; -} - -.anomalous-card:hover img, -.anomalous-card:hover video { - transform: scale(1.02); -} - -#anomalous-container.anomalous-sidebar-closed #anomalous-grid { - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 16px; - row-gap: 24px; -} - -#anomalous-container.anomalous-sidebar-closed .anomalous-card { - height: 320px; -} - -/* ========================================================================== - Display Modes: Standard, Compact, Aesthetic - ========================================================================== */ - -/* 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: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, -#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:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-title { - font-size: 0.82em !important; - line-height: 1.25 !important; - margin-bottom: 2px !important; -} - -#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:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-badge { - top: 6px !important; - left: 6px !important; - max-width: 55px !important; - font-size: 0.65em !important; - padding: 1px 4px !important; - border-radius: 3px !important; - white-space: nowrap !important; - overflow: hidden !important; - text-overflow: ellipsis !important; -} - -#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; - 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-edit, -#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-edit { - right: 32px !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: 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) */ -#anomalous-container.view-mode-aesthetic #anomalous-grid { - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 24px; - row-gap: 36px; - padding: 24px; -} - -#anomalous-container.view-mode-aesthetic .anomalous-card { - height: 360px; - border-radius: 8px; - background: rgba(28, 28, 32, 0.85); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.09); -} - -#anomalous-container.view-mode-aesthetic .anomalous-card:hover { - background: rgba(34, 34, 38, 0.92); - border-color: rgba(255, 255, 255, 0.22); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65); -} - -/* Model Card Labels: Always visible at rest, crisp non-blurry gradient mask */ -.anomalous-card-labels { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 26px 10px 8px; - background: linear-gradient(to top, rgba(16, 16, 18, 0.96) 0%, rgba(16, 16, 18, 0.7) 65%, transparent 100%); - display: flex; - flex-direction: column; - gap: 3px; - text-align: left; - z-index: 5; - pointer-events: none; - box-sizing: border-box; - transition: background 0.2s ease; -} - -.anomalous-card:hover .anomalous-card-labels { - background: linear-gradient(to top, rgba(16, 16, 18, 0.98) 0%, rgba(16, 16, 18, 0.82) 75%, transparent 100%); -} - -.theme-abyssal-scarlet .anomalous-card-labels { - background: linear-gradient(to top, rgba(18, 5, 14, 0.97) 0%, rgba(18, 5, 14, 0.72) 65%, transparent 100%); -} - -.theme-abyssal-scarlet .anomalous-card:hover .anomalous-card-labels { - background: linear-gradient(to top, rgba(20, 6, 16, 0.99) 0%, rgba(20, 6, 16, 0.85) 75%, transparent 100%); -} - -.anomalous-card-title { - font-size: 0.88rem; - font-weight: 600; - color: #f3f4f6; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 1.3; -} - -.anomalous-card-filename { - font-size: 0.72rem; - color: #9ca3af; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - opacity: 0.8; -} - -/* Card Base Model Badges - Normal Mode (Neutral & Clean) */ -.anomalous-card-badge { - position: absolute; - top: 8px; - left: 8px; - padding: 3px 8px; - border-radius: 5px; - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.4px; - background: rgba(18, 20, 26, 0.85); - color: #cbd5e1; - border: 1px solid rgba(255, 255, 255, 0.15); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - pointer-events: none; - z-index: 10; - text-transform: uppercase; - transition: all 0.25s ease; -} - -.anomalous-card:hover .anomalous-card-badge { - border-color: rgba(255, 255, 255, 0.3); - color: #ffffff; -} - -.anomalous-card-badge.badge-gold { - color: #e2e8f0; - background: rgba(30, 32, 40, 0.9); - border-color: rgba(255, 255, 255, 0.2); -} - -.anomalous-card-badge.badge-amber { - color: #cbd5e1; - background: rgba(30, 32, 40, 0.9); - border-color: rgba(255, 255, 255, 0.18); -} - -.anomalous-card-badge.badge-flux { - color: #cbd5e1; - background: rgba(30, 32, 40, 0.9); - border-color: rgba(255, 255, 255, 0.18); -} - -.anomalous-card-badge.badge-rose { - color: #cbd5e1; - background: rgba(30, 32, 40, 0.9); - border-color: rgba(255, 255, 255, 0.18); -} - -/* Card Action Buttons - Normal Mode (Neutral Glass) */ -.anomalous-card-action-btn { - position: absolute; - top: 8px; - right: 8px; - width: 28px; - height: 28px; - padding: 0; - display: inline-flex; - align-items: center; - justify-content: center; - background: rgba(20, 22, 28, 0.85); - color: #e2e8f0; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - cursor: pointer; - font-size: 13px; - opacity: 0; - transform: scale(0.88); - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - z-index: 20; - backdrop-filter: blur(8px); - pointer-events: none; -} - -.anomalous-card-action-btn.action-apply { - right: 8px; -} - -.anomalous-card-action-btn.action-edit { - right: 42px; -} - -.anomalous-card-action-btn.action-scan { - right: 76px; -} - -.anomalous-card:hover .anomalous-card-action-btn { - opacity: 1; - transform: scale(1); - pointer-events: auto; -} - -.anomalous-card-action-btn:hover { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.35); - color: #ffffff; - box-shadow: none; -} - -.anomalous-scan-progress { - position: fixed; - right: 24px; - bottom: 104px; - z-index: 1000000; - width: min(380px, calc(100vw - 32px)); - box-sizing: border-box; - padding: 16px; - border: 1px solid rgba(138, 180, 248, 0.35); - border-radius: 12px; - background: rgba(24, 24, 27, 0.96); - color: #f1f3f4; - box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42); - backdrop-filter: blur(12px); -} - -.anomalous-scan-progress-title, -.anomalous-scan-progress-detail, -.anomalous-scan-progress-item { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-scan-progress-title { - margin-bottom: 10px; - font-size: 14px; -} - -.anomalous-scan-progress-track { - position: relative; - height: 6px; - overflow: hidden; - border-radius: 999px; - background: rgba(255, 255, 255, 0.12); -} - -.anomalous-scan-progress-fill { - height: 100%; - border-radius: inherit; - background: #10b981; - transition: width 180ms ease; -} - -.anomalous-scan-progress-fill.is-indeterminate { - animation: anomalous-scan-progress-slide 1.2s ease-in-out infinite; -} - -.anomalous-scan-progress-detail { - margin-top: 10px; - color: #d7dde8; - font-size: 12px; -} - -.anomalous-scan-progress-item { - margin-top: 4px; - color: #9aa0a6; - font-size: 11px; -} - -.anomalous-scan-progress.is-complete .anomalous-scan-progress-fill { - background: #81c995; -} - -.anomalous-scan-progress.is-error { - border-color: rgba(242, 139, 130, 0.5); -} - -.anomalous-scan-progress.is-error .anomalous-scan-progress-fill { - background: #f28b82; -} - -@keyframes anomalous-scan-progress-slide { - from { transform: translateX(-120%); } - to { transform: translateX(340%); } -} - -.anomalous-card-title { - color: var(--fg-color, #fff); - font-size: 0.9em; - font-weight: 650; - line-height: 1.25; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - overflow-wrap: anywhere; -} - -.anomalous-card-filename { - color: rgba(255, 255, 255, 0.55); - font-family: ui-monospace, SFMono-Regular, Consolas, monospace; - font-size: 0.72em; - line-height: 1.25; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -#anomalous-content { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - background: transparent; - position: relative; -} - -#anomalous-content::before { - display: none; -} - -#anomalous-content > * { - position: relative; - z-index: 1; -} - -#anomalous-container { - flex-direction: row; -} - -/* Island UI: Floating Sidebar Navigation Console (Neutral Charcoal Frosted Glass) */ -#anomalous-sidebar-wrapper { - width: 250px; - margin: 8px 0 8px 8px; - height: calc(100% - 16px); - background: rgba(22, 22, 25, 0.85); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - position: relative; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 10px; - display: flex; - flex-direction: column; - transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); - overflow: visible; - box-sizing: border-box; -} - -#anomalous-doctor-panel, -#anomalous-assistant-panel { - background: var(--amb-bg-page, #131315) !important; - position: relative; - z-index: 2; -} - -.anomalous-brand-badge { - background: rgba(255, 255, 255, 0.06) !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; - color: #e5e7eb !important; - border-radius: 6px !important; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; - backdrop-filter: blur(8px) !important; - letter-spacing: 1px !important; -} - -#anomalous-sidebar input[type="text"] { - background: rgba(255, 255, 255, 0.05) !important; - border: 1px solid rgba(255, 255, 255, 0.09) !important; - backdrop-filter: blur(8px) !important; - color: #f3f4f6 !important; - transition: all 0.2s ease !important; -} - -#anomalous-sidebar input[type="text"]:focus { - border-color: rgba(255, 255, 255, 0.3) !important; - background: rgba(255, 255, 255, 0.08) !important; - box-shadow: 0 0 8px rgba(255, 255, 255, 0.06) !important; -} - -#anomalous-sidebar-actions { - background: rgba(20, 20, 23, 0.6) !important; - backdrop-filter: blur(12px) !important; - border-top: 1px solid rgba(255, 255, 255, 0.06) !important; -} - -#anomalous-sidebar-wrapper::after { - display: none; -} - -.anomalous-sidebar-closed #anomalous-sidebar-wrapper { - width: 58px; -} - -.anomalous-sidebar-closed #anomalous-sidebar-wrapper>div:first-child div { - display: none; - /* Hides "Anomalous Browser" text */ -} - -.anomalous-sidebar-closed #anomalous-sidebar { - opacity: 0; - pointer-events: none; - overflow: hidden; -} - -#anomalous-settings-hub-modal { - position: absolute; - bottom: 16px; - left: 266px; - width: 270px; - max-height: calc(100% - 32px); - overflow-y: auto; - box-sizing: border-box; - background: rgba(24, 24, 28, 0.98); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 10px; - padding: 12px; - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); - z-index: 999999 !important; - transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); -} - -#anomalous-settings-hub-modal button { - display: flex !important; - align-items: center !important; - width: 100% !important; - text-align: left !important; - box-sizing: border-box !important; -} - -#anomalous-settings-hub-modal button svg { - flex-shrink: 0 !important; -} - -.anomalous-sidebar-closed #anomalous-settings-hub-modal { - left: 72px !important; -} - -@keyframes anomalous-popover-in { - 0% { - opacity: 0; - transform: translateY(6px) scale(0.96); - } - 100% { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -#anomalous-toolbox-modal { - position: absolute; - bottom: 58px; - left: 8px; - width: 216px; - min-height: auto; - 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.15); - border-radius: 9px; - padding: 7px 7px 6px; - box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); - z-index: 999999 !important; - display: none; - flex-direction: column; - gap: 3px; - overflow: visible !important; -} - -#anomalous-toolbox-modal[style*="display: flex"] { - animation: anomalous-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards; - transform-origin: 16px bottom; -} - -#anomalous-toolbox-modal::after { - content: ''; - position: absolute; - bottom: -5px; - left: 16px; - width: 8px; - height: 8px; - background: rgba(22, 22, 26, 0.98); - border-right: 1px solid rgba(255, 255, 255, 0.12); - border-bottom: 1px solid rgba(255, 255, 255, 0.12); - transform: translateX(-50%) rotate(45deg); - pointer-events: none; -} - -#anomalous-toolbox-modal::-webkit-scrollbar { - display: none !important; - width: 0 !important; - height: 0 !important; -} - -.anomalous-sidebar-closed #anomalous-toolbox-modal { - left: 64px !important; - bottom: 12px !important; -} - -.anomalous-sidebar-closed #anomalous-toolbox-modal::after { - display: none !important; -} - -.anomalous-toolbox-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(3, 44px); - grid-auto-rows: 44px; - gap: 4px; - margin: 3px 0 1px; - align-content: start; - flex: 1; -} - -.anomalous-toolbox-tile { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - padding: 5px 2px 4px; - min-height: 40px; - box-sizing: border-box; - background: transparent; - border: 1px solid transparent; - border-radius: 6px; - cursor: pointer; - position: relative; - user-select: none; - transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); -} - -.anomalous-toolbox-tile:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.12); - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); -} - -.anomalous-toolbox-tile:active { - transform: scale(0.96); - background: rgba(255, 255, 255, 0.12); -} - -.anomalous-toolbox-tile-icon { - font-size: 13.5px; - line-height: 1.1; - margin-bottom: 2px; - display: flex; - align-items: center; - justify-content: center; - user-select: none; -} - -.anomalous-toolbox-tile-label { - font-size: 9.5px; - font-weight: 500; - color: #cbd5e1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - line-height: 1.15; -} - -.anomalous-toolbox-tile-dot { - position: absolute; - top: 3px; - right: 3px; - width: 4px; - height: 4px; - border-radius: 50%; - background: #f59e0b; - box-shadow: 0 0 4px rgba(245, 158, 11, 0.6); -} - -.anomalous-toolbox-tile-dot.is-ready { - background: #10b981; - box-shadow: 0 0 5px rgba(16, 185, 129, 0.75); -} - -/* Suppress all tooltips and action labels on clicked/active elements so they never block vision or interaction */ -button:active::before, -button:active::after, -.anomalous-tooltip-target:active::before, -.anomalous-tooltip-target:active::after, -.anomalous-toolbox-tile:active::before, -.anomalous-toolbox-tile:active::after, -#anomalous-sidebar-actions button:active::before, -#anomalous-sidebar-actions button:active::after, -#anomalous-sidebar-actions button:active .anomalous-action-label, -#anomalous-sidebar-actions button:focus:not(:focus-visible) .anomalous-action-label { - display: none !important; - opacity: 0 !important; - visibility: hidden !important; - pointer-events: none !important; -} - -#anomalous-sidebar-actions button:active > svg, -#anomalous-sidebar-actions button:focus:not(:focus-visible) > svg { - opacity: 1 !important; -} - -#anomalous-sidebar-actions button.is-active { - color: #38bdf8 !important; - background: rgba(56, 189, 248, 0.14) !important; - border: 1px solid rgba(56, 189, 248, 0.35) !important; -} - -#anomalous-sidebar-actions button.is-active .anomalous-action-label { - display: none !important; - opacity: 0 !important; - visibility: hidden !important; - pointer-events: none !important; -} - -#anomalous-sidebar-actions button.is-active > svg { - opacity: 1 !important; - color: #38bdf8 !important; -} - -/* When toolbox or settings hub modal is open, completely suppress floating tooltip bubble */ -body:has(#anomalous-toolbox-modal[style*="display: flex"]) #anomalous-sidebar-tooltip-bubble, -body:has(#anomalous-settings-hub-modal[style*="display: flex"]) #anomalous-sidebar-tooltip-bubble { - display: none !important; - opacity: 0 !important; - visibility: hidden !important; - pointer-events: none !important; -} - -.anomalous-sidebar-closed #anomalous-sidebar-actions { - flex-direction: column !important; -} - -#anomalous-sidebar { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - transition: opacity 0.2s; -} - -#anomalous-settings { - border-top: 1px solid var(--border-color, #444); - background: var(--bg-color, #111); -} - -.anomalous-lang-btn { - width: 100% !important; - border: 2px solid #555 !important; - padding: 12px !important; - font-weight: bold; - border-radius: 4px !important; - background: #1a1a1a !important; - cursor: pointer; - color: #fff; - margin-bottom: 15px; -} - -.anomalous-type-header { - padding: 10px 15px; - background: rgba(255, 255, 255, 0.03); - color: var(--fg-color, #fff); - font-weight: bold; - font-size: 0.9em; - border-top: 1px solid rgba(255, 255, 255, 0.06); - border-bottom: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-folder-item { - padding: 8px 15px; - color: var(--fg-color, #cbd5e1); - cursor: pointer; - font-size: 0.9em; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - border-left: 2px solid transparent; -} - -.anomalous-folder-item:hover { - background: rgba(255, 255, 255, 0.06); - color: #fff; -} - -/* Clean Neutral Active Indicator on Selected Menu (Normal Mode) */ -.anomalous-folder-item.active { - background: rgba(255, 255, 255, 0.08); - color: #fff; - font-weight: 600; - border-left: 2px solid #e5e7eb; - box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.03); - border-radius: 0 6px 6px 0; -} - -.anomalous-folder-item.active .anomalous-folder-name { - color: #fff !important; - text-shadow: none; -} - -.theme-abyssal-scarlet .anomalous-folder-item.active { - background: rgba(55, 12, 22, 0.85); - border-left: 2px solid #dc143c; - border-left-color: var(--c-crimson, #dc143c); - box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.8); -} - -.theme-abyssal-scarlet .anomalous-folder-item.active .anomalous-folder-name { - color: #e0d8db; - text-shadow: none; -} - -/* Sidebar Icons & Actions - Normal Mode (Neutral & Clean) */ -.anomalous-folder-item svg, -#anomalous-sidebar h3 svg { - color: #94a3b8 !important; - filter: none; -} - -.theme-abyssal-scarlet .anomalous-folder-item svg, -.theme-abyssal-scarlet #anomalous-sidebar h3 svg { - color: #d4af37 !important; - filter: none; -} - -#anomalous-scan-btn, -#anomalous-materials-btn, -#anomalous-doctor-btn, -#anomalous-assistant-btn, -#anomalous-global-settings-btn { - color: #94a3b8 !important; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; -} - -#anomalous-scan-btn:hover, -#anomalous-materials-btn:hover, -#anomalous-doctor-btn:hover, -#anomalous-assistant-btn:hover, -#anomalous-global-settings-btn:hover { - color: #f8fafc !important; - filter: none !important; - background: rgba(255, 255, 255, 0.08) !important; -} - -.theme-abyssal-scarlet #anomalous-scan-btn:hover { - color: #ff4d6d !important; - filter: none !important; - background: rgba(220, 20, 60, 0.12) !important; -} - -.theme-abyssal-scarlet #anomalous-materials-btn { - color: var(--c-amber, #d97706) !important; -} - -.theme-abyssal-scarlet #anomalous-materials-btn:hover { - color: #fbbf24 !important; - filter: none !important; - background: rgba(217, 119, 6, 0.12) !important; -} - -.theme-abyssal-scarlet #anomalous-doctor-btn { - color: var(--c-crimson, #dc143c) !important; -} - -.theme-abyssal-scarlet #anomalous-doctor-btn:hover { - color: #ff4d6d !important; - filter: none !important; - background: rgba(220, 20, 60, 0.12) !important; -} - -.theme-abyssal-scarlet #anomalous-assistant-btn { - color: var(--c-purple, #8b5cf6) !important; -} - -.theme-abyssal-scarlet #anomalous-assistant-btn:hover { - color: #c4b5fd !important; - filter: none !important; - background: rgba(139, 92, 246, 0.14) !important; -} - -.theme-abyssal-scarlet #anomalous-global-settings-btn { - color: var(--c-silver, #94a3b8) !important; -} - -.theme-abyssal-scarlet #anomalous-global-settings-btn:hover { - color: #f8fafc !important; - filter: none !important; - background: rgba(255, 255, 255, 0.08) !important; -} - - -#anomalous-detail { - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - background: var(--bg-color, #222); -} - -.anomalous-split-container { - flex: 1; - display: flex; - flex-direction: row; - overflow: hidden; -} - -.anomalous-split-left { - width: 40%; - display: flex; - align-items: center; - justify-content: center; - background: #000; - overflow: hidden; -} - -.anomalous-resizer { - width: 5px; - background: var(--border-color, #444); - cursor: col-resize; - transition: background 0.2s; -} - -.anomalous-resizer:hover { - background: rgba(255, 255, 255, 0.35); -} - -.theme-abyssal-scarlet .anomalous-resizer:hover { - background: #dc143c; -} - -.anomalous-split-right { - width: 60%; - background: var(--bg-color, #222); - overflow: auto; -} - -.anomalous-card { - cursor: pointer; -} - -.anomalous-folder-toggle { - cursor: pointer; - user-select: none; -} - - -#anomalous-api-key { - background: #333; - border: 1px solid #555; - color: #fff; - padding: 8px; - border-radius: 4px; - width: 150px; - margin-right: 15px; -} - -#anomalous-api-key::placeholder { - color: #999; -} - -@container (max-width: 750px) { - .anomalous-split-left, - .anomalous-resizer { - display: none !important; - } - - .anomalous-split-right { - width: 100% !important; - } - - .anomalous-nb-sidebar { - width: 80px !important; - min-width: 80px !important; - } - - .anomalous-nb-sidebar .anomalous-nb-item { - font-size: 0.8em; - padding: 8px 4px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - } - - .anomalous-nb-create-text { - display: none; - } -} - -/* English Layout Specific Scaling */ -.anomalous-lang-en { - font-size: 0.9em; -} - -.anomalous-lang-en .anomalous-card-title { - font-size: 0.85em; -} - -.anomalous-lang-en #anomalous-title { - font-size: 1.1em; -} - -/* Compatible Models Section */ -.anomalous-compatible-section { - margin-top: 20px; - padding-top: 20px; - border-top: 1px solid var(--border-color, #444); -} - -.anomalous-compatible-title { - color: var(--fg-color, #fff); - font-size: 1.1em; - margin-bottom: 10px; - display: flex; - align-items: center; - gap: 8px; -} - -.anomalous-compatible-list { - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.anomalous-compatible-item { - background: var(--comfy-menu-bg, #333); - border: 1px solid var(--border-color, #555); - border-radius: 6px; - padding: 6px 10px; - display: flex; - align-items: center; - gap: 8px; - cursor: pointer; - transition: all 0.2s; - max-width: 200px; -} - -.anomalous-compatible-item:hover { - border-color: rgba(255, 255, 255, 0.3); - background: var(--bg-color, #444); - transform: translateY(-2px); -} - -.theme-abyssal-scarlet .anomalous-compatible-item:hover { - border-color: #dc143c; -} - -.anomalous-compatible-item img, -.anomalous-compatible-item video { - width: 30px; - height: 30px; - object-fit: cover; - border-radius: 4px; -} - -.anomalous-compatible-item-name { - color: var(--fg-color, #fff); - font-size: 0.85em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1; -} - - -/* Notebook UI */ -.anomalous-nb-modal { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--amb-bg-page, #131315); - z-index: 10001; - display: flex; - align-items: center; - justify-content: center; -} - -.anomalous-nb-container { - width: 95%; - height: 95%; - background: var(--bg-color, #222); - border: 1px solid var(--border-color, #444); - border-radius: 12px; - display: flex; - flex-direction: column; - overflow: hidden; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); -} - -.anomalous-prompt-studio-container { - padding: 0; - position: relative; - background: var(--amb-bg-page, #141519); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85); -} - -.anomalous-nb-header { - height: 50px; - background: var(--comfy-menu-bg, #333); - border-bottom: 1px solid #444; - display: flex; - align-items: center; - padding: 0 20px; - justify-content: space-between; - color: #fff; -} - -.anomalous-nb-close { - font-size: 2em; - cursor: pointer; - color: #ff4444; -} - -.anomalous-nb-body { - flex: 1; - display: flex; - overflow: hidden; - container-type: inline-size; -} - -.anomalous-nb-sidebar { - width: 250px; - background: #111; - border-right: 1px solid #444; - display: flex; - flex-direction: column; - transition: width 0.3s; -} - -.anomalous-nb-create-row { - min-width: 0; - box-sizing: border-box; - align-items: center; -} - -.anomalous-nb-create-input { - min-width: 0; - width: 0; - box-sizing: border-box; -} - -.anomalous-nb-create-row > button { - flex: 0 0 auto; - min-width: 0; -} - -@container (max-width: 600px) { - .anomalous-nb-sidebar { - width: 140px; - } - - .anomalous-nb-create-text { - display: none; - } -} - -.anomalous-nb-list { - flex: 1; - overflow-y: auto; - padding: 10px; -} - -.anomalous-nb-item { - padding: 10px; - color: #ccc; - cursor: pointer; - border-radius: 4px; - margin-bottom: 5px; - background: #222; - display: flex; - align-items: center; - white-space: nowrap; - overflow: hidden; - font-size: 1.1em; -} - -.anomalous-nb-item-icon { - flex-shrink: 0; -} - -.anomalous-nb-item-text { - flex: 1; - text-overflow: ellipsis; - overflow: hidden; -} - -.anomalous-nb-item:hover { - background: #333; -} - -.anomalous-nb-item.active { - background: rgba(255, 255, 255, 0.12); - color: #fff; - font-weight: bold; -} - -.theme-abyssal-scarlet .anomalous-nb-item.active { - background: #dc143c; -} - -.anomalous-nb-editor { - flex: 1; - background: #222; - overflow-y: auto; - padding: 20px; - color: #eee; -} - -.anomalous-nb-toolbar { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; -} - -.anomalous-nb-prompt-toolbar { - display: flex; - gap: 10px; - margin-bottom: 10px; - align-items: center; - flex-wrap: wrap; -} - -#anomalous-container.anomalous-docked .anomalous-nb-prompt-toolbar select { - flex: 1 1 100%; -} - -.anomalous-btn-primary { - position: relative; - background: var(--amb-btn-primary-bg, #D7D9E0); - color: var(--amb-btn-primary-text, #15171C); - border: 1px solid rgba(255, 255, 255, 0.2); - height: 32px; - padding: 0 14px; - border-radius: var(--amb-radius-control, 6px); - cursor: pointer; - font-size: 0.82rem; - font-weight: 600; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - box-shadow: none; - transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; - overflow: hidden; - user-select: none; - box-sizing: border-box; -} - -.anomalous-btn-primary:hover { - background: var(--amb-btn-primary-hover, #E5E7EB); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: none; -} - -.anomalous-btn-primary:active { - transform: translateY(1px); - filter: brightness(0.95); -} - -.anomalous-btn-danger { - position: relative; - background: #7f1d1d; - color: #fecaca; - border: 1px solid rgba(239, 68, 68, 0.35); - height: 32px; - padding: 0 14px; - border-radius: var(--amb-radius-control, 6px); - cursor: pointer; - font-size: 0.82rem; - font-weight: 600; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - box-shadow: none; - transition: background-color 0.16s ease, border-color 0.16s ease; - user-select: none; - box-sizing: border-box; -} - -.anomalous-btn-danger:hover { - background: #991b1b; - border-color: rgba(239, 68, 68, 0.6); - color: #ffffff; -} - overflow: hidden; -} - -.anomalous-btn-danger:hover { - background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%); - border-color: #f87171; - box-shadow: none; - transform: translateY(-1px); -} - -.anomalous-btn-success { - position: relative; - background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); - color: white; - border: 1px solid rgba(134, 239, 172, 0.4); - padding: 6px 14px; - border-radius: 3px 11px 3px 11px; - cursor: pointer; - font-size: 0.82rem; - font-weight: 600; - margin-left: 5px; - box-shadow: none; - transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); - overflow: hidden; -} - -.anomalous-btn-success:hover { - background: linear-gradient(135deg, #15803d 0%, #166534 100%); - border-color: #4ade80; - box-shadow: none; - transform: translateY(-1px); -} - -.anomalous-nb-section { - background: #2a2a2a; - border: 1px solid #444; - border-radius: 8px; - padding: 15px; - margin-bottom: 20px; -} - -.anomalous-nb-row { - margin-bottom: 10px; -} - -.anomalous-nb-select { - background: #111; - color: #fff; - padding: 6px; - border: 1px solid #555; - border-radius: 4px; -} - -.anomalous-nb-gallery { - display: flex; - gap: 10px; - overflow-x: auto; - padding: 10px 0; -} - -.anomalous-nb-gallery-wrap { - display: flex; - gap: 10px; - flex-wrap: wrap; - padding: 10px 0; - max-height: 240px; - overflow-y: auto; - content-visibility: auto; - contain-intrinsic-size: 70px; -} - -.anomalous-nb-minicheck, -.anomalous-nb-minilora { - display: flex; - align-items: center; - gap: 12px; - padding: 8px 12px 8px 8px; - background: #222630; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 8px; - cursor: pointer; - flex: 1 1 220px; - max-width: 320px; - transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); - content-visibility: auto; - contain-intrinsic-size: 70px; -} - -.anomalous-nb-minicheck:hover, -.anomalous-nb-minilora:hover { - border-color: rgba(255, 255, 255, 0.2); - background: #2a3140; - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); - transition-delay: 0.04s; -} - -.anomalous-nb-minicheck.selected, -.anomalous-nb-minilora.selected { - border-color: #8b5cf6; - background: rgba(139, 92, 246, 0.15); - box-shadow: 0 0 12px rgba(139, 92, 246, 0.25); -} - -.anomalous-nb-minicheck img, -.anomalous-nb-minicheck video, -.anomalous-nb-minilora img, -.anomalous-nb-minilora video { - width: 52px; - height: 52px; - aspect-ratio: 1 / 1; - object-fit: cover; - border-radius: 6px; - flex-shrink: 0; -} - -.anomalous-nb-minicheck-name, -.anomalous-nb-minilora-name { - color: #eee; - font-size: 0.95em; - line-height: 1.3; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - text-align: left; -} - -.anomalous-nb-minicheck.selected .anomalous-nb-minicheck-name, -.anomalous-nb-minilora.selected .anomalous-nb-minilora-name { - color: #8b5cf6; - font-weight: bold; -} - -.anomalous-nb-textarea { - width: 100%; - height: 60px; - background: #111; - color: #fff; - border: 1px solid #555; - border-radius: 4px; - padding: 8px; - margin-top: 10px; - resize: vertical; - box-sizing: border-box; -} - -/* 提示词双语对照面板 (CSS Grid 双栏排版) */ -.anomalous-nb-dual-pane { - display: flex; - flex-direction: column; - width: 100%; - background: rgba(22, 26, 35, 0.95); - padding: 10px; - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.08); - box-sizing: border-box; - gap: 6px; -} - -.anomalous-nb-tag-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - width: 100%; - align-items: stretch; -} - -.anomalous-nb-gallery-box { - background: #1e1e1e; - border: 1px solid #444; - border-radius: 8px; - padding: 12px; - margin-bottom: 15px; -} - -/* Notebook Model Fold & Sections Enhancement */ -.anomalous-nb-models-fold { - background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 10px; - padding: 0; - margin-bottom: 16px; - overflow: hidden; - transition: border-color 0.2s ease; -} - -.anomalous-nb-models-fold[open] { - border-color: rgba(139, 92, 246, 0.35); - background: rgba(255, 255, 255, 0.03); -} - -.anomalous-nb-fold-summary { - display: flex; - align-items: center; - justify-content: space-between; - padding: 12px 16px; - background: rgba(255, 255, 255, 0.04); - cursor: pointer; - font-size: 0.92rem; - font-weight: 600; - color: #f1f5f9; - user-select: none; - list-style: none; - transition: background 0.18s; -} - -.anomalous-nb-fold-summary::-webkit-details-marker { - display: none; -} - -.anomalous-nb-fold-summary:hover { - background: rgba(255, 255, 255, 0.07); -} - -.anomalous-nb-models-badge { - font-size: 0.76rem; - font-weight: 500; - color: #94a3b8; - background: rgba(255, 255, 255, 0.06); - padding: 2px 8px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-nb-fold-arrow { - color: #94a3b8; - font-size: 0.88rem; -} - -.anomalous-nb-models-fold .anomalous-nb-section { - background: transparent; - border: none; - border-top: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 0; - padding: 16px; - margin-bottom: 0; -} - -.anomalous-nb-prompt-section { - background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 10px; - padding: 16px; - margin-bottom: 16px; -} - -.anomalous-nb-capture-fold { - background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 10px; - padding: 0; - margin-bottom: 16px; - overflow: hidden; -} - -.anomalous-nb-capture-fold > summary { - padding: 11px 16px; - cursor: pointer; - font-size: 0.88rem; - font-weight: 500; - color: #94a3b8; - list-style: none; - transition: background 0.18s, color 0.18s; -} - -.anomalous-nb-capture-fold > summary:hover { - background: rgba(255, 255, 255, 0.05); - color: #f1f5f9; -} - -.anomalous-nb-capture-content { - padding: 12px 16px; - border-top: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-nb-tools-fold { - margin-top: 12px; - padding: 8px 12px; - border-radius: 6px; - background: rgba(0, 0, 0, 0.2); - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.anomalous-nb-tools-fold > summary { - font-size: 0.82rem; - color: #94a3b8; - cursor: pointer; -} - -.anomalous-nb-tools-fold > summary:hover { - color: #cbd5e1; -} - -.anomalous-nb-selected-badge { - font-size: 0.78rem; - padding: 2px 8px; - border-radius: 4px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-nb-visual-tag { - background: #222630; - color: #e2e8f0; - padding: 6px 10px; - border-radius: 6px; - border: 1px solid rgba(255, 255, 255, 0.08); - cursor: pointer; - transition: all 0.18s ease; - min-height: 34px; - display: flex; - align-items: center; - word-break: break-word; - font-size: 0.84rem; - line-height: 1.4; -} - -.anomalous-nb-visual-tag.hover { - background: #2a3140; - border-color: rgba(139, 92, 246, 0.5); - color: #ffffff; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -} - -/* 复制按钮默认隐藏，悬停才浮现 */ -.anomalous-nb-copy-btn { - opacity: 0; - visibility: hidden; - transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; - padding-left: 8px; - flex-shrink: 0; - user-select: none; - font-size: 0.78rem; -} - -.anomalous-nb-visual-tag:hover .anomalous-nb-copy-btn { - opacity: 0.85; - visibility: visible; -} - -.anomalous-nb-copy-btn:hover { - transform: scale(1.2); - opacity: 1; -} - -.anomalous-nb-tag-edit { - background: #111827; - color: #f1f5f9; - border: 1px solid rgba(139, 92, 246, 0.6); - border-radius: 4px; - padding: 6px; - width: 100%; - font-size: 0.84rem; - box-sizing: border-box; - outline: none; -} - -/* Gallery Styles */ -#anomalous-gallery-panel { - flex: 1; - display: none; - flex-direction: column; - overflow: hidden; - background: var(--bg-color, #222); -} - -.anomalous-gallery-grid { - flex: 1; - padding: 20px; - overflow-y: auto; - display: grid; - /* Fit ~4 items per row on expanded screens */ - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 15px; - align-content: flex-start; -} - -#anomalous-container.anomalous-docked .anomalous-gallery-grid { - grid-template-columns: repeat(2, 1fr); - gap: 8px; - padding: 10px; -} - -#anomalous-container.anomalous-docked .anomalous-gallery-card { - height: 180px; -} - -.anomalous-gallery-card { - position: relative; - background: #111; - border: 1px solid #444; - border-radius: 8px; - overflow: hidden; - cursor: pointer; - /* Damped transition to prevent strobe effect */ - transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); - height: 250px; - display: flex; - flex-direction: column; -} - -.anomalous-gallery-card:hover { - transform: translateY(-3px); - border-color: rgba(255, 255, 255, 0.25); - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); - transition-delay: 0.08s; -} - -.theme-abyssal-scarlet .anomalous-gallery-card:hover { - border-color: #dc143c; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), inset 0 0 8px rgba(0, 0, 0, 0.7); -} - -.anomalous-gallery-card img { - width: 100%; - height: 100%; - object-fit: contain; - background: #000; -} - -.anomalous-gallery-delete { - position: absolute; - top: 8px; - right: 8px; - background: rgba(220, 53, 69, 0.85); - color: white; - border: none; - border-radius: 50%; - width: 32px; - height: 32px; - font-size: 16px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: all 0.2s; -} - -.anomalous-gallery-card:hover .anomalous-gallery-delete { - opacity: 1; -} - -.anomalous-gallery-details { - position: absolute; - left: 8px; - bottom: 8px; - z-index: 2; - display: inline-flex; - align-items: center; - gap: 6px; - max-width: calc(100% - 16px); - padding: 6px 12px; - border: 1px solid rgba(255, 255, 255, 0.16); - border-radius: 999px; - background: rgba(15, 20, 30, 0.82); - color: #f1f5f9; - font-size: 11.5px; - font-weight: 600; - line-height: 1; - cursor: pointer; - opacity: 0; - transform: translateY(5px); - pointer-events: none; - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); - transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), - transform .18s cubic-bezier(0.16, 1, 0.3, 1), - background .18s ease, - border-color .18s ease, - box-shadow .18s ease, - color .18s ease; - user-select: none; -} - -.anomalous-gallery-card:hover .anomalous-gallery-details, -.anomalous-gallery-card:focus-within .anomalous-gallery-details { - opacity: 1; - transform: translateY(0); - pointer-events: auto; -} - -.anomalous-gallery-details:hover { - background: rgba(20, 29, 44, 0.94); - border-color: rgba(139, 92, 246, 0.55); - color: #fca5a5; - box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25); - transform: translateY(-1px); -} - -.anomalous-gallery-details:active { - transform: translateY(0) scale(0.96); -} - -.anomalous-gallery-details-icon { - width: 13px; - height: 13px; - flex-shrink: 0; - stroke: currentColor; - transition: transform .2s ease; -} - -.anomalous-gallery-details:hover .anomalous-gallery-details-icon { - transform: scale(1.1); -} - -#anomalous-gallery-panel.is-cover-selecting .anomalous-gallery-details, -#anomalous-gallery-panel.is-cover-selecting .anomalous-gallery-delete { - display: none; -} - -.anomalous-gallery-delete:hover { - background: #ff0000; - transform: scale(1.1); -} - -.anomalous-gallery-sentinel { - height: 40px; - width: 100%; - grid-column: 1 / -1; - display: flex; - align-items: center; - justify-content: center; - color: #888; - font-size: 0.9em; -} - -.anomalous-gallery-viewer { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.95); - z-index: 9999999; - display: none; - align-items: center; - justify-content: center; -} - -dialog.anomalous-gallery-viewer[open] { - display: flex; -} - -.anomalous-gallery-viewer img { - max-width: 95%; - max-height: 95%; - object-fit: contain; - border-radius: 4px; - box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); -} - -.anomalous-gallery-viewer-close { - position: absolute; - top: 20px; - right: 30px; - font-size: 40px; - color: #ccc; - cursor: pointer; - transition: color 0.2s; - user-select: none; -} - -.anomalous-gallery-viewer-close:hover { - color: #fff; -} - -@container (max-width: 750px) { - .anomalous-nb-create-row { - padding: 8px 6px !important; - gap: 3px !important; - } - - .anomalous-nb-create-row > button { - width: 34px; - min-width: 34px; - padding: 8px 4px; - } -} - -.anomalous-nb-header-main, -.anomalous-nb-section-tabs { - display: flex; - align-items: center; -} - -.anomalous-nb-header-main { - min-width: 0; - gap: 18px; -} - -.anomalous-nb-header-main h2 { - margin: 0; - white-space: nowrap; -} - -.anomalous-nb-section-tabs { - gap: 4px; - padding: 3px; - border-radius: 8px; - background: rgba(0, 0, 0, 0.28); -} - -.anomalous-nb-section-tab { - padding: 5px 10px; - border: 0; - border-radius: 6px; - background: transparent; - color: #aaa; - cursor: pointer; -} - -.anomalous-nb-section-tab.active { - background: rgba(255, 255, 255, 0.15); - color: #fff; -} - -.theme-abyssal-scarlet .anomalous-nb-section-tab.active { - background: #dc143c; -} - -/* Workflow Recipes: Studio Topbar and Modern Layout System */ -.anomalous-recipe-body { - display: flex; - flex: 1; - min-height: 0; - flex-direction: column; - font-family: Inter, Roboto, "Segoe UI", sans-serif; - background: #111317; - overflow: hidden; -} - -/* 彻底隐匿原本粗暴占位的 Beta 警示大黄框 */ -.anomalous-recipe-beta-notice, -.anomalous-beta-notice.anomalous-recipe-beta-notice { - display: none !important; -} - -/* 一体化 Studio 沉浸顶栏 (无厚重底色，细微下划线，支持弹性折行) */ -.anomalous-recipe-topbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - min-height: 48px; - height: auto; - padding: 8px 16px; - background: rgba(18, 22, 32, 0.65); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(255, 255, 255, 0.05); - flex-shrink: 0; - flex-wrap: wrap; - z-index: 10; -} - -.anomalous-recipe-topbar-left { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - flex-shrink: 0; -} - -.anomalous-recipe-pills { - display: inline-flex; - align-items: center; - gap: 3px; - background: rgba(255, 255, 255, 0.02); - padding: 3px 4px; - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.anomalous-recipe-pill { - padding: 3px 11px; - border-radius: 14px; - font-size: 12px; - color: #94a3b8; - background: transparent; - border: none; - cursor: pointer; - transition: all 0.15s ease; - font-weight: 500; -} - -.anomalous-recipe-pill:hover { - color: #f1f5f9; - background: rgba(255, 255, 255, 0.05); -} - -.anomalous-recipe-pill.is-active { - color: var(--amb-text-main); - text-shadow: none; - font-weight: 600; - box-shadow: none; - border: 1px solid rgba(165, 180, 252, 0.35); - background: var(--amb-bg-card-hover); - border-color: var(--amb-border-hover); -} - -.anomalous-recipe-topbar-center { - display: flex; - align-items: center; - gap: 8px; - flex: 1 1 260px; - max-width: 460px; - flex-wrap: wrap; -} - -.anomalous-recipe-search-wrap { - position: relative; - display: flex; - align-items: center; - flex: 1; -} - -.anomalous-recipe-search-icon { - position: absolute; - left: 10px; - pointer-events: none; - color: #64748b; - display: flex; - align-items: center; - font-size: 13px; -} - -.anomalous-recipe-search-input { - width: 100%; - height: 30px; - padding: 0 12px 0 30px; - background: rgba(0, 0, 0, 0.28); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - color: #e2e8f0; - font-size: 12px; - outline: none; - transition: border-color 0.15s ease, background 0.15s ease; -} - -.anomalous-recipe-search-input:focus { - border-color: rgba(99, 102, 241, 0.45); - background: rgba(0, 0, 0, 0.4); -} - -.anomalous-recipe-tag-select { - height: 30px; - padding: 0 10px; - background: rgba(0, 0, 0, 0.28); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - color: #94a3b8; - font-size: 12px; - outline: none; - cursor: pointer; - max-width: 130px; -} - -.anomalous-recipe-tag-select:hover { - border-color: rgba(255, 255, 255, 0.18); -} - -.anomalous-recipe-topbar-right { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - flex-shrink: 0; -} - -.anomalous-recipe-view-switch { - display: inline-flex; - align-items: center; - background: rgba(0, 0, 0, 0.32); - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 8px; - padding: 2px; -} - -.anomalous-recipe-view-btn { - width: 26px; - height: 26px; - display: flex; - align-items: center; - justify-content: center; - border: none; - background: transparent; - color: #64748b; - border-radius: 6px; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-recipe-view-btn:hover { - color: #cbd5e1; -} - -.anomalous-recipe-view-btn.is-active { - background: rgba(255, 255, 255, 0.09); - color: #a5b4fc; -} - -.anomalous-recipe-topbar-btn { - height: 30px; - padding: 0 12px; - display: inline-flex; - align-items: center; - gap: 6px; - border-radius: 8px; - font-size: 12px; - font-weight: 500; - cursor: pointer; - transition: all 0.15s ease; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.03); - color: #cbd5e1; -} - -.anomalous-recipe-topbar-btn:hover { - background: rgba(255, 255, 255, 0.08); - color: #fff; -} - -.anomalous-recipe-topbar-btn.is-primary { - background: var(--amb-btn-primary-bg); - border-color: var(--amb-border-hover); - color: var(--amb-btn-primary-text); -} - -.anomalous-recipe-topbar-btn.is-primary:hover { - background: var(--amb-btn-primary-hover); - border-color: var(--amb-border-hover); - color: var(--amb-btn-primary-text); -} - -/* 列表容器 */ -.anomalous-recipe-list { - flex: 1; - min-height: 0; - overflow-y: auto; -} - -.anomalous-recipe-node-details { - margin-top: 2px; - border-top: 1px solid #3c3c3c; - padding-top: 7px; -} - -.anomalous-recipe-node-details > summary { - color: #a9cdff; - cursor: pointer; - user-select: none; -} - -.anomalous-recipe-node-list { - display: flex; - flex-direction: column; - gap: 8px; - padding: 8px 2px 2px; -} - -.anomalous-recipe-node { - padding: 8px; - border: 1px solid #3f3f3f; - border-radius: 7px; - background: rgba(0, 0, 0, 0.18); -} - -.anomalous-recipe-node-heading, -.anomalous-recipe-widget-row { - display: flex; - min-width: 0; - align-items: center; - gap: 6px; -} - -.anomalous-recipe-node-heading { - flex-wrap: wrap; - margin-bottom: 5px; -} - -.anomalous-recipe-widget-row { - padding: 3px 0; -} - -.anomalous-recipe-edit-param { - display: grid; - grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); - align-items: start; - gap: 8px; - padding: 7px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-recipe-edit-param .anomalous-nb-select, -.anomalous-recipe-edit-param .anomalous-nb-textarea { - width: 100%; - margin: 0; - box-sizing: border-box; -} - -.anomalous-recipe-edit-param input[type="checkbox"] { - width: auto; - min-height: 22px; - justify-self: start; -} - -.anomalous-recipe-widget-name { - flex: 0 0 34%; - overflow: hidden; - color: #aaa; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-widget-value { - flex: 1; - overflow: hidden; - color: #eee; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-copy-param { - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.05); - color: #9ec8ff; - cursor: pointer; - font-size: 1.15rem; - padding: 6px; - border-radius: 8px; - transition: background-color 0.2s, color 0.2s, transform 0.1s, border-color 0.2s; - display: flex; - align-items: center; - justify-content: center; -} - -.anomalous-recipe-copy-param:hover { - background: rgba(158, 200, 255, 0.15); - border-color: rgba(158, 200, 255, 0.3); - color: #cce0ff; -} - -.anomalous-recipe-copy-param:active { - transform: scale(0.95); -} - -.anomalous-recipe-node-hint { - display: block; - margin-top: 4px; - color: #888; -} - -@container (max-width: 680px) { - .anomalous-nb-header-main { - gap: 8px; - } - - .anomalous-nb-header-main h2 { - font-size: 1.05rem; - } -} - -.anomalous-recipe-notes { - color: #aaa; - font-size: 0.8rem; -} - -.anomalous-recipe-empty { - grid-column: 1 / -1; - color: #aaa; - text-align: center; -} - -.anomalous-recipe-dialog-overlay { - position: absolute; - z-index: 10003; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - padding: 18px; - background: rgba(0, 0, 0, 0.62); -} - -.anomalous-recipe-dialog { - display: flex; - width: min(620px, 100%); - max-height: 100%; - flex-direction: column; - gap: 12px; - overflow-y: auto; - padding: 18px; - border: 1px solid #555; - border-radius: 10px; - background: #272727; - color: #eee; - box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); -} - -.anomalous-recipe-edit-dialog { - width: min(760px, 100%); -} - -.anomalous-recipe-dialog h3, -.anomalous-recipe-dialog label { - display: flex; - flex-direction: column; - gap: 6px; - margin: 0; -} - -.anomalous-recipe-dialog-preview { - max-height: 180px; -} - -.anomalous-recipe-save-section { - display: flex; - flex-direction: column; - gap: 8px; -} - -.anomalous-recipe-dialog label.anomalous-recipe-checkbox { - flex-direction: row; - align-items: center; - gap: 8px; - cursor: pointer; -} - -.anomalous-recipe-checkbox input { - margin: 0; -} - -.anomalous-recipe-cover-choices { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); - gap: 7px; -} - -.anomalous-recipe-cover-choice { - display: flex; - min-height: 66px; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 4px; - overflow: hidden; - padding: 4px; - border: 1px solid #4a4a4a; - border-radius: 7px; - background: #191919; - color: #bbb; - cursor: pointer; -} - -.anomalous-recipe-cover-choice img { - width: 100%; - height: 58px; - border-radius: 4px; - object-fit: cover; -} - -.anomalous-recipe-cover-choice.selected { - border-color: #e5e7eb; - color: #e5e7eb; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); -} - -.theme-abyssal-scarlet .anomalous-recipe-cover-choice.selected { - border-color: #dc143c; - color: #dc143c; - box-shadow: inset 0 0 0 1px rgba(220, 20, 60, 0.35); -} - -.anomalous-recipe-pin-picker { - border: 1px solid #444; - border-radius: 8px; - padding: 9px; -} - -.anomalous-recipe-pin-picker > summary { - color: #a9cdff; - cursor: pointer; -} - -.anomalous-recipe-pin-list { - display: flex; - flex-direction: column; - gap: 4px; - padding-top: 8px; -} - -.anomalous-recipe-pin-node { - position: sticky; - top: 0; - z-index: 1; - padding: 5px 2px; - background: #272727; - color: #ddd; -} - -.anomalous-recipe-pin-choice { - display: flex; - align-items: flex-start; - gap: 7px; - padding: 4px 6px; - border-radius: 5px; - color: #bbb; - cursor: pointer; -} - -.anomalous-recipe-pin-choice:hover { - background: rgba(255, 255, 255, 0.06); -} - -.anomalous-recipe-pinned { - display: flex; - flex-direction: column; - gap: 3px; - padding: 8px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 7px; - background: rgba(255, 255, 255, 0.04); -} - -.theme-abyssal-scarlet .anomalous-recipe-pinned { - border: 1px solid rgba(220, 20, 60, 0.3); - background: rgba(220, 20, 60, 0.05); -} - -.anomalous-recipe-history-list { - display: flex; - flex-direction: column; - gap: 7px; - padding-top: 8px; -} - -.anomalous-recipe-history-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - padding: 7px; - border: 1px solid #3f3f3f; - border-radius: 7px; - color: #c9c9c9; - font-size: 0.82rem; -} - -.anomalous-recipe-history-row > span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Recipe detail panel: one scroll owner inside the Notebook modal. */ -.anomalous-recipe-detail-view { - display: flex; - min-height: 0; - flex: 1; - flex-direction: column; - overflow: hidden; - background: #202020; - font-family: Inter, Roboto, "Segoe UI", sans-serif; -} - -.anomalous-recipe-detail-header, -.anomalous-recipe-detail-section-heading { - display: flex; - align-items: center; - gap: 10px; -} - -.anomalous-recipe-detail-header { - flex: 0 0 auto; - justify-content: space-between; - padding: 14px 18px; - border-bottom: 1px solid #3d3d3d; -} - -.anomalous-recipe-detail-header h3, -.anomalous-recipe-detail-section h4 { - margin: 0; -} - -.anomalous-recipe-detail-tabs { - display: flex; - flex: 0 0 auto; - gap: 4px; - overflow-x: auto; - padding: 8px 18px; - border-bottom: 1px solid #3d3d3d; - background: #252525; -} - -.anomalous-recipe-detail-tab { - padding: 7px 11px; - border: 1px solid transparent; - border-radius: 7px; - color: #aaa; - background: transparent; - cursor: pointer; - white-space: nowrap; -} - -.anomalous-recipe-detail-tab.active { - border-color: rgba(255, 255, 255, 0.25); - color: #ffffff; - background: rgba(255, 255, 255, 0.1); -} - -.theme-abyssal-scarlet .anomalous-recipe-detail-tab.active { - border-color: rgba(220, 20, 60, 0.45); - color: #dc143c; - background: rgba(220, 20, 60, 0.08); -} - -.anomalous-recipe-detail-content { - flex: 1; - min-height: 0; - overflow-y: auto; - padding: 16px 20px 48px 20px; - box-sizing: border-box; -} - -.anomalous-recipe-gallery { - min-width: 0; -} - -.anomalous-recipe-gallery-refresh { - margin-left: auto; -} - -.anomalous-recipe-gallery-grid { - column-width: 210px; - column-gap: 12px; -} - -.anomalous-recipe-gallery-card { - position: relative; - display: inline-block; - width: 100%; - margin: 0 0 12px; - overflow: hidden; - border: 1px solid #404040; - border-radius: 9px; - background: #171717; - break-inside: avoid; -} - -.anomalous-recipe-gallery-card img { - display: block; - width: 100%; - max-height: 480px; - cursor: zoom-in; - object-fit: contain; - background: #101010; -} - -.anomalous-recipe-gallery-card-actions { - position: absolute; - right: 8px; - bottom: 8px; - display: flex; - opacity: 0; - transform: translateY(4px); - transition: opacity 160ms ease, transform 160ms ease; -} - -.anomalous-recipe-gallery-card:hover .anomalous-recipe-gallery-card-actions, -.anomalous-recipe-gallery-card:focus-within .anomalous-recipe-gallery-card-actions { - opacity: 1; - transform: translateY(0); -} - -.anomalous-recipe-gallery-card-actions button { - box-shadow: none; -} - -.anomalous-recipe-gallery-comparison { - max-height: 260px; - overflow-y: auto; - padding: 10px; - border-top: 1px solid #3d3d3d; - background: #202020; - font-size: 0.82rem; -} - -.anomalous-recipe-gallery-comparison > strong { - display: block; - margin-bottom: 6px; -} - -.anomalous-recipe-gallery-diff-row { - padding: 7px 0; - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-recipe-gallery-diff-values { - display: grid; - gap: 4px; - margin-top: 4px; - color: #c8c8c8; - overflow-wrap: anywhere; -} - -.anomalous-recipe-detail-overview, -.anomalous-recipe-detail-section { - display: flex; - flex-direction: column; - gap: 10px; -} - -.anomalous-recipe-detail-hero { - display: grid; - grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); - gap: 14px; - align-items: stretch; -} - -.anomalous-recipe-detail-hero img { - width: 100%; - max-height: 190px; - min-height: 120px; - border-radius: 9px; - object-fit: contain; - background: #111; -} - -.anomalous-recipe-detail-hero video { - width: 100%; - max-height: 190px; - min-height: 120px; - border-radius: 9px; - object-fit: contain; - background: #111; -} - -.anomalous-recipe-detail-hero-copy { - display: flex; - min-width: 0; - flex-direction: column; - gap: 7px; - justify-content: center; -} - -.anomalous-recipe-inline-title-row { - min-width: 0; -} - -.anomalous-recipe-inline-title { - max-width: 100%; - overflow: hidden; - padding: 0; - border: 0; - color: #f1f1f1; - background: transparent; - cursor: text; - font: inherit; - font-size: 1.35rem; - font-weight: 700; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-inline-title:hover, -.anomalous-recipe-inline-editable:hover { - color: #a9cdff; -} - -.anomalous-recipe-inline-input { - width: 100%; - min-width: 0; - box-sizing: border-box; - padding: 7px 9px; - border: 1px solid rgba(112, 178, 255, 0.7); - border-radius: 7px; - color: #f4f4f4; - background: #161616; - font: inherit; -} - -.anomalous-recipe-inline-editor.is-multiline .anomalous-recipe-inline-input { - resize: vertical; -} - -.anomalous-recipe-inline-controls { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; - margin-top: 6px; -} - -.anomalous-recipe-inline-editable { - flex: 1; - min-width: 0; - cursor: text; -} - -.anomalous-recipe-inline-edit-button { - padding: 2px 6px; - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 6px; - color: #a9cdff; - background: transparent; - cursor: pointer; - font-size: 0.72rem; -} - -.anomalous-recipe-detail-advanced, -.anomalous-recipe-advanced-info { - color: #aaa; - font-size: 0.78rem; -} - -.anomalous-recipe-advanced-info > summary { - display: inline-flex; - align-items: center; - gap: 6px; - color: #a9cdff; - cursor: pointer; - user-select: none; - padding: 6px 12px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - transition: background-color 0.2s, color 0.2s, border-color 0.2s; - outline: none; - font-size: 0.85rem; -} - -.anomalous-recipe-advanced-info > summary:hover, -.anomalous-recipe-advanced-info > summary:focus-visible { - background: rgba(169, 205, 255, 0.15); - border-color: rgba(169, 205, 255, 0.3); - color: #cce0ff; -} - -.anomalous-recipe-advanced-row { - display: flex; - min-width: 0; - flex-wrap: wrap; - align-items: center; - gap: 7px; - margin-top: 7px; - padding: 7px 8px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 7px; - background: rgba(0, 0, 0, 0.14); -} - -.anomalous-recipe-advanced-row code { - min-width: 0; - overflow-wrap: anywhere; -} - -.anomalous-recipe-model-hash { - width: 100%; -} - -.anomalous-recipe-detail-hero-copy h3 { - margin: 0; - color: #f1f1f1; - font-size: 1.35rem; -} - -.anomalous-recipe-detail-hero-copy p { - margin: 0; - white-space: pre-wrap; -} - -.anomalous-recipe-detail-notes { - display: flex; - min-width: 0; - gap: 6px; - align-items: start; -} - -.anomalous-recipe-detail-notes p { flex: 1; } - -.anomalous-recipe-detail-muted { - color: #999; -} - -.anomalous-recipe-detail-stats, -.anomalous-recipe-detail-summary-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); - gap: 8px; -} - -.anomalous-recipe-detail-stat, -.anomalous-recipe-detail-summary-grid > div { - display: grid; - min-width: 0; - grid-template-columns: max-content minmax(0, 1fr); - align-items: start; - gap: 4px; - padding: 9px 10px; - border: 1px solid #3e3e3e; - border-radius: 8px; - background: rgba(0, 0, 0, 0.16); -} - -.anomalous-recipe-detail-stat-label, -.anomalous-recipe-detail-label { - color: #999; - font-size: 0.8rem; - word-break: break-all; - overflow-wrap: anywhere; -} - -.anomalous-recipe-detail-stat strong { - color: #eee; -} - -.anomalous-recipe-detail-stat-good { color: #6ee7b7 !important; } -.anomalous-recipe-detail-stat-warn { color: #ffd493 !important; } - -.anomalous-recipe-model-composition { - display: grid; - gap: 8px; - margin-bottom: 10px; -} - -.anomalous-recipe-model-composition h5 { - margin: 0; - color: #ddd; - font-size: 0.9rem; -} - -.anomalous-recipe-model-composition-grid { - display: grid; - min-width: 0; - grid-template-columns: minmax(0, 1fr); - gap: 8px; -} - -.anomalous-recipe-model-composition-card { - display: grid; - min-width: 0; - gap: 5px; - padding: 9px 10px; - border: 1px solid #414141; - border-radius: 8px; - background: rgba(0, 0, 0, 0.14); -} - -.anomalous-recipe-model-composition-card.is-base-model { - border-color: rgba(110, 231, 183, 0.35); - background: rgba(110, 231, 183, 0.05); -} - -.anomalous-recipe-model-composition-value .anomalous-recipe-detail-full-value { - overflow-wrap: anywhere; -} - -.anomalous-recipe-detail-summary-grid > div { - gap: 12px; -} - -.anomalous-recipe-detail-summary-grid > .is-wide { - grid-column: 1 / -1; -} - -.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-label { - padding-top: 6px; - white-space: nowrap; -} - -.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-value-viewer { - width: 100%; -} - -.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-full-value { - overflow-wrap: anywhere; - white-space: pre-wrap; -} - -.anomalous-recipe-detail-section { - margin-bottom: 12px; - padding: 12px; - border: 1px solid #3d3d3d; - border-radius: 10px; - background: #292929; -} - -.anomalous-recipe-detail-section-heading { - flex-wrap: wrap; - justify-content: space-between; -} - -.anomalous-recipe-detail-section-heading small { - margin-left: auto; -} - -.anomalous-recipe-refresh-button { - position: relative; - transition: opacity 0.2s ease, filter 0.2s ease; -} - -.anomalous-recipe-refresh-button.is-loading { - cursor: wait; - opacity: 0.78; - filter: saturate(0.8); -} - -.anomalous-recipe-refresh-button.is-loading::before { - content: '↻'; - display: inline-block; - margin-right: 5px; - animation: anomalous-recipe-spin 0.9s linear infinite; -} - -@keyframes anomalous-recipe-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.anomalous-recipe-detail-actions { margin-top: 2px; } - -.anomalous-recipe-identity-badge { - box-sizing: border-box; - min-width: 0; - max-width: 100%; - padding: 2px 6px; - border: 1px solid; - border-radius: 4px; - font-size: 0.65rem; - font-weight: 600; - white-space: normal; - overflow-wrap: anywhere; - display: inline-flex; - align-items: center; -} -.anomalous-recipe-identity-badge > span:first-child { - min-width: 0; - overflow-wrap: anywhere; -} -.anomalous-recipe-identity-badge-wrap { - display: inline-flex; - min-width: 0; - max-width: 100%; - flex: 0 1 auto; - flex-wrap: wrap; - align-items: center; -} - -.anomalous-recipe-identity-help { - display: inline-flex; - width: 16px; - height: 16px; - align-items: center; - justify-content: center; - padding: 0; - border: 1px solid currentColor; - border-radius: 50%; - color: inherit; - background: transparent; - font-weight: normal; - opacity: 0.6; - margin-left: 2px; - cursor: pointer; -} - -.anomalous-recipe-identity-help:hover, -.anomalous-recipe-identity-help:focus-visible { - opacity: 1; - outline: 2px solid rgba(255, 255, 255, 0.3); - outline-offset: 1px; -} - -.anomalous-recipe-identity-explanation { - display: none; - flex: 0 0 100%; - max-width: min(340px, calc(100vw - 48px)); - padding: 9px 11px; - border: 1px solid rgba(255, 255, 255, 0.18); - border-radius: 7px; - color: #fff; - background: rgba(20, 22, 28, 0.98); - box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); - font-size: 0.78rem; - font-weight: 400; - line-height: 1.45; - white-space: normal; - overflow-wrap: anywhere; -} - -.anomalous-recipe-identity-badge-wrap.is-open .anomalous-recipe-identity-explanation { - display: block; -} - -.anomalous-recipe-identity-verified { - border-color: rgba(110, 231, 183, 0.55); - color: #6ee7b7; -} - -.anomalous-recipe-identity-unverified { - border-color: rgba(255, 212, 147, 0.55); - color: #ffd493; -} - -.anomalous-recipe-identity-unavailable { - border-color: rgba(255, 119, 119, 0.55); - color: #ff9999; -} - -.anomalous-recipe-model-reference-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - align-items: stretch; - gap: 12px; -} - -@container (max-width: 680px) { - .anomalous-recipe-model-reference-list { - grid-template-columns: 1fr; - } - .anomalous-recipe-model-reference-body { - flex-direction: row; - align-items: flex-start; - } - .anomalous-recipe-model-preview { - max-width: 120px; - height: 100px; - flex: 0 0 100px; - } -} - -.anomalous-recipe-detail-parameter-list, -.anomalous-recipe-version-timeline { - display: flex; - flex-direction: column; - gap: 9px; -} - -.anomalous-recipe-parameter-notebook-layout { - display: grid; - min-width: 0; - grid-template-columns: clamp(230px, 24vw, 290px) minmax(0, 1fr); - gap: 14px; - align-items: start; -} - -.anomalous-recipe-parameter-notebook-sidebar { - position: sticky; - top: 0; - display: flex; - min-width: 0; - max-height: min(720px, 80vh); - flex-direction: column; - gap: 8px; - padding: 12px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 12px; - background: linear-gradient(180deg, rgba(28, 30, 36, 0.75), rgba(18, 19, 23, 0.85)); - backdrop-filter: blur(10px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); - overflow: hidden; -} - -.anomalous-recipe-parameter-notebook-sidebar .anomalous-recipe-detail-section-heading { - align-items: center; - justify-content: space-between; -} - -.anomalous-recipe-parameter-notebook-list { - display: flex; - min-height: 0; - flex-direction: column; - gap: 6px; - overflow-y: auto; - padding-right: 2px; -} - -.anomalous-model-location { - display: grid; - gap: 7px; - margin-bottom: 12px; - padding: 10px 12px; - border: 1px solid var(--border-color, #444); - border-radius: 7px; - background: rgba(255, 255, 255, 0.025); -} - -.anomalous-model-location-row { - min-width: 0; - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: 9px; - align-items: baseline; -} - -.anomalous-model-location-label { - color: #9aa0a6; - font-size: 0.78em; -} - -.anomalous-model-location code { - min-width: 0; - color: #d7dbe5; - font-size: 0.76em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.anomalous-model-location-copy { - justify-self: start; - padding: 4px 9px; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 5px; - background: rgba(255, 255, 255, 0.06); - color: #e5e7eb; - cursor: pointer; - font-size: 0.75em; -} - -.anomalous-beta-notice { - display: flex; - min-width: 0; - align-items: flex-start; - gap: 9px; - margin: 10px 14px 0; - padding: 9px 11px; - border: 1px solid rgba(245, 190, 73, 0.38); - border-radius: 9px; - color: #e9d7aa; - background: linear-gradient(110deg, rgba(245, 158, 11, 0.13), rgba(245, 158, 11, 0.04)); - font-size: 0.78rem; - line-height: 1.45; -} - -.anomalous-beta-notice > span { - min-width: 0; - overflow-wrap: anywhere; -} - -.anomalous-beta-badge { - flex: 0 0 auto; - padding: 2px 7px; - border: 1px solid rgba(251, 191, 36, 0.5); - border-radius: 999px; - color: #ffe4a3; - background: rgba(245, 158, 11, 0.12); - font-size: 0.7rem; - white-space: nowrap; -} - -.anomalous-assistant-beta-notice { - margin: 10px 12px 0; - flex-shrink: 0; -} - -.anomalous-recipe-parameter-notebook-row { - display: grid; - min-width: 0; - grid-template-columns: minmax(0, 1fr) 30px; - gap: 5px; - align-items: stretch; - transition: opacity 0.16s ease, transform 0.16s ease; -} - -.anomalous-recipe-parameter-notebook-row.is-deleting { - opacity: 0.48; - transform: scale(0.98); - pointer-events: none; -} - -.anomalous-recipe-parameter-notebook-item { - display: flex; - min-width: 0; - flex-direction: column; - align-items: flex-start; - gap: 3px; - padding: 8px 9px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 7px; - color: #ddd; - background: rgba(255, 255, 255, 0.03); - text-align: left; - cursor: pointer; - transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease; -} - -.anomalous-recipe-parameter-notebook-item:active, -.anomalous-recipe-parameter-notebook-item.is-switching { - transform: scale(0.98); - opacity: 0.72; -} - -.anomalous-recipe-parameter-notebook-item:hover, -.anomalous-recipe-parameter-notebook-item.is-active { - border-color: rgba(110, 231, 183, 0.58); - color: #c5f7df; - background: rgba(110, 231, 183, 0.1); -} - -.anomalous-recipe-parameter-notebook-item > * { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-parameter-notebook-rename, -.anomalous-recipe-parameter-notebook-delete { - display: grid; - place-items: center; - min-width: 30px; - padding: 0; - border: 1px solid rgba(255, 255, 255, 0.09); - border-radius: 7px; - color: #9da5b1; - background: rgba(255, 255, 255, 0.025); - cursor: pointer; - font-size: 0.9rem; - line-height: 1; - transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease; -} - -.anomalous-recipe-parameter-notebook-rename:hover, -.anomalous-recipe-parameter-notebook-rename:focus-visible { - border-color: rgba(96, 165, 250, 0.55); - color: #bfdbfe; - background: rgba(96, 165, 250, 0.12); -} - -.anomalous-recipe-parameter-notebook-delete:hover, -.anomalous-recipe-parameter-notebook-delete:focus-visible { - border-color: rgba(248, 113, 113, 0.55); - color: #fecaca; - background: rgba(248, 113, 113, 0.12); -} - -.anomalous-recipe-parameter-notebook-rename:active, -.anomalous-recipe-parameter-notebook-delete:active { transform: scale(0.92); } - -.anomalous-recipe-detail-parameters { - min-width: 0; -} - -.anomalous-recipe-detail-parameters.is-switching { - animation: anomalous-recipe-parameter-panel-switch 360ms ease-out; -} - -.anomalous-recipe-parameter-selection-banner { - display: flex; - min-width: 0; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 10px; - padding: 11px 13px; - border: 1px solid rgba(110, 231, 183, 0.48); - border-radius: 10px; - background: linear-gradient(100deg, rgba(110, 231, 183, 0.15), rgba(110, 231, 183, 0.04)); - box-shadow: inset 3px 0 0 rgba(110, 231, 183, 0.82); -} - -.anomalous-recipe-parameter-selection-copy { - display: flex; - min-width: 0; - flex-direction: column; - gap: 2px; -} - -.anomalous-recipe-parameter-selection-copy strong { - overflow: hidden; - color: #d5fbe9; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-parameter-selection-badge { - flex: 0 0 auto; - padding: 4px 8px; - border: 1px solid rgba(110, 231, 183, 0.55); - border-radius: 999px; - color: #bff5d9; - background: rgba(110, 231, 183, 0.12); - font-size: 0.78rem; - font-weight: 700; - white-space: nowrap; -} - -@keyframes anomalous-recipe-parameter-panel-switch { - 0% { - opacity: 0.58; - transform: translateX(12px); - filter: saturate(1.35); - } - 100% { - opacity: 1; - transform: translateX(0); - filter: saturate(1); - } -} - -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} - -.anomalous-recipe-parameter-editor { - min-width: 0; -} - -.anomalous-recipe-parameter-editor-name { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: 10px; - align-items: center; - margin-bottom: 12px; - color: #bbb; -} - -.anomalous-recipe-parameter-editor-name input, -.anomalous-recipe-parameter-editor-input { - min-width: 0; - padding: 8px 10px; - border: 1px solid #4a4a4a; - border-radius: 7px; - color: #eee; - background: #181818; - font: inherit; -} - -.anomalous-recipe-parameter-editor-input { - width: 100%; - resize: vertical; -} - -.anomalous-recipe-parameter-editor-input:focus, -.anomalous-recipe-parameter-editor-name input:focus { - border-color: rgba(110, 231, 183, 0.7); - outline: none; -} - -.anomalous-recipe-parameter-editor-input.is-invalid { - border-color: rgba(255, 119, 119, 0.9); -} - -.anomalous-recipe-parameter-editor-row { - grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr); -} - -.anomalous-recipe-model-reference, -.anomalous-recipe-detail-parameter-node, -.anomalous-recipe-version-row { - padding: 9px 10px; - border: 1px solid #414141; - border-radius: 8px; - background: rgba(0, 0, 0, 0.15); -} - -.anomalous-recipe-model-reference { - display: flex; - min-width: 0; - height: 100%; - flex-direction: column; -} - -.anomalous-recipe-model-reference-body { - display: flex; - min-width: 0; - gap: 11px; - flex: 1; - flex-direction: column; -} - -.anomalous-recipe-model-reference-details { - display: flex; - min-width: 0; - flex: 1; - flex-direction: column; -} - -.anomalous-recipe-model-preview { - position: relative; - display: flex; - width: 100%; - height: 140px; - flex: 0 0 140px; - flex-direction: column; - align-items: center; - justify-content: center; - overflow: hidden; - border: 1px solid #464646; - border-radius: 7px; - color: #a9cdff; - background: #151515; - text-align: center; -} - -.anomalous-recipe-model-preview.is-clickable { - cursor: pointer; - border-color: rgba(112, 178, 255, 0.58); - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -.anomalous-recipe-model-preview.is-clickable:hover { - transform: translateY(-2px); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); -} - -.anomalous-recipe-model-preview img, -.anomalous-recipe-model-preview video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.anomalous-recipe-model-preview small { - position: absolute; - max-width: calc(100% - 12px); - overflow: hidden; - padding: 2px 4px; - border-radius: 4px; - color: #ddd; - background: rgba(0, 0, 0, 0.68); - font-size: 0.64rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-model-preview.empty small { - position: static; - max-width: calc(100% - 12px); - padding: 0; - color: #888; - background: transparent; - white-space: normal; -} - -.anomalous-recipe-model-reference-top, -.anomalous-recipe-model-reference-meta, -.anomalous-recipe-detail-parameter-row, -.anomalous-recipe-version-row { - display: flex; - min-width: 0; - align-items: center; - gap: 8px; -} - -.anomalous-recipe-model-reference-top { - width: 100%; - flex-wrap: wrap; -} -.anomalous-recipe-model-reference-top strong { - min-width: 0; - margin-right: auto; -} - -.anomalous-recipe-model-name { - min-width: 0; - max-width: 100%; - overflow: hidden; - padding: 3px 7px; - border: 1px solid transparent; - border-radius: 6px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-model-name.is-resolved { - border-color: rgba(110, 231, 183, 0.42); - color: #b8f5d8; - background: rgba(110, 231, 183, 0.08); - cursor: pointer; -} - -.anomalous-recipe-model-name.is-unresolved { - border-color: rgba(255, 255, 255, 0.08); - color: #999; - background: rgba(0, 0, 0, 0.12); -} - -.anomalous-recipe-model-name-block { - display: flex; - flex-direction: column; - gap: 4px; - margin: 6px 0; -} - -.anomalous-recipe-model-name-row { - min-width: 0; - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; -} - -.anomalous-recipe-model-subtitle { - font-size: 0.75rem; - color: rgba(255, 255, 255, 0.4); - word-break: break-all; - padding-left: 2px; -} - -.anomalous-recipe-civitai-btn { - font-size: 0.75rem; - color: #3b82f6; - text-decoration: none; - border: 1px solid rgba(59, 130, 246, 0.3); - padding: 2px 8px; - border-radius: 4px; - background: rgba(59, 130, 246, 0.1); - transition: all 0.2s ease; - white-space: nowrap; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.anomalous-recipe-civitai-btn:hover { - background: rgba(59, 130, 246, 0.2); - border-color: rgba(59, 130, 246, 0.5); - color: #60a5fa; -} - -.anomalous-recipe-model-reference.is-unresolved { - border-color: rgba(255, 212, 147, 0.28); -} - -.anomalous-recipe-model-match-status { - flex: 1; - min-width: 120px; -} - -.anomalous-recipe-model-match { - padding: 4px 8px; - border-radius: 7px; - font-size: 0.76rem; -} - -.anomalous-recipe-model-path { - width: 100%; -} - -.anomalous-recipe-model-reference-value { - margin: 6px 0; -} - -.anomalous-recipe-model-reference-meta { - flex-wrap: wrap; - color: #aaa; - font-size: 0.8rem; -} - -.anomalous-recipe-detail-search { - min-width: 180px; - flex: 1; - padding: 7px 9px; - border: 1px solid #555; - border-radius: 6px; - color: #eee; - background: #161616; -} - -.anomalous-recipe-detail-parameter-node { - display: flex; - flex-direction: column; - gap: 7px; -} - -.anomalous-recipe-detail-parameter-row { - display: grid; - grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr); - align-items: start; - padding-top: 6px; - border-top: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-recipe-detail-parameter-row .anomalous-recipe-detail-label { - padding-top: 5px; -} - -.anomalous-recipe-detail-value-viewer { - display: grid; - min-width: 0; - grid-template-columns: minmax(0, 1fr) auto; - gap: 5px 8px; - align-items: start; -} - -.anomalous-recipe-detail-full-value { - min-width: 0; - padding: 6px 8px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 6px; - color: #e7e7e7; - background: rgba(0, 0, 0, 0.18); - overflow-wrap: anywhere; - white-space: pre-wrap; -} - -.anomalous-recipe-detail-full-value.is-collapsed { - display: -webkit-box; - max-height: 5.4em; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - -.anomalous-recipe-detail-value-toggle { - grid-column: 1; - justify-self: start; - padding: 2px 0; - border: 0; - color: #9fc4ff; - background: transparent; - cursor: pointer; - font-size: 0.78rem; -} - -.anomalous-recipe-detail-copy { - grid-column: 2; - grid-row: 1; -} - -.anomalous-recipe-detail-prompt-list { - display: grid; - gap: 8px; -} - -.anomalous-recipe-detail-prompt { - display: flex; - flex-direction: column; - gap: 10px; - padding: 14px 16px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-left: 4px solid #7d8796; - border-radius: 10px; - background: rgba(255, 255, 255, 0.025); - transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease; - margin-bottom: 8px; -} - -.anomalous-recipe-detail-prompt:hover { - background: rgba(255, 255, 255, 0.035); - border-color: rgba(255, 255, 255, 0.14); -} - -.anomalous-recipe-detail-prompt.is-saving { opacity: 0.55; } -.anomalous-recipe-prompt-role-positive { border-left-color: #10b981 !important; } -.anomalous-recipe-prompt-role-negative { border-left-color: #f43f5e !important; } -.anomalous-recipe-prompt-role-both { border-left-color: #a855f7 !important; } -.anomalous-recipe-prompt-role-ignored, -.anomalous-recipe-prompt-role-unknown { border-left-color: #64748b !important; } - -.anomalous-recipe-prompt-card-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; -} - -.anomalous-recipe-prompt-card-header-left { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - min-width: 0; - flex: 1; -} - -.anomalous-recipe-prompt-card-action-tray { - display: flex; - align-items: center; - gap: 6px; - flex-shrink: 0; -} - -.anomalous-recipe-prompt-role-badge.is-interactive { - cursor: pointer; - display: inline-flex; - align-items: center; - gap: 5px; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 6px; - padding: 3px 8px; - font-size: 0.74rem; - font-weight: 600; - background: rgba(255, 255, 255, 0.05); - color: #e2e8f0; - transition: all 0.15s ease; -} - -.anomalous-recipe-prompt-role-badge.is-interactive:hover { - background: rgba(255, 255, 255, 0.12); - border-color: rgba(255, 255, 255, 0.25); - transform: translateY(-1px); -} - -.anomalous-recipe-prompt-role-badge.is-positive { - background: rgba(16, 185, 129, 0.12); - border-color: rgba(16, 185, 129, 0.3); - color: #34d399; -} - -.anomalous-recipe-prompt-role-badge.is-negative { - background: rgba(244, 63, 94, 0.12); - border-color: rgba(244, 63, 94, 0.3); - color: #fb7185; -} - -.anomalous-recipe-prompt-card-node-title { - font-size: 0.84rem; - font-weight: 600; - color: #e2e8f0; -} - -.anomalous-recipe-prompt-card-node-type { - font-size: 0.74rem; - color: #64748b; -} - -.anomalous-recipe-prompt-card-body { - width: 100%; -} - -.anomalous-recipe-prompt-card-body .anomalous-recipe-detail-value-viewer { - display: block; - width: 100%; -} - -.anomalous-recipe-prompt-card-body .anomalous-recipe-detail-full-value { - width: 100%; - box-sizing: border-box; - padding: 12px 14px; - border-radius: 8px; - background: rgba(0, 0, 0, 0.22); - border: 1px solid rgba(255, 255, 255, 0.06); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - font-size: 0.84rem; - line-height: 1.6; - color: #cbd5e1; -} - -.anomalous-recipe-prompt-meta { - display: flex; - min-width: 0; - align-items: center; - gap: 8px; -} - -.anomalous-recipe-prompt-meta strong, -.anomalous-recipe-prompt-meta small { - max-width: 100%; - overflow-wrap: anywhere; -} - -.anomalous-recipe-prompt-role-badge { - display: inline-flex; - width: fit-content; - padding: 2px 7px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 999px; - color: #cbd5e1; - background: rgba(255, 255, 255, 0.05); - font-size: 0.72rem; -} - -.anomalous-recipe-prompt-role-badge.is-positive { color: #9af0d0; border-color: rgba(110, 231, 183, 0.35); } -.anomalous-recipe-prompt-role-badge.is-negative { color: #f2a8b3; border-color: rgba(223, 141, 154, 0.38); } -.anomalous-recipe-prompt-role-badge.is-both { color: #d6c4ff; border-color: rgba(196, 167, 255, 0.4); } - -.anomalous-recipe-prompt-role-select { - width: 100%; - min-width: 0; - padding: 6px 28px 6px 8px; - border: 1px solid rgba(159, 196, 255, 0.3); - border-radius: 7px; - color: var(--input-text, #e8eef7); - background: var(--comfy-input-bg, #24272d); - cursor: pointer; -} - -.anomalous-recipe-prompt-role-select:focus-visible { - outline: 2px solid rgba(80, 170, 255, 0.7); - outline-offset: 1px; -} - -.anomalous-recipe-prompt-value { min-width: 0; } - -.anomalous-recipe-version-row { - justify-content: space-between; - flex-wrap: wrap; -} - -.anomalous-recipe-version-row > div { - display: flex; - min-width: 150px; - flex-direction: column; - gap: 4px; -} - -.anomalous-recipe-version-row.current { - border-color: rgba(255, 255, 255, 0.35); -} - -.theme-abyssal-scarlet .anomalous-recipe-version-row.current { - border-color: rgba(220, 20, 60, 0.55); -} - -@media (max-width: 820px) { - .anomalous-recipe-detail-hero { grid-template-columns: 1fr; } - .anomalous-recipe-detail-hero img { max-height: 180px; } - .anomalous-recipe-detail-content { padding: 10px; } - .anomalous-recipe-detail-header { padding: 10px; } - .anomalous-recipe-detail-header h3 { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .anomalous-recipe-model-preview { height: 110px; flex-basis: 110px; } - .anomalous-recipe-parameter-notebook-layout { grid-template-columns: 1fr; } - .anomalous-recipe-parameter-notebook-sidebar { position: static; max-height: none; } - .anomalous-recipe-parameter-editor-name { grid-template-columns: 1fr; gap: 5px; } -} - -@media (max-width: 560px) { - .anomalous-recipe-edit-param { - grid-template-columns: 1fr; - } -} - -.anomalous-recipe-dialog-error { - min-height: 1em; - color: #ff7777; - font-size: 0.8rem; -} - -.anomalous-model-settings-overlay { - position: absolute; - inset: 0; - z-index: 10020; - display: flex; - align-items: center; - justify-content: center; - padding: 24px; - box-sizing: border-box; - background: rgba(8, 9, 12, 0.78); - backdrop-filter: blur(8px); -} - -.anomalous-model-settings-overlay[hidden] { - display: none; -} - -.anomalous-model-settings-dialog { - width: min(560px, 100%); - padding: 24px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 16px; - box-sizing: border-box; - color: #f3f4f6; - background: linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98)); - box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); -} - -.anomalous-model-settings-dialog h2 { - margin: 0 0 6px; - font-size: 1.3em; -} - -.anomalous-model-settings-description { - margin: 0 0 18px; - color: #aeb3bd; - font-size: 0.9em; - line-height: 1.55; -} - -.anomalous-model-setting-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 18px; - padding: 16px 0; - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-model-setting-copy { - display: flex; - flex: 1; - min-width: 0; - flex-direction: column; - gap: 5px; -} - -.anomalous-model-setting-copy small { - color: #9da3ad; - line-height: 1.45; -} - -.anomalous-model-setting-select { - width: 190px; - max-width: 44%; - padding: 9px 10px; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 8px; - color: #f5f5f5; - background: #17181c; - cursor: pointer; -} - -.anomalous-model-settings-note { - margin-top: 4px; - padding: 10px 12px; - border-radius: 8px; - color: #a9c8ee; - background: rgba(80, 145, 220, 0.1); - font-size: 0.82em; - line-height: 1.45; -} - -.anomalous-model-settings-close { - display: block; - min-width: 96px; - margin: 20px 0 0 auto; - padding: 9px 18px; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 8px; - color: #fff; - background: #3f73b9; - cursor: pointer; -} - -@media (max-width: 620px) { - .anomalous-model-setting-row { - align-items: stretch; - flex-direction: column; - gap: 10px; - } - - .anomalous-model-setting-select { - width: 100%; - max-width: none; - } -} - -/* Recipe library discovery and semantic version diff. */ -.anomalous-recipe-actionbar { - flex-wrap: wrap; - align-items: center; - gap: 8px; -} - -.anomalous-recipe-search { - min-width: 220px; - flex: 1 1 240px; -} - -.anomalous-recipe-filter-tags { - display: flex; - flex: 1 1 100%; - flex-wrap: wrap; - gap: 5px; - align-items: center; -} - -.anomalous-recipe-filter-tag { - border: 1px solid rgba(138, 180, 248, 0.42); - border-radius: 999px; - background: rgba(138, 180, 248, 0.08); - color: #cfe1ff; - padding: 3px 9px; - cursor: pointer; -} - -.anomalous-recipe-filter-tag:hover, -.anomalous-recipe-filter-tag.active { - background: rgba(138, 180, 248, 0.28); - color: #fff; -} - -.anomalous-recipe-filter-summary { - color: #9caec4; - white-space: nowrap; -} - -.anomalous-recipe-badge-tag { - border: 0; - cursor: pointer; -} - -.anomalous-recipe-version-diff { - flex: 1 1 100%; - margin-top: 8px; - padding: 9px; - border-left: 2px solid rgba(138, 180, 248, 0.42); - background: rgba(0, 0, 0, 0.14); -} - -.anomalous-recipe-diff-group { - margin-top: 8px; -} - -.anomalous-recipe-diff-group h5 { - margin: 4px 0; - color: #cfe1ff; -} - -.anomalous-recipe-diff-row { - display: grid; - grid-template-columns: 18px minmax(0, 1fr); - align-items: start; - gap: 7px; - margin-top: 6px; - padding: 8px; - min-width: 0; - border: 1px solid rgba(255, 255, 255, 0.07); - border-radius: 7px; - background: rgba(0, 0, 0, 0.1); -} - -.anomalous-recipe-diff-marker { - width: 16px; - text-align: center; - font-weight: 700; -} - -.anomalous-recipe-diff-added .anomalous-recipe-diff-marker, -.anomalous-recipe-diff-added .anomalous-recipe-diff-after { color: #6ee7b7; } -.anomalous-recipe-diff-removed .anomalous-recipe-diff-marker, -.anomalous-recipe-diff-removed .anomalous-recipe-diff-before { color: #ff9a9a; } -.anomalous-recipe-diff-changed .anomalous-recipe-diff-marker { color: #ffd493; } - -.anomalous-recipe-diff-label { - min-width: 0; - padding-top: 3px; -} - -.anomalous-recipe-diff-arrow { display: none; } - -.anomalous-recipe-diff-values { - display: grid; - grid-column: 2; - grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); - gap: 7px; - min-width: 0; -} - -.anomalous-recipe-diff-value { - min-width: 0; - padding: 7px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.025); -} - -.anomalous-recipe-diff-value-before { border-left: 2px solid rgba(255, 154, 154, 0.66); } -.anomalous-recipe-diff-value-after { border-left: 2px solid rgba(110, 231, 183, 0.66); } -.anomalous-recipe-diff-value .anomalous-recipe-detail-value-viewer { margin-top: 4px; } -.anomalous-recipe-diff-value .anomalous-recipe-detail-full-value { font-size: 0.78rem; } - -@media (max-width: 720px) { - .anomalous-recipe-diff-values { grid-template-columns: 1fr; } - .anomalous-recipe-detail-prompt, - .anomalous-recipe-detail-parameter-row { grid-template-columns: 1fr; } - .anomalous-recipe-detail-prompt-label, - .anomalous-recipe-detail-parameter-row .anomalous-recipe-detail-label { padding-top: 0; } -} - -/* Secondary Actions Group */ -.anomalous-recipe-actions-secondary { - display: flex; - gap: 6px; - align-items: center; -} - -/* Primary Actions Group */ -.anomalous-recipe-actions-primary { - display: flex; - gap: 6px; - align-items: center; - margin-left: auto; -} - -.anomalous-recipe-header-status { - max-width: 190px; - color: rgba(190, 205, 225, 0.78); - font-size: 0.75rem; - line-height: 1.25; - white-space: normal; - text-align: right; -} - -/* Icon Button (for actions & tools) */ -.anomalous-btn-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - padding: 0; - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.09)); - border-radius: var(--amb-radius-control, 6px); - background: rgba(255, 255, 255, 0.04); - color: var(--amb-text-muted, #A7AAB5); - cursor: pointer; - font-size: 14px; - transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; - box-sizing: border-box; -} - -.anomalous-btn-icon:hover { - background: rgba(255, 255, 255, 0.10); - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.20)); - color: var(--amb-text-main, #E7E8ED); -} - -.anomalous-btn-icon.anomalous-btn-edit:hover { - color: #34d399; - border-color: rgba(52, 211, 153, 0.35); - background: rgba(52, 211, 153, 0.1); -} - -.anomalous-btn-icon.anomalous-btn-delete:hover { - color: #f87171; - border-color: rgba(248, 113, 113, 0.35); - background: rgba(248, 113, 113, 0.1); -} - -.anomalous-btn-icon.anomalous-btn-export:hover { - color: #60a5fa; - border-color: rgba(96, 165, 250, 0.35); - background: rgba(96, 165, 250, 0.1); -} - -/* Ghost Button (secondary text button) */ -.anomalous-btn-ghost { - position: relative; - background: rgba(255, 255, 255, 0.05); - color: var(--amb-text-main, #E7E8ED); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - border-radius: var(--amb-radius-control, 6px); - height: 32px; - padding: 0 14px; - font-size: 0.82rem; - font-weight: 500; - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - transition: background-color 0.15s ease, border-color 0.15s ease; - overflow: hidden; - user-select: none; - box-sizing: border-box; -} - -.anomalous-btn-ghost:hover { - background: rgba(255, 255, 255, 0.09); - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22)); - color: #ffffff; -} - -.anomalous-btn-ghost:active { - transform: translateY(1px); - filter: brightness(0.95); -} - -.anomalous-btn-sm { - height: 28px !important; - padding: 0 10px !important; - font-size: 0.76rem !important; -} - -@keyframes anomalous-parameter-switch { - 0% { - opacity: 0; - transform: translateY(12px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.anomalous-recipe-detail-parameters.is-switching { - animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; -} - -.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(1) { - animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.03s both; -} -.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(2) { - animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.08s both; -} -.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(3) { - animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.13s both; -} -.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(4) { - animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.18s both; -} - -.anomalous-recipe-parameter-notebook-item.is-switching { - animation: anomalous-parameter-switch 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; -} - -/* Parameter Summary Grid Styling */ -.anomalous-recipe-detail-summary-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 16px; - padding: 16px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 8px; - margin-bottom: 24px; -} - -.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-parameter-row.is-wide { - grid-column: 1 / -1; -} - -/* Node Parameter Card Styling */ -.anomalous-recipe-detail-parameter-node { - position: relative; - padding: 16px; - margin-bottom: 16px; - background: rgba(0, 0, 0, 0.25); - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 8px; - transition: max-height 0.3s ease; -} - -.anomalous-recipe-detail-node-title { - display: block; - margin-bottom: 12px; - font-size: 1.05rem; - color: #e0e0e0; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - padding-bottom: 8px; -} - -.anomalous-recipe-material-selection { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 8px; - margin-top: 10px; - padding: 9px 10px; - border: 1px solid rgba(139, 92, 246, 0.16); - border-radius: 8px; - background: rgba(139, 92, 246, 0.045); -} - -.anomalous-recipe-material-selection .anomalous-workbench-node-selection-count { - margin-right: auto; -} - -.anomalous-recipe-material-node-header { - display: flex; - align-items: center; - gap: 9px; - margin-bottom: 12px; - padding-bottom: 8px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-recipe-material-node-header .anomalous-recipe-detail-node-title { - min-width: 0; - flex: 1; - margin: 0; - padding: 0; - border: 0; -} - -.anomalous-recipe-material-node-select { - appearance: none; - -webkit-appearance: none; - width: 16px; - height: 16px; - flex: 0 0 16px; - margin: 0; - border-radius: 4px; - border: 1.5px solid rgba(255, 255, 255, 0.22); - background-color: rgba(20, 10, 16, 0.6); - cursor: pointer; - position: relative; - outline: none; - display: inline-grid; - place-content: center; - vertical-align: middle; - transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; -} - -.anomalous-recipe-material-node-select:hover { - border-color: rgba(139, 92, 246, 0.6); - background-color: rgba(139, 92, 246, 0.08); -} - -.anomalous-recipe-material-node-select:checked { - background-color: #8b5cf6; - border-color: #8b5cf6; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0f17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); - background-size: 11px 11px; - background-position: center; - background-repeat: no-repeat; - box-shadow: 0 0 8px rgba(139, 92, 246, 0.35); -} - -.anomalous-recipe-material-node-select:focus-visible { - outline: 2px solid #8b5cf6; - outline-offset: 2px; -} - -/* Grid Layout for Node Widgets */ -.anomalous-recipe-detail-node-widgets { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 12px; -} - -/* Smart Expansion (Collapsible Nodes) */ -.anomalous-recipe-detail-parameter-node.is-collapsed { - max-height: 180px; - overflow: hidden; -} - -.anomalous-recipe-detail-node-expand { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 70px; - background: linear-gradient(to bottom, transparent 0%, #202020 80%, #202020 100%); - display: flex; - align-items: flex-end; - justify-content: center; - padding-bottom: 8px; - z-index: 10; - border-radius: 0 0 8px 8px; -} - -.anomalous-recipe-detail-node-expand button { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 12px; - padding: 4px 16px; - font-size: 0.8rem; - color: #ccc; - cursor: pointer; - transition: background 0.2s, color 0.2s; -} - -.anomalous-recipe-detail-node-expand button:hover { - background: rgba(255, 255, 255, 0.2); - color: #fff; -} - -/* Hero Section Styling */ -.anomalous-recipe-detail-hero { - position: relative; - width: 100%; - max-height: 350px; - margin-bottom: 24px; - border-radius: 8px; - overflow: hidden; - background: rgba(0, 0, 0, 0.2); -} - -.anomalous-recipe-detail-hero-image { - width: 100%; - height: 100%; - max-height: 350px; - object-fit: cover; - display: block; - cursor: pointer; - transition: transform 0.3s ease; -} - -.anomalous-recipe-detail-hero-image:hover { - transform: scale(1.02); -} - -.anomalous-recipe-detail-hero-gallery-btn { - position: absolute; - bottom: 16px; - right: 16px; - background: rgba(0, 0, 0, 0.6); - color: #fff; - border: 1px solid rgba(255, 255, 255, 0.2); - padding: 8px 16px; - border-radius: 20px; - font-size: 0.9rem; - cursor: pointer; - backdrop-filter: blur(8px); - transition: background 0.2s, transform 0.2s; - box-shadow: none; -} - -.anomalous-recipe-detail-hero-gallery-btn:hover { - background: rgba(0, 0, 0, 0.8); - transform: translateY(-2px); -} - -/* Modal Gallery Dialog Styling */ -.anomalous-recipe-gallery-dialog { - background: #1e1e1e; - color: #eee; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; - padding: 24px; - width: 90vw; - max-width: 1200px; - max-height: 90vh; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); - overflow-y: auto; -} - -.anomalous-recipe-gallery-dialog::backdrop { - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(4px); -} - -.anomalous-recipe-gallery-dialog-title { - margin-top: 0; - margin-bottom: 16px; - font-size: 1.4rem; - font-weight: 600; -} - -.anomalous-dialog-close { - position: absolute; - top: 16px; - right: 16px; - font-size: 1.2rem; - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - cursor: pointer; -} - -/* Gallery Grid Refactor */ -.anomalous-recipe-gallery-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 16px; - padding: 16px 0; -} - -.anomalous-recipe-gallery-card { - position: relative; - border-radius: 8px; - overflow: hidden; - background: rgba(0, 0, 0, 0.2); - aspect-ratio: 1; - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -.anomalous-recipe-gallery-card:hover { - transform: scale(1.03); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); - z-index: 2; -} - -.anomalous-recipe-gallery-card img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - cursor: pointer; -} - -.anomalous-recipe-gallery-card-actions { - right: 10px; - bottom: 10px; - display: flex; - opacity: 0; - transform: translateY(4px); - pointer-events: none; -} - -.anomalous-recipe-gallery-card:hover .anomalous-recipe-gallery-card-actions, -.anomalous-recipe-gallery-card:focus-within .anomalous-recipe-gallery-card-actions { - opacity: 1; - transform: translateY(0); - pointer-events: auto; -} - -/* ========================================================================== - Anomalous Material Library - Studio & Uniform Grid System - ========================================================================== */ - -.anomalous-material-body { - min-height: 0; - flex: 1; - display: flex; - flex-direction: column; - overflow: hidden; - background: #111317; -} - -/* 1. 一体化 Studio 顶栏 (精简纯净，杜绝层层大框堆叠) */ -.anomalous-material-topbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - height: 48px; - padding: 0 16px; - background: #16181f; - border-bottom: 1px solid rgba(255, 255, 255, 0.07); - flex-shrink: 0; - z-index: 10; -} - -.anomalous-material-topbar-left { - display: flex; - align-items: center; - gap: 8px; - flex-shrink: 0; -} - -.anomalous-material-pills { - display: inline-flex; - align-items: center; - gap: 3px; - background: rgba(0, 0, 0, 0.32); - padding: 3px 4px; - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-material-pill { - padding: 3px 11px; - border-radius: 14px; - font-size: 12px; - color: #94a3b8; - background: transparent; - border: none; - cursor: pointer; - transition: all 0.15s ease; - font-weight: 500; -} - -.anomalous-material-pill:hover { - color: #e2e8f0; -} - -.anomalous-material-pill.is-active { - background: rgba(139, 92, 246, 0.18); - color: #8b5cf6; - font-weight: 600; - box-shadow: none; -} - -.anomalous-material-topbar-center { - display: flex; - align-items: center; - gap: 8px; - flex: 1; - max-width: 440px; -} - -.anomalous-material-search-wrap { - position: relative; - display: flex; - align-items: center; - flex: 1; -} - -.anomalous-material-search-icon { - position: absolute; - left: 10px; - pointer-events: none; - color: #64748b; - display: flex; - align-items: center; - font-size: 13px; -} - -.anomalous-material-search-input { - width: 100%; - height: 30px; - padding: 0 12px 0 30px; - background: rgba(0, 0, 0, 0.28); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - color: #e2e8f0; - font-size: 12px; - outline: none; - transition: border-color 0.15s ease, background 0.15s ease; -} - -.anomalous-material-search-input:focus { - border-color: rgba(139, 92, 246, 0.45); - background: rgba(0, 0, 0, 0.4); -} - -.anomalous-material-tag-select { - height: 30px; - padding: 0 10px; - background: rgba(0, 0, 0, 0.28); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; - color: #94a3b8; - font-size: 12px; - outline: none; - cursor: pointer; - max-width: 130px; -} - -.anomalous-material-tag-select:hover { - border-color: rgba(255, 255, 255, 0.18); -} - -.anomalous-material-topbar-right { - display: flex; - align-items: center; - gap: 8px; - flex-shrink: 0; -} - -.anomalous-material-view-switch { - display: inline-flex; - align-items: center; - background: rgba(0, 0, 0, 0.32); - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 8px; - padding: 2px; -} - -.anomalous-material-view-btn { - width: 26px; - height: 26px; - display: flex; - align-items: center; - justify-content: center; - border: none; - background: transparent; - color: #64748b; - border-radius: 6px; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-material-view-btn:hover { - color: #cbd5e1; -} - -.anomalous-material-view-btn.is-active { - background: rgba(255, 255, 255, 0.09); - color: #8b5cf6; -} - -.anomalous-material-topbar-btn { - height: 30px; - padding: 0 12px; - display: inline-flex; - align-items: center; - gap: 6px; - border-radius: 8px; - font-size: 12px; - font-weight: 500; - cursor: pointer; - transition: all 0.15s ease; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.03); - color: #cbd5e1; -} - -.anomalous-material-topbar-btn:hover { - background: rgba(255, 255, 255, 0.08); - color: #fff; -} - -.anomalous-material-studio-toggle { - border-color: rgba(139, 92, 246, 0.3); - color: #8b5cf6; - background: rgba(139, 92, 246, 0.08); -} - -.anomalous-material-studio-toggle:hover { - background: rgba(139, 92, 246, 0.16); - border-color: rgba(139, 92, 246, 0.5); - color: #fca5a5; -} - -.anomalous-material-studio-toggle.is-active { - background: linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(13, 148, 136, 0.45)); - border-color: rgba(139, 92, 246, 0.6); - color: #ffffff; - box-shadow: 0 0 12px rgba(139, 92, 246, 0.25); -} - -/* 2. 主区域分屏容器 */ -.anomalous-material-main-area { - display: flex; - flex: 1; - min-height: 0; - width: 100%; - overflow: hidden; - position: relative; -} - -.anomalous-material-content { - display: flex; - flex-direction: column; - flex: 1; - min-width: 0; - min-height: 0; - overflow: hidden; -} - -/* 3. 右侧并排提示词工坊抽屉 */ -.anomalous-material-side-studio { - width: 0; - opacity: 0; - overflow: hidden; - flex-shrink: 0; - display: flex; - flex-direction: column; - border-left: 1px solid rgba(255, 255, 255, 0.08); - background: #13151b; - transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; - pointer-events: none; - z-index: 5; -} - -.anomalous-material-side-studio.is-open { - width: 400px; - opacity: 1; - pointer-events: auto; -} - -/* 侧边工坊内部版式自适应 */ -.anomalous-material-side-studio .anomalous-prompt-composer { - height: 100%; - border-radius: 0; - border: none; - background: transparent; - display: flex; - flex-direction: column; -} - -.anomalous-material-side-studio .anomalous-paper-notes-grid { - display: flex; - flex-direction: column; - gap: 16px; - padding: 12px; - overflow-y: auto; - flex: 1; -} - -.anomalous-material-side-studio .anomalous-paper-note { - width: 100%; -} - -.anomalous-material-side-studio .anomalous-prompt-topbar { - padding: 8px 12px; - flex-wrap: wrap; - gap: 6px; - height: auto; -} - -.anomalous-material-side-studio .anomalous-prompt-meta-strip { - padding: 8px 12px; - gap: 8px; -} - -/* 4. 网格与列表视图规范 (抚平坑洼，高度严格统一) */ -.anomalous-material-list { - flex: 1; - min-height: 0; - overflow-y: auto; -} - -/* 网格视图模式 */ -.anomalous-material-list.is-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - grid-auto-rows: 248px; - align-content: start; - gap: 14px; - padding: 16px; -} - -/* 列表视图模式 */ -.anomalous-material-list.is-list { - display: flex; - flex-direction: column; - gap: 6px; - padding: 12px 16px; -} - -/* 卡片基础骨架 */ -.anomalous-material-card { - position: relative; - display: flex; - min-width: 0; - overflow: hidden; - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); - background: var(--amb-bg-card, #24262E); - border-radius: var(--amb-radius-card, 10px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - cursor: pointer; - transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; - box-sizing: border-box; -} - -.anomalous-material-card:hover { - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.2)); - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); -} - -.anomalous-material-card:focus-visible { - outline: 2px solid var(--amb-accent-gold, #8b5cf6); - outline-offset: 2px; -} - -/* 网格模式下的卡片几何规范 */ -.anomalous-material-list.is-grid .anomalous-material-card { - height: 248px; - max-height: 248px; - flex-direction: column; - border-radius: var(--amb-radius-card, 10px); -} - -.anomalous-material-list.is-grid .anomalous-material-card:hover { - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22)); -} - -.anomalous-material-list.is-grid .anomalous-material-card-preview { - height: 124px; - width: 100%; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background: #0d0f14; - position: relative; -} - -.anomalous-material-list.is-grid .anomalous-material-card-preview img { - width: 100%; - height: 100%; - object-fit: cover; -} - -/* 无图卡片的内嵌微拟态展示 (提示词卡片 / 参数卡片) */ -.anomalous-material-card-preview.is-prompt-fallback { - background: radial-gradient(circle at 50% 35%, #192338, #0d121c); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 10px; - gap: 4px; -} - -.anomalous-material-card-preview.is-params-fallback { - background: radial-gradient(circle at 50% 35%, #142826, #0b1514); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 10px; - gap: 4px; -} - -.anomalous-material-card-preview.is-workflow-fallback { - background: radial-gradient(circle at 50% 35%, #241d33, #110d1c); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 10px; - gap: 4px; -} - -.anomalous-material-preview-snippet { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - font-size: 10px; - color: #718096; - line-height: 1.35; - max-height: 42px; - overflow: hidden; - text-align: center; - word-break: break-all; - user-select: none; - opacity: 0.85; -} - -.anomalous-material-list.is-grid .anomalous-material-card-body { - flex: 1; - min-height: 0; - padding: 10px 12px; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 4px; -} - -.anomalous-material-list.is-grid .anomalous-material-card-title-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - width: 100%; -} - -.anomalous-material-list.is-grid .anomalous-material-card-title-text { - flex: 1; - margin: 0; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - overflow-wrap: anywhere; - font-size: 13px; - line-height: 17px; - color: var(--amb-text-main, #f1f5f9); - font-weight: 500; -} - -.anomalous-material-list.is-grid .anomalous-material-card-meta { - display: flex; - align-items: center; - gap: 6px; - flex-wrap: nowrap; - overflow: hidden; -} - -.anomalous-material-list.is-grid .anomalous-material-card-subinfo { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - font-size: 11px; - color: #64748b; -} - -.anomalous-material-list.is-grid .anomalous-material-card-date { - font-size: 11px; - color: #64748b; - white-space: nowrap; -} - -/* 列表模式下的单行紧凑高密度样式 */ -.anomalous-material-list.is-list .anomalous-material-card { - height: 44px; - min-height: 44px; - flex-direction: row; - align-items: center; - padding: 0 12px; - gap: 12px; - border-radius: 8px; -} - -.anomalous-material-list.is-list .anomalous-material-card:hover { - transform: translateX(2px); -} - -.anomalous-material-list.is-list .anomalous-material-card-preview { - width: 32px; - height: 32px; - border-radius: 6px; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background: #0d0f14; -} - -.anomalous-material-list.is-list .anomalous-material-card-preview img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.anomalous-material-list.is-list .anomalous-material-preview-snippet { - display: none; -} - -.anomalous-material-list.is-list .anomalous-material-card-body { - flex: 1; - min-width: 0; - padding: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.anomalous-material-list.is-list .anomalous-material-card-title-row { - flex: 1; - min-width: 0; - display: flex; - align-items: center; - gap: 8px; -} - -.anomalous-material-list.is-list .anomalous-material-card-title-text { - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 13px; - color: #f1f5f9; -} - -.anomalous-material-list.is-list .anomalous-material-card-meta { - flex-shrink: 0; - display: flex; - align-items: center; - gap: 6px; -} - -.anomalous-material-list.is-list .anomalous-material-card-subinfo, -.anomalous-material-list.is-list .anomalous-material-types, -.anomalous-material-list.is-list .anomalous-material-tags { - display: none; -} - -/* 列表模式下的操作区在右侧 */ -.anomalous-material-list.is-list .anomalous-material-card-actions-wrapper { - display: flex; - align-items: center; - gap: 4px; - flex-shrink: 0; - opacity: 0; - transition: opacity 0.15s ease; -} - -.anomalous-material-list.is-list .anomalous-material-card:hover .anomalous-material-card-actions-wrapper { - opacity: 1; -} - -/* 卡片悬浮操作按钮组 (网格与列表通用规范) */ -.anomalous-material-card-action-btn { - width: 26px; - height: 26px; - padding: 0; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 6px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(18, 20, 26, 0.85); - color: #cbd5e1; - cursor: pointer; - font-size: 12px; - backdrop-filter: blur(6px); - transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; -} - -.anomalous-material-card-action-btn:hover { - transform: scale(1.08); -} - -.anomalous-material-card-delete { - position: absolute; - top: 8px; - right: 8px; - z-index: 5; - opacity: 0; -} - -.anomalous-material-list.is-grid .anomalous-material-card:hover .anomalous-material-card-delete { - opacity: 1; -} - -.anomalous-material-card-delete:hover { - background: rgba(239, 68, 68, 0.35); - border-color: rgba(239, 68, 68, 0.6); - color: #fca5a5; -} - -.anomalous-material-card-quick-load { - position: absolute; - top: 8px; - left: 8px; - z-index: 5; - color: #8b5cf6; - border-color: rgba(139, 92, 246, 0.3); - opacity: 0; -} - -.anomalous-material-list.is-grid .anomalous-material-card:hover .anomalous-material-card-quick-load { - opacity: 1; -} - -.anomalous-material-card-quick-load:hover { - background: rgba(139, 92, 246, 0.28); - border-color: rgba(139, 92, 246, 0.6); - color: #fca5a5; -} - -.anomalous-material-card-send-studio { - position: absolute; - top: 8px; - left: 38px; - z-index: 5; - color: #cbd5e1; - border-color: rgba(255, 255, 255, 0.2); - opacity: 0; -} - -.anomalous-material-list.is-grid .anomalous-material-card:hover .anomalous-material-card-send-studio { - opacity: 1; -} - -.anomalous-material-card-send-studio:hover { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.4); - color: #ffffff; -} - -.theme-abyssal-scarlet .anomalous-material-card-send-studio { - color: #ff4d6d; - border-color: rgba(220, 20, 60, 0.35); -} - -.theme-abyssal-scarlet .anomalous-material-card-send-studio:hover { - background: rgba(220, 20, 60, 0.28); - border-color: rgba(220, 20, 60, 0.6); - color: #ffffff; -} - -/* 素材库卡片与详情头部中的明确应用替换按钮 */ -.anomalous-material-card-apply-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 5px; - width: 100%; - box-sizing: border-box; - padding: 5px 10px; - margin-top: 5px; - font-size: 11px; - font-weight: 600; - color: #ffffff; - background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(79, 70, 229, 0.95) 100%); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 6px; - cursor: pointer; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); - transition: all 0.15s ease; - z-index: 2; -} - -.anomalous-material-card-apply-btn:hover { - background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(67, 56, 202, 1) 100%); - transform: translateY(-1px); - box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4); -} - -.anomalous-material-card-apply-btn:disabled { - opacity: 0.65; - cursor: not-allowed; - transform: none; -} - -.anomalous-material-list.is-list .anomalous-material-card-apply-btn { - width: auto; - margin-top: 0; - padding: 4px 12px; -} - -.anomalous-material-header-apply-btn { - font-weight: 600 !important; - box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35); -} - -/* 徽标、标签与来源标记通用定义 */ -.anomalous-material-source-mark { - max-width: 100%; - overflow: hidden; - padding: 2px 6px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 999px; - background: rgba(255, 255, 255, 0.035); - color: #94a3b8; - font-size: 0.65rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-material-source-mark.is-current { - border-color: rgba(139, 92, 246, 0.25); - color: #fca5a5; -} - -.anomalous-material-source-mark.is-modified, -.anomalous-material-source-mark.is-missing { - border-color: rgba(245, 158, 11, 0.28); - background: rgba(245, 158, 11, 0.08); - color: #fbbf24; -} - -.anomalous-material-meta-pill { - padding: 2px 6px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 999px; - background: rgba(255, 255, 255, 0.035); - color: #94a3b8; - font-size: 0.65rem; - white-space: nowrap; -} - -.anomalous-material-types { - overflow: hidden; - color: #64748b; - font-size: 0.72rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-material-tags { - display: flex; - flex-wrap: wrap; - gap: 4px; - overflow: hidden; - max-height: 22px; -} - -.anomalous-material-tag { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - border-radius: 4px; - background: #232731; - color: #94a3b8; - padding: 1px 6px; - font-size: 11px; -} - -/* 分页器精简 */ -.anomalous-material-pager { - display: flex; - flex: 0 0 auto; - align-items: center; - justify-content: center; - gap: 12px; - padding: 8px 16px; - border-top: 1px solid rgba(255, 255, 255, 0.06); - background: #14161c; - font-size: 12px; - color: #94a3b8; -} - -.anomalous-material-pager button:disabled { - opacity: 0.35; - cursor: default; -} - -.anomalous-material-empty { - grid-column: 1 / -1; - padding: 48px 16px; - text-align: center; - color: #64748b; - font-size: 14px; -} - -.anomalous-material-editor { - display: flex; - flex: 1 0 100%; - flex-wrap: wrap; - gap: 12px; - align-items: end; -} - -.anomalous-material-editor label { - display: flex; - flex: 1 1 240px; - gap: 6px; - flex-direction: column; - font-size: 13px; -} - -.anomalous-material-editor input { - box-sizing: border-box; - min-width: 0; - max-width: 100%; - border: 1px solid #3d4350; - border-radius: 8px; - background: #1d2028; - color: #e5e9f0; - padding: 8px 10px; - font: inherit; -} - -.anomalous-library-detail-header:has(.anomalous-material-editor) { - flex-wrap: wrap; -} - -.anomalous-library-detail-view { - display: flex; - min-height: 0; - flex: 1; - flex-direction: column; - overflow: hidden; - background: #111318; -} - -.anomalous-library-detail-header { - display: flex; - align-items: center; - gap: 14px; - min-height: 72px; - padding: 12px 18px; - border-bottom: 1px solid rgba(255,255,255,.08); - background: rgba(25,27,33,.96); -} - -.anomalous-library-detail-back { - flex: 0 0 auto; - padding: 8px 11px; - border: 1px solid rgba(255,255,255,.1); - border-radius: 8px; - background: rgba(255,255,255,.04); - color: #c9cfda; - cursor: pointer; -} - -.anomalous-library-detail-back:hover { border-color: rgba(81,221,190,.42); color: #fff; } -.anomalous-library-detail-heading { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; } -.anomalous-library-detail-heading h2 { - margin: 0; - overflow: hidden; - color: #f5f7fb; - font-size: 1rem; - text-overflow: ellipsis; - white-space: nowrap; -} -.anomalous-library-detail-actions { display: flex; flex: 0 0 auto; gap: 8px; } - -.anomalous-library-detail-layout { - display: grid; - min-height: 0; - flex: 1; - grid-template-columns: minmax(300px, .88fr) minmax(410px, 1.12fr); - overflow: hidden; -} - -.anomalous-library-detail-layout.is-parameter { - grid-template-columns: minmax(220px, .48fr) minmax(410px, 1.52fr); -} - -.anomalous-library-detail-layout.is-parameter .anomalous-library-detail-image-stage { - flex: 0 0 180px; - border-color: rgba(139, 92, 246, 0.18); - background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.12), rgba(13, 15, 20, 0.9) 72%); - cursor: default; -} - -.anomalous-library-detail-media { - display: flex; - min-width: 0; - min-height: 0; - flex-direction: column; - gap: 12px; - padding: 18px; - border-right: 1px solid rgba(255,255,255,.08); - background: radial-gradient(circle at 50% 35%, #242a35, #0d0f14 72%); -} - -.anomalous-library-detail-image-stage { - display: flex; - min-height: 0; - flex: 1; - align-items: center; - justify-content: center; - overflow: hidden; - padding: 0; - border: 1px solid rgba(255,255,255,.1); - border-radius: 12px; - background: #090a0d; - color: #647083; - font-size: 42px; - cursor: zoom-in; -} - -.anomalous-library-detail-image-stage img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.anomalous-library-detail-source { - display: flex; - min-width: 0; - align-items: center; - justify-content: space-between; - gap: 4px; - padding: 10px 12px; - border: 1px solid rgba(255,255,255,.07); - border-radius: 9px; - background: rgba(0,0,0,.24); -} - -.anomalous-library-detail-source-copy { display: grid; min-width: 0; gap: 4px; } -.anomalous-library-detail-source-copy span { color: #778196; font-size: .65rem; } -.anomalous-library-detail-source-copy strong { - overflow: hidden; - color: #cbd2df; - font-size: .73rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-library-detail-source-open { - flex: 0 0 auto; - padding: 6px 9px; - border: 1px solid rgba(81,221,190,.2); - border-radius: 7px; - background: rgba(81,221,190,.07); - color: #79d9c4; - font-size: .66rem; - cursor: pointer; -} - -.anomalous-library-detail-inspector { - display: flex; - flex-direction: column; - gap: 12px; - min-width: 0; - overflow-y: auto; - padding: 20px; -} - -.anomalous-library-detail-stats { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; - margin-bottom: 20px; -} - -.anomalous-library-detail-stat { - display: grid; - gap: 3px; - padding: 13px 14px; - border: 1px solid rgba(81,221,190,.16); - border-radius: 10px; - background: linear-gradient(135deg, rgba(81,221,190,.09), rgba(255,255,255,.025)); -} - -.anomalous-library-detail-stat strong { color: #68e0c3; font-size: 1.15rem; } -.anomalous-library-detail-stat span { color: #919bad; font-size: .69rem; } -.anomalous-library-detail-callout { - margin: -8px 0 18px; - padding: 9px 11px; - border-left: 2px solid #55cdb2; - border-radius: 0 7px 7px 0; - background: rgba(81,221,190,.055); - color: #9bb5b1; - font-size: .69rem; -} - -@media (max-width: 850px) { - .anomalous-library-detail-header { align-items: flex-start; flex-wrap: wrap; } - .anomalous-library-detail-heading { order: -1; flex-basis: 100%; } - .anomalous-library-detail-layout { grid-template-columns: 1fr; overflow-y: auto; } - .anomalous-library-detail-media { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); } - .anomalous-library-detail-layout.is-parameter .anomalous-library-detail-media { min-height: 260px; } - .anomalous-library-detail-inspector { overflow: visible; } -} - -.anomalous-material-expanded-models { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); - gap: 7px; - margin: 8px 0 14px; -} - -.anomalous-material-expanded-model { - display: flex; - min-width: 0; - align-items: center; - justify-content: space-between; - gap: 8px; - padding: 7px 9px; - border: 1px solid rgba(255, 255, 255, 0.07); - border-radius: 7px; - background: rgba(0, 0, 0, 0.16); -} - -.anomalous-material-expanded-model span { - overflow: hidden; - color: #cbd4df; - font-size: 0.7rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-material-expanded-model small { - flex: 0 0 auto; - color: #6fcbb7; - font-size: 0.62rem; -} - -/* Professional Studio Material Detail Modal */ -.anomalous-material-detail-overlay { - position: fixed; - inset: 0; - z-index: 1000000; - display: flex; - align-items: center; - justify-content: center; - padding: 24px; - background: rgba(3, 4, 7, 0.88); - backdrop-filter: blur(12px); -} - -.anomalous-material-detail-overlay.is-suspended { - visibility: hidden; - pointer-events: none; -} - -.anomalous-material-detail-dialog { - position: relative; - display: grid; - grid-template-columns: minmax(0, 1.28fr) minmax(460px, 0.92fr); - width: min(1420px, 96vw); - height: min(900px, 92vh); - max-height: 92vh; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 16px; - background: #101217; - box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72); - overflow: hidden; -} - -.anomalous-material-detail-close { - position: absolute; - top: 14px; - right: 14px; - z-index: 10; - width: 34px; - height: 34px; - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 50%; - background: rgba(18, 20, 26, 0.7); - color: #cbd5e1; - font-size: 20px; - line-height: 1; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - backdrop-filter: blur(6px); - transition: all 0.15s; -} - -.anomalous-material-detail-close:hover { - background: rgba(255, 255, 255, 0.18); - color: #fff; - transform: scale(1.06); -} - -.anomalous-material-detail-media { - position: relative; - display: flex; - flex-direction: column; - min-height: 0; - height: 100%; - overflow: hidden; - background: - radial-gradient(ellipse at center, rgba(255, 255, 255, 0.045), transparent 58%), - #07080b; -} - -.anomalous-material-detail-stage { - display: flex; - flex: 1; - align-items: center; - justify-content: center; - min-height: 0; -} - -.anomalous-material-detail-stage > img { - width: 100%; - height: 100%; - object-fit: contain; - user-select: none; -} - -.anomalous-material-console { - flex: 0 0 auto; - max-height: 42%; - overflow: auto; - display: flex; - flex-direction: column; - gap: 8px; - padding: 10px 12px 12px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - background: #0c0e13; -} - -.anomalous-material-filmstrip { - display: flex; - gap: 8px; - overflow-x: auto; - padding-bottom: 2px; -} - -.anomalous-material-filmstrip[hidden], -.anomalous-material-console-note-box[hidden] { - display: none; -} - -.anomalous-material-film-thumb { - flex: 0 0 56px; - width: 56px; - height: 56px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - background: #111318; -} - -.anomalous-material-film-thumb.is-clickable { - cursor: pointer; -} - -.anomalous-material-film-thumb.is-selected { - border-color: #ffffff; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); -} - -.theme-abyssal-scarlet .anomalous-material-film-thumb.is-selected { - border-color: rgba(220, 20, 60, 0.7); - box-shadow: 0 0 0 1px rgba(220, 20, 60, 0.35); -} - -.anomalous-material-film-thumb img, -.anomalous-material-film-thumb video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.anomalous-material-console-note-box { - display: grid; - gap: 4px; -} - -.anomalous-material-console-note-label { - color: #a38d53; - font-size: 0.66rem; - font-weight: 600; -} - -.anomalous-material-console-note { - margin: 0; - display: -webkit-box; - overflow: hidden; - color: #d1c9b4; - font-size: 0.74rem; - line-height: 1.4; - white-space: pre-wrap; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; -} - -.anomalous-material-media-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - min-width: 0; - font-size: 0.76rem; - color: #cbd5e1; -} - -.anomalous-material-media-bar > span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-material-media-actions { - display: flex; - flex-shrink: 0; - gap: 6px; -} - -/* Right Inspector Panel - 3-Tier Layout (Fixed Header + Scroll Body + Sticky Footer) */ -.anomalous-material-detail-side { - display: flex; - flex-direction: column; - height: 100%; - min-height: 0; - background: #14161c; - border-left: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-material-side-header { - padding: 20px 52px 14px 22px; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); - flex-shrink: 0; -} - -.anomalous-material-side-header h2 { - margin: 0; - font-size: 1.08rem; - font-weight: 600; - letter-spacing: -0.01em; - color: #f4f7fb; -} - -.anomalous-material-side-meta { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 10px; -} - -.anomalous-material-side-chip { - max-width: 100%; - overflow: hidden; - padding: 3px 8px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 999px; - background: rgba(255, 255, 255, 0.04); - color: #b4becc; - font-size: 0.68rem; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Scrollable Body */ -.anomalous-material-side-body { - flex: 1; - min-height: 0; - overflow-y: auto; - padding: 14px 22px 18px; - display: flex; - flex-direction: column; - gap: 10px; -} - -.anomalous-material-side-body::-webkit-scrollbar { - width: 6px; -} -.anomalous-material-side-body::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.14); - border-radius: 3px; -} -.anomalous-material-side-body::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.24); -} - -/* Sticky Footer */ -.anomalous-material-side-footer { - padding: 12px 22px 16px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - background: #111318; - flex-shrink: 0; - display: flex; - flex-direction: column; - gap: 8px; -} - -.anomalous-material-side-footer .anomalous-btn-primary { - width: 100%; - margin-left: 0; - padding: 10px 12px; - border-radius: 8px; - font-weight: 600; -} - -.anomalous-material-side-footer label { - display: grid; - gap: 6px; - color: #cbd5e1; - font-size: 0.78rem; - font-weight: 600; -} - -.anomalous-material-side-footer input { - padding: 9px 12px; - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 8px; - background: rgba(255, 255, 255, 0.04); - color: #ffffff; - font-size: 0.82rem; - outline: none; - transition: border-color 0.15s; -} - -.anomalous-material-side-footer input:focus { - border-color: rgba(255, 255, 255, 0.35); - background: rgba(255, 255, 255, 0.07); -} - -@media (max-width: 860px) { - .anomalous-material-detail-dialog { - grid-template-columns: 1fr; - height: 94vh; - } - .anomalous-material-detail-media { - min-height: 0; - max-height: 52vh; - } - .anomalous-material-detail-stage { - min-height: 160px; - } -} - -/* Ensure wide widgets (like long prompts) span full width in the node cards */ -.anomalous-recipe-detail-node-widgets .anomalous-recipe-detail-parameter-row.is-wide { - grid-column: 1 / -1; -} - -/* Reset native dialog styles for the full-screen gallery viewer */ -dialog.anomalous-gallery-viewer { - border: none; - padding: 0; - margin: auto; - max-width: none; - max-height: none; - background: transparent; -} -dialog.anomalous-gallery-viewer::backdrop { - background: rgba(0, 0, 0, 0.95); -} - -/* ========================================================================== */ -/* 🎨 Workflow Recipes Modern UI/UX Redesign Overrides */ -/* ========================================================================== */ - -.anomalous-recipe-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 360px)); - gap: 18px; - overflow-y: auto; - padding: 18px; -} - -.anomalous-recipe-list[style*="display: none"], -.anomalous-recipe-actionbar[style*="display: none"] { - display: none !important; -} - -/* ========================================================================== - Recipe Cards: Uniform 264px Bento Grid & 44px Compact List System - ========================================================================== */ - -/* 1. 网格模式下的卡片几何规范 (Bento 架构 + 发光电路回路隐喻) */ -.anomalous-recipe-list.is-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - grid-auto-rows: 264px; - align-content: start; - gap: 14px; - padding: 16px; - background-image: - radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.06) 1px, transparent 1px), - linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); - background-size: 24px 24px, 48px 48px, 48px 48px; -} - -.anomalous-recipe-list.is-list { - display: flex; - flex-direction: column; - gap: 6px; - padding: 12px 16px; -} - -/* 卡片基础骨架 */ -.anomalous-recipe-card { - position: relative; - display: flex; - min-width: 0; - overflow: hidden; - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); - background: var(--amb-bg-card, #24262E); - border-radius: var(--amb-radius-card, 10px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); - cursor: pointer; - transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; - box-sizing: border-box; -} - -.anomalous-recipe-card:hover { - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22)); - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); -} - -.anomalous-recipe-card:focus-visible { - outline: 2px solid var(--amb-accent-gold, #818cf8); - outline-offset: 2px; -} - -/* 网格模式卡片 */ -.anomalous-recipe-list.is-grid .anomalous-recipe-card { - height: 264px; - max-height: 264px; - flex-direction: column; - border-radius: var(--amb-radius-card, 10px); - padding: 0; -} - -/* Bento Wide 横卡支持 (Featured / Pinned Recipes) */ -.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-featured, -.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-wide { - grid-column: span 2; - flex-direction: row; -} - -.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-featured .anomalous-recipe-card-media-wrap, -.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-wide .anomalous-recipe-card-media-wrap { - width: 44%; - height: 100%; -} - -.anomalous-recipe-list.is-grid .anomalous-recipe-card:hover { - transform: translateY(-3px); -} - -/* 顶部封面展示区 (标准黄金高度 136px) */ -.anomalous-recipe-list.is-grid .anomalous-recipe-card-media-wrap { - position: relative; - width: 100%; - height: 136px; - flex-shrink: 0; - background: #0d0f14; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} - -.anomalous-recipe-list.is-grid .anomalous-recipe-card-media-wrap img, -.anomalous-recipe-list.is-grid .anomalous-recipe-card-media-wrap video { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.25s ease; -} - -.anomalous-recipe-list.is-grid .anomalous-recipe-card:hover .anomalous-recipe-card-media-wrap img, -.anomalous-recipe-list.is-grid .anomalous-recipe-card:hover .anomalous-recipe-card-media-wrap video { - transform: scale(1.03); -} - -/* 默认封面占位图微光与材质渲染 (AI Abstract Art Blind Box) */ -.anomalous-recipe-thumbnail.is-default-placeholder { - filter: brightness(0.92) contrast(1.08); - opacity: 0.95; - transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease; -} - -.anomalous-recipe-card:hover .anomalous-recipe-thumbnail.is-default-placeholder { - filter: brightness(1.08) contrast(1.15); - opacity: 1; -} - -.anomalous-recipe-card-media-wrap:not(:has(img, video)) { - background-image: url('assets/default_cover_1.webp'); - background-size: cover; - background-position: center; -} - -/* 封面内嵌浮动底模与就绪微胶囊组 (Frosted Glass Chips at Bottom-Left) */ -.anomalous-recipe-cover-bottom-chips { - position: absolute; - bottom: 8px; - left: 8px; - display: flex; - align-items: center; - gap: 6px; - max-width: calc(100% - 16px); - pointer-events: none; - z-index: 2; -} - -.anomalous-recipe-readiness-pill { - display: inline-flex; - align-items: center; - gap: 5px; - padding: 2px 7px; - border-radius: 12px; - background: rgba(12, 14, 20, 0.78); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - border: 1px solid rgba(255, 255, 255, 0.12); - font-size: 0.65rem; - font-weight: 500; - color: #e2e8f0; - white-space: nowrap; - box-shadow: none; -} - -.anomalous-recipe-readiness-text { - font-size: 0.64rem; - line-height: 1; - color: #cbd5e1; -} - -.anomalous-recipe-cover-pill { - position: relative; - padding: 2px 7px; - border-radius: 6px; - background: rgba(12, 14, 18, 0.82); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - border: 1px solid rgba(255, 255, 255, 0.12); - color: #e2e8f0; - font-size: 0.66rem; - font-weight: 500; - max-width: 140px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - box-shadow: none; -} - -/* 封面右上角作用域徽章 */ -.anomalous-recipe-scope-pill { - position: absolute; - top: 6px; - right: 6px; - padding: 2px 6px; - border-radius: 4px; - font-size: 0.65rem; - font-weight: 600; - background: rgba(10, 12, 16, 0.85); - backdrop-filter: blur(6px); - border: 1px solid rgba(255, 255, 255, 0.12); - color: #94a3b8; - pointer-events: none; -} - -.anomalous-recipe-scope-pill.is-partial { - border-color: rgba(245, 158, 11, 0.4); - color: #fbbf24; -} - -.anomalous-recipe-scope-pill.is-complete { - border-color: rgba(99, 102, 241, 0.4); - color: #a5b4fc; -} - -/* 网格卡片信息区 */ -.anomalous-recipe-list.is-grid .anomalous-recipe-card-body { - flex: 1; - min-height: 0; - padding: 9px 12px; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 4px; -} - -.anomalous-recipe-list.is-grid .anomalous-recipe-card-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - width: 100%; -} - -.anomalous-recipe-list.is-grid .anomalous-recipe-card-title { - flex: 1; - margin: 0; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - overflow-wrap: anywhere; - font-size: 13px; - line-height: 17px; - color: var(--amb-text-main, #f1f5f9); - font-weight: 500; -} - -/* 环境就绪指示灯微点 */ -.anomalous-recipe-readiness-dot { - width: 6px; - height: 6px; - border-radius: 50%; - flex-shrink: 0; - box-shadow: 0 0 6px currentColor; -} - -.anomalous-recipe-readiness-dot.is-ready { - background-color: #10b981; - color: rgba(16, 185, 129, 0.7); -} - -.anomalous-recipe-readiness-dot.is-warning { - background-color: #f59e0b; - color: rgba(245, 158, 11, 0.7); -} - -.anomalous-recipe-readiness-dot.is-missing { - background-color: #ef4444; - color: rgba(239, 68, 68, 0.7); -} - -/* 规格微胶囊行 */ -.anomalous-recipe-specs-strip { - display: flex; - align-items: center; - gap: 4px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 10px; -} - -.anomalous-recipe-spec-tag { - display: inline-flex; - align-items: center; - gap: 2px; - padding: 1px 5px; - border-radius: 4px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.06); - color: #94a3b8; - white-space: nowrap; -} - -.anomalous-recipe-spec-tag.is-lora { - color: #93c5fd; - background: rgba(59, 130, 246, 0.08); - border-color: rgba(59, 130, 246, 0.2); -} - -.anomalous-recipe-spec-tag.is-step { - color: #86efac; - background: rgba(16, 185, 129, 0.08); - border-color: rgba(16, 185, 129, 0.2); -} - -/* 配方单行文本标签 (收拢至单行 Flex，溢出截断) */ -.anomalous-recipe-tags { - display: flex; - align-items: center; - gap: 4px; - width: 100%; - overflow: hidden; - white-space: nowrap; - margin-top: 2px; -} - -.anomalous-recipe-badge-tag { - display: inline-block; - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 0.66rem; - padding: 2px 6px; - border-radius: 4px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #94a3b8; - cursor: pointer; - transition: all 0.15s ease; - flex-shrink: 0; -} - -.anomalous-recipe-badge-tag:hover { - background: rgba(255, 255, 255, 0.1); - color: #f1f5f9; -} - -/* 网格卡片底部主动作与悬浮微操作 */ -.anomalous-recipe-list.is-grid .anomalous-recipe-card-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - margin-top: 2px; - padding-top: 6px; - border-top: 1px solid rgba(255, 255, 255, 0.05); -} - -.anomalous-recipe-btn-primary-action { - position: relative; - flex: 1; - height: 32px; - padding: 0 12px; - border-radius: var(--amb-radius-control, 6px); - background: var(--amb-btn-primary-bg, #D7D9E0); - color: var(--amb-btn-primary-text, #15171C); - border: 1px solid rgba(255, 255, 255, 0.2); - font-size: 12px; - font-weight: 600; - letter-spacing: 0.2px; - cursor: pointer; - text-align: center; - transition: background-color 0.15s ease, border-color 0.15s ease; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 5px; - overflow: hidden; - box-shadow: none; - user-select: none; - box-sizing: border-box; -} - -.anomalous-recipe-btn-primary-action:hover { - background: var(--amb-btn-primary-hover, #E5E7EB); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: none; -} - -.anomalous-recipe-btn-primary-action:active { - transform: translateY(1px); - filter: brightness(0.95); -} - filter: brightness(0.95); -} - -.anomalous-recipe-card-mini-actions { - display: flex; - align-items: center; - gap: 3px; - opacity: 0; - transition: opacity 0.15s ease; -} - -.anomalous-recipe-card:hover .anomalous-recipe-card-mini-actions { - opacity: 1; -} - -.anomalous-recipe-card-mini-btn { - width: 24px; - height: 24px; - padding: 0; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 5px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.09); - color: #94a3b8; - cursor: pointer; - font-size: 11px; - transition: all 0.15s ease; -} - -.anomalous-recipe-card-mini-btn:hover { - background: rgba(255, 255, 255, 0.12); - color: #fff; - transform: translateY(-1px); -} - -.anomalous-recipe-card-mini-btn.is-delete:hover { - background: rgba(239, 68, 68, 0.3); - border-color: rgba(239, 68, 68, 0.5); - color: #fca5a5; -} - -/* 2. 紧凑行列表模式 (44px 极速视图) */ -.anomalous-recipe-list.is-list .anomalous-recipe-card { - height: 44px; - min-height: 44px; - flex-direction: row; - align-items: center; - padding: 0 12px; - gap: 12px; - border-radius: 8px; -} - -.anomalous-recipe-list.is-list .anomalous-recipe-card:hover { - transform: translateX(2px); -} - -.anomalous-recipe-list.is-list .anomalous-recipe-card-media-wrap { - width: 32px; - height: 32px; - border-radius: 6px; - flex-shrink: 0; - overflow: hidden; - background: #0d0f14; -} - -.anomalous-recipe-list.is-list .anomalous-recipe-cover-pill, -.anomalous-recipe-list.is-list .anomalous-recipe-scope-pill, -.anomalous-recipe-list.is-list .anomalous-recipe-specs-strip { - display: none; -} - -.anomalous-recipe-list.is-list .anomalous-recipe-card-body { - flex: 1; - min-width: 0; - padding: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.anomalous-recipe-list.is-list .anomalous-recipe-card-header { - flex: 1; - min-width: 0; - display: flex; - align-items: center; - gap: 8px; -} - -.anomalous-recipe-list.is-list .anomalous-recipe-card-title { - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 13px; - color: #f1f5f9; -} - -.anomalous-recipe-list.is-list .anomalous-recipe-card-footer { - display: flex; - align-items: center; - gap: 8px; - flex-shrink: 0; - margin: 0; - padding: 0; - border: none; -} - -.anomalous-recipe-list.is-list .anomalous-recipe-btn-primary-action { - flex: 0 0 auto; - height: 26px; - padding: 0 10px; -} - -/* Detail View: Readiness Banner */ -.anomalous-recipe-readiness-banner { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 12px 16px; - border-radius: 10px; - margin-bottom: 12px; - font-size: 0.88rem; - backdrop-filter: blur(10px); -} - -.anomalous-recipe-readiness-banner.is-ready { - background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.08)); - border: 1px solid rgba(16, 185, 129, 0.35); - color: #fda4af; -} - -.anomalous-recipe-readiness-banner.is-warning { - background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.08)); - border: 1px solid rgba(245, 158, 11, 0.4); - color: #fde68a; -} - -.anomalous-recipe-readiness-banner.is-missing { - background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(185, 28, 28, 0.08)); - border: 1px solid rgba(239, 68, 68, 0.4); - color: #fecaca; -} - -.anomalous-recipe-banner-btn { - padding: 6px 14px; - border-radius: 7px; - font-size: 0.82rem; - font-weight: 600; - cursor: pointer; - border: none; - transition: all 0.2s ease; - white-space: nowrap; -} - -.anomalous-recipe-banner-btn.is-match-all { - background: #f59e0b; - color: #1a1a1a; - box-shadow: none; -} - -.anomalous-recipe-banner-btn.is-match-all:hover { - filter: brightness(1.1); - transform: translateY(-1px); -} - -/* Metric Cards for Sampling Parameters */ -.anomalous-recipe-metric-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); - gap: 10px; - margin-bottom: 14px; -} - -.anomalous-recipe-metric-card { - display: flex; - flex-direction: column; - gap: 4px; - padding: 10px 12px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.07); -} - -.anomalous-recipe-metric-label { - font-size: 0.74rem; - color: #94a3b8; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.anomalous-recipe-metric-value { - font-size: 1.1rem; - font-weight: 600; - color: #f8fafc; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Lazy Loaded Raw Nodes Container */ -.anomalous-recipe-raw-nodes-summary { - padding: 10px 14px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #93c5fd; - cursor: pointer; - user-select: none; - font-size: 0.85rem; - font-weight: 500; - transition: background 0.2s; -} - -.anomalous-recipe-raw-nodes-summary:hover { - background: rgba(255, 255, 255, 0.06); -} - -.anomalous-recipe-lazy-expand-btn { - width: 100%; - margin-top: 10px; - padding: 9px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #cbd5e1; - font-size: 0.82rem; - cursor: pointer; - transition: background 0.2s, border-color 0.2s; -} - -.anomalous-recipe-lazy-expand-btn:hover { - background: rgba(255, 255, 255, 0.09); - border-color: rgba(255, 255, 255, 0.18); -} - -.anomalous-recipe-readiness-pill.is-ready { - background: rgba(16, 185, 129, 0.16); - border-color: rgba(16, 185, 129, 0.45); - color: #6ee7b7; -} - -.anomalous-recipe-readiness-pill.is-warning { - background: rgba(245, 158, 11, 0.16); - border-color: rgba(245, 158, 11, 0.45); - color: #fcd34d; -} - -.anomalous-recipe-readiness-pill.is-missing { - background: rgba(239, 68, 68, 0.16); - border-color: rgba(239, 68, 68, 0.45); - color: #fca5a5; -} - -.anomalous-recipe-card-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - margin-top: auto; - padding-top: 8px; - border-top: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-recipe-btn-primary-action { - flex: 1; - padding: 8px 14px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.18); - color: #f1f5f9; - font-size: 0.82rem; - font-weight: 500; - cursor: pointer; - text-align: center; - transition: all 0.15s ease; -} - -.anomalous-recipe-btn-primary-action:hover { - background: rgba(255, 255, 255, 0.16); - border-color: rgba(255, 255, 255, 0.28); - color: #ffffff; -} - -.anomalous-recipe-card-mini-actions { - display: flex; - align-items: center; - gap: 4px; -} - -.anomalous-recipe-card-mini-btn { - padding: 6px 8px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #94a3b8; - cursor: pointer; - font-size: 0.85rem; - line-height: 1; - transition: all 0.15s ease; -} - -.anomalous-recipe-card-mini-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff; - border-color: rgba(255, 255, 255, 0.15); -} - - -.anomalous-recipe-banner-btn.is-match-all { - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.14); - color: #e2e8f0; -} - -.anomalous-recipe-banner-btn.is-match-all:hover { - background: rgba(255, 255, 255, 0.14); - color: #ffffff; -} - -/* Metric Cards for Sampling Parameters */ -.anomalous-recipe-metric-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); - gap: 10px; - margin-bottom: 14px; -} - -.anomalous-recipe-metric-card { - display: flex; - flex-direction: column; - gap: 4px; - padding: 10px 12px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.07); -} - -.anomalous-recipe-metric-label { - font-size: 0.74rem; - color: #94a3b8; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.anomalous-recipe-metric-value { - font-size: 1.1rem; - font-weight: 600; - color: #f8fafc; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Lazy Loaded Raw Nodes Container */ -.anomalous-recipe-raw-nodes-summary { - padding: 10px 14px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #93c5fd; - cursor: pointer; - user-select: none; - font-size: 0.85rem; - font-weight: 500; - transition: background 0.2s; -} - -.anomalous-recipe-raw-nodes-summary:hover { - background: rgba(255, 255, 255, 0.06); -} - -.anomalous-recipe-lazy-expand-btn { - width: 100%; - margin-top: 10px; - padding: 9px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #cbd5e1; - font-size: 0.82rem; - cursor: pointer; - transition: all 0.2s; -} - -.anomalous-recipe-lazy-expand-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff; -} - -/* Studio Layout Overhaul */ -.anomalous-recipe-detail-overview .anomalous-recipe-detail-hero { - display: grid !important; - grid-template-columns: 260px minmax(0, 1fr) !important; - gap: 20px !important; - align-items: start !important; - padding: 16px !important; - border-radius: 14px !important; - background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85)) !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; - margin-bottom: 16px !important; - backdrop-filter: blur(12px); -} - -.anomalous-recipe-detail-hero-media { - position: relative; - width: 100%; - height: 220px; - border-radius: 10px; - overflow: hidden; - background: #0d0e11; - border: 1px solid rgba(255, 255, 255, 0.06); - display: flex; - align-items: center; - justify-content: center; -} - -.anomalous-recipe-detail-hero-media img, -.anomalous-recipe-detail-hero-media video { - width: 100% !important; - height: 100% !important; - max-height: none !important; - object-fit: cover !important; - border-radius: 9px; - cursor: pointer; - transition: transform 0.25s ease; -} - -.anomalous-recipe-detail-hero-media:hover img { - transform: scale(1.02); -} - -.anomalous-recipe-studio-metrics { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); - gap: 8px; - margin: 12px 0 8px 0; -} - -.anomalous-recipe-studio-metric-tile { - display: flex; - flex-direction: column; - gap: 2px; - padding: 8px 10px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.035); - border: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-recipe-studio-metric-label { - font-size: 0.72rem; - color: #94a3b8; - text-transform: uppercase; - letter-spacing: 0.3px; -} - -.anomalous-recipe-studio-metric-val { - font-size: 0.96rem; - font-weight: 600; - color: #f1f5f9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Prompt Showcase Boxes - Ultra-clean Dark Glassmorphism */ -.anomalous-recipe-prompt-box { - position: relative; - padding: 14px 16px; - border-radius: 10px; - margin-bottom: 12px; - font-size: 0.84rem; - line-height: 1.6; - word-break: break-word; - background: rgba(255, 255, 255, 0.025); - border: 1px solid rgba(255, 255, 255, 0.07); - color: #cbd5e1; - transition: border-color 0.2s ease, background 0.2s ease; -} - -.anomalous-recipe-prompt-box:hover { - background: rgba(255, 255, 255, 0.035); - border-color: rgba(255, 255, 255, 0.12); -} - -.anomalous-recipe-prompt-box.is-positive { - border-left: 3px solid rgba(16, 185, 129, 0.6); -} - -.anomalous-recipe-prompt-box.is-negative { - border-left: 3px solid rgba(244, 63, 94, 0.6); -} - -.anomalous-recipe-prompt-micro-copy { - display: inline-flex; - align-items: center; - justify-content: center; - width: 26px; - height: 26px; - padding: 0; - border-radius: 6px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #94a3b8; - cursor: pointer; - transition: all 0.18s ease; -} - -.anomalous-recipe-prompt-micro-copy:hover { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.25); - color: #ffffff; - transform: translateY(-1px); -} - -.anomalous-recipe-prompt-micro-copy.is-copied { - background: rgba(16, 185, 129, 0.2) !important; - border-color: rgba(16, 185, 129, 0.4) !important; - color: #34d399 !important; -} - -.anomalous-recipe-prompt-badge { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 2px 8px; - border-radius: 6px; - font-size: 0.74rem; - font-weight: 600; - letter-spacing: 0.2px; -} - -.anomalous-recipe-prompt-badge.is-positive { - background: rgba(16, 185, 129, 0.12); - color: #34d399; - border: 1px solid rgba(16, 185, 129, 0.25); -} - -.anomalous-recipe-prompt-badge.is-negative { - background: rgba(244, 63, 94, 0.12); - color: #fb7185; - border: 1px solid rgba(244, 63, 94, 0.25); -} - -.anomalous-recipe-beta-notice[style*="display: none"] { - display: none !important; -} - -/* ========================================================================== */ -/* Modern Studio Presets (Parameter Notebook Overhaul) */ -/* ========================================================================== */ - -.anomalous-preset-btn-primary { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - padding: 8px 14px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.18); - color: #f1f5f9; - font-size: 0.82rem; - font-weight: 500; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-preset-btn-primary:hover { - background: rgba(255, 255, 255, 0.18); - border-color: rgba(255, 255, 255, 0.28); - color: #ffffff; -} - -.anomalous-preset-btn-secondary { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - padding: 8px 12px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.035); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #94a3b8; - font-size: 0.82rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-preset-btn-secondary:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.15); - color: #cbd5e1; -} - -.anomalous-preset-item-card { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-width: 0; - padding: 10px 12px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.07); - cursor: pointer; - transition: all 0.15s ease; - margin-bottom: 6px; -} - -.anomalous-preset-item-card:hover { - background: rgba(255, 255, 255, 0.045); - border-color: rgba(255, 255, 255, 0.14); -} - -.anomalous-preset-item-card.is-active { - background: rgba(255, 255, 255, 0.06); - border-color: rgba(16, 185, 129, 0.4); - box-shadow: inset 3px 0 0 #10b981; -} - -.anomalous-preset-active-dot { - width: 6px; - height: 6px; - border-radius: 50%; - background: #10b981; - flex-shrink: 0; - display: inline-block; -} - -.anomalous-preset-item-title-row { - width: 100%; - min-width: 0; - display: flex; - align-items: center; - gap: 6px; - overflow: hidden; -} - -.anomalous-recipe-info-bubble { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 2px 7px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #94a3b8; - font-size: 0.74rem; - transition: all 0.15s ease; -} - -.anomalous-recipe-info-bubble:hover { - background: rgba(255, 255, 255, 0.08); - color: #e2e8f0; - border-color: rgba(255, 255, 255, 0.16); -} - -.anomalous-preset-item-main { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 4px; -} - -.anomalous-preset-item-title { - font-size: 0.86rem; - font-weight: 500; - color: #cbd5e1; - min-width: 0; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-preset-item-card.is-active .anomalous-preset-item-title { - color: #ffffff; - font-weight: 600; -} - -.anomalous-preset-item-meta { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.72rem; - color: #64748b; -} - -.anomalous-preset-item-badge { - padding: 1px 6px; - border-radius: 4px; - background: rgba(255, 255, 255, 0.08); - color: #94a3b8; - font-size: 0.68rem; - font-weight: 500; -} - -.anomalous-preset-item-actions { - display: flex; - align-items: center; - gap: 4px; - flex-shrink: 0; - opacity: 0.35; - transition: opacity 0.15s ease; -} - -.anomalous-preset-item-card:hover .anomalous-preset-item-actions { - opacity: 1; -} - -.anomalous-preset-item-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 26px; - height: 26px; - padding: 0; - border-radius: 6px; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #cbd5e1; - cursor: pointer; - font-size: 0.78rem; - line-height: 1; - transition: all 0.15s; - box-sizing: border-box; -} - -.anomalous-preset-item-btn:hover { - background: rgba(255, 255, 255, 0.16); - color: #fff; - transform: translateY(-1px); -} - -.anomalous-preset-item-btn.is-delete:hover { - background: rgba(239, 68, 68, 0.2); - border-color: rgba(239, 68, 68, 0.4); - color: #fca5a5; -} - -/* Modern Parameter Bento Matrix */ -.anomalous-preset-bento-deck { - background: var(--amb-bg-panel, #1C1E24) !important; - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)) !important; - border-radius: var(--amb-radius-panel, 12px) !important; - padding: 12px 14px !important; - margin-bottom: 12px !important; -} - -.anomalous-recipe-bento-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); - gap: 8px; - margin-bottom: 8px; -} - -.anomalous-recipe-bento-tile { - position: relative; - display: flex; - flex-direction: column; - gap: 4px; - padding: 9px 12px; - border-radius: var(--amb-radius-control, 8px); - background: var(--amb-bg-card, #24262E); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.07)); - transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; -} - -.anomalous-recipe-bento-tile.is-interactive { - cursor: pointer; -} - -.anomalous-recipe-bento-tile:hover { - background: var(--amb-bg-card-hover, #2d303a); - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.18)); - transform: translateY(-1px); -} - -.anomalous-recipe-bento-label-row { - display: flex; - justify-content: space-between; - align-items: center; - gap: 6px; -} - -.anomalous-recipe-bento-label { - display: inline-flex; - align-items: center; - font-size: 0.7rem; - color: #94a3b8; - text-transform: uppercase; - letter-spacing: 0.3px; - font-weight: 600; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-bento-val { - font-size: 0.98rem; - font-weight: 600; - color: #f1f5f9; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-models-bento-deck { - display: grid; - gap: 8px; - margin-top: 10px; -} - -.anomalous-recipe-model-highlight-card { - padding: 10px 14px; - border-radius: 8px; - background: rgba(99, 102, 241, 0.08); - border: 1px solid rgba(99, 102, 241, 0.2); - min-width: 0; -} - -.anomalous-recipe-lora-stack { - display: flex; - flex-direction: column; - gap: 6px; - margin-top: 4px; -} - -.anomalous-recipe-lora-pill { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - min-width: 0; - padding: 8px 12px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - font-size: 0.82rem; - transition: all 0.15s ease; -} - -.anomalous-recipe-lora-pill:hover { - background: rgba(255, 255, 255, 0.06); - border-color: rgba(99, 102, 241, 0.3); - transform: translateY(-1px); -} - -.anomalous-recipe-lora-name { - flex: 1; - min-width: 0; - color: #e2e8f0; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-recipe-lora-weights { - flex-shrink: 0; - display: inline-flex; - align-items: center; - gap: 8px; - font-size: 0.72rem; - color: #94a3b8; - font-family: ui-monospace, monospace; -} - -/* Preset Console Header (Right Main Stage) */ -.anomalous-preset-console-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; - padding: 16px 18px; - border-radius: 12px; - background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85)); - border: 1px solid rgba(255, 255, 255, 0.08); - margin-bottom: 14px; - backdrop-filter: blur(12px); - flex-wrap: wrap; -} - -.anomalous-preset-console-info { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 6px; -} - -.anomalous-preset-console-title-row { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; -} - -.anomalous-preset-console-title { - font-size: 1.15rem; - font-weight: 600; - color: #f8fafc; - margin: 0; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; -} - -.anomalous-preset-console-actions { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - margin-top: 4px; -} - -.anomalous-preset-compact-gallery { - position: relative; - width: 120px; - height: 80px; - border-radius: 8px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.12); - cursor: pointer; - flex-shrink: 0; - align-self: flex-start; - margin-top: 2px; - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); - transition: transform 0.2s ease, border-color 0.2s ease; -} - -.anomalous-preset-compact-gallery:hover { - transform: scale(1.03); - border-color: rgba(99, 102, 241, 0.5); -} - -.anomalous-preset-compact-gallery img { - width: 100% !important; - height: 100% !important; - max-height: none !important; - object-fit: cover !important; -} - -.anomalous-preset-compact-gallery-badge { - position: absolute; - bottom: 4px; - right: 4px; - padding: 2px 6px; - border-radius: 4px; - background: rgba(0, 0, 0, 0.75); - color: #fff; - font-size: 0.68rem; - backdrop-filter: blur(4px); - white-space: nowrap; -} - -/* Sticky Header in Parameter Editor */ -.anomalous-recipe-parameter-editor-sticky-header { - position: sticky; - top: 0; - z-index: 10; - padding: 10px 0; - background: rgba(32, 32, 32, 0.92); - backdrop-filter: blur(8px); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - margin-bottom: 12px; - display: flex; - align-items: center; - justify-content: space-between; -} - -/* ========================================================================== */ -/* Material Snapshot Progressive Disclosure Styles */ -/* ========================================================================== */ - -.anomalous-material-section-label { - margin: 4px 0 0; - color: #8d96a8; - font-size: 0.68rem; - font-weight: 700; - letter-spacing: 0.06em; -} - -.anomalous-material-metric-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 7px; -} - -.anomalous-material-metric-card { - display: flex; - flex-direction: column; - gap: 4px; - min-width: 0; - padding: 9px 10px; - border-radius: 9px; - background: rgba(255, 255, 255, 0.035); - border: 1px solid rgba(255, 255, 255, 0.07); -} - -.anomalous-material-metric-card.is-wide { - grid-column: 1 / -1; -} - -.anomalous-material-metric-label { - font-size: 0.66rem; - color: #8b95a7; -} - -.anomalous-material-metric-val { - color: #eef3f9; - font-size: 0.88rem; - font-weight: 600; - font-variant-numeric: tabular-nums; - line-height: 1.25; - overflow-wrap: anywhere; -} - -.anomalous-material-prompt-card { - position: relative; - padding: 10px 12px 10px 13px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-left-width: 3px; - border-radius: 9px; - background: rgba(255, 255, 255, 0.03); - color: #cbd5e1; - font-size: 0.8rem; - line-height: 1.5; -} - -.anomalous-material-prompt-card.is-positive { - border-left-color: #8b5cf6; -} - -.anomalous-material-prompt-card.is-negative { - border-left-color: #f87171; -} - -.anomalous-material-prompt-content { - font-family: ui-monospace, SFMono-Regular, Consolas, monospace; - max-height: 4.6em; - overflow: hidden; - color: #d5dce8; - font-size: 0.76rem; - white-space: pre-wrap; - word-break: break-word; -} - -.anomalous-material-prompt-content.is-expanded { - max-height: none !important; - overflow: visible !important; -} - -.anomalous-material-prompt-bar { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 6px; -} - -.anomalous-material-prompt-bar-label { - font-size: 0.75rem; - font-weight: 600; - color: #94a3b8; -} - -.anomalous-material-prompt-bar-btns { - display: flex; - align-items: center; - gap: 6px; -} - -.anomalous-material-mini-btn { - padding: 2px 7px; - border-radius: 5px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #cbd5e1; - font-size: 0.7rem; - cursor: pointer; - transition: all 0.15s; -} - -.anomalous-material-mini-btn:hover { - background: rgba(255, 255, 255, 0.14); - color: #fff; -} - -.anomalous-material-model-peek { - display: flex; - flex-direction: column; - gap: 8px; -} - -.anomalous-material-model-card-item.is-primary { - padding: 9px 11px; - border-color: rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.04); -} - -.theme-abyssal-scarlet .anomalous-material-model-card-item.is-primary { - border-color: rgba(220, 20, 60, 0.22); - background: rgba(220, 20, 60, 0.06); -} - -.anomalous-material-model-peek-counts { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.anomalous-material-peek-chip { - padding: 2px 8px; - border-radius: 999px; - font-size: 0.68rem; - font-weight: 600; -} - -.anomalous-material-accordion { - border-radius: 9px; - background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.07); -} - -.anomalous-material-accordion > summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - padding: 9px 12px; - font-size: 0.78rem; - font-weight: 500; - color: #cbd5e1; - cursor: pointer; - user-select: none; - list-style: none; - background: rgba(255, 255, 255, 0.025); - border-radius: 9px; - transition: background 0.15s; -} - -.anomalous-material-accordion > summary::-webkit-details-marker { - display: none; -} - -.anomalous-material-accordion > summary::after { - content: ''; - flex-shrink: 0; - width: 6px; - height: 6px; - border-right: 1.5px solid #9aa3b5; - border-bottom: 1.5px solid #9aa3b5; - transform: rotate(45deg); - transition: transform 0.15s; -} - -.anomalous-material-accordion > summary:hover { - background: rgba(255, 255, 255, 0.05); - color: #f1f5f9; -} - -.anomalous-material-accordion[open] > summary { - border-bottom: 1px solid rgba(255, 255, 255, 0.06); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.anomalous-material-accordion[open] > summary::after { - transform: rotate(225deg); -} - -.anomalous-material-accordion-content { - padding: 10px 12px; - font-size: 0.78rem; -} - -/* Chips list for node types */ -.anomalous-material-chip-flow { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.anomalous-material-chip { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 8px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #94a3b8; - font-size: 0.73rem; -} - -.anomalous-material-chip-count { - font-size: 0.68rem; - opacity: 0.6; -} - -/* Lazy, two-level disclosure for the exact serialized node parameters. */ -.anomalous-material-node-list { - display: flex; - flex-direction: column; - gap: 7px; - margin-top: 10px; -} - -.anomalous-material-node-detail { - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.07); - border-radius: 7px; - background: rgba(5, 7, 11, 0.22); -} - -.anomalous-material-node-detail.is-selected { - border-color: rgba(139, 92, 246, 0.34); - background: rgba(139, 92, 246, 0.045); -} - -.anomalous-material-node-select { - appearance: none; - -webkit-appearance: none; - width: 16px; - height: 16px; - flex: 0 0 16px; - margin: 0; - border-radius: 4px; - border: 1.5px solid rgba(255, 255, 255, 0.22); - background-color: rgba(20, 10, 16, 0.6); - cursor: pointer; - position: relative; - outline: none; - display: inline-grid; - place-content: center; - vertical-align: middle; - transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; -} - -.anomalous-material-node-select:hover { - border-color: rgba(139, 92, 246, 0.6); - background-color: rgba(139, 92, 246, 0.08); -} - -.anomalous-material-node-select:checked { - background-color: #8b5cf6; - border-color: #8b5cf6; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0f17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); - background-size: 11px 11px; - background-position: center; - background-repeat: no-repeat; - box-shadow: 0 0 8px rgba(139, 92, 246, 0.35); -} - -.anomalous-material-node-select:focus-visible { - outline: 2px solid #8b5cf6; - outline-offset: 2px; -} - -.anomalous-material-node-detail > summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - padding: 8px 10px; - color: #d8dee9; - cursor: pointer; - user-select: none; - list-style: none; -} - -.anomalous-material-node-detail > summary::-webkit-details-marker { - display: none; -} - -.anomalous-material-node-detail > summary:hover { background: rgba(255, 255, 255, 0.035); } -.anomalous-material-node-detail[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } - -.anomalous-material-node-heading { - display: flex; - min-width: 0; - flex: 1; - align-items: center; - flex-wrap: wrap; - gap: 6px; -} - -.anomalous-material-node-heading strong, -.anomalous-material-node-heading small { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-material-node-heading strong { font-size: 0.77rem; font-weight: 600; } -.anomalous-material-node-heading small { color: #788396; font-size: 0.67rem; font-family: monospace; } -.anomalous-material-node-count { flex-shrink: 0; color: #8290a5; font-size: 0.68rem; } - -.anomalous-material-prompt-role-select { - width: auto; - max-width: 190px; - flex: 0 1 190px; - padding-block: 5px; - font-size: 0.68rem; -} - -.anomalous-material-node-save, -.anomalous-workbench-save-selected-btn { - flex: 0 0 auto; - padding: 5px 9px; - border: 1px solid rgba(139, 92, 246, 0.24); - border-radius: 6px; - background: rgba(139, 92, 246, 0.08); - color: #8fe1d4; - font-size: 0.66rem; - cursor: pointer; -} - -.anomalous-material-node-save:hover, -.anomalous-workbench-save-selected-btn:hover:not(:disabled) { - border-color: rgba(139, 92, 246, 0.42); - background: rgba(139, 92, 246, 0.14); - color: #d8fff8; -} - -.anomalous-material-node-save:disabled, -.anomalous-workbench-save-selected-btn:disabled { - cursor: default; - opacity: 0.5; -} - -.anomalous-material-node-parameter-content { - display: flex; - flex-direction: column; - gap: 7px; - padding: 9px; -} - -.anomalous-material-node-meta { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 7px; - color: #7f8a9d; - font-size: 0.67rem; -} - -.anomalous-material-node-meta button { margin-left: auto; } - -.anomalous-material-parameter-row { - display: grid; - grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr); - gap: 10px; - align-items: start; - padding: 7px 8px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.025); -} - -.anomalous-material-parameter-label { - display: flex; - min-width: 0; - align-items: center; - flex-wrap: wrap; - gap: 5px; - padding-top: 2px; - color: #aab3c2; - font-size: 0.7rem; -} - -.anomalous-material-parameter-label code { - color: #687487; - font-size: 0.62rem; -} - -.anomalous-material-volatile-badge { - padding: 1px 5px; - border: 1px solid rgba(245, 158, 11, 0.22); - border-radius: 999px; - background: rgba(245, 158, 11, 0.08); - color: #d6a756; - font-size: 0.59rem; -} - -.anomalous-material-parameter-value { - max-height: 150px; - overflow: auto; - margin: 0; - padding: 6px 8px; - border: 1px solid rgba(255, 255, 255, 0.055); - border-radius: 5px; - background: rgba(0, 0, 0, 0.18); - color: #d5dae4; - font-family: ui-monospace, SFMono-Regular, Consolas, monospace; - font-size: 0.67rem; - line-height: 1.4; - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -@media (max-width: 560px) { - .anomalous-material-parameter-row { grid-template-columns: 1fr; } -} - -.anomalous-material-blocks-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - margin: 18px 0 10px; -} - -.anomalous-material-blocks-header .anomalous-material-section-label { - margin: 0; -} - -.anomalous-material-toggle-all-btn { - padding: 3px 9px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 6px; - background: rgba(255, 255, 255, 0.04); - color: #94a3b8; - font-size: 0.68rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-material-toggle-all-btn:hover { - border-color: rgba(81, 221, 190, 0.35); - background: rgba(81, 221, 190, 0.08); - color: #e2e8f0; -} - -/* Material Prompt Station */ -.anomalous-material-prompt-station { - display: flex; - flex-direction: column; - gap: 8px; - padding: 10px 12px; - border: 1px solid rgba(81, 221, 190, 0.2); - border-radius: 8px; - background: rgba(13, 17, 23, 0.65); -} - -.anomalous-material-prompt-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; -} - -.anomalous-material-prompt-title-sec { - display: flex; - align-items: center; - gap: 8px; -} - -.anomalous-material-prompt-title { - font-size: 0.76rem; - font-weight: 600; - color: #6ee7b7; -} - -.anomalous-material-prompt-count { - font-size: 0.68rem; - color: #64748b; -} - -.anomalous-material-copy-prompt-btn { - padding: 3px 8px; - border: 1px solid rgba(81, 221, 190, 0.3); - border-radius: 5px; - background: rgba(81, 221, 190, 0.1); - color: #8fe1d4; - font-size: 0.68rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-material-copy-prompt-btn:hover { - background: rgba(81, 221, 190, 0.22); - border-color: rgba(81, 221, 190, 0.5); - color: #fff; -} - -.anomalous-material-prompt-body { - max-height: 180px; - overflow-y: auto; - font-family: inherit; - font-size: 0.74rem; - line-height: 1.45; - color: #cbd5e1; - white-space: pre-wrap; - word-break: break-word; - padding: 7px 9px; - background: rgba(0, 0, 0, 0.28); - border-radius: 5px; - border: 1px solid rgba(255, 255, 255, 0.04); -} - -/* Model Categorized Groups */ -.anomalous-material-model-group { - display: flex; - flex-direction: column; - gap: 6px; - margin-bottom: 10px; -} - -.anomalous-material-model-group:last-child { - margin-bottom: 0; -} - -.anomalous-material-model-group-title { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.72rem; - font-weight: 600; - color: #94a3b8; - padding-bottom: 3px; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} - -.anomalous-material-model-card-item { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - padding: 6px 10px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.025); - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.anomalous-material-model-card-item.is-clickable { - cursor: pointer; -} - -.anomalous-material-model-card-item.is-active { - border-color: rgba(56, 189, 248, 0.45); - background: rgba(56, 189, 248, 0.08); -} - -.theme-abyssal-scarlet .anomalous-material-model-card-item.is-active { - border-color: rgba(220, 20, 60, 0.45); - background: rgba(220, 20, 60, 0.08); -} - -.anomalous-material-model-thumb { - flex: 0 0 48px; - width: 48px; - height: 48px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 7px; - background: #0b0c10; -} - -.anomalous-material-model-thumb img, -.anomalous-material-model-thumb video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.anomalous-material-model-side { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 6px; - flex-shrink: 0; -} - -.anomalous-material-model-notes { - display: -webkit-box; - overflow: hidden; - color: #c4b48a; - font-size: 0.7rem; - line-height: 1.35; - white-space: pre-wrap; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.anomalous-material-model-info { - display: flex; - flex-direction: column; - gap: 2px; - min-width: 0; - flex: 1; -} - -.anomalous-material-model-filename { - color: #e2e8f0; - font-size: 0.79rem; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-material-model-params { - display: flex; - align-items: center; - gap: 8px; - font-size: 0.71rem; - color: #94a3b8; -} - -.anomalous-material-model-tag-badge { - padding: 2px 7px; - border-radius: 4px; - font-size: 0.68rem; - font-weight: 600; - flex-shrink: 0; -} - -.anomalous-tag-base { - background: rgba(255, 255, 255, 0.08); - color: #cbd5e1; - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.theme-abyssal-scarlet .anomalous-tag-base { - background: rgba(220, 20, 60, 0.18); - color: #ff3366; - border: 1px solid rgba(220, 20, 60, 0.45); -} - -.anomalous-tag-lora { - background: rgba(192, 132, 252, 0.12); - color: #c084fc; - border: 1px solid rgba(192, 132, 252, 0.25); -} - -.anomalous-tag-vae { - background: rgba(251, 146, 60, 0.12); - color: #fb923c; - border: 1px solid rgba(251, 146, 60, 0.25); -} - -.anomalous-tag-clip { - background: rgba(139, 92, 246, 0.12); - color: #8b5cf6; - border: 1px solid rgba(139, 92, 246, 0.25); -} - -.anomalous-tag-other { - background: rgba(148, 163, 184, 0.12); - color: #94a3b8; - border: 1px solid rgba(148, 163, 184, 0.25); -} - -/* ========================================================================== - Image Detail Studio Workbench (Studio Windowed Modal & Bento Design) - ========================================================================== */ - -.anomalous-workbench-overlay { - position: fixed; - inset: 0; - z-index: 1000000; - display: flex; - align-items: center; - justify-content: center; - width: 100vw; - height: 100vh; - padding: clamp(16px, 2.5vw, 24px); - box-sizing: border-box; - background: rgba(3, 4, 7, 0.88); - backdrop-filter: blur(16px); - overflow: hidden; - user-select: none; -} - -.anomalous-workbench-overlay.is-suspended { - visibility: hidden; - pointer-events: none; -} - -.anomalous-workbench-dialog { - position: relative; - display: flex; - flex-direction: column; - width: min(1600px, 96vw); - height: min(940px, 94vh); - background: #0b0d14; - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 32px 96px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.05); - overflow: hidden; -} - -/* Workbench Top Header */ -.anomalous-workbench-header { - display: flex; - align-items: center; - justify-content: space-between; - flex-shrink: 0; - height: 54px; - padding: 0 18px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - background: #0f121a; - gap: 16px; -} - -.anomalous-workbench-header-left { - display: flex; - align-items: center; - gap: 12px; - min-width: 0; - flex: 1; -} - -.anomalous-workbench-back-btn { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.04); - color: #cbd5e1; - font-size: 20px; - cursor: pointer; - transition: all 0.15s; - line-height: 1; -} - -.anomalous-workbench-back-btn:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff; - border-color: rgba(255, 255, 255, 0.2); -} - -.anomalous-workbench-title-box { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - overflow: hidden; -} - -.anomalous-workbench-title-filename { - font-size: 0.92rem; - font-weight: 600; - color: #f1f5f9; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.anomalous-workbench-title-tags { - display: flex; - align-items: center; - gap: 6px; - flex-shrink: 0; -} - -.anomalous-workbench-tag { - padding: 2px 7px; - border-radius: 5px; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #94a3b8; - font-size: 0.68rem; - font-weight: 500; -} - -.anomalous-workbench-tag.is-ext { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.16); - color: #cbd5e1; - font-weight: 700; -} - -.theme-abyssal-scarlet .anomalous-workbench-tag.is-ext { - background: rgba(220, 20, 60, 0.1); - border-color: rgba(220, 20, 60, 0.25); - color: #dc143c; -} - -/* Center switcher counter */ -.anomalous-workbench-header-center { - display: flex; - align-items: center; - gap: 10px; - flex-shrink: 0; - background: rgba(0, 0, 0, 0.35); - padding: 3px 8px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-workbench-nav-btn { - display: flex; - align-items: center; - justify-content: center; - width: 26px; - height: 26px; - border-radius: 50%; - border: none; - background: transparent; - color: #cbd5e1; - font-size: 18px; - cursor: pointer; - transition: all 0.15s; - line-height: 1; -} - -.anomalous-workbench-nav-btn:not(:disabled):hover { - background: rgba(255, 255, 255, 0.12); - color: #fff; -} - -.anomalous-workbench-nav-btn:disabled { - opacity: 0.25; - cursor: not-allowed; -} - -.anomalous-workbench-counter { - font-size: 0.8rem; - font-weight: 600; - color: #e2e8f0; - font-variant-numeric: tabular-nums; - padding: 0 4px; -} - -/* Right buttons */ -.anomalous-workbench-header-right { - display: flex; - align-items: center; - gap: 8px; - flex-shrink: 0; -} - -.anomalous-workbench-tool-btn { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.04); - color: #cbd5e1; - font-size: 15px; - cursor: pointer; - transition: all 0.15s; -} - -.anomalous-workbench-tool-btn:hover, -.anomalous-workbench-tool-btn.is-active { - background: rgba(139, 92, 246, 0.15); - border-color: rgba(139, 92, 246, 0.35); - color: #8b5cf6; -} - -.anomalous-workbench-close-btn { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(239, 68, 68, 0.1); - color: #fca5a5; - font-size: 20px; - cursor: pointer; - transition: all 0.15s; - line-height: 1; -} - -.anomalous-workbench-close-btn:hover { - background: rgba(239, 68, 68, 0.25); - color: #fff; - border-color: rgba(239, 68, 68, 0.4); - transform: scale(1.05); -} - -/* Main Body: Left Thumbnail Rail + Center Stage Area + Right Inspector */ -.anomalous-workbench-body { - display: grid; - grid-template-columns: auto minmax(0, 1.45fr) minmax(460px, 0.95fr); - flex: 1; - min-height: 0; - overflow: hidden; -} - -/* Left Canvas Stage Area */ -.anomalous-workbench-stage-area { - position: relative; - display: flex; - flex-direction: column; - min-height: 0; - height: 100%; - background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.035) 0%, transparent 68%), #07080c; - overflow: hidden; -} - -.anomalous-workbench-stage { - position: relative; - flex: 1; - display: flex; - align-items: center; - justify-content: center; - min-height: 0; - overflow: hidden; -} - -.anomalous-workbench-stage-img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - user-select: none; - pointer-events: auto; - transition: transform 0.06s ease-out; - transform-origin: center center; - filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.6)); -} - -/* Floating Prev/Next Glass Nav Arrows */ -.anomalous-workbench-float-nav { - position: absolute; - top: 50%; - transform: translateY(-50%); - z-index: 12; - display: flex; - align-items: center; - justify-content: center; - width: 44px; - height: 84px; - border-radius: 12px; - background: rgba(15, 18, 26, 0.55); - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #e2e8f0; - font-size: 32px; - cursor: pointer; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - line-height: 1; - opacity: 0.65; -} - -.anomalous-workbench-float-nav.is-prev { left: 16px; } -.anomalous-workbench-float-nav.is-next { right: 16px; } - -.anomalous-workbench-float-nav:hover { - opacity: 1; - background: rgba(139, 92, 246, 0.2); - border-color: rgba(139, 92, 246, 0.45); - color: #fff; - transform: translateY(-50%) scale(1.08); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(139, 92, 246, 0.25); -} - -/* Floating Zoom Bar */ -.anomalous-workbench-zoom-bar { - position: absolute; - bottom: 18px; - right: 18px; - z-index: 12; - display: flex; - align-items: center; - gap: 4px; - padding: 4px 8px; - border-radius: 9px; - background: rgba(14, 17, 24, 0.85); - backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); -} - -.anomalous-workbench-zoom-bar button { - padding: 3px 8px; - border-radius: 5px; - border: 1px solid transparent; - background: transparent; - color: #cbd5e1; - font-size: 0.72rem; - font-weight: 500; - cursor: pointer; - transition: all 0.15s; -} - -.anomalous-workbench-zoom-bar button:hover { - background: rgba(255, 255, 255, 0.1); - color: #fff; -} - -/* Left Filmstrip Rail */ -.anomalous-workbench-filmstrip { - width: 116px; - height: 100%; - min-height: 0; - padding: 12px 10px; - border-right: 1px solid rgba(255, 255, 255, 0.08); - background: #080a0f; - overflow-x: hidden; - overflow-y: auto; - box-sizing: border-box; - transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), - padding 0.22s cubic-bezier(0.16, 1, 0.3, 1), - opacity 0.18s ease; -} - -.anomalous-workbench-filmstrip.is-hidden { - width: 0 !important; - min-width: 0 !important; - padding: 0 !important; - border-right: none !important; - overflow: hidden !important; - opacity: 0 !important; - pointer-events: none !important; -} - -.anomalous-workbench-filmstrip::-webkit-scrollbar { - width: 4px; -} - -.anomalous-workbench-filmstrip::-webkit-scrollbar-track { - background: transparent; -} - -.anomalous-workbench-filmstrip::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.14); - border-radius: 4px; -} - -.anomalous-workbench-filmstrip::-webkit-scrollbar-thumb:hover { - background: rgba(139, 92, 246, 0.45); -} - -.anomalous-workbench-filmstrip-track { - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - width: 100%; -} - -.anomalous-workbench-filmstrip-thumb { - position: relative; - flex: 0 0 92px; - width: 92px; - height: 92px; - border-radius: 10px; - overflow: hidden; - border: 2px solid rgba(255, 255, 255, 0.1); - background: #12151e; - cursor: pointer; - box-sizing: border-box; - transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease; -} - -.anomalous-workbench-filmstrip-thumb img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} - -.anomalous-workbench-filmstrip-thumb:hover { - border-color: rgba(255, 255, 255, 0.45); - transform: scale(1.04); -} - -.anomalous-workbench-filmstrip-thumb.is-active { - border-color: #8b5cf6; - box-shadow: 0 0 8px rgba(139, 92, 246, 0.35), inset 0 0 0 1px #8b5cf6; - transform: scale(1.04); -} - -.anomalous-workbench-thumb-index { - position: absolute; - bottom: 4px; - right: 4px; - font-size: 10px; - font-weight: 700; - line-height: 1; - color: #94a3b8; - background: rgba(10, 13, 20, 0.82); - backdrop-filter: blur(4px); - padding: 2px 5px; - border-radius: 4px; - pointer-events: none; - transition: color 0.15s, background 0.15s; -} - -.anomalous-workbench-filmstrip-thumb.is-active .anomalous-workbench-thumb-index { - color: #8b5cf6; - background: rgba(13, 23, 27, 0.92); - font-weight: 800; -} - -/* Right Inspector Panel */ -.anomalous-workbench-inspector { - display: flex; - flex-direction: column; - min-height: 0; - height: 100%; - border-left: 1px solid rgba(255, 255, 255, 0.08); - background: #0e1118; -} - -.anomalous-workbench-inspector-body { - flex: 1; - min-height: 0; - overflow-y: auto; - padding: 16px 18px; - display: flex; - flex-direction: column; - gap: 14px; - user-select: text; -} - -/* Inspector Top Actions Toolbar */ -.anomalous-workbench-inspector-toolbar { - display: flex; - gap: 8px; - flex-wrap: wrap; - flex-shrink: 0; -} - -.anomalous-workbench-action-btn { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - gap: 7px; - height: 36px; - padding: 0 14px; - border-radius: 3px 10px 3px 10px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.05); - color: #e2e8f0; - font-size: 0.8rem; - font-weight: 600; - cursor: pointer; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - white-space: nowrap; - user-select: none; - box-sizing: border-box; - position: relative; - overflow: hidden; -} - -.anomalous-workbench-action-icon { - width: 14px; - height: 14px; - flex-shrink: 0; - stroke: currentColor; - transition: transform 0.18s ease; -} - -.anomalous-workbench-action-btn:hover .anomalous-workbench-action-icon { - transform: scale(1.1); -} - -.anomalous-workbench-action-btn:hover { - background: rgba(255, 255, 255, 0.09); - color: #ffffff; - border-color: rgba(255, 255, 255, 0.22); -} - -.anomalous-workbench-action-btn.is-primary { - background: var(--amb-btn-primary-bg); - border-color: var(--amb-border-hover); - color: var(--amb-btn-primary-text); -} - -.anomalous-workbench-action-btn.is-primary:hover { - background: var(--amb-btn-primary-hover); - border-color: var(--amb-border-hover); - color: var(--amb-btn-primary-text); - box-shadow: none; - transform: translateY(-1px); -} - -.anomalous-workbench-action-btn.is-primary:active { - transform: translateY(0) scale(0.98); -} - -.anomalous-workbench-action-btn.is-save { - background: rgba(255, 255, 255, 0.04); - border-color: rgba(255, 255, 255, 0.12); - box-shadow: none; - color: #cbd5e1; - flex: 0 0 auto; -} - -.anomalous-workbench-action-btn.is-save:hover { - background: rgba(255, 255, 255, 0.09); - color: #ffffff; - border-color: rgba(165, 180, 252, 0.4); - box-shadow: none; - transform: translateY(-1px); -} - -.anomalous-workbench-action-btn.is-save.is-active, -.anomalous-workbench-action-btn.is-save[aria-expanded="true"] { - background: rgba(99, 102, 241, 0.2); - border-color: rgba(129, 140, 248, 0.5); - color: #c7d2fe; - box-shadow: none; -} - -.anomalous-workbench-action-btn.is-save:active { - transform: translateY(0) scale(0.98); -} - -/* Segmented Tabs Bar */ -.anomalous-workbench-tabs-bar { - display: flex; - background: rgba(0, 0, 0, 0.38); - padding: 3px; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.08); - gap: 3px; - flex-shrink: 0; -} - -.anomalous-workbench-tab-btn { - flex: 1; - padding: 7px 8px; - border-radius: 7px; - border: none; - background: transparent; - color: #94a3b8; - font-size: 0.74rem; - font-weight: 600; - cursor: pointer; - transition: all 0.15s; - text-align: center; - white-space: nowrap; -} - -.anomalous-workbench-tab-btn:hover { - color: #f1f5f9; - background: rgba(255, 255, 255, 0.04); -} - -.anomalous-workbench-tab-btn.is-active { - background: rgba(255, 255, 255, 0.09); - color: #8b5cf6; - box-shadow: none; -} - -.anomalous-workbench-tab-btn:active { - transform: scale(0.97); -} - -/* Tab Panels */ -.anomalous-workbench-tab-panel { - display: flex; - flex-direction: column; - gap: 12px; -} - -/* Bento Specs Grid */ -.anomalous-workbench-specs-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px; -} - -.anomalous-workbench-spec-card { - display: flex; - flex-direction: column; - gap: 5px; - padding: 8px 10px; - border-radius: var(--amb-radius-control, 6px); - background: var(--amb-bg-card, #24262E); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); - transition: background-color 0.15s ease, border-color 0.15s ease; - position: relative; - user-select: text; -} - -.anomalous-workbench-spec-card:hover { - background: var(--amb-bg-card-hover, #2d303a); - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.16)); -} - -.anomalous-workbench-spec-card.is-wide { - grid-column: 1 / -1; -} - -.anomalous-workbench-spec-card.is-seed { - border-color: rgba(245, 158, 11, 0.28); - background: rgba(245, 158, 11, 0.035); -} - -.anomalous-workbench-spec-card.is-seed:hover { - border-color: rgba(245, 158, 11, 0.45); - background: rgba(245, 158, 11, 0.06); -} - -.anomalous-workbench-spec-card.is-res { - border-color: rgba(56, 189, 248, 0.25); - background: rgba(56, 189, 248, 0.035); -} - -.theme-abyssal-scarlet .anomalous-workbench-spec-card.is-res { - border-color: rgba(220, 20, 60, 0.25); - background: rgba(220, 20, 60, 0.035); -} - -/* Card Click-to-copy interaction */ -.anomalous-workbench-spec-card.is-copyable { - cursor: pointer; -} - -.anomalous-workbench-spec-card.is-copyable:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); -} - -.anomalous-workbench-spec-card.is-copyable:active { - transform: translateY(0) scale(0.99); -} - -.anomalous-workbench-spec-card.is-copied { - border-color: rgba(139, 92, 246, 0.6) !important; - background: rgba(139, 92, 246, 0.08) !important; - box-shadow: 0 0 14px rgba(139, 92, 246, 0.25) !important; -} - -.anomalous-workbench-spec-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; -} - -.anomalous-workbench-spec-label { - font-size: 0.68rem; - color: #8a96a8; - font-weight: 500; -} - -.anomalous-workbench-copy-indicator { - position: absolute; - right: 10px; - top: 10px; - display: inline-flex; - align-items: center; - gap: 4px; - opacity: 0; - transition: opacity 0.15s ease, transform 0.15s ease; - color: #94a3b8; - pointer-events: none; -} - -.anomalous-workbench-spec-card.is-copyable:hover .anomalous-workbench-copy-indicator, -.anomalous-workbench-spec-card.is-copyable:focus-visible .anomalous-workbench-copy-indicator { - opacity: 1; - transform: scale(1.05); -} - -.anomalous-workbench-spec-card.is-copyable:focus-visible { - outline: 2px solid rgba(139, 92, 246, 0.55); - outline-offset: 1px; -} - -.anomalous-workbench-spec-copy-icon { - width: 12px; - height: 12px; - stroke: currentColor; -} - -.anomalous-workbench-spec-copy-icon.is-success { - stroke: #8b5cf6; -} - -.anomalous-workbench-spec-copy-icon.is-error { - stroke: #f87171; -} - -.anomalous-workbench-copy-badge { - font-size: 10px; - font-weight: 600; - color: #8b5cf6; - animation: anomalous-fade-in 0.15s ease forwards; -} - -.anomalous-workbench-copy-badge.is-error { - color: #f87171; -} - -.anomalous-workbench-spec-card.is-copy-failed { - border-color: rgba(239, 68, 68, 0.5) !important; - background: rgba(239, 68, 68, 0.06) !important; -} - -@keyframes anomalous-fade-in { - from { opacity: 0; transform: translateX(2px); } - to { opacity: 1; transform: translateX(0); } -} - -.anomalous-workbench-spec-val { - color: #f1f5f9; - font-size: 0.94rem; - font-weight: 600; - line-height: 1.25; - overflow-wrap: anywhere; -} - -.anomalous-workbench-spec-val.is-mono { - font-family: ui-monospace, SFMono-Regular, Consolas, monospace; - font-variant-numeric: tabular-nums; -} - -/* Generation Parameter Preset Section */ -.anomalous-workbench-generation-save { - grid-column: 1 / -1; - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 10px 14px; - border-radius: 10px; - background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(56, 189, 248, 0.04) 100%); - border: 1px solid rgba(139, 92, 246, 0.2); - margin-top: 4px; - transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; -} - -.anomalous-workbench-generation-save:hover { - background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(56, 189, 248, 0.08) 100%); - border-color: rgba(139, 92, 246, 0.35); - box-shadow: 0 3px 12px rgba(139, 92, 246, 0.08); -} - -.anomalous-workbench-generation-info { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; - flex: 1; -} - -.anomalous-workbench-generation-title { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.78rem; - font-weight: 700; - color: #f1f5f9; -} - -.anomalous-workbench-generation-icon { - width: 13px; - height: 13px; - stroke: #8b5cf6; - flex-shrink: 0; -} - -.anomalous-workbench-generation-hint { - font-size: 0.66rem; - color: #8e9dae; - line-height: 1.35; -} - -.anomalous-workbench-generation-btn { - flex-shrink: 0; - padding: 6px 13px; - border-radius: 7px; - background: var(--amb-btn-primary-bg); - border: 1px solid rgba(139, 92, 246, 0.45); - color: var(--amb-btn-primary-text); - font-size: 0.74rem; - font-weight: 600; - cursor: pointer; - transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease; - white-space: nowrap; - user-select: none; - border-color: var(--amb-border-hover); -} - -.anomalous-workbench-generation-btn:hover:not(:disabled) { - background: var(--amb-btn-primary-hover); - border-color: var(--amb-border-hover); - color: var(--amb-btn-primary-text); - box-shadow: none; - transform: translateY(-1px); -} - -.anomalous-workbench-generation-btn:active:not(:disabled) { - transform: translateY(0) scale(0.97); -} - -.anomalous-workbench-generation-btn:disabled { - opacity: 0.55; - cursor: default; -} - -/* Prompts Station */ -.anomalous-workbench-prompts-wrap { - display: flex; - flex-direction: column; - gap: 12px; -} - -.anomalous-workbench-prompt-card { - display: flex; - flex-direction: column; - gap: 8px; - padding: 12px 14px; - border-radius: 11px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - border-left-width: 3.5px; -} - -.anomalous-workbench-prompt-card.is-positive { - border-left-color: #8b5cf6; - background: linear-gradient(90deg, rgba(139, 92, 246, 0.04) 0%, rgba(255, 255, 255, 0.02) 40%); -} - -.anomalous-workbench-prompt-card.is-negative { - border-left-color: #f43f5e; - background: linear-gradient(90deg, rgba(244, 63, 94, 0.04) 0%, rgba(255, 255, 255, 0.02) 40%); -} - -.anomalous-workbench-prompt-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; -} - -.anomalous-workbench-prompt-title-section { - display: flex; - align-items: center; - gap: 8px; -} - -.anomalous-workbench-prompt-title { - font-size: 0.78rem; - font-weight: 700; - color: #e2e8f0; -} - -.anomalous-workbench-prompt-count { - padding: 1px 6px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.06); - color: #8b95a5; - font-size: 0.65rem; -} - -.anomalous-workbench-prompt-btns { - display: flex; - gap: 6px; -} - -.anomalous-workbench-mini-action-btn { - padding: 3px 8px; - border-radius: 5px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.04); - color: #cbd5e1; - font-size: 0.7rem; - font-weight: 500; - cursor: pointer; - transition: all 0.15s; -} - -.anomalous-workbench-mini-action-btn:hover { - background: rgba(255, 255, 255, 0.12); - color: #fff; - border-color: rgba(255, 255, 255, 0.22); -} - -.anomalous-workbench-mini-action-btn.is-copied { - background: rgba(139, 92, 246, 0.2); - color: #8b5cf6; - border-color: #8b5cf6; -} - -.anomalous-workbench-prompt-content { - color: #d1d9e6; - font-size: 0.8rem; - line-height: 1.55; - max-height: 5.6em; - overflow: hidden; - white-space: pre-wrap; - word-break: break-word; - font-family: ui-monospace, SFMono-Regular, Consolas, monospace; - transition: max-height 0.25s ease; -} - -.anomalous-workbench-prompt-content.is-expanded { - max-height: none; - overflow-y: visible; -} - -/* Models & LoRA Section */ -.anomalous-workbench-models-wrap { - display: flex; - flex-direction: column; - gap: 12px; -} - -.anomalous-workbench-model-group { - display: flex; - flex-direction: column; - gap: 6px; -} - -.anomalous-workbench-model-group-title { - font-size: 0.72rem; - font-weight: 700; - color: #94a3b8; - margin-bottom: 2px; -} - -.anomalous-workbench-model-card { - display: flex; - align-items: center; - gap: 10px; - padding: 8px 10px; - border-radius: 9px; - background: rgba(255, 255, 255, 0.025); - border: 1px solid rgba(255, 255, 255, 0.06); - transition: all 0.15s; -} - -.anomalous-workbench-model-card:hover { - background: rgba(255, 255, 255, 0.05); - border-color: rgba(255, 255, 255, 0.12); -} - -.anomalous-workbench-model-thumb { - flex: 0 0 46px; - width: 46px; - height: 46px; - border-radius: 7px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.08); - background: #090b10; -} - -.anomalous-workbench-model-thumb img, -.anomalous-workbench-model-thumb video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.anomalous-workbench-model-info { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; - flex: 1; -} - -.anomalous-workbench-model-name { - font-size: 0.8rem; - font-weight: 600; - color: #e2e8f0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.anomalous-workbench-lora-badge { - display: inline-block; - padding: 1px 6px; - border-radius: 4px; - background: rgba(192, 132, 252, 0.12); - color: #c084fc; - border: 1px solid rgba(192, 132, 252, 0.25); - font-size: 0.68rem; - font-weight: 600; - width: fit-content; -} - -.anomalous-workbench-model-notes { - font-size: 0.68rem; - color: #c4b48a; - line-height: 1.3; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-workbench-model-actions { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 5px; - flex-shrink: 0; -} - -.anomalous-workbench-model-tag { - padding: 2px 7px; - border-radius: 999px; - font-size: 0.66rem; - font-weight: 700; -} - -.anomalous-workbench-model-tag.is-base { - background: rgba(255, 255, 255, 0.08); - color: #cbd5e1; - border: 1px solid rgba(255, 255, 255, 0.15); -} - -.theme-abyssal-scarlet .anomalous-workbench-model-tag.is-base { - background: rgba(220, 20, 60, 0.18); - color: #ff3366; - border: 1px solid rgba(220, 20, 60, 0.45); -} - -.anomalous-workbench-model-tag.is-lora { - background: rgba(192, 132, 252, 0.12); - color: #c084fc; - border: 1px solid rgba(192, 132, 252, 0.25); -} - -.anomalous-workbench-model-tag.is-clip { - background: rgba(139, 92, 246, 0.12); - color: #8b5cf6; - border: 1px solid rgba(139, 92, 246, 0.25); -} - -.anomalous-workbench-model-tag.is-vae { - background: rgba(251, 146, 60, 0.12); - color: #fb923c; - border: 1px solid rgba(251, 146, 60, 0.25); -} - -.anomalous-workbench-model-tag.is-other { - background: rgba(148, 163, 184, 0.12); - color: #94a3b8; - border: 1px solid rgba(148, 163, 184, 0.25); -} - -/* Nodes Section */ -.anomalous-workbench-nodes-wrap { - display: flex; - flex-direction: column; - gap: 10px; -} - -.anomalous-workbench-action-row { - display: flex; - justify-content: flex-end; -} - -.anomalous-workbench-node-list-box { - display: flex; - flex-direction: column; - gap: 6px; -} - -.anomalous-workbench-node-selection-bar { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 7px; - padding: 8px 10px; - border: 1px solid rgba(139, 92, 246, 0.14); - border-radius: 8px; - background: rgba(139, 92, 246, 0.035); -} - -.anomalous-workbench-node-selection-count { - flex: 1 1 180px; - color: #8fa0b5; - font-size: 0.7rem; -} - -.anomalous-workbench-save-selected-btn { - margin-left: auto; -} - -/* Sticky Footer Snapshot Drawer */ -.anomalous-workbench-inspector-footer { - flex-shrink: 0; - padding: 12px 18px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - background: #0c0e14; -} - -.anomalous-workbench-save-row { - display: flex; - flex-wrap: wrap; - gap: 10px; - align-items: center; -} - -.anomalous-workbench-save-input-wrap { - display: flex; - flex: 1 1 220px; - min-width: 0; - flex-direction: column; - gap: 3px; -} - -.anomalous-workbench-save-hint { - min-height: 1em; - color: #748196; - font-size: 0.62rem; - line-height: 1.25; -} - -.anomalous-material-scope-badge { - flex: 0 0 auto; - align-self: flex-start; - padding: 2px 7px; - border: 1px solid rgba(148, 163, 184, 0.24); - border-radius: 999px; - background: rgba(148, 163, 184, 0.08); - color: #cbd5e1; - font-size: 0.65rem; - white-space: nowrap; -} - -.anomalous-material-scope-badge.is-workflow { - border-color: rgba(96, 165, 250, 0.24); - background: rgba(96, 165, 250, 0.08); - color: #9cc7ff; -} - -.anomalous-material-scope-badge.is-prompt { - border-color: rgba(168, 85, 247, 0.28); - background: rgba(168, 85, 247, 0.08); - color: #c084fc; -} - -.anomalous-material-scope-badge.is-nodes { - border-color: rgba(148, 163, 184, 0.24); - background: rgba(148, 163, 184, 0.08); - color: #94a3b8; -} - -.anomalous-material-card-title-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-width: 0; -} - -.anomalous-material-card-title-text { - margin: 0; - font-size: 0.94rem; - font-weight: 600; - color: #f1f5f9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} - -.anomalous-material-card-edit-btn { - opacity: 0; - background: transparent; - border: none; - padding: 3px; - cursor: pointer; - color: #94a3b8; - border-radius: 4px; - display: inline-flex; - align-items: center; - justify-content: center; - transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease; - flex-shrink: 0; -} - -.anomalous-material-card-edit-btn svg { - width: 13px; - height: 13px; -} - -.anomalous-material-card:hover .anomalous-material-card-edit-btn, -.anomalous-material-card:focus-within .anomalous-material-card-edit-btn { - opacity: 1; -} - -.anomalous-material-card-edit-btn:hover { - color: #ffffff; - background: rgba(255, 255, 255, 0.1); -} - -.anomalous-material-inline-input { - width: 100%; - box-sizing: border-box; - padding: 4px 8px; - font-size: 0.88rem; - background: rgba(10, 12, 18, 0.92); - border: 1px solid rgba(139, 92, 246, 0.55); - border-radius: 6px; - color: #ffffff; - outline: none; - box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); -} - -.anomalous-material-card-subinfo { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - font-size: 0.68rem; - color: #64748b; - margin-top: -2px; -} - -.anomalous-material-card-date { - color: #64748b; - font-size: 0.68rem; -} - -.anomalous-material-card-use-hint { - flex: 1; - color: #8591a5; - font-size: 0.68rem; -} - -.anomalous-workbench-save-input-wrap input { - width: 100%; - box-sizing: border-box; - padding: 8px 12px; - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(0, 0, 0, 0.35); - color: #f1f5f9; - font-size: 0.82rem; - outline: none; - transition: all 0.15s; -} - -.anomalous-workbench-save-input-wrap input:focus { - border-color: #8b5cf6; - box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); -} - -/* Loading & Error Box */ -.anomalous-workbench-loading-box { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 14px; - padding: 40px 20px; - color: #94a3b8; - font-size: 0.82rem; - text-align: center; -} - -.anomalous-workbench-spinner { - width: 28px; - height: 28px; - border-radius: 50%; - border: 3px solid rgba(139, 92, 246, 0.15); - border-top-color: #8b5cf6; - animation: anomalous-spin 0.8s linear infinite; -} - -@keyframes anomalous-spin { - to { transform: rotate(360deg); } -} - -.anomalous-workbench-error-box { - padding: 24px; - text-align: center; - color: #f87171; - font-size: 0.82rem; -} - -.anomalous-workbench-muted { - color: #64748b; - font-size: 0.78rem; - font-style: italic; -} -/* Progressive disclosure shared by material capture surfaces. */ -.anomalous-workbench-inspector-footer[hidden], -.anomalous-recipe-prompt-role-select[hidden], -.anomalous-recipe-material-selection[hidden], -.anomalous-recipe-material-node-select[hidden] { display: none !important; } -.anomalous-material-receipt { - position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); - z-index: 1000010; display: flex; align-items: center; gap: 16px; - max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; - background: #22372e; color: #f0f7f3; border: 1px solid #537360; - box-shadow: 0 8px 32px #0008; -} -.anomalous-material-receipt button { cursor: pointer; color: inherit; background: transparent; border: 0; white-space: nowrap; } -.anomalous-material-receipt button:first-of-type { text-decoration: underline; } -.anomalous-notebook-fold, .anomalous-secondary-actions { padding: 8px; } -.anomalous-notebook-fold > summary, .anomalous-secondary-actions > summary { cursor: pointer; color: var(--input-text, #ddd); padding: 4px; } -.anomalous-notebook-fold > p { color: #aaa; font-size: 13px; } -.anomalous-notebook-fold > button { margin: 6px 8px 0 0; } -/* duplicate workbench-generation-save selector cleaned up */ -.anomalous-material-note-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.7; } -.anomalous-notebook-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } -.anomalous-nb-editor .anomalous-nb-textarea { font: inherit; line-height: 1.6; padding: 12px; box-sizing: border-box; } -/* Material application and prompt composition: structural styling, no animation or blur. */ -.anomalous-prompt-composer { - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - overflow-y: auto; - gap: 12px; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 16px; - box-sizing: border-box; -} -.anomalous-prompt-composer > * { flex-shrink: 0; } -.anomalous-prompt-actions, -.anomalous-prompt-target, -.anomalous-material-application-result { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px; -} -.anomalous-prompt-actions h3 { margin: 0; } -.anomalous-prompt-field { display: flex; flex-direction: column; gap: 6px; } -.anomalous-prompt-composer textarea, -.anomalous-prompt-composer input:not([type="checkbox"]), -.anomalous-prompt-composer select { - box-sizing: border-box; - max-width: 100%; - padding: 8px 10px; - border: 1px solid var(--border-color, #454545); - border-radius: 6px; - background: var(--comfy-input-bg, #222); - color: var(--input-text, #ddd); - font: inherit; -} -.anomalous-prompt-composer textarea { width: 100%; resize: vertical; min-height: 72px; } -.anomalous-prompt-composer textarea[readonly] { min-height: 100px; } -.anomalous-prompt-parts { display: flex; flex-direction: column; gap: 10px; } -.anomalous-prompt-part { - padding: 12px; - border: 1px solid var(--border-color, #454545); - border-radius: 8px; -} -.anomalous-prompt-part > *:not(summary) { margin-top: 10px; } -.anomalous-prompt-part summary { cursor: pointer; overflow-wrap: anywhere; } -.anomalous-prompt-part summary input { margin-right: 8px; } -.anomalous-prompt-part summary small { margin-left: 10px; color: var(--descrip-text, #aaa); } -.anomalous-material-target-context { padding: 12px 16px; border-bottom: 1px solid var(--border-color, #454545); } -.anomalous-material-target-context > button { margin-left: 10px; } -.anomalous-material-target-context > small { display: block; margin-top: 6px; color: var(--descrip-text, #aaa); } -.anomalous-material-application-result { margin-top: 10px; } -.anomalous-material-choice { - max-width: min(560px, calc(100vw - 32px)); - max-height: 80vh; - overflow-y: auto; - border: 1px solid var(--border-color, #454545); - border-radius: 10px; - padding: 20px; - background: var(--comfy-menu-bg, #222); - color: var(--input-text, #ddd); -} -.anomalous-material-choice > button { display: block; margin: 10px 0; } -.anomalous-material-choice::backdrop { background: rgba(0, 0, 0, .55); } -.anomalous-material-inspect-action { position: absolute; bottom: 10px; right: 10px; z-index: 2; } -.anomalous-material-dragging { opacity: 0 !important; } -.anomalous-material-dragging, .anomalous-material-dragging * { pointer-events: none !important; } -.anomalous-material-drag-hint { - position: fixed; - left: 24px; - top: 24px; - max-width: 240px; - z-index: 1000002; - pointer-events: none; - padding: 10px 14px; - border: 1px solid #68cdb9; - border-radius: 8px; - background: #202428; - color: #eee; -} - -/* ========================================================================== - Node Assistant Hover Parameter Popover Card - ========================================================================== */ -.anomalous-param-popover { - position: fixed; - z-index: 1000002; - width: 330px; - max-height: 480px; - display: flex; - flex-direction: column; - background: rgba(22, 22, 27, 0.96); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 12px; - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); - color: #f3f4f6; - padding: 14px; - box-sizing: border-box; - pointer-events: auto; - animation: anomalous-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1); -} - -@keyframes anomalous-popover-in { - from { opacity: 0; transform: translateY(4px) scale(0.98); } - to { opacity: 1; transform: translateY(0) scale(1); } -} - -/* ========================================================================== - Prompt Composer & Paper Note Studio / Material Drag System - ========================================================================== */ - -/* 1. Modal Dragging State: Instantly ghost modal to reveal ComfyUI canvas */ -#anomalous-modal.anomalous-material-dragging { - pointer-events: none !important; -} - -#anomalous-modal.anomalous-material-dragging #anomalous-container { - opacity: 0 !important; - pointer-events: none !important; - transform: scale(0.985); - transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* 2. Drag Cursor & Hover Feedback */ -.anomalous-material-card[draggable="true"], -.anomalous-paper-note[draggable="true"] { - cursor: grab; -} - -.anomalous-material-card[draggable="true"]:active, -.anomalous-paper-note[draggable="true"]:active { - cursor: grabbing; -} - -/* Hide legacy bulky drag label to restore clean card visuals */ -.anomalous-material-drag-label { - display: none !important; -} - -/* 3. Drag Follower Floating Badge */ -.anomalous-material-drag-hint { - position: fixed; - z-index: 999999; - pointer-events: none; - display: inline-flex; - align-items: center; - gap: 8px; - padding: 6px 12px; - border-radius: var(--amb-radius-control, 6px); - background: var(--amb-bg-panel, #18191e); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.15)); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); - color: var(--amb-text-main, #f1f5f9); - font-size: 0.8rem; - font-weight: 500; - line-height: 1.2; - backdrop-filter: blur(8px); - transition: border-color 0.15s ease, background-color 0.15s ease; -} - -.anomalous-material-drag-hint.is-target-valid { - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.3)); - background: var(--amb-bg-card-hover, #282a34); - box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); - color: #ffffff; -} - -/* 4. Prompt Composer Layout (Warm Paper Studio) */ -.anomalous-prompt-composer { - display: flex; - flex-direction: column; - gap: 8px; - padding: 8px 12px 10px; - overflow-y: auto; - max-height: 100%; - color: #e2e8f0; -} - -.anomalous-prompt-topbar { - position: relative !important; - z-index: 1000 !important; - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: nowrap !important; - gap: 8px; - height: 44px; - padding: 0 12px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(20, 22, 27, 0.98); - box-sizing: border-box; - flex-shrink: 0; -} - -.anomalous-prompt-more-wrap { - position: relative !important; - display: inline-flex !important; -} - -.anomalous-prompt-more-menu { - display: none !important; - position: absolute !important; - top: calc(100% + 6px) !important; - right: 0 !important; - z-index: 1000005 !important; - min-width: 165px !important; - background: #181a20 !important; - border: 1px solid rgba(255, 255, 255, 0.18) !important; - border-radius: 8px !important; - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.5) !important; - padding: 6px !important; - backdrop-filter: blur(20px) !important; - flex-direction: column !important; - gap: 3px !important; -} - -.anomalous-prompt-more-menu.is-open { - display: flex !important; - animation: anmMoreMenuIn 0.12s cubic-bezier(0.16, 1, 0.3, 1); -} - -@keyframes anmMoreMenuIn { - from { opacity: 0; transform: translateY(-4px) scale(0.97); } - to { opacity: 1; transform: translateY(0) scale(1); } -} - -.anomalous-prompt-more-item { - width: 100% !important; - display: flex !important; - align-items: center !important; - gap: 8px !important; - padding: 7px 10px !important; - border-radius: 6px !important; - border: none !important; - background: transparent !important; - color: #cbd5e1 !important; - font-size: 0.78rem !important; - font-weight: 500 !important; - cursor: pointer !important; - text-align: left !important; - white-space: nowrap !important; - transition: background 0.12s ease, color 0.12s ease !important; -} - -.anomalous-prompt-more-item:hover { - background: rgba(255, 255, 255, 0.08) !important; - color: #ffffff !important; -} - -.anomalous-prompt-more-pos { - display: flex !important; - align-items: center !important; - justify-content: space-between !important; - gap: 8px !important; - padding: 8px 10px 4px !important; - margin-top: 4px !important; - border-top: 1px solid rgba(255, 255, 255, 0.08) !important; - font-size: 0.76rem !important; - color: #94a3b8 !important; -} - -.anomalous-prompt-more-pos select { - background: rgba(0, 0, 0, 0.4) !important; - border: 1px solid rgba(255, 255, 255, 0.14) !important; - border-radius: 5px !important; - color: #f1f5f9 !important; - padding: 3px 6px !important; - font-size: 0.74rem !important; - cursor: pointer !important; - outline: none !important; -} - -.anomalous-prompt-topbar-left { - display: flex; - align-items: center; - gap: 8px; - min-width: 0; - flex: 1 1 auto; -} - -.anomalous-prompt-topbar-left h3 { - margin: 0; - font-size: 0.92rem; - font-weight: 700; - color: #f8fafc; - letter-spacing: 0.02em; - white-space: nowrap; - flex-shrink: 0; -} - -.anomalous-prompt-topbar-actions { - display: flex; - align-items: center; - gap: 4px; - flex-shrink: 0; - flex-wrap: nowrap !important; -} - -.anomalous-prompt-close-btn { - font-size: 1.1rem; - line-height: 1; - padding: 3px 8px; - color: var(--amb-text-muted, #94a3b8); - transition: all 0.2s ease; -} - -.anomalous-prompt-close-btn:hover { - color: #ef4444; - background: rgba(239, 68, 68, 0.12); -} - -.anomalous-prompt-name-input { - background: var(--amb-bg-input, rgba(0, 0, 0, 0.35)); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.14)); - border-radius: var(--amb-radius-control, 6px); - padding: 2px 8px; - height: 26px; - color: var(--amb-text-main, #f1f5f9); - font-size: 0.78rem; - outline: none; - transition: border-color 0.15s ease, box-shadow 0.15s ease; - box-sizing: border-box; - flex: 0 1 130px; - min-width: 60px; - max-width: 140px; -} - -.anomalous-prompt-name-input:focus { - border-color: #38bdf8; - background: rgba(0, 0, 0, 0.55); -} - -.anomalous-prompt-name-input.is-invalid { - border-color: #ef4444; - box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); -} - -.anomalous-prompt-insert-pos { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 0.76rem; - color: var(--amb-text-muted, #94a3b8); -} - -.anomalous-prompt-insert-pos select { - background: var(--amb-bg-input, #181a22); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - border-radius: var(--amb-radius-control, 6px); - padding: 4px 8px; - color: var(--amb-text-main, #f1f5f9); - font-size: 0.78rem; - outline: none; - cursor: pointer; -} - -/* 5. Paper-like Note Cards Grid */ -.anomalous-paper-notes-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); - gap: 18px; -} - -.anomalous-paper-note { - position: relative; - display: flex; - flex-direction: column; - border-radius: 12px; - background: linear-gradient(175deg, #1c2028 0%, #15181f 100%); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.25); - overflow: hidden; - transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s ease; - user-select: none; -} - -.anomalous-paper-note:hover { - transform: translateY(-2px); - box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.55), 0 6px 14px -2px rgba(0, 0, 0, 0.35); - border-color: rgba(255, 255, 255, 0.18); -} - -/* Note Top Accent Border */ -.anomalous-paper-note-tape { - height: 3px; - width: 100%; - opacity: 0.9; -} - -.anomalous-paper-note.is-positive .anomalous-paper-note-tape { - background: #38bdf8; -} - -.anomalous-paper-note.is-negative .anomalous-paper-note-tape { - background: #fb7185; -} - -/* Note Header */ -.anomalous-paper-note-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 14px 6px; - gap: 8px; -} - -.anomalous-paper-note-title { - display: inline-flex; - align-items: center; - gap: 7px; - font-size: 0.86rem; - font-weight: 600; - letter-spacing: 0.01em; -} - -.anomalous-paper-note.is-positive .anomalous-paper-note-title { - color: #fca5a5; -} - -.anomalous-paper-note.is-negative .anomalous-paper-note-title { - color: #fda4af; -} - -.anomalous-paper-note-actions { - display: flex; - align-items: center; - gap: 6px; -} - -.anomalous-paper-note-count { - font-size: 0.72rem; - color: #64748b; - font-family: monospace; - padding: 2px 6px; - background: rgba(0, 0, 0, 0.25); - border-radius: 4px; -} - -.anomalous-paper-note-btn { - padding: 3px 8px; - border-radius: 5px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.05); - color: #cbd5e1; - font-size: 0.74rem; - cursor: pointer; - transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; -} - -.anomalous-paper-note-btn:hover { - background: rgba(255, 255, 255, 0.12); - color: #f8fafc; - border-color: rgba(255, 255, 255, 0.25); -} - -/* Note Textarea */ -.anomalous-paper-note-body { - padding: 6px 14px 10px; - flex: 1; - display: flex; - flex-direction: column; -} - -.anomalous-paper-note-textarea { - width: 100%; - min-height: 120px; - resize: vertical; - border: none; - outline: none; - background: rgba(0, 0, 0, 0.2); - color: #f1f5f9; - font-size: 0.85rem; - line-height: 1.5; - padding: 10px; - border-radius: 6px; - font-family: inherit; - box-sizing: border-box; - transition: background 0.15s ease; -} - -.anomalous-paper-note-textarea:focus { - background: rgba(0, 0, 0, 0.35); -} - -/* Note Footer Drag Hint */ -.anomalous-paper-note-footer { - display: flex; - align-items: center; - justify-content: space-between; - padding: 6px 14px 10px; - font-size: 0.73rem; - color: #64748b; - border-top: 1px dashed rgba(255, 255, 255, 0.06); -} - -.anomalous-paper-note-drag-prompt { - display: inline-flex; - align-items: center; - gap: 5px; - color: #94a3b8; -} - -/* 6. Active Target Status & Injection Bar (Unified Action Dock Element) */ -.anomalous-prompt-target-bar { - display: flex; - align-items: center; - gap: 6px; - margin-left: auto; - background: transparent; - border: none; - padding: 0; -} - -.anomalous-target-node-badge { - font-size: 0.72rem; - font-weight: 500; - color: #94a3b8; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - padding: 2px 6px; - border-radius: 4px; - white-space: nowrap; - max-width: 90px; - overflow: hidden; - text-overflow: ellipsis; -} - -.anomalous-prompt-target-actions { - display: flex; - align-items: center; - gap: 5px; - flex-wrap: nowrap; -} - -.anomalous-prompt-target-actions select { - background: var(--amb-bg-input, #181a22); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.14)); - border-radius: var(--amb-radius-control, 4px); - padding: 2px 6px; - color: var(--amb-text-main, #f1f5f9); - font-size: 0.72rem; - outline: none; - cursor: pointer; - height: 24px; -} - -/* 7. Slide-out Material Import Drawer */ -.anomalous-prompt-import-drawer { - position: fixed; - top: 0; - right: 0; - width: 440px; - max-width: 90vw; - height: 100vh; - background: rgba(20, 10, 16, 0.96); - border-left: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: -10px 0 40px rgba(0, 0, 0, 0.75); - z-index: 10005; - display: flex; - flex-direction: column; - backdrop-filter: blur(12px); - animation: drawerSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); -} - -@keyframes drawerSlideIn { - from { transform: translateX(100%); } - to { transform: translateX(0); } -} - -.anomalous-drawer-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 18px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-drawer-header h4 { - margin: 0; - font-size: 0.98rem; - font-weight: 600; - color: #f1f5f9; -} - -.anomalous-drawer-search { - padding: 10px 18px; - border-bottom: 1px solid rgba(255, 255, 255, 0.06); -} - -.anomalous-drawer-search input { - width: 100%; - box-sizing: border-box; - padding: 7px 12px; - border-radius: 6px; - background: rgba(22, 10, 18, 0.65); - border: 1px solid rgba(255, 255, 255, 0.12); - color: #f1f5f9; - font-size: 0.82rem; - outline: none; -} - -.anomalous-drawer-search input:focus { - border-color: #8b5cf6; -} - -.anomalous-drawer-list { - flex: 1; - overflow-y: auto; - padding: 14px 18px; - display: flex; - flex-direction: column; - gap: 12px; -} - -.anomalous-drawer-item { - padding: 12px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.035); - border: 1px solid rgba(255, 255, 255, 0.08); - display: flex; - flex-direction: column; - gap: 8px; - transition: background 0.15s ease, border-color 0.15s ease; -} - -.anomalous-drawer-item:hover { - background: rgba(255, 255, 255, 0.06); - border-color: rgba(139, 92, 246, 0.3); -} - -.anomalous-drawer-item-title { - font-size: 0.84rem; - font-weight: 600; - color: #f8fafc; -} - -.anomalous-drawer-item-preview { - font-size: 0.76rem; - color: #94a3b8; - line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - background: rgba(0, 0, 0, 0.2); - padding: 6px 8px; - border-radius: 4px; -} - -.anomalous-drawer-item-actions { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 6px; - flex-wrap: wrap; -} - -.anomalous-drawer-item-btn { - padding: 4px 9px; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.05); - color: #cbd5e1; - font-size: 0.72rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-drawer-item-btn:hover { - background: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.12)); - color: #ffffff; - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.25)); - font-weight: 500; -} - - -/* ========================================================================== - Prompt Mixer & Lego Assembler Deck (提示词乐高调音台) - ========================================================================== */ - -/* 1. Mixer Controls (Tabs & Action Bar) */ -.anomalous-mixer-controls { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - padding: 8px 12px; - background: rgba(22, 10, 18, 0.6); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 10px; - flex-wrap: wrap; - backdrop-filter: blur(8px); -} - -.anomalous-mixer-tabs { - display: flex; - align-items: center; - gap: 4px; - background: rgba(0, 0, 0, 0.25); - padding: 3px; - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.anomalous-mixer-tab-btn { - padding: 5px 11px; - border-radius: 6px; - border: none; - background: transparent; - color: #94a3b8; - font-size: 0.78rem; - font-weight: 500; - cursor: pointer; - transition: all 0.16s ease; - white-space: nowrap; -} - -.anomalous-mixer-tab-btn:hover { - color: #f1f5f9; - background: rgba(255, 255, 255, 0.06); -} - -.anomalous-mixer-tab-btn.is-active { - background: rgba(255, 255, 255, 0.12); - color: #f1f5f9; - font-weight: 600; - box-shadow: none; - border: 1px solid rgba(255, 255, 255, 0.18); -} - -.theme-abyssal-scarlet .anomalous-mixer-tab-btn.is-active { - background: linear-gradient(135deg, rgba(220, 20, 60, 0.2), rgba(139, 92, 246, 0.25)); - color: #dc143c; - border: 1px solid rgba(220, 20, 60, 0.35); -} - -.anomalous-mixer-actions { - display: flex; - align-items: center; - gap: 6px; - flex-shrink: 0; - white-space: nowrap; -} - -.anomalous-mixer-actions button { - white-space: nowrap !important; -} - -/* Smart Sort Button */ -.anomalous-mixer-smart-sort-btn { - padding: 4px 10px; - border-radius: var(--amb-radius-control, 6px); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - background: var(--amb-bg-card, #24262E); - color: var(--amb-text-main, #e2e8f0); - font-size: 0.76rem; - font-weight: 500; - cursor: pointer; - display: inline-flex; - align-items: center; - gap: 5px; - transition: all 0.15s ease; - box-shadow: none; -} - -.anomalous-mixer-smart-sort-btn:hover { - background: var(--amb-bg-card-hover, #2c2f38); - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.2)); - color: #ffffff; -} - -.anomalous-mixer-smart-sort-btn.is-animating { - opacity: 0.7; -} - -/* 2. Blocks Container & Empty Notice */ -.anomalous-mixer-blocks-container { - display: flex; - flex-direction: column; - gap: 8px; - flex: 1 1 0 !important; - min-height: 120px; - max-height: none !important; - overflow-y: auto; - overflow-x: hidden; - padding: 2px 4px 4px 2px; -} - -.is-side-studio .anomalous-mixer-blocks-container { - max-height: 42vh; -} - -.anomalous-mixer-empty-notice { - padding: 32px 16px; - text-align: center; - background: rgba(0, 0, 0, 0.15); - border: 1px dashed var(--amb-border, rgba(255, 255, 255, 0.1)); - border-radius: var(--amb-radius-control, 6px); - color: var(--amb-text-muted, #94a3b8); -} - -/* 3. Individual Lego Prompt Block (Compact Card for Easy Stacking) */ -.anomalous-mixer-block { - position: relative; - border-radius: var(--amb-radius-control, 6px); - background: var(--amb-bg-card, #24262E); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.09)); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); - transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; - flex-shrink: 0; -} - -.anomalous-mixer-block:hover { - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.18)); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); -} - -.anomalous-mixer-block.is-role-positive { - border-left: 3px solid #38bdf8; -} - -.theme-abyssal-scarlet .anomalous-mixer-block.is-role-positive { - border-left: 3px solid #dc143c; -} - -.anomalous-mixer-block.is-role-negative { - border-left: 3px solid #fb7185; -} - -/* Bypass state for A/B testing */ -.anomalous-mixer-block.is-bypassed { - opacity: 0.7; - background: rgba(18, 19, 24, 0.6); - border-color: rgba(255, 255, 255, 0.05); - border-left-color: #64748b !important; -} - -.anomalous-mixer-block.is-bypassed .anomalous-mixer-block-textarea { - color: #94a3b8; -} - -/* Dragging & Reorder Indicators */ -.anomalous-mixer-block.is-dragging { - opacity: 0.25; - transform: scale(0.98); -} - -.anomalous-mixer-block.is-drag-over-top::before { - content: ''; - position: absolute; - top: -3px; - left: 0; - right: 0; - height: 3px; - border-radius: 2px; - background: #38bdf8; - z-index: 10; -} - -.theme-abyssal-scarlet .anomalous-mixer-block.is-drag-over-top::before { - background: #dc143c; -} - -.anomalous-mixer-block.is-drag-over-bottom::after { - content: ''; - position: absolute; - bottom: -3px; - left: 0; - right: 0; - height: 3px; - border-radius: 2px; - background: #38bdf8; - z-index: 10; -} - -.theme-abyssal-scarlet .anomalous-mixer-block.is-drag-over-bottom::after { - background: #dc143c; -} - -/* Block Header */ -.anomalous-mixer-block-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 5px 8px 4px 6px; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); - gap: 6px; -} - -.anomalous-mixer-block-header-left { - display: flex; - align-items: center; - gap: 7px; - flex: 1; - min-width: 0; -} - -.anomalous-mixer-drag-handle { - cursor: grab; - user-select: none; - font-size: 0.95rem; - color: #64748b; - padding: 2px 4px; - transition: color 0.15s ease; -} - -.anomalous-mixer-drag-handle:hover { - color: #38bdf8; -} - -.theme-abyssal-scarlet .anomalous-mixer-drag-handle:hover { - color: #dc143c; -} - -.anomalous-mixer-drag-handle:active { - cursor: grabbing; -} - -.anomalous-mixer-block-toggle { - display: inline-flex; - align-items: center; - cursor: pointer; - margin: 0; -} - -.anomalous-mixer-block-toggle input[type="checkbox"] { - cursor: pointer; - accent-color: #8b5cf6; - width: 14px; - height: 14px; - margin: 0; -} - -/* Category Pill */ -.anomalous-mixer-cat-badge { - padding: 2px 7px; - border-radius: 4px; - font-size: 0.68rem; - font-weight: 600; - border: 1px solid transparent; - cursor: pointer; - user-select: none; - white-space: nowrap; - transition: filter 0.15s ease, transform 0.12s ease; -} - -.anomalous-mixer-cat-badge:hover { - filter: brightness(1.2); - transform: scale(1.03); -} - -.anomalous-mixer-block-title-input { - flex: 1; - min-width: 60px; - max-width: 220px; - background: transparent; - border: 1px solid transparent; - border-radius: 4px; - color: #f1f5f9; - font-size: 0.8rem; - font-weight: 500; - padding: 2px 6px; - outline: none; - transition: border-color 0.15s ease, background 0.15s ease; -} - -.anomalous-mixer-block-title-input:hover, -.anomalous-mixer-block-title-input:focus { - border-color: rgba(255, 255, 255, 0.15); - background: rgba(0, 0, 0, 0.25); -} - -/* Block Action Buttons */ -.anomalous-mixer-block-header-right { - display: flex; - align-items: center; - gap: 3px; -} - -.anomalous-mixer-block-btn { - padding: 2px 6px; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.04); - color: #94a3b8; - font-size: 0.7rem; - cursor: pointer; - line-height: 1.2; - transition: all 0.15s ease; -} - -.anomalous-mixer-block-btn:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.12); - color: #ffffff; - border-color: rgba(255, 255, 255, 0.2); -} - -.anomalous-mixer-block-btn:disabled { - opacity: 0.3; - cursor: not-allowed; -} - -.anomalous-mixer-block-btn.is-delete:hover { - background: rgba(239, 68, 68, 0.25); - color: #fca5a5; - border-color: rgba(239, 68, 68, 0.5); -} - -/* Block Body */ -.anomalous-mixer-block-body { - padding: 3px 8px 5px; -} - -.anomalous-mixer-block-textarea { - width: 100%; - min-height: 32px; - height: 34px; - resize: vertical; - border: none; - outline: none; - background: rgba(0, 0, 0, 0.22); - color: #f1f5f9; - font-size: 0.76rem; - line-height: 1.35; - padding: 4px 6px; - border-radius: 4px; - font-family: inherit; - box-sizing: border-box; - transition: all 0.18s ease; -} - -.anomalous-mixer-block-textarea:focus { - background: rgba(0, 0, 0, 0.38); - box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3); - min-height: 52px; - height: 52px; -} - -.theme-abyssal-scarlet .anomalous-mixer-block-textarea:focus { - box-shadow: inset 0 0 0 1px rgba(220, 20, 60, 0.3); -} - -/* 4. Assembled Output Deck & Whole-Deck Canvas Drag (Collapsible Glass Deck) */ -.anomalous-mixer-deck-output { - position: sticky; - bottom: 0; - z-index: 10; - border-radius: var(--amb-radius-control, 6px); - background: var(--amb-bg-card, #20222a); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35); - padding: 6px 10px; - display: flex; - flex-direction: column; - gap: 4px; - cursor: grab; - user-select: none; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - flex-shrink: 0 !important; -} - -.anomalous-mixer-deck-output.is-collapsed { - padding: 3px 8px; - background: rgba(22, 24, 30, 0.92); - border-radius: 6px; - cursor: pointer; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); -} - -.anomalous-mixer-deck-output:hover { - border-color: #38bdf8; - box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); -} - -.theme-abyssal-scarlet .anomalous-mixer-deck-output { - border-color: rgba(220, 20, 60, 0.28); -} - -.theme-abyssal-scarlet .anomalous-mixer-deck-output:hover { - border-color: #dc143c; - box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8); -} - -.anomalous-mixer-deck-output:active { - cursor: grabbing; -} - -.anomalous-mixer-output-summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-height: 26px; - cursor: pointer; -} - -.anomalous-mixer-summary-left { - display: flex; - align-items: center; - gap: 6px; - flex: 1; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.anomalous-mixer-summary-right { - display: flex; - align-items: center; - gap: 5px; - flex-shrink: 0; -} - -.anomalous-mixer-output-title { - font-size: 0.78rem; - color: #e2e8f0; - white-space: nowrap; -} - -.anomalous-mixer-output-stats { - font-size: 0.7rem; - color: #94a3b8; - font-family: monospace; - white-space: nowrap; -} - -.anomalous-mixer-output-drawer { - display: flex; - flex-direction: column; - gap: 6px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - padding-top: 6px; - margin-top: 2px; -} - -.anomalous-mixer-output-body { - flex: 1; -} - -.anomalous-mixer-output-textarea { - width: 100%; - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 6px; - color: #93c5fd; - font-size: 0.78rem; - font-family: inherit; - line-height: 1.4; - padding: 4px 8px; - outline: none; - box-sizing: border-box; - min-height: 34px; - max-height: 52px; -} - -.anomalous-mixer-output-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - font-size: 0.72rem; -} - -.anomalous-mixer-drag-hint { - color: #64748b; - display: flex; - align-items: center; - gap: 4px; -} - -.anomalous-mixer-drag-hint strong { - color: #38bdf8; -} - -.theme-abyssal-scarlet .anomalous-mixer-drag-hint strong { - color: #dc143c; -} - -.anomalous-mixer-final-btn.is-active { - background: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.15)) !important; - border-color: #38bdf8 !important; - color: #38bdf8 !important; -} - -.anomalous-btn-toggle-output { - font-size: 0.72rem !important; - padding: 2px 7px !important; - color: #38bdf8 !important; - border-color: rgba(56, 189, 248, 0.25) !important; -} - -.anomalous-btn-quick-copy { - font-size: 0.72rem !important; - padding: 2px 7px !important; -} - -/* 5. Floating Toast Feedback */ -.anomalous-mixer-toast { - position: fixed; - top: 20px; - right: 24px; - padding: 8px 14px; - border-radius: var(--amb-radius-control, 6px); - background: var(--amb-bg-panel, #18191e); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.15)); - color: #f1f5f9; - font-size: 0.82rem; - font-weight: 500; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); - z-index: 1000000; - backdrop-filter: blur(12px); - opacity: 0; - transform: translateY(-8px); - transition: opacity 0.2s ease, transform 0.2s ease; - pointer-events: none; -} - -.anomalous-mixer-toast.is-show { - opacity: 1; - transform: translateY(0); -} - -/* ========================================================================== - Prompt Studio Dual-Column Workbench (提示词工坊左右双分栏工作台) - ========================================================================== */ - -.anomalous-prompt-workbench { - position: relative; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - background: var(--amb-bg-page, #141519); - container-type: inline-size; - container-name: prompt-workbench; - overflow: hidden; -} - -/* Clean Studio Dark Neutral Background - No Gaudy Cyberdeck Overlay */ -.anomalous-prompt-workbench::before { - display: none !important; -} - -.anomalous-prompt-workbench > * { - position: relative; - z-index: 1; -} - -.anomalous-prompt-workbench-grid { - display: grid; - grid-template-columns: minmax(280px, 320px) minmax(460px, 1fr); - gap: 10px; - flex: 1; - min-height: 0; - padding: 6px 10px 8px; - overflow: hidden; - box-sizing: border-box; -} - -/* Responsive Unified Dual-Zone Stream (for small container and narrow viewports) */ -@keyframes anomalous-just-added { - 0% { - transform: scale(0.96); - box-shadow: 0 0 0 2px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.4); - } - 50% { - transform: scale(1.02); - box-shadow: 0 0 0 2px #4ade80, 0 0 20px rgba(74, 222, 128, 0.5); - } - 100% { - transform: scale(1); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); - } -} - -.anomalous-mixer-block.is-just-added { - animation: anomalous-just-added 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; -} - -/* Resilient Responsive Layout for Prompt Workbench & Sidebar Drawer */ -@container prompt-workbench (max-width: 850px) { - .anomalous-prompt-workbench-grid { - grid-template-columns: 145px minmax(0, 1fr) !important; - gap: 6px !important; - padding: 4px 6px 6px !important; - } - .anomalous-workbench-left-panel { - width: 145px !important; - padding: 6px 6px 6px !important; - } - .anomalous-workbench-right-panel { - padding: 6px 6px 6px !important; - } -} - -@media (max-width: 860px) { - .anomalous-prompt-workbench-grid { - grid-template-columns: 145px minmax(0, 1fr) !important; - gap: 6px !important; - padding: 4px 6px 6px !important; - } -} - - -/* Left & Right Panels Common */ -.anomalous-workbench-left-panel, -.anomalous-workbench-right-panel { - display: flex; - flex-direction: column; - min-height: 0; - height: 100%; - border-radius: var(--amb-radius-panel, 12px); - background: var(--amb-bg-panel, #1C1E24); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); - padding: 10px 10px 8px; - box-sizing: border-box; - gap: 8px; -} - -.anomalous-workbench-right-panel { - overflow: hidden; - position: relative; -} - -.anomalous-workbench-col-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - padding-bottom: 6px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - flex-shrink: 0; -} - -.anomalous-workbench-col-title { - font-size: 0.94rem; - color: #f1f5f9; - display: flex; - align-items: center; - gap: 6px; - white-space: nowrap; - flex-shrink: 0; -} - -.anomalous-sub-counter { - font-size: 0.76rem; - color: #64748b; - font-weight: normal; -} - -/* -------------------------------------------------------------------------- - Left Column: Source Cards & New Card Form - -------------------------------------------------------------------------- */ -.anomalous-workbench-filter-bar { - display: flex; - align-items: center; - gap: 6px; - flex-shrink: 0; -} - -.anomalous-workbench-search-input { - width: 100%; - box-sizing: border-box; - padding: 6px 10px; - border-radius: 6px; - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #f1f5f9; - font-size: 0.78rem; - outline: none; - transition: border-color 0.15s ease; -} - -.anomalous-workbench-search-input:focus { - border-color: #38bdf8; - background: rgba(0, 0, 0, 0.45); -} - -.theme-abyssal-scarlet .anomalous-workbench-search-input:focus { - border-color: #dc143c; -} - -.anomalous-workbench-category-pills { - display: flex; - align-items: center; - gap: 4px; - flex-wrap: wrap; - flex-shrink: 0; -} - -.anomalous-workbench-pill { - padding: 3px 8px; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.04); - color: #94a3b8; - font-size: 0.72rem; - cursor: pointer; - transition: all 0.15s ease; - user-select: none; -} - -.anomalous-workbench-pill:hover { - color: #f1f5f9; - background: rgba(255, 255, 255, 0.09); -} - -.anomalous-workbench-pill.is-active { - border-color: var(--amb-border-hover); - color: var(--amb-text-main); - text-shadow: none; - font-weight: 600; - box-shadow: none; - background: var(--amb-bg-card-hover); -} - -/* Inline New Card Creation Form */ -.anomalous-workbench-new-card-form { - display: flex; - flex-direction: column; - gap: 8px; - padding: 10px 12px; - border-radius: var(--amb-radius-control, 6px); - background: var(--amb-bg-card, #20222a); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); - animation: fadeInSlideDown 0.18s ease; - flex-shrink: 0; -} - -@keyframes fadeInSlideDown { - from { opacity: 0; transform: translateY(-6px); } - to { opacity: 1; transform: translateY(0); } -} - -.anomalous-form-title { - font-size: 0.82rem; - font-weight: 600; - color: var(--amb-text-main, #f1f5f9); -} - -.anomalous-form-input, -.anomalous-form-select, -.anomalous-form-textarea { - width: 100%; - box-sizing: border-box; - padding: 6px 8px; - border-radius: 6px; - background: rgba(0, 0, 0, 0.35); - border: 1px solid rgba(255, 255, 255, 0.12); - color: #f1f5f9; - font-size: 0.78rem; - outline: none; - font-family: inherit; -} - -.anomalous-form-cat-row { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.78rem; - color: #94a3b8; -} - -.anomalous-form-btn-row { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 6px; - margin-top: 2px; -} - -/* Source Cards List */ -.anomalous-source-cards-list { - flex: 1; - min-height: 0; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 8px; - padding-right: 2px; -} - -.anomalous-empty-state-container, -.anomalous-source-empty, -.anomalous-recipe-empty { - position: relative; - padding: 36px 16px; - text-align: center; - color: var(--amb-text-muted, #94a3b8); - font-size: 0.82rem; - background: rgba(0, 0, 0, 0.18); - border-radius: var(--amb-radius-control, 6px); - border: 1px dashed var(--amb-border, rgba(255, 255, 255, 0.1)); - overflow: hidden; - isolation: isolate; -} - -.theme-abyssal-scarlet .anomalous-empty-state-container, -.theme-abyssal-scarlet .anomalous-source-empty, -.theme-abyssal-scarlet .anomalous-recipe-empty { - border-color: rgba(220, 20, 60, 0.25); - background: rgba(20, 8, 14, 0.4); -} - -.anomalous-empty-state-container > *, -.anomalous-source-empty > *, -.anomalous-recipe-empty > * { - position: relative; - z-index: 1; -} - -/* Tip Banner for Prompt Studio Usage Guidance */ -.anomalous-workbench-tip-banner { - display: flex; - align-items: center; - gap: 6px; - padding: 6px 10px; - margin: 2px 0 8px; - background: rgba(56, 189, 248, 0.07); - border: 1px solid rgba(56, 189, 248, 0.2); - border-radius: var(--amb-radius-control, 6px); - font-size: 0.72rem; - color: #93c5fd; - line-height: 1.35; - user-select: none; -} - -.anomalous-workbench-tip-banner .anomalous-tip-icon { - width: 14px; - height: 14px; - flex-shrink: 0; - color: #38bdf8; -} - -/* Individual Source Prompt Card (Tactile Skewed Glassmorphic Card Aesthetics) */ -.anomalous-source-prompt-card { - border-radius: 8px; - background: linear-gradient(180deg, #262935 0%, #1e2029 100%); - border: 1px solid rgba(255, 255, 255, 0.11); - border-left: 4px solid #64748b; - padding: 8px 10px; - display: flex; - flex-direction: column; - gap: 6px; - cursor: grab; - user-select: none; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); - transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; -} - -.anomalous-source-prompt-card.is-cat-base { - border-left-color: #38bdf8; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.theme-abyssal-scarlet .anomalous-source-prompt-card.is-cat-base { - border-left-color: #dc143c; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(220, 20, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.anomalous-source-prompt-card.is-cat-style { - border-left-color: #c084fc; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(192, 132, 252, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.anomalous-source-prompt-card.is-cat-subject { - border-left-color: #4ade80; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(74, 222, 128, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.anomalous-source-prompt-card.is-cat-trigger { - border-left-color: #fb923c; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.anomalous-source-prompt-card:hover { - background: linear-gradient(180deg, #2e3242 0%, #232633 100%); - border-color: rgba(255, 255, 255, 0.22); - transform: translateY(-2px); - box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -.anomalous-source-prompt-card:active { - cursor: grabbing; - transform: translateY(0); -} - -.anomalous-source-prompt-card.is-clicked { - transform: scale(0.97); - border-color: #38bdf8 !important; - box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important; -} - -.anomalous-source-prompt-card.is-dragging-source { - opacity: 0.4; - border-style: dashed; -} - -.anomalous-source-card-header { - display: flex; - align-items: center; - gap: 6px; -} - -.anomalous-source-card-grip { - color: #64748b; - font-size: 11px; - line-height: 1; - margin-right: 1px; - letter-spacing: -1px; - cursor: grab; - opacity: 0.5; - transition: opacity 0.15s ease, color 0.15s ease; -} - -.anomalous-source-prompt-card:hover .anomalous-source-card-grip { - opacity: 0.95; - color: #94a3b8; -} - -.anomalous-source-card-badge { - padding: 2px 7px; - border-radius: 9999px; - font-size: 0.66rem; - font-weight: 600; - border: 1px solid transparent; - white-space: nowrap; -} - -.anomalous-source-card-title { - font-size: 0.82rem; - font-weight: 600; - color: #f1f5f9; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1; -} - -.anomalous-source-card-snippet { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - font-size: 0.72rem; - color: #cbd5e1; - line-height: 1.45; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - background: rgba(0, 0, 0, 0.32); - border: 1px solid rgba(255, 255, 255, 0.06); - padding: 5px 8px; - border-radius: 5px; -} - -.anomalous-source-card-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - font-size: 0.7rem; - margin-top: 2px; -} - -.anomalous-source-card-drag-hint { - color: #64748b; - font-size: 0.66rem; - display: inline-flex; - align-items: center; - gap: 3px; -} - -.anomalous-source-card-actions { - display: flex; - align-items: center; - gap: 4px; -} - -.anomalous-source-action-btn { - padding: 2px 6px; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.1); - background: rgba(255, 255, 255, 0.04); - color: #cbd5e1; - font-size: 0.68rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-source-action-btn:hover { - background: rgba(255, 255, 255, 0.12); - color: #ffffff; -} - -.anomalous-source-action-btn.is-dock { - background: rgba(56, 189, 248, 0.12); - border-color: rgba(56, 189, 248, 0.35); - color: #38bdf8; - font-weight: 600; - border-radius: 5px; - padding: 3px 8px; - display: inline-flex; - align-items: center; - gap: 3px; - font-size: 0.7rem; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -} - -.anomalous-source-action-btn.is-dock:hover { - background: #38bdf8; - color: #0b1329; - border-color: #38bdf8; - box-shadow: 0 0 12px rgba(56, 189, 248, 0.45); -} - -.anomalous-source-action-btn.is-dock.is-success { - background: #22c55e !important; - border-color: #22c55e !important; - color: #ffffff !important; - box-shadow: 0 0 12px rgba(34, 197, 94, 0.5) !important; -} - -.anomalous-source-action-btn.is-save-lib { - background: rgba(255, 255, 255, 0.04); - border-color: rgba(255, 255, 255, 0.1); - color: var(--amb-text-muted, #94a3b8); - font-weight: 500; -} - -.anomalous-source-action-btn.is-save-lib:hover { - background: rgba(255, 255, 255, 0.1); - color: #ffffff; -} - -.theme-abyssal-scarlet .anomalous-source-action-btn.is-save-lib { - background: rgba(220, 20, 60, 0.15); - border-color: rgba(220, 20, 60, 0.4); - color: #dc143c; -} - -.theme-abyssal-scarlet .anomalous-source-action-btn.is-save-lib:hover { - background: #dc143c; - color: #1a050d; -} - -.anomalous-form-meta-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - flex-wrap: wrap; -} - -.anomalous-form-role-group { - display: flex; - align-items: center; - gap: 12px; -} - -.anomalous-role-label { - display: inline-flex; - align-items: center; - gap: 4px; - font-size: 0.76rem; - color: #cbd5e1; - cursor: pointer; - user-select: none; -} - -.anomalous-role-label input[type="radio"] { - cursor: pointer; - accent-color: #38bdf8; - margin: 0; -} - -.theme-abyssal-scarlet .anomalous-role-label input[type="radio"] { - accent-color: #dc143c; -} - -.anomalous-unsaved-badge { - font-size: 0.65rem; - color: #fb923c; - background: rgba(251, 146, 60, 0.15); - border: 1px solid rgba(251, 146, 60, 0.35); - padding: 1px 4px; - border-radius: 4px; - font-weight: 500; -} - -/* -------------------------------------------------------------------------- - Right Column: Drop Zone & Arranger Stage - -------------------------------------------------------------------------- */ -.anomalous-assembly-track { - flex: 1 1 0 !important; - min-height: 200px; - height: 100%; - max-height: none !important; - overflow-y: auto; - overflow-x: hidden; - padding-right: 2px; - display: flex; - flex-direction: column; - gap: 8px; - border: 2px dashed transparent; - border-radius: 10px; - transition: border-color 0.25s ease, box-shadow 0.25s ease; -} - -.anomalous-prompt-workbench:has(.is-dragging-source) .anomalous-assembly-track, -.is-source-dragging .anomalous-assembly-track { - border: 2px dashed var(--amb-border-hover, rgba(255, 255, 255, 0.25)) !important; - background: rgba(255, 255, 255, 0.02) !important; -} - -.anomalous-assembly-dropzone { - flex: 1; - min-height: 240px; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - padding: 24px 16px; - border-radius: var(--amb-radius-control, 6px); - border: 1.5px dashed var(--amb-border, rgba(255, 255, 255, 0.12)); - background: rgba(0, 0, 0, 0.15); - transition: border-color 0.15s ease, background-color 0.15s ease; -} - -.anomalous-assembly-dropzone.is-drag-over { - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.35)); - background: rgba(255, 255, 255, 0.04); -} - -.theme-abyssal-scarlet .anomalous-assembly-dropzone.is-drag-over { - border-color: #dc143c; - background: rgba(45, 10, 20, 0.6); -} - -/* Interactive Auto-snap Dock at the bottom of Assembler blocks */ -.anomalous-assembly-snap-dock { - display: flex; - align-items: center; - justify-content: center; - min-height: 44px; - padding: 8px 14px; - border: 1.5px dashed rgba(255, 255, 255, 0.14); - border-radius: 8px; - background: rgba(0, 0, 0, 0.15); - cursor: pointer; - user-select: none; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - margin-top: 6px; - color: #94a3b8; - font-size: 0.74rem; -} - -.anomalous-assembly-snap-dock:hover { - border-color: rgba(255, 255, 255, 0.28); - background: rgba(255, 255, 255, 0.04); - color: #e2e8f0; -} - -.anomalous-assembly-snap-dock.is-drag-over, -.anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock { - border-color: #38bdf8 !important; - background: rgba(56, 189, 248, 0.12) !important; - box-shadow: 0 0 18px rgba(56, 189, 248, 0.25), inset 0 0 10px rgba(56, 189, 248, 0.05) !important; - color: #38bdf8 !important; - transform: scale(1.01); -} - -.theme-abyssal-scarlet .anomalous-assembly-snap-dock.is-drag-over, -.theme-abyssal-scarlet .anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock { - border-color: #dc143c !important; - background: rgba(220, 20, 60, 0.15) !important; - box-shadow: 0 0 18px rgba(220, 20, 60, 0.3) !important; - color: #ff6b81 !important; -} - -.anomalous-snap-dock-content { - display: flex; - align-items: center; - gap: 6px; - font-weight: 500; - pointer-events: none; -} - -.anomalous-snap-icon { - width: 14px; - height: 14px; - transition: transform 0.2s ease; -} - -.anomalous-assembly-snap-dock.is-drag-over .anomalous-snap-icon, -.anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock .anomalous-snap-icon { - transform: rotate(90deg) scale(1.15); -} - -.anomalous-workbench-sub-actions { - display: flex; - align-items: center; - gap: 6px; - width: 100%; - flex-shrink: 0; -} - -.anomalous-workbench-sub-actions button { - flex: 1; - white-space: nowrap; - justify-content: center; - text-align: center; -} - -.anomalous-workbench-header-actions { - display: flex; - align-items: center; - gap: 6px; - flex-wrap: wrap; -} - -.anomalous-btn-sm { - padding: 4px 9px !important; - font-size: 0.74rem !important; - border-radius: var(--amb-radius-control, 6px) !important; - line-height: 1.3 !important; -} - -.anomalous-btn-extract-node { - position: relative; - background-color: rgba(255, 255, 255, 0.04) !important; - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)) !important; - border-radius: var(--amb-radius-control, 6px) !important; - color: var(--amb-text-main, #f1f5f9) !important; - font-weight: 500 !important; - height: 28px !important; - padding: 0 10px !important; - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 5px; - transition: background-color 0.15s ease, border-color 0.15s ease !important; - overflow: hidden; - user-select: none; -} - -.anomalous-btn-extract-node:hover { - background-color: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.1)) !important; - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.25)) !important; - color: #ffffff !important; -} - -/* ========================================================================== - Task 5 & 6: Abyssal Scarlet (深海血族) Custom Theme & Domain Expansion - Fusion of Eldritch Deep-Sea and Touhou Scarlet Devil Anime Gothic Aesthetics - ========================================================================== */ - -/* Toast Notice for Domain Activation / Deactivation */ -.anomalous-theme-toast { - position: fixed; - top: 28px; - left: 50%; - transform: translateX(-50%) translateY(-24px) scale(0.94); - opacity: 0; - pointer-events: none; - z-index: 1000000; - padding: 10px 24px; - border-radius: 24px; - background: rgba(18, 22, 34, 0.94); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.18); - color: #ffffff; - font-size: 13px; - font-weight: 600; - letter-spacing: 0.5px; - box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6); - transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); -} - -.anomalous-theme-toast.is-show { - opacity: 1; - transform: translateX(-50%) translateY(0) scale(1); -} - -.anomalous-theme-toast.is-abyssal { - background: linear-gradient(135deg, rgba(32, 8, 22, 0.96) 0%, rgba(14, 5, 20, 0.96) 100%); - border-color: rgba(220, 20, 60, 0.65); - color: #ffe4e6; - box-shadow: 0 12px 40px rgba(220, 20, 60, 0.4), inset 0 0 12px rgba(220, 20, 60, 0.25); - text-shadow: 0 0 8px rgba(220, 20, 60, 0.85); -} - -/* 1. Global Scoped Theme Variables */ -html.theme-abyssal-scarlet, -.theme-abyssal-scarlet { - --bg-color: #0a0510; - --comfy-menu-bg: #12091c; - --border-color: rgba(220, 20, 60, 0.25); - --p-primary-color: #dc143c; - --fg-color: #e0d0df; -} - -/* 2. Main Containers & Atmospheric Ocean Current Backdrop */ -.theme-abyssal-scarlet #anomalous-container, -.theme-abyssal-scarlet#anomalous-container { - background: #0a0510 !important; - color: #e0d0df !important; - border-color: rgba(220, 20, 60, 0.35) !important; - box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95) !important; - position: relative; -} - -.theme-abyssal-scarlet #anomalous-container::before { - content: ''; - position: absolute; - inset: 0; - background-image: url('assets/abyssal_currents_bg.webp') !important; - background-size: cover !important; - background-position: center !important; - mix-blend-mode: overlay !important; - opacity: 0.15 !important; - pointer-events: none !important; - z-index: 0 !important; -} - -.theme-abyssal-scarlet .anomalous-prompt-workbench::before { - display: none !important; -} - -.theme-abyssal-scarlet #anomalous-sidebar-wrapper { - background: #100818 !important; - border-right: 1px solid rgba(220, 20, 60, 0.22) !important; -} - -.theme-abyssal-scarlet #anomalous-content { - background-color: #0c0510 !important; - background-image: - radial-gradient(ellipse 75% 55% at 50% -5%, rgba(220, 20, 60, 0.14) 0%, rgba(38, 12, 30, 0.06) 55%, transparent 100%), - radial-gradient(ellipse 55% 45% at 85% 95%, rgba(139, 92, 246, 0.08) 0%, transparent 100%) !important; -} - -.theme-abyssal-scarlet #anomalous-content::before { - display: block !important; - content: '' !important; - position: absolute !important; - inset: 0 !important; - background-image: url('assets/abyssal_scarlet_mansion.webp'), radial-gradient(circle at 50% 20%, rgba(220, 20, 60, 0.08) 0%, transparent 70%) !important; - background-size: cover !important; - background-position: center !important; - mix-blend-mode: soft-light !important; - opacity: 0.18 !important; - pointer-events: none !important; - z-index: 0 !important; -} - -.theme-abyssal-scarlet #anomalous-sidebar-wrapper::after { - display: block !important; - content: '' !important; - position: absolute !important; - top: 0 !important; - right: 0 !important; - width: 1px !important; - height: 100% !important; - background: linear-gradient(180deg, - rgba(220, 20, 60, 0) 0%, - rgba(220, 20, 60, 0.45) 20%, - rgba(255, 51, 102, 0.7) 50%, - rgba(147, 51, 234, 0.45) 80%, - rgba(220, 20, 60, 0) 100% - ) !important; - pointer-events: none !important; - z-index: 5 !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-grid { - background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(220, 20, 60, 0.09) 0%, rgba(28, 9, 22, 0.04) 60%, transparent 100%); -} - -.theme-abyssal-scarlet .anomalous-brand-badge { - background: rgba(45, 10, 18, 0.95) !important; - border: 1px solid #dc143c !important; - color: #e0d8db !important; - box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8) !important; -} - -/* 3. Empty State Thematic Illustration (Submerged Scarlet Mansion) */ -.theme-abyssal-scarlet .anomalous-empty-state-container, -.theme-abyssal-scarlet .anomalous-source-empty, -.theme-abyssal-scarlet .anomalous-recipe-empty { - background-image: url('assets/abyssal_scarlet_mansion.webp') !important; - background-size: contain !important; - background-repeat: no-repeat !important; - background-position: center !important; - -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 95%) !important; - mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 95%) !important; - opacity: 0.75 !important; -} - -/* 4. Gothic Buttons with Asymmetric Chamfers & Velvet Inner Shadow */ -.theme-abyssal-scarlet .anomalous-btn-primary, -.theme-abyssal-scarlet .anomalous-recipe-btn-primary-action { - background-color: rgba(45, 10, 18, 0.95) !important; - background-image: none !important; - border: 1px solid rgba(220, 20, 60, 0.6) !important; - border-radius: 4px 12px 4px 12px !important; - color: #e0d8db !important; - box-shadow: none !important; - transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; -} - -.theme-abyssal-scarlet .anomalous-btn-primary:hover, -.theme-abyssal-scarlet .anomalous-recipe-btn-primary-action:hover { - background-color: rgba(65, 12, 24, 0.98) !important; - border-color: #dc143c !important; - color: #f1eaed !important; - box-shadow: none !important; - transform: translateY(-1px); -} - -.theme-abyssal-scarlet .anomalous-btn-extract-node { - background-color: rgba(45, 10, 18, 0.95) !important; - background-image: none !important; - border: 1px solid rgba(220, 20, 60, 0.6) !important; - border-radius: 4px 12px 4px 12px !important; - color: #e0d8db !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-btn-extract-node:hover { - background-color: rgba(65, 12, 24, 0.98) !important; - border-color: #dc143c !important; - color: #f1eaed !important; - box-shadow: none !important; - transform: translateY(-1px); -} - -.theme-abyssal-scarlet .anomalous-btn-ghost { - background: rgba(30, 10, 20, 0.6) !important; - border: 1px solid rgba(220, 20, 60, 0.35) !important; - color: #e0d8db !important; - border-radius: 2px 8px 2px 8px !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-btn-ghost:hover { - background: rgba(55, 12, 24, 0.85) !important; - border-color: #dc143c !important; - box-shadow: none !important; - color: #f1eaed !important; -} - -.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-primary { - background: rgba(50, 12, 22, 0.92) !important; - border: 1px solid rgba(220, 20, 60, 0.55) !important; - border-radius: 2px 10px 2px 10px !important; - color: #e0d8db !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-primary:hover { - background: rgba(70, 15, 28, 0.95) !important; - border-color: #dc143c !important; - color: #f1eaed !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-save { - background: rgba(30, 10, 20, 0.6) !important; - border: 1px solid rgba(220, 20, 60, 0.35) !important; - border-radius: 2px 8px 2px 8px !important; - color: #e0d8db !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-save:hover { - background: rgba(55, 12, 24, 0.85) !important; - border-color: #dc143c !important; - box-shadow: none !important; - color: #f1eaed !important; -} - -.theme-abyssal-scarlet .anomalous-mixer-smart-sort-btn { - background-color: rgba(45, 10, 22, 0.95) !important; - border: 1px solid rgba(220, 20, 60, 0.5) !important; - border-radius: 3px 8px 3px 8px !important; - color: #e0d8db !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-mixer-smart-sort-btn:hover { - background-color: rgba(65, 14, 28, 0.98) !important; - border-color: #dc143c !important; - box-shadow: none !important; - color: #f1eaed !important; - transform: translateY(-1px); -} - -.theme-abyssal-scarlet .anomalous-workbench-generation-btn { - border-radius: 3px 10px 3px 10px !important; - background-color: rgba(45, 10, 20, 0.95) !important; - border: 1px solid rgba(220, 20, 60, 0.5) !important; - color: #e0d8db !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-workbench-generation-btn:hover:not(:disabled) { - background-color: rgba(65, 14, 28, 0.98) !important; - border-color: #dc143c !important; - color: #f1eaed !important; - box-shadow: none !important; -} - -/* 5. Cards & Gothic Sovereign Palette (Strictly scoped, Inner Shadows & Sharp Borders) */ -.theme-abyssal-scarlet .anomalous-card { - border-color: rgba(220, 20, 60, 0.22) !important; - background: linear-gradient(180deg, rgba(25, 12, 20, 0.9) 0%, rgba(14, 6, 14, 0.98) 100%) !important; -} - -.theme-abyssal-scarlet .anomalous-card:hover, -.theme-abyssal-scarlet .anomalous-recipe-card:hover, -.theme-abyssal-scarlet .anomalous-material-card:hover, -.theme-abyssal-scarlet .anomalous-source-item:hover, -.theme-abyssal-scarlet .anomalous-nb-note-item:hover { - border-color: #dc143c !important; - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), inset 0 0 12px rgba(0, 0, 0, 0.7) !important; -} - -.theme-abyssal-scarlet .anomalous-card-labels { - background: linear-gradient(to top, rgba(18, 5, 14, 0.97) 0%, rgba(18, 5, 14, 0.75) 65%, transparent 100%) !important; -} - -.theme-abyssal-scarlet .anomalous-card:hover .anomalous-card-labels { - background: linear-gradient(to top, rgba(20, 6, 16, 0.99) 0%, rgba(22, 7, 18, 0.94) 75%, transparent 100%) !important; -} - -/* Card Base Model Badges - Gothic Sovereign Palette (Inner Shadow, No Outer Glows) */ -.theme-abyssal-scarlet .anomalous-card-badge { - background: rgba(18, 8, 14, 0.92) !important; - color: #d4af37 !important; - border: 1px solid rgba(179, 135, 40, 0.4) !important; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; -} - -.theme-abyssal-scarlet .anomalous-card:hover .anomalous-card-badge { - border-color: #d4af37 !important; - box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9) !important; -} - -.theme-abyssal-scarlet .anomalous-card-badge.badge-gold { - color: #d4af37 !important; - background: rgba(26, 16, 10, 0.94) !important; - border-color: #b38728 !important; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; -} - -.theme-abyssal-scarlet .anomalous-card-badge.badge-amber { - color: #d97706 !important; - background: rgba(24, 12, 8, 0.94) !important; - border-color: #b45309 !important; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; -} - -.theme-abyssal-scarlet .anomalous-card-badge.badge-flux { - color: #a855f7 !important; - background: rgba(20, 8, 30, 0.94) !important; - border-color: #7c3aed !important; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; -} - -.theme-abyssal-scarlet .anomalous-card-badge.badge-rose, -.theme-abyssal-scarlet .anomalous-model-tag { - color: #e0a0ac !important; - background: rgba(36, 10, 18, 0.92) !important; - border: 1px solid #dc143c !important; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; -} - -.theme-abyssal-scarlet .anomalous-card-action-btn { - background: rgba(22, 8, 16, 0.92) !important; - color: #e0d8db !important; - border: 1px solid rgba(220, 20, 60, 0.35) !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-card-action-btn:hover { - background: rgba(60, 12, 24, 0.9) !important; - border-color: #dc143c !important; - color: #f1eaed !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-recipe-card { - border-color: rgba(220, 20, 60, 0.22) !important; - background: rgba(18, 10, 26, 0.88) !important; -} - -/* 6. Active Pills in Deep Velvet Wine (Inner Shadow & Sharp Border) */ -.theme-abyssal-scarlet .anomalous-recipe-pill.is-active, -.theme-abyssal-scarlet .anomalous-workbench-pill.is-active { - background-color: rgba(60, 10, 20, 0.85) !important; - border-color: #dc143c !important; - color: #e0d8db !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet .anomalous-recipe-readiness-pill { - border-color: rgba(220, 20, 60, 0.35) !important; - color: #e0d8db !important; -} - -/* 7. Error State Abyssal Corruption Animations */ -@keyframes abyssal-corruption { - 0% { - box-shadow: 0 0 6px rgba(220, 20, 60, 0.4), inset 0 0 6px rgba(120, 0, 160, 0.3); - border-color: rgba(220, 20, 60, 0.5); - } - 50% { - box-shadow: 0 0 24px rgba(220, 20, 60, 0.88), inset 0 0 18px rgba(120, 0, 160, 0.65); - border-color: #ff3366; - } - 100% { - box-shadow: 0 0 6px rgba(220, 20, 60, 0.4), inset 0 0 6px rgba(120, 0, 160, 0.3); - border-color: rgba(220, 20, 60, 0.5); - } -} - -.theme-abyssal-scarlet .anomalous-trigger-error, -.theme-abyssal-scarlet .anomalous-error-panel, -.theme-abyssal-scarlet .anomalous-error-banner, -.theme-abyssal-scarlet .anomalous-toast-error, -.theme-abyssal-scarlet .anomalous-dialog-error { - animation: abyssal-corruption 2.8s infinite ease-in-out !important; - border: 1px solid rgba(220, 20, 60, 0.65) !important; -} - -/* 8. Studio Dialog & Overlay Adaptations */ -.theme-abyssal-scarlet dialog.anomalous-gallery-viewer, -html.theme-abyssal-scarlet dialog.anomalous-gallery-viewer { - background: #0a0510 !important; - border-color: rgba(220, 20, 60, 0.38) !important; - box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(220, 20, 60, 0.3) !important; -} - -/* 9. Model Scanner Radar Button & Spin Animation */ -#anomalous-scan-btn { - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - width: 32px !important; - height: 32px !important; - border-radius: 6px !important; - box-sizing: border-box !important; - vertical-align: middle !important; -} - -#anomalous-scan-btn svg { - transition: transform 0.2s ease, filter 0.2s ease; - transform-origin: center center; -} - -#anomalous-scan-btn:hover svg { - filter: none; -} - -#anomalous-scan-btn.anomalous-radar-spinning { - color: #10b981 !important; - background: rgba(16, 185, 129, 0.12) !important; - border: 1px solid rgba(16, 185, 129, 0.35) !important; -} - -#anomalous-scan-btn.anomalous-radar-spinning svg { - animation: anomalous-radar-spin 1.4s linear infinite !important; - filter: none !important; -} - -@keyframes anomalous-radar-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.theme-abyssal-scarlet #anomalous-scan-btn:hover svg { - filter: none; -} - -.theme-abyssal-scarlet #anomalous-scan-btn.anomalous-radar-spinning { - color: #ff4d6d !important; - background: rgba(45, 10, 20, 0.85) !important; - border: 1px solid #dc143c !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-scan-btn.anomalous-radar-spinning svg { - filter: none !important; -} - -/* 10. Task 8: Pure Vector Iconography & Micro-interactions Overhaul */ -.anomalous-btn-icon { - display: inline-block; - vertical-align: -2px; - margin-right: 6px; - transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease; -} - -button:hover .anomalous-btn-icon { - transform: scale(1.08); - filter: none; -} - -#anomalous-sidebar-actions { - position: relative; - overflow: visible; - display: flex; - align-items: center; - justify-content: space-around; - padding: 8px 6px; - gap: 2px; - box-sizing: border-box; -} - -#anomalous-sidebar-actions button { - position: relative; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - width: 36px !important; - height: 36px !important; - border-radius: 7px !important; - box-sizing: border-box !important; - vertical-align: middle !important; - color: #cbd5e1 !important; - background: transparent !important; - border: 1px solid transparent !important; - cursor: pointer !important; - overflow: hidden !important; - pointer-events: auto !important; - transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; -} - -#anomalous-sidebar-actions button:hover { - color: #ffffff !important; - background: rgba(255, 255, 255, 0.09) !important; - border: 1px solid rgba(255, 255, 255, 0.18) !important; - transform: none; - box-shadow: none; -} - -#anomalous-sidebar-actions button svg { - width: 20px !important; - height: 20px !important; - stroke-width: 2px !important; - pointer-events: none !important; - transition: opacity 0.15s ease; -} - -/* Abyssal Scarlet Mode overrides for Task 8 icon buttons (Sharp Borders & Inner Shadow) */ -.theme-abyssal-scarlet #anomalous-doctor-btn:hover { - color: #f43f5e !important; - background: rgba(55, 12, 22, 0.85) !important; - border: 1px solid #f43f5e !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-assistant-btn:hover { - color: #a855f7 !important; - background: rgba(36, 12, 45, 0.85) !important; - border: 1px solid #a855f7 !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-materials-btn:hover { - color: #d97706 !important; - background: rgba(45, 20, 10, 0.85) !important; - border: 1px solid #d97706 !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-global-settings-btn:hover { - color: #dc143c !important; - background: rgba(55, 12, 22, 0.85) !important; - border: 1px solid #dc143c !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-sidebar-actions button:hover { - border-color: #dc143c !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-sidebar-actions button:hover svg { - filter: none !important; -} - -/* 11. Task 9: Master Container Geometric Details, Watermarks & Floating Tooltips */ - -#anomalous-sidebar-actions::before { - display: none !important; -} - -.theme-abyssal-scarlet #anomalous-sidebar-actions::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ff3366' stroke-width='1.5'%3E%3Ccircle cx='50' cy='50' r='45'/%3E%3Cpolygon points='50,5 95,50 50,95 5,50' stroke-dasharray='3 3'/%3E%3Cpolygon points='50,15 85,50 50,85 15,50'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3C/svg%3E"); - opacity: 0.055; -} - -/* Abyssal Scarlet Mode override for energy divider */ -.theme-abyssal-scarlet #anomalous-sidebar-wrapper::after { - background: linear-gradient(180deg, - rgba(220, 20, 60, 0) 0%, - rgba(220, 20, 60, 0.45) 20%, - rgba(255, 51, 102, 0.7) 50%, - rgba(147, 51, 234, 0.45) 80%, - rgba(220, 20, 60, 0) 100% - ) !important; - box-shadow: none !important; -} - -/* ========================================================================== - GLOBAL CUSTOM TOOLTIP SYSTEM ([data-tooltip]) - Frosted Glass, Anime Dark Neon Aesthetic, Absolute Native Title Killer - ========================================================================== */ -[data-tooltip], -.anomalous-tooltip-target { - position: relative; -} - -/* Base Tooltip Bubble (Default: Top) - Normal Mode (Neutral Clean Glass) */ -[data-tooltip]::after, -.anomalous-tooltip-target::after { - content: attr(data-tooltip); - position: absolute; - bottom: calc(100% + 8px); - left: 50%; - transform: translateX(-50%) translateY(4px); - padding: 6px 12px; - background: rgba(18, 20, 26, 0.98); - color: #f1f5f9; - font-size: 12px; - font-weight: 500; - line-height: 1.35; - white-space: nowrap; - border-radius: var(--amb-radius-control, 6px); - border: 1px solid rgba(255, 255, 255, 0.14); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65); - opacity: 0; - pointer-events: none; - transition: opacity 0.15s ease, transform 0.15s ease; - z-index: 999999; -} - -/* Base Arrow (Default: Top) */ -[data-tooltip]::before, -.anomalous-tooltip-target::before { - content: ''; - position: absolute; - bottom: calc(100% + 3px); - left: 50%; - transform: translateX(-50%) translateY(4px); - border-width: 5px 5px 0 5px; - border-style: solid; - border-color: rgba(18, 20, 26, 0.98) transparent transparent transparent; - opacity: 0; - pointer-events: none; - transition: opacity 0.15s ease, transform 0.15s ease; - z-index: 999999; -} - -/* Hover & Keyboard Focus Trigger (Standard 350ms Delay) */ -[data-tooltip]:hover::after, -[data-tooltip]:hover::before, -[data-tooltip]:focus-visible::after, -[data-tooltip]:focus-visible::before, -.anomalous-tooltip-target:hover::after, -.anomalous-tooltip-target:hover::before, -.anomalous-tooltip-target:focus-visible::after, -.anomalous-tooltip-target:focus-visible::before { - opacity: 1; - transform: translateX(-50%) translateY(0); - transition-delay: 0.35s; -} - -/* Right-aligned Tooltip (Ideal for Sidebar Icons) */ -[data-tooltip-pos="right"]::after { - bottom: auto; - top: 50%; - left: calc(100% + 10px); - transform: translateY(-50%) translateX(-6px); -} - -[data-tooltip-pos="right"]::before { - bottom: auto; - top: 50%; - left: calc(100% + 5px); - transform: translateY(-50%) translateX(-6px); - border-width: 5px 5px 5px 0; - border-color: transparent rgba(18, 20, 26, 0.98) transparent transparent; -} - -[data-tooltip-pos="right"]:hover::after, -[data-tooltip-pos="right"]:hover::before, -[data-tooltip-pos="right"]:focus-visible::after, -[data-tooltip-pos="right"]:focus-visible::before { - transform: translateY(-50%) translateX(0); - transition-delay: 0.35s; -} - -/* Bottom-aligned Tooltip */ -[data-tooltip-pos="bottom"]::after { - bottom: auto; - top: calc(100% + 8px); - left: 50%; - transform: translateX(-50%) translateY(-6px); -} - -[data-tooltip-pos="bottom"]::before { - bottom: auto; - top: calc(100% + 3px); - left: 50%; - transform: translateX(-50%) translateY(-6px); - border-width: 0 5px 5px 5px; - border-color: transparent transparent rgba(18, 20, 26, 0.98) transparent; -} - -[data-tooltip-pos="bottom"]:hover::after, -[data-tooltip-pos="bottom"]:hover::before, -[data-tooltip-pos="bottom"]:focus-visible::after, -[data-tooltip-pos="bottom"]:focus-visible::before { - transform: translateX(-50%) translateY(0); - transition-delay: 0.35s; -} - -/* Left-aligned Tooltip */ -[data-tooltip-pos="left"]::after { - bottom: auto; - top: 50%; - left: auto; - right: calc(100% + 10px); - transform: translateY(-50%) translateX(6px); -} - -[data-tooltip-pos="left"]::before { - bottom: auto; - top: 50%; - left: auto; - right: calc(100% + 5px); - transform: translateY(-50%) translateX(6px); - border-width: 5px 0 5px 5px; - border-color: transparent transparent transparent rgba(18, 20, 28, 0.95); -} - -[data-tooltip-pos="left"]:hover::after, -[data-tooltip-pos="left"]:hover::before { - transform: translateY(-50%) translateX(0); -} - -/* Top-aligned Tooltip */ -[data-tooltip-pos="top"]::after, -.anomalous-tooltip-target[data-tooltip-pos="top"]::after { - top: auto; - bottom: calc(100% + 8px); - left: 50%; - right: auto; - transform: translateX(-50%) translateY(4px); -} - -[data-tooltip-pos="top"]::before, -.anomalous-tooltip-target[data-tooltip-pos="top"]::before { - top: auto; - bottom: calc(100% + 3px); - left: 50%; - right: auto; - transform: translateX(-50%) translateY(4px); - border-width: 5px 5px 0 5px; - border-style: solid; - border-color: rgba(18, 20, 28, 0.95) transparent transparent transparent; -} - -[data-tooltip-pos="top"]:hover::after, -[data-tooltip-pos="top"]:hover::before, -.anomalous-tooltip-target[data-tooltip-pos="top"]:hover::after, -.anomalous-tooltip-target[data-tooltip-pos="top"]:hover::before { - opacity: 1; - transform: translateX(-50%) translateY(0); -} - -/* Theme: Abyssal Scarlet Tooltip (Inner Shadow, Sharp Border, No Outer Neon Glow) */ -.theme-abyssal-scarlet [data-tooltip]::after, -.theme-abyssal-scarlet .anomalous-tooltip-target::after { - background: rgba(22, 8, 16, 0.98); - border-color: #dc143c; - color: #e0d8db; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95), inset 0 1px 3px rgba(0, 0, 0, 0.7); -} - -.theme-abyssal-scarlet [data-tooltip]::before, -.theme-abyssal-scarlet .anomalous-tooltip-target::before { - border-color: rgba(22, 8, 16, 0.98) transparent transparent transparent; -} - -.theme-abyssal-scarlet [data-tooltip-pos="top"]::before, -.theme-abyssal-scarlet .anomalous-tooltip-target[data-tooltip-pos="top"]::before { - border-color: rgba(22, 8, 16, 0.98) transparent transparent transparent; -} - -.theme-abyssal-scarlet [data-tooltip-pos="right"]::before { - border-color: transparent rgba(22, 8, 16, 0.98) transparent transparent; -} - -.theme-abyssal-scarlet [data-tooltip-pos="bottom"]::before { - border-color: transparent transparent rgba(22, 8, 16, 0.98) transparent; -} - -.theme-abyssal-scarlet [data-tooltip-pos="left"]::before { - border-color: transparent transparent transparent rgba(22, 8, 16, 0.98); -} - - - - - - - - -/* ========================================================================== - MASTER HEADER & GALLERY CONTAINER DUAL-MODE ARCHITECTURE - Normal Mode: Restrained Dark Neutral Studio - Easter Egg Mode: Gothic Vampire Abyssal Scarlet Expansion - ========================================================================== */ - -/* 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: 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 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; - position: relative; - z-index: 10; -} - -.anomalous-header-group { - display: flex; - align-items: center; - gap: 6px; -} - -.anomalous-header-left { - display: flex; - align-items: center; - gap: 6px; - flex: 0 0 auto; -} - -.anomalous-header-center { - display: flex !important; - align-items: center !important; - justify-content: center !important; - gap: 6px !important; - flex: 1 1 auto !important; - margin: 0 auto !important; -} - -.anomalous-header-right { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 8px; - flex: 0 0 auto; -} - -#anomalous-header button { - margin-right: 0; - padding: 0 10px !important; - height: 28px !important; - box-sizing: border-box !important; - background: rgba(255, 255, 255, 0.04) !important; - color: #c0c4cc !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; - border-radius: 6px !important; - cursor: pointer; - white-space: nowrap; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - gap: 5px !important; - font-size: 11.5px !important; - font-weight: 500; - letter-spacing: 0.2px; - backdrop-filter: blur(8px); - transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); -} - -#anomalous-header button:hover { - background: rgba(255, 255, 255, 0.09) !important; - border-color: rgba(255, 255, 255, 0.2) !important; - color: #ffffff !important; - transform: translateY(-1px); - box-shadow: none !important; -} - -#anomalous-header button.active { - background: rgba(255, 255, 255, 0.14) !important; - border-color: rgba(255, 255, 255, 0.28) !important; - color: #ffffff !important; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; -} - -#anomalous-header button .anomalous-btn-text { - display: inline !important; - font-size: 11.5px !important; - font-weight: 500 !important; - line-height: 1 !important; - color: inherit !important; -} - -#anomalous-header button svg, -#anomalous-header button .anomalous-btn-icon { - width: 13px !important; - height: 13px !important; - flex-shrink: 0 !important; - vertical-align: -1px !important; -} - -#anomalous-dock-btn { - padding: 0 !important; - width: 28px !important; - height: 28px !important; - box-sizing: border-box !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - border-radius: 6px !important; - background: rgba(255, 255, 255, 0.04) !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; -} - -#anomalous-dock-btn:hover { - background: rgba(255, 255, 255, 0.09) !important; - border-color: rgba(255, 255, 255, 0.2) !important; - color: #ffffff !important; -} - -#anomalous-dock-btn svg { - width: 13px !important; - height: 13px !important; -} - -/* 2. Normal Mode Gallery Container & Panels (Clean Neutral Dark Canvas) */ -#anomalous-gallery-panel, -.anomalous-gallery-container { - background-color: transparent !important; - position: relative; -} - -.anomalous-gallery-grid { - background-color: transparent !important; -} - -.anomalous-gallery-container::before, -#anomalous-gallery-panel::before { - display: none !important; -} - -.anomalous-gallery-container > *, -#anomalous-gallery-panel > * { - position: relative; - z-index: 1; -} - -/* 3. Abyssal Scarlet Mode Master Header & Gallery Domain Expansion (Easter Egg) */ -.theme-abyssal-scarlet #anomalous-header { - background: #140812 !important; - border-bottom: 1px solid rgba(220, 20, 60, 0.35) !important; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85) !important; -} - -.theme-abyssal-scarlet #anomalous-header button { - background: rgba(30, 10, 20, 0.6) !important; - color: #e0d8db !important; - border: 1px solid rgba(220, 20, 60, 0.3) !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-header button:hover { - background: rgba(55, 12, 24, 0.85) !important; - border-color: #dc143c !important; - color: #f1eaed !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-header button.active { - background: rgba(55, 12, 22, 0.9) !important; - border: 1px solid #dc143c !important; - color: #e0d8db !important; - box-shadow: none !important; -} - -.theme-abyssal-scarlet #anomalous-gallery-panel, -.theme-abyssal-scarlet .anomalous-gallery-grid, -.theme-abyssal-scarlet .anomalous-gallery-container { - background-color: #0c0812 !important; -} - -.theme-abyssal-scarlet .anomalous-gallery-container::before, -.theme-abyssal-scarlet #anomalous-gallery-panel::before { - display: block !important; - content: '' !important; - position: absolute !important; - inset: 0 !important; - background-color: #0d080c !important; - background-image: url('assets/abyssal_bg_concept.webp'), radial-gradient(circle at 50% 50%, rgba(220, 20, 60, 0.03) 0%, transparent 60%) !important; - background-size: cover !important; - background-position: center !important; - mix-blend-mode: overlay !important; - opacity: 0.15 !important; - pointer-events: none !important; - z-index: 0 !important; -} - -/* ========================================================================== - Recipe Studio Dedicated Container & Topbar Close Button - ========================================================================== */ -.anomalous-nb-container.anomalous-recipe-container { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - overflow: hidden; - background: #0d1117; -} - -.anomalous-recipe-topbar-close { - background: transparent !important; - border: 1px solid rgba(255, 255, 255, 0.12) !important; - color: #94a3b8 !important; - padding: 4px 10px !important; - font-size: 0.88rem !important; - cursor: pointer; - border-radius: 6px; - transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); - margin-left: 6px; -} - -.anomalous-recipe-topbar-close:hover { - background: rgba(239, 68, 68, 0.18) !important; - border-color: rgba(239, 68, 68, 0.4) !important; - color: #f87171 !important; -} - -/* ========================================================================== - Quick Prompt Translator (Modal & Tag Chips) - ========================================================================== */ -.anomalous-translator-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.72); - backdrop-filter: blur(8px); - z-index: 999999; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - animation: anmFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); -} - -.anomalous-translator-modal { - width: min(840px, 94vw); - max-height: 88vh; - background: #0f172a; - border: 1px solid rgba(56, 189, 248, 0.25); - box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 32px rgba(56, 189, 248, 0.12); - border-radius: 14px; - display: flex; - flex-direction: column; - overflow: hidden; - position: relative; - transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; -} - -/* Sidebar Docked Mode for Prompt Translator */ -.anomalous-translator-overlay.is-sidebar { - background: transparent !important; - backdrop-filter: none !important; - pointer-events: none !important; - padding: 0 !important; - justify-content: flex-end !important; - align-items: stretch !important; -} - -.anomalous-translator-modal.is-sidebar { - pointer-events: auto !important; - width: var(--amb-translator-width, 380px) !important; - min-width: 320px !important; - max-width: 92vw !important; - height: 100vh !important; - max-height: 100vh !important; - border-radius: 0 !important; - border-top: none !important; - border-bottom: none !important; - border-right: none !important; - border-left: 1px solid rgba(56, 189, 248, 0.3) !important; - background: rgba(13, 17, 26, 0.95) !important; - backdrop-filter: blur(24px) !important; - box-shadow: -10px 0 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.08) !important; - animation: anmSlideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; -} - -.anomalous-translator-resize-handle { - display: none; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 6px; - cursor: ew-resize; - z-index: 50; - transition: background 0.15s ease; -} - -.anomalous-translator-modal.is-sidebar .anomalous-translator-resize-handle { - display: block; -} - -.anomalous-translator-resize-handle:hover, -.anomalous-translator-resize-handle.is-resizing { - background: rgba(56, 189, 248, 0.5); -} - -.anomalous-translator-mode-btn { - border: 1px solid rgba(56, 189, 248, 0.25) !important; - color: #7dd3fc !important; - font-size: 0.76rem !important; - padding: 3px 6px !important; - border-radius: 6px !important; - cursor: pointer; - background: rgba(15, 23, 42, 0.6); - white-space: nowrap; - transition: all 0.15s ease; -} - -.anomalous-translator-mode-btn:hover { - background: rgba(56, 189, 248, 0.2) !important; - color: #ffffff !important; - border-color: #38bdf8 !important; -} - -@keyframes anmSlideInRight { - from { - transform: translateX(100%); - opacity: 0.4; - } - to { - transform: translateX(0); - opacity: 1; - } -} - -/* Sidebar Dock Left Mode */ -.anomalous-translator-overlay.is-sidebar.is-dock-left { - justify-content: flex-start !important; -} - -.anomalous-translator-modal.is-sidebar.is-dock-left { - border-left: none !important; - border-right: 1px solid rgba(56, 189, 248, 0.3) !important; - box-shadow: 10px 0 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.08) !important; - animation: anmSlideInLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; -} - -.anomalous-translator-modal.is-sidebar.is-dock-left .anomalous-translator-resize-handle { - left: auto; - right: 0; -} - -@keyframes anmSlideInLeft { - from { - transform: translateX(-100%); - opacity: 0.4; - } - to { - transform: translateX(0); - opacity: 1; - } -} - -.anomalous-translator-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 14px; - background: rgba(15, 23, 42, 0.95); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - gap: 8px; -} - -.anomalous-translator-title-group { - display: flex; - align-items: center; - gap: 6px; - white-space: nowrap; - flex-shrink: 0; -} - -.anomalous-translator-icon { - font-size: 1.15rem; -} - -.anomalous-translator-title { - margin: 0; - font-size: 0.95rem; - font-weight: 600; - color: #f1f5f9; - white-space: nowrap; -} - -.anomalous-translator-header-right { - display: flex; - align-items: center; - gap: 6px; - flex-shrink: 0; - margin-left: auto; -} - -.anomalous-translator-lang-wrap { - display: flex; - align-items: center; - gap: 4px; - font-size: 0.78rem; - color: #94a3b8; - white-space: nowrap; -} - -.anomalous-translator-lang-wrap span { - white-space: nowrap; -} - -.anomalous-translator-select { - background: #1e293b; - border: 1px solid rgba(255, 255, 255, 0.15); - color: #e2e8f0; - font-size: 0.76rem; - border-radius: 6px; - padding: 3px 6px; - max-width: 120px; - cursor: pointer; -} - -.anomalous-translator-close { - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.15); - color: #e2e8f0; - font-size: 1.25rem; - line-height: 1; - cursor: pointer; - padding: 3px 8px; - border-radius: 6px; - transition: all 0.15s ease; - flex-shrink: 0; - margin-left: 2px; -} - -.anomalous-translator-close:hover { - color: #ffffff; - background: #ef4444 !important; - border-color: #ef4444 !important; - transform: scale(1.08); -} - -.anomalous-translator-body { - display: flex; - flex-direction: column; - gap: 14px; - padding: 16px 18px; - overflow-y: auto; - flex: 1; -} - -.anomalous-translator-pane { - display: flex; - flex-direction: column; - gap: 8px; - background: rgba(30, 41, 59, 0.5); - border: 1px solid rgba(255, 255, 255, 0.06); - border-radius: 10px; - padding: 12px; -} - -.anomalous-translator-pane-label { - font-size: 0.78rem; - font-weight: 600; - color: #94a3b8; - display: flex; - align-items: center; - justify-content: space-between; -} - -.anomalous-translator-textarea { - width: 100%; - min-height: 84px; - background: #090d16; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - color: #f8fafc; - font-family: inherit; - font-size: 0.88rem; - line-height: 1.5; - padding: 10px 12px; - resize: vertical; - box-sizing: border-box; - transition: border-color 0.2s; -} - -.anomalous-translator-textarea:focus { - border-color: #38bdf8; - outline: none; - box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); -} - -.anomalous-translator-textarea.is-target { - color: #38bdf8; - background: #070b13; -} - -.anomalous-translator-action-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - flex-wrap: wrap; -} - -.anomalous-translator-action-group { - display: flex; - align-items: center; - gap: 6px; - flex-wrap: wrap; -} - -.anomalous-translator-mid-bar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 6px 10px; - background: rgba(15, 23, 42, 0.75); - border: 1px solid rgba(56, 189, 248, 0.2); - border-radius: 8px; - margin: 2px 0; - gap: 8px; - box-sizing: border-box; -} - -.anomalous-translator-swap-btn { - background: #1e293b; - border: 1px solid rgba(56, 189, 248, 0.35); - color: #38bdf8; - border-radius: 12px; - padding: 3px 12px; - font-size: 0.76rem; - font-weight: 500; - cursor: pointer; - transition: all 0.15s ease; - display: inline-flex; - align-items: center; - gap: 5px; - white-space: nowrap; - flex-shrink: 0; -} - -.anomalous-translator-swap-btn:hover { - background: #0284c7; - color: #ffffff; - border-color: #38bdf8; - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4); -} - -.anomalous-translator-chips-wrap { - display: flex; - flex-wrap: wrap; - gap: 6px; - max-height: 120px; - overflow-y: auto; - padding: 6px 4px; -} - -.anomalous-translator-chip { - display: inline-flex; - align-items: center; - padding: 3px 8px; - background: rgba(56, 189, 248, 0.1); - border: 1px solid rgba(56, 189, 248, 0.28); - border-radius: 12px; - color: #7dd3fc; - font-size: 0.75rem; - cursor: pointer; - transition: all 0.15s ease; - user-select: none; -} - -.anomalous-translator-chip:hover { - background: rgba(56, 189, 248, 0.25); - border-color: #38bdf8; - color: #ffffff; - transform: translateY(-1px); -} - -.anomalous-translator-toast { - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - background: rgba(15, 23, 42, 0.95); - border: 1px solid #38bdf8; - color: #38bdf8; - padding: 8px 18px; - border-radius: 20px; - font-size: 0.82rem; - font-weight: 500; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); - z-index: 100; - pointer-events: none; - animation: anmFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); - transition: opacity 0.4s ease; -} - -.anomalous-translator-toast.is-error { - border-color: #f87171; - color: #f87171; -} - -.anomalous-translator-toast.is-fade-out { - opacity: 0; -} - -.anomalous-mixer-block-btn.is-translate { - font-size: 0.78rem; - padding: 2px 4px; - opacity: 0.8; -} - -.anomalous-mixer-block-btn.is-translate:hover { - opacity: 1; - color: #38bdf8; - background: rgba(56, 189, 248, 0.18); -} - -/* ========================================================================== - PROMPT STUDIO: Minimalist Sidebar Drawer & Floating Action Dock - ========================================================================== */ -.anomalous-prompt-studio-overlay { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: 999990; - pointer-events: none; /* Canvas passthrough: pan/zoom canvas freely */ - overflow: hidden; -} - -.anomalous-prompt-studio-drawer { - position: absolute; - top: 0; - right: 0; - width: 580px; - max-width: 90vw; - height: 100vh; - background: var(--amb-bg-page, #121316); - border-left: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6); - pointer-events: auto; - display: flex; - flex-direction: column; - z-index: 999991; - box-sizing: border-box; -} - -.anomalous-prompt-studio-drawer.is-dock-left { - right: auto; - left: 0; - border-left: none; - border-right: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); - box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6); -} - -/* Edge Resize Handle */ -.anomalous-studio-resize-handle { - position: absolute; - top: 0; - left: -4px; - width: 8px; - height: 100%; - cursor: ew-resize; - z-index: 100; - transition: background 0.15s ease; -} - -.anomalous-prompt-studio-drawer.is-dock-left .anomalous-studio-resize-handle { - left: auto; - right: -4px; -} - -.anomalous-studio-resize-handle:hover, -.anomalous-studio-resize-handle.is-resizing { - background: #38bdf8; - box-shadow: 0 0 10px rgba(56, 189, 248, 0.6); -} - -/* Drawer Workbench Base */ -.anomalous-prompt-studio-drawer .anomalous-prompt-workbench { - background: transparent; - padding: 0; - height: 100%; - display: flex; - flex-direction: column; -} - -/* Shared drawer geometry. Dock direction only changes column order and separators. */ -.anomalous-prompt-studio-drawer.is-dock-left .anomalous-prompt-workbench-grid, -.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-prompt-workbench-grid { - display: grid !important; - flex-direction: row !important; - gap: 0 !important; - padding: 0 !important; - flex: 1; - min-height: 0; -} - -.anomalous-prompt-studio-drawer.is-dock-left .anomalous-prompt-workbench-grid { - grid-template-columns: 190px minmax(0, 1fr) !important; -} - -.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-prompt-workbench-grid { - grid-template-columns: minmax(0, 1fr) 190px !important; -} - -.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-left-panel, -.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-left-panel { - flex: none !important; - width: 190px !important; - max-height: 100% !important; - padding: 8px 10px !important; - border-left: none !important; - background: rgba(18, 20, 24, 0.7) !important; - box-sizing: border-box; - display: flex; - flex-direction: column; -} - -.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-left-panel { - order: 1 !important; - border-right: 1px solid rgba(255, 255, 255, 0.08) !important; -} - -.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-left-panel { - order: 2 !important; - border-right: none !important; -} - -.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-right-panel, -.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-right-panel { - flex: 1 !important; - max-height: 100% !important; - padding: 8px 12px 52px !important; - position: relative; - box-sizing: border-box; - background: rgba(14, 15, 18, 0.5) !important; - display: flex; - flex-direction: column; -} - -.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-right-panel { - order: 2 !important; -} - -.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-right-panel { - order: 1 !important; - border-right: 1px solid rgba(255, 255, 255, 0.08) !important; - border-left: none !important; -} - -/* Column Headers & Action Buttons */ -.anomalous-workbench-col-header { - display: flex; - align-items: center; - justify-content: space-between; - height: 30px; - padding: 0 2px; - margin-bottom: 6px; - flex-shrink: 0; -} - -.anomalous-workbench-col-title { - display: inline-flex; - align-items: center; - gap: 5px; - font-size: 0.84rem; - font-weight: 600; - color: #f1f5f9; - white-space: nowrap; -} - -.anomalous-workbench-col-title .anomalous-sub-counter { - font-size: 0.72rem; - color: #64748b; - font-weight: normal; -} - -.anomalous-workbench-header-actions { - display: inline-flex; - align-items: center; - gap: 4px; - flex-shrink: 0; -} - -.anomalous-workbench-header-actions button.anomalous-icon-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - padding: 0; - border-radius: 5px; - color: #94a3b8; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-workbench-header-actions button.anomalous-icon-btn:hover { - color: #ffffff; - background: rgba(56, 189, 248, 0.18); - border-color: rgba(56, 189, 248, 0.4); -} - -/* Category Pills: 5 equal 2-char chips */ -.anomalous-workbench-category-pills { - display: flex; - align-items: center; - gap: 3px; - flex-wrap: nowrap; - margin: 4px 0 8px; -} - -.anomalous-workbench-pill { - flex: 1 1 0; - text-align: center; - padding: 3px 0; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.03); - color: #94a3b8; - font-size: 0.72rem; - cursor: pointer; - transition: all 0.15s ease; - line-height: 1.3; - white-space: nowrap; -} - -.anomalous-workbench-pill:hover { - color: #f1f5f9; - background: rgba(255, 255, 255, 0.08); -} - -.anomalous-workbench-pill.is-active { - color: #38bdf8; - background: rgba(56, 189, 248, 0.15); - border-color: rgba(56, 189, 248, 0.4); - font-weight: 600; -} - -/* Compact Source Cards in 190px */ -.anomalous-source-cards-list { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - gap: 4px; - padding-right: 2px; -} - -.anomalous-source-card-compact { - display: flex; - align-items: center; - gap: 7px; - padding: 6px 9px; - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - border-left: 3px solid #64748b; - border-radius: 6px; - cursor: pointer; - transition: all 0.15s ease; - user-select: none; - min-width: 0; - box-sizing: border-box; -} - -.anomalous-source-card-compact.is-cat-base { - border-left-color: #38bdf8 !important; -} - -.anomalous-source-card-compact.is-cat-style { - border-left-color: #c084fc !important; -} - -.anomalous-source-card-compact.is-cat-subject { - border-left-color: #4ade80 !important; -} - -.anomalous-source-card-compact.is-cat-trigger { - border-left-color: #fb923c !important; -} - -.anomalous-source-card-compact:hover, -.anomalous-source-card-compact.is-preview-active { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.22); - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); - transform: translateX(2px); -} - -.anomalous-source-card-compact.is-cat-base:hover, -.anomalous-source-card-compact.is-cat-base.is-preview-active { - border-color: rgba(56, 189, 248, 0.4); - background: rgba(56, 189, 248, 0.12); -} - -.anomalous-source-card-compact.is-cat-style:hover, -.anomalous-source-card-compact.is-cat-style.is-preview-active { - border-color: rgba(192, 132, 252, 0.4); - background: rgba(192, 132, 252, 0.12); -} - -.anomalous-source-card-compact.is-cat-subject:hover, -.anomalous-source-card-compact.is-cat-subject.is-preview-active { - border-color: rgba(74, 222, 128, 0.4); - background: rgba(74, 222, 128, 0.12); -} - -.anomalous-source-card-compact.is-cat-trigger:hover, -.anomalous-source-card-compact.is-cat-trigger.is-preview-active { - border-color: rgba(251, 146, 60, 0.4); - background: rgba(251, 146, 60, 0.12); -} - -.anomalous-source-card-dot { - width: 6px; - height: 6px; - border-radius: 50%; - flex-shrink: 0; -} - -.anomalous-source-card-label { - display: flex; - flex-direction: column; - min-width: 0; - flex: 1; -} - -.anomalous-source-origin, -.anomalous-source-sync-status { - color: var(--amb-text-muted, #94a3b8); - font-size: 0.68rem; - overflow-wrap: anywhere; -} - -.anomalous-source-sync-status { - padding: 4px 12px; -} - -.anomalous-source-card-name { - font-size: 0.76rem; - font-weight: 500; - color: #f1f5f9; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1; -} - -.anomalous-source-card-compact:hover .anomalous-source-card-name, -.anomalous-source-card-compact.is-preview-active .anomalous-source-card-name { - color: #ffffff; -} - -.anomalous-source-card-add-icon { - font-size: 0.72rem; - color: #64748b; - opacity: 0; - transition: opacity 0.15s; - flex-shrink: 0; - padding: 0 4px; - border-radius: 3px; -} - -.anomalous-source-card-compact:hover .anomalous-source-card-add-icon, -.anomalous-source-card-compact.is-preview-active .anomalous-source-card-add-icon { - opacity: 1; - color: #38bdf8; - background: rgba(56, 189, 248, 0.18); -} - -/* Eye-Catching Prompt Card Hover Preview Popover (Replaces unstyled browser tooltip) */ -.anomalous-card-preview-popover { - position: fixed; - z-index: 1000005; - width: 320px; - max-width: calc(100vw - 32px); - background: rgba(18, 20, 26, 0.98); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(56, 189, 248, 0.35); - border-radius: 10px; - box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.18); - display: flex; - flex-direction: column; - overflow: visible; - pointer-events: auto; - animation: anmPopoverIn 0.15s cubic-bezier(0.16, 1, 0.3, 1); -} - -.anomalous-card-preview-popover.is-dock-left::before, -.anomalous-card-preview-popover.is-dock-right::before { - display: none; -} - -.anomalous-card-preview-popover.is-pinned { - border-color: #38bdf8 !important; - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(56, 189, 248, 0.35) !important; -} - -.anomalous-popover-copy-btn, -.anomalous-popover-pin-btn, -.anomalous-popover-add-btn { - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 4px; - color: #cbd5e1; - font-size: 0.7rem; - font-weight: 500; - padding: 2px 7px; - cursor: pointer; - transition: all 0.15s ease; - white-space: nowrap; -} - -.anomalous-popover-copy-btn:hover, -.anomalous-popover-pin-btn:hover { - background: rgba(56, 189, 248, 0.15); - border-color: rgba(56, 189, 248, 0.4); - color: #38bdf8; -} - -.anomalous-popover-pin-btn.is-active { - background: rgba(56, 189, 248, 0.25) !important; - border-color: #38bdf8 !important; - color: #38bdf8 !important; - font-weight: 600; -} - -.anomalous-popover-close-btn { - background: transparent; - border: 1px solid transparent; - color: #94a3b8; - font-size: 0.75rem; - padding: 1px 6px; - cursor: pointer; - border-radius: 4px; - transition: all 0.15s ease; - line-height: 1.2; -} - -.anomalous-popover-close-btn:hover { - background: rgba(239, 68, 68, 0.2); - border-color: rgba(239, 68, 68, 0.4); - color: #f87171; -} - -.anomalous-popover-add-btn { - background: rgba(56, 189, 248, 0.15); - border-color: rgba(56, 189, 248, 0.35); - color: #38bdf8; -} - -.anomalous-popover-add-btn:hover { - background: rgba(56, 189, 248, 0.28); - border-color: rgba(56, 189, 248, 0.6); - color: #ffffff; -} - -@keyframes anmPopoverIn { - from { opacity: 0; transform: scale(0.96) translateX(-4px); } - to { opacity: 1; transform: scale(1) translateX(0); } -} - -.anomalous-popover-header { - padding: 10px 12px 6px; - background: rgba(255, 255, 255, 0.02); - border-bottom: 1px solid rgba(255, 255, 255, 0.06); - display: flex; - flex-direction: column; - gap: 4px; -} - -.anomalous-popover-tags { - display: flex; - align-items: center; - gap: 6px; -} - -.anomalous-popover-cat { - padding: 2px 7px; - border-radius: 4px; - font-size: 0.68rem; - font-weight: 600; - line-height: 1.2; - border: 1px solid transparent; -} - -.anomalous-popover-role { - padding: 2px 7px; - border-radius: 4px; - font-size: 0.68rem; - font-weight: 600; - line-height: 1.2; -} - -.anomalous-popover-role.is-positive { - background: rgba(56, 189, 248, 0.15); - color: #38bdf8; - border: 1px solid rgba(56, 189, 248, 0.35); -} - -.anomalous-popover-role.is-negative { - background: rgba(251, 113, 133, 0.15); - color: #fb7185; - border: 1px solid rgba(251, 113, 133, 0.35); -} - -.anomalous-popover-title { - font-size: 0.86rem; - font-weight: 600; - color: #f8fafc; - line-height: 1.35; - word-break: break-word; -} - -.anomalous-popover-body { - padding: 8px 12px; -} - -.anomalous-popover-snippet { - margin: 0; - padding: 8px 10px; - background: rgba(0, 0, 0, 0.45); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 6px; - color: #38bdf8; - font-family: Consolas, Monaco, "Courier New", monospace; - font-size: 0.76rem; - line-height: 1.45; - white-space: pre-wrap; - word-break: break-word; - max-height: 140px; - overflow-y: auto; -} - -.anomalous-popover-footer { - padding: 6px 12px 7px; - font-size: 0.7rem; - color: #94a3b8; - display: flex; - align-items: center; - background: rgba(0, 0, 0, 0.25); - border-top: 1px solid rgba(255, 255, 255, 0.04); -} - -/* Assembly Dropzone Notice */ -.anomalous-assembly-dropzone { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex: 1; - min-height: 260px; - padding: 40px 20px; - border: 1px dashed rgba(255, 255, 255, 0.1); - border-radius: 12px; - background: rgba(255, 255, 255, 0.015); - color: #64748b; - text-align: center; - box-sizing: border-box; - transition: all 0.2s ease; -} - -.anomalous-assembly-dropzone:hover, -.anomalous-assembly-dropzone.is-drag-over { - border-color: rgba(56, 189, 248, 0.4); - background: rgba(56, 189, 248, 0.04); -} - -/* Weight Wheel Pill in Assembled Blocks */ -.anomalous-block-weight-pill { - display: inline-flex; - align-items: center; - background: rgba(0, 0, 0, 0.45); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 12px; - padding: 0 4px; - font-size: 0.72rem; - font-family: monospace, sans-serif; - color: #38bdf8; - cursor: ns-resize; - user-select: none; - gap: 2px; - transition: all 0.15s; -} - -.anomalous-block-weight-pill:hover { - border-color: #38bdf8; - box-shadow: 0 0 8px rgba(56, 189, 248, 0.3); -} - -.anomalous-block-weight-btn { - background: transparent; - border: none; - color: #94a3b8; - cursor: pointer; - font-size: 0.7rem; - padding: 0 2px; - line-height: 1; - transition: color 0.15s; -} - -.anomalous-block-weight-btn:hover { - color: #fff; -} - -/* Floating Action Dock (Slides up only when blocks exist) */ -.anomalous-floating-action-dock { - position: absolute; - bottom: 8px; - left: 8px; - right: 8px; - height: 38px; - background: rgba(22, 25, 32, 0.94); - backdrop-filter: blur(16px); - border: 1px solid rgba(56, 189, 248, 0.35); - border-radius: 20px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.18); - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 10px; - z-index: 20; - animation: anmSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); - box-sizing: border-box; -} - -.anomalous-floating-dock-left { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.72rem; - color: #94a3b8; - white-space: nowrap; -} - -.anomalous-floating-dock-right { - display: flex; - align-items: center; - gap: 5px; -} - -/* Independent Popout Prompt Inspector Modal */ -.anomalous-prompt-inspector-overlay { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(8px); - z-index: 999999; - display: flex; - align-items: center; - justify-content: center; - animation: anmFadeIn 0.2s ease; -} - -.anomalous-prompt-inspector-modal { - width: 780px; - max-width: 92vw; - height: 520px; - max-height: 88vh; - background: var(--amb-bg-panel, #181a20); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.16)); - border-radius: 14px; - box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.2); - display: flex; - flex-direction: column; - overflow: hidden; - animation: anmScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1); -} - -.anomalous-inspector-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 16px; - background: rgba(255, 255, 255, 0.03); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); -} - -.anomalous-inspector-body { - flex: 1; - min-height: 0; - padding: 14px 16px; - display: flex; - flex-direction: column; - gap: 10px; -} - -.anomalous-inspector-textarea { - flex: 1; - width: 100%; - box-sizing: border-box; - background: rgba(0, 0, 0, 0.35); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 8px; - color: #e2e8f0; - font-family: Consolas, Monaco, "Courier New", monospace; - font-size: 0.88rem; - line-height: 1.6; - padding: 12px; - resize: none; - outline: none; - transition: border-color 0.15s; -} - -.anomalous-inspector-textarea:focus { - border-color: #38bdf8; - box-shadow: 0 0 12px rgba(56, 189, 248, 0.25); -} - -.anomalous-inspector-footer { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 16px; - background: rgba(255, 255, 255, 0.03); - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -@keyframes anmScaleUp { - from { transform: scale(0.95); opacity: 0; } - to { transform: scale(1); opacity: 1; } -} - -@keyframes anmSlideUp { - from { transform: translateY(12px); opacity: 0; } - to { transform: translateY(0); opacity: 1; } -} - -/* Unified Positive / Negative Role Badges & Cross-Role Tail Indicators */ -.anomalous-card-role-tag { - font-size: 0.65rem; - font-weight: 700; - line-height: 1; - padding: 1px 4px; - border-radius: 3px; - letter-spacing: 0.2px; - flex-shrink: 0; - user-select: none; -} - -.anomalous-card-role-tag.is-positive { - color: #38bdf8; - background: rgba(56, 189, 248, 0.14); - border: 1px solid rgba(56, 189, 248, 0.28); -} - -.anomalous-card-role-tag.is-negative { - color: #fb7185; - background: rgba(244, 63, 94, 0.14); - border: 1px solid rgba(244, 63, 94, 0.28); -} - -.anomalous-mixer-tab-btn.is-role-positive.is-active { - background: rgba(56, 189, 248, 0.16) !important; - color: #38bdf8 !important; - border: 1px solid rgba(56, 189, 248, 0.35) !important; - box-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important; -} - -.anomalous-mixer-tab-btn.is-role-negative.is-active { - background: rgba(244, 63, 94, 0.16) !important; - color: #fb7185 !important; - border: 1px solid rgba(244, 63, 94, 0.35) !important; - box-shadow: 0 0 10px rgba(244, 63, 94, 0.15) !important; -} - -.anomalous-mixer-block.is-cross-role { - border-style: dashed; - border-color: rgba(251, 113, 133, 0.45); - background: rgba(251, 113, 133, 0.05); -} - -.anomalous-mixer-block.is-role-positive.is-cross-role { - border-color: rgba(56, 189, 248, 0.45); - background: rgba(56, 189, 248, 0.05); -} - -.anomalous-mixer-role-badge { - padding: 2px 6px; - border-radius: 4px; - font-size: 0.68rem; - font-weight: 700; - line-height: 1.3; - display: inline-flex; - align-items: center; - gap: 3px; - cursor: pointer; - user-select: none; - white-space: nowrap; - flex-shrink: 0; - transition: all 0.15s ease; - border: 1px solid transparent; -} - -.anomalous-mixer-cat-badge { - padding: 2px 6px; - border-radius: 4px; - font-size: 0.68rem; - font-weight: 600; - line-height: 1.3; - white-space: nowrap; - flex-shrink: 0; - cursor: pointer; - user-select: none; -} - -.anomalous-mixer-role-badge.is-positive { - color: #38bdf8; - background: rgba(56, 189, 248, 0.14); - border-color: rgba(56, 189, 248, 0.28); -} - -.anomalous-mixer-role-badge.is-negative { - color: #fb7185; - background: rgba(244, 63, 94, 0.14); - border-color: rgba(244, 63, 94, 0.28); -} - -.anomalous-mixer-role-badge.is-cross-role { - border-style: dashed; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); -} - -.anomalous-mixer-role-badge:hover { - transform: scale(1.04); - filter: brightness(1.15); -} - -.anomalous-mixer-block-btn.is-transfer:hover { - color: #38bdf8; - background: rgba(56, 189, 248, 0.15); -} - -/* ========================================================================= */ -/* Model Source Hub Modal (模型来源统一中控中心) */ -/* ========================================================================= */ -.anomalous-model-sources-overlay { - position: fixed; - inset: 0; - background: rgba(5, 7, 12, 0.78); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - z-index: 1000008; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - box-sizing: border-box; - animation: anmFadeIn 0.2s ease; -} - -.anomalous-model-sources-modal { - width: 880px; - max-width: 96vw; - max-height: 88vh; - background: #0e1017; - border: 1px solid rgba(244, 63, 94, 0.35); - border-radius: 12px; - box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 32px rgba(190, 20, 55, 0.18); - display: flex; - flex-direction: column; - overflow: hidden; - color: #e2e8f0; -} - -.anomalous-sources-header { - padding: 14px 18px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(18, 20, 28, 0.9); - flex-shrink: 0; -} - -.anomalous-sources-top-row { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 12px; -} - -.anomalous-sources-title-wrap h3 { - margin: 0; - font-size: 1.05rem; - font-weight: 600; - color: #f1f5f9; -} - -.anomalous-sources-close-btn { - background: transparent; - border: none; - color: #94a3b8; - font-size: 1.1rem; - cursor: pointer; - padding: 4px 8px; - border-radius: 6px; - transition: all 0.15s ease; -} - -.anomalous-sources-close-btn:hover { - color: #fff; - background: rgba(255, 255, 255, 0.1); -} - -.anomalous-sources-scope-tabs { - display: flex; - gap: 8px; -} - -.anomalous-sources-scope-tab { - background: transparent; - border: none; - border-bottom: 2px solid transparent; - color: #94a3b8; - padding: 8px 16px; - font-size: 0.88rem; - font-weight: 500; - cursor: pointer; - transition: all 0.15s ease; - display: flex; - align-items: center; - gap: 6px; -} - -.anomalous-sources-scope-tab:hover { - color: #f1f5f9; -} - -.anomalous-sources-scope-tab.is-active { - color: #38bdf8; - border-bottom-color: #38bdf8; - font-weight: 600; -} - -.anomalous-sources-badge-num { - font-size: 0.72rem; - padding: 1px 6px; - border-radius: 10px; - background: rgba(255, 255, 255, 0.08); - color: #cbd5e1; -} - -.anomalous-sources-filter-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 10px 18px; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); - background: rgba(14, 16, 23, 0.95); - flex-shrink: 0; -} - -.anomalous-sources-pills { - display: flex; - gap: 6px; -} - -.anomalous-sources-pill { - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - color: #94a3b8; - border-radius: 16px; - padding: 3px 10px; - font-size: 0.78rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-sources-pill:hover { - color: #f1f5f9; - background: rgba(255, 255, 255, 0.08); -} - -.anomalous-sources-pill.is-active { - background: rgba(56, 189, 248, 0.18); - border-color: rgba(56, 189, 248, 0.4); - color: #38bdf8; - font-weight: 600; -} - -.anomalous-sources-search-input { - background: rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 6px; - color: #f1f5f9; - font-size: 0.8rem; - padding: 5px 10px; - width: 220px; - outline: none; - transition: border-color 0.15s ease; -} - -.anomalous-sources-search-input:focus { - border-color: #38bdf8; -} - -.anomalous-sources-body { - flex: 1; - overflow-y: auto; - padding: 14px 18px; - display: flex; - flex-direction: column; - gap: 10px; -} - -.anomalous-source-row-item { - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.07); - border-radius: 8px; - padding: 10px 14px; - display: flex; - flex-direction: column; - gap: 8px; - transition: border-color 0.15s ease, background 0.15s ease; -} - -.anomalous-source-row-item.has-url { - border-left: 3px solid #10b981; -} - -.anomalous-source-row-item.is-missing-url { - border-left: 3px solid #f59e0b; -} - -.anomalous-source-row-title { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; -} - -.anomalous-source-node-tag { - font-size: 0.72rem; - padding: 1px 6px; - border-radius: 4px; - background: rgba(244, 63, 94, 0.15); - border: 1px solid rgba(244, 63, 94, 0.3); - color: #fb7185; - font-family: monospace; -} - -.anomalous-source-model-name { - font-size: 0.88rem; - color: #f1f5f9; - word-break: break-all; -} - -.anomalous-source-badge-danger { - font-size: 0.7rem; - padding: 1px 5px; - border-radius: 4px; - background: rgba(239, 68, 68, 0.2); - border: 1px solid rgba(239, 68, 68, 0.4); - color: #f87171; -} - -.anomalous-source-hash-chip { - font-size: 0.72rem; - color: #64748b; - margin-left: auto; - font-family: monospace; -} - -.anomalous-source-col-input-row { - display: flex; - align-items: center; - gap: 8px; -} - -.anomalous-source-input-wrap { - flex: 1; - position: relative; - display: flex; - align-items: center; -} - -.anomalous-source-url-input { - width: 100%; - background: rgba(0, 0, 0, 0.4); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 6px; - color: #e2e8f0; - font-size: 0.82rem; - padding: 6px 10px; - padding-right: 96px; - outline: none; - box-sizing: border-box; - font-family: monospace; -} - -.anomalous-source-url-input:focus { - border-color: #38bdf8; - background: rgba(0, 0, 0, 0.6); -} - -.anomalous-source-url-input.is-locked { - background: rgba(0, 0, 0, 0.25); - border-color: rgba(255, 255, 255, 0.07); - color: #94a3b8; - cursor: default; -} - -.anomalous-source-url-input.is-locked:hover { - border-color: rgba(255, 255, 255, 0.18); -} - -.anomalous-source-url-input.is-editing { - border-color: #f59e0b; - background: rgba(245, 158, 11, 0.08); - box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); - color: #f8fafc; -} - -.anomalous-source-edit-badge { - font-size: 0.7rem; - font-weight: 500; - color: #fbbf24; - background: rgba(245, 158, 11, 0.15); - border: 1px solid rgba(245, 158, 11, 0.35); - padding: 1px 6px; - border-radius: 4px; - white-space: nowrap; -} - -.anomalous-btn-save-local { - background: linear-gradient(135deg, #f59e0b, #d97706) !important; - border-color: rgba(245, 158, 11, 0.6) !important; - color: #fff !important; - font-weight: 600; - animation: anomalousSourcesPulse 1.6s ease-in-out infinite; -} - -@keyframes anomalousSourcesPulse { - 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } - 50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); } -} - -.anomalous-source-plat-badge { - position: absolute; - right: 6px; - font-size: 0.7rem; - font-weight: 500; - padding: 2px 7px; - border-radius: 4px; - border: 1px solid; - pointer-events: none; -} - -.anomalous-source-row-actions { - display: flex; - gap: 6px; - align-items: center; - flex-shrink: 0; -} - -.anomalous-btn-jump { - background: linear-gradient(135deg, #0284c7, #0369a1); - border: 1px solid rgba(56, 189, 248, 0.4); - color: #fff; -} - -.anomalous-btn-jump:disabled { - opacity: 0.4; - cursor: not-allowed; -} - -.anomalous-sources-footer { - padding: 10px 18px; - border-top: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(18, 20, 28, 0.95); - display: flex; - align-items: center; - justify-content: space-between; - flex-shrink: 0; -} - -.anomalous-sources-footer-stats { - font-size: 0.82rem; - color: #94a3b8; -} - -.anomalous-sources-footer-actions { - display: flex; - gap: 8px; -} - -.anomalous-sources-empty { - padding: 40px 20px; - text-align: center; - color: #94a3b8; - font-size: 0.9rem; -} - -/* ============================================================================= - UPDATE GUIDE NOTICE INDICATOR (CLEAN MONOCHROME TECH) - ============================================================================= */ -/* Header skin uses important padding/colors; keep this control square within that skin. */ -#anomalous-header button.anomalous-update-notice-btn { - width: 32px; - min-width: 32px; - padding: 0 !important; - background: transparent !important; - border-color: rgba(255, 255, 255, 0.15) !important; - color: var(--amb-text-primary, #e2e8f0) !important; -} -#anomalous-header button.anomalous-update-notice-btn:hover { - background: rgba(255, 255, 255, 0.08) !important; -} -.anomalous-update-notice-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 16px; - height: 16px; - border: 1px solid currentColor; - border-radius: 50%; - font: 700 12px/1 system-ui, sans-serif; -} -#anomalous-help-replay-guide-btn { - padding: 8px 14px; - background: rgba(255, 255, 255, 0.05); - color: #cbd5e1; - border: 1px solid rgba(255, 255, 255, 0.16); - border-radius: 4px; - cursor: pointer; - font-size: 12px; - font-weight: 500; -} -#anomalous-help-replay-guide-btn:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.3); - color: #fff; -} -#anomalous-update-notice-btn:focus-visible, -#anomalous-help-replay-guide-btn:focus-visible, -.anomalous-update-guide button:focus-visible { - outline: 2px solid var(--amb-accent, #38bdf8); - outline-offset: 2px; -} - -/* ============================================================================= - SIDEBAR ACTIONS HOVER REVEAL & TOOLTIPS - ============================================================================= */ -#anomalous-sidebar-actions .anomalous-action-label { - position: absolute; - inset: 0; - display: inline-flex; - align-items: center; - justify-content: center; - font: 600 11px/1 system-ui, sans-serif; - color: #ffffff; - pointer-events: none !important; - white-space: nowrap; - opacity: 0; - transform: translateY(3px); - transition: opacity 0.12s ease, transform 0.12s ease; -} - -#anomalous-sidebar-actions button.anomalous-action-label-active > svg { - opacity: 0 !important; - pointer-events: none !important; -} - -#anomalous-sidebar-actions button.anomalous-action-label-active .anomalous-action-label { - opacity: 1 !important; - transform: translateY(0) !important; -} - -#anomalous-sidebar-actions button:focus-visible { - outline: 2px solid var(--amb-accent, #38bdf8); - outline-offset: 2px; -} - -@media (hover: none) { - #anomalous-sidebar-actions button > svg { opacity: 0 !important; } - #anomalous-sidebar-actions .anomalous-action-label { opacity: 1 !important; transform: none !important; } -} - -/* Suppress CSS pseudo-element tooltips on sidebar action buttons */ -#anomalous-sidebar-actions button::after, -#anomalous-sidebar-actions button::before { - display: none !important; -} - -/* ============================================================================= - SHARED SIDEBAR FLOATING TOOLTIP BUBBLE (SINGLETON DOM) - ============================================================================= */ -#anomalous-sidebar-tooltip-bubble { - position: fixed; - z-index: 1000001; - pointer-events: none; - display: none; - flex-direction: column; - align-items: center; - padding: 7px 11px; - max-width: 220px; - background: rgba(18, 20, 26, 0.98); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 6px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.08); - box-sizing: border-box; - transition: opacity 0.15s ease; -} - -#anomalous-sidebar-tooltip-bubble .anomalous-tooltip-title { - font-size: 11.5px; - font-weight: 600; - color: #ffffff; - margin-bottom: 2px; - text-align: center; - line-height: 1.3; -} - -#anomalous-sidebar-tooltip-bubble .anomalous-tooltip-body { - font-size: 10.5px; - font-weight: 400; - color: #94a3b8; - line-height: 1.4; - text-align: center; - white-space: normal; - word-break: normal; - overflow-wrap: break-word; -} - -#anomalous-sidebar-tooltip-bubble .anomalous-tooltip-arrow { - position: absolute; - bottom: -5px; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid rgba(18, 20, 26, 0.98); - transform: translateX(-50%); -} - -@media (prefers-reduced-motion: reduce) { - #anomalous-sidebar-actions button .anomalous-action-label { - animation: none !important; - transform: none !important; - } - #anomalous-sidebar-tooltip-bubble { - transition: none !important; - } -} - -/* ============================================================================= - UPDATE GUIDE MODAL (ELEGANT MONOCHROME OBSIDIAN GLASS) - ============================================================================= */ -dialog.anomalous-update-guide:not([open]) { - display: none !important; -} - -dialog.anomalous-update-guide[open] { - display: flex !important; - flex-direction: column; -} - -dialog.anomalous-update-guide { - position: fixed; - inset: 0; - margin: auto; - width: 480px; - max-width: calc(100vw - 32px); - height: fit-content; - max-height: 85vh; - padding: 0; - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 16px; - background: linear-gradient(145deg, rgba(28, 30, 38, 0.98), rgba(16, 18, 24, 0.98)); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.12); - color: #f1f5f9; - outline: none; - overflow-y: auto; - box-sizing: border-box; - z-index: 1000000; - animation: anomalous-guide-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1); -} - -dialog.anomalous-update-guide > * { flex-shrink: 0; } - -@keyframes anomalous-guide-pop { - from { - opacity: 0; - transform: scale(0.95); - } - to { - opacity: 1; - transform: scale(1); - } -} - -dialog.anomalous-update-guide::backdrop { - background: rgba(0, 0, 0, 0.65); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - animation: anomalous-fade-in 0.2s ease; -} - -@keyframes anomalous-fade-in { - from { opacity: 0; } - to { opacity: 1; } -} - -.anomalous-update-guide-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 14px 20px; - background: rgba(255, 255, 255, 0.02); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - font-size: 12px; - font-weight: 600; - letter-spacing: 0.5px; - color: #94a3b8; -} - -.anomalous-update-guide-close { - background: transparent; - border: none; - color: #94a3b8; - font-size: 20px; - line-height: 1; - cursor: pointer; - padding: 2px 6px; - border-radius: 6px; - transition: all 0.15s ease; -} - -.anomalous-update-guide-close:hover { - color: #ffffff; - background: rgba(255, 255, 255, 0.1); -} - -.anomalous-update-guide-icon { - width: 58px; - height: 58px; - margin: 24px auto 14px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.14); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - color: #f1f5f9; - user-select: none; - flex-shrink: 0; -} - -#anomalous-update-guide-title { - margin: 0 24px 10px; - font-size: 17px; - font-weight: 600; - color: #ffffff; - text-align: center; - letter-spacing: 0.2px; -} - -#anomalous-update-guide-body { - margin: 0 24px 16px; - font-size: 13px; - line-height: 1.65; - color: #cbd5e1; - text-align: center; - min-height: 60px; -} - -.anomalous-update-guide-progress { - margin: 0 24px 20px; - font-size: 11px; - color: #64748b; - text-align: center; - font-weight: 500; - letter-spacing: 0.4px; -} - -.anomalous-update-guide-footer { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - padding: 14px 20px; - background: rgba(0, 0, 0, 0.28); - border-top: 1px solid rgba(255, 255, 255, 0.06); - gap: 10px; -} - -.anomalous-update-guide-footer .anomalous-btn-ghost { - padding: 7px 15px; - font-size: 12px; - border-radius: 6px; - color: #94a3b8; - background: transparent; - border: 1px solid rgba(255, 255, 255, 0.08); - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-update-guide-footer .anomalous-btn-ghost:hover:not(:disabled) { - color: #ffffff; - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.18); -} - -.anomalous-update-guide-footer .anomalous-btn-ghost:disabled { - opacity: 0.35; - cursor: not-allowed; -} - -.anomalous-update-guide-footer .anomalous-btn-primary { - padding: 7px 22px; - font-size: 12px; - font-weight: 600; - border-radius: 6px; - color: #0f172a; - background: #f1f5f9; - border: 1px solid #ffffff; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - cursor: pointer; - transition: all 0.15s ease; -} - -.anomalous-update-guide-footer .anomalous-btn-primary:hover { - background: #ffffff; - box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25); - transform: translateY(-1px); -} +@import url("./styles/00-foundation-models.css?v=20260918-structure-1"); +@import url("./styles/01-shell-tools.css?v=20260918-structure-1"); +@import url("./styles/02-notebooks.css?v=20260918-structure-1"); +@import url("./styles/03-gallery-recipes.css?v=20260918-structure-1"); +@import url("./styles/04-dialogs-materials.css?v=20260918-structure-1"); +@import url("./styles/05-recipe-studio-overrides.css?v=20260918-structure-1"); +@import url("./styles/06-material-workbench.css?v=20260918-structure-1"); +@import url("./styles/07-prompt-studio.css?v=20260918-structure-1"); +@import url("./styles/08-theme-gallery-overrides.css?v=20260918-structure-1"); +@import url("./styles/09-prompt-drawers.css?v=20260918-structure-1"); +@import url("./styles/10-model-sources.css?v=20260918-structure-1"); diff --git a/web/styles/00-foundation-models.css b/web/styles/00-foundation-models.css new file mode 100644 index 0000000..58779b9 --- /dev/null +++ b/web/styles/00-foundation-models.css @@ -0,0 +1,924 @@ +/* ========================================================================== + ANOMALOUS UI GLOBAL DESIGN SYSTEM (Design Tokens & Semantic Colors) + ========================================================================== */ +:root { + --c-amber: #d97706; + --c-amber-glow: rgba(217, 119, 6, 0.25); + --c-cyan: #06b6d4; + --c-cyan-glow: rgba(6, 182, 212, 0.25); + --c-purple: #8b5cf6; + --c-purple-glow: rgba(139, 92, 246, 0.25); + --c-silver: #9ca3af; + --c-silver-glow: rgba(156, 163, 175, 0.2); + --c-blue: #9ca3af; + --c-blue-glow: rgba(156, 163, 175, 0.2); + --c-crimson: #ef4444; + --c-crimson-glow: rgba(239, 68, 68, 0.25); + --c-wine: #4b5563; + --c-wine-glow: rgba(75, 85, 99, 0.2); + --c-emerald: #10b981; + --c-emerald-glow: rgba(16, 185, 129, 0.25); + + /* AMB Base Design System Tokens - Normal Mode (Neutral Dark Charcoal & Obsidian Studio) */ + --amb-bg-page: #131315; + --amb-bg-panel: #1a1a1d; + --amb-bg-card: #202024; + --amb-bg-card-hover: #28282d; + --amb-bg-input: #151517; + --amb-text-main: #f3f4f6; + --amb-text-muted: #9ca3af; + --amb-border: rgba(255, 255, 255, 0.08); + --amb-border-hover: rgba(255, 255, 255, 0.16); + --amb-btn-primary-bg: #e5e7eb; + --amb-btn-primary-hover: #ffffff; + --amb-btn-primary-text: #111827; + --amb-accent-gold: rgba(234, 179, 8, 0.65); + --amb-accent-line: rgba(229, 231, 235, 0.35); + --amb-accent: #f59e0b; + --amb-radius-control: 6px; + --amb-radius-card: 8px; + --amb-radius-panel: 10px; +} + +/* Abyssal Scarlet Gothic Theme Overrides */ +.theme-abyssal-scarlet, +html.theme-abyssal-scarlet, +#anomalous-container.theme-abyssal-scarlet { + --amb-bg-page: #161014; + --amb-bg-panel: #21171D; + --amb-bg-card: #2B1E26; + --amb-bg-card-hover: #362530; + --amb-bg-input: #1c1319; + --amb-text-main: #ECE4E8; + --amb-text-muted: #B9A7B0; + --amb-border: rgba(255, 245, 247, 0.10); + --amb-border-hover: rgba(220, 20, 60, 0.35); + --amb-btn-primary-bg: #87384E; + --amb-btn-primary-hover: #9c425b; + --amb-btn-primary-text: #FFF5F7; + --amb-accent-gold: #b38728; + --amb-accent-line: #dc143c; +} + +/* Skeleton Shimmer Loading Placeholder */ +.anomalous-skeleton-shimmer { + background: linear-gradient(90deg, #15171e 25%, #232733 50%, #15171e 75%) !important; + background-size: 200% 100% !important; + animation: anomalousSkeletonShimmer 1.8s infinite ease-in-out !important; +} + +@keyframes anomalousSkeletonShimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +#anomalous-trigger-btn { + --anomalous-trigger-size: 60px; + --anomalous-trigger-font-size: 28px; + --anomalous-trigger-pill-padding: 18px; + position: fixed; + bottom: 30px; + right: 30px; + width: var(--anomalous-trigger-size); + height: var(--anomalous-trigger-size); + border-radius: 50%; + background: rgba(18, 21, 30, 0.85); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + color: var(--fg-color, #f1f5f9); + border: 1px solid rgba(255, 255, 255, 0.16); + font-size: var(--anomalous-trigger-font-size); + cursor: pointer; + z-index: 2147483000 !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); + display: flex !important; + visibility: visible !important; + opacity: 1 !important; + align-items: center !important; + justify-content: center !important; + user-select: none; + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); + gap: 8px; + white-space: nowrap; +} + +#anomalous-trigger-btn .anomalous-trigger-icon { + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + font-size: var(--anomalous-trigger-font-size); + flex-shrink: 0; + transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; +} + +#anomalous-trigger-btn .anomalous-trigger-icon svg { + width: 1em; + height: 1em; + display: block; + stroke: currentColor; +} + +html.theme-abyssal-scarlet #anomalous-trigger-btn { + background: rgba(28, 10, 18, 0.88) !important; + border: 1px solid rgba(220, 20, 60, 0.45) !important; + color: #ffe4e6 !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(220, 20, 60, 0.2) !important; +} + +html.theme-abyssal-scarlet #anomalous-trigger-btn:hover { + border-color: #dc143c !important; + background: rgba(45, 12, 26, 0.95) !important; + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(220, 20, 60, 0.4) !important; + color: #ffffff !important; +} + +#anomalous-trigger-btn[data-size="small"] { + --anomalous-trigger-size: 44px; + --anomalous-trigger-font-size: 20px; + --anomalous-trigger-pill-padding: 13px; +} + +#anomalous-trigger-btn[data-size="large"] { + --anomalous-trigger-size: 76px; + --anomalous-trigger-font-size: 34px; + --anomalous-trigger-pill-padding: 22px; +} + +#anomalous-trigger-btn .anomalous-trigger-label { + display: none; + font-size: 14px; + font-weight: 600; + letter-spacing: 0.01em; +} + +#anomalous-trigger-btn[data-style="pill"] { + width: auto; + min-width: calc(var(--anomalous-trigger-size) * 1.8); + padding: 0 var(--anomalous-trigger-pill-padding); + border-radius: 999px; +} + +#anomalous-trigger-btn[data-style="pill"] .anomalous-trigger-label { + display: inline; +} + +#anomalous-trigger-btn:hover { + transform: scale(1.08) translateY(-4px); + background: rgba(25, 29, 42, 0.94); + border-color: rgba(100, 200, 255, 0.45); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px rgba(80, 190, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2); + color: #ffffff; +} + +#anomalous-trigger-btn:hover .anomalous-trigger-icon { + transform: rotate(12deg) scale(1.06); + filter: drop-shadow(0 0 6px rgba(100, 200, 255, 0.6)); +} + +html.theme-abyssal-scarlet #anomalous-trigger-btn:hover .anomalous-trigger-icon { + filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.7)) !important; +} + +#anomalous-trigger-btn.anomalous-trigger-hidden, +body.anomalous-prompt-studio-open #anomalous-trigger-btn, +body:has(.anomalous-prompt-studio-drawer) #anomalous-trigger-btn { + visibility: hidden !important; + opacity: 0 !important; + pointer-events: none !important; + display: none !important; + transform: scale(0.7); +} + +#anomalous-trigger-btn.anomalous-trigger-error { + border-color: #ff9f43; + box-shadow: none; +} + +.anomalous-topbar-entry { + display: none !important; +} + +html.anomalous-topbar-entry-enabled .anomalous-topbar-entry { + display: inline-flex !important; +} + +html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBrowser.FloatingTriggerSize"], +html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBrowser.FloatingTriggerStyle"] { + display: none !important; +} + +.anomalous-shortcut-setting { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.5rem; +} + +.anomalous-shortcut-current { + min-width: 8.5rem; + padding: 0.38rem 0.65rem; + border: 1px solid var(--border-default, #4b5563); + border-radius: 0.4rem; + background: var(--comfy-input-bg, #101113); + color: var(--fg-color, #f3f4f6); + font: 600 0.78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; + text-align: center; + white-space: nowrap; +} + +.anomalous-shortcut-customize { + padding: 0.42rem 0.72rem; + border: 1px solid var(--border-default, #4b5563); + border-radius: 0.4rem; + background: var(--comfy-input-bg, #24262b); + color: var(--fg-color, #f3f4f6); + cursor: pointer; +} + +.anomalous-shortcut-customize:hover:not(:disabled) { + border-color: var(--p-primary-color, #60a5fa); +} + +.anomalous-shortcut-customize:disabled { + cursor: wait; + opacity: 0.6; +} + +#anomalous-modal { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: 10000; + display: none; + filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.85)); +} + +#anomalous-modal.visible { + display: block; +} + +#anomalous-container { + width: 90%; + height: 90%; + background-color: var(--amb-bg-page, #131315); + border: 1px solid rgba(255, 255, 255, 0.09); + border-radius: 8px; + display: flex; + flex-direction: row; + overflow: hidden; + pointer-events: auto; + position: absolute; + left: 5%; + top: 5%; + container-type: inline-size; + font-size: calc(16px * var(--anomalous-scale, 1)); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7); +} + +#anomalous-container::before { + display: none; + content: ''; + position: absolute; + inset: 0; + background-image: + radial-gradient(ellipse 95% 85% at 50% 35%, rgba(19, 19, 21, 0.2) 0%, rgba(19, 19, 21, 0.75) 100%), + url('assets/archive_library_bg.webp'); + background-size: cover; + background-position: center 25%; + filter: grayscale(100%) brightness(0.55) contrast(1.15); + opacity: var(--anomalous-bg-opacity, 0.08); + transition: opacity 0.3s ease; + pointer-events: none; + z-index: 0; +} + +#anomalous-container.view-mode-aesthetic::before { + display: block; +} + +/* Only the main columns sit above the decorative background. Keep overlays + and resize handles in their own positioning and stacking layers. */ +#anomalous-container > #anomalous-sidebar-wrapper, +#anomalous-container > #anomalous-content { + position: relative; + z-index: 1; +} + +.anomalous-docked { + left: 0 !important; + top: 0 !important; + height: 100% !important; + width: 660px !important; + border-radius: 0 !important; + clip-path: none !important; + transition: all 0.3s ease; +} + +#anomalous-header { + height: 48px; + background: var(--comfy-menu-bg, #333); + display: flex; + align-items: center; + padding: 0 50px 0 20px; + border-bottom: 1px solid var(--border-color, #555); + cursor: move; + position: relative; +} + +#anomalous-settings-panel { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.85); + z-index: 9999; + align-items: center; + justify-content: center; +} + +#anomalous-settings-box { + background: var(--comfy-menu-bg, #2a2a2a); + border: 1px solid var(--border-color, #444); + padding: 30px; + border-radius: 12px; + display: flex; + flex-direction: column; + gap: 15px; + min-width: 300px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); +} + +.anomalous-resize-handle { + position: absolute; + bottom: 0; + right: 0; + width: 20px; + height: 20px; + cursor: se-resize; + z-index: 10000; +} + +.anomalous-resize-handle::after { + content: ''; + position: absolute; + bottom: 4px; + right: 4px; + width: 10px; + height: 10px; + border-right: 2px solid #666; + border-bottom: 2px solid #666; +} + +.anomalous-header-group { + display: flex; + align-items: center; + gap: 6px; +} + +#anomalous-header button { + margin-right: 0; + padding: 0 10px; + height: 28px; + box-sizing: border-box; + background: rgba(255, 255, 255, 0.04); + color: #c0c4cc; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 6px; + cursor: pointer; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + font-size: 11.5px; + font-weight: 500; + letter-spacing: 0.2px; + transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); +} + +#anomalous-header button:hover { + background: rgba(255, 255, 255, 0.09); + border-color: rgba(255, 255, 255, 0.2); + color: #ffffff; + transform: translateY(-1px); + box-shadow: none; +} + +#anomalous-header button.active { + background: rgba(255, 255, 255, 0.14) !important; + border-color: rgba(255, 255, 255, 0.28) !important; + color: #ffffff !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; +} + +#anomalous-close { + width: 28px; + height: 28px; + box-sizing: border-box; + font-size: 18px; + cursor: pointer; + color: var(--error-text, #ff5555); + line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border-radius: 6px; + border: 1px solid transparent; + transition: all 0.15s ease; +} + +#anomalous-close:hover { + color: #ff6b6b; + background: rgba(255, 85, 85, 0.12); + border-color: rgba(255, 85, 85, 0.25); + transform: scale(1.05); +} + +#anomalous-grid { + flex: 1; + padding: 20px; + overflow-y: auto; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 25px; + row-gap: 40px; + align-content: flex-start; + background: transparent; +} + +#anomalous-grid::-webkit-scrollbar { + width: 8px; +} + +#anomalous-grid::-webkit-scrollbar-track { + background: rgba(20, 20, 26, 0.8); +} + +#anomalous-grid::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.16); + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +#anomalous-grid::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.3); + box-shadow: 0 0 6px rgba(255, 255, 255, 0.18); +} + +.anomalous-card { + position: relative; + background: var(--amb-bg-card, #202024); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px; + overflow: hidden; + display: flex; + flex-direction: column; + height: 340px; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); + transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease; + will-change: transform, box-shadow; + cursor: pointer; +} + +.anomalous-card:hover { + transform: translateY(-2px); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.theme-abyssal-scarlet .anomalous-card { + border-color: rgba(220, 20, 60, 0.22); + background: linear-gradient(180deg, rgba(25, 12, 20, 0.9) 0%, rgba(14, 6, 14, 0.98) 100%); + box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6); +} + +.theme-abyssal-scarlet .anomalous-card:hover { + border-color: #dc143c; + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.9), inset 0 0 12px rgba(0, 0, 0, 0.7); +} + +.anomalous-card img, +.anomalous-card video { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; +} + +.anomalous-card:hover img, +.anomalous-card:hover video { + transform: scale(1.02); +} + +#anomalous-container.anomalous-sidebar-closed #anomalous-grid { + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 16px; + row-gap: 24px; +} + +#anomalous-container.anomalous-sidebar-closed .anomalous-card { + height: 320px; +} + +/* ========================================================================== + Display Modes: Standard, Compact, Aesthetic + ========================================================================== */ + +/* 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: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, +#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:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-title { + font-size: 0.82em !important; + line-height: 1.25 !important; + margin-bottom: 2px !important; +} + +#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:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-badge { + top: 6px !important; + left: 6px !important; + max-width: 55px !important; + font-size: 0.65em !important; + padding: 1px 4px !important; + border-radius: 3px !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +#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; + 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-edit, +#anomalous-container:not(.view-mode-standard):not(.view-mode-aesthetic) .anomalous-card-action-btn.action-edit { + right: 32px !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: 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) */ +#anomalous-container.view-mode-aesthetic #anomalous-grid { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 24px; + row-gap: 36px; + padding: 24px; +} + +#anomalous-container.view-mode-aesthetic .anomalous-card { + height: 360px; + border-radius: 8px; + background: rgba(28, 28, 32, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.09); +} + +#anomalous-container.view-mode-aesthetic .anomalous-card:hover { + background: rgba(34, 34, 38, 0.92); + border-color: rgba(255, 255, 255, 0.22); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65); +} + +/* Model Card Labels: Always visible at rest, crisp non-blurry gradient mask */ +.anomalous-card-labels { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 26px 10px 8px; + background: linear-gradient(to top, rgba(16, 16, 18, 0.96) 0%, rgba(16, 16, 18, 0.7) 65%, transparent 100%); + display: flex; + flex-direction: column; + gap: 3px; + text-align: left; + z-index: 5; + pointer-events: none; + box-sizing: border-box; + transition: background 0.2s ease; +} + +.anomalous-card:hover .anomalous-card-labels { + background: linear-gradient(to top, rgba(16, 16, 18, 0.98) 0%, rgba(16, 16, 18, 0.82) 75%, transparent 100%); +} + +.theme-abyssal-scarlet .anomalous-card-labels { + background: linear-gradient(to top, rgba(18, 5, 14, 0.97) 0%, rgba(18, 5, 14, 0.72) 65%, transparent 100%); +} + +.theme-abyssal-scarlet .anomalous-card:hover .anomalous-card-labels { + background: linear-gradient(to top, rgba(20, 6, 16, 0.99) 0%, rgba(20, 6, 16, 0.85) 75%, transparent 100%); +} + +.anomalous-card-title { + font-size: 0.88rem; + font-weight: 600; + color: #f3f4f6; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 1.3; +} + +.anomalous-card-filename { + font-size: 0.72rem; + color: #9ca3af; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + opacity: 0.8; +} + +/* Card Base Model Badges - Normal Mode (Neutral & Clean) */ +.anomalous-card-badge { + position: absolute; + top: 8px; + left: 8px; + padding: 3px 8px; + border-radius: 5px; + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.4px; + background: rgba(18, 20, 26, 0.85); + color: #cbd5e1; + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + pointer-events: none; + z-index: 10; + text-transform: uppercase; + transition: all 0.25s ease; +} + +.anomalous-card:hover .anomalous-card-badge { + border-color: rgba(255, 255, 255, 0.3); + color: #ffffff; +} + +.anomalous-card-badge.badge-gold { + color: #e2e8f0; + background: rgba(30, 32, 40, 0.9); + border-color: rgba(255, 255, 255, 0.2); +} + +.anomalous-card-badge.badge-amber { + color: #cbd5e1; + background: rgba(30, 32, 40, 0.9); + border-color: rgba(255, 255, 255, 0.18); +} + +.anomalous-card-badge.badge-flux { + color: #cbd5e1; + background: rgba(30, 32, 40, 0.9); + border-color: rgba(255, 255, 255, 0.18); +} + +.anomalous-card-badge.badge-rose { + color: #cbd5e1; + background: rgba(30, 32, 40, 0.9); + border-color: rgba(255, 255, 255, 0.18); +} + +/* Card Action Buttons - Normal Mode (Neutral Glass) */ +.anomalous-card-action-btn { + position: absolute; + top: 8px; + right: 8px; + width: 28px; + height: 28px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + background: rgba(20, 22, 28, 0.85); + color: #e2e8f0; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 6px; + cursor: pointer; + font-size: 13px; + opacity: 0; + transform: scale(0.88); + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + z-index: 20; + backdrop-filter: blur(8px); + pointer-events: none; +} + +.anomalous-card-action-btn.action-apply { + right: 8px; +} + +.anomalous-card-action-btn.action-edit { + right: 42px; +} + +.anomalous-card-action-btn.action-scan { + right: 76px; +} + +.anomalous-card:hover .anomalous-card-action-btn { + opacity: 1; + transform: scale(1); + pointer-events: auto; +} + +.anomalous-card-action-btn:hover { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.35); + color: #ffffff; + box-shadow: none; +} + +.anomalous-scan-progress { + position: fixed; + right: 24px; + bottom: 104px; + z-index: 1000000; + width: min(380px, calc(100vw - 32px)); + box-sizing: border-box; + padding: 16px; + border: 1px solid rgba(138, 180, 248, 0.35); + border-radius: 12px; + background: rgba(24, 24, 27, 0.96); + color: #f1f3f4; + box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42); + backdrop-filter: blur(12px); +} + +.anomalous-scan-progress-title, +.anomalous-scan-progress-detail, +.anomalous-scan-progress-item { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-scan-progress-title { + margin-bottom: 10px; + font-size: 14px; +} + +.anomalous-scan-progress-track { + position: relative; + height: 6px; + overflow: hidden; + border-radius: 999px; + background: rgba(255, 255, 255, 0.12); +} + +.anomalous-scan-progress-fill { + height: 100%; + border-radius: inherit; + background: #10b981; + transition: width 180ms ease; +} + +.anomalous-scan-progress-fill.is-indeterminate { + animation: anomalous-scan-progress-slide 1.2s ease-in-out infinite; +} + +.anomalous-scan-progress-detail { + margin-top: 10px; + color: #d7dde8; + font-size: 12px; +} + +.anomalous-scan-progress-item { + margin-top: 4px; + color: #9aa0a6; + font-size: 11px; +} + +.anomalous-scan-progress.is-complete .anomalous-scan-progress-fill { + background: #81c995; +} + +.anomalous-scan-progress.is-error { + border-color: rgba(242, 139, 130, 0.5); +} + +.anomalous-scan-progress.is-error .anomalous-scan-progress-fill { + background: #f28b82; +} + +@keyframes anomalous-scan-progress-slide { + from { transform: translateX(-120%); } + to { transform: translateX(340%); } +} + +.anomalous-card-title { + color: var(--fg-color, #fff); + font-size: 0.9em; + font-weight: 650; + line-height: 1.25; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + overflow-wrap: anywhere; +} + +.anomalous-card-filename { + color: rgba(255, 255, 255, 0.55); + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + font-size: 0.72em; + line-height: 1.25; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#anomalous-content { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + background: transparent; + position: relative; +} + +#anomalous-content::before { + display: none; +} + +#anomalous-content > * { + position: relative; + z-index: 1; +} + +#anomalous-container { + flex-direction: row; +} + diff --git a/web/styles/01-shell-tools.css b/web/styles/01-shell-tools.css new file mode 100644 index 0000000..9d2b563 --- /dev/null +++ b/web/styles/01-shell-tools.css @@ -0,0 +1,635 @@ +/* Island UI: Floating Sidebar Navigation Console (Neutral Charcoal Frosted Glass) */ +#anomalous-sidebar-wrapper { + width: 250px; + margin: 8px 0 8px 8px; + height: calc(100% - 16px); + background: rgba(22, 22, 25, 0.85); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + position: relative; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 10px; + display: flex; + flex-direction: column; + transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); + overflow: visible; + box-sizing: border-box; +} + +#anomalous-doctor-panel, +#anomalous-assistant-panel { + background: var(--amb-bg-page, #131315) !important; + position: relative; + z-index: 2; +} + +.anomalous-brand-badge { + background: rgba(255, 255, 255, 0.06) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + color: #e5e7eb !important; + border-radius: 6px !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; + backdrop-filter: blur(8px) !important; + letter-spacing: 1px !important; +} + +#anomalous-sidebar input[type="text"] { + background: rgba(255, 255, 255, 0.05) !important; + border: 1px solid rgba(255, 255, 255, 0.09) !important; + backdrop-filter: blur(8px) !important; + color: #f3f4f6 !important; + transition: all 0.2s ease !important; +} + +#anomalous-sidebar input[type="text"]:focus { + border-color: rgba(255, 255, 255, 0.3) !important; + background: rgba(255, 255, 255, 0.08) !important; + box-shadow: 0 0 8px rgba(255, 255, 255, 0.06) !important; +} + +#anomalous-sidebar-actions { + background: rgba(20, 20, 23, 0.6) !important; + backdrop-filter: blur(12px) !important; + border-top: 1px solid rgba(255, 255, 255, 0.06) !important; +} + +#anomalous-sidebar-wrapper::after { + display: none; +} + +.anomalous-sidebar-closed #anomalous-sidebar-wrapper { + width: 58px; +} + +.anomalous-sidebar-closed #anomalous-sidebar-wrapper>div:first-child div { + display: none; + /* Hides "Anomalous Browser" text */ +} + +.anomalous-sidebar-closed #anomalous-sidebar { + opacity: 0; + pointer-events: none; + overflow: hidden; +} + +#anomalous-settings-hub-modal { + position: absolute; + bottom: 16px; + left: 266px; + width: 270px; + max-height: calc(100% - 32px); + overflow-y: auto; + box-sizing: border-box; + background: rgba(24, 24, 28, 0.98); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + padding: 12px; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); + z-index: 999999 !important; + transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +#anomalous-settings-hub-modal button { + display: flex !important; + align-items: center !important; + width: 100% !important; + text-align: left !important; + box-sizing: border-box !important; +} + +#anomalous-settings-hub-modal button svg { + flex-shrink: 0 !important; +} + +.anomalous-sidebar-closed #anomalous-settings-hub-modal { + left: 72px !important; +} + +@keyframes anomalous-popover-in { + 0% { + opacity: 0; + transform: translateY(6px) scale(0.96); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +#anomalous-toolbox-modal { + position: absolute; + bottom: 58px; + left: 8px; + width: 216px; + min-height: auto; + 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.15); + border-radius: 9px; + padding: 7px 7px 6px; + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); + z-index: 999999 !important; + display: none; + flex-direction: column; + gap: 3px; + overflow: visible !important; +} + +#anomalous-toolbox-modal[style*="display: flex"] { + animation: anomalous-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards; + transform-origin: 16px bottom; +} + +#anomalous-toolbox-modal::after { + content: ''; + position: absolute; + bottom: -5px; + left: 16px; + width: 8px; + height: 8px; + background: rgba(22, 22, 26, 0.98); + border-right: 1px solid rgba(255, 255, 255, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); + transform: translateX(-50%) rotate(45deg); + pointer-events: none; +} + +#anomalous-toolbox-modal::-webkit-scrollbar { + display: none !important; + width: 0 !important; + height: 0 !important; +} + +.anomalous-sidebar-closed #anomalous-toolbox-modal { + left: 64px !important; + bottom: 12px !important; +} + +.anomalous-sidebar-closed #anomalous-toolbox-modal::after { + display: none !important; +} + +.anomalous-toolbox-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 44px); + grid-auto-rows: 44px; + gap: 4px; + margin: 3px 0 1px; + align-content: start; + flex: 1; +} + +.anomalous-toolbox-tile { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 5px 2px 4px; + min-height: 40px; + box-sizing: border-box; + background: transparent; + border: 1px solid transparent; + border-radius: 6px; + cursor: pointer; + position: relative; + user-select: none; + transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); +} + +.anomalous-toolbox-tile:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.12); + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); +} + +.anomalous-toolbox-tile:active { + transform: scale(0.96); + background: rgba(255, 255, 255, 0.12); +} + +.anomalous-toolbox-tile-icon { + font-size: 13.5px; + line-height: 1.1; + margin-bottom: 2px; + display: flex; + align-items: center; + justify-content: center; + user-select: none; +} + +.anomalous-toolbox-tile-label { + font-size: 9.5px; + font-weight: 500; + color: #cbd5e1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + line-height: 1.15; +} + +.anomalous-toolbox-tile-dot { + position: absolute; + top: 3px; + right: 3px; + width: 4px; + height: 4px; + border-radius: 50%; + background: #f59e0b; + box-shadow: 0 0 4px rgba(245, 158, 11, 0.6); +} + +.anomalous-toolbox-tile-dot.is-ready { + background: #10b981; + box-shadow: 0 0 5px rgba(16, 185, 129, 0.75); +} + +/* Suppress all tooltips and action labels on clicked/active elements so they never block vision or interaction */ +button:active::before, +button:active::after, +.anomalous-tooltip-target:active::before, +.anomalous-tooltip-target:active::after, +.anomalous-toolbox-tile:active::before, +.anomalous-toolbox-tile:active::after, +#anomalous-sidebar-actions button:active::before, +#anomalous-sidebar-actions button:active::after, +#anomalous-sidebar-actions button:active .anomalous-action-label, +#anomalous-sidebar-actions button:focus:not(:focus-visible) .anomalous-action-label { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; +} + +#anomalous-sidebar-actions button:active > svg, +#anomalous-sidebar-actions button:focus:not(:focus-visible) > svg { + opacity: 1 !important; +} + +#anomalous-sidebar-actions button.is-active { + color: #38bdf8 !important; + background: rgba(56, 189, 248, 0.14) !important; + border: 1px solid rgba(56, 189, 248, 0.35) !important; +} + +#anomalous-sidebar-actions button.is-active .anomalous-action-label { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; +} + +#anomalous-sidebar-actions button.is-active > svg { + opacity: 1 !important; + color: #38bdf8 !important; +} + +/* When toolbox or settings hub modal is open, completely suppress floating tooltip bubble */ +body:has(#anomalous-toolbox-modal[style*="display: flex"]) #anomalous-sidebar-tooltip-bubble, +body:has(#anomalous-settings-hub-modal[style*="display: flex"]) #anomalous-sidebar-tooltip-bubble { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; +} + +.anomalous-sidebar-closed #anomalous-sidebar-actions { + flex-direction: column !important; +} + +#anomalous-sidebar { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + transition: opacity 0.2s; +} + +#anomalous-settings { + border-top: 1px solid var(--border-color, #444); + background: var(--bg-color, #111); +} + +.anomalous-lang-btn { + width: 100% !important; + border: 2px solid #555 !important; + padding: 12px !important; + font-weight: bold; + border-radius: 4px !important; + background: #1a1a1a !important; + cursor: pointer; + color: #fff; + margin-bottom: 15px; +} + +.anomalous-type-header { + padding: 10px 15px; + background: rgba(255, 255, 255, 0.03); + color: var(--fg-color, #fff); + font-weight: bold; + font-size: 0.9em; + border-top: 1px solid rgba(255, 255, 255, 0.06); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-folder-item { + padding: 8px 15px; + color: var(--fg-color, #cbd5e1); + cursor: pointer; + font-size: 0.9em; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + border-left: 2px solid transparent; +} + +.anomalous-folder-item:hover { + background: rgba(255, 255, 255, 0.06); + color: #fff; +} + +/* Clean Neutral Active Indicator on Selected Menu (Normal Mode) */ +.anomalous-folder-item.active { + background: rgba(255, 255, 255, 0.08); + color: #fff; + font-weight: 600; + border-left: 2px solid #e5e7eb; + box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.03); + border-radius: 0 6px 6px 0; +} + +.anomalous-folder-item.active .anomalous-folder-name { + color: #fff !important; + text-shadow: none; +} + +.theme-abyssal-scarlet .anomalous-folder-item.active { + background: rgba(55, 12, 22, 0.85); + border-left: 2px solid #dc143c; + border-left-color: var(--c-crimson, #dc143c); + box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.8); +} + +.theme-abyssal-scarlet .anomalous-folder-item.active .anomalous-folder-name { + color: #e0d8db; + text-shadow: none; +} + +/* Sidebar Icons & Actions - Normal Mode (Neutral & Clean) */ +.anomalous-folder-item svg, +#anomalous-sidebar h3 svg { + color: #94a3b8 !important; + filter: none; +} + +.theme-abyssal-scarlet .anomalous-folder-item svg, +.theme-abyssal-scarlet #anomalous-sidebar h3 svg { + color: #d4af37 !important; + filter: none; +} + +#anomalous-scan-btn, +#anomalous-materials-btn, +#anomalous-doctor-btn, +#anomalous-assistant-btn, +#anomalous-global-settings-btn { + color: #94a3b8 !important; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +#anomalous-scan-btn:hover, +#anomalous-materials-btn:hover, +#anomalous-doctor-btn:hover, +#anomalous-assistant-btn:hover, +#anomalous-global-settings-btn:hover { + color: #f8fafc !important; + filter: none !important; + background: rgba(255, 255, 255, 0.08) !important; +} + +.theme-abyssal-scarlet #anomalous-scan-btn:hover { + color: #ff4d6d !important; + filter: none !important; + background: rgba(220, 20, 60, 0.12) !important; +} + +.theme-abyssal-scarlet #anomalous-materials-btn { + color: var(--c-amber, #d97706) !important; +} + +.theme-abyssal-scarlet #anomalous-materials-btn:hover { + color: #fbbf24 !important; + filter: none !important; + background: rgba(217, 119, 6, 0.12) !important; +} + +.theme-abyssal-scarlet #anomalous-doctor-btn { + color: var(--c-crimson, #dc143c) !important; +} + +.theme-abyssal-scarlet #anomalous-doctor-btn:hover { + color: #ff4d6d !important; + filter: none !important; + background: rgba(220, 20, 60, 0.12) !important; +} + +.theme-abyssal-scarlet #anomalous-assistant-btn { + color: var(--c-purple, #8b5cf6) !important; +} + +.theme-abyssal-scarlet #anomalous-assistant-btn:hover { + color: #c4b5fd !important; + filter: none !important; + background: rgba(139, 92, 246, 0.14) !important; +} + +.theme-abyssal-scarlet #anomalous-global-settings-btn { + color: var(--c-silver, #94a3b8) !important; +} + +.theme-abyssal-scarlet #anomalous-global-settings-btn:hover { + color: #f8fafc !important; + filter: none !important; + background: rgba(255, 255, 255, 0.08) !important; +} + + +#anomalous-detail { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + background: var(--bg-color, #222); +} + +.anomalous-split-container { + flex: 1; + display: flex; + flex-direction: row; + overflow: hidden; +} + +.anomalous-split-left { + width: 40%; + display: flex; + align-items: center; + justify-content: center; + background: #000; + overflow: hidden; +} + +.anomalous-resizer { + width: 5px; + background: var(--border-color, #444); + cursor: col-resize; + transition: background 0.2s; +} + +.anomalous-resizer:hover { + background: rgba(255, 255, 255, 0.35); +} + +.theme-abyssal-scarlet .anomalous-resizer:hover { + background: #dc143c; +} + +.anomalous-split-right { + width: 60%; + background: var(--bg-color, #222); + overflow: auto; +} + +.anomalous-card { + cursor: pointer; +} + +.anomalous-folder-toggle { + cursor: pointer; + user-select: none; +} + + +#anomalous-api-key { + background: #333; + border: 1px solid #555; + color: #fff; + padding: 8px; + border-radius: 4px; + width: 150px; + margin-right: 15px; +} + +#anomalous-api-key::placeholder { + color: #999; +} + +@container (max-width: 750px) { + .anomalous-split-left, + .anomalous-resizer { + display: none !important; + } + + .anomalous-split-right { + width: 100% !important; + } + + .anomalous-nb-sidebar { + width: 80px !important; + min-width: 80px !important; + } + + .anomalous-nb-sidebar .anomalous-nb-item { + font-size: 0.8em; + padding: 8px 4px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + } + + .anomalous-nb-create-text { + display: none; + } +} + +/* English Layout Specific Scaling */ +.anomalous-lang-en { + font-size: 0.9em; +} + +.anomalous-lang-en .anomalous-card-title { + font-size: 0.85em; +} + +.anomalous-lang-en #anomalous-title { + font-size: 1.1em; +} + +/* Compatible Models Section */ +.anomalous-compatible-section { + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid var(--border-color, #444); +} + +.anomalous-compatible-title { + color: var(--fg-color, #fff); + font-size: 1.1em; + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 8px; +} + +.anomalous-compatible-list { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.anomalous-compatible-item { + background: var(--comfy-menu-bg, #333); + border: 1px solid var(--border-color, #555); + border-radius: 6px; + padding: 6px 10px; + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + transition: all 0.2s; + max-width: 200px; +} + +.anomalous-compatible-item:hover { + border-color: rgba(255, 255, 255, 0.3); + background: var(--bg-color, #444); + transform: translateY(-2px); +} + +.theme-abyssal-scarlet .anomalous-compatible-item:hover { + border-color: #dc143c; +} + +.anomalous-compatible-item img, +.anomalous-compatible-item video { + width: 30px; + height: 30px; + object-fit: cover; + border-radius: 4px; +} + +.anomalous-compatible-item-name { + color: var(--fg-color, #fff); + font-size: 0.85em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; +} + + diff --git a/web/styles/02-notebooks.css b/web/styles/02-notebooks.css new file mode 100644 index 0000000..f901f08 --- /dev/null +++ b/web/styles/02-notebooks.css @@ -0,0 +1,583 @@ +/* Notebook UI */ +.anomalous-nb-modal { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--amb-bg-page, #131315); + z-index: 10001; + display: flex; + align-items: center; + justify-content: center; +} + +.anomalous-nb-container { + width: 95%; + height: 95%; + background: var(--bg-color, #222); + border: 1px solid var(--border-color, #444); + border-radius: 12px; + display: flex; + flex-direction: column; + overflow: hidden; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); +} + +.anomalous-prompt-studio-container { + padding: 0; + position: relative; + background: var(--amb-bg-page, #141519); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85); +} + +.anomalous-nb-header { + height: 50px; + background: var(--comfy-menu-bg, #333); + border-bottom: 1px solid #444; + display: flex; + align-items: center; + padding: 0 20px; + justify-content: space-between; + color: #fff; +} + +.anomalous-nb-close { + font-size: 2em; + cursor: pointer; + color: #ff4444; +} + +.anomalous-nb-body { + flex: 1; + display: flex; + overflow: hidden; + container-type: inline-size; +} + +.anomalous-nb-sidebar { + width: 250px; + background: #111; + border-right: 1px solid #444; + display: flex; + flex-direction: column; + transition: width 0.3s; +} + +.anomalous-nb-create-row { + min-width: 0; + box-sizing: border-box; + align-items: center; +} + +.anomalous-nb-create-input { + min-width: 0; + width: 0; + box-sizing: border-box; +} + +.anomalous-nb-create-row > button { + flex: 0 0 auto; + min-width: 0; +} + +@container (max-width: 600px) { + .anomalous-nb-sidebar { + width: 140px; + } + + .anomalous-nb-create-text { + display: none; + } +} + +.anomalous-nb-list { + flex: 1; + overflow-y: auto; + padding: 10px; +} + +.anomalous-nb-item { + padding: 10px; + color: #ccc; + cursor: pointer; + border-radius: 4px; + margin-bottom: 5px; + background: #222; + display: flex; + align-items: center; + white-space: nowrap; + overflow: hidden; + font-size: 1.1em; +} + +.anomalous-nb-item-icon { + flex-shrink: 0; +} + +.anomalous-nb-item-text { + flex: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +.anomalous-nb-item:hover { + background: #333; +} + +.anomalous-nb-item.active { + background: rgba(255, 255, 255, 0.12); + color: #fff; + font-weight: bold; +} + +.theme-abyssal-scarlet .anomalous-nb-item.active { + background: #dc143c; +} + +.anomalous-nb-editor { + flex: 1; + background: #222; + overflow-y: auto; + padding: 20px; + color: #eee; +} + +.anomalous-nb-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.anomalous-nb-prompt-toolbar { + display: flex; + gap: 10px; + margin-bottom: 10px; + align-items: center; + flex-wrap: wrap; +} + +#anomalous-container.anomalous-docked .anomalous-nb-prompt-toolbar select { + flex: 1 1 100%; +} + +.anomalous-btn-primary { + position: relative; + background: var(--amb-btn-primary-bg, #D7D9E0); + color: var(--amb-btn-primary-text, #15171C); + border: 1px solid rgba(255, 255, 255, 0.2); + height: 32px; + padding: 0 14px; + border-radius: var(--amb-radius-control, 6px); + cursor: pointer; + font-size: 0.82rem; + font-weight: 600; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + box-shadow: none; + transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease; + overflow: hidden; + user-select: none; + box-sizing: border-box; +} + +.anomalous-btn-primary:hover { + background: var(--amb-btn-primary-hover, #E5E7EB); + border-color: rgba(255, 255, 255, 0.4); + box-shadow: none; +} + +.anomalous-btn-primary:active { + transform: translateY(1px); + filter: brightness(0.95); +} + +.anomalous-btn-danger { + position: relative; + background: #7f1d1d; + color: #fecaca; + border: 1px solid rgba(239, 68, 68, 0.35); + height: 32px; + padding: 0 14px; + border-radius: var(--amb-radius-control, 6px); + cursor: pointer; + font-size: 0.82rem; + font-weight: 600; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + box-shadow: none; + transition: background-color 0.16s ease, border-color 0.16s ease; + user-select: none; + box-sizing: border-box; +} + +.anomalous-btn-danger:hover { + background: #991b1b; + border-color: rgba(239, 68, 68, 0.6); + color: #ffffff; +} + overflow: hidden; +} + +.anomalous-btn-danger:hover { + background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%); + border-color: #f87171; + box-shadow: none; + transform: translateY(-1px); +} + +.anomalous-btn-success { + position: relative; + background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); + color: white; + border: 1px solid rgba(134, 239, 172, 0.4); + padding: 6px 14px; + border-radius: 3px 11px 3px 11px; + cursor: pointer; + font-size: 0.82rem; + font-weight: 600; + margin-left: 5px; + box-shadow: none; + transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); + overflow: hidden; +} + +.anomalous-btn-success:hover { + background: linear-gradient(135deg, #15803d 0%, #166534 100%); + border-color: #4ade80; + box-shadow: none; + transform: translateY(-1px); +} + +.anomalous-nb-section { + background: #2a2a2a; + border: 1px solid #444; + border-radius: 8px; + padding: 15px; + margin-bottom: 20px; +} + +.anomalous-nb-row { + margin-bottom: 10px; +} + +.anomalous-nb-select { + background: #111; + color: #fff; + padding: 6px; + border: 1px solid #555; + border-radius: 4px; +} + +.anomalous-nb-gallery { + display: flex; + gap: 10px; + overflow-x: auto; + padding: 10px 0; +} + +.anomalous-nb-gallery-wrap { + display: flex; + gap: 10px; + flex-wrap: wrap; + padding: 10px 0; + max-height: 240px; + overflow-y: auto; + content-visibility: auto; + contain-intrinsic-size: 70px; +} + +.anomalous-nb-minicheck, +.anomalous-nb-minilora { + display: flex; + align-items: center; + gap: 12px; + padding: 8px 12px 8px 8px; + background: #222630; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px; + cursor: pointer; + flex: 1 1 220px; + max-width: 320px; + transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); + content-visibility: auto; + contain-intrinsic-size: 70px; +} + +.anomalous-nb-minicheck:hover, +.anomalous-nb-minilora:hover { + border-color: rgba(255, 255, 255, 0.2); + background: #2a3140; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); + transition-delay: 0.04s; +} + +.anomalous-nb-minicheck.selected, +.anomalous-nb-minilora.selected { + border-color: #8b5cf6; + background: rgba(139, 92, 246, 0.15); + box-shadow: 0 0 12px rgba(139, 92, 246, 0.25); +} + +.anomalous-nb-minicheck img, +.anomalous-nb-minicheck video, +.anomalous-nb-minilora img, +.anomalous-nb-minilora video { + width: 52px; + height: 52px; + aspect-ratio: 1 / 1; + object-fit: cover; + border-radius: 6px; + flex-shrink: 0; +} + +.anomalous-nb-minicheck-name, +.anomalous-nb-minilora-name { + color: #eee; + font-size: 0.95em; + line-height: 1.3; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + text-align: left; +} + +.anomalous-nb-minicheck.selected .anomalous-nb-minicheck-name, +.anomalous-nb-minilora.selected .anomalous-nb-minilora-name { + color: #8b5cf6; + font-weight: bold; +} + +.anomalous-nb-textarea { + width: 100%; + height: 60px; + background: #111; + color: #fff; + border: 1px solid #555; + border-radius: 4px; + padding: 8px; + margin-top: 10px; + resize: vertical; + box-sizing: border-box; +} + +/* 提示词双语对照面板 (CSS Grid 双栏排版) */ +.anomalous-nb-dual-pane { + display: flex; + flex-direction: column; + width: 100%; + background: rgba(22, 26, 35, 0.95); + padding: 10px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.08); + box-sizing: border-box; + gap: 6px; +} + +.anomalous-nb-tag-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + width: 100%; + align-items: stretch; +} + +.anomalous-nb-gallery-box { + background: #1e1e1e; + border: 1px solid #444; + border-radius: 8px; + padding: 12px; + margin-bottom: 15px; +} + +/* Notebook Model Fold & Sections Enhancement */ +.anomalous-nb-models-fold { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 10px; + padding: 0; + margin-bottom: 16px; + overflow: hidden; + transition: border-color 0.2s ease; +} + +.anomalous-nb-models-fold[open] { + border-color: rgba(139, 92, 246, 0.35); + background: rgba(255, 255, 255, 0.03); +} + +.anomalous-nb-fold-summary { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: rgba(255, 255, 255, 0.04); + cursor: pointer; + font-size: 0.92rem; + font-weight: 600; + color: #f1f5f9; + user-select: none; + list-style: none; + transition: background 0.18s; +} + +.anomalous-nb-fold-summary::-webkit-details-marker { + display: none; +} + +.anomalous-nb-fold-summary:hover { + background: rgba(255, 255, 255, 0.07); +} + +.anomalous-nb-models-badge { + font-size: 0.76rem; + font-weight: 500; + color: #94a3b8; + background: rgba(255, 255, 255, 0.06); + padding: 2px 8px; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-nb-fold-arrow { + color: #94a3b8; + font-size: 0.88rem; +} + +.anomalous-nb-models-fold .anomalous-nb-section { + background: transparent; + border: none; + border-top: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 0; + padding: 16px; + margin-bottom: 0; +} + +.anomalous-nb-prompt-section { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 10px; + padding: 16px; + margin-bottom: 16px; +} + +.anomalous-nb-capture-fold { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 10px; + padding: 0; + margin-bottom: 16px; + overflow: hidden; +} + +.anomalous-nb-capture-fold > summary { + padding: 11px 16px; + cursor: pointer; + font-size: 0.88rem; + font-weight: 500; + color: #94a3b8; + list-style: none; + transition: background 0.18s, color 0.18s; +} + +.anomalous-nb-capture-fold > summary:hover { + background: rgba(255, 255, 255, 0.05); + color: #f1f5f9; +} + +.anomalous-nb-capture-content { + padding: 12px 16px; + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-nb-tools-fold { + margin-top: 12px; + padding: 8px 12px; + border-radius: 6px; + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.anomalous-nb-tools-fold > summary { + font-size: 0.82rem; + color: #94a3b8; + cursor: pointer; +} + +.anomalous-nb-tools-fold > summary:hover { + color: #cbd5e1; +} + +.anomalous-nb-selected-badge { + font-size: 0.78rem; + padding: 2px 8px; + border-radius: 4px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-nb-visual-tag { + background: #222630; + color: #e2e8f0; + padding: 6px 10px; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.08); + cursor: pointer; + transition: all 0.18s ease; + min-height: 34px; + display: flex; + align-items: center; + word-break: break-word; + font-size: 0.84rem; + line-height: 1.4; +} + +.anomalous-nb-visual-tag.hover { + background: #2a3140; + border-color: rgba(139, 92, 246, 0.5); + color: #ffffff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +/* 复制按钮默认隐藏，悬停才浮现 */ +.anomalous-nb-copy-btn { + opacity: 0; + visibility: hidden; + transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; + padding-left: 8px; + flex-shrink: 0; + user-select: none; + font-size: 0.78rem; +} + +.anomalous-nb-visual-tag:hover .anomalous-nb-copy-btn { + opacity: 0.85; + visibility: visible; +} + +.anomalous-nb-copy-btn:hover { + transform: scale(1.2); + opacity: 1; +} + +.anomalous-nb-tag-edit { + background: #111827; + color: #f1f5f9; + border: 1px solid rgba(139, 92, 246, 0.6); + border-radius: 4px; + padding: 6px; + width: 100%; + font-size: 0.84rem; + box-sizing: border-box; + outline: none; +} + diff --git a/web/styles/03-gallery-recipes.css b/web/styles/03-gallery-recipes.css new file mode 100644 index 0000000..7adc4ba --- /dev/null +++ b/web/styles/03-gallery-recipes.css @@ -0,0 +1,2749 @@ +/* Gallery Styles */ +#anomalous-gallery-panel { + flex: 1; + display: none; + flex-direction: column; + overflow: hidden; + background: var(--bg-color, #222); +} + +.anomalous-gallery-grid { + flex: 1; + padding: 20px; + overflow-y: auto; + display: grid; + /* Fit ~4 items per row on expanded screens */ + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 15px; + align-content: flex-start; +} + +#anomalous-container.anomalous-docked .anomalous-gallery-grid { + grid-template-columns: repeat(2, 1fr); + gap: 8px; + padding: 10px; +} + +#anomalous-container.anomalous-docked .anomalous-gallery-card { + height: 180px; +} + +.anomalous-gallery-card { + position: relative; + background: #111; + border: 1px solid #444; + border-radius: 8px; + overflow: hidden; + cursor: pointer; + /* Damped transition to prevent strobe effect */ + transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); + height: 250px; + display: flex; + flex-direction: column; +} + +.anomalous-gallery-card:hover { + transform: translateY(-3px); + border-color: rgba(255, 255, 255, 0.25); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); + transition-delay: 0.08s; +} + +.theme-abyssal-scarlet .anomalous-gallery-card:hover { + border-color: #dc143c; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), inset 0 0 8px rgba(0, 0, 0, 0.7); +} + +.anomalous-gallery-card img { + width: 100%; + height: 100%; + object-fit: contain; + background: #000; +} + +.anomalous-gallery-delete { + position: absolute; + top: 8px; + right: 8px; + background: rgba(220, 53, 69, 0.85); + color: white; + border: none; + border-radius: 50%; + width: 32px; + height: 32px; + font-size: 16px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: all 0.2s; +} + +.anomalous-gallery-card:hover .anomalous-gallery-delete { + opacity: 1; +} + +.anomalous-gallery-details { + position: absolute; + left: 8px; + bottom: 8px; + z-index: 2; + display: inline-flex; + align-items: center; + gap: 6px; + max-width: calc(100% - 16px); + padding: 6px 12px; + border: 1px solid rgba(255, 255, 255, 0.16); + border-radius: 999px; + background: rgba(15, 20, 30, 0.82); + color: #f1f5f9; + font-size: 11.5px; + font-weight: 600; + line-height: 1; + cursor: pointer; + opacity: 0; + transform: translateY(5px); + pointer-events: none; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); + transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), + transform .18s cubic-bezier(0.16, 1, 0.3, 1), + background .18s ease, + border-color .18s ease, + box-shadow .18s ease, + color .18s ease; + user-select: none; +} + +.anomalous-gallery-card:hover .anomalous-gallery-details, +.anomalous-gallery-card:focus-within .anomalous-gallery-details { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +.anomalous-gallery-details:hover { + background: rgba(20, 29, 44, 0.94); + border-color: rgba(139, 92, 246, 0.55); + color: #fca5a5; + box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25); + transform: translateY(-1px); +} + +.anomalous-gallery-details:active { + transform: translateY(0) scale(0.96); +} + +.anomalous-gallery-details-icon { + width: 13px; + height: 13px; + flex-shrink: 0; + stroke: currentColor; + transition: transform .2s ease; +} + +.anomalous-gallery-details:hover .anomalous-gallery-details-icon { + transform: scale(1.1); +} + +#anomalous-gallery-panel.is-cover-selecting .anomalous-gallery-details, +#anomalous-gallery-panel.is-cover-selecting .anomalous-gallery-delete { + display: none; +} + +.anomalous-gallery-delete:hover { + background: #ff0000; + transform: scale(1.1); +} + +.anomalous-gallery-sentinel { + height: 40px; + width: 100%; + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: center; + color: #888; + font-size: 0.9em; +} + +.anomalous-gallery-viewer { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.95); + z-index: 9999999; + display: none; + align-items: center; + justify-content: center; +} + +dialog.anomalous-gallery-viewer[open] { + display: flex; +} + +.anomalous-gallery-viewer img { + max-width: 95%; + max-height: 95%; + object-fit: contain; + border-radius: 4px; + box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); +} + +.anomalous-gallery-viewer-close { + position: absolute; + top: 20px; + right: 30px; + font-size: 40px; + color: #ccc; + cursor: pointer; + transition: color 0.2s; + user-select: none; +} + +.anomalous-gallery-viewer-close:hover { + color: #fff; +} + +@container (max-width: 750px) { + .anomalous-nb-create-row { + padding: 8px 6px !important; + gap: 3px !important; + } + + .anomalous-nb-create-row > button { + width: 34px; + min-width: 34px; + padding: 8px 4px; + } +} + +.anomalous-nb-header-main, +.anomalous-nb-section-tabs { + display: flex; + align-items: center; +} + +.anomalous-nb-header-main { + min-width: 0; + gap: 18px; +} + +.anomalous-nb-header-main h2 { + margin: 0; + white-space: nowrap; +} + +.anomalous-nb-section-tabs { + gap: 4px; + padding: 3px; + border-radius: 8px; + background: rgba(0, 0, 0, 0.28); +} + +.anomalous-nb-section-tab { + padding: 5px 10px; + border: 0; + border-radius: 6px; + background: transparent; + color: #aaa; + cursor: pointer; +} + +.anomalous-nb-section-tab.active { + background: rgba(255, 255, 255, 0.15); + color: #fff; +} + +.theme-abyssal-scarlet .anomalous-nb-section-tab.active { + background: #dc143c; +} + +/* Workflow Recipes: Studio Topbar and Modern Layout System */ +.anomalous-recipe-body { + display: flex; + flex: 1; + min-height: 0; + flex-direction: column; + font-family: Inter, Roboto, "Segoe UI", sans-serif; + background: #111317; + overflow: hidden; +} + +/* 彻底隐匿原本粗暴占位的 Beta 警示大黄框 */ +.anomalous-recipe-beta-notice, +.anomalous-beta-notice.anomalous-recipe-beta-notice { + display: none !important; +} + +/* 一体化 Studio 沉浸顶栏 (无厚重底色，细微下划线，支持弹性折行) */ +.anomalous-recipe-topbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + min-height: 48px; + height: auto; + padding: 8px 16px; + background: rgba(18, 22, 32, 0.65); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + flex-shrink: 0; + flex-wrap: wrap; + z-index: 10; +} + +.anomalous-recipe-topbar-left { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + flex-shrink: 0; +} + +.anomalous-recipe-pills { + display: inline-flex; + align-items: center; + gap: 3px; + background: rgba(255, 255, 255, 0.02); + padding: 3px 4px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.anomalous-recipe-pill { + padding: 3px 11px; + border-radius: 14px; + font-size: 12px; + color: #94a3b8; + background: transparent; + border: none; + cursor: pointer; + transition: all 0.15s ease; + font-weight: 500; +} + +.anomalous-recipe-pill:hover { + color: #f1f5f9; + background: rgba(255, 255, 255, 0.05); +} + +.anomalous-recipe-pill.is-active { + color: var(--amb-text-main); + text-shadow: none; + font-weight: 600; + box-shadow: none; + border: 1px solid rgba(165, 180, 252, 0.35); + background: var(--amb-bg-card-hover); + border-color: var(--amb-border-hover); +} + +.anomalous-recipe-topbar-center { + display: flex; + align-items: center; + gap: 8px; + flex: 1 1 260px; + max-width: 460px; + flex-wrap: wrap; +} + +.anomalous-recipe-search-wrap { + position: relative; + display: flex; + align-items: center; + flex: 1; +} + +.anomalous-recipe-search-icon { + position: absolute; + left: 10px; + pointer-events: none; + color: #64748b; + display: flex; + align-items: center; + font-size: 13px; +} + +.anomalous-recipe-search-input { + width: 100%; + height: 30px; + padding: 0 12px 0 30px; + background: rgba(0, 0, 0, 0.28); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + color: #e2e8f0; + font-size: 12px; + outline: none; + transition: border-color 0.15s ease, background 0.15s ease; +} + +.anomalous-recipe-search-input:focus { + border-color: rgba(99, 102, 241, 0.45); + background: rgba(0, 0, 0, 0.4); +} + +.anomalous-recipe-tag-select { + height: 30px; + padding: 0 10px; + background: rgba(0, 0, 0, 0.28); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + color: #94a3b8; + font-size: 12px; + outline: none; + cursor: pointer; + max-width: 130px; +} + +.anomalous-recipe-tag-select:hover { + border-color: rgba(255, 255, 255, 0.18); +} + +.anomalous-recipe-topbar-right { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + flex-shrink: 0; +} + +.anomalous-recipe-view-switch { + display: inline-flex; + align-items: center; + background: rgba(0, 0, 0, 0.32); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 8px; + padding: 2px; +} + +.anomalous-recipe-view-btn { + width: 26px; + height: 26px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: transparent; + color: #64748b; + border-radius: 6px; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-recipe-view-btn:hover { + color: #cbd5e1; +} + +.anomalous-recipe-view-btn.is-active { + background: rgba(255, 255, 255, 0.09); + color: #a5b4fc; +} + +.anomalous-recipe-topbar-btn { + height: 30px; + padding: 0 12px; + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 8px; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: all 0.15s ease; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.03); + color: #cbd5e1; +} + +.anomalous-recipe-topbar-btn:hover { + background: rgba(255, 255, 255, 0.08); + color: #fff; +} + +.anomalous-recipe-topbar-btn.is-primary { + background: var(--amb-btn-primary-bg); + border-color: var(--amb-border-hover); + color: var(--amb-btn-primary-text); +} + +.anomalous-recipe-topbar-btn.is-primary:hover { + background: var(--amb-btn-primary-hover); + border-color: var(--amb-border-hover); + color: var(--amb-btn-primary-text); +} + +/* 列表容器 */ +.anomalous-recipe-list { + flex: 1; + min-height: 0; + overflow-y: auto; +} + +.anomalous-recipe-node-details { + margin-top: 2px; + border-top: 1px solid #3c3c3c; + padding-top: 7px; +} + +.anomalous-recipe-node-details > summary { + color: #a9cdff; + cursor: pointer; + user-select: none; +} + +.anomalous-recipe-node-list { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px 2px 2px; +} + +.anomalous-recipe-node { + padding: 8px; + border: 1px solid #3f3f3f; + border-radius: 7px; + background: rgba(0, 0, 0, 0.18); +} + +.anomalous-recipe-node-heading, +.anomalous-recipe-widget-row { + display: flex; + min-width: 0; + align-items: center; + gap: 6px; +} + +.anomalous-recipe-node-heading { + flex-wrap: wrap; + margin-bottom: 5px; +} + +.anomalous-recipe-widget-row { + padding: 3px 0; +} + +.anomalous-recipe-edit-param { + display: grid; + grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); + align-items: start; + gap: 8px; + padding: 7px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-recipe-edit-param .anomalous-nb-select, +.anomalous-recipe-edit-param .anomalous-nb-textarea { + width: 100%; + margin: 0; + box-sizing: border-box; +} + +.anomalous-recipe-edit-param input[type="checkbox"] { + width: auto; + min-height: 22px; + justify-self: start; +} + +.anomalous-recipe-widget-name { + flex: 0 0 34%; + overflow: hidden; + color: #aaa; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-widget-value { + flex: 1; + overflow: hidden; + color: #eee; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-copy-param { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.05); + color: #9ec8ff; + cursor: pointer; + font-size: 1.15rem; + padding: 6px; + border-radius: 8px; + transition: background-color 0.2s, color 0.2s, transform 0.1s, border-color 0.2s; + display: flex; + align-items: center; + justify-content: center; +} + +.anomalous-recipe-copy-param:hover { + background: rgba(158, 200, 255, 0.15); + border-color: rgba(158, 200, 255, 0.3); + color: #cce0ff; +} + +.anomalous-recipe-copy-param:active { + transform: scale(0.95); +} + +.anomalous-recipe-node-hint { + display: block; + margin-top: 4px; + color: #888; +} + +@container (max-width: 680px) { + .anomalous-nb-header-main { + gap: 8px; + } + + .anomalous-nb-header-main h2 { + font-size: 1.05rem; + } +} + +.anomalous-recipe-notes { + color: #aaa; + font-size: 0.8rem; +} + +.anomalous-recipe-empty { + grid-column: 1 / -1; + color: #aaa; + text-align: center; +} + +.anomalous-recipe-dialog-overlay { + position: absolute; + z-index: 10003; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 18px; + background: rgba(0, 0, 0, 0.62); +} + +.anomalous-recipe-dialog { + display: flex; + width: min(620px, 100%); + max-height: 100%; + flex-direction: column; + gap: 12px; + overflow-y: auto; + padding: 18px; + border: 1px solid #555; + border-radius: 10px; + background: #272727; + color: #eee; + box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); +} + +.anomalous-recipe-edit-dialog { + width: min(760px, 100%); +} + +.anomalous-recipe-dialog h3, +.anomalous-recipe-dialog label { + display: flex; + flex-direction: column; + gap: 6px; + margin: 0; +} + +.anomalous-recipe-dialog-preview { + max-height: 180px; +} + +.anomalous-recipe-save-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.anomalous-recipe-dialog label.anomalous-recipe-checkbox { + flex-direction: row; + align-items: center; + gap: 8px; + cursor: pointer; +} + +.anomalous-recipe-checkbox input { + margin: 0; +} + +.anomalous-recipe-cover-choices { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); + gap: 7px; +} + +.anomalous-recipe-cover-choice { + display: flex; + min-height: 66px; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + overflow: hidden; + padding: 4px; + border: 1px solid #4a4a4a; + border-radius: 7px; + background: #191919; + color: #bbb; + cursor: pointer; +} + +.anomalous-recipe-cover-choice img { + width: 100%; + height: 58px; + border-radius: 4px; + object-fit: cover; +} + +.anomalous-recipe-cover-choice.selected { + border-color: #e5e7eb; + color: #e5e7eb; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); +} + +.theme-abyssal-scarlet .anomalous-recipe-cover-choice.selected { + border-color: #dc143c; + color: #dc143c; + box-shadow: inset 0 0 0 1px rgba(220, 20, 60, 0.35); +} + +.anomalous-recipe-pin-picker { + border: 1px solid #444; + border-radius: 8px; + padding: 9px; +} + +.anomalous-recipe-pin-picker > summary { + color: #a9cdff; + cursor: pointer; +} + +.anomalous-recipe-pin-list { + display: flex; + flex-direction: column; + gap: 4px; + padding-top: 8px; +} + +.anomalous-recipe-pin-node { + position: sticky; + top: 0; + z-index: 1; + padding: 5px 2px; + background: #272727; + color: #ddd; +} + +.anomalous-recipe-pin-choice { + display: flex; + align-items: flex-start; + gap: 7px; + padding: 4px 6px; + border-radius: 5px; + color: #bbb; + cursor: pointer; +} + +.anomalous-recipe-pin-choice:hover { + background: rgba(255, 255, 255, 0.06); +} + +.anomalous-recipe-pinned { + display: flex; + flex-direction: column; + gap: 3px; + padding: 8px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 7px; + background: rgba(255, 255, 255, 0.04); +} + +.theme-abyssal-scarlet .anomalous-recipe-pinned { + border: 1px solid rgba(220, 20, 60, 0.3); + background: rgba(220, 20, 60, 0.05); +} + +.anomalous-recipe-history-list { + display: flex; + flex-direction: column; + gap: 7px; + padding-top: 8px; +} + +.anomalous-recipe-history-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 7px; + border: 1px solid #3f3f3f; + border-radius: 7px; + color: #c9c9c9; + font-size: 0.82rem; +} + +.anomalous-recipe-history-row > span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Recipe detail panel: one scroll owner inside the Notebook modal. */ +.anomalous-recipe-detail-view { + display: flex; + min-height: 0; + flex: 1; + flex-direction: column; + overflow: hidden; + background: #202020; + font-family: Inter, Roboto, "Segoe UI", sans-serif; +} + +.anomalous-recipe-detail-header, +.anomalous-recipe-detail-section-heading { + display: flex; + align-items: center; + gap: 10px; +} + +.anomalous-recipe-detail-header { + flex: 0 0 auto; + justify-content: space-between; + padding: 14px 18px; + border-bottom: 1px solid #3d3d3d; +} + +.anomalous-recipe-detail-header h3, +.anomalous-recipe-detail-section h4 { + margin: 0; +} + +.anomalous-recipe-detail-tabs { + display: flex; + flex: 0 0 auto; + gap: 4px; + overflow-x: auto; + padding: 8px 18px; + border-bottom: 1px solid #3d3d3d; + background: #252525; +} + +.anomalous-recipe-detail-tab { + padding: 7px 11px; + border: 1px solid transparent; + border-radius: 7px; + color: #aaa; + background: transparent; + cursor: pointer; + white-space: nowrap; +} + +.anomalous-recipe-detail-tab.active { + border-color: rgba(255, 255, 255, 0.25); + color: #ffffff; + background: rgba(255, 255, 255, 0.1); +} + +.theme-abyssal-scarlet .anomalous-recipe-detail-tab.active { + border-color: rgba(220, 20, 60, 0.45); + color: #dc143c; + background: rgba(220, 20, 60, 0.08); +} + +.anomalous-recipe-detail-content { + flex: 1; + min-height: 0; + overflow-y: auto; + padding: 16px 20px 48px 20px; + box-sizing: border-box; +} + +.anomalous-recipe-gallery { + min-width: 0; +} + +.anomalous-recipe-gallery-refresh { + margin-left: auto; +} + +.anomalous-recipe-gallery-grid { + column-width: 210px; + column-gap: 12px; +} + +.anomalous-recipe-gallery-card { + position: relative; + display: inline-block; + width: 100%; + margin: 0 0 12px; + overflow: hidden; + border: 1px solid #404040; + border-radius: 9px; + background: #171717; + break-inside: avoid; +} + +.anomalous-recipe-gallery-card img { + display: block; + width: 100%; + max-height: 480px; + cursor: zoom-in; + object-fit: contain; + background: #101010; +} + +.anomalous-recipe-gallery-card-actions { + position: absolute; + right: 8px; + bottom: 8px; + display: flex; + opacity: 0; + transform: translateY(4px); + transition: opacity 160ms ease, transform 160ms ease; +} + +.anomalous-recipe-gallery-card:hover .anomalous-recipe-gallery-card-actions, +.anomalous-recipe-gallery-card:focus-within .anomalous-recipe-gallery-card-actions { + opacity: 1; + transform: translateY(0); +} + +.anomalous-recipe-gallery-card-actions button { + box-shadow: none; +} + +.anomalous-recipe-gallery-comparison { + max-height: 260px; + overflow-y: auto; + padding: 10px; + border-top: 1px solid #3d3d3d; + background: #202020; + font-size: 0.82rem; +} + +.anomalous-recipe-gallery-comparison > strong { + display: block; + margin-bottom: 6px; +} + +.anomalous-recipe-gallery-diff-row { + padding: 7px 0; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-recipe-gallery-diff-values { + display: grid; + gap: 4px; + margin-top: 4px; + color: #c8c8c8; + overflow-wrap: anywhere; +} + +.anomalous-recipe-detail-overview, +.anomalous-recipe-detail-section { + display: flex; + flex-direction: column; + gap: 10px; +} + +.anomalous-recipe-detail-hero { + display: grid; + grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); + gap: 14px; + align-items: stretch; +} + +.anomalous-recipe-detail-hero img { + width: 100%; + max-height: 190px; + min-height: 120px; + border-radius: 9px; + object-fit: contain; + background: #111; +} + +.anomalous-recipe-detail-hero video { + width: 100%; + max-height: 190px; + min-height: 120px; + border-radius: 9px; + object-fit: contain; + background: #111; +} + +.anomalous-recipe-detail-hero-copy { + display: flex; + min-width: 0; + flex-direction: column; + gap: 7px; + justify-content: center; +} + +.anomalous-recipe-inline-title-row { + min-width: 0; +} + +.anomalous-recipe-inline-title { + max-width: 100%; + overflow: hidden; + padding: 0; + border: 0; + color: #f1f1f1; + background: transparent; + cursor: text; + font: inherit; + font-size: 1.35rem; + font-weight: 700; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-inline-title:hover, +.anomalous-recipe-inline-editable:hover { + color: #a9cdff; +} + +.anomalous-recipe-inline-input { + width: 100%; + min-width: 0; + box-sizing: border-box; + padding: 7px 9px; + border: 1px solid rgba(112, 178, 255, 0.7); + border-radius: 7px; + color: #f4f4f4; + background: #161616; + font: inherit; +} + +.anomalous-recipe-inline-editor.is-multiline .anomalous-recipe-inline-input { + resize: vertical; +} + +.anomalous-recipe-inline-controls { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + margin-top: 6px; +} + +.anomalous-recipe-inline-editable { + flex: 1; + min-width: 0; + cursor: text; +} + +.anomalous-recipe-inline-edit-button { + padding: 2px 6px; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 6px; + color: #a9cdff; + background: transparent; + cursor: pointer; + font-size: 0.72rem; +} + +.anomalous-recipe-detail-advanced, +.anomalous-recipe-advanced-info { + color: #aaa; + font-size: 0.78rem; +} + +.anomalous-recipe-advanced-info > summary { + display: inline-flex; + align-items: center; + gap: 6px; + color: #a9cdff; + cursor: pointer; + user-select: none; + padding: 6px 12px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s; + outline: none; + font-size: 0.85rem; +} + +.anomalous-recipe-advanced-info > summary:hover, +.anomalous-recipe-advanced-info > summary:focus-visible { + background: rgba(169, 205, 255, 0.15); + border-color: rgba(169, 205, 255, 0.3); + color: #cce0ff; +} + +.anomalous-recipe-advanced-row { + display: flex; + min-width: 0; + flex-wrap: wrap; + align-items: center; + gap: 7px; + margin-top: 7px; + padding: 7px 8px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 7px; + background: rgba(0, 0, 0, 0.14); +} + +.anomalous-recipe-advanced-row code { + min-width: 0; + overflow-wrap: anywhere; +} + +.anomalous-recipe-model-hash { + width: 100%; +} + +.anomalous-recipe-detail-hero-copy h3 { + margin: 0; + color: #f1f1f1; + font-size: 1.35rem; +} + +.anomalous-recipe-detail-hero-copy p { + margin: 0; + white-space: pre-wrap; +} + +.anomalous-recipe-detail-notes { + display: flex; + min-width: 0; + gap: 6px; + align-items: start; +} + +.anomalous-recipe-detail-notes p { flex: 1; } + +.anomalous-recipe-detail-muted { + color: #999; +} + +.anomalous-recipe-detail-stats, +.anomalous-recipe-detail-summary-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); + gap: 8px; +} + +.anomalous-recipe-detail-stat, +.anomalous-recipe-detail-summary-grid > div { + display: grid; + min-width: 0; + grid-template-columns: max-content minmax(0, 1fr); + align-items: start; + gap: 4px; + padding: 9px 10px; + border: 1px solid #3e3e3e; + border-radius: 8px; + background: rgba(0, 0, 0, 0.16); +} + +.anomalous-recipe-detail-stat-label, +.anomalous-recipe-detail-label { + color: #999; + font-size: 0.8rem; + word-break: break-all; + overflow-wrap: anywhere; +} + +.anomalous-recipe-detail-stat strong { + color: #eee; +} + +.anomalous-recipe-detail-stat-good { color: #6ee7b7 !important; } +.anomalous-recipe-detail-stat-warn { color: #ffd493 !important; } + +.anomalous-recipe-model-composition { + display: grid; + gap: 8px; + margin-bottom: 10px; +} + +.anomalous-recipe-model-composition h5 { + margin: 0; + color: #ddd; + font-size: 0.9rem; +} + +.anomalous-recipe-model-composition-grid { + display: grid; + min-width: 0; + grid-template-columns: minmax(0, 1fr); + gap: 8px; +} + +.anomalous-recipe-model-composition-card { + display: grid; + min-width: 0; + gap: 5px; + padding: 9px 10px; + border: 1px solid #414141; + border-radius: 8px; + background: rgba(0, 0, 0, 0.14); +} + +.anomalous-recipe-model-composition-card.is-base-model { + border-color: rgba(110, 231, 183, 0.35); + background: rgba(110, 231, 183, 0.05); +} + +.anomalous-recipe-model-composition-value .anomalous-recipe-detail-full-value { + overflow-wrap: anywhere; +} + +.anomalous-recipe-detail-summary-grid > div { + gap: 12px; +} + +.anomalous-recipe-detail-summary-grid > .is-wide { + grid-column: 1 / -1; +} + +.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-label { + padding-top: 6px; + white-space: nowrap; +} + +.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-value-viewer { + width: 100%; +} + +.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-full-value { + overflow-wrap: anywhere; + white-space: pre-wrap; +} + +.anomalous-recipe-detail-section { + margin-bottom: 12px; + padding: 12px; + border: 1px solid #3d3d3d; + border-radius: 10px; + background: #292929; +} + +.anomalous-recipe-detail-section-heading { + flex-wrap: wrap; + justify-content: space-between; +} + +.anomalous-recipe-detail-section-heading small { + margin-left: auto; +} + +.anomalous-recipe-refresh-button { + position: relative; + transition: opacity 0.2s ease, filter 0.2s ease; +} + +.anomalous-recipe-refresh-button.is-loading { + cursor: wait; + opacity: 0.78; + filter: saturate(0.8); +} + +.anomalous-recipe-refresh-button.is-loading::before { + content: '↻'; + display: inline-block; + margin-right: 5px; + animation: anomalous-recipe-spin 0.9s linear infinite; +} + +@keyframes anomalous-recipe-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.anomalous-recipe-detail-actions { margin-top: 2px; } + +.anomalous-recipe-identity-badge { + box-sizing: border-box; + min-width: 0; + max-width: 100%; + padding: 2px 6px; + border: 1px solid; + border-radius: 4px; + font-size: 0.65rem; + font-weight: 600; + white-space: normal; + overflow-wrap: anywhere; + display: inline-flex; + align-items: center; +} +.anomalous-recipe-identity-badge > span:first-child { + min-width: 0; + overflow-wrap: anywhere; +} +.anomalous-recipe-identity-badge-wrap { + display: inline-flex; + min-width: 0; + max-width: 100%; + flex: 0 1 auto; + flex-wrap: wrap; + align-items: center; +} + +.anomalous-recipe-identity-help { + display: inline-flex; + width: 16px; + height: 16px; + align-items: center; + justify-content: center; + padding: 0; + border: 1px solid currentColor; + border-radius: 50%; + color: inherit; + background: transparent; + font-weight: normal; + opacity: 0.6; + margin-left: 2px; + cursor: pointer; +} + +.anomalous-recipe-identity-help:hover, +.anomalous-recipe-identity-help:focus-visible { + opacity: 1; + outline: 2px solid rgba(255, 255, 255, 0.3); + outline-offset: 1px; +} + +.anomalous-recipe-identity-explanation { + display: none; + flex: 0 0 100%; + max-width: min(340px, calc(100vw - 48px)); + padding: 9px 11px; + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 7px; + color: #fff; + background: rgba(20, 22, 28, 0.98); + box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); + font-size: 0.78rem; + font-weight: 400; + line-height: 1.45; + white-space: normal; + overflow-wrap: anywhere; +} + +.anomalous-recipe-identity-badge-wrap.is-open .anomalous-recipe-identity-explanation { + display: block; +} + +.anomalous-recipe-identity-verified { + border-color: rgba(110, 231, 183, 0.55); + color: #6ee7b7; +} + +.anomalous-recipe-identity-unverified { + border-color: rgba(255, 212, 147, 0.55); + color: #ffd493; +} + +.anomalous-recipe-identity-unavailable { + border-color: rgba(255, 119, 119, 0.55); + color: #ff9999; +} + +.anomalous-recipe-model-reference-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + align-items: stretch; + gap: 12px; +} + +@container (max-width: 680px) { + .anomalous-recipe-model-reference-list { + grid-template-columns: 1fr; + } + .anomalous-recipe-model-reference-body { + flex-direction: row; + align-items: flex-start; + } + .anomalous-recipe-model-preview { + max-width: 120px; + height: 100px; + flex: 0 0 100px; + } +} + +.anomalous-recipe-detail-parameter-list, +.anomalous-recipe-version-timeline { + display: flex; + flex-direction: column; + gap: 9px; +} + +.anomalous-recipe-parameter-notebook-layout { + display: grid; + min-width: 0; + grid-template-columns: clamp(230px, 24vw, 290px) minmax(0, 1fr); + gap: 14px; + align-items: start; +} + +.anomalous-recipe-parameter-notebook-sidebar { + position: sticky; + top: 0; + display: flex; + min-width: 0; + max-height: min(720px, 80vh); + flex-direction: column; + gap: 8px; + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + background: linear-gradient(180deg, rgba(28, 30, 36, 0.75), rgba(18, 19, 23, 0.85)); + backdrop-filter: blur(10px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); + overflow: hidden; +} + +.anomalous-recipe-parameter-notebook-sidebar .anomalous-recipe-detail-section-heading { + align-items: center; + justify-content: space-between; +} + +.anomalous-recipe-parameter-notebook-list { + display: flex; + min-height: 0; + flex-direction: column; + gap: 6px; + overflow-y: auto; + padding-right: 2px; +} + +.anomalous-model-location { + display: grid; + gap: 7px; + margin-bottom: 12px; + padding: 10px 12px; + border: 1px solid var(--border-color, #444); + border-radius: 7px; + background: rgba(255, 255, 255, 0.025); +} + +.anomalous-model-location-row { + min-width: 0; + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: 9px; + align-items: baseline; +} + +.anomalous-model-location-label { + color: #9aa0a6; + font-size: 0.78em; +} + +.anomalous-model-location code { + min-width: 0; + color: #d7dbe5; + font-size: 0.76em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.anomalous-model-location-copy { + justify-self: start; + padding: 4px 9px; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 5px; + background: rgba(255, 255, 255, 0.06); + color: #e5e7eb; + cursor: pointer; + font-size: 0.75em; +} + +.anomalous-beta-notice { + display: flex; + min-width: 0; + align-items: flex-start; + gap: 9px; + margin: 10px 14px 0; + padding: 9px 11px; + border: 1px solid rgba(245, 190, 73, 0.38); + border-radius: 9px; + color: #e9d7aa; + background: linear-gradient(110deg, rgba(245, 158, 11, 0.13), rgba(245, 158, 11, 0.04)); + font-size: 0.78rem; + line-height: 1.45; +} + +.anomalous-beta-notice > span { + min-width: 0; + overflow-wrap: anywhere; +} + +.anomalous-beta-badge { + flex: 0 0 auto; + padding: 2px 7px; + border: 1px solid rgba(251, 191, 36, 0.5); + border-radius: 999px; + color: #ffe4a3; + background: rgba(245, 158, 11, 0.12); + font-size: 0.7rem; + white-space: nowrap; +} + +.anomalous-assistant-beta-notice { + margin: 10px 12px 0; + flex-shrink: 0; +} + +.anomalous-recipe-parameter-notebook-row { + display: grid; + min-width: 0; + grid-template-columns: minmax(0, 1fr) 30px; + gap: 5px; + align-items: stretch; + transition: opacity 0.16s ease, transform 0.16s ease; +} + +.anomalous-recipe-parameter-notebook-row.is-deleting { + opacity: 0.48; + transform: scale(0.98); + pointer-events: none; +} + +.anomalous-recipe-parameter-notebook-item { + display: flex; + min-width: 0; + flex-direction: column; + align-items: flex-start; + gap: 3px; + padding: 8px 9px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 7px; + color: #ddd; + background: rgba(255, 255, 255, 0.03); + text-align: left; + cursor: pointer; + transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease; +} + +.anomalous-recipe-parameter-notebook-item:active, +.anomalous-recipe-parameter-notebook-item.is-switching { + transform: scale(0.98); + opacity: 0.72; +} + +.anomalous-recipe-parameter-notebook-item:hover, +.anomalous-recipe-parameter-notebook-item.is-active { + border-color: rgba(110, 231, 183, 0.58); + color: #c5f7df; + background: rgba(110, 231, 183, 0.1); +} + +.anomalous-recipe-parameter-notebook-item > * { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-parameter-notebook-rename, +.anomalous-recipe-parameter-notebook-delete { + display: grid; + place-items: center; + min-width: 30px; + padding: 0; + border: 1px solid rgba(255, 255, 255, 0.09); + border-radius: 7px; + color: #9da5b1; + background: rgba(255, 255, 255, 0.025); + cursor: pointer; + font-size: 0.9rem; + line-height: 1; + transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease; +} + +.anomalous-recipe-parameter-notebook-rename:hover, +.anomalous-recipe-parameter-notebook-rename:focus-visible { + border-color: rgba(96, 165, 250, 0.55); + color: #bfdbfe; + background: rgba(96, 165, 250, 0.12); +} + +.anomalous-recipe-parameter-notebook-delete:hover, +.anomalous-recipe-parameter-notebook-delete:focus-visible { + border-color: rgba(248, 113, 113, 0.55); + color: #fecaca; + background: rgba(248, 113, 113, 0.12); +} + +.anomalous-recipe-parameter-notebook-rename:active, +.anomalous-recipe-parameter-notebook-delete:active { transform: scale(0.92); } + +.anomalous-recipe-detail-parameters { + min-width: 0; +} + +.anomalous-recipe-detail-parameters.is-switching { + animation: anomalous-recipe-parameter-panel-switch 360ms ease-out; +} + +.anomalous-recipe-parameter-selection-banner { + display: flex; + min-width: 0; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 10px; + padding: 11px 13px; + border: 1px solid rgba(110, 231, 183, 0.48); + border-radius: 10px; + background: linear-gradient(100deg, rgba(110, 231, 183, 0.15), rgba(110, 231, 183, 0.04)); + box-shadow: inset 3px 0 0 rgba(110, 231, 183, 0.82); +} + +.anomalous-recipe-parameter-selection-copy { + display: flex; + min-width: 0; + flex-direction: column; + gap: 2px; +} + +.anomalous-recipe-parameter-selection-copy strong { + overflow: hidden; + color: #d5fbe9; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-parameter-selection-badge { + flex: 0 0 auto; + padding: 4px 8px; + border: 1px solid rgba(110, 231, 183, 0.55); + border-radius: 999px; + color: #bff5d9; + background: rgba(110, 231, 183, 0.12); + font-size: 0.78rem; + font-weight: 700; + white-space: nowrap; +} + +@keyframes anomalous-recipe-parameter-panel-switch { + 0% { + opacity: 0.58; + transform: translateX(12px); + filter: saturate(1.35); + } + 100% { + opacity: 1; + transform: translateX(0); + filter: saturate(1); + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +.anomalous-recipe-parameter-editor { + min-width: 0; +} + +.anomalous-recipe-parameter-editor-name { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: 10px; + align-items: center; + margin-bottom: 12px; + color: #bbb; +} + +.anomalous-recipe-parameter-editor-name input, +.anomalous-recipe-parameter-editor-input { + min-width: 0; + padding: 8px 10px; + border: 1px solid #4a4a4a; + border-radius: 7px; + color: #eee; + background: #181818; + font: inherit; +} + +.anomalous-recipe-parameter-editor-input { + width: 100%; + resize: vertical; +} + +.anomalous-recipe-parameter-editor-input:focus, +.anomalous-recipe-parameter-editor-name input:focus { + border-color: rgba(110, 231, 183, 0.7); + outline: none; +} + +.anomalous-recipe-parameter-editor-input.is-invalid { + border-color: rgba(255, 119, 119, 0.9); +} + +.anomalous-recipe-parameter-editor-row { + grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr); +} + +.anomalous-recipe-model-reference, +.anomalous-recipe-detail-parameter-node, +.anomalous-recipe-version-row { + padding: 9px 10px; + border: 1px solid #414141; + border-radius: 8px; + background: rgba(0, 0, 0, 0.15); +} + +.anomalous-recipe-model-reference { + display: flex; + min-width: 0; + height: 100%; + flex-direction: column; +} + +.anomalous-recipe-model-reference-body { + display: flex; + min-width: 0; + gap: 11px; + flex: 1; + flex-direction: column; +} + +.anomalous-recipe-model-reference-details { + display: flex; + min-width: 0; + flex: 1; + flex-direction: column; +} + +.anomalous-recipe-model-preview { + position: relative; + display: flex; + width: 100%; + height: 140px; + flex: 0 0 140px; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + border: 1px solid #464646; + border-radius: 7px; + color: #a9cdff; + background: #151515; + text-align: center; +} + +.anomalous-recipe-model-preview.is-clickable { + cursor: pointer; + border-color: rgba(112, 178, 255, 0.58); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.anomalous-recipe-model-preview.is-clickable:hover { + transform: translateY(-2px); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); +} + +.anomalous-recipe-model-preview img, +.anomalous-recipe-model-preview video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.anomalous-recipe-model-preview small { + position: absolute; + max-width: calc(100% - 12px); + overflow: hidden; + padding: 2px 4px; + border-radius: 4px; + color: #ddd; + background: rgba(0, 0, 0, 0.68); + font-size: 0.64rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-model-preview.empty small { + position: static; + max-width: calc(100% - 12px); + padding: 0; + color: #888; + background: transparent; + white-space: normal; +} + +.anomalous-recipe-model-reference-top, +.anomalous-recipe-model-reference-meta, +.anomalous-recipe-detail-parameter-row, +.anomalous-recipe-version-row { + display: flex; + min-width: 0; + align-items: center; + gap: 8px; +} + +.anomalous-recipe-model-reference-top { + width: 100%; + flex-wrap: wrap; +} +.anomalous-recipe-model-reference-top strong { + min-width: 0; + margin-right: auto; +} + +.anomalous-recipe-model-name { + min-width: 0; + max-width: 100%; + overflow: hidden; + padding: 3px 7px; + border: 1px solid transparent; + border-radius: 6px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-model-name.is-resolved { + border-color: rgba(110, 231, 183, 0.42); + color: #b8f5d8; + background: rgba(110, 231, 183, 0.08); + cursor: pointer; +} + +.anomalous-recipe-model-name.is-unresolved { + border-color: rgba(255, 255, 255, 0.08); + color: #999; + background: rgba(0, 0, 0, 0.12); +} + +.anomalous-recipe-model-name-block { + display: flex; + flex-direction: column; + gap: 4px; + margin: 6px 0; +} + +.anomalous-recipe-model-name-row { + min-width: 0; + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.anomalous-recipe-model-subtitle { + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.4); + word-break: break-all; + padding-left: 2px; +} + +.anomalous-recipe-civitai-btn { + font-size: 0.75rem; + color: #3b82f6; + text-decoration: none; + border: 1px solid rgba(59, 130, 246, 0.3); + padding: 2px 8px; + border-radius: 4px; + background: rgba(59, 130, 246, 0.1); + transition: all 0.2s ease; + white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.anomalous-recipe-civitai-btn:hover { + background: rgba(59, 130, 246, 0.2); + border-color: rgba(59, 130, 246, 0.5); + color: #60a5fa; +} + +.anomalous-recipe-model-reference.is-unresolved { + border-color: rgba(255, 212, 147, 0.28); +} + +.anomalous-recipe-model-match-status { + flex: 1; + min-width: 120px; +} + +.anomalous-recipe-model-match { + padding: 4px 8px; + border-radius: 7px; + font-size: 0.76rem; +} + +.anomalous-recipe-model-path { + width: 100%; +} + +.anomalous-recipe-model-reference-value { + margin: 6px 0; +} + +.anomalous-recipe-model-reference-meta { + flex-wrap: wrap; + color: #aaa; + font-size: 0.8rem; +} + +.anomalous-recipe-detail-search { + min-width: 180px; + flex: 1; + padding: 7px 9px; + border: 1px solid #555; + border-radius: 6px; + color: #eee; + background: #161616; +} + +.anomalous-recipe-detail-parameter-node { + display: flex; + flex-direction: column; + gap: 7px; +} + +.anomalous-recipe-detail-parameter-row { + display: grid; + grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr); + align-items: start; + padding-top: 6px; + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-recipe-detail-parameter-row .anomalous-recipe-detail-label { + padding-top: 5px; +} + +.anomalous-recipe-detail-value-viewer { + display: grid; + min-width: 0; + grid-template-columns: minmax(0, 1fr) auto; + gap: 5px 8px; + align-items: start; +} + +.anomalous-recipe-detail-full-value { + min-width: 0; + padding: 6px 8px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 6px; + color: #e7e7e7; + background: rgba(0, 0, 0, 0.18); + overflow-wrap: anywhere; + white-space: pre-wrap; +} + +.anomalous-recipe-detail-full-value.is-collapsed { + display: -webkit-box; + max-height: 5.4em; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.anomalous-recipe-detail-value-toggle { + grid-column: 1; + justify-self: start; + padding: 2px 0; + border: 0; + color: #9fc4ff; + background: transparent; + cursor: pointer; + font-size: 0.78rem; +} + +.anomalous-recipe-detail-copy { + grid-column: 2; + grid-row: 1; +} + +.anomalous-recipe-detail-prompt-list { + display: grid; + gap: 8px; +} + +.anomalous-recipe-detail-prompt { + display: flex; + flex-direction: column; + gap: 10px; + padding: 14px 16px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-left: 4px solid #7d8796; + border-radius: 10px; + background: rgba(255, 255, 255, 0.025); + transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease; + margin-bottom: 8px; +} + +.anomalous-recipe-detail-prompt:hover { + background: rgba(255, 255, 255, 0.035); + border-color: rgba(255, 255, 255, 0.14); +} + +.anomalous-recipe-detail-prompt.is-saving { opacity: 0.55; } +.anomalous-recipe-prompt-role-positive { border-left-color: #10b981 !important; } +.anomalous-recipe-prompt-role-negative { border-left-color: #f43f5e !important; } +.anomalous-recipe-prompt-role-both { border-left-color: #a855f7 !important; } +.anomalous-recipe-prompt-role-ignored, +.anomalous-recipe-prompt-role-unknown { border-left-color: #64748b !important; } + +.anomalous-recipe-prompt-card-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.anomalous-recipe-prompt-card-header-left { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + min-width: 0; + flex: 1; +} + +.anomalous-recipe-prompt-card-action-tray { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; +} + +.anomalous-recipe-prompt-role-badge.is-interactive { + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 5px; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 6px; + padding: 3px 8px; + font-size: 0.74rem; + font-weight: 600; + background: rgba(255, 255, 255, 0.05); + color: #e2e8f0; + transition: all 0.15s ease; +} + +.anomalous-recipe-prompt-role-badge.is-interactive:hover { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.25); + transform: translateY(-1px); +} + +.anomalous-recipe-prompt-role-badge.is-positive { + background: rgba(16, 185, 129, 0.12); + border-color: rgba(16, 185, 129, 0.3); + color: #34d399; +} + +.anomalous-recipe-prompt-role-badge.is-negative { + background: rgba(244, 63, 94, 0.12); + border-color: rgba(244, 63, 94, 0.3); + color: #fb7185; +} + +.anomalous-recipe-prompt-card-node-title { + font-size: 0.84rem; + font-weight: 600; + color: #e2e8f0; +} + +.anomalous-recipe-prompt-card-node-type { + font-size: 0.74rem; + color: #64748b; +} + +.anomalous-recipe-prompt-card-body { + width: 100%; +} + +.anomalous-recipe-prompt-card-body .anomalous-recipe-detail-value-viewer { + display: block; + width: 100%; +} + +.anomalous-recipe-prompt-card-body .anomalous-recipe-detail-full-value { + width: 100%; + box-sizing: border-box; + padding: 12px 14px; + border-radius: 8px; + background: rgba(0, 0, 0, 0.22); + border: 1px solid rgba(255, 255, 255, 0.06); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 0.84rem; + line-height: 1.6; + color: #cbd5e1; +} + +.anomalous-recipe-prompt-meta { + display: flex; + min-width: 0; + align-items: center; + gap: 8px; +} + +.anomalous-recipe-prompt-meta strong, +.anomalous-recipe-prompt-meta small { + max-width: 100%; + overflow-wrap: anywhere; +} + +.anomalous-recipe-prompt-role-badge { + display: inline-flex; + width: fit-content; + padding: 2px 7px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 999px; + color: #cbd5e1; + background: rgba(255, 255, 255, 0.05); + font-size: 0.72rem; +} + +.anomalous-recipe-prompt-role-badge.is-positive { color: #9af0d0; border-color: rgba(110, 231, 183, 0.35); } +.anomalous-recipe-prompt-role-badge.is-negative { color: #f2a8b3; border-color: rgba(223, 141, 154, 0.38); } +.anomalous-recipe-prompt-role-badge.is-both { color: #d6c4ff; border-color: rgba(196, 167, 255, 0.4); } + +.anomalous-recipe-prompt-role-select { + width: 100%; + min-width: 0; + padding: 6px 28px 6px 8px; + border: 1px solid rgba(159, 196, 255, 0.3); + border-radius: 7px; + color: var(--input-text, #e8eef7); + background: var(--comfy-input-bg, #24272d); + cursor: pointer; +} + +.anomalous-recipe-prompt-role-select:focus-visible { + outline: 2px solid rgba(80, 170, 255, 0.7); + outline-offset: 1px; +} + +.anomalous-recipe-prompt-value { min-width: 0; } + +.anomalous-recipe-version-row { + justify-content: space-between; + flex-wrap: wrap; +} + +.anomalous-recipe-version-row > div { + display: flex; + min-width: 150px; + flex-direction: column; + gap: 4px; +} + +.anomalous-recipe-version-row.current { + border-color: rgba(255, 255, 255, 0.35); +} + +.theme-abyssal-scarlet .anomalous-recipe-version-row.current { + border-color: rgba(220, 20, 60, 0.55); +} + +@media (max-width: 820px) { + .anomalous-recipe-detail-hero { grid-template-columns: 1fr; } + .anomalous-recipe-detail-hero img { max-height: 180px; } + .anomalous-recipe-detail-content { padding: 10px; } + .anomalous-recipe-detail-header { padding: 10px; } + .anomalous-recipe-detail-header h3 { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .anomalous-recipe-model-preview { height: 110px; flex-basis: 110px; } + .anomalous-recipe-parameter-notebook-layout { grid-template-columns: 1fr; } + .anomalous-recipe-parameter-notebook-sidebar { position: static; max-height: none; } + .anomalous-recipe-parameter-editor-name { grid-template-columns: 1fr; gap: 5px; } +} + +@media (max-width: 560px) { + .anomalous-recipe-edit-param { + grid-template-columns: 1fr; + } +} + +.anomalous-recipe-dialog-error { + min-height: 1em; + color: #ff7777; + font-size: 0.8rem; +} + +.anomalous-model-settings-overlay { + position: absolute; + inset: 0; + z-index: 10020; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + box-sizing: border-box; + background: rgba(8, 9, 12, 0.78); + backdrop-filter: blur(8px); +} + +.anomalous-model-settings-overlay[hidden] { + display: none; +} + +.anomalous-model-settings-dialog { + width: min(560px, 100%); + padding: 24px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + box-sizing: border-box; + color: #f3f4f6; + background: linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98)); + box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); +} + +.anomalous-model-settings-dialog h2 { + margin: 0 0 6px; + font-size: 1.3em; +} + +.anomalous-model-settings-description { + margin: 0 0 18px; + color: #aeb3bd; + font-size: 0.9em; + line-height: 1.55; +} + +.anomalous-model-setting-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 18px; + padding: 16px 0; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-model-setting-copy { + display: flex; + flex: 1; + min-width: 0; + flex-direction: column; + gap: 5px; +} + +.anomalous-model-setting-copy small { + color: #9da3ad; + line-height: 1.45; +} + +.anomalous-model-setting-select { + width: 190px; + max-width: 44%; + padding: 9px 10px; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 8px; + color: #f5f5f5; + background: #17181c; + cursor: pointer; +} + +.anomalous-model-settings-note { + margin-top: 4px; + padding: 10px 12px; + border-radius: 8px; + color: #a9c8ee; + background: rgba(80, 145, 220, 0.1); + font-size: 0.82em; + line-height: 1.45; +} + +.anomalous-model-settings-close { + display: block; + min-width: 96px; + margin: 20px 0 0 auto; + padding: 9px 18px; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 8px; + color: #fff; + background: #3f73b9; + cursor: pointer; +} + +@media (max-width: 620px) { + .anomalous-model-setting-row { + align-items: stretch; + flex-direction: column; + gap: 10px; + } + + .anomalous-model-setting-select { + width: 100%; + max-width: none; + } +} + +/* Recipe library discovery and semantic version diff. */ +.anomalous-recipe-actionbar { + flex-wrap: wrap; + align-items: center; + gap: 8px; +} + +.anomalous-recipe-search { + min-width: 220px; + flex: 1 1 240px; +} + +.anomalous-recipe-filter-tags { + display: flex; + flex: 1 1 100%; + flex-wrap: wrap; + gap: 5px; + align-items: center; +} + +.anomalous-recipe-filter-tag { + border: 1px solid rgba(138, 180, 248, 0.42); + border-radius: 999px; + background: rgba(138, 180, 248, 0.08); + color: #cfe1ff; + padding: 3px 9px; + cursor: pointer; +} + +.anomalous-recipe-filter-tag:hover, +.anomalous-recipe-filter-tag.active { + background: rgba(138, 180, 248, 0.28); + color: #fff; +} + +.anomalous-recipe-filter-summary { + color: #9caec4; + white-space: nowrap; +} + +.anomalous-recipe-badge-tag { + border: 0; + cursor: pointer; +} + +.anomalous-recipe-version-diff { + flex: 1 1 100%; + margin-top: 8px; + padding: 9px; + border-left: 2px solid rgba(138, 180, 248, 0.42); + background: rgba(0, 0, 0, 0.14); +} + +.anomalous-recipe-diff-group { + margin-top: 8px; +} + +.anomalous-recipe-diff-group h5 { + margin: 4px 0; + color: #cfe1ff; +} + +.anomalous-recipe-diff-row { + display: grid; + grid-template-columns: 18px minmax(0, 1fr); + align-items: start; + gap: 7px; + margin-top: 6px; + padding: 8px; + min-width: 0; + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 7px; + background: rgba(0, 0, 0, 0.1); +} + +.anomalous-recipe-diff-marker { + width: 16px; + text-align: center; + font-weight: 700; +} + +.anomalous-recipe-diff-added .anomalous-recipe-diff-marker, +.anomalous-recipe-diff-added .anomalous-recipe-diff-after { color: #6ee7b7; } +.anomalous-recipe-diff-removed .anomalous-recipe-diff-marker, +.anomalous-recipe-diff-removed .anomalous-recipe-diff-before { color: #ff9a9a; } +.anomalous-recipe-diff-changed .anomalous-recipe-diff-marker { color: #ffd493; } + +.anomalous-recipe-diff-label { + min-width: 0; + padding-top: 3px; +} + +.anomalous-recipe-diff-arrow { display: none; } + +.anomalous-recipe-diff-values { + display: grid; + grid-column: 2; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + gap: 7px; + min-width: 0; +} + +.anomalous-recipe-diff-value { + min-width: 0; + padding: 7px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.025); +} + +.anomalous-recipe-diff-value-before { border-left: 2px solid rgba(255, 154, 154, 0.66); } +.anomalous-recipe-diff-value-after { border-left: 2px solid rgba(110, 231, 183, 0.66); } +.anomalous-recipe-diff-value .anomalous-recipe-detail-value-viewer { margin-top: 4px; } +.anomalous-recipe-diff-value .anomalous-recipe-detail-full-value { font-size: 0.78rem; } + +@media (max-width: 720px) { + .anomalous-recipe-diff-values { grid-template-columns: 1fr; } + .anomalous-recipe-detail-prompt, + .anomalous-recipe-detail-parameter-row { grid-template-columns: 1fr; } + .anomalous-recipe-detail-prompt-label, + .anomalous-recipe-detail-parameter-row .anomalous-recipe-detail-label { padding-top: 0; } +} + +/* Secondary Actions Group */ +.anomalous-recipe-actions-secondary { + display: flex; + gap: 6px; + align-items: center; +} + +/* Primary Actions Group */ +.anomalous-recipe-actions-primary { + display: flex; + gap: 6px; + align-items: center; + margin-left: auto; +} + +.anomalous-recipe-header-status { + max-width: 190px; + color: rgba(190, 205, 225, 0.78); + font-size: 0.75rem; + line-height: 1.25; + white-space: normal; + text-align: right; +} + +/* Icon Button (for actions & tools) */ +.anomalous-btn-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.09)); + border-radius: var(--amb-radius-control, 6px); + background: rgba(255, 255, 255, 0.04); + color: var(--amb-text-muted, #A7AAB5); + cursor: pointer; + font-size: 14px; + transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; + box-sizing: border-box; +} + +.anomalous-btn-icon:hover { + background: rgba(255, 255, 255, 0.10); + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.20)); + color: var(--amb-text-main, #E7E8ED); +} + +.anomalous-btn-icon.anomalous-btn-edit:hover { + color: #34d399; + border-color: rgba(52, 211, 153, 0.35); + background: rgba(52, 211, 153, 0.1); +} + +.anomalous-btn-icon.anomalous-btn-delete:hover { + color: #f87171; + border-color: rgba(248, 113, 113, 0.35); + background: rgba(248, 113, 113, 0.1); +} + +.anomalous-btn-icon.anomalous-btn-export:hover { + color: #60a5fa; + border-color: rgba(96, 165, 250, 0.35); + background: rgba(96, 165, 250, 0.1); +} + +/* Ghost Button (secondary text button) */ +.anomalous-btn-ghost { + position: relative; + background: rgba(255, 255, 255, 0.05); + color: var(--amb-text-main, #E7E8ED); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + border-radius: var(--amb-radius-control, 6px); + height: 32px; + padding: 0 14px; + font-size: 0.82rem; + font-weight: 500; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + transition: background-color 0.15s ease, border-color 0.15s ease; + overflow: hidden; + user-select: none; + box-sizing: border-box; +} + +.anomalous-btn-ghost:hover { + background: rgba(255, 255, 255, 0.09); + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22)); + color: #ffffff; +} + +.anomalous-btn-ghost:active { + transform: translateY(1px); + filter: brightness(0.95); +} + +.anomalous-btn-sm { + height: 28px !important; + padding: 0 10px !important; + font-size: 0.76rem !important; +} + +@keyframes anomalous-parameter-switch { + 0% { + opacity: 0; + transform: translateY(12px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.anomalous-recipe-detail-parameters.is-switching { + animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; +} + +.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(1) { + animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.03s both; +} +.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(2) { + animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.08s both; +} +.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(3) { + animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.13s both; +} +.anomalous-recipe-detail-parameters.is-switching .anomalous-recipe-detail-section:nth-child(4) { + animation: anomalous-parameter-switch 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) 0.18s both; +} + +.anomalous-recipe-parameter-notebook-item.is-switching { + animation: anomalous-parameter-switch 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; +} + +/* Parameter Summary Grid Styling */ +.anomalous-recipe-detail-summary-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 16px; + padding: 16px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px; + margin-bottom: 24px; +} + +.anomalous-recipe-detail-summary-grid .anomalous-recipe-detail-parameter-row.is-wide { + grid-column: 1 / -1; +} + +/* Node Parameter Card Styling */ +.anomalous-recipe-detail-parameter-node { + position: relative; + padding: 16px; + margin-bottom: 16px; + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 8px; + transition: max-height 0.3s ease; +} + +.anomalous-recipe-detail-node-title { + display: block; + margin-bottom: 12px; + font-size: 1.05rem; + color: #e0e0e0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + padding-bottom: 8px; +} + +.anomalous-recipe-material-selection { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px; + margin-top: 10px; + padding: 9px 10px; + border: 1px solid rgba(139, 92, 246, 0.16); + border-radius: 8px; + background: rgba(139, 92, 246, 0.045); +} + +.anomalous-recipe-material-selection .anomalous-workbench-node-selection-count { + margin-right: auto; +} + +.anomalous-recipe-material-node-header { + display: flex; + align-items: center; + gap: 9px; + margin-bottom: 12px; + padding-bottom: 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-recipe-material-node-header .anomalous-recipe-detail-node-title { + min-width: 0; + flex: 1; + margin: 0; + padding: 0; + border: 0; +} + +.anomalous-recipe-material-node-select { + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + flex: 0 0 16px; + margin: 0; + border-radius: 4px; + border: 1.5px solid rgba(255, 255, 255, 0.22); + background-color: rgba(20, 10, 16, 0.6); + cursor: pointer; + position: relative; + outline: none; + display: inline-grid; + place-content: center; + vertical-align: middle; + transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; +} + +.anomalous-recipe-material-node-select:hover { + border-color: rgba(139, 92, 246, 0.6); + background-color: rgba(139, 92, 246, 0.08); +} + +.anomalous-recipe-material-node-select:checked { + background-color: #8b5cf6; + border-color: #8b5cf6; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0f17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); + background-size: 11px 11px; + background-position: center; + background-repeat: no-repeat; + box-shadow: 0 0 8px rgba(139, 92, 246, 0.35); +} + +.anomalous-recipe-material-node-select:focus-visible { + outline: 2px solid #8b5cf6; + outline-offset: 2px; +} + +/* Grid Layout for Node Widgets */ +.anomalous-recipe-detail-node-widgets { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 12px; +} + +/* Smart Expansion (Collapsible Nodes) */ +.anomalous-recipe-detail-parameter-node.is-collapsed { + max-height: 180px; + overflow: hidden; +} + +.anomalous-recipe-detail-node-expand { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 70px; + background: linear-gradient(to bottom, transparent 0%, #202020 80%, #202020 100%); + display: flex; + align-items: flex-end; + justify-content: center; + padding-bottom: 8px; + z-index: 10; + border-radius: 0 0 8px 8px; +} + +.anomalous-recipe-detail-node-expand button { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 12px; + padding: 4px 16px; + font-size: 0.8rem; + color: #ccc; + cursor: pointer; + transition: background 0.2s, color 0.2s; +} + +.anomalous-recipe-detail-node-expand button:hover { + background: rgba(255, 255, 255, 0.2); + color: #fff; +} + +/* Hero Section Styling */ +.anomalous-recipe-detail-hero { + position: relative; + width: 100%; + max-height: 350px; + margin-bottom: 24px; + border-radius: 8px; + overflow: hidden; + background: rgba(0, 0, 0, 0.2); +} + +.anomalous-recipe-detail-hero-image { + width: 100%; + height: 100%; + max-height: 350px; + object-fit: cover; + display: block; + cursor: pointer; + transition: transform 0.3s ease; +} + +.anomalous-recipe-detail-hero-image:hover { + transform: scale(1.02); +} + +.anomalous-recipe-detail-hero-gallery-btn { + position: absolute; + bottom: 16px; + right: 16px; + background: rgba(0, 0, 0, 0.6); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 8px 16px; + border-radius: 20px; + font-size: 0.9rem; + cursor: pointer; + backdrop-filter: blur(8px); + transition: background 0.2s, transform 0.2s; + box-shadow: none; +} + +.anomalous-recipe-detail-hero-gallery-btn:hover { + background: rgba(0, 0, 0, 0.8); + transform: translateY(-2px); +} + diff --git a/web/styles/04-dialogs-materials.css b/web/styles/04-dialogs-materials.css new file mode 100644 index 0000000..d6d4d77 --- /dev/null +++ b/web/styles/04-dialogs-materials.css @@ -0,0 +1,2214 @@ +/* Modal Gallery Dialog Styling */ +.anomalous-recipe-gallery-dialog { + background: #1e1e1e; + color: #eee; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 24px; + width: 90vw; + max-width: 1200px; + max-height: 90vh; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + overflow-y: auto; +} + +.anomalous-recipe-gallery-dialog::backdrop { + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(4px); +} + +.anomalous-recipe-gallery-dialog-title { + margin-top: 0; + margin-bottom: 16px; + font-size: 1.4rem; + font-weight: 600; +} + +.anomalous-dialog-close { + position: absolute; + top: 16px; + right: 16px; + font-size: 1.2rem; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + cursor: pointer; +} + +/* Gallery Grid Refactor */ +.anomalous-recipe-gallery-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 16px; + padding: 16px 0; +} + +.anomalous-recipe-gallery-card { + position: relative; + border-radius: 8px; + overflow: hidden; + background: rgba(0, 0, 0, 0.2); + aspect-ratio: 1; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.anomalous-recipe-gallery-card:hover { + transform: scale(1.03); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); + z-index: 2; +} + +.anomalous-recipe-gallery-card img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + cursor: pointer; +} + +.anomalous-recipe-gallery-card-actions { + right: 10px; + bottom: 10px; + display: flex; + opacity: 0; + transform: translateY(4px); + pointer-events: none; +} + +.anomalous-recipe-gallery-card:hover .anomalous-recipe-gallery-card-actions, +.anomalous-recipe-gallery-card:focus-within .anomalous-recipe-gallery-card-actions { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +/* ========================================================================== + Anomalous Material Library - Studio & Uniform Grid System + ========================================================================== */ + +.anomalous-material-body { + min-height: 0; + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + background: #111317; +} + +/* 1. 一体化 Studio 顶栏 (精简纯净，杜绝层层大框堆叠) */ +.anomalous-material-topbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + height: 48px; + padding: 0 16px; + background: #16181f; + border-bottom: 1px solid rgba(255, 255, 255, 0.07); + flex-shrink: 0; + z-index: 10; +} + +.anomalous-material-topbar-left { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.anomalous-material-pills { + display: inline-flex; + align-items: center; + gap: 3px; + background: rgba(0, 0, 0, 0.32); + padding: 3px 4px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-material-pill { + padding: 3px 11px; + border-radius: 14px; + font-size: 12px; + color: #94a3b8; + background: transparent; + border: none; + cursor: pointer; + transition: all 0.15s ease; + font-weight: 500; +} + +.anomalous-material-pill:hover { + color: #e2e8f0; +} + +.anomalous-material-pill.is-active { + background: rgba(139, 92, 246, 0.18); + color: #8b5cf6; + font-weight: 600; + box-shadow: none; +} + +.anomalous-material-topbar-center { + display: flex; + align-items: center; + gap: 8px; + flex: 1; + max-width: 440px; +} + +.anomalous-material-search-wrap { + position: relative; + display: flex; + align-items: center; + flex: 1; +} + +.anomalous-material-search-icon { + position: absolute; + left: 10px; + pointer-events: none; + color: #64748b; + display: flex; + align-items: center; + font-size: 13px; +} + +.anomalous-material-search-input { + width: 100%; + height: 30px; + padding: 0 12px 0 30px; + background: rgba(0, 0, 0, 0.28); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + color: #e2e8f0; + font-size: 12px; + outline: none; + transition: border-color 0.15s ease, background 0.15s ease; +} + +.anomalous-material-search-input:focus { + border-color: rgba(139, 92, 246, 0.45); + background: rgba(0, 0, 0, 0.4); +} + +.anomalous-material-tag-select { + height: 30px; + padding: 0 10px; + background: rgba(0, 0, 0, 0.28); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + color: #94a3b8; + font-size: 12px; + outline: none; + cursor: pointer; + max-width: 130px; +} + +.anomalous-material-tag-select:hover { + border-color: rgba(255, 255, 255, 0.18); +} + +.anomalous-material-topbar-right { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.anomalous-material-view-switch { + display: inline-flex; + align-items: center; + background: rgba(0, 0, 0, 0.32); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 8px; + padding: 2px; +} + +.anomalous-material-view-btn { + width: 26px; + height: 26px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: transparent; + color: #64748b; + border-radius: 6px; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-material-view-btn:hover { + color: #cbd5e1; +} + +.anomalous-material-view-btn.is-active { + background: rgba(255, 255, 255, 0.09); + color: #8b5cf6; +} + +.anomalous-material-topbar-btn { + height: 30px; + padding: 0 12px; + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 8px; + font-size: 12px; + font-weight: 500; + cursor: pointer; + transition: all 0.15s ease; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.03); + color: #cbd5e1; +} + +.anomalous-material-topbar-btn:hover { + background: rgba(255, 255, 255, 0.08); + color: #fff; +} + +.anomalous-material-studio-toggle { + border-color: rgba(139, 92, 246, 0.3); + color: #8b5cf6; + background: rgba(139, 92, 246, 0.08); +} + +.anomalous-material-studio-toggle:hover { + background: rgba(139, 92, 246, 0.16); + border-color: rgba(139, 92, 246, 0.5); + color: #fca5a5; +} + +.anomalous-material-studio-toggle.is-active { + background: linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(13, 148, 136, 0.45)); + border-color: rgba(139, 92, 246, 0.6); + color: #ffffff; + box-shadow: 0 0 12px rgba(139, 92, 246, 0.25); +} + +/* 2. 主区域分屏容器 */ +.anomalous-material-main-area { + display: flex; + flex: 1; + min-height: 0; + width: 100%; + overflow: hidden; + position: relative; +} + +.anomalous-material-content { + display: flex; + flex-direction: column; + flex: 1; + min-width: 0; + min-height: 0; + overflow: hidden; +} + +/* 3. 右侧并排提示词工坊抽屉 */ +.anomalous-material-side-studio { + width: 0; + opacity: 0; + overflow: hidden; + flex-shrink: 0; + display: flex; + flex-direction: column; + border-left: 1px solid rgba(255, 255, 255, 0.08); + background: #13151b; + transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; + pointer-events: none; + z-index: 5; +} + +.anomalous-material-side-studio.is-open { + width: 400px; + opacity: 1; + pointer-events: auto; +} + +/* 侧边工坊内部版式自适应 */ +.anomalous-material-side-studio .anomalous-prompt-composer { + height: 100%; + border-radius: 0; + border: none; + background: transparent; + display: flex; + flex-direction: column; +} + +.anomalous-material-side-studio .anomalous-paper-notes-grid { + display: flex; + flex-direction: column; + gap: 16px; + padding: 12px; + overflow-y: auto; + flex: 1; +} + +.anomalous-material-side-studio .anomalous-paper-note { + width: 100%; +} + +.anomalous-material-side-studio .anomalous-prompt-topbar { + padding: 8px 12px; + flex-wrap: wrap; + gap: 6px; + height: auto; +} + +.anomalous-material-side-studio .anomalous-prompt-meta-strip { + padding: 8px 12px; + gap: 8px; +} + +/* 4. 网格与列表视图规范 (抚平坑洼，高度严格统一) */ +.anomalous-material-list { + flex: 1; + min-height: 0; + overflow-y: auto; +} + +/* 网格视图模式 */ +.anomalous-material-list.is-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + grid-auto-rows: 248px; + align-content: start; + gap: 14px; + padding: 16px; +} + +/* 列表视图模式 */ +.anomalous-material-list.is-list { + display: flex; + flex-direction: column; + gap: 6px; + padding: 12px 16px; +} + +/* 卡片基础骨架 */ +.anomalous-material-card { + position: relative; + display: flex; + min-width: 0; + overflow: hidden; + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); + background: var(--amb-bg-card, #24262E); + border-radius: var(--amb-radius-card, 10px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; + box-sizing: border-box; +} + +.anomalous-material-card:hover { + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.2)); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); +} + +.anomalous-material-card:focus-visible { + outline: 2px solid var(--amb-accent-gold, #8b5cf6); + outline-offset: 2px; +} + +/* 网格模式下的卡片几何规范 */ +.anomalous-material-list.is-grid .anomalous-material-card { + height: 248px; + max-height: 248px; + flex-direction: column; + border-radius: var(--amb-radius-card, 10px); +} + +.anomalous-material-list.is-grid .anomalous-material-card:hover { + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22)); +} + +.anomalous-material-list.is-grid .anomalous-material-card-preview { + height: 124px; + width: 100%; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: #0d0f14; + position: relative; +} + +.anomalous-material-list.is-grid .anomalous-material-card-preview img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* 无图卡片的内嵌微拟态展示 (提示词卡片 / 参数卡片) */ +.anomalous-material-card-preview.is-prompt-fallback { + background: radial-gradient(circle at 50% 35%, #192338, #0d121c); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 10px; + gap: 4px; +} + +.anomalous-material-card-preview.is-params-fallback { + background: radial-gradient(circle at 50% 35%, #142826, #0b1514); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 10px; + gap: 4px; +} + +.anomalous-material-card-preview.is-workflow-fallback { + background: radial-gradient(circle at 50% 35%, #241d33, #110d1c); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 10px; + gap: 4px; +} + +.anomalous-material-preview-snippet { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 10px; + color: #718096; + line-height: 1.35; + max-height: 42px; + overflow: hidden; + text-align: center; + word-break: break-all; + user-select: none; + opacity: 0.85; +} + +.anomalous-material-list.is-grid .anomalous-material-card-body { + flex: 1; + min-height: 0; + padding: 10px 12px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 4px; +} + +.anomalous-material-list.is-grid .anomalous-material-card-title-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + width: 100%; +} + +.anomalous-material-list.is-grid .anomalous-material-card-title-text { + flex: 1; + margin: 0; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + overflow-wrap: anywhere; + font-size: 13px; + line-height: 17px; + color: var(--amb-text-main, #f1f5f9); + font-weight: 500; +} + +.anomalous-material-list.is-grid .anomalous-material-card-meta { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: nowrap; + overflow: hidden; +} + +.anomalous-material-list.is-grid .anomalous-material-card-subinfo { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + font-size: 11px; + color: #64748b; +} + +.anomalous-material-list.is-grid .anomalous-material-card-date { + font-size: 11px; + color: #64748b; + white-space: nowrap; +} + +/* 列表模式下的单行紧凑高密度样式 */ +.anomalous-material-list.is-list .anomalous-material-card { + height: 44px; + min-height: 44px; + flex-direction: row; + align-items: center; + padding: 0 12px; + gap: 12px; + border-radius: 8px; +} + +.anomalous-material-list.is-list .anomalous-material-card:hover { + transform: translateX(2px); +} + +.anomalous-material-list.is-list .anomalous-material-card-preview { + width: 32px; + height: 32px; + border-radius: 6px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: #0d0f14; +} + +.anomalous-material-list.is-list .anomalous-material-card-preview img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.anomalous-material-list.is-list .anomalous-material-preview-snippet { + display: none; +} + +.anomalous-material-list.is-list .anomalous-material-card-body { + flex: 1; + min-width: 0; + padding: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.anomalous-material-list.is-list .anomalous-material-card-title-row { + flex: 1; + min-width: 0; + display: flex; + align-items: center; + gap: 8px; +} + +.anomalous-material-list.is-list .anomalous-material-card-title-text { + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 13px; + color: #f1f5f9; +} + +.anomalous-material-list.is-list .anomalous-material-card-meta { + flex-shrink: 0; + display: flex; + align-items: center; + gap: 6px; +} + +.anomalous-material-list.is-list .anomalous-material-card-subinfo, +.anomalous-material-list.is-list .anomalous-material-types, +.anomalous-material-list.is-list .anomalous-material-tags { + display: none; +} + +/* 列表模式下的操作区在右侧 */ +.anomalous-material-list.is-list .anomalous-material-card-actions-wrapper { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; + opacity: 0; + transition: opacity 0.15s ease; +} + +.anomalous-material-list.is-list .anomalous-material-card:hover .anomalous-material-card-actions-wrapper { + opacity: 1; +} + +/* 卡片悬浮操作按钮组 (网格与列表通用规范) */ +.anomalous-material-card-action-btn { + width: 26px; + height: 26px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(18, 20, 26, 0.85); + color: #cbd5e1; + cursor: pointer; + font-size: 12px; + backdrop-filter: blur(6px); + transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; +} + +.anomalous-material-card-action-btn:hover { + transform: scale(1.08); +} + +.anomalous-material-card-delete { + position: absolute; + top: 8px; + right: 8px; + z-index: 5; + opacity: 0; +} + +.anomalous-material-list.is-grid .anomalous-material-card:hover .anomalous-material-card-delete { + opacity: 1; +} + +.anomalous-material-card-delete:hover { + background: rgba(239, 68, 68, 0.35); + border-color: rgba(239, 68, 68, 0.6); + color: #fca5a5; +} + +.anomalous-material-card-quick-load { + position: absolute; + top: 8px; + left: 8px; + z-index: 5; + color: #8b5cf6; + border-color: rgba(139, 92, 246, 0.3); + opacity: 0; +} + +.anomalous-material-list.is-grid .anomalous-material-card:hover .anomalous-material-card-quick-load { + opacity: 1; +} + +.anomalous-material-card-quick-load:hover { + background: rgba(139, 92, 246, 0.28); + border-color: rgba(139, 92, 246, 0.6); + color: #fca5a5; +} + +.anomalous-material-card-send-studio { + position: absolute; + top: 8px; + left: 38px; + z-index: 5; + color: #cbd5e1; + border-color: rgba(255, 255, 255, 0.2); + opacity: 0; +} + +.anomalous-material-list.is-grid .anomalous-material-card:hover .anomalous-material-card-send-studio { + opacity: 1; +} + +.anomalous-material-card-send-studio:hover { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.4); + color: #ffffff; +} + +.theme-abyssal-scarlet .anomalous-material-card-send-studio { + color: #ff4d6d; + border-color: rgba(220, 20, 60, 0.35); +} + +.theme-abyssal-scarlet .anomalous-material-card-send-studio:hover { + background: rgba(220, 20, 60, 0.28); + border-color: rgba(220, 20, 60, 0.6); + color: #ffffff; +} + +/* 素材库卡片与详情头部中的明确应用替换按钮 */ +.anomalous-material-card-apply-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + width: 100%; + box-sizing: border-box; + padding: 5px 10px; + margin-top: 5px; + font-size: 11px; + font-weight: 600; + color: #ffffff; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(79, 70, 229, 0.95) 100%); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 6px; + cursor: pointer; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); + transition: all 0.15s ease; + z-index: 2; +} + +.anomalous-material-card-apply-btn:hover { + background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(67, 56, 202, 1) 100%); + transform: translateY(-1px); + box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4); +} + +.anomalous-material-card-apply-btn:disabled { + opacity: 0.65; + cursor: not-allowed; + transform: none; +} + +.anomalous-material-list.is-list .anomalous-material-card-apply-btn { + width: auto; + margin-top: 0; + padding: 4px 12px; +} + +.anomalous-material-header-apply-btn { + font-weight: 600 !important; + box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35); +} + +/* 徽标、标签与来源标记通用定义 */ +.anomalous-material-source-mark { + max-width: 100%; + overflow: hidden; + padding: 2px 6px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 999px; + background: rgba(255, 255, 255, 0.035); + color: #94a3b8; + font-size: 0.65rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-material-source-mark.is-current { + border-color: rgba(139, 92, 246, 0.25); + color: #fca5a5; +} + +.anomalous-material-source-mark.is-modified, +.anomalous-material-source-mark.is-missing { + border-color: rgba(245, 158, 11, 0.28); + background: rgba(245, 158, 11, 0.08); + color: #fbbf24; +} + +.anomalous-material-meta-pill { + padding: 2px 6px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 999px; + background: rgba(255, 255, 255, 0.035); + color: #94a3b8; + font-size: 0.65rem; + white-space: nowrap; +} + +.anomalous-material-types { + overflow: hidden; + color: #64748b; + font-size: 0.72rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-material-tags { + display: flex; + flex-wrap: wrap; + gap: 4px; + overflow: hidden; + max-height: 22px; +} + +.anomalous-material-tag { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-radius: 4px; + background: #232731; + color: #94a3b8; + padding: 1px 6px; + font-size: 11px; +} + +/* 分页器精简 */ +.anomalous-material-pager { + display: flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + gap: 12px; + padding: 8px 16px; + border-top: 1px solid rgba(255, 255, 255, 0.06); + background: #14161c; + font-size: 12px; + color: #94a3b8; +} + +.anomalous-material-pager button:disabled { + opacity: 0.35; + cursor: default; +} + +.anomalous-material-empty { + grid-column: 1 / -1; + padding: 48px 16px; + text-align: center; + color: #64748b; + font-size: 14px; +} + +.anomalous-material-editor { + display: flex; + flex: 1 0 100%; + flex-wrap: wrap; + gap: 12px; + align-items: end; +} + +.anomalous-material-editor label { + display: flex; + flex: 1 1 240px; + gap: 6px; + flex-direction: column; + font-size: 13px; +} + +.anomalous-material-editor input { + box-sizing: border-box; + min-width: 0; + max-width: 100%; + border: 1px solid #3d4350; + border-radius: 8px; + background: #1d2028; + color: #e5e9f0; + padding: 8px 10px; + font: inherit; +} + +.anomalous-library-detail-header:has(.anomalous-material-editor) { + flex-wrap: wrap; +} + +.anomalous-library-detail-view { + display: flex; + min-height: 0; + flex: 1; + flex-direction: column; + overflow: hidden; + background: #111318; +} + +.anomalous-library-detail-header { + display: flex; + align-items: center; + gap: 14px; + min-height: 72px; + padding: 12px 18px; + border-bottom: 1px solid rgba(255,255,255,.08); + background: rgba(25,27,33,.96); +} + +.anomalous-library-detail-back { + flex: 0 0 auto; + padding: 8px 11px; + border: 1px solid rgba(255,255,255,.1); + border-radius: 8px; + background: rgba(255,255,255,.04); + color: #c9cfda; + cursor: pointer; +} + +.anomalous-library-detail-back:hover { border-color: rgba(81,221,190,.42); color: #fff; } +.anomalous-library-detail-heading { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; } +.anomalous-library-detail-heading h2 { + margin: 0; + overflow: hidden; + color: #f5f7fb; + font-size: 1rem; + text-overflow: ellipsis; + white-space: nowrap; +} +.anomalous-library-detail-actions { display: flex; flex: 0 0 auto; gap: 8px; } + +.anomalous-library-detail-layout { + display: grid; + min-height: 0; + flex: 1; + grid-template-columns: minmax(300px, .88fr) minmax(410px, 1.12fr); + overflow: hidden; +} + +.anomalous-library-detail-layout.is-parameter { + grid-template-columns: minmax(220px, .48fr) minmax(410px, 1.52fr); +} + +.anomalous-library-detail-layout.is-parameter .anomalous-library-detail-image-stage { + flex: 0 0 180px; + border-color: rgba(139, 92, 246, 0.18); + background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.12), rgba(13, 15, 20, 0.9) 72%); + cursor: default; +} + +.anomalous-library-detail-media { + display: flex; + min-width: 0; + min-height: 0; + flex-direction: column; + gap: 12px; + padding: 18px; + border-right: 1px solid rgba(255,255,255,.08); + background: radial-gradient(circle at 50% 35%, #242a35, #0d0f14 72%); +} + +.anomalous-library-detail-image-stage { + display: flex; + min-height: 0; + flex: 1; + align-items: center; + justify-content: center; + overflow: hidden; + padding: 0; + border: 1px solid rgba(255,255,255,.1); + border-radius: 12px; + background: #090a0d; + color: #647083; + font-size: 42px; + cursor: zoom-in; +} + +.anomalous-library-detail-image-stage img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.anomalous-library-detail-source { + display: flex; + min-width: 0; + align-items: center; + justify-content: space-between; + gap: 4px; + padding: 10px 12px; + border: 1px solid rgba(255,255,255,.07); + border-radius: 9px; + background: rgba(0,0,0,.24); +} + +.anomalous-library-detail-source-copy { display: grid; min-width: 0; gap: 4px; } +.anomalous-library-detail-source-copy span { color: #778196; font-size: .65rem; } +.anomalous-library-detail-source-copy strong { + overflow: hidden; + color: #cbd2df; + font-size: .73rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-library-detail-source-open { + flex: 0 0 auto; + padding: 6px 9px; + border: 1px solid rgba(81,221,190,.2); + border-radius: 7px; + background: rgba(81,221,190,.07); + color: #79d9c4; + font-size: .66rem; + cursor: pointer; +} + +.anomalous-library-detail-inspector { + display: flex; + flex-direction: column; + gap: 12px; + min-width: 0; + overflow-y: auto; + padding: 20px; +} + +.anomalous-library-detail-stats { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + margin-bottom: 20px; +} + +.anomalous-library-detail-stat { + display: grid; + gap: 3px; + padding: 13px 14px; + border: 1px solid rgba(81,221,190,.16); + border-radius: 10px; + background: linear-gradient(135deg, rgba(81,221,190,.09), rgba(255,255,255,.025)); +} + +.anomalous-library-detail-stat strong { color: #68e0c3; font-size: 1.15rem; } +.anomalous-library-detail-stat span { color: #919bad; font-size: .69rem; } +.anomalous-library-detail-callout { + margin: -8px 0 18px; + padding: 9px 11px; + border-left: 2px solid #55cdb2; + border-radius: 0 7px 7px 0; + background: rgba(81,221,190,.055); + color: #9bb5b1; + font-size: .69rem; +} + +@media (max-width: 850px) { + .anomalous-library-detail-header { align-items: flex-start; flex-wrap: wrap; } + .anomalous-library-detail-heading { order: -1; flex-basis: 100%; } + .anomalous-library-detail-layout { grid-template-columns: 1fr; overflow-y: auto; } + .anomalous-library-detail-media { min-height: 390px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); } + .anomalous-library-detail-layout.is-parameter .anomalous-library-detail-media { min-height: 260px; } + .anomalous-library-detail-inspector { overflow: visible; } +} + +.anomalous-material-expanded-models { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); + gap: 7px; + margin: 8px 0 14px; +} + +.anomalous-material-expanded-model { + display: flex; + min-width: 0; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 7px 9px; + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 7px; + background: rgba(0, 0, 0, 0.16); +} + +.anomalous-material-expanded-model span { + overflow: hidden; + color: #cbd4df; + font-size: 0.7rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-material-expanded-model small { + flex: 0 0 auto; + color: #6fcbb7; + font-size: 0.62rem; +} + +/* Professional Studio Material Detail Modal */ +.anomalous-material-detail-overlay { + position: fixed; + inset: 0; + z-index: 1000000; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + background: rgba(3, 4, 7, 0.88); + backdrop-filter: blur(12px); +} + +.anomalous-material-detail-overlay.is-suspended { + visibility: hidden; + pointer-events: none; +} + +.anomalous-material-detail-dialog { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1.28fr) minmax(460px, 0.92fr); + width: min(1420px, 96vw); + height: min(900px, 92vh); + max-height: 92vh; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + background: #101217; + box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72); + overflow: hidden; +} + +.anomalous-material-detail-close { + position: absolute; + top: 14px; + right: 14px; + z-index: 10; + width: 34px; + height: 34px; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 50%; + background: rgba(18, 20, 26, 0.7); + color: #cbd5e1; + font-size: 20px; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + backdrop-filter: blur(6px); + transition: all 0.15s; +} + +.anomalous-material-detail-close:hover { + background: rgba(255, 255, 255, 0.18); + color: #fff; + transform: scale(1.06); +} + +.anomalous-material-detail-media { + position: relative; + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; + overflow: hidden; + background: + radial-gradient(ellipse at center, rgba(255, 255, 255, 0.045), transparent 58%), + #07080b; +} + +.anomalous-material-detail-stage { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + min-height: 0; +} + +.anomalous-material-detail-stage > img { + width: 100%; + height: 100%; + object-fit: contain; + user-select: none; +} + +.anomalous-material-console { + flex: 0 0 auto; + max-height: 42%; + overflow: auto; + display: flex; + flex-direction: column; + gap: 8px; + padding: 10px 12px 12px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + background: #0c0e13; +} + +.anomalous-material-filmstrip { + display: flex; + gap: 8px; + overflow-x: auto; + padding-bottom: 2px; +} + +.anomalous-material-filmstrip[hidden], +.anomalous-material-console-note-box[hidden] { + display: none; +} + +.anomalous-material-film-thumb { + flex: 0 0 56px; + width: 56px; + height: 56px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + background: #111318; +} + +.anomalous-material-film-thumb.is-clickable { + cursor: pointer; +} + +.anomalous-material-film-thumb.is-selected { + border-color: #ffffff; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); +} + +.theme-abyssal-scarlet .anomalous-material-film-thumb.is-selected { + border-color: rgba(220, 20, 60, 0.7); + box-shadow: 0 0 0 1px rgba(220, 20, 60, 0.35); +} + +.anomalous-material-film-thumb img, +.anomalous-material-film-thumb video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.anomalous-material-console-note-box { + display: grid; + gap: 4px; +} + +.anomalous-material-console-note-label { + color: #a38d53; + font-size: 0.66rem; + font-weight: 600; +} + +.anomalous-material-console-note { + margin: 0; + display: -webkit-box; + overflow: hidden; + color: #d1c9b4; + font-size: 0.74rem; + line-height: 1.4; + white-space: pre-wrap; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +.anomalous-material-media-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + min-width: 0; + font-size: 0.76rem; + color: #cbd5e1; +} + +.anomalous-material-media-bar > span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-material-media-actions { + display: flex; + flex-shrink: 0; + gap: 6px; +} + +/* Right Inspector Panel - 3-Tier Layout (Fixed Header + Scroll Body + Sticky Footer) */ +.anomalous-material-detail-side { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; + background: #14161c; + border-left: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-material-side-header { + padding: 20px 52px 14px 22px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + flex-shrink: 0; +} + +.anomalous-material-side-header h2 { + margin: 0; + font-size: 1.08rem; + font-weight: 600; + letter-spacing: -0.01em; + color: #f4f7fb; +} + +.anomalous-material-side-meta { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 10px; +} + +.anomalous-material-side-chip { + max-width: 100%; + overflow: hidden; + padding: 3px 8px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 999px; + background: rgba(255, 255, 255, 0.04); + color: #b4becc; + font-size: 0.68rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Scrollable Body */ +.anomalous-material-side-body { + flex: 1; + min-height: 0; + overflow-y: auto; + padding: 14px 22px 18px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.anomalous-material-side-body::-webkit-scrollbar { + width: 6px; +} +.anomalous-material-side-body::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.14); + border-radius: 3px; +} +.anomalous-material-side-body::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.24); +} + +/* Sticky Footer */ +.anomalous-material-side-footer { + padding: 12px 22px 16px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + background: #111318; + flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 8px; +} + +.anomalous-material-side-footer .anomalous-btn-primary { + width: 100%; + margin-left: 0; + padding: 10px 12px; + border-radius: 8px; + font-weight: 600; +} + +.anomalous-material-side-footer label { + display: grid; + gap: 6px; + color: #cbd5e1; + font-size: 0.78rem; + font-weight: 600; +} + +.anomalous-material-side-footer input { + padding: 9px 12px; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 8px; + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + font-size: 0.82rem; + outline: none; + transition: border-color 0.15s; +} + +.anomalous-material-side-footer input:focus { + border-color: rgba(255, 255, 255, 0.35); + background: rgba(255, 255, 255, 0.07); +} + +@media (max-width: 860px) { + .anomalous-material-detail-dialog { + grid-template-columns: 1fr; + height: 94vh; + } + .anomalous-material-detail-media { + min-height: 0; + max-height: 52vh; + } + .anomalous-material-detail-stage { + min-height: 160px; + } +} + +/* Ensure wide widgets (like long prompts) span full width in the node cards */ +.anomalous-recipe-detail-node-widgets .anomalous-recipe-detail-parameter-row.is-wide { + grid-column: 1 / -1; +} + +/* Reset native dialog styles for the full-screen gallery viewer */ +dialog.anomalous-gallery-viewer { + border: none; + padding: 0; + margin: auto; + max-width: none; + max-height: none; + background: transparent; +} +dialog.anomalous-gallery-viewer::backdrop { + background: rgba(0, 0, 0, 0.95); +} + +/* ========================================================================== */ +/* 🎨 Workflow Recipes Modern UI/UX Redesign Overrides */ +/* ========================================================================== */ + +.anomalous-recipe-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 360px)); + gap: 18px; + overflow-y: auto; + padding: 18px; +} + +.anomalous-recipe-list[style*="display: none"], +.anomalous-recipe-actionbar[style*="display: none"] { + display: none !important; +} + +/* ========================================================================== + Recipe Cards: Uniform 264px Bento Grid & 44px Compact List System + ========================================================================== */ + +/* 1. 网格模式下的卡片几何规范 (Bento 架构 + 发光电路回路隐喻) */ +.anomalous-recipe-list.is-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + grid-auto-rows: 264px; + align-content: start; + gap: 14px; + padding: 16px; + background-image: + radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.06) 1px, transparent 1px), + linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); + background-size: 24px 24px, 48px 48px, 48px 48px; +} + +.anomalous-recipe-list.is-list { + display: flex; + flex-direction: column; + gap: 6px; + padding: 12px 16px; +} + +/* 卡片基础骨架 */ +.anomalous-recipe-card { + position: relative; + display: flex; + min-width: 0; + overflow: hidden; + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); + background: var(--amb-bg-card, #24262E); + border-radius: var(--amb-radius-card, 10px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; + box-sizing: border-box; +} + +.anomalous-recipe-card:hover { + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.22)); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); +} + +.anomalous-recipe-card:focus-visible { + outline: 2px solid var(--amb-accent-gold, #818cf8); + outline-offset: 2px; +} + +/* 网格模式卡片 */ +.anomalous-recipe-list.is-grid .anomalous-recipe-card { + height: 264px; + max-height: 264px; + flex-direction: column; + border-radius: var(--amb-radius-card, 10px); + padding: 0; +} + +/* Bento Wide 横卡支持 (Featured / Pinned Recipes) */ +.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-featured, +.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-wide { + grid-column: span 2; + flex-direction: row; +} + +.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-featured .anomalous-recipe-card-media-wrap, +.anomalous-recipe-list.is-grid .anomalous-recipe-card.is-wide .anomalous-recipe-card-media-wrap { + width: 44%; + height: 100%; +} + +.anomalous-recipe-list.is-grid .anomalous-recipe-card:hover { + transform: translateY(-3px); +} + +/* 顶部封面展示区 (标准黄金高度 136px) */ +.anomalous-recipe-list.is-grid .anomalous-recipe-card-media-wrap { + position: relative; + width: 100%; + height: 136px; + flex-shrink: 0; + background: #0d0f14; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.anomalous-recipe-list.is-grid .anomalous-recipe-card-media-wrap img, +.anomalous-recipe-list.is-grid .anomalous-recipe-card-media-wrap video { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.25s ease; +} + +.anomalous-recipe-list.is-grid .anomalous-recipe-card:hover .anomalous-recipe-card-media-wrap img, +.anomalous-recipe-list.is-grid .anomalous-recipe-card:hover .anomalous-recipe-card-media-wrap video { + transform: scale(1.03); +} + +/* 默认封面占位图微光与材质渲染 (AI Abstract Art Blind Box) */ +.anomalous-recipe-thumbnail.is-default-placeholder { + filter: brightness(0.92) contrast(1.08); + opacity: 0.95; + transition: filter 0.25s ease, transform 0.25s ease, opacity 0.25s ease; +} + +.anomalous-recipe-card:hover .anomalous-recipe-thumbnail.is-default-placeholder { + filter: brightness(1.08) contrast(1.15); + opacity: 1; +} + +.anomalous-recipe-card-media-wrap:not(:has(img, video)) { + background-image: url('assets/default_cover_1.webp'); + background-size: cover; + background-position: center; +} + +/* 封面内嵌浮动底模与就绪微胶囊组 (Frosted Glass Chips at Bottom-Left) */ +.anomalous-recipe-cover-bottom-chips { + position: absolute; + bottom: 8px; + left: 8px; + display: flex; + align-items: center; + gap: 6px; + max-width: calc(100% - 16px); + pointer-events: none; + z-index: 2; +} + +.anomalous-recipe-readiness-pill { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 2px 7px; + border-radius: 12px; + background: rgba(12, 14, 20, 0.78); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.12); + font-size: 0.65rem; + font-weight: 500; + color: #e2e8f0; + white-space: nowrap; + box-shadow: none; +} + +.anomalous-recipe-readiness-text { + font-size: 0.64rem; + line-height: 1; + color: #cbd5e1; +} + +.anomalous-recipe-cover-pill { + position: relative; + padding: 2px 7px; + border-radius: 6px; + background: rgba(12, 14, 18, 0.82); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.12); + color: #e2e8f0; + font-size: 0.66rem; + font-weight: 500; + max-width: 140px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + box-shadow: none; +} + +/* 封面右上角作用域徽章 */ +.anomalous-recipe-scope-pill { + position: absolute; + top: 6px; + right: 6px; + padding: 2px 6px; + border-radius: 4px; + font-size: 0.65rem; + font-weight: 600; + background: rgba(10, 12, 16, 0.85); + backdrop-filter: blur(6px); + border: 1px solid rgba(255, 255, 255, 0.12); + color: #94a3b8; + pointer-events: none; +} + +.anomalous-recipe-scope-pill.is-partial { + border-color: rgba(245, 158, 11, 0.4); + color: #fbbf24; +} + +.anomalous-recipe-scope-pill.is-complete { + border-color: rgba(99, 102, 241, 0.4); + color: #a5b4fc; +} + +/* 网格卡片信息区 */ +.anomalous-recipe-list.is-grid .anomalous-recipe-card-body { + flex: 1; + min-height: 0; + padding: 9px 12px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 4px; +} + +.anomalous-recipe-list.is-grid .anomalous-recipe-card-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + width: 100%; +} + +.anomalous-recipe-list.is-grid .anomalous-recipe-card-title { + flex: 1; + margin: 0; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + overflow-wrap: anywhere; + font-size: 13px; + line-height: 17px; + color: var(--amb-text-main, #f1f5f9); + font-weight: 500; +} + +/* 环境就绪指示灯微点 */ +.anomalous-recipe-readiness-dot { + width: 6px; + height: 6px; + border-radius: 50%; + flex-shrink: 0; + box-shadow: 0 0 6px currentColor; +} + +.anomalous-recipe-readiness-dot.is-ready { + background-color: #10b981; + color: rgba(16, 185, 129, 0.7); +} + +.anomalous-recipe-readiness-dot.is-warning { + background-color: #f59e0b; + color: rgba(245, 158, 11, 0.7); +} + +.anomalous-recipe-readiness-dot.is-missing { + background-color: #ef4444; + color: rgba(239, 68, 68, 0.7); +} + +/* 规格微胶囊行 */ +.anomalous-recipe-specs-strip { + display: flex; + align-items: center; + gap: 4px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 10px; +} + +.anomalous-recipe-spec-tag { + display: inline-flex; + align-items: center; + gap: 2px; + padding: 1px 5px; + border-radius: 4px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.06); + color: #94a3b8; + white-space: nowrap; +} + +.anomalous-recipe-spec-tag.is-lora { + color: #93c5fd; + background: rgba(59, 130, 246, 0.08); + border-color: rgba(59, 130, 246, 0.2); +} + +.anomalous-recipe-spec-tag.is-step { + color: #86efac; + background: rgba(16, 185, 129, 0.08); + border-color: rgba(16, 185, 129, 0.2); +} + +/* 配方单行文本标签 (收拢至单行 Flex，溢出截断) */ +.anomalous-recipe-tags { + display: flex; + align-items: center; + gap: 4px; + width: 100%; + overflow: hidden; + white-space: nowrap; + margin-top: 2px; +} + +.anomalous-recipe-badge-tag { + display: inline-block; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.66rem; + padding: 2px 6px; + border-radius: 4px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #94a3b8; + cursor: pointer; + transition: all 0.15s ease; + flex-shrink: 0; +} + +.anomalous-recipe-badge-tag:hover { + background: rgba(255, 255, 255, 0.1); + color: #f1f5f9; +} + +/* 网格卡片底部主动作与悬浮微操作 */ +.anomalous-recipe-list.is-grid .anomalous-recipe-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + margin-top: 2px; + padding-top: 6px; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.anomalous-recipe-btn-primary-action { + position: relative; + flex: 1; + height: 32px; + padding: 0 12px; + border-radius: var(--amb-radius-control, 6px); + background: var(--amb-btn-primary-bg, #D7D9E0); + color: var(--amb-btn-primary-text, #15171C); + border: 1px solid rgba(255, 255, 255, 0.2); + font-size: 12px; + font-weight: 600; + letter-spacing: 0.2px; + cursor: pointer; + text-align: center; + transition: background-color 0.15s ease, border-color 0.15s ease; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + overflow: hidden; + box-shadow: none; + user-select: none; + box-sizing: border-box; +} + +.anomalous-recipe-btn-primary-action:hover { + background: var(--amb-btn-primary-hover, #E5E7EB); + border-color: rgba(255, 255, 255, 0.4); + box-shadow: none; +} + +.anomalous-recipe-btn-primary-action:active { + transform: translateY(1px); + filter: brightness(0.95); +} + filter: brightness(0.95); +} + +.anomalous-recipe-card-mini-actions { + display: flex; + align-items: center; + gap: 3px; + opacity: 0; + transition: opacity 0.15s ease; +} + +.anomalous-recipe-card:hover .anomalous-recipe-card-mini-actions { + opacity: 1; +} + +.anomalous-recipe-card-mini-btn { + width: 24px; + height: 24px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 5px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.09); + color: #94a3b8; + cursor: pointer; + font-size: 11px; + transition: all 0.15s ease; +} + +.anomalous-recipe-card-mini-btn:hover { + background: rgba(255, 255, 255, 0.12); + color: #fff; + transform: translateY(-1px); +} + +.anomalous-recipe-card-mini-btn.is-delete:hover { + background: rgba(239, 68, 68, 0.3); + border-color: rgba(239, 68, 68, 0.5); + color: #fca5a5; +} + +/* 2. 紧凑行列表模式 (44px 极速视图) */ +.anomalous-recipe-list.is-list .anomalous-recipe-card { + height: 44px; + min-height: 44px; + flex-direction: row; + align-items: center; + padding: 0 12px; + gap: 12px; + border-radius: 8px; +} + +.anomalous-recipe-list.is-list .anomalous-recipe-card:hover { + transform: translateX(2px); +} + +.anomalous-recipe-list.is-list .anomalous-recipe-card-media-wrap { + width: 32px; + height: 32px; + border-radius: 6px; + flex-shrink: 0; + overflow: hidden; + background: #0d0f14; +} + +.anomalous-recipe-list.is-list .anomalous-recipe-cover-pill, +.anomalous-recipe-list.is-list .anomalous-recipe-scope-pill, +.anomalous-recipe-list.is-list .anomalous-recipe-specs-strip { + display: none; +} + +.anomalous-recipe-list.is-list .anomalous-recipe-card-body { + flex: 1; + min-width: 0; + padding: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.anomalous-recipe-list.is-list .anomalous-recipe-card-header { + flex: 1; + min-width: 0; + display: flex; + align-items: center; + gap: 8px; +} + +.anomalous-recipe-list.is-list .anomalous-recipe-card-title { + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 13px; + color: #f1f5f9; +} + +.anomalous-recipe-list.is-list .anomalous-recipe-card-footer { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + margin: 0; + padding: 0; + border: none; +} + +.anomalous-recipe-list.is-list .anomalous-recipe-btn-primary-action { + flex: 0 0 auto; + height: 26px; + padding: 0 10px; +} + +/* Detail View: Readiness Banner */ +.anomalous-recipe-readiness-banner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 16px; + border-radius: 10px; + margin-bottom: 12px; + font-size: 0.88rem; + backdrop-filter: blur(10px); +} + +.anomalous-recipe-readiness-banner.is-ready { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.08)); + border: 1px solid rgba(16, 185, 129, 0.35); + color: #fda4af; +} + +.anomalous-recipe-readiness-banner.is-warning { + background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.08)); + border: 1px solid rgba(245, 158, 11, 0.4); + color: #fde68a; +} + +.anomalous-recipe-readiness-banner.is-missing { + background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(185, 28, 28, 0.08)); + border: 1px solid rgba(239, 68, 68, 0.4); + color: #fecaca; +} + +.anomalous-recipe-banner-btn { + padding: 6px 14px; + border-radius: 7px; + font-size: 0.82rem; + font-weight: 600; + cursor: pointer; + border: none; + transition: all 0.2s ease; + white-space: nowrap; +} + +.anomalous-recipe-banner-btn.is-match-all { + background: #f59e0b; + color: #1a1a1a; + box-shadow: none; +} + +.anomalous-recipe-banner-btn.is-match-all:hover { + filter: brightness(1.1); + transform: translateY(-1px); +} + +/* Metric Cards for Sampling Parameters */ +.anomalous-recipe-metric-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + gap: 10px; + margin-bottom: 14px; +} + +.anomalous-recipe-metric-card { + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 12px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.07); +} + +.anomalous-recipe-metric-label { + font-size: 0.74rem; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.anomalous-recipe-metric-value { + font-size: 1.1rem; + font-weight: 600; + color: #f8fafc; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Lazy Loaded Raw Nodes Container */ +.anomalous-recipe-raw-nodes-summary { + padding: 10px 14px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #93c5fd; + cursor: pointer; + user-select: none; + font-size: 0.85rem; + font-weight: 500; + transition: background 0.2s; +} + +.anomalous-recipe-raw-nodes-summary:hover { + background: rgba(255, 255, 255, 0.06); +} + +.anomalous-recipe-lazy-expand-btn { + width: 100%; + margin-top: 10px; + padding: 9px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #cbd5e1; + font-size: 0.82rem; + cursor: pointer; + transition: background 0.2s, border-color 0.2s; +} + +.anomalous-recipe-lazy-expand-btn:hover { + background: rgba(255, 255, 255, 0.09); + border-color: rgba(255, 255, 255, 0.18); +} + +.anomalous-recipe-readiness-pill.is-ready { + background: rgba(16, 185, 129, 0.16); + border-color: rgba(16, 185, 129, 0.45); + color: #6ee7b7; +} + +.anomalous-recipe-readiness-pill.is-warning { + background: rgba(245, 158, 11, 0.16); + border-color: rgba(245, 158, 11, 0.45); + color: #fcd34d; +} + +.anomalous-recipe-readiness-pill.is-missing { + background: rgba(239, 68, 68, 0.16); + border-color: rgba(239, 68, 68, 0.45); + color: #fca5a5; +} + +.anomalous-recipe-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-top: auto; + padding-top: 8px; + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-recipe-btn-primary-action { + flex: 1; + padding: 8px 14px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.18); + color: #f1f5f9; + font-size: 0.82rem; + font-weight: 500; + cursor: pointer; + text-align: center; + transition: all 0.15s ease; +} + +.anomalous-recipe-btn-primary-action:hover { + background: rgba(255, 255, 255, 0.16); + border-color: rgba(255, 255, 255, 0.28); + color: #ffffff; +} + +.anomalous-recipe-card-mini-actions { + display: flex; + align-items: center; + gap: 4px; +} + +.anomalous-recipe-card-mini-btn { + padding: 6px 8px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #94a3b8; + cursor: pointer; + font-size: 0.85rem; + line-height: 1; + transition: all 0.15s ease; +} + +.anomalous-recipe-card-mini-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: #fff; + border-color: rgba(255, 255, 255, 0.15); +} + + +.anomalous-recipe-banner-btn.is-match-all { + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.14); + color: #e2e8f0; +} + +.anomalous-recipe-banner-btn.is-match-all:hover { + background: rgba(255, 255, 255, 0.14); + color: #ffffff; +} + +/* Metric Cards for Sampling Parameters */ +.anomalous-recipe-metric-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + gap: 10px; + margin-bottom: 14px; +} + +.anomalous-recipe-metric-card { + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 12px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.07); +} + +.anomalous-recipe-metric-label { + font-size: 0.74rem; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.anomalous-recipe-metric-value { + font-size: 1.1rem; + font-weight: 600; + color: #f8fafc; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Lazy Loaded Raw Nodes Container */ +.anomalous-recipe-raw-nodes-summary { + padding: 10px 14px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #93c5fd; + cursor: pointer; + user-select: none; + font-size: 0.85rem; + font-weight: 500; + transition: background 0.2s; +} + +.anomalous-recipe-raw-nodes-summary:hover { + background: rgba(255, 255, 255, 0.06); +} + +.anomalous-recipe-lazy-expand-btn { + width: 100%; + margin-top: 10px; + padding: 9px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #cbd5e1; + font-size: 0.82rem; + cursor: pointer; + transition: all 0.2s; +} + +.anomalous-recipe-lazy-expand-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: #fff; +} + diff --git a/web/styles/05-recipe-studio-overrides.css b/web/styles/05-recipe-studio-overrides.css new file mode 100644 index 0000000..c0e4f28 --- /dev/null +++ b/web/styles/05-recipe-studio-overrides.css @@ -0,0 +1,587 @@ +/* Studio Layout Overhaul */ +.anomalous-recipe-detail-overview .anomalous-recipe-detail-hero { + display: grid !important; + grid-template-columns: 260px minmax(0, 1fr) !important; + gap: 20px !important; + align-items: start !important; + padding: 16px !important; + border-radius: 14px !important; + background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85)) !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; + margin-bottom: 16px !important; + backdrop-filter: blur(12px); +} + +.anomalous-recipe-detail-hero-media { + position: relative; + width: 100%; + height: 220px; + border-radius: 10px; + overflow: hidden; + background: #0d0e11; + border: 1px solid rgba(255, 255, 255, 0.06); + display: flex; + align-items: center; + justify-content: center; +} + +.anomalous-recipe-detail-hero-media img, +.anomalous-recipe-detail-hero-media video { + width: 100% !important; + height: 100% !important; + max-height: none !important; + object-fit: cover !important; + border-radius: 9px; + cursor: pointer; + transition: transform 0.25s ease; +} + +.anomalous-recipe-detail-hero-media:hover img { + transform: scale(1.02); +} + +.anomalous-recipe-studio-metrics { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); + gap: 8px; + margin: 12px 0 8px 0; +} + +.anomalous-recipe-studio-metric-tile { + display: flex; + flex-direction: column; + gap: 2px; + padding: 8px 10px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.035); + border: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-recipe-studio-metric-label { + font-size: 0.72rem; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.3px; +} + +.anomalous-recipe-studio-metric-val { + font-size: 0.96rem; + font-weight: 600; + color: #f1f5f9; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Prompt Showcase Boxes - Ultra-clean Dark Glassmorphism */ +.anomalous-recipe-prompt-box { + position: relative; + padding: 14px 16px; + border-radius: 10px; + margin-bottom: 12px; + font-size: 0.84rem; + line-height: 1.6; + word-break: break-word; + background: rgba(255, 255, 255, 0.025); + border: 1px solid rgba(255, 255, 255, 0.07); + color: #cbd5e1; + transition: border-color 0.2s ease, background 0.2s ease; +} + +.anomalous-recipe-prompt-box:hover { + background: rgba(255, 255, 255, 0.035); + border-color: rgba(255, 255, 255, 0.12); +} + +.anomalous-recipe-prompt-box.is-positive { + border-left: 3px solid rgba(16, 185, 129, 0.6); +} + +.anomalous-recipe-prompt-box.is-negative { + border-left: 3px solid rgba(244, 63, 94, 0.6); +} + +.anomalous-recipe-prompt-micro-copy { + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + padding: 0; + border-radius: 6px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #94a3b8; + cursor: pointer; + transition: all 0.18s ease; +} + +.anomalous-recipe-prompt-micro-copy:hover { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.25); + color: #ffffff; + transform: translateY(-1px); +} + +.anomalous-recipe-prompt-micro-copy.is-copied { + background: rgba(16, 185, 129, 0.2) !important; + border-color: rgba(16, 185, 129, 0.4) !important; + color: #34d399 !important; +} + +.anomalous-recipe-prompt-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 2px 8px; + border-radius: 6px; + font-size: 0.74rem; + font-weight: 600; + letter-spacing: 0.2px; +} + +.anomalous-recipe-prompt-badge.is-positive { + background: rgba(16, 185, 129, 0.12); + color: #34d399; + border: 1px solid rgba(16, 185, 129, 0.25); +} + +.anomalous-recipe-prompt-badge.is-negative { + background: rgba(244, 63, 94, 0.12); + color: #fb7185; + border: 1px solid rgba(244, 63, 94, 0.25); +} + +.anomalous-recipe-beta-notice[style*="display: none"] { + display: none !important; +} + +/* ========================================================================== */ +/* Modern Studio Presets (Parameter Notebook Overhaul) */ +/* ========================================================================== */ + +.anomalous-preset-btn-primary { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 8px 14px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.18); + color: #f1f5f9; + font-size: 0.82rem; + font-weight: 500; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-preset-btn-primary:hover { + background: rgba(255, 255, 255, 0.18); + border-color: rgba(255, 255, 255, 0.28); + color: #ffffff; +} + +.anomalous-preset-btn-secondary { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 8px 12px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.035); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #94a3b8; + font-size: 0.82rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-preset-btn-secondary:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.15); + color: #cbd5e1; +} + +.anomalous-preset-item-card { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + min-width: 0; + padding: 10px 12px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.07); + cursor: pointer; + transition: all 0.15s ease; + margin-bottom: 6px; +} + +.anomalous-preset-item-card:hover { + background: rgba(255, 255, 255, 0.045); + border-color: rgba(255, 255, 255, 0.14); +} + +.anomalous-preset-item-card.is-active { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(16, 185, 129, 0.4); + box-shadow: inset 3px 0 0 #10b981; +} + +.anomalous-preset-active-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: #10b981; + flex-shrink: 0; + display: inline-block; +} + +.anomalous-preset-item-title-row { + width: 100%; + min-width: 0; + display: flex; + align-items: center; + gap: 6px; + overflow: hidden; +} + +.anomalous-recipe-info-bubble { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 7px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #94a3b8; + font-size: 0.74rem; + transition: all 0.15s ease; +} + +.anomalous-recipe-info-bubble:hover { + background: rgba(255, 255, 255, 0.08); + color: #e2e8f0; + border-color: rgba(255, 255, 255, 0.16); +} + +.anomalous-preset-item-main { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 4px; +} + +.anomalous-preset-item-title { + font-size: 0.86rem; + font-weight: 500; + color: #cbd5e1; + min-width: 0; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-preset-item-card.is-active .anomalous-preset-item-title { + color: #ffffff; + font-weight: 600; +} + +.anomalous-preset-item-meta { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.72rem; + color: #64748b; +} + +.anomalous-preset-item-badge { + padding: 1px 6px; + border-radius: 4px; + background: rgba(255, 255, 255, 0.08); + color: #94a3b8; + font-size: 0.68rem; + font-weight: 500; +} + +.anomalous-preset-item-actions { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; + opacity: 0.35; + transition: opacity 0.15s ease; +} + +.anomalous-preset-item-card:hover .anomalous-preset-item-actions { + opacity: 1; +} + +.anomalous-preset-item-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + padding: 0; + border-radius: 6px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #cbd5e1; + cursor: pointer; + font-size: 0.78rem; + line-height: 1; + transition: all 0.15s; + box-sizing: border-box; +} + +.anomalous-preset-item-btn:hover { + background: rgba(255, 255, 255, 0.16); + color: #fff; + transform: translateY(-1px); +} + +.anomalous-preset-item-btn.is-delete:hover { + background: rgba(239, 68, 68, 0.2); + border-color: rgba(239, 68, 68, 0.4); + color: #fca5a5; +} + +/* Modern Parameter Bento Matrix */ +.anomalous-preset-bento-deck { + background: var(--amb-bg-panel, #1C1E24) !important; + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)) !important; + border-radius: var(--amb-radius-panel, 12px) !important; + padding: 12px 14px !important; + margin-bottom: 12px !important; +} + +.anomalous-recipe-bento-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 8px; + margin-bottom: 8px; +} + +.anomalous-recipe-bento-tile { + position: relative; + display: flex; + flex-direction: column; + gap: 4px; + padding: 9px 12px; + border-radius: var(--amb-radius-control, 8px); + background: var(--amb-bg-card, #24262E); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.07)); + transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; +} + +.anomalous-recipe-bento-tile.is-interactive { + cursor: pointer; +} + +.anomalous-recipe-bento-tile:hover { + background: var(--amb-bg-card-hover, #2d303a); + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.18)); + transform: translateY(-1px); +} + +.anomalous-recipe-bento-label-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 6px; +} + +.anomalous-recipe-bento-label { + display: inline-flex; + align-items: center; + font-size: 0.7rem; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.3px; + font-weight: 600; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-bento-val { + font-size: 0.98rem; + font-weight: 600; + color: #f1f5f9; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-models-bento-deck { + display: grid; + gap: 8px; + margin-top: 10px; +} + +.anomalous-recipe-model-highlight-card { + padding: 10px 14px; + border-radius: 8px; + background: rgba(99, 102, 241, 0.08); + border: 1px solid rgba(99, 102, 241, 0.2); + min-width: 0; +} + +.anomalous-recipe-lora-stack { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: 4px; +} + +.anomalous-recipe-lora-pill { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + min-width: 0; + padding: 8px 12px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + font-size: 0.82rem; + transition: all 0.15s ease; +} + +.anomalous-recipe-lora-pill:hover { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(99, 102, 241, 0.3); + transform: translateY(-1px); +} + +.anomalous-recipe-lora-name { + flex: 1; + min-width: 0; + color: #e2e8f0; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-recipe-lora-weights { + flex-shrink: 0; + display: inline-flex; + align-items: center; + gap: 8px; + font-size: 0.72rem; + color: #94a3b8; + font-family: ui-monospace, monospace; +} + +/* Preset Console Header (Right Main Stage) */ +.anomalous-preset-console-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; + padding: 16px 18px; + border-radius: 12px; + background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85)); + border: 1px solid rgba(255, 255, 255, 0.08); + margin-bottom: 14px; + backdrop-filter: blur(12px); + flex-wrap: wrap; +} + +.anomalous-preset-console-info { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 6px; +} + +.anomalous-preset-console-title-row { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.anomalous-preset-console-title { + font-size: 1.15rem; + font-weight: 600; + color: #f8fafc; + margin: 0; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.anomalous-preset-console-actions { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + margin-top: 4px; +} + +.anomalous-preset-compact-gallery { + position: relative; + width: 120px; + height: 80px; + border-radius: 8px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.12); + cursor: pointer; + flex-shrink: 0; + align-self: flex-start; + margin-top: 2px; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); + transition: transform 0.2s ease, border-color 0.2s ease; +} + +.anomalous-preset-compact-gallery:hover { + transform: scale(1.03); + border-color: rgba(99, 102, 241, 0.5); +} + +.anomalous-preset-compact-gallery img { + width: 100% !important; + height: 100% !important; + max-height: none !important; + object-fit: cover !important; +} + +.anomalous-preset-compact-gallery-badge { + position: absolute; + bottom: 4px; + right: 4px; + padding: 2px 6px; + border-radius: 4px; + background: rgba(0, 0, 0, 0.75); + color: #fff; + font-size: 0.68rem; + backdrop-filter: blur(4px); + white-space: nowrap; +} + +/* Sticky Header in Parameter Editor */ +.anomalous-recipe-parameter-editor-sticky-header { + position: sticky; + top: 0; + z-index: 10; + padding: 10px 0; + background: rgba(32, 32, 32, 0.92); + backdrop-filter: blur(8px); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + margin-bottom: 12px; + display: flex; + align-items: center; + justify-content: space-between; +} + +/* ========================================================================== */ diff --git a/web/styles/06-material-workbench.css b/web/styles/06-material-workbench.css new file mode 100644 index 0000000..3600d31 --- /dev/null +++ b/web/styles/06-material-workbench.css @@ -0,0 +1,2198 @@ +/* Material Snapshot Progressive Disclosure Styles */ +/* ========================================================================== */ + +.anomalous-material-section-label { + margin: 4px 0 0; + color: #8d96a8; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.06em; +} + +.anomalous-material-metric-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 7px; +} + +.anomalous-material-metric-card { + display: flex; + flex-direction: column; + gap: 4px; + min-width: 0; + padding: 9px 10px; + border-radius: 9px; + background: rgba(255, 255, 255, 0.035); + border: 1px solid rgba(255, 255, 255, 0.07); +} + +.anomalous-material-metric-card.is-wide { + grid-column: 1 / -1; +} + +.anomalous-material-metric-label { + font-size: 0.66rem; + color: #8b95a7; +} + +.anomalous-material-metric-val { + color: #eef3f9; + font-size: 0.88rem; + font-weight: 600; + font-variant-numeric: tabular-nums; + line-height: 1.25; + overflow-wrap: anywhere; +} + +.anomalous-material-prompt-card { + position: relative; + padding: 10px 12px 10px 13px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-left-width: 3px; + border-radius: 9px; + background: rgba(255, 255, 255, 0.03); + color: #cbd5e1; + font-size: 0.8rem; + line-height: 1.5; +} + +.anomalous-material-prompt-card.is-positive { + border-left-color: #8b5cf6; +} + +.anomalous-material-prompt-card.is-negative { + border-left-color: #f87171; +} + +.anomalous-material-prompt-content { + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + max-height: 4.6em; + overflow: hidden; + color: #d5dce8; + font-size: 0.76rem; + white-space: pre-wrap; + word-break: break-word; +} + +.anomalous-material-prompt-content.is-expanded { + max-height: none !important; + overflow: visible !important; +} + +.anomalous-material-prompt-bar { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 6px; +} + +.anomalous-material-prompt-bar-label { + font-size: 0.75rem; + font-weight: 600; + color: #94a3b8; +} + +.anomalous-material-prompt-bar-btns { + display: flex; + align-items: center; + gap: 6px; +} + +.anomalous-material-mini-btn { + padding: 2px 7px; + border-radius: 5px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #cbd5e1; + font-size: 0.7rem; + cursor: pointer; + transition: all 0.15s; +} + +.anomalous-material-mini-btn:hover { + background: rgba(255, 255, 255, 0.14); + color: #fff; +} + +.anomalous-material-model-peek { + display: flex; + flex-direction: column; + gap: 8px; +} + +.anomalous-material-model-card-item.is-primary { + padding: 9px 11px; + border-color: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); +} + +.theme-abyssal-scarlet .anomalous-material-model-card-item.is-primary { + border-color: rgba(220, 20, 60, 0.22); + background: rgba(220, 20, 60, 0.06); +} + +.anomalous-material-model-peek-counts { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.anomalous-material-peek-chip { + padding: 2px 8px; + border-radius: 999px; + font-size: 0.68rem; + font-weight: 600; +} + +.anomalous-material-accordion { + border-radius: 9px; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.07); +} + +.anomalous-material-accordion > summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 9px 12px; + font-size: 0.78rem; + font-weight: 500; + color: #cbd5e1; + cursor: pointer; + user-select: none; + list-style: none; + background: rgba(255, 255, 255, 0.025); + border-radius: 9px; + transition: background 0.15s; +} + +.anomalous-material-accordion > summary::-webkit-details-marker { + display: none; +} + +.anomalous-material-accordion > summary::after { + content: ''; + flex-shrink: 0; + width: 6px; + height: 6px; + border-right: 1.5px solid #9aa3b5; + border-bottom: 1.5px solid #9aa3b5; + transform: rotate(45deg); + transition: transform 0.15s; +} + +.anomalous-material-accordion > summary:hover { + background: rgba(255, 255, 255, 0.05); + color: #f1f5f9; +} + +.anomalous-material-accordion[open] > summary { + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.anomalous-material-accordion[open] > summary::after { + transform: rotate(225deg); +} + +.anomalous-material-accordion-content { + padding: 10px 12px; + font-size: 0.78rem; +} + +/* Chips list for node types */ +.anomalous-material-chip-flow { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.anomalous-material-chip { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 8px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #94a3b8; + font-size: 0.73rem; +} + +.anomalous-material-chip-count { + font-size: 0.68rem; + opacity: 0.6; +} + +/* Lazy, two-level disclosure for the exact serialized node parameters. */ +.anomalous-material-node-list { + display: flex; + flex-direction: column; + gap: 7px; + margin-top: 10px; +} + +.anomalous-material-node-detail { + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 7px; + background: rgba(5, 7, 11, 0.22); +} + +.anomalous-material-node-detail.is-selected { + border-color: rgba(139, 92, 246, 0.34); + background: rgba(139, 92, 246, 0.045); +} + +.anomalous-material-node-select { + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + flex: 0 0 16px; + margin: 0; + border-radius: 4px; + border: 1.5px solid rgba(255, 255, 255, 0.22); + background-color: rgba(20, 10, 16, 0.6); + cursor: pointer; + position: relative; + outline: none; + display: inline-grid; + place-content: center; + vertical-align: middle; + transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; +} + +.anomalous-material-node-select:hover { + border-color: rgba(139, 92, 246, 0.6); + background-color: rgba(139, 92, 246, 0.08); +} + +.anomalous-material-node-select:checked { + background-color: #8b5cf6; + border-color: #8b5cf6; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0f17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); + background-size: 11px 11px; + background-position: center; + background-repeat: no-repeat; + box-shadow: 0 0 8px rgba(139, 92, 246, 0.35); +} + +.anomalous-material-node-select:focus-visible { + outline: 2px solid #8b5cf6; + outline-offset: 2px; +} + +.anomalous-material-node-detail > summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 8px 10px; + color: #d8dee9; + cursor: pointer; + user-select: none; + list-style: none; +} + +.anomalous-material-node-detail > summary::-webkit-details-marker { + display: none; +} + +.anomalous-material-node-detail > summary:hover { background: rgba(255, 255, 255, 0.035); } +.anomalous-material-node-detail[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } + +.anomalous-material-node-heading { + display: flex; + min-width: 0; + flex: 1; + align-items: center; + flex-wrap: wrap; + gap: 6px; +} + +.anomalous-material-node-heading strong, +.anomalous-material-node-heading small { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-material-node-heading strong { font-size: 0.77rem; font-weight: 600; } +.anomalous-material-node-heading small { color: #788396; font-size: 0.67rem; font-family: monospace; } +.anomalous-material-node-count { flex-shrink: 0; color: #8290a5; font-size: 0.68rem; } + +.anomalous-material-prompt-role-select { + width: auto; + max-width: 190px; + flex: 0 1 190px; + padding-block: 5px; + font-size: 0.68rem; +} + +.anomalous-material-node-save, +.anomalous-workbench-save-selected-btn { + flex: 0 0 auto; + padding: 5px 9px; + border: 1px solid rgba(139, 92, 246, 0.24); + border-radius: 6px; + background: rgba(139, 92, 246, 0.08); + color: #8fe1d4; + font-size: 0.66rem; + cursor: pointer; +} + +.anomalous-material-node-save:hover, +.anomalous-workbench-save-selected-btn:hover:not(:disabled) { + border-color: rgba(139, 92, 246, 0.42); + background: rgba(139, 92, 246, 0.14); + color: #d8fff8; +} + +.anomalous-material-node-save:disabled, +.anomalous-workbench-save-selected-btn:disabled { + cursor: default; + opacity: 0.5; +} + +.anomalous-material-node-parameter-content { + display: flex; + flex-direction: column; + gap: 7px; + padding: 9px; +} + +.anomalous-material-node-meta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 7px; + color: #7f8a9d; + font-size: 0.67rem; +} + +.anomalous-material-node-meta button { margin-left: auto; } + +.anomalous-material-parameter-row { + display: grid; + grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr); + gap: 10px; + align-items: start; + padding: 7px 8px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.025); +} + +.anomalous-material-parameter-label { + display: flex; + min-width: 0; + align-items: center; + flex-wrap: wrap; + gap: 5px; + padding-top: 2px; + color: #aab3c2; + font-size: 0.7rem; +} + +.anomalous-material-parameter-label code { + color: #687487; + font-size: 0.62rem; +} + +.anomalous-material-volatile-badge { + padding: 1px 5px; + border: 1px solid rgba(245, 158, 11, 0.22); + border-radius: 999px; + background: rgba(245, 158, 11, 0.08); + color: #d6a756; + font-size: 0.59rem; +} + +.anomalous-material-parameter-value { + max-height: 150px; + overflow: auto; + margin: 0; + padding: 6px 8px; + border: 1px solid rgba(255, 255, 255, 0.055); + border-radius: 5px; + background: rgba(0, 0, 0, 0.18); + color: #d5dae4; + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + font-size: 0.67rem; + line-height: 1.4; + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +@media (max-width: 560px) { + .anomalous-material-parameter-row { grid-template-columns: 1fr; } +} + +.anomalous-material-blocks-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + margin: 18px 0 10px; +} + +.anomalous-material-blocks-header .anomalous-material-section-label { + margin: 0; +} + +.anomalous-material-toggle-all-btn { + padding: 3px 9px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 6px; + background: rgba(255, 255, 255, 0.04); + color: #94a3b8; + font-size: 0.68rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-material-toggle-all-btn:hover { + border-color: rgba(81, 221, 190, 0.35); + background: rgba(81, 221, 190, 0.08); + color: #e2e8f0; +} + +/* Material Prompt Station */ +.anomalous-material-prompt-station { + display: flex; + flex-direction: column; + gap: 8px; + padding: 10px 12px; + border: 1px solid rgba(81, 221, 190, 0.2); + border-radius: 8px; + background: rgba(13, 17, 23, 0.65); +} + +.anomalous-material-prompt-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.anomalous-material-prompt-title-sec { + display: flex; + align-items: center; + gap: 8px; +} + +.anomalous-material-prompt-title { + font-size: 0.76rem; + font-weight: 600; + color: #6ee7b7; +} + +.anomalous-material-prompt-count { + font-size: 0.68rem; + color: #64748b; +} + +.anomalous-material-copy-prompt-btn { + padding: 3px 8px; + border: 1px solid rgba(81, 221, 190, 0.3); + border-radius: 5px; + background: rgba(81, 221, 190, 0.1); + color: #8fe1d4; + font-size: 0.68rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-material-copy-prompt-btn:hover { + background: rgba(81, 221, 190, 0.22); + border-color: rgba(81, 221, 190, 0.5); + color: #fff; +} + +.anomalous-material-prompt-body { + max-height: 180px; + overflow-y: auto; + font-family: inherit; + font-size: 0.74rem; + line-height: 1.45; + color: #cbd5e1; + white-space: pre-wrap; + word-break: break-word; + padding: 7px 9px; + background: rgba(0, 0, 0, 0.28); + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.04); +} + +/* Model Categorized Groups */ +.anomalous-material-model-group { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: 10px; +} + +.anomalous-material-model-group:last-child { + margin-bottom: 0; +} + +.anomalous-material-model-group-title { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.72rem; + font-weight: 600; + color: #94a3b8; + padding-bottom: 3px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.anomalous-material-model-card-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 6px 10px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.025); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.anomalous-material-model-card-item.is-clickable { + cursor: pointer; +} + +.anomalous-material-model-card-item.is-active { + border-color: rgba(56, 189, 248, 0.45); + background: rgba(56, 189, 248, 0.08); +} + +.theme-abyssal-scarlet .anomalous-material-model-card-item.is-active { + border-color: rgba(220, 20, 60, 0.45); + background: rgba(220, 20, 60, 0.08); +} + +.anomalous-material-model-thumb { + flex: 0 0 48px; + width: 48px; + height: 48px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 7px; + background: #0b0c10; +} + +.anomalous-material-model-thumb img, +.anomalous-material-model-thumb video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.anomalous-material-model-side { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 6px; + flex-shrink: 0; +} + +.anomalous-material-model-notes { + display: -webkit-box; + overflow: hidden; + color: #c4b48a; + font-size: 0.7rem; + line-height: 1.35; + white-space: pre-wrap; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.anomalous-material-model-info { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; + flex: 1; +} + +.anomalous-material-model-filename { + color: #e2e8f0; + font-size: 0.79rem; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-material-model-params { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.71rem; + color: #94a3b8; +} + +.anomalous-material-model-tag-badge { + padding: 2px 7px; + border-radius: 4px; + font-size: 0.68rem; + font-weight: 600; + flex-shrink: 0; +} + +.anomalous-tag-base { + background: rgba(255, 255, 255, 0.08); + color: #cbd5e1; + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.theme-abyssal-scarlet .anomalous-tag-base { + background: rgba(220, 20, 60, 0.18); + color: #ff3366; + border: 1px solid rgba(220, 20, 60, 0.45); +} + +.anomalous-tag-lora { + background: rgba(192, 132, 252, 0.12); + color: #c084fc; + border: 1px solid rgba(192, 132, 252, 0.25); +} + +.anomalous-tag-vae { + background: rgba(251, 146, 60, 0.12); + color: #fb923c; + border: 1px solid rgba(251, 146, 60, 0.25); +} + +.anomalous-tag-clip { + background: rgba(139, 92, 246, 0.12); + color: #8b5cf6; + border: 1px solid rgba(139, 92, 246, 0.25); +} + +.anomalous-tag-other { + background: rgba(148, 163, 184, 0.12); + color: #94a3b8; + border: 1px solid rgba(148, 163, 184, 0.25); +} + +/* ========================================================================== + Image Detail Studio Workbench (Studio Windowed Modal & Bento Design) + ========================================================================== */ + +.anomalous-workbench-overlay { + position: fixed; + inset: 0; + z-index: 1000000; + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; + padding: clamp(16px, 2.5vw, 24px); + box-sizing: border-box; + background: rgba(3, 4, 7, 0.88); + backdrop-filter: blur(16px); + overflow: hidden; + user-select: none; +} + +.anomalous-workbench-overlay.is-suspended { + visibility: hidden; + pointer-events: none; +} + +.anomalous-workbench-dialog { + position: relative; + display: flex; + flex-direction: column; + width: min(1600px, 96vw); + height: min(940px, 94vh); + background: #0b0d14; + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 32px 96px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.05); + overflow: hidden; +} + +/* Workbench Top Header */ +.anomalous-workbench-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + height: 54px; + padding: 0 18px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: #0f121a; + gap: 16px; +} + +.anomalous-workbench-header-left { + display: flex; + align-items: center; + gap: 12px; + min-width: 0; + flex: 1; +} + +.anomalous-workbench-back-btn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); + color: #cbd5e1; + font-size: 20px; + cursor: pointer; + transition: all 0.15s; + line-height: 1; +} + +.anomalous-workbench-back-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: #fff; + border-color: rgba(255, 255, 255, 0.2); +} + +.anomalous-workbench-title-box { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + overflow: hidden; +} + +.anomalous-workbench-title-filename { + font-size: 0.92rem; + font-weight: 600; + color: #f1f5f9; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.anomalous-workbench-title-tags { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; +} + +.anomalous-workbench-tag { + padding: 2px 7px; + border-radius: 5px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #94a3b8; + font-size: 0.68rem; + font-weight: 500; +} + +.anomalous-workbench-tag.is-ext { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.16); + color: #cbd5e1; + font-weight: 700; +} + +.theme-abyssal-scarlet .anomalous-workbench-tag.is-ext { + background: rgba(220, 20, 60, 0.1); + border-color: rgba(220, 20, 60, 0.25); + color: #dc143c; +} + +/* Center switcher counter */ +.anomalous-workbench-header-center { + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; + background: rgba(0, 0, 0, 0.35); + padding: 3px 8px; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-workbench-nav-btn { + display: flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + border-radius: 50%; + border: none; + background: transparent; + color: #cbd5e1; + font-size: 18px; + cursor: pointer; + transition: all 0.15s; + line-height: 1; +} + +.anomalous-workbench-nav-btn:not(:disabled):hover { + background: rgba(255, 255, 255, 0.12); + color: #fff; +} + +.anomalous-workbench-nav-btn:disabled { + opacity: 0.25; + cursor: not-allowed; +} + +.anomalous-workbench-counter { + font-size: 0.8rem; + font-weight: 600; + color: #e2e8f0; + font-variant-numeric: tabular-nums; + padding: 0 4px; +} + +/* Right buttons */ +.anomalous-workbench-header-right { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.anomalous-workbench-tool-btn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); + color: #cbd5e1; + font-size: 15px; + cursor: pointer; + transition: all 0.15s; +} + +.anomalous-workbench-tool-btn:hover, +.anomalous-workbench-tool-btn.is-active { + background: rgba(139, 92, 246, 0.15); + border-color: rgba(139, 92, 246, 0.35); + color: #8b5cf6; +} + +.anomalous-workbench-close-btn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(239, 68, 68, 0.1); + color: #fca5a5; + font-size: 20px; + cursor: pointer; + transition: all 0.15s; + line-height: 1; +} + +.anomalous-workbench-close-btn:hover { + background: rgba(239, 68, 68, 0.25); + color: #fff; + border-color: rgba(239, 68, 68, 0.4); + transform: scale(1.05); +} + +/* Main Body: Left Thumbnail Rail + Center Stage Area + Right Inspector */ +.anomalous-workbench-body { + display: grid; + grid-template-columns: auto minmax(0, 1.45fr) minmax(460px, 0.95fr); + flex: 1; + min-height: 0; + overflow: hidden; +} + +/* Left Canvas Stage Area */ +.anomalous-workbench-stage-area { + position: relative; + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; + background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.035) 0%, transparent 68%), #07080c; + overflow: hidden; +} + +.anomalous-workbench-stage { + position: relative; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + min-height: 0; + overflow: hidden; +} + +.anomalous-workbench-stage-img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + user-select: none; + pointer-events: auto; + transition: transform 0.06s ease-out; + transform-origin: center center; + filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.6)); +} + +/* Floating Prev/Next Glass Nav Arrows */ +.anomalous-workbench-float-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 12; + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 84px; + border-radius: 12px; + background: rgba(15, 18, 26, 0.55); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #e2e8f0; + font-size: 32px; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + line-height: 1; + opacity: 0.65; +} + +.anomalous-workbench-float-nav.is-prev { left: 16px; } +.anomalous-workbench-float-nav.is-next { right: 16px; } + +.anomalous-workbench-float-nav:hover { + opacity: 1; + background: rgba(139, 92, 246, 0.2); + border-color: rgba(139, 92, 246, 0.45); + color: #fff; + transform: translateY(-50%) scale(1.08); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(139, 92, 246, 0.25); +} + +/* Floating Zoom Bar */ +.anomalous-workbench-zoom-bar { + position: absolute; + bottom: 18px; + right: 18px; + z-index: 12; + display: flex; + align-items: center; + gap: 4px; + padding: 4px 8px; + border-radius: 9px; + background: rgba(14, 17, 24, 0.85); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); +} + +.anomalous-workbench-zoom-bar button { + padding: 3px 8px; + border-radius: 5px; + border: 1px solid transparent; + background: transparent; + color: #cbd5e1; + font-size: 0.72rem; + font-weight: 500; + cursor: pointer; + transition: all 0.15s; +} + +.anomalous-workbench-zoom-bar button:hover { + background: rgba(255, 255, 255, 0.1); + color: #fff; +} + +/* Left Filmstrip Rail */ +.anomalous-workbench-filmstrip { + width: 116px; + height: 100%; + min-height: 0; + padding: 12px 10px; + border-right: 1px solid rgba(255, 255, 255, 0.08); + background: #080a0f; + overflow-x: hidden; + overflow-y: auto; + box-sizing: border-box; + transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), + padding 0.22s cubic-bezier(0.16, 1, 0.3, 1), + opacity 0.18s ease; +} + +.anomalous-workbench-filmstrip.is-hidden { + width: 0 !important; + min-width: 0 !important; + padding: 0 !important; + border-right: none !important; + overflow: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} + +.anomalous-workbench-filmstrip::-webkit-scrollbar { + width: 4px; +} + +.anomalous-workbench-filmstrip::-webkit-scrollbar-track { + background: transparent; +} + +.anomalous-workbench-filmstrip::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.14); + border-radius: 4px; +} + +.anomalous-workbench-filmstrip::-webkit-scrollbar-thumb:hover { + background: rgba(139, 92, 246, 0.45); +} + +.anomalous-workbench-filmstrip-track { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + width: 100%; +} + +.anomalous-workbench-filmstrip-thumb { + position: relative; + flex: 0 0 92px; + width: 92px; + height: 92px; + border-radius: 10px; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.1); + background: #12151e; + cursor: pointer; + box-sizing: border-box; + transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease; +} + +.anomalous-workbench-filmstrip-thumb img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.anomalous-workbench-filmstrip-thumb:hover { + border-color: rgba(255, 255, 255, 0.45); + transform: scale(1.04); +} + +.anomalous-workbench-filmstrip-thumb.is-active { + border-color: #8b5cf6; + box-shadow: 0 0 8px rgba(139, 92, 246, 0.35), inset 0 0 0 1px #8b5cf6; + transform: scale(1.04); +} + +.anomalous-workbench-thumb-index { + position: absolute; + bottom: 4px; + right: 4px; + font-size: 10px; + font-weight: 700; + line-height: 1; + color: #94a3b8; + background: rgba(10, 13, 20, 0.82); + backdrop-filter: blur(4px); + padding: 2px 5px; + border-radius: 4px; + pointer-events: none; + transition: color 0.15s, background 0.15s; +} + +.anomalous-workbench-filmstrip-thumb.is-active .anomalous-workbench-thumb-index { + color: #8b5cf6; + background: rgba(13, 23, 27, 0.92); + font-weight: 800; +} + +/* Right Inspector Panel */ +.anomalous-workbench-inspector { + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; + border-left: 1px solid rgba(255, 255, 255, 0.08); + background: #0e1118; +} + +.anomalous-workbench-inspector-body { + flex: 1; + min-height: 0; + overflow-y: auto; + padding: 16px 18px; + display: flex; + flex-direction: column; + gap: 14px; + user-select: text; +} + +/* Inspector Top Actions Toolbar */ +.anomalous-workbench-inspector-toolbar { + display: flex; + gap: 8px; + flex-wrap: wrap; + flex-shrink: 0; +} + +.anomalous-workbench-action-btn { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 7px; + height: 36px; + padding: 0 14px; + border-radius: 3px 10px 3px 10px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.05); + color: #e2e8f0; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + white-space: nowrap; + user-select: none; + box-sizing: border-box; + position: relative; + overflow: hidden; +} + +.anomalous-workbench-action-icon { + width: 14px; + height: 14px; + flex-shrink: 0; + stroke: currentColor; + transition: transform 0.18s ease; +} + +.anomalous-workbench-action-btn:hover .anomalous-workbench-action-icon { + transform: scale(1.1); +} + +.anomalous-workbench-action-btn:hover { + background: rgba(255, 255, 255, 0.09); + color: #ffffff; + border-color: rgba(255, 255, 255, 0.22); +} + +.anomalous-workbench-action-btn.is-primary { + background: var(--amb-btn-primary-bg); + border-color: var(--amb-border-hover); + color: var(--amb-btn-primary-text); +} + +.anomalous-workbench-action-btn.is-primary:hover { + background: var(--amb-btn-primary-hover); + border-color: var(--amb-border-hover); + color: var(--amb-btn-primary-text); + box-shadow: none; + transform: translateY(-1px); +} + +.anomalous-workbench-action-btn.is-primary:active { + transform: translateY(0) scale(0.98); +} + +.anomalous-workbench-action-btn.is-save { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.12); + box-shadow: none; + color: #cbd5e1; + flex: 0 0 auto; +} + +.anomalous-workbench-action-btn.is-save:hover { + background: rgba(255, 255, 255, 0.09); + color: #ffffff; + border-color: rgba(165, 180, 252, 0.4); + box-shadow: none; + transform: translateY(-1px); +} + +.anomalous-workbench-action-btn.is-save.is-active, +.anomalous-workbench-action-btn.is-save[aria-expanded="true"] { + background: rgba(99, 102, 241, 0.2); + border-color: rgba(129, 140, 248, 0.5); + color: #c7d2fe; + box-shadow: none; +} + +.anomalous-workbench-action-btn.is-save:active { + transform: translateY(0) scale(0.98); +} + +/* Segmented Tabs Bar */ +.anomalous-workbench-tabs-bar { + display: flex; + background: rgba(0, 0, 0, 0.38); + padding: 3px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.08); + gap: 3px; + flex-shrink: 0; +} + +.anomalous-workbench-tab-btn { + flex: 1; + padding: 7px 8px; + border-radius: 7px; + border: none; + background: transparent; + color: #94a3b8; + font-size: 0.74rem; + font-weight: 600; + cursor: pointer; + transition: all 0.15s; + text-align: center; + white-space: nowrap; +} + +.anomalous-workbench-tab-btn:hover { + color: #f1f5f9; + background: rgba(255, 255, 255, 0.04); +} + +.anomalous-workbench-tab-btn.is-active { + background: rgba(255, 255, 255, 0.09); + color: #8b5cf6; + box-shadow: none; +} + +.anomalous-workbench-tab-btn:active { + transform: scale(0.97); +} + +/* Tab Panels */ +.anomalous-workbench-tab-panel { + display: flex; + flex-direction: column; + gap: 12px; +} + +/* Bento Specs Grid */ +.anomalous-workbench-specs-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; +} + +.anomalous-workbench-spec-card { + display: flex; + flex-direction: column; + gap: 5px; + padding: 8px 10px; + border-radius: var(--amb-radius-control, 6px); + background: var(--amb-bg-card, #24262E); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); + transition: background-color 0.15s ease, border-color 0.15s ease; + position: relative; + user-select: text; +} + +.anomalous-workbench-spec-card:hover { + background: var(--amb-bg-card-hover, #2d303a); + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.16)); +} + +.anomalous-workbench-spec-card.is-wide { + grid-column: 1 / -1; +} + +.anomalous-workbench-spec-card.is-seed { + border-color: rgba(245, 158, 11, 0.28); + background: rgba(245, 158, 11, 0.035); +} + +.anomalous-workbench-spec-card.is-seed:hover { + border-color: rgba(245, 158, 11, 0.45); + background: rgba(245, 158, 11, 0.06); +} + +.anomalous-workbench-spec-card.is-res { + border-color: rgba(56, 189, 248, 0.25); + background: rgba(56, 189, 248, 0.035); +} + +.theme-abyssal-scarlet .anomalous-workbench-spec-card.is-res { + border-color: rgba(220, 20, 60, 0.25); + background: rgba(220, 20, 60, 0.035); +} + +/* Card Click-to-copy interaction */ +.anomalous-workbench-spec-card.is-copyable { + cursor: pointer; +} + +.anomalous-workbench-spec-card.is-copyable:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.anomalous-workbench-spec-card.is-copyable:active { + transform: translateY(0) scale(0.99); +} + +.anomalous-workbench-spec-card.is-copied { + border-color: rgba(139, 92, 246, 0.6) !important; + background: rgba(139, 92, 246, 0.08) !important; + box-shadow: 0 0 14px rgba(139, 92, 246, 0.25) !important; +} + +.anomalous-workbench-spec-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; +} + +.anomalous-workbench-spec-label { + font-size: 0.68rem; + color: #8a96a8; + font-weight: 500; +} + +.anomalous-workbench-copy-indicator { + position: absolute; + right: 10px; + top: 10px; + display: inline-flex; + align-items: center; + gap: 4px; + opacity: 0; + transition: opacity 0.15s ease, transform 0.15s ease; + color: #94a3b8; + pointer-events: none; +} + +.anomalous-workbench-spec-card.is-copyable:hover .anomalous-workbench-copy-indicator, +.anomalous-workbench-spec-card.is-copyable:focus-visible .anomalous-workbench-copy-indicator { + opacity: 1; + transform: scale(1.05); +} + +.anomalous-workbench-spec-card.is-copyable:focus-visible { + outline: 2px solid rgba(139, 92, 246, 0.55); + outline-offset: 1px; +} + +.anomalous-workbench-spec-copy-icon { + width: 12px; + height: 12px; + stroke: currentColor; +} + +.anomalous-workbench-spec-copy-icon.is-success { + stroke: #8b5cf6; +} + +.anomalous-workbench-spec-copy-icon.is-error { + stroke: #f87171; +} + +.anomalous-workbench-copy-badge { + font-size: 10px; + font-weight: 600; + color: #8b5cf6; + animation: anomalous-fade-in 0.15s ease forwards; +} + +.anomalous-workbench-copy-badge.is-error { + color: #f87171; +} + +.anomalous-workbench-spec-card.is-copy-failed { + border-color: rgba(239, 68, 68, 0.5) !important; + background: rgba(239, 68, 68, 0.06) !important; +} + +@keyframes anomalous-fade-in { + from { opacity: 0; transform: translateX(2px); } + to { opacity: 1; transform: translateX(0); } +} + +.anomalous-workbench-spec-val { + color: #f1f5f9; + font-size: 0.94rem; + font-weight: 600; + line-height: 1.25; + overflow-wrap: anywhere; +} + +.anomalous-workbench-spec-val.is-mono { + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + font-variant-numeric: tabular-nums; +} + +/* Generation Parameter Preset Section */ +.anomalous-workbench-generation-save { + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 10px 14px; + border-radius: 10px; + background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(56, 189, 248, 0.04) 100%); + border: 1px solid rgba(139, 92, 246, 0.2); + margin-top: 4px; + transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; +} + +.anomalous-workbench-generation-save:hover { + background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(56, 189, 248, 0.08) 100%); + border-color: rgba(139, 92, 246, 0.35); + box-shadow: 0 3px 12px rgba(139, 92, 246, 0.08); +} + +.anomalous-workbench-generation-info { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + flex: 1; +} + +.anomalous-workbench-generation-title { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.78rem; + font-weight: 700; + color: #f1f5f9; +} + +.anomalous-workbench-generation-icon { + width: 13px; + height: 13px; + stroke: #8b5cf6; + flex-shrink: 0; +} + +.anomalous-workbench-generation-hint { + font-size: 0.66rem; + color: #8e9dae; + line-height: 1.35; +} + +.anomalous-workbench-generation-btn { + flex-shrink: 0; + padding: 6px 13px; + border-radius: 7px; + background: var(--amb-btn-primary-bg); + border: 1px solid rgba(139, 92, 246, 0.45); + color: var(--amb-btn-primary-text); + font-size: 0.74rem; + font-weight: 600; + cursor: pointer; + transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease; + white-space: nowrap; + user-select: none; + border-color: var(--amb-border-hover); +} + +.anomalous-workbench-generation-btn:hover:not(:disabled) { + background: var(--amb-btn-primary-hover); + border-color: var(--amb-border-hover); + color: var(--amb-btn-primary-text); + box-shadow: none; + transform: translateY(-1px); +} + +.anomalous-workbench-generation-btn:active:not(:disabled) { + transform: translateY(0) scale(0.97); +} + +.anomalous-workbench-generation-btn:disabled { + opacity: 0.55; + cursor: default; +} + +/* Prompts Station */ +.anomalous-workbench-prompts-wrap { + display: flex; + flex-direction: column; + gap: 12px; +} + +.anomalous-workbench-prompt-card { + display: flex; + flex-direction: column; + gap: 8px; + padding: 12px 14px; + border-radius: 11px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-left-width: 3.5px; +} + +.anomalous-workbench-prompt-card.is-positive { + border-left-color: #8b5cf6; + background: linear-gradient(90deg, rgba(139, 92, 246, 0.04) 0%, rgba(255, 255, 255, 0.02) 40%); +} + +.anomalous-workbench-prompt-card.is-negative { + border-left-color: #f43f5e; + background: linear-gradient(90deg, rgba(244, 63, 94, 0.04) 0%, rgba(255, 255, 255, 0.02) 40%); +} + +.anomalous-workbench-prompt-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.anomalous-workbench-prompt-title-section { + display: flex; + align-items: center; + gap: 8px; +} + +.anomalous-workbench-prompt-title { + font-size: 0.78rem; + font-weight: 700; + color: #e2e8f0; +} + +.anomalous-workbench-prompt-count { + padding: 1px 6px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.06); + color: #8b95a5; + font-size: 0.65rem; +} + +.anomalous-workbench-prompt-btns { + display: flex; + gap: 6px; +} + +.anomalous-workbench-mini-action-btn { + padding: 3px 8px; + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); + color: #cbd5e1; + font-size: 0.7rem; + font-weight: 500; + cursor: pointer; + transition: all 0.15s; +} + +.anomalous-workbench-mini-action-btn:hover { + background: rgba(255, 255, 255, 0.12); + color: #fff; + border-color: rgba(255, 255, 255, 0.22); +} + +.anomalous-workbench-mini-action-btn.is-copied { + background: rgba(139, 92, 246, 0.2); + color: #8b5cf6; + border-color: #8b5cf6; +} + +.anomalous-workbench-prompt-content { + color: #d1d9e6; + font-size: 0.8rem; + line-height: 1.55; + max-height: 5.6em; + overflow: hidden; + white-space: pre-wrap; + word-break: break-word; + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + transition: max-height 0.25s ease; +} + +.anomalous-workbench-prompt-content.is-expanded { + max-height: none; + overflow-y: visible; +} + +/* Models & LoRA Section */ +.anomalous-workbench-models-wrap { + display: flex; + flex-direction: column; + gap: 12px; +} + +.anomalous-workbench-model-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.anomalous-workbench-model-group-title { + font-size: 0.72rem; + font-weight: 700; + color: #94a3b8; + margin-bottom: 2px; +} + +.anomalous-workbench-model-card { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 10px; + border-radius: 9px; + background: rgba(255, 255, 255, 0.025); + border: 1px solid rgba(255, 255, 255, 0.06); + transition: all 0.15s; +} + +.anomalous-workbench-model-card:hover { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.12); +} + +.anomalous-workbench-model-thumb { + flex: 0 0 46px; + width: 46px; + height: 46px; + border-radius: 7px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.08); + background: #090b10; +} + +.anomalous-workbench-model-thumb img, +.anomalous-workbench-model-thumb video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.anomalous-workbench-model-info { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + flex: 1; +} + +.anomalous-workbench-model-name { + font-size: 0.8rem; + font-weight: 600; + color: #e2e8f0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.anomalous-workbench-lora-badge { + display: inline-block; + padding: 1px 6px; + border-radius: 4px; + background: rgba(192, 132, 252, 0.12); + color: #c084fc; + border: 1px solid rgba(192, 132, 252, 0.25); + font-size: 0.68rem; + font-weight: 600; + width: fit-content; +} + +.anomalous-workbench-model-notes { + font-size: 0.68rem; + color: #c4b48a; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-workbench-model-actions { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 5px; + flex-shrink: 0; +} + +.anomalous-workbench-model-tag { + padding: 2px 7px; + border-radius: 999px; + font-size: 0.66rem; + font-weight: 700; +} + +.anomalous-workbench-model-tag.is-base { + background: rgba(255, 255, 255, 0.08); + color: #cbd5e1; + border: 1px solid rgba(255, 255, 255, 0.15); +} + +.theme-abyssal-scarlet .anomalous-workbench-model-tag.is-base { + background: rgba(220, 20, 60, 0.18); + color: #ff3366; + border: 1px solid rgba(220, 20, 60, 0.45); +} + +.anomalous-workbench-model-tag.is-lora { + background: rgba(192, 132, 252, 0.12); + color: #c084fc; + border: 1px solid rgba(192, 132, 252, 0.25); +} + +.anomalous-workbench-model-tag.is-clip { + background: rgba(139, 92, 246, 0.12); + color: #8b5cf6; + border: 1px solid rgba(139, 92, 246, 0.25); +} + +.anomalous-workbench-model-tag.is-vae { + background: rgba(251, 146, 60, 0.12); + color: #fb923c; + border: 1px solid rgba(251, 146, 60, 0.25); +} + +.anomalous-workbench-model-tag.is-other { + background: rgba(148, 163, 184, 0.12); + color: #94a3b8; + border: 1px solid rgba(148, 163, 184, 0.25); +} + +/* Nodes Section */ +.anomalous-workbench-nodes-wrap { + display: flex; + flex-direction: column; + gap: 10px; +} + +.anomalous-workbench-action-row { + display: flex; + justify-content: flex-end; +} + +.anomalous-workbench-node-list-box { + display: flex; + flex-direction: column; + gap: 6px; +} + +.anomalous-workbench-node-selection-bar { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 7px; + padding: 8px 10px; + border: 1px solid rgba(139, 92, 246, 0.14); + border-radius: 8px; + background: rgba(139, 92, 246, 0.035); +} + +.anomalous-workbench-node-selection-count { + flex: 1 1 180px; + color: #8fa0b5; + font-size: 0.7rem; +} + +.anomalous-workbench-save-selected-btn { + margin-left: auto; +} + +/* Sticky Footer Snapshot Drawer */ +.anomalous-workbench-inspector-footer { + flex-shrink: 0; + padding: 12px 18px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + background: #0c0e14; +} + +.anomalous-workbench-save-row { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; +} + +.anomalous-workbench-save-input-wrap { + display: flex; + flex: 1 1 220px; + min-width: 0; + flex-direction: column; + gap: 3px; +} + +.anomalous-workbench-save-hint { + min-height: 1em; + color: #748196; + font-size: 0.62rem; + line-height: 1.25; +} + +.anomalous-material-scope-badge { + flex: 0 0 auto; + align-self: flex-start; + padding: 2px 7px; + border: 1px solid rgba(148, 163, 184, 0.24); + border-radius: 999px; + background: rgba(148, 163, 184, 0.08); + color: #cbd5e1; + font-size: 0.65rem; + white-space: nowrap; +} + +.anomalous-material-scope-badge.is-workflow { + border-color: rgba(96, 165, 250, 0.24); + background: rgba(96, 165, 250, 0.08); + color: #9cc7ff; +} + +.anomalous-material-scope-badge.is-prompt { + border-color: rgba(168, 85, 247, 0.28); + background: rgba(168, 85, 247, 0.08); + color: #c084fc; +} + +.anomalous-material-scope-badge.is-nodes { + border-color: rgba(148, 163, 184, 0.24); + background: rgba(148, 163, 184, 0.08); + color: #94a3b8; +} + +.anomalous-material-card-title-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + min-width: 0; +} + +.anomalous-material-card-title-text { + margin: 0; + font-size: 0.94rem; + font-weight: 600; + color: #f1f5f9; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; +} + +.anomalous-material-card-edit-btn { + opacity: 0; + background: transparent; + border: none; + padding: 3px; + cursor: pointer; + color: #94a3b8; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease; + flex-shrink: 0; +} + +.anomalous-material-card-edit-btn svg { + width: 13px; + height: 13px; +} + +.anomalous-material-card:hover .anomalous-material-card-edit-btn, +.anomalous-material-card:focus-within .anomalous-material-card-edit-btn { + opacity: 1; +} + +.anomalous-material-card-edit-btn:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.1); +} + +.anomalous-material-inline-input { + width: 100%; + box-sizing: border-box; + padding: 4px 8px; + font-size: 0.88rem; + background: rgba(10, 12, 18, 0.92); + border: 1px solid rgba(139, 92, 246, 0.55); + border-radius: 6px; + color: #ffffff; + outline: none; + box-shadow: 0 0 10px rgba(139, 92, 246, 0.2); +} + +.anomalous-material-card-subinfo { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + font-size: 0.68rem; + color: #64748b; + margin-top: -2px; +} + +.anomalous-material-card-date { + color: #64748b; + font-size: 0.68rem; +} + +.anomalous-material-card-use-hint { + flex: 1; + color: #8591a5; + font-size: 0.68rem; +} + +.anomalous-workbench-save-input-wrap input { + width: 100%; + box-sizing: border-box; + padding: 8px 12px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(0, 0, 0, 0.35); + color: #f1f5f9; + font-size: 0.82rem; + outline: none; + transition: all 0.15s; +} + +.anomalous-workbench-save-input-wrap input:focus { + border-color: #8b5cf6; + box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); +} + +/* Loading & Error Box */ +.anomalous-workbench-loading-box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 14px; + padding: 40px 20px; + color: #94a3b8; + font-size: 0.82rem; + text-align: center; +} + +.anomalous-workbench-spinner { + width: 28px; + height: 28px; + border-radius: 50%; + border: 3px solid rgba(139, 92, 246, 0.15); + border-top-color: #8b5cf6; + animation: anomalous-spin 0.8s linear infinite; +} + +@keyframes anomalous-spin { + to { transform: rotate(360deg); } +} + +.anomalous-workbench-error-box { + padding: 24px; + text-align: center; + color: #f87171; + font-size: 0.82rem; +} + +.anomalous-workbench-muted { + color: #64748b; + font-size: 0.78rem; + font-style: italic; +} +/* Progressive disclosure shared by material capture surfaces. */ +.anomalous-workbench-inspector-footer[hidden], +.anomalous-recipe-prompt-role-select[hidden], +.anomalous-recipe-material-selection[hidden], +.anomalous-recipe-material-node-select[hidden] { display: none !important; } +.anomalous-material-receipt { + position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); + z-index: 1000010; display: flex; align-items: center; gap: 16px; + max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; + background: #22372e; color: #f0f7f3; border: 1px solid #537360; + box-shadow: 0 8px 32px #0008; +} +.anomalous-material-receipt button { cursor: pointer; color: inherit; background: transparent; border: 0; white-space: nowrap; } +.anomalous-material-receipt button:first-of-type { text-decoration: underline; } +.anomalous-notebook-fold, .anomalous-secondary-actions { padding: 8px; } +.anomalous-notebook-fold > summary, .anomalous-secondary-actions > summary { cursor: pointer; color: var(--input-text, #ddd); padding: 4px; } +.anomalous-notebook-fold > p { color: #aaa; font-size: 13px; } +.anomalous-notebook-fold > button { margin: 6px 8px 0 0; } +/* duplicate workbench-generation-save selector cleaned up */ +.anomalous-material-note-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.7; } +.anomalous-notebook-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } +.anomalous-nb-editor .anomalous-nb-textarea { font: inherit; line-height: 1.6; padding: 12px; box-sizing: border-box; } +/* Material application and prompt composition: structural styling, no animation or blur. */ +.anomalous-prompt-composer { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + overflow-y: auto; + gap: 12px; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 16px; + box-sizing: border-box; +} +.anomalous-prompt-composer > * { flex-shrink: 0; } +.anomalous-prompt-actions, +.anomalous-prompt-target, +.anomalous-material-application-result { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; +} +.anomalous-prompt-actions h3 { margin: 0; } +.anomalous-prompt-field { display: flex; flex-direction: column; gap: 6px; } +.anomalous-prompt-composer textarea, +.anomalous-prompt-composer input:not([type="checkbox"]), +.anomalous-prompt-composer select { + box-sizing: border-box; + max-width: 100%; + padding: 8px 10px; + border: 1px solid var(--border-color, #454545); + border-radius: 6px; + background: var(--comfy-input-bg, #222); + color: var(--input-text, #ddd); + font: inherit; +} +.anomalous-prompt-composer textarea { width: 100%; resize: vertical; min-height: 72px; } +.anomalous-prompt-composer textarea[readonly] { min-height: 100px; } +.anomalous-prompt-parts { display: flex; flex-direction: column; gap: 10px; } +.anomalous-prompt-part { + padding: 12px; + border: 1px solid var(--border-color, #454545); + border-radius: 8px; +} +.anomalous-prompt-part > *:not(summary) { margin-top: 10px; } +.anomalous-prompt-part summary { cursor: pointer; overflow-wrap: anywhere; } +.anomalous-prompt-part summary input { margin-right: 8px; } +.anomalous-prompt-part summary small { margin-left: 10px; color: var(--descrip-text, #aaa); } +.anomalous-material-target-context { padding: 12px 16px; border-bottom: 1px solid var(--border-color, #454545); } +.anomalous-material-target-context > button { margin-left: 10px; } +.anomalous-material-target-context > small { display: block; margin-top: 6px; color: var(--descrip-text, #aaa); } +.anomalous-material-application-result { margin-top: 10px; } +.anomalous-material-choice { + max-width: min(560px, calc(100vw - 32px)); + max-height: 80vh; + overflow-y: auto; + border: 1px solid var(--border-color, #454545); + border-radius: 10px; + padding: 20px; + background: var(--comfy-menu-bg, #222); + color: var(--input-text, #ddd); +} +.anomalous-material-choice > button { display: block; margin: 10px 0; } +.anomalous-material-choice::backdrop { background: rgba(0, 0, 0, .55); } +.anomalous-material-inspect-action { position: absolute; bottom: 10px; right: 10px; z-index: 2; } +.anomalous-material-dragging { opacity: 0 !important; } +.anomalous-material-dragging, .anomalous-material-dragging * { pointer-events: none !important; } +.anomalous-material-drag-hint { + position: fixed; + left: 24px; + top: 24px; + max-width: 240px; + z-index: 1000002; + pointer-events: none; + padding: 10px 14px; + border: 1px solid #68cdb9; + border-radius: 8px; + background: #202428; + color: #eee; +} + +/* ========================================================================== + Node Assistant Hover Parameter Popover Card + ========================================================================== */ +.anomalous-param-popover { + position: fixed; + z-index: 1000002; + width: 330px; + max-height: 480px; + display: flex; + flex-direction: column; + background: rgba(22, 22, 27, 0.96); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 12px; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05); + color: #f3f4f6; + padding: 14px; + box-sizing: border-box; + pointer-events: auto; + animation: anomalous-popover-in 0.18s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes anomalous-popover-in { + from { opacity: 0; transform: translateY(4px) scale(0.98); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +/* ========================================================================== + Prompt Composer & Paper Note Studio / Material Drag System + ========================================================================== */ + +/* 1. Modal Dragging State: Instantly ghost modal to reveal ComfyUI canvas */ +#anomalous-modal.anomalous-material-dragging { + pointer-events: none !important; +} + +#anomalous-modal.anomalous-material-dragging #anomalous-container { + opacity: 0 !important; + pointer-events: none !important; + transform: scale(0.985); + transition: opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 2. Drag Cursor & Hover Feedback */ +.anomalous-material-card[draggable="true"], +.anomalous-paper-note[draggable="true"] { + cursor: grab; +} + +.anomalous-material-card[draggable="true"]:active, +.anomalous-paper-note[draggable="true"]:active { + cursor: grabbing; +} + +/* Hide legacy bulky drag label to restore clean card visuals */ +.anomalous-material-drag-label { + display: none !important; +} + +/* 3. Drag Follower Floating Badge */ +.anomalous-material-drag-hint { + position: fixed; + z-index: 999999; + pointer-events: none; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + border-radius: var(--amb-radius-control, 6px); + background: var(--amb-bg-panel, #18191e); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.15)); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); + color: var(--amb-text-main, #f1f5f9); + font-size: 0.8rem; + font-weight: 500; + line-height: 1.2; + backdrop-filter: blur(8px); + transition: border-color 0.15s ease, background-color 0.15s ease; +} + +.anomalous-material-drag-hint.is-target-valid { + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.3)); + background: var(--amb-bg-card-hover, #282a34); + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); + color: #ffffff; +} + diff --git a/web/styles/07-prompt-studio.css b/web/styles/07-prompt-studio.css new file mode 100644 index 0000000..e30f482 --- /dev/null +++ b/web/styles/07-prompt-studio.css @@ -0,0 +1,1835 @@ +/* 4. Prompt Composer Layout (Warm Paper Studio) */ +.anomalous-prompt-composer { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px 12px 10px; + overflow-y: auto; + max-height: 100%; + color: #e2e8f0; +} + +.anomalous-prompt-topbar { + position: relative !important; + z-index: 1000 !important; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: nowrap !important; + gap: 8px; + height: 44px; + padding: 0 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(20, 22, 27, 0.98); + box-sizing: border-box; + flex-shrink: 0; +} + +.anomalous-prompt-more-wrap { + position: relative !important; + display: inline-flex !important; +} + +.anomalous-prompt-more-menu { + display: none !important; + position: absolute !important; + top: calc(100% + 6px) !important; + right: 0 !important; + z-index: 1000005 !important; + min-width: 165px !important; + background: #181a20 !important; + border: 1px solid rgba(255, 255, 255, 0.18) !important; + border-radius: 8px !important; + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.5) !important; + padding: 6px !important; + backdrop-filter: blur(20px) !important; + flex-direction: column !important; + gap: 3px !important; +} + +.anomalous-prompt-more-menu.is-open { + display: flex !important; + animation: anmMoreMenuIn 0.12s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes anmMoreMenuIn { + from { opacity: 0; transform: translateY(-4px) scale(0.97); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +.anomalous-prompt-more-item { + width: 100% !important; + display: flex !important; + align-items: center !important; + gap: 8px !important; + padding: 7px 10px !important; + border-radius: 6px !important; + border: none !important; + background: transparent !important; + color: #cbd5e1 !important; + font-size: 0.78rem !important; + font-weight: 500 !important; + cursor: pointer !important; + text-align: left !important; + white-space: nowrap !important; + transition: background 0.12s ease, color 0.12s ease !important; +} + +.anomalous-prompt-more-item:hover { + background: rgba(255, 255, 255, 0.08) !important; + color: #ffffff !important; +} + +.anomalous-prompt-more-pos { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 8px !important; + padding: 8px 10px 4px !important; + margin-top: 4px !important; + border-top: 1px solid rgba(255, 255, 255, 0.08) !important; + font-size: 0.76rem !important; + color: #94a3b8 !important; +} + +.anomalous-prompt-more-pos select { + background: rgba(0, 0, 0, 0.4) !important; + border: 1px solid rgba(255, 255, 255, 0.14) !important; + border-radius: 5px !important; + color: #f1f5f9 !important; + padding: 3px 6px !important; + font-size: 0.74rem !important; + cursor: pointer !important; + outline: none !important; +} + +.anomalous-prompt-topbar-left { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; + flex: 1 1 auto; +} + +.anomalous-prompt-topbar-left h3 { + margin: 0; + font-size: 0.92rem; + font-weight: 700; + color: #f8fafc; + letter-spacing: 0.02em; + white-space: nowrap; + flex-shrink: 0; +} + +.anomalous-prompt-topbar-actions { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; + flex-wrap: nowrap !important; +} + +.anomalous-prompt-close-btn { + font-size: 1.1rem; + line-height: 1; + padding: 3px 8px; + color: var(--amb-text-muted, #94a3b8); + transition: all 0.2s ease; +} + +.anomalous-prompt-close-btn:hover { + color: #ef4444; + background: rgba(239, 68, 68, 0.12); +} + +.anomalous-prompt-name-input { + background: var(--amb-bg-input, rgba(0, 0, 0, 0.35)); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.14)); + border-radius: var(--amb-radius-control, 6px); + padding: 2px 8px; + height: 26px; + color: var(--amb-text-main, #f1f5f9); + font-size: 0.78rem; + outline: none; + transition: border-color 0.15s ease, box-shadow 0.15s ease; + box-sizing: border-box; + flex: 0 1 130px; + min-width: 60px; + max-width: 140px; +} + +.anomalous-prompt-name-input:focus { + border-color: #38bdf8; + background: rgba(0, 0, 0, 0.55); +} + +.anomalous-prompt-name-input.is-invalid { + border-color: #ef4444; + box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); +} + +.anomalous-prompt-insert-pos { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 0.76rem; + color: var(--amb-text-muted, #94a3b8); +} + +.anomalous-prompt-insert-pos select { + background: var(--amb-bg-input, #181a22); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + border-radius: var(--amb-radius-control, 6px); + padding: 4px 8px; + color: var(--amb-text-main, #f1f5f9); + font-size: 0.78rem; + outline: none; + cursor: pointer; +} + +/* 5. Paper-like Note Cards Grid */ +.anomalous-paper-notes-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); + gap: 18px; +} + +.anomalous-paper-note { + position: relative; + display: flex; + flex-direction: column; + border-radius: 12px; + background: linear-gradient(175deg, #1c2028 0%, #15181f 100%); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.25); + overflow: hidden; + transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s ease; + user-select: none; +} + +.anomalous-paper-note:hover { + transform: translateY(-2px); + box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.55), 0 6px 14px -2px rgba(0, 0, 0, 0.35); + border-color: rgba(255, 255, 255, 0.18); +} + +/* Note Top Accent Border */ +.anomalous-paper-note-tape { + height: 3px; + width: 100%; + opacity: 0.9; +} + +.anomalous-paper-note.is-positive .anomalous-paper-note-tape { + background: #38bdf8; +} + +.anomalous-paper-note.is-negative .anomalous-paper-note-tape { + background: #fb7185; +} + +/* Note Header */ +.anomalous-paper-note-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px 6px; + gap: 8px; +} + +.anomalous-paper-note-title { + display: inline-flex; + align-items: center; + gap: 7px; + font-size: 0.86rem; + font-weight: 600; + letter-spacing: 0.01em; +} + +.anomalous-paper-note.is-positive .anomalous-paper-note-title { + color: #fca5a5; +} + +.anomalous-paper-note.is-negative .anomalous-paper-note-title { + color: #fda4af; +} + +.anomalous-paper-note-actions { + display: flex; + align-items: center; + gap: 6px; +} + +.anomalous-paper-note-count { + font-size: 0.72rem; + color: #64748b; + font-family: monospace; + padding: 2px 6px; + background: rgba(0, 0, 0, 0.25); + border-radius: 4px; +} + +.anomalous-paper-note-btn { + padding: 3px 8px; + border-radius: 5px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.05); + color: #cbd5e1; + font-size: 0.74rem; + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; +} + +.anomalous-paper-note-btn:hover { + background: rgba(255, 255, 255, 0.12); + color: #f8fafc; + border-color: rgba(255, 255, 255, 0.25); +} + +/* Note Textarea */ +.anomalous-paper-note-body { + padding: 6px 14px 10px; + flex: 1; + display: flex; + flex-direction: column; +} + +.anomalous-paper-note-textarea { + width: 100%; + min-height: 120px; + resize: vertical; + border: none; + outline: none; + background: rgba(0, 0, 0, 0.2); + color: #f1f5f9; + font-size: 0.85rem; + line-height: 1.5; + padding: 10px; + border-radius: 6px; + font-family: inherit; + box-sizing: border-box; + transition: background 0.15s ease; +} + +.anomalous-paper-note-textarea:focus { + background: rgba(0, 0, 0, 0.35); +} + +/* Note Footer Drag Hint */ +.anomalous-paper-note-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 14px 10px; + font-size: 0.73rem; + color: #64748b; + border-top: 1px dashed rgba(255, 255, 255, 0.06); +} + +.anomalous-paper-note-drag-prompt { + display: inline-flex; + align-items: center; + gap: 5px; + color: #94a3b8; +} + +/* 6. Active Target Status & Injection Bar (Unified Action Dock Element) */ +.anomalous-prompt-target-bar { + display: flex; + align-items: center; + gap: 6px; + margin-left: auto; + background: transparent; + border: none; + padding: 0; +} + +.anomalous-target-node-badge { + font-size: 0.72rem; + font-weight: 500; + color: #94a3b8; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 2px 6px; + border-radius: 4px; + white-space: nowrap; + max-width: 90px; + overflow: hidden; + text-overflow: ellipsis; +} + +.anomalous-prompt-target-actions { + display: flex; + align-items: center; + gap: 5px; + flex-wrap: nowrap; +} + +.anomalous-prompt-target-actions select { + background: var(--amb-bg-input, #181a22); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.14)); + border-radius: var(--amb-radius-control, 4px); + padding: 2px 6px; + color: var(--amb-text-main, #f1f5f9); + font-size: 0.72rem; + outline: none; + cursor: pointer; + height: 24px; +} + +/* 7. Slide-out Material Import Drawer */ +.anomalous-prompt-import-drawer { + position: fixed; + top: 0; + right: 0; + width: 440px; + max-width: 90vw; + height: 100vh; + background: rgba(20, 10, 16, 0.96); + border-left: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: -10px 0 40px rgba(0, 0, 0, 0.75); + z-index: 10005; + display: flex; + flex-direction: column; + backdrop-filter: blur(12px); + animation: drawerSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes drawerSlideIn { + from { transform: translateX(100%); } + to { transform: translateX(0); } +} + +.anomalous-drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 18px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-drawer-header h4 { + margin: 0; + font-size: 0.98rem; + font-weight: 600; + color: #f1f5f9; +} + +.anomalous-drawer-search { + padding: 10px 18px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.anomalous-drawer-search input { + width: 100%; + box-sizing: border-box; + padding: 7px 12px; + border-radius: 6px; + background: rgba(22, 10, 18, 0.65); + border: 1px solid rgba(255, 255, 255, 0.12); + color: #f1f5f9; + font-size: 0.82rem; + outline: none; +} + +.anomalous-drawer-search input:focus { + border-color: #8b5cf6; +} + +.anomalous-drawer-list { + flex: 1; + overflow-y: auto; + padding: 14px 18px; + display: flex; + flex-direction: column; + gap: 12px; +} + +.anomalous-drawer-item { + padding: 12px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.035); + border: 1px solid rgba(255, 255, 255, 0.08); + display: flex; + flex-direction: column; + gap: 8px; + transition: background 0.15s ease, border-color 0.15s ease; +} + +.anomalous-drawer-item:hover { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(139, 92, 246, 0.3); +} + +.anomalous-drawer-item-title { + font-size: 0.84rem; + font-weight: 600; + color: #f8fafc; +} + +.anomalous-drawer-item-preview { + font-size: 0.76rem; + color: #94a3b8; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + background: rgba(0, 0, 0, 0.2); + padding: 6px 8px; + border-radius: 4px; +} + +.anomalous-drawer-item-actions { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 6px; + flex-wrap: wrap; +} + +.anomalous-drawer-item-btn { + padding: 4px 9px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.05); + color: #cbd5e1; + font-size: 0.72rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-drawer-item-btn:hover { + background: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.12)); + color: #ffffff; + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.25)); + font-weight: 500; +} + + +/* ========================================================================== + Prompt Mixer & Lego Assembler Deck (提示词乐高调音台) + ========================================================================== */ + +/* 1. Mixer Controls (Tabs & Action Bar) */ +.anomalous-mixer-controls { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 8px 12px; + background: rgba(22, 10, 18, 0.6); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 10px; + flex-wrap: wrap; + backdrop-filter: blur(8px); +} + +.anomalous-mixer-tabs { + display: flex; + align-items: center; + gap: 4px; + background: rgba(0, 0, 0, 0.25); + padding: 3px; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.anomalous-mixer-tab-btn { + padding: 5px 11px; + border-radius: 6px; + border: none; + background: transparent; + color: #94a3b8; + font-size: 0.78rem; + font-weight: 500; + cursor: pointer; + transition: all 0.16s ease; + white-space: nowrap; +} + +.anomalous-mixer-tab-btn:hover { + color: #f1f5f9; + background: rgba(255, 255, 255, 0.06); +} + +.anomalous-mixer-tab-btn.is-active { + background: rgba(255, 255, 255, 0.12); + color: #f1f5f9; + font-weight: 600; + box-shadow: none; + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.theme-abyssal-scarlet .anomalous-mixer-tab-btn.is-active { + background: linear-gradient(135deg, rgba(220, 20, 60, 0.2), rgba(139, 92, 246, 0.25)); + color: #dc143c; + border: 1px solid rgba(220, 20, 60, 0.35); +} + +.anomalous-mixer-actions { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; + white-space: nowrap; +} + +.anomalous-mixer-actions button { + white-space: nowrap !important; +} + +/* Smart Sort Button */ +.anomalous-mixer-smart-sort-btn { + padding: 4px 10px; + border-radius: var(--amb-radius-control, 6px); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + background: var(--amb-bg-card, #24262E); + color: var(--amb-text-main, #e2e8f0); + font-size: 0.76rem; + font-weight: 500; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 5px; + transition: all 0.15s ease; + box-shadow: none; +} + +.anomalous-mixer-smart-sort-btn:hover { + background: var(--amb-bg-card-hover, #2c2f38); + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.2)); + color: #ffffff; +} + +.anomalous-mixer-smart-sort-btn.is-animating { + opacity: 0.7; +} + +/* 2. Blocks Container & Empty Notice */ +.anomalous-mixer-blocks-container { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1 1 0 !important; + min-height: 120px; + max-height: none !important; + overflow-y: auto; + overflow-x: hidden; + padding: 2px 4px 4px 2px; +} + +.is-side-studio .anomalous-mixer-blocks-container { + max-height: 42vh; +} + +.anomalous-mixer-empty-notice { + padding: 32px 16px; + text-align: center; + background: rgba(0, 0, 0, 0.15); + border: 1px dashed var(--amb-border, rgba(255, 255, 255, 0.1)); + border-radius: var(--amb-radius-control, 6px); + color: var(--amb-text-muted, #94a3b8); +} + +/* 3. Individual Lego Prompt Block (Compact Card for Easy Stacking) */ +.anomalous-mixer-block { + position: relative; + border-radius: var(--amb-radius-control, 6px); + background: var(--amb-bg-card, #24262E); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.09)); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; + flex-shrink: 0; +} + +.anomalous-mixer-block:hover { + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.18)); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.anomalous-mixer-block.is-role-positive { + border-left: 3px solid #38bdf8; +} + +.theme-abyssal-scarlet .anomalous-mixer-block.is-role-positive { + border-left: 3px solid #dc143c; +} + +.anomalous-mixer-block.is-role-negative { + border-left: 3px solid #fb7185; +} + +/* Bypass state for A/B testing */ +.anomalous-mixer-block.is-bypassed { + opacity: 0.7; + background: rgba(18, 19, 24, 0.6); + border-color: rgba(255, 255, 255, 0.05); + border-left-color: #64748b !important; +} + +.anomalous-mixer-block.is-bypassed .anomalous-mixer-block-textarea { + color: #94a3b8; +} + +/* Dragging & Reorder Indicators */ +.anomalous-mixer-block.is-dragging { + opacity: 0.25; + transform: scale(0.98); +} + +.anomalous-mixer-block.is-drag-over-top::before { + content: ''; + position: absolute; + top: -3px; + left: 0; + right: 0; + height: 3px; + border-radius: 2px; + background: #38bdf8; + z-index: 10; +} + +.theme-abyssal-scarlet .anomalous-mixer-block.is-drag-over-top::before { + background: #dc143c; +} + +.anomalous-mixer-block.is-drag-over-bottom::after { + content: ''; + position: absolute; + bottom: -3px; + left: 0; + right: 0; + height: 3px; + border-radius: 2px; + background: #38bdf8; + z-index: 10; +} + +.theme-abyssal-scarlet .anomalous-mixer-block.is-drag-over-bottom::after { + background: #dc143c; +} + +/* Block Header */ +.anomalous-mixer-block-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px 8px 4px 6px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + gap: 6px; +} + +.anomalous-mixer-block-header-left { + display: flex; + align-items: center; + gap: 7px; + flex: 1; + min-width: 0; +} + +.anomalous-mixer-drag-handle { + cursor: grab; + user-select: none; + font-size: 0.95rem; + color: #64748b; + padding: 2px 4px; + transition: color 0.15s ease; +} + +.anomalous-mixer-drag-handle:hover { + color: #38bdf8; +} + +.theme-abyssal-scarlet .anomalous-mixer-drag-handle:hover { + color: #dc143c; +} + +.anomalous-mixer-drag-handle:active { + cursor: grabbing; +} + +.anomalous-mixer-block-toggle { + display: inline-flex; + align-items: center; + cursor: pointer; + margin: 0; +} + +.anomalous-mixer-block-toggle input[type="checkbox"] { + cursor: pointer; + accent-color: #8b5cf6; + width: 14px; + height: 14px; + margin: 0; +} + +/* Category Pill */ +.anomalous-mixer-cat-badge { + padding: 2px 7px; + border-radius: 4px; + font-size: 0.68rem; + font-weight: 600; + border: 1px solid transparent; + cursor: pointer; + user-select: none; + white-space: nowrap; + transition: filter 0.15s ease, transform 0.12s ease; +} + +.anomalous-mixer-cat-badge:hover { + filter: brightness(1.2); + transform: scale(1.03); +} + +.anomalous-mixer-block-title-input { + flex: 1; + min-width: 60px; + max-width: 220px; + background: transparent; + border: 1px solid transparent; + border-radius: 4px; + color: #f1f5f9; + font-size: 0.8rem; + font-weight: 500; + padding: 2px 6px; + outline: none; + transition: border-color 0.15s ease, background 0.15s ease; +} + +.anomalous-mixer-block-title-input:hover, +.anomalous-mixer-block-title-input:focus { + border-color: rgba(255, 255, 255, 0.15); + background: rgba(0, 0, 0, 0.25); +} + +/* Block Action Buttons */ +.anomalous-mixer-block-header-right { + display: flex; + align-items: center; + gap: 3px; +} + +.anomalous-mixer-block-btn { + padding: 2px 6px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.04); + color: #94a3b8; + font-size: 0.7rem; + cursor: pointer; + line-height: 1.2; + transition: all 0.15s ease; +} + +.anomalous-mixer-block-btn:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.12); + color: #ffffff; + border-color: rgba(255, 255, 255, 0.2); +} + +.anomalous-mixer-block-btn:disabled { + opacity: 0.3; + cursor: not-allowed; +} + +.anomalous-mixer-block-btn.is-delete:hover { + background: rgba(239, 68, 68, 0.25); + color: #fca5a5; + border-color: rgba(239, 68, 68, 0.5); +} + +/* Block Body */ +.anomalous-mixer-block-body { + padding: 3px 8px 5px; +} + +.anomalous-mixer-block-textarea { + width: 100%; + min-height: 32px; + height: 34px; + resize: vertical; + border: none; + outline: none; + background: rgba(0, 0, 0, 0.22); + color: #f1f5f9; + font-size: 0.76rem; + line-height: 1.35; + padding: 4px 6px; + border-radius: 4px; + font-family: inherit; + box-sizing: border-box; + transition: all 0.18s ease; +} + +.anomalous-mixer-block-textarea:focus { + background: rgba(0, 0, 0, 0.38); + box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3); + min-height: 52px; + height: 52px; +} + +.theme-abyssal-scarlet .anomalous-mixer-block-textarea:focus { + box-shadow: inset 0 0 0 1px rgba(220, 20, 60, 0.3); +} + +/* 4. Assembled Output Deck & Whole-Deck Canvas Drag (Collapsible Glass Deck) */ +.anomalous-mixer-deck-output { + position: sticky; + bottom: 0; + z-index: 10; + border-radius: var(--amb-radius-control, 6px); + background: var(--amb-bg-card, #20222a); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35); + padding: 6px 10px; + display: flex; + flex-direction: column; + gap: 4px; + cursor: grab; + user-select: none; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + flex-shrink: 0 !important; +} + +.anomalous-mixer-deck-output.is-collapsed { + padding: 3px 8px; + background: rgba(22, 24, 30, 0.92); + border-radius: 6px; + cursor: pointer; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.anomalous-mixer-deck-output:hover { + border-color: #38bdf8; + box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); +} + +.theme-abyssal-scarlet .anomalous-mixer-deck-output { + border-color: rgba(220, 20, 60, 0.28); +} + +.theme-abyssal-scarlet .anomalous-mixer-deck-output:hover { + border-color: #dc143c; + box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8); +} + +.anomalous-mixer-deck-output:active { + cursor: grabbing; +} + +.anomalous-mixer-output-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + min-height: 26px; + cursor: pointer; +} + +.anomalous-mixer-summary-left { + display: flex; + align-items: center; + gap: 6px; + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.anomalous-mixer-summary-right { + display: flex; + align-items: center; + gap: 5px; + flex-shrink: 0; +} + +.anomalous-mixer-output-title { + font-size: 0.78rem; + color: #e2e8f0; + white-space: nowrap; +} + +.anomalous-mixer-output-stats { + font-size: 0.7rem; + color: #94a3b8; + font-family: monospace; + white-space: nowrap; +} + +.anomalous-mixer-output-drawer { + display: flex; + flex-direction: column; + gap: 6px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + padding-top: 6px; + margin-top: 2px; +} + +.anomalous-mixer-output-body { + flex: 1; +} + +.anomalous-mixer-output-textarea { + width: 100%; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 6px; + color: #93c5fd; + font-size: 0.78rem; + font-family: inherit; + line-height: 1.4; + padding: 4px 8px; + outline: none; + box-sizing: border-box; + min-height: 34px; + max-height: 52px; +} + +.anomalous-mixer-output-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + font-size: 0.72rem; +} + +.anomalous-mixer-drag-hint { + color: #64748b; + display: flex; + align-items: center; + gap: 4px; +} + +.anomalous-mixer-drag-hint strong { + color: #38bdf8; +} + +.theme-abyssal-scarlet .anomalous-mixer-drag-hint strong { + color: #dc143c; +} + +.anomalous-mixer-final-btn.is-active { + background: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.15)) !important; + border-color: #38bdf8 !important; + color: #38bdf8 !important; +} + +.anomalous-btn-toggle-output { + font-size: 0.72rem !important; + padding: 2px 7px !important; + color: #38bdf8 !important; + border-color: rgba(56, 189, 248, 0.25) !important; +} + +.anomalous-btn-quick-copy { + font-size: 0.72rem !important; + padding: 2px 7px !important; +} + +/* 5. Floating Toast Feedback */ +.anomalous-mixer-toast { + position: fixed; + top: 20px; + right: 24px; + padding: 8px 14px; + border-radius: var(--amb-radius-control, 6px); + background: var(--amb-bg-panel, #18191e); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.15)); + color: #f1f5f9; + font-size: 0.82rem; + font-weight: 500; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); + z-index: 1000000; + backdrop-filter: blur(12px); + opacity: 0; + transform: translateY(-8px); + transition: opacity 0.2s ease, transform 0.2s ease; + pointer-events: none; +} + +.anomalous-mixer-toast.is-show { + opacity: 1; + transform: translateY(0); +} + +/* ========================================================================== + Prompt Studio Dual-Column Workbench (提示词工坊左右双分栏工作台) + ========================================================================== */ + +.anomalous-prompt-workbench { + position: relative; + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + background: var(--amb-bg-page, #141519); + container-type: inline-size; + container-name: prompt-workbench; + overflow: hidden; +} + +/* Clean Studio Dark Neutral Background - No Gaudy Cyberdeck Overlay */ +.anomalous-prompt-workbench::before { + display: none !important; +} + +.anomalous-prompt-workbench > * { + position: relative; + z-index: 1; +} + +.anomalous-prompt-workbench-grid { + display: grid; + grid-template-columns: minmax(280px, 320px) minmax(460px, 1fr); + gap: 10px; + flex: 1; + min-height: 0; + padding: 6px 10px 8px; + overflow: hidden; + box-sizing: border-box; +} + +/* Responsive Unified Dual-Zone Stream (for small container and narrow viewports) */ +@keyframes anomalous-just-added { + 0% { + transform: scale(0.96); + box-shadow: 0 0 0 2px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.4); + } + 50% { + transform: scale(1.02); + box-shadow: 0 0 0 2px #4ade80, 0 0 20px rgba(74, 222, 128, 0.5); + } + 100% { + transform: scale(1); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + } +} + +.anomalous-mixer-block.is-just-added { + animation: anomalous-just-added 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +/* Resilient Responsive Layout for Prompt Workbench & Sidebar Drawer */ +@container prompt-workbench (max-width: 850px) { + .anomalous-prompt-workbench-grid { + grid-template-columns: 145px minmax(0, 1fr) !important; + gap: 6px !important; + padding: 4px 6px 6px !important; + } + .anomalous-workbench-left-panel { + width: 145px !important; + padding: 6px 6px 6px !important; + } + .anomalous-workbench-right-panel { + padding: 6px 6px 6px !important; + } +} + +@media (max-width: 860px) { + .anomalous-prompt-workbench-grid { + grid-template-columns: 145px minmax(0, 1fr) !important; + gap: 6px !important; + padding: 4px 6px 6px !important; + } +} + + +/* Left & Right Panels Common */ +.anomalous-workbench-left-panel, +.anomalous-workbench-right-panel { + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; + border-radius: var(--amb-radius-panel, 12px); + background: var(--amb-bg-panel, #1C1E24); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + padding: 10px 10px 8px; + box-sizing: border-box; + gap: 8px; +} + +.anomalous-workbench-right-panel { + overflow: hidden; + position: relative; +} + +.anomalous-workbench-col-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + padding-bottom: 6px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + flex-shrink: 0; +} + +.anomalous-workbench-col-title { + font-size: 0.94rem; + color: #f1f5f9; + display: flex; + align-items: center; + gap: 6px; + white-space: nowrap; + flex-shrink: 0; +} + +.anomalous-sub-counter { + font-size: 0.76rem; + color: #64748b; + font-weight: normal; +} + +/* -------------------------------------------------------------------------- + Left Column: Source Cards & New Card Form + -------------------------------------------------------------------------- */ +.anomalous-workbench-filter-bar { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; +} + +.anomalous-workbench-search-input { + width: 100%; + box-sizing: border-box; + padding: 6px 10px; + border-radius: 6px; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + color: #f1f5f9; + font-size: 0.78rem; + outline: none; + transition: border-color 0.15s ease; +} + +.anomalous-workbench-search-input:focus { + border-color: #38bdf8; + background: rgba(0, 0, 0, 0.45); +} + +.theme-abyssal-scarlet .anomalous-workbench-search-input:focus { + border-color: #dc143c; +} + +.anomalous-workbench-category-pills { + display: flex; + align-items: center; + gap: 4px; + flex-wrap: wrap; + flex-shrink: 0; +} + +.anomalous-workbench-pill { + padding: 3px 8px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.04); + color: #94a3b8; + font-size: 0.72rem; + cursor: pointer; + transition: all 0.15s ease; + user-select: none; +} + +.anomalous-workbench-pill:hover { + color: #f1f5f9; + background: rgba(255, 255, 255, 0.09); +} + +.anomalous-workbench-pill.is-active { + border-color: var(--amb-border-hover); + color: var(--amb-text-main); + text-shadow: none; + font-weight: 600; + box-shadow: none; + background: var(--amb-bg-card-hover); +} + +/* Inline New Card Creation Form */ +.anomalous-workbench-new-card-form { + display: flex; + flex-direction: column; + gap: 8px; + padding: 10px 12px; + border-radius: var(--amb-radius-control, 6px); + background: var(--amb-bg-card, #20222a); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); + animation: fadeInSlideDown 0.18s ease; + flex-shrink: 0; +} + +@keyframes fadeInSlideDown { + from { opacity: 0; transform: translateY(-6px); } + to { opacity: 1; transform: translateY(0); } +} + +.anomalous-form-title { + font-size: 0.82rem; + font-weight: 600; + color: var(--amb-text-main, #f1f5f9); +} + +.anomalous-form-input, +.anomalous-form-select, +.anomalous-form-textarea { + width: 100%; + box-sizing: border-box; + padding: 6px 8px; + border-radius: 6px; + background: rgba(0, 0, 0, 0.35); + border: 1px solid rgba(255, 255, 255, 0.12); + color: #f1f5f9; + font-size: 0.78rem; + outline: none; + font-family: inherit; +} + +.anomalous-form-cat-row { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.78rem; + color: #94a3b8; +} + +.anomalous-form-btn-row { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 6px; + margin-top: 2px; +} + +/* Source Cards List */ +.anomalous-source-cards-list { + flex: 1; + min-height: 0; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 8px; + padding-right: 2px; +} + +.anomalous-empty-state-container, +.anomalous-source-empty, +.anomalous-recipe-empty { + position: relative; + padding: 36px 16px; + text-align: center; + color: var(--amb-text-muted, #94a3b8); + font-size: 0.82rem; + background: rgba(0, 0, 0, 0.18); + border-radius: var(--amb-radius-control, 6px); + border: 1px dashed var(--amb-border, rgba(255, 255, 255, 0.1)); + overflow: hidden; + isolation: isolate; +} + +.theme-abyssal-scarlet .anomalous-empty-state-container, +.theme-abyssal-scarlet .anomalous-source-empty, +.theme-abyssal-scarlet .anomalous-recipe-empty { + border-color: rgba(220, 20, 60, 0.25); + background: rgba(20, 8, 14, 0.4); +} + +.anomalous-empty-state-container > *, +.anomalous-source-empty > *, +.anomalous-recipe-empty > * { + position: relative; + z-index: 1; +} + +/* Tip Banner for Prompt Studio Usage Guidance */ +.anomalous-workbench-tip-banner { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + margin: 2px 0 8px; + background: rgba(56, 189, 248, 0.07); + border: 1px solid rgba(56, 189, 248, 0.2); + border-radius: var(--amb-radius-control, 6px); + font-size: 0.72rem; + color: #93c5fd; + line-height: 1.35; + user-select: none; +} + +.anomalous-workbench-tip-banner .anomalous-tip-icon { + width: 14px; + height: 14px; + flex-shrink: 0; + color: #38bdf8; +} + +/* Individual Source Prompt Card (Tactile Skewed Glassmorphic Card Aesthetics) */ +.anomalous-source-prompt-card { + border-radius: 8px; + background: linear-gradient(180deg, #262935 0%, #1e2029 100%); + border: 1px solid rgba(255, 255, 255, 0.11); + border-left: 4px solid #64748b; + padding: 8px 10px; + display: flex; + flex-direction: column; + gap: 6px; + cursor: grab; + user-select: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); + transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; +} + +.anomalous-source-prompt-card.is-cat-base { + border-left-color: #38bdf8; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.theme-abyssal-scarlet .anomalous-source-prompt-card.is-cat-base { + border-left-color: #dc143c; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(220, 20, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.anomalous-source-prompt-card.is-cat-style { + border-left-color: #c084fc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(192, 132, 252, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.anomalous-source-prompt-card.is-cat-subject { + border-left-color: #4ade80; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(74, 222, 128, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.anomalous-source-prompt-card.is-cat-trigger { + border-left-color: #fb923c; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.anomalous-source-prompt-card:hover { + background: linear-gradient(180deg, #2e3242 0%, #232633 100%); + border-color: rgba(255, 255, 255, 0.22); + transform: translateY(-2px); + box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.anomalous-source-prompt-card:active { + cursor: grabbing; + transform: translateY(0); +} + +.anomalous-source-prompt-card.is-clicked { + transform: scale(0.97); + border-color: #38bdf8 !important; + box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important; +} + +.anomalous-source-prompt-card.is-dragging-source { + opacity: 0.4; + border-style: dashed; +} + +.anomalous-source-card-header { + display: flex; + align-items: center; + gap: 6px; +} + +.anomalous-source-card-grip { + color: #64748b; + font-size: 11px; + line-height: 1; + margin-right: 1px; + letter-spacing: -1px; + cursor: grab; + opacity: 0.5; + transition: opacity 0.15s ease, color 0.15s ease; +} + +.anomalous-source-prompt-card:hover .anomalous-source-card-grip { + opacity: 0.95; + color: #94a3b8; +} + +.anomalous-source-card-badge { + padding: 2px 7px; + border-radius: 9999px; + font-size: 0.66rem; + font-weight: 600; + border: 1px solid transparent; + white-space: nowrap; +} + +.anomalous-source-card-title { + font-size: 0.82rem; + font-weight: 600; + color: #f1f5f9; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; +} + +.anomalous-source-card-snippet { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 0.72rem; + color: #cbd5e1; + line-height: 1.45; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + background: rgba(0, 0, 0, 0.32); + border: 1px solid rgba(255, 255, 255, 0.06); + padding: 5px 8px; + border-radius: 5px; +} + +.anomalous-source-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + font-size: 0.7rem; + margin-top: 2px; +} + +.anomalous-source-card-drag-hint { + color: #64748b; + font-size: 0.66rem; + display: inline-flex; + align-items: center; + gap: 3px; +} + +.anomalous-source-card-actions { + display: flex; + align-items: center; + gap: 4px; +} + +.anomalous-source-action-btn { + padding: 2px 6px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.04); + color: #cbd5e1; + font-size: 0.68rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-source-action-btn:hover { + background: rgba(255, 255, 255, 0.12); + color: #ffffff; +} + +.anomalous-source-action-btn.is-dock { + background: rgba(56, 189, 248, 0.12); + border-color: rgba(56, 189, 248, 0.35); + color: #38bdf8; + font-weight: 600; + border-radius: 5px; + padding: 3px 8px; + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 0.7rem; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); +} + +.anomalous-source-action-btn.is-dock:hover { + background: #38bdf8; + color: #0b1329; + border-color: #38bdf8; + box-shadow: 0 0 12px rgba(56, 189, 248, 0.45); +} + +.anomalous-source-action-btn.is-dock.is-success { + background: #22c55e !important; + border-color: #22c55e !important; + color: #ffffff !important; + box-shadow: 0 0 12px rgba(34, 197, 94, 0.5) !important; +} + +.anomalous-source-action-btn.is-save-lib { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.1); + color: var(--amb-text-muted, #94a3b8); + font-weight: 500; +} + +.anomalous-source-action-btn.is-save-lib:hover { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; +} + +.theme-abyssal-scarlet .anomalous-source-action-btn.is-save-lib { + background: rgba(220, 20, 60, 0.15); + border-color: rgba(220, 20, 60, 0.4); + color: #dc143c; +} + +.theme-abyssal-scarlet .anomalous-source-action-btn.is-save-lib:hover { + background: #dc143c; + color: #1a050d; +} + +.anomalous-form-meta-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + flex-wrap: wrap; +} + +.anomalous-form-role-group { + display: flex; + align-items: center; + gap: 12px; +} + +.anomalous-role-label { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 0.76rem; + color: #cbd5e1; + cursor: pointer; + user-select: none; +} + +.anomalous-role-label input[type="radio"] { + cursor: pointer; + accent-color: #38bdf8; + margin: 0; +} + +.theme-abyssal-scarlet .anomalous-role-label input[type="radio"] { + accent-color: #dc143c; +} + +.anomalous-unsaved-badge { + font-size: 0.65rem; + color: #fb923c; + background: rgba(251, 146, 60, 0.15); + border: 1px solid rgba(251, 146, 60, 0.35); + padding: 1px 4px; + border-radius: 4px; + font-weight: 500; +} + +/* -------------------------------------------------------------------------- + Right Column: Drop Zone & Arranger Stage + -------------------------------------------------------------------------- */ +.anomalous-assembly-track { + flex: 1 1 0 !important; + min-height: 200px; + height: 100%; + max-height: none !important; + overflow-y: auto; + overflow-x: hidden; + padding-right: 2px; + display: flex; + flex-direction: column; + gap: 8px; + border: 2px dashed transparent; + border-radius: 10px; + transition: border-color 0.25s ease, box-shadow 0.25s ease; +} + +.anomalous-prompt-workbench:has(.is-dragging-source) .anomalous-assembly-track, +.is-source-dragging .anomalous-assembly-track { + border: 2px dashed var(--amb-border-hover, rgba(255, 255, 255, 0.25)) !important; + background: rgba(255, 255, 255, 0.02) !important; +} + +.anomalous-assembly-dropzone { + flex: 1; + min-height: 240px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 24px 16px; + border-radius: var(--amb-radius-control, 6px); + border: 1.5px dashed var(--amb-border, rgba(255, 255, 255, 0.12)); + background: rgba(0, 0, 0, 0.15); + transition: border-color 0.15s ease, background-color 0.15s ease; +} + +.anomalous-assembly-dropzone.is-drag-over { + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.35)); + background: rgba(255, 255, 255, 0.04); +} + +.theme-abyssal-scarlet .anomalous-assembly-dropzone.is-drag-over { + border-color: #dc143c; + background: rgba(45, 10, 20, 0.6); +} + +/* Interactive Auto-snap Dock at the bottom of Assembler blocks */ +.anomalous-assembly-snap-dock { + display: flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 8px 14px; + border: 1.5px dashed rgba(255, 255, 255, 0.14); + border-radius: 8px; + background: rgba(0, 0, 0, 0.15); + cursor: pointer; + user-select: none; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + margin-top: 6px; + color: #94a3b8; + font-size: 0.74rem; +} + +.anomalous-assembly-snap-dock:hover { + border-color: rgba(255, 255, 255, 0.28); + background: rgba(255, 255, 255, 0.04); + color: #e2e8f0; +} + +.anomalous-assembly-snap-dock.is-drag-over, +.anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock { + border-color: #38bdf8 !important; + background: rgba(56, 189, 248, 0.12) !important; + box-shadow: 0 0 18px rgba(56, 189, 248, 0.25), inset 0 0 10px rgba(56, 189, 248, 0.05) !important; + color: #38bdf8 !important; + transform: scale(1.01); +} + +.theme-abyssal-scarlet .anomalous-assembly-snap-dock.is-drag-over, +.theme-abyssal-scarlet .anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock { + border-color: #dc143c !important; + background: rgba(220, 20, 60, 0.15) !important; + box-shadow: 0 0 18px rgba(220, 20, 60, 0.3) !important; + color: #ff6b81 !important; +} + +.anomalous-snap-dock-content { + display: flex; + align-items: center; + gap: 6px; + font-weight: 500; + pointer-events: none; +} + +.anomalous-snap-icon { + width: 14px; + height: 14px; + transition: transform 0.2s ease; +} + +.anomalous-assembly-snap-dock.is-drag-over .anomalous-snap-icon, +.anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock .anomalous-snap-icon { + transform: rotate(90deg) scale(1.15); +} + +.anomalous-workbench-sub-actions { + display: flex; + align-items: center; + gap: 6px; + width: 100%; + flex-shrink: 0; +} + +.anomalous-workbench-sub-actions button { + flex: 1; + white-space: nowrap; + justify-content: center; + text-align: center; +} + +.anomalous-workbench-header-actions { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.anomalous-btn-sm { + padding: 4px 9px !important; + font-size: 0.74rem !important; + border-radius: var(--amb-radius-control, 6px) !important; + line-height: 1.3 !important; +} + +.anomalous-btn-extract-node { + position: relative; + background-color: rgba(255, 255, 255, 0.04) !important; + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)) !important; + border-radius: var(--amb-radius-control, 6px) !important; + color: var(--amb-text-main, #f1f5f9) !important; + font-weight: 500 !important; + height: 28px !important; + padding: 0 10px !important; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + transition: background-color 0.15s ease, border-color 0.15s ease !important; + overflow: hidden; + user-select: none; +} + +.anomalous-btn-extract-node:hover { + background-color: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.1)) !important; + border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.25)) !important; + color: #ffffff !important; +} + +/* ========================================================================== + Task 5 & 6: Abyssal Scarlet (深海血族) Custom Theme & Domain Expansion + Fusion of Eldritch Deep-Sea and Touhou Scarlet Devil Anime Gothic Aesthetics + ========================================================================== */ + +/* Toast Notice for Domain Activation / Deactivation */ +.anomalous-theme-toast { + position: fixed; + top: 28px; + left: 50%; + transform: translateX(-50%) translateY(-24px) scale(0.94); + opacity: 0; + pointer-events: none; + z-index: 1000000; + padding: 10px 24px; + border-radius: 24px; + background: rgba(18, 22, 34, 0.94); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.18); + color: #ffffff; + font-size: 13px; + font-weight: 600; + letter-spacing: 0.5px; + box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6); + transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); +} + +.anomalous-theme-toast.is-show { + opacity: 1; + transform: translateX(-50%) translateY(0) scale(1); +} + +.anomalous-theme-toast.is-abyssal { + background: linear-gradient(135deg, rgba(32, 8, 22, 0.96) 0%, rgba(14, 5, 20, 0.96) 100%); + border-color: rgba(220, 20, 60, 0.65); + color: #ffe4e6; + box-shadow: 0 12px 40px rgba(220, 20, 60, 0.4), inset 0 0 12px rgba(220, 20, 60, 0.25); + text-shadow: 0 0 8px rgba(220, 20, 60, 0.85); +} + diff --git a/web/styles/08-theme-gallery-overrides.css b/web/styles/08-theme-gallery-overrides.css new file mode 100644 index 0000000..e90755b --- /dev/null +++ b/web/styles/08-theme-gallery-overrides.css @@ -0,0 +1,1006 @@ +/* 1. Global Scoped Theme Variables */ +html.theme-abyssal-scarlet, +.theme-abyssal-scarlet { + --bg-color: #0a0510; + --comfy-menu-bg: #12091c; + --border-color: rgba(220, 20, 60, 0.25); + --p-primary-color: #dc143c; + --fg-color: #e0d0df; +} + +/* 2. Main Containers & Atmospheric Ocean Current Backdrop */ +.theme-abyssal-scarlet #anomalous-container, +.theme-abyssal-scarlet#anomalous-container { + background: #0a0510 !important; + color: #e0d0df !important; + border-color: rgba(220, 20, 60, 0.35) !important; + box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95) !important; + position: relative; +} + +.theme-abyssal-scarlet #anomalous-container::before { + content: ''; + position: absolute; + inset: 0; + background-image: url('assets/abyssal_currents_bg.webp') !important; + background-size: cover !important; + background-position: center !important; + mix-blend-mode: overlay !important; + opacity: 0.15 !important; + pointer-events: none !important; + z-index: 0 !important; +} + +.theme-abyssal-scarlet .anomalous-prompt-workbench::before { + display: none !important; +} + +.theme-abyssal-scarlet #anomalous-sidebar-wrapper { + background: #100818 !important; + border-right: 1px solid rgba(220, 20, 60, 0.22) !important; +} + +.theme-abyssal-scarlet #anomalous-content { + background-color: #0c0510 !important; + background-image: + radial-gradient(ellipse 75% 55% at 50% -5%, rgba(220, 20, 60, 0.14) 0%, rgba(38, 12, 30, 0.06) 55%, transparent 100%), + radial-gradient(ellipse 55% 45% at 85% 95%, rgba(139, 92, 246, 0.08) 0%, transparent 100%) !important; +} + +.theme-abyssal-scarlet #anomalous-content::before { + display: block !important; + content: '' !important; + position: absolute !important; + inset: 0 !important; + background-image: url('assets/abyssal_scarlet_mansion.webp'), radial-gradient(circle at 50% 20%, rgba(220, 20, 60, 0.08) 0%, transparent 70%) !important; + background-size: cover !important; + background-position: center !important; + mix-blend-mode: soft-light !important; + opacity: 0.18 !important; + pointer-events: none !important; + z-index: 0 !important; +} + +.theme-abyssal-scarlet #anomalous-sidebar-wrapper::after { + display: block !important; + content: '' !important; + position: absolute !important; + top: 0 !important; + right: 0 !important; + width: 1px !important; + height: 100% !important; + background: linear-gradient(180deg, + rgba(220, 20, 60, 0) 0%, + rgba(220, 20, 60, 0.45) 20%, + rgba(255, 51, 102, 0.7) 50%, + rgba(147, 51, 234, 0.45) 80%, + rgba(220, 20, 60, 0) 100% + ) !important; + pointer-events: none !important; + z-index: 5 !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-grid { + background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(220, 20, 60, 0.09) 0%, rgba(28, 9, 22, 0.04) 60%, transparent 100%); +} + +.theme-abyssal-scarlet .anomalous-brand-badge { + background: rgba(45, 10, 18, 0.95) !important; + border: 1px solid #dc143c !important; + color: #e0d8db !important; + box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8) !important; +} + +/* 3. Empty State Thematic Illustration (Submerged Scarlet Mansion) */ +.theme-abyssal-scarlet .anomalous-empty-state-container, +.theme-abyssal-scarlet .anomalous-source-empty, +.theme-abyssal-scarlet .anomalous-recipe-empty { + background-image: url('assets/abyssal_scarlet_mansion.webp') !important; + background-size: contain !important; + background-repeat: no-repeat !important; + background-position: center !important; + -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 95%) !important; + mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 95%) !important; + opacity: 0.75 !important; +} + +/* 4. Gothic Buttons with Asymmetric Chamfers & Velvet Inner Shadow */ +.theme-abyssal-scarlet .anomalous-btn-primary, +.theme-abyssal-scarlet .anomalous-recipe-btn-primary-action { + background-color: rgba(45, 10, 18, 0.95) !important; + background-image: none !important; + border: 1px solid rgba(220, 20, 60, 0.6) !important; + border-radius: 4px 12px 4px 12px !important; + color: #e0d8db !important; + box-shadow: none !important; + transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +.theme-abyssal-scarlet .anomalous-btn-primary:hover, +.theme-abyssal-scarlet .anomalous-recipe-btn-primary-action:hover { + background-color: rgba(65, 12, 24, 0.98) !important; + border-color: #dc143c !important; + color: #f1eaed !important; + box-shadow: none !important; + transform: translateY(-1px); +} + +.theme-abyssal-scarlet .anomalous-btn-extract-node { + background-color: rgba(45, 10, 18, 0.95) !important; + background-image: none !important; + border: 1px solid rgba(220, 20, 60, 0.6) !important; + border-radius: 4px 12px 4px 12px !important; + color: #e0d8db !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-btn-extract-node:hover { + background-color: rgba(65, 12, 24, 0.98) !important; + border-color: #dc143c !important; + color: #f1eaed !important; + box-shadow: none !important; + transform: translateY(-1px); +} + +.theme-abyssal-scarlet .anomalous-btn-ghost { + background: rgba(30, 10, 20, 0.6) !important; + border: 1px solid rgba(220, 20, 60, 0.35) !important; + color: #e0d8db !important; + border-radius: 2px 8px 2px 8px !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-btn-ghost:hover { + background: rgba(55, 12, 24, 0.85) !important; + border-color: #dc143c !important; + box-shadow: none !important; + color: #f1eaed !important; +} + +.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-primary { + background: rgba(50, 12, 22, 0.92) !important; + border: 1px solid rgba(220, 20, 60, 0.55) !important; + border-radius: 2px 10px 2px 10px !important; + color: #e0d8db !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-primary:hover { + background: rgba(70, 15, 28, 0.95) !important; + border-color: #dc143c !important; + color: #f1eaed !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-save { + background: rgba(30, 10, 20, 0.6) !important; + border: 1px solid rgba(220, 20, 60, 0.35) !important; + border-radius: 2px 8px 2px 8px !important; + color: #e0d8db !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-workbench-action-btn.is-save:hover { + background: rgba(55, 12, 24, 0.85) !important; + border-color: #dc143c !important; + box-shadow: none !important; + color: #f1eaed !important; +} + +.theme-abyssal-scarlet .anomalous-mixer-smart-sort-btn { + background-color: rgba(45, 10, 22, 0.95) !important; + border: 1px solid rgba(220, 20, 60, 0.5) !important; + border-radius: 3px 8px 3px 8px !important; + color: #e0d8db !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-mixer-smart-sort-btn:hover { + background-color: rgba(65, 14, 28, 0.98) !important; + border-color: #dc143c !important; + box-shadow: none !important; + color: #f1eaed !important; + transform: translateY(-1px); +} + +.theme-abyssal-scarlet .anomalous-workbench-generation-btn { + border-radius: 3px 10px 3px 10px !important; + background-color: rgba(45, 10, 20, 0.95) !important; + border: 1px solid rgba(220, 20, 60, 0.5) !important; + color: #e0d8db !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-workbench-generation-btn:hover:not(:disabled) { + background-color: rgba(65, 14, 28, 0.98) !important; + border-color: #dc143c !important; + color: #f1eaed !important; + box-shadow: none !important; +} + +/* 5. Cards & Gothic Sovereign Palette (Strictly scoped, Inner Shadows & Sharp Borders) */ +.theme-abyssal-scarlet .anomalous-card { + border-color: rgba(220, 20, 60, 0.22) !important; + background: linear-gradient(180deg, rgba(25, 12, 20, 0.9) 0%, rgba(14, 6, 14, 0.98) 100%) !important; +} + +.theme-abyssal-scarlet .anomalous-card:hover, +.theme-abyssal-scarlet .anomalous-recipe-card:hover, +.theme-abyssal-scarlet .anomalous-material-card:hover, +.theme-abyssal-scarlet .anomalous-source-item:hover, +.theme-abyssal-scarlet .anomalous-nb-note-item:hover { + border-color: #dc143c !important; + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.95), inset 0 0 12px rgba(0, 0, 0, 0.7) !important; +} + +.theme-abyssal-scarlet .anomalous-card-labels { + background: linear-gradient(to top, rgba(18, 5, 14, 0.97) 0%, rgba(18, 5, 14, 0.75) 65%, transparent 100%) !important; +} + +.theme-abyssal-scarlet .anomalous-card:hover .anomalous-card-labels { + background: linear-gradient(to top, rgba(20, 6, 16, 0.99) 0%, rgba(22, 7, 18, 0.94) 75%, transparent 100%) !important; +} + +/* Card Base Model Badges - Gothic Sovereign Palette (Inner Shadow, No Outer Glows) */ +.theme-abyssal-scarlet .anomalous-card-badge { + background: rgba(18, 8, 14, 0.92) !important; + color: #d4af37 !important; + border: 1px solid rgba(179, 135, 40, 0.4) !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; +} + +.theme-abyssal-scarlet .anomalous-card:hover .anomalous-card-badge { + border-color: #d4af37 !important; + box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9) !important; +} + +.theme-abyssal-scarlet .anomalous-card-badge.badge-gold { + color: #d4af37 !important; + background: rgba(26, 16, 10, 0.94) !important; + border-color: #b38728 !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; +} + +.theme-abyssal-scarlet .anomalous-card-badge.badge-amber { + color: #d97706 !important; + background: rgba(24, 12, 8, 0.94) !important; + border-color: #b45309 !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; +} + +.theme-abyssal-scarlet .anomalous-card-badge.badge-flux { + color: #a855f7 !important; + background: rgba(20, 8, 30, 0.94) !important; + border-color: #7c3aed !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; +} + +.theme-abyssal-scarlet .anomalous-card-badge.badge-rose, +.theme-abyssal-scarlet .anomalous-model-tag { + color: #e0a0ac !important; + background: rgba(36, 10, 18, 0.92) !important; + border: 1px solid #dc143c !important; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important; +} + +.theme-abyssal-scarlet .anomalous-card-action-btn { + background: rgba(22, 8, 16, 0.92) !important; + color: #e0d8db !important; + border: 1px solid rgba(220, 20, 60, 0.35) !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-card-action-btn:hover { + background: rgba(60, 12, 24, 0.9) !important; + border-color: #dc143c !important; + color: #f1eaed !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-recipe-card { + border-color: rgba(220, 20, 60, 0.22) !important; + background: rgba(18, 10, 26, 0.88) !important; +} + +/* 6. Active Pills in Deep Velvet Wine (Inner Shadow & Sharp Border) */ +.theme-abyssal-scarlet .anomalous-recipe-pill.is-active, +.theme-abyssal-scarlet .anomalous-workbench-pill.is-active { + background-color: rgba(60, 10, 20, 0.85) !important; + border-color: #dc143c !important; + color: #e0d8db !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet .anomalous-recipe-readiness-pill { + border-color: rgba(220, 20, 60, 0.35) !important; + color: #e0d8db !important; +} + +/* 7. Error State Abyssal Corruption Animations */ +@keyframes abyssal-corruption { + 0% { + box-shadow: 0 0 6px rgba(220, 20, 60, 0.4), inset 0 0 6px rgba(120, 0, 160, 0.3); + border-color: rgba(220, 20, 60, 0.5); + } + 50% { + box-shadow: 0 0 24px rgba(220, 20, 60, 0.88), inset 0 0 18px rgba(120, 0, 160, 0.65); + border-color: #ff3366; + } + 100% { + box-shadow: 0 0 6px rgba(220, 20, 60, 0.4), inset 0 0 6px rgba(120, 0, 160, 0.3); + border-color: rgba(220, 20, 60, 0.5); + } +} + +.theme-abyssal-scarlet .anomalous-trigger-error, +.theme-abyssal-scarlet .anomalous-error-panel, +.theme-abyssal-scarlet .anomalous-error-banner, +.theme-abyssal-scarlet .anomalous-toast-error, +.theme-abyssal-scarlet .anomalous-dialog-error { + animation: abyssal-corruption 2.8s infinite ease-in-out !important; + border: 1px solid rgba(220, 20, 60, 0.65) !important; +} + +/* 8. Studio Dialog & Overlay Adaptations */ +.theme-abyssal-scarlet dialog.anomalous-gallery-viewer, +html.theme-abyssal-scarlet dialog.anomalous-gallery-viewer { + background: #0a0510 !important; + border-color: rgba(220, 20, 60, 0.38) !important; + box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(220, 20, 60, 0.3) !important; +} + +/* 9. Model Scanner Radar Button & Spin Animation */ +#anomalous-scan-btn { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 32px !important; + height: 32px !important; + border-radius: 6px !important; + box-sizing: border-box !important; + vertical-align: middle !important; +} + +#anomalous-scan-btn svg { + transition: transform 0.2s ease, filter 0.2s ease; + transform-origin: center center; +} + +#anomalous-scan-btn:hover svg { + filter: none; +} + +#anomalous-scan-btn.anomalous-radar-spinning { + color: #10b981 !important; + background: rgba(16, 185, 129, 0.12) !important; + border: 1px solid rgba(16, 185, 129, 0.35) !important; +} + +#anomalous-scan-btn.anomalous-radar-spinning svg { + animation: anomalous-radar-spin 1.4s linear infinite !important; + filter: none !important; +} + +@keyframes anomalous-radar-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.theme-abyssal-scarlet #anomalous-scan-btn:hover svg { + filter: none; +} + +.theme-abyssal-scarlet #anomalous-scan-btn.anomalous-radar-spinning { + color: #ff4d6d !important; + background: rgba(45, 10, 20, 0.85) !important; + border: 1px solid #dc143c !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-scan-btn.anomalous-radar-spinning svg { + filter: none !important; +} + +/* 10. Task 8: Pure Vector Iconography & Micro-interactions Overhaul */ +.anomalous-btn-icon { + display: inline-block; + vertical-align: -2px; + margin-right: 6px; + transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease; +} + +button:hover .anomalous-btn-icon { + transform: scale(1.08); + filter: none; +} + +#anomalous-sidebar-actions { + position: relative; + overflow: visible; + display: flex; + align-items: center; + justify-content: space-around; + padding: 8px 6px; + gap: 2px; + box-sizing: border-box; +} + +#anomalous-sidebar-actions button { + position: relative; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 36px !important; + height: 36px !important; + border-radius: 7px !important; + box-sizing: border-box !important; + vertical-align: middle !important; + color: #cbd5e1 !important; + background: transparent !important; + border: 1px solid transparent !important; + cursor: pointer !important; + overflow: hidden !important; + pointer-events: auto !important; + transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; +} + +#anomalous-sidebar-actions button:hover { + color: #ffffff !important; + background: rgba(255, 255, 255, 0.09) !important; + border: 1px solid rgba(255, 255, 255, 0.18) !important; + transform: none; + box-shadow: none; +} + +#anomalous-sidebar-actions button svg { + width: 20px !important; + height: 20px !important; + stroke-width: 2px !important; + pointer-events: none !important; + transition: opacity 0.15s ease; +} + +/* Abyssal Scarlet Mode overrides for Task 8 icon buttons (Sharp Borders & Inner Shadow) */ +.theme-abyssal-scarlet #anomalous-doctor-btn:hover { + color: #f43f5e !important; + background: rgba(55, 12, 22, 0.85) !important; + border: 1px solid #f43f5e !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-assistant-btn:hover { + color: #a855f7 !important; + background: rgba(36, 12, 45, 0.85) !important; + border: 1px solid #a855f7 !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-materials-btn:hover { + color: #d97706 !important; + background: rgba(45, 20, 10, 0.85) !important; + border: 1px solid #d97706 !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-global-settings-btn:hover { + color: #dc143c !important; + background: rgba(55, 12, 22, 0.85) !important; + border: 1px solid #dc143c !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-sidebar-actions button:hover { + border-color: #dc143c !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-sidebar-actions button:hover svg { + filter: none !important; +} + +/* 11. Task 9: Master Container Geometric Details, Watermarks & Floating Tooltips */ + +#anomalous-sidebar-actions::before { + display: none !important; +} + +.theme-abyssal-scarlet #anomalous-sidebar-actions::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ff3366' stroke-width='1.5'%3E%3Ccircle cx='50' cy='50' r='45'/%3E%3Cpolygon points='50,5 95,50 50,95 5,50' stroke-dasharray='3 3'/%3E%3Cpolygon points='50,15 85,50 50,85 15,50'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3C/svg%3E"); + opacity: 0.055; +} + +/* Abyssal Scarlet Mode override for energy divider */ +.theme-abyssal-scarlet #anomalous-sidebar-wrapper::after { + background: linear-gradient(180deg, + rgba(220, 20, 60, 0) 0%, + rgba(220, 20, 60, 0.45) 20%, + rgba(255, 51, 102, 0.7) 50%, + rgba(147, 51, 234, 0.45) 80%, + rgba(220, 20, 60, 0) 100% + ) !important; + box-shadow: none !important; +} + +/* ========================================================================== + GLOBAL CUSTOM TOOLTIP SYSTEM ([data-tooltip]) + Frosted Glass, Anime Dark Neon Aesthetic, Absolute Native Title Killer + ========================================================================== */ +[data-tooltip], +.anomalous-tooltip-target { + position: relative; +} + +/* Base Tooltip Bubble (Default: Top) - Normal Mode (Neutral Clean Glass) */ +[data-tooltip]::after, +.anomalous-tooltip-target::after { + content: attr(data-tooltip); + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%) translateY(4px); + padding: 6px 12px; + background: rgba(18, 20, 26, 0.98); + color: #f1f5f9; + font-size: 12px; + font-weight: 500; + line-height: 1.35; + white-space: nowrap; + border-radius: var(--amb-radius-control, 6px); + border: 1px solid rgba(255, 255, 255, 0.14); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65); + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; + z-index: 999999; +} + +/* Base Arrow (Default: Top) */ +[data-tooltip]::before, +.anomalous-tooltip-target::before { + content: ''; + position: absolute; + bottom: calc(100% + 3px); + left: 50%; + transform: translateX(-50%) translateY(4px); + border-width: 5px 5px 0 5px; + border-style: solid; + border-color: rgba(18, 20, 26, 0.98) transparent transparent transparent; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; + z-index: 999999; +} + +/* Hover & Keyboard Focus Trigger (Standard 350ms Delay) */ +[data-tooltip]:hover::after, +[data-tooltip]:hover::before, +[data-tooltip]:focus-visible::after, +[data-tooltip]:focus-visible::before, +.anomalous-tooltip-target:hover::after, +.anomalous-tooltip-target:hover::before, +.anomalous-tooltip-target:focus-visible::after, +.anomalous-tooltip-target:focus-visible::before { + opacity: 1; + transform: translateX(-50%) translateY(0); + transition-delay: 0.35s; +} + +/* Right-aligned Tooltip (Ideal for Sidebar Icons) */ +[data-tooltip-pos="right"]::after { + bottom: auto; + top: 50%; + left: calc(100% + 10px); + transform: translateY(-50%) translateX(-6px); +} + +[data-tooltip-pos="right"]::before { + bottom: auto; + top: 50%; + left: calc(100% + 5px); + transform: translateY(-50%) translateX(-6px); + border-width: 5px 5px 5px 0; + border-color: transparent rgba(18, 20, 26, 0.98) transparent transparent; +} + +[data-tooltip-pos="right"]:hover::after, +[data-tooltip-pos="right"]:hover::before, +[data-tooltip-pos="right"]:focus-visible::after, +[data-tooltip-pos="right"]:focus-visible::before { + transform: translateY(-50%) translateX(0); + transition-delay: 0.35s; +} + +/* Bottom-aligned Tooltip */ +[data-tooltip-pos="bottom"]::after { + bottom: auto; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%) translateY(-6px); +} + +[data-tooltip-pos="bottom"]::before { + bottom: auto; + top: calc(100% + 3px); + left: 50%; + transform: translateX(-50%) translateY(-6px); + border-width: 0 5px 5px 5px; + border-color: transparent transparent rgba(18, 20, 26, 0.98) transparent; +} + +[data-tooltip-pos="bottom"]:hover::after, +[data-tooltip-pos="bottom"]:hover::before, +[data-tooltip-pos="bottom"]:focus-visible::after, +[data-tooltip-pos="bottom"]:focus-visible::before { + transform: translateX(-50%) translateY(0); + transition-delay: 0.35s; +} + +/* Left-aligned Tooltip */ +[data-tooltip-pos="left"]::after { + bottom: auto; + top: 50%; + left: auto; + right: calc(100% + 10px); + transform: translateY(-50%) translateX(6px); +} + +[data-tooltip-pos="left"]::before { + bottom: auto; + top: 50%; + left: auto; + right: calc(100% + 5px); + transform: translateY(-50%) translateX(6px); + border-width: 5px 0 5px 5px; + border-color: transparent transparent transparent rgba(18, 20, 28, 0.95); +} + +[data-tooltip-pos="left"]:hover::after, +[data-tooltip-pos="left"]:hover::before { + transform: translateY(-50%) translateX(0); +} + +/* Top-aligned Tooltip */ +[data-tooltip-pos="top"]::after, +.anomalous-tooltip-target[data-tooltip-pos="top"]::after { + top: auto; + bottom: calc(100% + 8px); + left: 50%; + right: auto; + transform: translateX(-50%) translateY(4px); +} + +[data-tooltip-pos="top"]::before, +.anomalous-tooltip-target[data-tooltip-pos="top"]::before { + top: auto; + bottom: calc(100% + 3px); + left: 50%; + right: auto; + transform: translateX(-50%) translateY(4px); + border-width: 5px 5px 0 5px; + border-style: solid; + border-color: rgba(18, 20, 28, 0.95) transparent transparent transparent; +} + +[data-tooltip-pos="top"]:hover::after, +[data-tooltip-pos="top"]:hover::before, +.anomalous-tooltip-target[data-tooltip-pos="top"]:hover::after, +.anomalous-tooltip-target[data-tooltip-pos="top"]:hover::before { + opacity: 1; + transform: translateX(-50%) translateY(0); +} + +/* Theme: Abyssal Scarlet Tooltip (Inner Shadow, Sharp Border, No Outer Neon Glow) */ +.theme-abyssal-scarlet [data-tooltip]::after, +.theme-abyssal-scarlet .anomalous-tooltip-target::after { + background: rgba(22, 8, 16, 0.98); + border-color: #dc143c; + color: #e0d8db; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95), inset 0 1px 3px rgba(0, 0, 0, 0.7); +} + +.theme-abyssal-scarlet [data-tooltip]::before, +.theme-abyssal-scarlet .anomalous-tooltip-target::before { + border-color: rgba(22, 8, 16, 0.98) transparent transparent transparent; +} + +.theme-abyssal-scarlet [data-tooltip-pos="top"]::before, +.theme-abyssal-scarlet .anomalous-tooltip-target[data-tooltip-pos="top"]::before { + border-color: rgba(22, 8, 16, 0.98) transparent transparent transparent; +} + +.theme-abyssal-scarlet [data-tooltip-pos="right"]::before { + border-color: transparent rgba(22, 8, 16, 0.98) transparent transparent; +} + +.theme-abyssal-scarlet [data-tooltip-pos="bottom"]::before { + border-color: transparent transparent rgba(22, 8, 16, 0.98) transparent; +} + +.theme-abyssal-scarlet [data-tooltip-pos="left"]::before { + border-color: transparent transparent transparent rgba(22, 8, 16, 0.98); +} + + + + + + + + +/* ========================================================================== + MASTER HEADER & GALLERY CONTAINER DUAL-MODE ARCHITECTURE + Normal Mode: Restrained Dark Neutral Studio + Easter Egg Mode: Gothic Vampire Abyssal Scarlet Expansion + ========================================================================== */ + +/* 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: 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 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; + position: relative; + z-index: 10; +} + +.anomalous-header-group { + display: flex; + align-items: center; + gap: 6px; +} + +.anomalous-header-left { + display: flex; + align-items: center; + gap: 6px; + flex: 0 0 auto; +} + +.anomalous-header-center { + display: flex !important; + align-items: center !important; + justify-content: center !important; + gap: 6px !important; + flex: 1 1 auto !important; + margin: 0 auto !important; +} + +.anomalous-header-right { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; + flex: 0 0 auto; +} + +#anomalous-header button { + margin-right: 0; + padding: 0 10px !important; + height: 28px !important; + box-sizing: border-box !important; + background: rgba(255, 255, 255, 0.04) !important; + color: #c0c4cc !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; + border-radius: 6px !important; + cursor: pointer; + white-space: nowrap; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 5px !important; + font-size: 11.5px !important; + font-weight: 500; + letter-spacing: 0.2px; + backdrop-filter: blur(8px); + transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); +} + +#anomalous-header button:hover { + background: rgba(255, 255, 255, 0.09) !important; + border-color: rgba(255, 255, 255, 0.2) !important; + color: #ffffff !important; + transform: translateY(-1px); + box-shadow: none !important; +} + +#anomalous-header button.active { + background: rgba(255, 255, 255, 0.14) !important; + border-color: rgba(255, 255, 255, 0.28) !important; + color: #ffffff !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important; +} + +#anomalous-header button .anomalous-btn-text { + display: inline !important; + font-size: 11.5px !important; + font-weight: 500 !important; + line-height: 1 !important; + color: inherit !important; +} + +#anomalous-header button svg, +#anomalous-header button .anomalous-btn-icon { + width: 13px !important; + height: 13px !important; + flex-shrink: 0 !important; + vertical-align: -1px !important; +} + +#anomalous-dock-btn { + padding: 0 !important; + width: 28px !important; + height: 28px !important; + box-sizing: border-box !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + border-radius: 6px !important; + background: rgba(255, 255, 255, 0.04) !important; + border: 1px solid rgba(255, 255, 255, 0.08) !important; +} + +#anomalous-dock-btn:hover { + background: rgba(255, 255, 255, 0.09) !important; + border-color: rgba(255, 255, 255, 0.2) !important; + color: #ffffff !important; +} + +#anomalous-dock-btn svg { + width: 13px !important; + height: 13px !important; +} + +/* 2. Normal Mode Gallery Container & Panels (Clean Neutral Dark Canvas) */ +#anomalous-gallery-panel, +.anomalous-gallery-container { + background-color: transparent !important; + position: relative; +} + +.anomalous-gallery-grid { + background-color: transparent !important; +} + +.anomalous-gallery-container::before, +#anomalous-gallery-panel::before { + display: none !important; +} + +.anomalous-gallery-container > *, +#anomalous-gallery-panel > * { + position: relative; + z-index: 1; +} + +/* 3. Abyssal Scarlet Mode Master Header & Gallery Domain Expansion (Easter Egg) */ +.theme-abyssal-scarlet #anomalous-header { + background: #140812 !important; + border-bottom: 1px solid rgba(220, 20, 60, 0.35) !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85) !important; +} + +.theme-abyssal-scarlet #anomalous-header button { + background: rgba(30, 10, 20, 0.6) !important; + color: #e0d8db !important; + border: 1px solid rgba(220, 20, 60, 0.3) !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-header button:hover { + background: rgba(55, 12, 24, 0.85) !important; + border-color: #dc143c !important; + color: #f1eaed !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-header button.active { + background: rgba(55, 12, 22, 0.9) !important; + border: 1px solid #dc143c !important; + color: #e0d8db !important; + box-shadow: none !important; +} + +.theme-abyssal-scarlet #anomalous-gallery-panel, +.theme-abyssal-scarlet .anomalous-gallery-grid, +.theme-abyssal-scarlet .anomalous-gallery-container { + background-color: #0c0812 !important; +} + +.theme-abyssal-scarlet .anomalous-gallery-container::before, +.theme-abyssal-scarlet #anomalous-gallery-panel::before { + display: block !important; + content: '' !important; + position: absolute !important; + inset: 0 !important; + background-color: #0d080c !important; + background-image: url('assets/abyssal_bg_concept.webp'), radial-gradient(circle at 50% 50%, rgba(220, 20, 60, 0.03) 0%, transparent 60%) !important; + background-size: cover !important; + background-position: center !important; + mix-blend-mode: overlay !important; + opacity: 0.15 !important; + pointer-events: none !important; + z-index: 0 !important; +} + +/* ========================================================================== + Recipe Studio Dedicated Container & Topbar Close Button + ========================================================================== */ +.anomalous-nb-container.anomalous-recipe-container { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: hidden; + background: #0d1117; +} + +.anomalous-recipe-topbar-close { + background: transparent !important; + border: 1px solid rgba(255, 255, 255, 0.12) !important; + color: #94a3b8 !important; + padding: 4px 10px !important; + font-size: 0.88rem !important; + cursor: pointer; + border-radius: 6px; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + margin-left: 6px; +} + +.anomalous-recipe-topbar-close:hover { + background: rgba(239, 68, 68, 0.18) !important; + border-color: rgba(239, 68, 68, 0.4) !important; + color: #f87171 !important; +} + +/* ========================================================================== + Quick Prompt Translator (Modal & Tag Chips) + ========================================================================== */ +.anomalous-translator-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.72); + backdrop-filter: blur(8px); + z-index: 999999; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + animation: anmFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); +} + +.anomalous-translator-modal { + width: min(840px, 94vw); + max-height: 88vh; + background: #0f172a; + border: 1px solid rgba(56, 189, 248, 0.25); + box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 32px rgba(56, 189, 248, 0.12); + border-radius: 14px; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; +} + diff --git a/web/styles/09-prompt-drawers.css b/web/styles/09-prompt-drawers.css new file mode 100644 index 0000000..7122a58 --- /dev/null +++ b/web/styles/09-prompt-drawers.css @@ -0,0 +1,1192 @@ +/* Sidebar Docked Mode for Prompt Translator */ +.anomalous-translator-overlay.is-sidebar { + background: transparent !important; + backdrop-filter: none !important; + pointer-events: none !important; + padding: 0 !important; + justify-content: flex-end !important; + align-items: stretch !important; +} + +.anomalous-translator-modal.is-sidebar { + pointer-events: auto !important; + width: var(--amb-translator-width, 380px) !important; + min-width: 320px !important; + max-width: 92vw !important; + height: 100vh !important; + max-height: 100vh !important; + border-radius: 0 !important; + border-top: none !important; + border-bottom: none !important; + border-right: none !important; + border-left: 1px solid rgba(56, 189, 248, 0.3) !important; + background: rgba(13, 17, 26, 0.95) !important; + backdrop-filter: blur(24px) !important; + box-shadow: -10px 0 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.08) !important; + animation: anmSlideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +.anomalous-translator-resize-handle { + display: none; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 6px; + cursor: ew-resize; + z-index: 50; + transition: background 0.15s ease; +} + +.anomalous-translator-modal.is-sidebar .anomalous-translator-resize-handle { + display: block; +} + +.anomalous-translator-resize-handle:hover, +.anomalous-translator-resize-handle.is-resizing { + background: rgba(56, 189, 248, 0.5); +} + +.anomalous-translator-mode-btn { + border: 1px solid rgba(56, 189, 248, 0.25) !important; + color: #7dd3fc !important; + font-size: 0.76rem !important; + padding: 3px 6px !important; + border-radius: 6px !important; + cursor: pointer; + background: rgba(15, 23, 42, 0.6); + white-space: nowrap; + transition: all 0.15s ease; +} + +.anomalous-translator-mode-btn:hover { + background: rgba(56, 189, 248, 0.2) !important; + color: #ffffff !important; + border-color: #38bdf8 !important; +} + +@keyframes anmSlideInRight { + from { + transform: translateX(100%); + opacity: 0.4; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +/* Sidebar Dock Left Mode */ +.anomalous-translator-overlay.is-sidebar.is-dock-left { + justify-content: flex-start !important; +} + +.anomalous-translator-modal.is-sidebar.is-dock-left { + border-left: none !important; + border-right: 1px solid rgba(56, 189, 248, 0.3) !important; + box-shadow: 10px 0 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.08) !important; + animation: anmSlideInLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +.anomalous-translator-modal.is-sidebar.is-dock-left .anomalous-translator-resize-handle { + left: auto; + right: 0; +} + +@keyframes anmSlideInLeft { + from { + transform: translateX(-100%); + opacity: 0.4; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +.anomalous-translator-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + background: rgba(15, 23, 42, 0.95); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + gap: 8px; +} + +.anomalous-translator-title-group { + display: flex; + align-items: center; + gap: 6px; + white-space: nowrap; + flex-shrink: 0; +} + +.anomalous-translator-icon { + font-size: 1.15rem; +} + +.anomalous-translator-title { + margin: 0; + font-size: 0.95rem; + font-weight: 600; + color: #f1f5f9; + white-space: nowrap; +} + +.anomalous-translator-header-right { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; + margin-left: auto; +} + +.anomalous-translator-lang-wrap { + display: flex; + align-items: center; + gap: 4px; + font-size: 0.78rem; + color: #94a3b8; + white-space: nowrap; +} + +.anomalous-translator-lang-wrap span { + white-space: nowrap; +} + +.anomalous-translator-select { + background: #1e293b; + border: 1px solid rgba(255, 255, 255, 0.15); + color: #e2e8f0; + font-size: 0.76rem; + border-radius: 6px; + padding: 3px 6px; + max-width: 120px; + cursor: pointer; +} + +.anomalous-translator-close { + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.15); + color: #e2e8f0; + font-size: 1.25rem; + line-height: 1; + cursor: pointer; + padding: 3px 8px; + border-radius: 6px; + transition: all 0.15s ease; + flex-shrink: 0; + margin-left: 2px; +} + +.anomalous-translator-close:hover { + color: #ffffff; + background: #ef4444 !important; + border-color: #ef4444 !important; + transform: scale(1.08); +} + +.anomalous-translator-body { + display: flex; + flex-direction: column; + gap: 14px; + padding: 16px 18px; + overflow-y: auto; + flex: 1; +} + +.anomalous-translator-pane { + display: flex; + flex-direction: column; + gap: 8px; + background: rgba(30, 41, 59, 0.5); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 10px; + padding: 12px; +} + +.anomalous-translator-pane-label { + font-size: 0.78rem; + font-weight: 600; + color: #94a3b8; + display: flex; + align-items: center; + justify-content: space-between; +} + +.anomalous-translator-textarea { + width: 100%; + min-height: 84px; + background: #090d16; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + color: #f8fafc; + font-family: inherit; + font-size: 0.88rem; + line-height: 1.5; + padding: 10px 12px; + resize: vertical; + box-sizing: border-box; + transition: border-color 0.2s; +} + +.anomalous-translator-textarea:focus { + border-color: #38bdf8; + outline: none; + box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2); +} + +.anomalous-translator-textarea.is-target { + color: #38bdf8; + background: #070b13; +} + +.anomalous-translator-action-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + flex-wrap: wrap; +} + +.anomalous-translator-action-group { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; +} + +.anomalous-translator-mid-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 10px; + background: rgba(15, 23, 42, 0.75); + border: 1px solid rgba(56, 189, 248, 0.2); + border-radius: 8px; + margin: 2px 0; + gap: 8px; + box-sizing: border-box; +} + +.anomalous-translator-swap-btn { + background: #1e293b; + border: 1px solid rgba(56, 189, 248, 0.35); + color: #38bdf8; + border-radius: 12px; + padding: 3px 12px; + font-size: 0.76rem; + font-weight: 500; + cursor: pointer; + transition: all 0.15s ease; + display: inline-flex; + align-items: center; + gap: 5px; + white-space: nowrap; + flex-shrink: 0; +} + +.anomalous-translator-swap-btn:hover { + background: #0284c7; + color: #ffffff; + border-color: #38bdf8; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4); +} + +.anomalous-translator-chips-wrap { + display: flex; + flex-wrap: wrap; + gap: 6px; + max-height: 120px; + overflow-y: auto; + padding: 6px 4px; +} + +.anomalous-translator-chip { + display: inline-flex; + align-items: center; + padding: 3px 8px; + background: rgba(56, 189, 248, 0.1); + border: 1px solid rgba(56, 189, 248, 0.28); + border-radius: 12px; + color: #7dd3fc; + font-size: 0.75rem; + cursor: pointer; + transition: all 0.15s ease; + user-select: none; +} + +.anomalous-translator-chip:hover { + background: rgba(56, 189, 248, 0.25); + border-color: #38bdf8; + color: #ffffff; + transform: translateY(-1px); +} + +.anomalous-translator-toast { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background: rgba(15, 23, 42, 0.95); + border: 1px solid #38bdf8; + color: #38bdf8; + padding: 8px 18px; + border-radius: 20px; + font-size: 0.82rem; + font-weight: 500; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); + z-index: 100; + pointer-events: none; + animation: anmFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); + transition: opacity 0.4s ease; +} + +.anomalous-translator-toast.is-error { + border-color: #f87171; + color: #f87171; +} + +.anomalous-translator-toast.is-fade-out { + opacity: 0; +} + +.anomalous-mixer-block-btn.is-translate { + font-size: 0.78rem; + padding: 2px 4px; + opacity: 0.8; +} + +.anomalous-mixer-block-btn.is-translate:hover { + opacity: 1; + color: #38bdf8; + background: rgba(56, 189, 248, 0.18); +} + +/* ========================================================================== + PROMPT STUDIO: Minimalist Sidebar Drawer & Floating Action Dock + ========================================================================== */ +.anomalous-prompt-studio-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 999990; + pointer-events: none; /* Canvas passthrough: pan/zoom canvas freely */ + overflow: hidden; +} + +.anomalous-prompt-studio-drawer { + position: absolute; + top: 0; + right: 0; + width: 580px; + max-width: 90vw; + height: 100vh; + background: var(--amb-bg-page, #121316); + border-left: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6); + pointer-events: auto; + display: flex; + flex-direction: column; + z-index: 999991; + box-sizing: border-box; +} + +.anomalous-prompt-studio-drawer.is-dock-left { + right: auto; + left: 0; + border-left: none; + border-right: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12)); + box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6); +} + +/* Edge Resize Handle */ +.anomalous-studio-resize-handle { + position: absolute; + top: 0; + left: -4px; + width: 8px; + height: 100%; + cursor: ew-resize; + z-index: 100; + transition: background 0.15s ease; +} + +.anomalous-prompt-studio-drawer.is-dock-left .anomalous-studio-resize-handle { + left: auto; + right: -4px; +} + +.anomalous-studio-resize-handle:hover, +.anomalous-studio-resize-handle.is-resizing { + background: #38bdf8; + box-shadow: 0 0 10px rgba(56, 189, 248, 0.6); +} + +/* Drawer Workbench Base */ +.anomalous-prompt-studio-drawer .anomalous-prompt-workbench { + background: transparent; + padding: 0; + height: 100%; + display: flex; + flex-direction: column; +} + +/* Shared drawer geometry. Dock direction only changes column order and separators. */ +.anomalous-prompt-studio-drawer.is-dock-left .anomalous-prompt-workbench-grid, +.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-prompt-workbench-grid { + display: grid !important; + flex-direction: row !important; + gap: 0 !important; + padding: 0 !important; + flex: 1; + min-height: 0; +} + +.anomalous-prompt-studio-drawer.is-dock-left .anomalous-prompt-workbench-grid { + grid-template-columns: 190px minmax(0, 1fr) !important; +} + +.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-prompt-workbench-grid { + grid-template-columns: minmax(0, 1fr) 190px !important; +} + +.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-left-panel, +.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-left-panel { + flex: none !important; + width: 190px !important; + max-height: 100% !important; + padding: 8px 10px !important; + border-left: none !important; + background: rgba(18, 20, 24, 0.7) !important; + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-left-panel { + order: 1 !important; + border-right: 1px solid rgba(255, 255, 255, 0.08) !important; +} + +.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-left-panel { + order: 2 !important; + border-right: none !important; +} + +.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-right-panel, +.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-right-panel { + flex: 1 !important; + max-height: 100% !important; + padding: 8px 12px 52px !important; + position: relative; + box-sizing: border-box; + background: rgba(14, 15, 18, 0.5) !important; + display: flex; + flex-direction: column; +} + +.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-right-panel { + order: 2 !important; +} + +.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-right-panel { + order: 1 !important; + border-right: 1px solid rgba(255, 255, 255, 0.08) !important; + border-left: none !important; +} + +/* Column Headers & Action Buttons */ +.anomalous-workbench-col-header { + display: flex; + align-items: center; + justify-content: space-between; + height: 30px; + padding: 0 2px; + margin-bottom: 6px; + flex-shrink: 0; +} + +.anomalous-workbench-col-title { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 0.84rem; + font-weight: 600; + color: #f1f5f9; + white-space: nowrap; +} + +.anomalous-workbench-col-title .anomalous-sub-counter { + font-size: 0.72rem; + color: #64748b; + font-weight: normal; +} + +.anomalous-workbench-header-actions { + display: inline-flex; + align-items: center; + gap: 4px; + flex-shrink: 0; +} + +.anomalous-workbench-header-actions button.anomalous-icon-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + padding: 0; + border-radius: 5px; + color: #94a3b8; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-workbench-header-actions button.anomalous-icon-btn:hover { + color: #ffffff; + background: rgba(56, 189, 248, 0.18); + border-color: rgba(56, 189, 248, 0.4); +} + +/* Category Pills: 5 equal 2-char chips */ +.anomalous-workbench-category-pills { + display: flex; + align-items: center; + gap: 3px; + flex-wrap: nowrap; + margin: 4px 0 8px; +} + +.anomalous-workbench-pill { + flex: 1 1 0; + text-align: center; + padding: 3px 0; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.03); + color: #94a3b8; + font-size: 0.72rem; + cursor: pointer; + transition: all 0.15s ease; + line-height: 1.3; + white-space: nowrap; +} + +.anomalous-workbench-pill:hover { + color: #f1f5f9; + background: rgba(255, 255, 255, 0.08); +} + +.anomalous-workbench-pill.is-active { + color: #38bdf8; + background: rgba(56, 189, 248, 0.15); + border-color: rgba(56, 189, 248, 0.4); + font-weight: 600; +} + +/* Compact Source Cards in 190px */ +.anomalous-source-cards-list { + flex: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 4px; + padding-right: 2px; +} + +.anomalous-source-card-compact { + display: flex; + align-items: center; + gap: 7px; + padding: 6px 9px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + border-left: 3px solid #64748b; + border-radius: 6px; + cursor: pointer; + transition: all 0.15s ease; + user-select: none; + min-width: 0; + box-sizing: border-box; +} + +.anomalous-source-card-compact.is-cat-base { + border-left-color: #38bdf8 !important; +} + +.anomalous-source-card-compact.is-cat-style { + border-left-color: #c084fc !important; +} + +.anomalous-source-card-compact.is-cat-subject { + border-left-color: #4ade80 !important; +} + +.anomalous-source-card-compact.is-cat-trigger { + border-left-color: #fb923c !important; +} + +.anomalous-source-card-compact:hover, +.anomalous-source-card-compact.is-preview-active { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.22); + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); + transform: translateX(2px); +} + +.anomalous-source-card-compact.is-cat-base:hover, +.anomalous-source-card-compact.is-cat-base.is-preview-active { + border-color: rgba(56, 189, 248, 0.4); + background: rgba(56, 189, 248, 0.12); +} + +.anomalous-source-card-compact.is-cat-style:hover, +.anomalous-source-card-compact.is-cat-style.is-preview-active { + border-color: rgba(192, 132, 252, 0.4); + background: rgba(192, 132, 252, 0.12); +} + +.anomalous-source-card-compact.is-cat-subject:hover, +.anomalous-source-card-compact.is-cat-subject.is-preview-active { + border-color: rgba(74, 222, 128, 0.4); + background: rgba(74, 222, 128, 0.12); +} + +.anomalous-source-card-compact.is-cat-trigger:hover, +.anomalous-source-card-compact.is-cat-trigger.is-preview-active { + border-color: rgba(251, 146, 60, 0.4); + background: rgba(251, 146, 60, 0.12); +} + +.anomalous-source-card-dot { + width: 6px; + height: 6px; + border-radius: 50%; + flex-shrink: 0; +} + +.anomalous-source-card-label { + display: flex; + flex-direction: column; + min-width: 0; + flex: 1; +} + +.anomalous-source-origin, +.anomalous-source-sync-status { + color: var(--amb-text-muted, #94a3b8); + font-size: 0.68rem; + overflow-wrap: anywhere; +} + +.anomalous-source-sync-status { + padding: 4px 12px; +} + +.anomalous-source-card-name { + font-size: 0.76rem; + font-weight: 500; + color: #f1f5f9; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1; +} + +.anomalous-source-card-compact:hover .anomalous-source-card-name, +.anomalous-source-card-compact.is-preview-active .anomalous-source-card-name { + color: #ffffff; +} + +.anomalous-source-card-add-icon { + font-size: 0.72rem; + color: #64748b; + opacity: 0; + transition: opacity 0.15s; + flex-shrink: 0; + padding: 0 4px; + border-radius: 3px; +} + +.anomalous-source-card-compact:hover .anomalous-source-card-add-icon, +.anomalous-source-card-compact.is-preview-active .anomalous-source-card-add-icon { + opacity: 1; + color: #38bdf8; + background: rgba(56, 189, 248, 0.18); +} + +/* Eye-Catching Prompt Card Hover Preview Popover (Replaces unstyled browser tooltip) */ +.anomalous-card-preview-popover { + position: fixed; + z-index: 1000005; + width: 320px; + max-width: calc(100vw - 32px); + background: rgba(18, 20, 26, 0.98); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(56, 189, 248, 0.35); + border-radius: 10px; + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.18); + display: flex; + flex-direction: column; + overflow: visible; + pointer-events: auto; + animation: anmPopoverIn 0.15s cubic-bezier(0.16, 1, 0.3, 1); +} + +.anomalous-card-preview-popover.is-dock-left::before, +.anomalous-card-preview-popover.is-dock-right::before { + display: none; +} + +.anomalous-card-preview-popover.is-pinned { + border-color: #38bdf8 !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(56, 189, 248, 0.35) !important; +} + +.anomalous-popover-copy-btn, +.anomalous-popover-pin-btn, +.anomalous-popover-add-btn { + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 4px; + color: #cbd5e1; + font-size: 0.7rem; + font-weight: 500; + padding: 2px 7px; + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; +} + +.anomalous-popover-copy-btn:hover, +.anomalous-popover-pin-btn:hover { + background: rgba(56, 189, 248, 0.15); + border-color: rgba(56, 189, 248, 0.4); + color: #38bdf8; +} + +.anomalous-popover-pin-btn.is-active { + background: rgba(56, 189, 248, 0.25) !important; + border-color: #38bdf8 !important; + color: #38bdf8 !important; + font-weight: 600; +} + +.anomalous-popover-close-btn { + background: transparent; + border: 1px solid transparent; + color: #94a3b8; + font-size: 0.75rem; + padding: 1px 6px; + cursor: pointer; + border-radius: 4px; + transition: all 0.15s ease; + line-height: 1.2; +} + +.anomalous-popover-close-btn:hover { + background: rgba(239, 68, 68, 0.2); + border-color: rgba(239, 68, 68, 0.4); + color: #f87171; +} + +.anomalous-popover-add-btn { + background: rgba(56, 189, 248, 0.15); + border-color: rgba(56, 189, 248, 0.35); + color: #38bdf8; +} + +.anomalous-popover-add-btn:hover { + background: rgba(56, 189, 248, 0.28); + border-color: rgba(56, 189, 248, 0.6); + color: #ffffff; +} + +@keyframes anmPopoverIn { + from { opacity: 0; transform: scale(0.96) translateX(-4px); } + to { opacity: 1; transform: scale(1) translateX(0); } +} + +.anomalous-popover-header { + padding: 10px 12px 6px; + background: rgba(255, 255, 255, 0.02); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + display: flex; + flex-direction: column; + gap: 4px; +} + +.anomalous-popover-tags { + display: flex; + align-items: center; + gap: 6px; +} + +.anomalous-popover-cat { + padding: 2px 7px; + border-radius: 4px; + font-size: 0.68rem; + font-weight: 600; + line-height: 1.2; + border: 1px solid transparent; +} + +.anomalous-popover-role { + padding: 2px 7px; + border-radius: 4px; + font-size: 0.68rem; + font-weight: 600; + line-height: 1.2; +} + +.anomalous-popover-role.is-positive { + background: rgba(56, 189, 248, 0.15); + color: #38bdf8; + border: 1px solid rgba(56, 189, 248, 0.35); +} + +.anomalous-popover-role.is-negative { + background: rgba(251, 113, 133, 0.15); + color: #fb7185; + border: 1px solid rgba(251, 113, 133, 0.35); +} + +.anomalous-popover-title { + font-size: 0.86rem; + font-weight: 600; + color: #f8fafc; + line-height: 1.35; + word-break: break-word; +} + +.anomalous-popover-body { + padding: 8px 12px; +} + +.anomalous-popover-snippet { + margin: 0; + padding: 8px 10px; + background: rgba(0, 0, 0, 0.45); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 6px; + color: #38bdf8; + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 0.76rem; + line-height: 1.45; + white-space: pre-wrap; + word-break: break-word; + max-height: 140px; + overflow-y: auto; +} + +.anomalous-popover-footer { + padding: 6px 12px 7px; + font-size: 0.7rem; + color: #94a3b8; + display: flex; + align-items: center; + background: rgba(0, 0, 0, 0.25); + border-top: 1px solid rgba(255, 255, 255, 0.04); +} + +/* Assembly Dropzone Notice */ +.anomalous-assembly-dropzone { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + min-height: 260px; + padding: 40px 20px; + border: 1px dashed rgba(255, 255, 255, 0.1); + border-radius: 12px; + background: rgba(255, 255, 255, 0.015); + color: #64748b; + text-align: center; + box-sizing: border-box; + transition: all 0.2s ease; +} + +.anomalous-assembly-dropzone:hover, +.anomalous-assembly-dropzone.is-drag-over { + border-color: rgba(56, 189, 248, 0.4); + background: rgba(56, 189, 248, 0.04); +} + +/* Weight Wheel Pill in Assembled Blocks */ +.anomalous-block-weight-pill { + display: inline-flex; + align-items: center; + background: rgba(0, 0, 0, 0.45); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 12px; + padding: 0 4px; + font-size: 0.72rem; + font-family: monospace, sans-serif; + color: #38bdf8; + cursor: ns-resize; + user-select: none; + gap: 2px; + transition: all 0.15s; +} + +.anomalous-block-weight-pill:hover { + border-color: #38bdf8; + box-shadow: 0 0 8px rgba(56, 189, 248, 0.3); +} + +.anomalous-block-weight-btn { + background: transparent; + border: none; + color: #94a3b8; + cursor: pointer; + font-size: 0.7rem; + padding: 0 2px; + line-height: 1; + transition: color 0.15s; +} + +.anomalous-block-weight-btn:hover { + color: #fff; +} + +/* Floating Action Dock (Slides up only when blocks exist) */ +.anomalous-floating-action-dock { + position: absolute; + bottom: 8px; + left: 8px; + right: 8px; + height: 38px; + background: rgba(22, 25, 32, 0.94); + backdrop-filter: blur(16px); + border: 1px solid rgba(56, 189, 248, 0.35); + border-radius: 20px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.18); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10px; + z-index: 20; + animation: anmSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); + box-sizing: border-box; +} + +.anomalous-floating-dock-left { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.72rem; + color: #94a3b8; + white-space: nowrap; +} + +.anomalous-floating-dock-right { + display: flex; + align-items: center; + gap: 5px; +} + +/* Independent Popout Prompt Inspector Modal */ +.anomalous-prompt-inspector-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(8px); + z-index: 999999; + display: flex; + align-items: center; + justify-content: center; + animation: anmFadeIn 0.2s ease; +} + +.anomalous-prompt-inspector-modal { + width: 780px; + max-width: 92vw; + height: 520px; + max-height: 88vh; + background: var(--amb-bg-panel, #181a20); + border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.16)); + border-radius: 14px; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.2); + display: flex; + flex-direction: column; + overflow: hidden; + animation: anmScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1); +} + +.anomalous-inspector-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 16px; + background: rgba(255, 255, 255, 0.03); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.anomalous-inspector-body { + flex: 1; + min-height: 0; + padding: 14px 16px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.anomalous-inspector-textarea { + flex: 1; + width: 100%; + box-sizing: border-box; + background: rgba(0, 0, 0, 0.35); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + color: #e2e8f0; + font-family: Consolas, Monaco, "Courier New", monospace; + font-size: 0.88rem; + line-height: 1.6; + padding: 12px; + resize: none; + outline: none; + transition: border-color 0.15s; +} + +.anomalous-inspector-textarea:focus { + border-color: #38bdf8; + box-shadow: 0 0 12px rgba(56, 189, 248, 0.25); +} + +.anomalous-inspector-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 16px; + background: rgba(255, 255, 255, 0.03); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +@keyframes anmScaleUp { + from { transform: scale(0.95); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} + +@keyframes anmSlideUp { + from { transform: translateY(12px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +/* Unified Positive / Negative Role Badges & Cross-Role Tail Indicators */ +.anomalous-card-role-tag { + font-size: 0.65rem; + font-weight: 700; + line-height: 1; + padding: 1px 4px; + border-radius: 3px; + letter-spacing: 0.2px; + flex-shrink: 0; + user-select: none; +} + +.anomalous-card-role-tag.is-positive { + color: #38bdf8; + background: rgba(56, 189, 248, 0.14); + border: 1px solid rgba(56, 189, 248, 0.28); +} + +.anomalous-card-role-tag.is-negative { + color: #fb7185; + background: rgba(244, 63, 94, 0.14); + border: 1px solid rgba(244, 63, 94, 0.28); +} + +.anomalous-mixer-tab-btn.is-role-positive.is-active { + background: rgba(56, 189, 248, 0.16) !important; + color: #38bdf8 !important; + border: 1px solid rgba(56, 189, 248, 0.35) !important; + box-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important; +} + +.anomalous-mixer-tab-btn.is-role-negative.is-active { + background: rgba(244, 63, 94, 0.16) !important; + color: #fb7185 !important; + border: 1px solid rgba(244, 63, 94, 0.35) !important; + box-shadow: 0 0 10px rgba(244, 63, 94, 0.15) !important; +} + +.anomalous-mixer-block.is-cross-role { + border-style: dashed; + border-color: rgba(251, 113, 133, 0.45); + background: rgba(251, 113, 133, 0.05); +} + +.anomalous-mixer-block.is-role-positive.is-cross-role { + border-color: rgba(56, 189, 248, 0.45); + background: rgba(56, 189, 248, 0.05); +} + +.anomalous-mixer-role-badge { + padding: 2px 6px; + border-radius: 4px; + font-size: 0.68rem; + font-weight: 700; + line-height: 1.3; + display: inline-flex; + align-items: center; + gap: 3px; + cursor: pointer; + user-select: none; + white-space: nowrap; + flex-shrink: 0; + transition: all 0.15s ease; + border: 1px solid transparent; +} + +.anomalous-mixer-cat-badge { + padding: 2px 6px; + border-radius: 4px; + font-size: 0.68rem; + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + flex-shrink: 0; + cursor: pointer; + user-select: none; +} + +.anomalous-mixer-role-badge.is-positive { + color: #38bdf8; + background: rgba(56, 189, 248, 0.14); + border-color: rgba(56, 189, 248, 0.28); +} + +.anomalous-mixer-role-badge.is-negative { + color: #fb7185; + background: rgba(244, 63, 94, 0.14); + border-color: rgba(244, 63, 94, 0.28); +} + +.anomalous-mixer-role-badge.is-cross-role { + border-style: dashed; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); +} + +.anomalous-mixer-role-badge:hover { + transform: scale(1.04); + filter: brightness(1.15); +} + +.anomalous-mixer-block-btn.is-transfer:hover { + color: #38bdf8; + background: rgba(56, 189, 248, 0.15); +} + +/* ========================================================================= */ diff --git a/web/styles/10-model-sources.css b/web/styles/10-model-sources.css new file mode 100644 index 0000000..4b6fae7 --- /dev/null +++ b/web/styles/10-model-sources.css @@ -0,0 +1,697 @@ +/* Model Source Hub Modal (模型来源统一中控中心) */ +/* ========================================================================= */ +.anomalous-model-sources-overlay { + position: fixed; + inset: 0; + background: rgba(5, 7, 12, 0.78); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + z-index: 1000008; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + box-sizing: border-box; + animation: anmFadeIn 0.2s ease; +} + +.anomalous-model-sources-modal { + width: 880px; + max-width: 96vw; + max-height: 88vh; + background: #0e1017; + border: 1px solid rgba(244, 63, 94, 0.35); + border-radius: 12px; + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 32px rgba(190, 20, 55, 0.18); + display: flex; + flex-direction: column; + overflow: hidden; + color: #e2e8f0; +} + +.anomalous-sources-header { + padding: 14px 18px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(18, 20, 28, 0.9); + flex-shrink: 0; +} + +.anomalous-sources-top-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; +} + +.anomalous-sources-title-wrap h3 { + margin: 0; + font-size: 1.05rem; + font-weight: 600; + color: #f1f5f9; +} + +.anomalous-sources-close-btn { + background: transparent; + border: none; + color: #94a3b8; + font-size: 1.1rem; + cursor: pointer; + padding: 4px 8px; + border-radius: 6px; + transition: all 0.15s ease; +} + +.anomalous-sources-close-btn:hover { + color: #fff; + background: rgba(255, 255, 255, 0.1); +} + +.anomalous-sources-scope-tabs { + display: flex; + gap: 8px; +} + +.anomalous-sources-scope-tab { + background: transparent; + border: none; + border-bottom: 2px solid transparent; + color: #94a3b8; + padding: 8px 16px; + font-size: 0.88rem; + font-weight: 500; + cursor: pointer; + transition: all 0.15s ease; + display: flex; + align-items: center; + gap: 6px; +} + +.anomalous-sources-scope-tab:hover { + color: #f1f5f9; +} + +.anomalous-sources-scope-tab.is-active { + color: #38bdf8; + border-bottom-color: #38bdf8; + font-weight: 600; +} + +.anomalous-sources-badge-num { + font-size: 0.72rem; + padding: 1px 6px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.08); + color: #cbd5e1; +} + +.anomalous-sources-filter-bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 10px 18px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + background: rgba(14, 16, 23, 0.95); + flex-shrink: 0; +} + +.anomalous-sources-pills { + display: flex; + gap: 6px; +} + +.anomalous-sources-pill { + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + color: #94a3b8; + border-radius: 16px; + padding: 3px 10px; + font-size: 0.78rem; + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-sources-pill:hover { + color: #f1f5f9; + background: rgba(255, 255, 255, 0.08); +} + +.anomalous-sources-pill.is-active { + background: rgba(56, 189, 248, 0.18); + border-color: rgba(56, 189, 248, 0.4); + color: #38bdf8; + font-weight: 600; +} + +.anomalous-sources-search-input { + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 6px; + color: #f1f5f9; + font-size: 0.8rem; + padding: 5px 10px; + width: 220px; + outline: none; + transition: border-color 0.15s ease; +} + +.anomalous-sources-search-input:focus { + border-color: #38bdf8; +} + +.anomalous-sources-body { + flex: 1; + overflow-y: auto; + padding: 14px 18px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.anomalous-source-row-item { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 8px; + padding: 10px 14px; + display: flex; + flex-direction: column; + gap: 8px; + transition: border-color 0.15s ease, background 0.15s ease; +} + +.anomalous-source-row-item.has-url { + border-left: 3px solid #10b981; +} + +.anomalous-source-row-item.is-missing-url { + border-left: 3px solid #f59e0b; +} + +.anomalous-source-row-title { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.anomalous-source-node-tag { + font-size: 0.72rem; + padding: 1px 6px; + border-radius: 4px; + background: rgba(244, 63, 94, 0.15); + border: 1px solid rgba(244, 63, 94, 0.3); + color: #fb7185; + font-family: monospace; +} + +.anomalous-source-model-name { + font-size: 0.88rem; + color: #f1f5f9; + word-break: break-all; +} + +.anomalous-source-badge-danger { + font-size: 0.7rem; + padding: 1px 5px; + border-radius: 4px; + background: rgba(239, 68, 68, 0.2); + border: 1px solid rgba(239, 68, 68, 0.4); + color: #f87171; +} + +.anomalous-source-hash-chip { + font-size: 0.72rem; + color: #64748b; + margin-left: auto; + font-family: monospace; +} + +.anomalous-source-col-input-row { + display: flex; + align-items: center; + gap: 8px; +} + +.anomalous-source-input-wrap { + flex: 1; + position: relative; + display: flex; + align-items: center; +} + +.anomalous-source-url-input { + width: 100%; + background: rgba(0, 0, 0, 0.4); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 6px; + color: #e2e8f0; + font-size: 0.82rem; + padding: 6px 10px; + padding-right: 96px; + outline: none; + box-sizing: border-box; + font-family: monospace; +} + +.anomalous-source-url-input:focus { + border-color: #38bdf8; + background: rgba(0, 0, 0, 0.6); +} + +.anomalous-source-url-input.is-locked { + background: rgba(0, 0, 0, 0.25); + border-color: rgba(255, 255, 255, 0.07); + color: #94a3b8; + cursor: default; +} + +.anomalous-source-url-input.is-locked:hover { + border-color: rgba(255, 255, 255, 0.18); +} + +.anomalous-source-url-input.is-editing { + border-color: #f59e0b; + background: rgba(245, 158, 11, 0.08); + box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25); + color: #f8fafc; +} + +.anomalous-source-edit-badge { + font-size: 0.7rem; + font-weight: 500; + color: #fbbf24; + background: rgba(245, 158, 11, 0.15); + border: 1px solid rgba(245, 158, 11, 0.35); + padding: 1px 6px; + border-radius: 4px; + white-space: nowrap; +} + +.anomalous-btn-save-local { + background: linear-gradient(135deg, #f59e0b, #d97706) !important; + border-color: rgba(245, 158, 11, 0.6) !important; + color: #fff !important; + font-weight: 600; + animation: anomalousSourcesPulse 1.6s ease-in-out infinite; +} + +@keyframes anomalousSourcesPulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } + 50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); } +} + +.anomalous-source-plat-badge { + position: absolute; + right: 6px; + font-size: 0.7rem; + font-weight: 500; + padding: 2px 7px; + border-radius: 4px; + border: 1px solid; + pointer-events: none; +} + +.anomalous-source-row-actions { + display: flex; + gap: 6px; + align-items: center; + flex-shrink: 0; +} + +.anomalous-btn-jump { + background: linear-gradient(135deg, #0284c7, #0369a1); + border: 1px solid rgba(56, 189, 248, 0.4); + color: #fff; +} + +.anomalous-btn-jump:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.anomalous-sources-footer { + padding: 10px 18px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(18, 20, 28, 0.95); + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; +} + +.anomalous-sources-footer-stats { + font-size: 0.82rem; + color: #94a3b8; +} + +.anomalous-sources-footer-actions { + display: flex; + gap: 8px; +} + +.anomalous-sources-empty { + padding: 40px 20px; + text-align: center; + color: #94a3b8; + font-size: 0.9rem; +} + +/* ============================================================================= + UPDATE GUIDE NOTICE INDICATOR (CLEAN MONOCHROME TECH) + ============================================================================= */ +/* Header skin uses important padding/colors; keep this control square within that skin. */ +#anomalous-header button.anomalous-update-notice-btn { + width: 32px; + min-width: 32px; + padding: 0 !important; + background: transparent !important; + border-color: rgba(255, 255, 255, 0.15) !important; + color: var(--amb-text-primary, #e2e8f0) !important; +} +#anomalous-header button.anomalous-update-notice-btn:hover { + background: rgba(255, 255, 255, 0.08) !important; +} +.anomalous-update-notice-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + border: 1px solid currentColor; + border-radius: 50%; + font: 700 12px/1 system-ui, sans-serif; +} +#anomalous-help-replay-guide-btn { + padding: 8px 14px; + background: rgba(255, 255, 255, 0.05); + color: #cbd5e1; + border: 1px solid rgba(255, 255, 255, 0.16); + border-radius: 4px; + cursor: pointer; + font-size: 12px; + font-weight: 500; +} +#anomalous-help-replay-guide-btn:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.3); + color: #fff; +} +#anomalous-update-notice-btn:focus-visible, +#anomalous-help-replay-guide-btn:focus-visible, +.anomalous-update-guide button:focus-visible { + outline: 2px solid var(--amb-accent, #38bdf8); + outline-offset: 2px; +} + +/* ============================================================================= + SIDEBAR ACTIONS HOVER REVEAL & TOOLTIPS + ============================================================================= */ +#anomalous-sidebar-actions .anomalous-action-label { + position: absolute; + inset: 0; + display: inline-flex; + align-items: center; + justify-content: center; + font: 600 11px/1 system-ui, sans-serif; + color: #ffffff; + pointer-events: none !important; + white-space: nowrap; + opacity: 0; + transform: translateY(3px); + transition: opacity 0.12s ease, transform 0.12s ease; +} + +#anomalous-sidebar-actions button.anomalous-action-label-active > svg { + opacity: 0 !important; + pointer-events: none !important; +} + +#anomalous-sidebar-actions button.anomalous-action-label-active .anomalous-action-label { + opacity: 1 !important; + transform: translateY(0) !important; +} + +#anomalous-sidebar-actions button:focus-visible { + outline: 2px solid var(--amb-accent, #38bdf8); + outline-offset: 2px; +} + +@media (hover: none) { + #anomalous-sidebar-actions button > svg { opacity: 0 !important; } + #anomalous-sidebar-actions .anomalous-action-label { opacity: 1 !important; transform: none !important; } +} + +/* Suppress CSS pseudo-element tooltips on sidebar action buttons */ +#anomalous-sidebar-actions button::after, +#anomalous-sidebar-actions button::before { + display: none !important; +} + +/* ============================================================================= + SHARED SIDEBAR FLOATING TOOLTIP BUBBLE (SINGLETON DOM) + ============================================================================= */ +#anomalous-sidebar-tooltip-bubble { + position: fixed; + z-index: 1000001; + pointer-events: none; + display: none; + flex-direction: column; + align-items: center; + padding: 7px 11px; + max-width: 220px; + background: rgba(18, 20, 26, 0.98); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 6px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.08); + box-sizing: border-box; + transition: opacity 0.15s ease; +} + +#anomalous-sidebar-tooltip-bubble .anomalous-tooltip-title { + font-size: 11.5px; + font-weight: 600; + color: #ffffff; + margin-bottom: 2px; + text-align: center; + line-height: 1.3; +} + +#anomalous-sidebar-tooltip-bubble .anomalous-tooltip-body { + font-size: 10.5px; + font-weight: 400; + color: #94a3b8; + line-height: 1.4; + text-align: center; + white-space: normal; + word-break: normal; + overflow-wrap: break-word; +} + +#anomalous-sidebar-tooltip-bubble .anomalous-tooltip-arrow { + position: absolute; + bottom: -5px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid rgba(18, 20, 26, 0.98); + transform: translateX(-50%); +} + +@media (prefers-reduced-motion: reduce) { + #anomalous-sidebar-actions button .anomalous-action-label { + animation: none !important; + transform: none !important; + } + #anomalous-sidebar-tooltip-bubble { + transition: none !important; + } +} + +/* ============================================================================= + UPDATE GUIDE MODAL (ELEGANT MONOCHROME OBSIDIAN GLASS) + ============================================================================= */ +dialog.anomalous-update-guide:not([open]) { + display: none !important; +} + +dialog.anomalous-update-guide[open] { + display: flex !important; + flex-direction: column; +} + +dialog.anomalous-update-guide { + position: fixed; + inset: 0; + margin: auto; + width: 480px; + max-width: calc(100vw - 32px); + height: fit-content; + max-height: 85vh; + padding: 0; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 16px; + background: linear-gradient(145deg, rgba(28, 30, 38, 0.98), rgba(16, 18, 24, 0.98)); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.12); + color: #f1f5f9; + outline: none; + overflow-y: auto; + box-sizing: border-box; + z-index: 1000000; + animation: anomalous-guide-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1); +} + +dialog.anomalous-update-guide > * { flex-shrink: 0; } + +@keyframes anomalous-guide-pop { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + +dialog.anomalous-update-guide::backdrop { + background: rgba(0, 0, 0, 0.65); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + animation: anomalous-fade-in 0.2s ease; +} + +@keyframes anomalous-fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +.anomalous-update-guide-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 20px; + background: rgba(255, 255, 255, 0.02); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + font-size: 12px; + font-weight: 600; + letter-spacing: 0.5px; + color: #94a3b8; +} + +.anomalous-update-guide-close { + background: transparent; + border: none; + color: #94a3b8; + font-size: 20px; + line-height: 1; + cursor: pointer; + padding: 2px 6px; + border-radius: 6px; + transition: all 0.15s ease; +} + +.anomalous-update-guide-close:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.1); +} + +.anomalous-update-guide-icon { + width: 58px; + height: 58px; + margin: 24px auto 14px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.14); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: #f1f5f9; + user-select: none; + flex-shrink: 0; +} + +#anomalous-update-guide-title { + margin: 0 24px 10px; + font-size: 17px; + font-weight: 600; + color: #ffffff; + text-align: center; + letter-spacing: 0.2px; +} + +#anomalous-update-guide-body { + margin: 0 24px 16px; + font-size: 13px; + line-height: 1.65; + color: #cbd5e1; + text-align: center; + min-height: 60px; +} + +.anomalous-update-guide-progress { + margin: 0 24px 20px; + font-size: 11px; + color: #64748b; + text-align: center; + font-weight: 500; + letter-spacing: 0.4px; +} + +.anomalous-update-guide-footer { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + padding: 14px 20px; + background: rgba(0, 0, 0, 0.28); + border-top: 1px solid rgba(255, 255, 255, 0.06); + gap: 10px; +} + +.anomalous-update-guide-footer .anomalous-btn-ghost { + padding: 7px 15px; + font-size: 12px; + border-radius: 6px; + color: #94a3b8; + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.08); + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-update-guide-footer .anomalous-btn-ghost:hover:not(:disabled) { + color: #ffffff; + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.18); +} + +.anomalous-update-guide-footer .anomalous-btn-ghost:disabled { + opacity: 0.35; + cursor: not-allowed; +} + +.anomalous-update-guide-footer .anomalous-btn-primary { + padding: 7px 22px; + font-size: 12px; + font-weight: 600; + border-radius: 6px; + color: #0f172a; + background: #f1f5f9; + border: 1px solid #ffffff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + cursor: pointer; + transition: all 0.15s ease; +} + +.anomalous-update-guide-footer .anomalous-btn-primary:hover { + background: #ffffff; + box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25); + transform: translateY(-1px); +}