DemonGatanjieuandClaude Opus 5.5
430a83af00
Grey secondary and hint text is darker in the light theme. Labels and buttons laid over pictures (model card names, recipe cover labels, the gallery's View parameters button) keep the dark tokens, including ComfyUI's palette variables, so their text no longer turns dark on a dark backing. Prompt role badges, the red close crosses and the voice import button get colors that read in every theme. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
886 lines
28 KiB
CSS
886 lines
28 KiB
CSS
/* 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-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-rail-brand {
|
|
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-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-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 {
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 11. Task 9: Master Container Geometric Details, Watermarks & Floating Tooltips */
|
|
/* 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]:not(.anomalous-card-action-btn),
|
|
.anomalous-tooltip-target:not(.anomalous-card-action-btn) {
|
|
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: var(--amb-bg-tooltip);
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1.35;
|
|
white-space: nowrap;
|
|
border-radius: var(--amb-radius-control, 6px);
|
|
border: 1px solid var(--amb-border-strong);
|
|
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: var(--amb-bg-tooltip) 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 var(--amb-bg-tooltip) 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 var(--amb-bg-tooltip) 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;
|
|
}
|
|
|
|
.anomalous-card-action-btn[data-tooltip-pos="bottom"]::after {
|
|
left: auto !important;
|
|
right: 0 !important;
|
|
transform: translateX(0) translateY(-6px) !important;
|
|
}
|
|
.anomalous-card-action-btn[data-tooltip-pos="bottom"]::before {
|
|
left: auto !important;
|
|
right: 8px !important;
|
|
transform: translateX(0) translateY(-6px) !important;
|
|
}
|
|
.anomalous-card-action-btn[data-tooltip-pos="bottom"]:hover::after,
|
|
.anomalous-card-action-btn[data-tooltip-pos="bottom"]:hover::before {
|
|
transform: translateX(0) translateY(0) !important;
|
|
}
|
|
|
|
/* 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 var(--amb-bg-tooltip);
|
|
}
|
|
|
|
[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: var(--amb-bg-tooltip) 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-header {
|
|
height: 48px !important;
|
|
background: var(--amb-lt-panel, 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 var(--amb-border) !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(var(--amb-ink-rgb), 0.04) !important;
|
|
color: var(--amb-lt-muted, #c0c4cc) !important;
|
|
border: 1px solid var(--amb-border) !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(var(--amb-ink-rgb), 0.09) !important;
|
|
border-color: var(--amb-border-strong) !important;
|
|
color: var(--amb-text-main) !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
#anomalous-header button.active {
|
|
background: rgba(var(--amb-ink-rgb), 0.14) !important;
|
|
border-color: var(--amb-border-strong) !important;
|
|
color: var(--amb-text-main) !important;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !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(var(--amb-ink-rgb), 0.04) !important;
|
|
border: 1px solid var(--amb-border) !important;
|
|
}
|
|
|
|
#anomalous-dock-btn:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.09) !important;
|
|
border-color: var(--amb-border-strong) !important;
|
|
color: var(--amb-text-main) !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: var(--amb-bg-page);
|
|
position: relative;
|
|
}
|
|
|
|
.anomalous-recipe-modal-close {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 14px;
|
|
z-index: 100;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--amb-lt-danger, #ff4444);
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
transition: all 0.18s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.anomalous-recipe-modal-close:hover {
|
|
background: rgba(239, 68, 68, 0.16);
|
|
color: #ff6666;
|
|
transform: scale(1.08);
|
|
}
|