156 lines
4.6 KiB
CSS
156 lines
4.6 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); }
|
|
}
|
|
|
|
/* 7. Slide-out Material Import Drawer */
|
|
|
|
@keyframes drawerSlideIn {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
/* ==========================================================================
|
|
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);
|
|
/* Action receipts (especially Undo) must sit above the parameter comparison overlay. */
|
|
z-index: 1000002;
|
|
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); }
|
|
}
|
|
|
|
/* Empty list */
|
|
.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: var(--amb-lt-sunken, 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-recipe-empty {
|
|
border-color: rgba(220, 20, 60, 0.25);
|
|
background: rgba(20, 8, 14, 0.4);
|
|
}
|
|
|
|
.anomalous-recipe-empty > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
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: var(--amb-lt-surface, 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);
|
|
}
|