DemonGatanjieuandClaude Opus 5.5
e6de76502a
The assembly board, its write-to-node step and the positive/negative tabs are gone. The studio now shows the prompt boxes of the prompt node last selected on the canvas (or a draft) as tags that are edited in place: weight, edit, remove, reorder, type to add with Chinese translated to English, and an optional Chinese meaning under each tag. Every change is one node write with Ctrl+Z, and the studio has its own Undo. Cards: three common ones instead of six, plus saved prompts; a saved prompt's text is read once instead of every 30 seconds. Current node lists the prompt boxes with Edit in Prompt Studio instead of its own translation. The inspector modal, starter-card data, plan loading and about 2,000 lines of CSS for the old board are removed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
486 lines
12 KiB
CSS
486 lines
12 KiB
CSS
/* 4. Prompt Composer Layout (Warm Paper Studio) */
|
|
|
|
@keyframes anmMoreMenuIn {
|
|
from { opacity: 0; transform: translateY(-4px) scale(0.97); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
/* 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 var(--amb-border);
|
|
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: var(--amb-border-strong);
|
|
}
|
|
|
|
/* 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: var(--amb-btn-primary-bg);
|
|
}
|
|
|
|
.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: var(--amb-text-dim);
|
|
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 var(--amb-border-strong);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--amb-text-soft);
|
|
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: var(--amb-text-main);
|
|
border-color: var(--amb-border-strong);
|
|
}
|
|
|
|
/* 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: var(--amb-text-main);
|
|
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: var(--amb-text-dim);
|
|
border-top: 1px dashed var(--amb-border);
|
|
}
|
|
|
|
.anomalous-paper-note-drag-prompt {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
/* 6. Active Target Status & Injection Bar (Unified Action Dock Element) */
|
|
|
|
.anomalous-target-node-badge {
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
color: var(--amb-text-muted);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--amb-border);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
max-width: 90px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 7. Slide-out Material Import Drawer */
|
|
|
|
@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 var(--amb-border);
|
|
}
|
|
|
|
.anomalous-drawer-header h4 {
|
|
margin: 0;
|
|
font-size: 0.98rem;
|
|
font-weight: 600;
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-drawer-search {
|
|
padding: 10px 18px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.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 var(--amb-border-strong);
|
|
color: var(--amb-text-main);
|
|
font-size: 0.82rem;
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-drawer-search input:focus {
|
|
border-color: var(--amb-link);
|
|
}
|
|
|
|
.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 var(--amb-border);
|
|
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: color-mix(in srgb, var(--amb-link) 30%, transparent);
|
|
}
|
|
|
|
.anomalous-drawer-item-title {
|
|
font-size: 0.84rem;
|
|
font-weight: 600;
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-drawer-item-preview {
|
|
font-size: 0.76rem;
|
|
color: var(--amb-text-muted);
|
|
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 var(--amb-border-strong);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--amb-text-soft);
|
|
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: var(--amb-text-main);
|
|
border-color: var(--amb-border-hover, var(--amb-border-strong));
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Prompt Mixer & Lego Assembler Deck (提示词乐高调音台)
|
|
========================================================================== */
|
|
|
|
/* 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, var(--amb-bg-panel));
|
|
border: 1px solid var(--amb-border, var(--amb-border-strong));
|
|
color: var(--amb-text-main);
|
|
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);
|
|
}
|
|
|
|
/* A toast with an action (undo) can be clicked. */
|
|
.anomalous-mixer-toast.has-action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.anomalous-mixer-toast-action {
|
|
padding: 3px 12px;
|
|
border: 1px solid var(--amb-border-hover);
|
|
border-radius: var(--amb-radius-control);
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-mixer-toast-action:hover {
|
|
background: var(--amb-btn-primary-hover);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
/* Inline New Card Creation Form */
|
|
|
|
@keyframes fadeInSlideDown {
|
|
from { opacity: 0; transform: translateY(-6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Source Cards List */
|
|
|
|
.anomalous-empty-state-container,
|
|
.anomalous-recipe-empty {
|
|
position: relative;
|
|
padding: 36px 16px;
|
|
text-align: center;
|
|
color: var(--amb-text-muted, var(--amb-text-muted));
|
|
font-size: 0.82rem;
|
|
background: rgba(0, 0, 0, 0.18);
|
|
border-radius: var(--amb-radius-control, 6px);
|
|
border: 1px dashed var(--amb-border, var(--amb-border));
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.theme-abyssal-scarlet .anomalous-empty-state-container,
|
|
.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-recipe-empty > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Individual Source Prompt Card (Tactile Skewed Glassmorphic Card Aesthetics) */
|
|
|
|
.anomalous-role-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 0.76rem;
|
|
color: var(--amb-text-soft);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.anomalous-role-label input[type="radio"] {
|
|
cursor: pointer;
|
|
accent-color: var(--amb-link);
|
|
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;
|
|
}
|
|
|
|
/* Interactive Auto-snap Dock at the bottom of Assembler blocks */
|
|
|
|
.anomalous-btn-extract-node {
|
|
position: relative;
|
|
background-color: rgba(255, 255, 255, 0.04) !important;
|
|
border: 1px solid var(--amb-border, var(--amb-border-strong)) !important;
|
|
border-radius: var(--amb-radius-control, 6px) !important;
|
|
color: var(--amb-text-main, var(--amb-text-main)) !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, var(--amb-border-strong)) !important;
|
|
color: var(--amb-text-main) !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 var(--amb-border-strong);
|
|
color: var(--amb-text-main);
|
|
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);
|
|
}
|