From bd4abead45a3da5ea3ee5f4d818ea84a6b228ccc Mon Sep 17 00:00:00 2001 From: DemonGatanjieu <1027066412@qq.com> Date: Fri, 11 Sep 2026 01:01:43 +0800 Subject: [PATCH] style(ui): eliminate cool-blue cast and switch to neutral dark charcoal obsidian palette --- ARCHITECTURE.md | 7 +- web/modules/locales.js | 4 +- web/modules/ui_detail.js | 61 +++++------ web/modules/ui_doctor.js | 28 ++--- web/modules/ui_sidebar.js | 56 +++++----- web/styles.css | 210 ++++++++++++++++++-------------------- 6 files changed, 179 insertions(+), 187 deletions(-) diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 9ede7d0..7e10cf1 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -88,12 +88,15 @@ DOM or live LiteGraph state. (5) Settings Hub (`#anomalous-global-settings-btn`): Precision 8-tooth mechanical engineering gear with elevated popover (`#anomalous-settings-hub-modal`) mounted directly to container with `z-index: 999999` and dynamic responsive offset; hosts a clean 3-way Display Mode segmented controller (`#anomalous-view-mode-container` for Standard, Compact, and Aesthetic modes), UI scale controls, dynamic background atmosphere controls, folder manager, and language toggles; (6) Models & Floating Trigger: 4D Anomalous Hypercube Core SVG; adhering to a "low-stimulus idle, subtle-illumination on hover" philosophy where icons use calm `currentColor` in idle state and gently illuminate on interaction; - critical tool workbenches (`#anomalous-doctor-panel`, `#anomalous-assistant-panel`) strictly enforce 100% opaque, solid backgrounds (`background: var(--amb-bg-page, #0b0d13) !important`) to eliminate background distraction during diagnostics; + critical tool workbenches (`#anomalous-doctor-panel`, `#anomalous-assistant-panel`) strictly enforce 100% opaque, solid backgrounds (`background: var(--amb-bg-page, #131315) !important`) to eliminate background distraction during diagnostics; + the UI palette strictly adheres to a true neutral dark charcoal / obsidian studio aesthetic (`#131315`, `#1a1a1d`, `#202024`, `#28282d`) with zero cool-blue/navy cast, matching ComfyUI, Blender, and DaVinci Resolve workstation standards; + the sidebar action bar's circular astrological runic compass watermark (`#anomalous-sidebar-actions::before`) is completely disabled (`display: none !important`), and any backdrop textures are desaturated with `grayscale(100%)` to prevent blue color bleeding; + all primary action highlights, scan wizard controls, and switches use titanium white (`#e5e7eb` / `#ffffff`) with warm studio amber (`#f59e0b`) accents instead of cold blue/cyan; the modal adopts a disciplined "workshop / archive" aesthetic: removing exaggerated `clip-path` chamfers in favor of clean 8px architectural engineering geometry (`border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1)`); supports 3 unified Display Modes sharing identical DOM structure and UX logic: - Standard Mode (标准模式, default): Balanced 200px cards, 340px height, pure solid obsidian canvas with zero wallpaper distraction; - Compact Mode (高密度模式, power users): 140px min-width, 220px card height, 10px gaps, optimized for high-density scanning; - - Aesthetic Mode (沉浸模式): Subtle 12% ambient archive watermark with frosted glass borders; + - Aesthetic Mode (沉浸模式): Subtle 8% grayscale ambient archive watermark with frosted glass borders; cards feature unified 8px geometry (`border-radius: 8px`), restrained elevation (`translateY(-2px)`, `scale(1.02)`), spatial depth shadows (`0 4px 14px rgba(0,0,0,0.35)`), seamless docking fallbacks, and a micro-floating capsule tooltip system (`.anomalous-tooltip-target`) providing unambiguous, bilingual action semantics across all vector tools. diff --git a/web/modules/locales.js b/web/modules/locales.js index 2eaa316..ae58acf 100644 --- a/web/modules/locales.js +++ b/web/modules/locales.js @@ -661,7 +661,7 @@ export const i18n = { sidebarOfflineDesc: '不消耗任何网络。仅通过本地张量计算极速提取模型内的基础元数据，速度极快但信息较基础。', sidebarStep2: 'Step 2. 规范命名', sidebarNormalize: '自动规范命名', - sidebarNormalizeDesc: '强迫症福音。自动将杂乱无章的模型文件名重命名为 模型名_版本名.safetensors 的标准格式。
例如： model_final(1).safetensors ➔ Beautiful_Mix_V1.0.safetensors', + sidebarNormalizeDesc: '强迫症福音。自动将杂乱无章的模型文件名重命名为 模型名_版本名.safetensors 的标准格式。
例如： model_final(1).safetensors ➔ Beautiful_Mix_V1.0.safetensors', sidebarVirtualRename: '虚拟重命名 (安全推荐)', sidebarVirtualRenameDesc: '仅将标准名称注入浏览器插件中，不修改硬盘上的真实文件名，随时可无损还原。', sidebarPhysicalRename: '物理重命名', @@ -1727,7 +1727,7 @@ export const i18n = { sidebarOfflineDesc: 'No network required. Extremely fast extraction of basic metadata via local tensor computation, but info is limited.', sidebarStep2: 'Step 2. Normalize Naming', sidebarNormalize: 'Auto-Normalize Naming', - sidebarNormalizeDesc: 'Automatically rename messy model files to the official standard format: ModelName_VersionName.safetensors.
e.g. model_final(1).safetensors ➔ Beautiful_Mix_V1.0.safetensors', + sidebarNormalizeDesc: 'Automatically rename messy model files to the official standard format: ModelName_VersionName.safetensors.
e.g. model_final(1).safetensors ➔ Beautiful_Mix_V1.0.safetensors', sidebarVirtualRename: 'Virtual Rename (Safe)', sidebarVirtualRenameDesc: 'Inject standard names into the browser only, without modifying actual files on disk. Safely reversible.', sidebarPhysicalRename: 'Physical Rename', diff --git a/web/modules/ui_detail.js b/web/modules/ui_detail.js index 083d2ff..9e3fb37 100644 --- a/web/modules/ui_detail.js +++ b/web/modules/ui_detail.js @@ -149,12 +149,12 @@ export function showDetail(model) { if (isFromDoctor) { backBtn.textContent = t('detailBackDoctor'); - backBtn.style.background = '#8AB4F8'; - backBtn.style.color = '#000'; + backBtn.style.background = '#e5e7eb'; + backBtn.style.color = '#111827'; } else if (isFromAssistant) { backBtn.textContent = t('detailBackAssistant'); - backBtn.style.background = '#8AB4F8'; - backBtn.style.color = '#000'; + backBtn.style.background = '#e5e7eb'; + backBtn.style.color = '#111827'; } else { backBtn.innerHTML = this.historyStack.length > 0 ? t('backToPrev') : t('back'); backBtn.style.background = '#444'; @@ -425,7 +425,8 @@ export function showDetail(model) { cBtn.innerHTML = '🌐 Civitai'; cBtn.style.marginLeft = 'auto'; cBtn.style.padding = '4px 8px'; - cBtn.style.background = '#1a73e8'; + cBtn.style.background = 'rgba(255, 255, 255, 0.1)'; + cBtn.style.border = '1px solid rgba(255, 255, 255, 0.15)'; cBtn.style.color = '#fff'; cBtn.style.textDecoration = 'none'; cBtn.style.borderRadius = '4px'; @@ -538,7 +539,7 @@ export function showDetail(model) { galleryBtn.style.background = '#2a2b2f'; galleryBtn.style.border = '1px solid #3c4043'; galleryBtn.textContent = t('detailGeneratedGallery'); - galleryBtn.onmouseover = () => { galleryBtn.style.background = '#3c4043'; galleryBtn.style.borderColor = '#8ab4f8'; }; + galleryBtn.onmouseover = () => { galleryBtn.style.background = '#3c4043'; galleryBtn.style.borderColor = 'rgba(255, 255, 255, 0.3)'; }; galleryBtn.onmouseout = () => { galleryBtn.style.background = '#2a2b2f'; galleryBtn.style.borderColor = '#3c4043'; }; galleryBtn.onclick = () => { @@ -861,7 +862,7 @@ export function showEditModal(model) { galleryBtn.innerHTML = `${t('detailPickGallery')}`; galleryBtn.style.padding = '8px'; galleryBtn.style.background = '#303134'; - galleryBtn.style.color = '#8ab4f8'; + galleryBtn.style.color = '#e5e7eb'; galleryBtn.style.border = '1px solid #5f6368'; galleryBtn.style.borderRadius = '6px'; galleryBtn.style.cursor = 'pointer'; @@ -878,7 +879,7 @@ export function showEditModal(model) { localBtn.innerHTML = `${t('detailUploadLocal')}`; localBtn.style.padding = '8px'; localBtn.style.background = '#303134'; - localBtn.style.color = '#8ab4f8'; + localBtn.style.color = '#e5e7eb'; localBtn.style.border = '1px solid #5f6368'; localBtn.style.borderRadius = '6px'; localBtn.style.cursor = 'pointer'; @@ -966,7 +967,7 @@ export function showEditModal(model) { nameInput.placeholder = t('detailCustomNamePlaceholder'); nameInput.value = (model.metadata && model.metadata.custom_name) ? model.metadata.custom_name : ''; nameInput.style.cssText = inputStyle; - nameInput.onfocus = () => nameInput.style.borderColor = '#8ab4f8'; + nameInput.onfocus = () => nameInput.style.borderColor = 'rgba(255, 255, 255, 0.4)'; nameInput.onblur = () => nameInput.style.borderColor = '#5f6368'; const notesInput = document.createElement('textarea'); @@ -1099,7 +1100,7 @@ export function showEditModal(model) { cancelBtn.textContent = t('detailCancel'); cancelBtn.style.padding = '8px 16px'; cancelBtn.style.background = 'transparent'; - cancelBtn.style.color = '#8ab4f8'; + cancelBtn.style.color = '#9ca3af'; cancelBtn.style.border = 'none'; cancelBtn.style.borderRadius = '4px'; cancelBtn.style.cursor = 'pointer'; @@ -1112,8 +1113,8 @@ export function showEditModal(model) { const saveBtn = document.createElement('button'); saveBtn.textContent = t('detailSaveChanges'); saveBtn.style.padding = '8px 24px'; - saveBtn.style.background = '#8ab4f8'; - saveBtn.style.color = '#202124'; + saveBtn.style.background = '#e5e7eb'; + saveBtn.style.color = '#111827'; saveBtn.style.border = 'none'; saveBtn.style.borderRadius = '4px'; saveBtn.style.cursor = 'pointer'; @@ -1299,9 +1300,9 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) { const b = document.createElement('button'); b.innerText = text; b.style.padding = '6px 16px'; - b.style.background = primary ? 'rgba(138,180,248,0.15)' : 'rgba(255,255,255,0.04)'; - b.style.color = primary ? '#8ab4f8' : '#e8eaed'; - b.style.border = primary ? '1px solid rgba(138,180,248,0.2)' : '1px solid #5f6368'; + b.style.background = primary ? 'rgba(255, 255, 255, 0.12)' : 'rgba(255,255,255,0.04)'; + b.style.color = primary ? '#ffffff' : '#e8eaed'; + b.style.border = primary ? '1px solid rgba(255, 255, 255, 0.25)' : '1px solid #5f6368'; b.style.borderRadius = '4px'; b.style.cursor = 'pointer'; b.style.fontSize = '14px'; @@ -1331,7 +1332,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) { if (total > 0) { const countLabel = document.createElement('span'); countLabel.textContent = total; - countLabel.style.color = '#8ab4f8'; + countLabel.style.color = '#e5e7eb'; countLabel.style.fontSize = '16px'; countLabel.style.fontWeight = '500'; summaryText.replaceChildren( @@ -1382,16 +1383,16 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) { if (isChecked) { - card.style.border = '2px solid #8ab4f8'; + card.style.border = '2px solid #ffffff'; - card.style.background = 'rgba(138,180,248,0.2)'; + card.style.background = 'rgba(255, 255, 255, 0.1)'; - cbWrapper.style.background = '#8ab4f8'; + cbWrapper.style.background = '#ffffff'; - cbWrapper.style.border = '2px solid #8ab4f8'; + cbWrapper.style.border = '2px solid #ffffff'; cbWrapper.querySelector('span').style.color = '#202124'; @@ -1508,29 +1509,29 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) { cancelBtn.textContent = t('detailCancel'); cancelBtn.style.padding = '8px 24px'; cancelBtn.style.background = 'transparent'; - cancelBtn.style.color = '#8ab4f8'; + cancelBtn.style.color = '#9ca3af'; cancelBtn.style.border = 'none'; cancelBtn.style.borderRadius = '4px'; cancelBtn.style.cursor = 'pointer'; cancelBtn.style.fontWeight = '500'; cancelBtn.style.fontSize = '14px'; - cancelBtn.onmouseover = () => cancelBtn.style.background = 'rgba(138,180,248,0.1)'; + cancelBtn.onmouseover = () => cancelBtn.style.background = 'rgba(255, 255, 255, 0.08)'; cancelBtn.onmouseout = () => cancelBtn.style.background = 'transparent'; cancelBtn.onclick = () => document.body.removeChild(modal); const confirmBtn = document.createElement('button'); confirmBtn.textContent = t('detailConfirm'); confirmBtn.style.padding = '8px 24px'; - confirmBtn.style.background = '#8ab4f8'; - confirmBtn.style.color = '#202124'; // dark text on bright accent button + confirmBtn.style.background = '#e5e7eb'; + confirmBtn.style.color = '#111827'; // dark text on bright accent button confirmBtn.style.border = 'none'; confirmBtn.style.borderRadius = '4px'; confirmBtn.style.cursor = 'pointer'; confirmBtn.style.fontWeight = '600'; confirmBtn.style.fontSize = '14px'; confirmBtn.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)'; - confirmBtn.onmouseover = () => { confirmBtn.style.background = '#aecbfa'; confirmBtn.style.boxShadow = '0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15)'; }; - confirmBtn.onmouseout = () => { confirmBtn.style.background = '#8ab4f8'; confirmBtn.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)'; }; + confirmBtn.onmouseover = () => { confirmBtn.style.background = '#ffffff'; confirmBtn.style.boxShadow = '0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15)'; }; + confirmBtn.onmouseout = () => { confirmBtn.style.background = '#e5e7eb'; confirmBtn.style.boxShadow = '0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15)'; }; confirmBtn.onclick = () => { onConfirm(localSelection); document.body.removeChild(modal); @@ -1825,8 +1826,8 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) { d.style.color = '#9aa0a6'; d.style.fontWeight = '400'; }); - fBtn.style.background = 'rgba(138,180,248,0.15)'; - fBtn.style.color = '#8ab4f8'; + fBtn.style.background = 'rgba(255, 255, 255, 0.1)'; + fBtn.style.color = '#ffffff'; fBtn.style.fontWeight = '500'; currentFolderKey = folderKey; @@ -1886,8 +1887,8 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) { const badge = document.createElement('div'); badge.className = 'selection-badge'; - badge.style.background = '#8ab4f8'; - badge.style.color = '#202124'; + badge.style.background = '#e5e7eb'; + badge.style.color = '#111827'; badge.style.fontSize = '11px'; badge.style.fontWeight = '500'; badge.style.padding = '1px 6px'; diff --git a/web/modules/ui_doctor.js b/web/modules/ui_doctor.js index c172590..2be0bf3 100644 --- a/web/modules/ui_doctor.js +++ b/web/modules/ui_doctor.js @@ -102,10 +102,10 @@ export function initDoctorPanel() { const refreshBtn = document.createElement('button'); refreshBtn.textContent = t('doctorRefresh'); - refreshBtn.style.cssText = 'background:rgba(138,180,248,0.1);border:1px solid rgba(138,180,248,0.3);color:#8AB4F8;font-size:12px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all 0.2s; font-weight:600;'; + refreshBtn.style.cssText = 'background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);color:#e5e7eb;font-size:12px;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all 0.2s; font-weight:600;'; refreshBtn.title = t('doctorRefreshTitle'); - refreshBtn.onmouseover = () => { refreshBtn.style.background = 'rgba(138,180,248,0.2)'; }; - refreshBtn.onmouseout = () => { refreshBtn.style.background = 'rgba(138,180,248,0.1)'; }; + refreshBtn.onmouseover = () => { refreshBtn.style.background = 'rgba(255,255,255,0.12)'; }; + refreshBtn.onmouseout = () => { refreshBtn.style.background = 'rgba(255,255,255,0.06)'; }; refreshBtn.onclick = async () => { refreshBtn.disabled = true; refreshBtn.style.opacity = '0.5'; @@ -268,8 +268,8 @@ for (const w of node.widgets) { nodeContent.innerHTML = ''; const titleBar = document.createElement('div'); - titleBar.style.cssText = 'margin:14px 16px 0;padding:16px;border:1px solid rgba(138,180,248,0.16);border-radius:14px;background:linear-gradient(135deg,rgba(48,58,86,0.72),rgba(20,22,31,0.92));display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:0 12px 30px rgba(0,0,0,0.18);'; - titleBar.innerHTML = `🤖${t('assistantSelectedNode')}`; + titleBar.style.cssText = 'margin:14px 16px 0;padding:16px;border:1px solid rgba(255,255,255,0.1);border-radius:12px;background:rgba(255,255,255,0.04);display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,0.25);'; + titleBar.innerHTML = `🤖${t('assistantSelectedNode')}`; titleBar.querySelector('.ast-title').textContent = node.title || node.type || 'Node'; titleBar.querySelector('.ast-type').textContent = node.type || ''; @@ -639,9 +639,9 @@ for (const data of missingNodesData) { if (!isHealthy) { const deepScanBtn = document.createElement('button'); deepScanBtn.textContent = t('doctorDeepHashScan'); - deepScanBtn.style.cssText = 'padding:8px 16px; background:#1a73e8; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600; font-size:12px; transition:background 0.2s;'; - deepScanBtn.onmouseover = () => deepScanBtn.style.background = '#1557b0'; - deepScanBtn.onmouseout = () => deepScanBtn.style.background = '#1a73e8'; + deepScanBtn.style.cssText = 'padding:8px 16px; background:#e5e7eb; color:#111827; border:none; border-radius:6px; cursor:pointer; font-weight:600; font-size:12px; transition:background 0.2s;'; + deepScanBtn.onmouseover = () => deepScanBtn.style.background = '#ffffff'; + deepScanBtn.onmouseout = () => deepScanBtn.style.background = '#e5e7eb'; deepScanBtn.onclick = async () => { deepScanBtn.textContent = t('doctorScanStarting'); deepScanBtn.disabled = true; @@ -817,7 +817,7 @@ function openHashDetailDialog(node, widget, val) { const metaSection = document.createElement('div'); metaSection.style.cssText = 'display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,0.03);padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);'; metaSection.innerHTML = ` -
#${escapeHtml(String(node.id))} · ${escapeHtml(node.title || node.type || 'Node')} · ${escapeHtml(widget?.name || '')}
+
#${escapeHtml(String(node.id))} · ${escapeHtml(node.title || node.type || 'Node')} · ${escapeHtml(widget?.name || '')}
${escapeHtml(val)}
`; modal.appendChild(metaSection); @@ -869,14 +869,14 @@ function openHashDetailDialog(node, widget, val) { return card; }; - modal.appendChild(renderHashCard(t('doctorWorkflowHash'), workflowHash, workflowSize, '#8ab4f8', true)); + modal.appendChild(renderHashCard(t('doctorWorkflowHash'), workflowHash, workflowSize, '#e5e7eb', true)); modal.appendChild(renderHashCard(t('doctorLocalHash'), localHash, localSize, '#81c995', false)); const footer = document.createElement('div'); footer.style.cssText = 'display:flex;justify-content:flex-end;margin-top:4px;'; const okBtn = document.createElement('button'); okBtn.textContent = 'OK'; - okBtn.style.cssText = 'padding:8px 24px;background:#1a73e8;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;'; + okBtn.style.cssText = 'padding:8px 24px;background:#e5e7eb;color:#111827;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;'; okBtn.onclick = () => overlay.remove(); footer.appendChild(okBtn); modal.appendChild(footer); @@ -1113,8 +1113,8 @@ export function _loadAssistantHistory(filename, container, model) { if (model) { const viewAllBtn = document.createElement('button'); viewAllBtn.textContent = t('assistantViewAll'); - viewAllBtn.style.cssText = 'background:transparent;border:1px solid rgba(138,180,248,0.3);color:#8AB4F8;font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all 0.2s;'; - viewAllBtn.onmouseover = () => { viewAllBtn.style.background = 'rgba(138,180,248,0.1)'; }; + viewAllBtn.style.cssText = 'background:transparent;border:1px solid rgba(255,255,255,0.2);color:#e5e7eb;font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all 0.2s;'; + viewAllBtn.onmouseover = () => { viewAllBtn.style.background = 'rgba(255,255,255,0.1)'; }; viewAllBtn.onmouseout = () => { viewAllBtn.style.background = 'transparent'; }; viewAllBtn.onclick = () => this.showGeneratedGallery(model); sectionHeader.appendChild(viewAllBtn); @@ -1643,7 +1643,7 @@ if (!isHealthy) { missingNodes++; const nodeTitle = document.createElement('div'); nodeTitle.textContent = `${t('doctorNodeLabel')}: ${node.title || node.type}`; - nodeTitle.style.color = '#8AB4F8'; + nodeTitle.style.color = '#e5e7eb'; nodeTitle.style.fontWeight = 'bold'; nodeTitle.style.marginTop = '10px'; content.appendChild(nodeTitle); diff --git a/web/modules/ui_sidebar.js b/web/modules/ui_sidebar.js index 979d87e..9f4f2c9 100644 --- a/web/modules/ui_sidebar.js +++ b/web/modules/ui_sidebar.js @@ -531,8 +531,8 @@ export function createDOM() { const createChoiceCard = (id, icon, titleKey, descKey, isSelected) => { const card = document.createElement('div'); card.style.flex = '1'; - card.style.background = isSelected ? 'rgba(138, 180, 248, 0.15)' : 'rgba(255, 255, 255, 0.05)'; - card.style.border = `2px solid ${isSelected ? '#8AB4F8' : 'transparent'}`; + card.style.background = isSelected ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.04)'; + card.style.border = `2px solid ${isSelected ? '#e5e7eb' : 'transparent'}`; card.style.borderRadius = '8px'; card.style.padding = '16px'; card.style.cursor = 'pointer'; @@ -546,7 +546,7 @@ export function createDOM() { if (!isSelected) card.style.background = 'rgba(255, 255, 255, 0.08)'; }; card.onmouseout = () => { - if (!isSelected) card.style.background = 'rgba(255, 255, 255, 0.05)'; + if (!isSelected) card.style.background = 'rgba(255, 255, 255, 0.04)'; }; const topRow = document.createElement('div'); @@ -562,7 +562,7 @@ export function createDOM() { tTitle.textContent = t(titleKey); tTitle.style.fontWeight = '500'; tTitle.style.fontSize = '1.05em'; - tTitle.style.color = isSelected ? '#8AB4F8' : '#fff'; + tTitle.style.color = isSelected ? '#ffffff' : '#e5e7eb'; topRow.appendChild(iconDiv); topRow.appendChild(tTitle); @@ -570,7 +570,7 @@ export function createDOM() { const tDesc = document.createElement('div'); tDesc.textContent = t(descKey); tDesc.style.fontSize = '0.85em'; - tDesc.style.color = '#bbb'; + tDesc.style.color = '#9ca3af'; tDesc.style.lineHeight = '1.5'; card.appendChild(topRow); @@ -586,7 +586,7 @@ export function createDOM() { const sec0Title = document.createElement('div'); sec0Title.textContent = t('sidebarStep0'); sec0Title.style.fontWeight = '500'; - sec0Title.style.color = '#8AB4F8'; + sec0Title.style.color = '#e5e7eb'; sec0Title.style.marginBottom = '12px'; sec0Title.style.fontSize = '0.95em'; section0.appendChild(sec0Title); @@ -603,10 +603,10 @@ export function createDOM() { const openSelectorBtn = document.createElement('button'); openSelectorBtn.textContent = t('sidebarOpenSelector'); - openSelectorBtn.style.cssText = 'width:100%;padding:12px;background:#8AB4F8;color:#1E1E1E;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:1.05em;box-shadow:0 2px 4px rgba(0,0,0,0.2);'; + openSelectorBtn.style.cssText = 'width:100%;padding:12px;background:#e5e7eb;color:#111;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:1.05em;box-shadow:0 2px 4px rgba(0,0,0,0.2);'; const selectedCountSpan = document.createElement('div'); - selectedCountSpan.style.cssText = 'text-align:center;color:#8AB4F8;margin-top:8px;font-size:0.9em;'; + selectedCountSpan.style.cssText = 'text-align:center;color:#e5e7eb;margin-top:8px;font-size:0.9em;'; selectedCountSpan.textContent = t('sidebarSelectedZero'); const updateSelectedCount = () => { @@ -659,7 +659,7 @@ export function createDOM() { const sec1Title = document.createElement('div'); sec1Title.textContent = t('sidebarStep1'); sec1Title.style.fontWeight = '500'; - sec1Title.style.color = '#8AB4F8'; + sec1Title.style.color = '#e5e7eb'; sec1Title.style.marginBottom = '12px'; sec1Title.style.fontSize = '0.95em'; section1.appendChild(sec1Title); @@ -696,7 +696,7 @@ export function createDOM() { track.style.width = '36px'; track.style.height = '14px'; track.style.borderRadius = '7px'; - track.style.background = initialState ? 'rgba(138, 180, 248, 0.5)' : 'rgba(255,255,255,0.3)'; + track.style.background = initialState ? 'rgba(255, 255, 255, 0.45)' : 'rgba(255,255,255,0.15)'; track.style.position = 'relative'; track.style.cursor = 'pointer'; track.style.transition = 'background 0.3s'; @@ -707,7 +707,7 @@ export function createDOM() { thumb.style.width = '20px'; thumb.style.height = '20px'; thumb.style.borderRadius = '50%'; - thumb.style.background = initialState ? '#8AB4F8' : '#bdbdbd'; + thumb.style.background = initialState ? '#ffffff' : '#888888'; thumb.style.position = 'absolute'; thumb.style.left = initialState ? '16px' : '0px'; thumb.style.transition = 'left 0.3s, background 0.3s'; @@ -716,8 +716,8 @@ export function createDOM() { let state = initialState; track.onclick = () => { state = !state; - track.style.background = state ? 'rgba(138, 180, 248, 0.5)' : 'rgba(255,255,255,0.3)'; - thumb.style.background = state ? '#8AB4F8' : '#bdbdbd'; + track.style.background = state ? 'rgba(255, 255, 255, 0.45)' : 'rgba(255,255,255,0.15)'; + thumb.style.background = state ? '#ffffff' : '#888888'; thumb.style.left = state ? '16px' : '0px'; onChange(state); }; @@ -777,7 +777,7 @@ export function createDOM() { const sec2Title = document.createElement('div'); sec2Title.textContent = t('sidebarStep2'); sec2Title.style.fontWeight = '500'; - sec2Title.style.color = '#8AB4F8'; + sec2Title.style.color = '#e5e7eb'; sec2Title.style.marginBottom = '8px'; sec2Title.style.fontSize = '0.95em'; section2.appendChild(sec2Title); @@ -874,7 +874,7 @@ export function createDOM() { const sec3Title = document.createElement('div'); sec3Title.textContent = t('sidebarStep3'); sec3Title.style.fontWeight = '500'; - sec3Title.style.color = '#8AB4F8'; + sec3Title.style.color = '#e5e7eb'; sec3Title.style.marginBottom = '8px'; sec3Title.style.fontSize = '0.95em'; section3.appendChild(sec3Title); @@ -1089,7 +1089,7 @@ export function createDOM() { closeBtn.textContent = t('sidebarCancel'); closeBtn.style.padding = '8px 16px'; closeBtn.style.background = 'transparent'; - closeBtn.style.color = '#8AB4F8'; + closeBtn.style.color = '#9ca3af'; closeBtn.style.border = 'none'; closeBtn.style.borderRadius = '4px'; closeBtn.style.cursor = 'pointer'; @@ -1097,30 +1097,30 @@ export function createDOM() { closeBtn.style.fontWeight = '500'; closeBtn.style.textTransform = 'uppercase'; closeBtn.style.transition = 'background 0.2s'; - closeBtn.onmouseover = () => closeBtn.style.background = 'rgba(138, 180, 248, 0.08)'; + closeBtn.onmouseover = () => closeBtn.style.background = 'rgba(255, 255, 255, 0.08)'; closeBtn.onmouseout = () => closeBtn.style.background = 'transparent'; closeBtn.onclick = () => document.body.removeChild(wizard); const startBtn = document.createElement('button'); startBtn.textContent = t('sidebarExecute'); startBtn.style.padding = '8px 24px'; - startBtn.style.background = '#8AB4F8'; // Material Primary - startBtn.style.color = '#1E1E1E'; + startBtn.style.background = '#e5e7eb'; + startBtn.style.color = '#111827'; startBtn.style.border = 'none'; startBtn.style.borderRadius = '4px'; startBtn.style.cursor = 'pointer'; startBtn.style.fontSize = '0.95em'; - startBtn.style.fontWeight = '500'; + startBtn.style.fontWeight = '600'; startBtn.style.textTransform = 'uppercase'; startBtn.style.transition = 'background 0.2s, box-shadow 0.2s'; - startBtn.style.boxShadow = '0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)'; + startBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)'; startBtn.onmouseover = () => { - startBtn.style.background = '#aecbf9'; - startBtn.style.boxShadow = '0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)'; + startBtn.style.background = '#ffffff'; + startBtn.style.boxShadow = '0 3px 8px rgba(0,0,0,0.4)'; }; startBtn.onmouseout = () => { - startBtn.style.background = '#8AB4F8'; - startBtn.style.boxShadow = '0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)'; + startBtn.style.background = '#e5e7eb'; + startBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)'; }; startBtn.onclick = doScan; @@ -2588,7 +2588,7 @@ export async function openFolderManager() { }); row.addEventListener('dragenter', function(e) { - this.style.border = '1px dashed #8AB4F8'; + this.style.border = '1px dashed #e5e7eb'; }); row.addEventListener('dragleave', function(e) { @@ -2675,8 +2675,8 @@ export async function openFolderManager() { const saveBtn = document.createElement('button'); saveBtn.textContent = t('sidebarSaveReload'); saveBtn.style.padding = '8px 16px'; - saveBtn.style.background = '#8AB4F8'; - saveBtn.style.color = '#1e1e1e'; + saveBtn.style.background = '#e5e7eb'; + saveBtn.style.color = '#111827'; saveBtn.style.border = 'none'; saveBtn.style.borderRadius = '6px'; saveBtn.style.cursor = 'pointer'; diff --git a/web/styles.css b/web/styles.css index 691d2b3..d644f76 100644 --- a/web/styles.css +++ b/web/styles.css @@ -8,35 +8,36 @@ --c-cyan-glow: rgba(6, 182, 212, 0.25); --c-purple: #8b5cf6; --c-purple-glow: rgba(139, 92, 246, 0.25); - --c-silver: #94a3b8; - --c-silver-glow: rgba(148, 163, 184, 0.2); - --c-blue: #38bdf8; - --c-blue-glow: rgba(56, 189, 248, 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: #475569; - --c-wine-glow: rgba(71, 85, 105, 0.2); + --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 (Dark Neutral Obsidian Studio) */ - --amb-bg-page: #141519; - --amb-bg-panel: #1C1E24; - --amb-bg-card: #24262E; - --amb-bg-card-hover: #2d303a; - --amb-bg-input: #181a22; - --amb-text-main: #E7E8ED; - --amb-text-muted: #A7AAB5; - --amb-border: rgba(255, 255, 255, 0.09); - --amb-border-hover: rgba(255, 255, 255, 0.18); - --amb-btn-primary-bg: #D7D9E0; - --amb-btn-primary-hover: #E5E7EB; - --amb-btn-primary-text: #15171C; + /* 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(215, 217, 224, 0.4); + --amb-accent-line: rgba(229, 231, 235, 0.35); + --amb-accent: #f59e0b; --amb-radius-control: 6px; - --amb-radius-card: 10px; - --amb-radius-panel: 12px; + --amb-radius-card: 8px; + --amb-radius-panel: 10px; } /* Abyssal Scarlet Gothic Theme Overrides */ @@ -260,8 +261,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro #anomalous-container { width: 90%; height: 90%; - background-color: var(--amb-bg-page, #0b0d13); - border: 1px solid rgba(255, 255, 255, 0.1); + background-color: var(--amb-bg-page, #131315); + border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; display: flex; flex-direction: row; @@ -272,7 +273,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro top: 5%; container-type: inline-size; font-size: calc(16px * var(--anomalous-scale, 1)); - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7); } #anomalous-container::before { @@ -281,11 +282,12 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro position: absolute; inset: 0; background-image: - radial-gradient(ellipse 95% 85% at 50% 35%, rgba(11, 13, 19, 0.15) 0%, rgba(11, 13, 19, 0.65) 100%), + 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%; - opacity: var(--anomalous-bg-opacity, 0.12); + 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; @@ -454,14 +456,14 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro .anomalous-card { position: relative; - background: rgba(18, 20, 26, 0.95); + 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.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); + 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; @@ -469,8 +471,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro .anomalous-card:hover { transform: translateY(-2px); - border-color: rgba(255, 255, 255, 0.22); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); + 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 { @@ -575,16 +577,16 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro #anomalous-container.view-mode-aesthetic .anomalous-card { height: 360px; border-radius: 8px; - background: rgba(18, 20, 28, 0.78); + background: rgba(28, 28, 32, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.09); } #anomalous-container.view-mode-aesthetic .anomalous-card:hover { - background: rgba(22, 25, 36, 0.88); - border-color: rgba(255, 255, 255, 0.28); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); + 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 */ @@ -594,7 +596,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro left: 0; right: 0; padding: 26px 10px 8px; - background: linear-gradient(to top, rgba(14, 15, 20, 0.96) 0%, rgba(14, 15, 20, 0.72) 65%, transparent 100%); + 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; @@ -606,7 +608,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro } .anomalous-card:hover .anomalous-card-labels { - background: linear-gradient(to top, rgba(14, 15, 20, 0.98) 0%, rgba(14, 15, 20, 0.85) 75%, transparent 100%); + 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 { @@ -620,7 +622,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro .anomalous-card-title { font-size: 0.88rem; font-weight: 600; - color: #f8fafc; + color: #f3f4f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -629,7 +631,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro .anomalous-card-filename { font-size: 0.72rem; - color: #94a3b8; + color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -778,7 +780,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro .anomalous-scan-progress-fill { height: 100%; border-radius: inherit; - background: #8ab4f8; + background: #10b981; transition: width 180ms ease; } @@ -859,36 +861,36 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro flex-direction: row; } -/* Island UI: Floating Sidebar Navigation Console (Unified Frosted Glass Blend) */ +/* 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(12, 14, 20, 0.52); + 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: 12px; + 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.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); + 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, #0b0d13) !important; + 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.12) !important; - color: #e2e8f0 !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; @@ -897,20 +899,20 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro #anomalous-sidebar input[type="text"] { background: rgba(255, 255, 255, 0.05) !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; + border: 1px solid rgba(255, 255, 255, 0.09) !important; backdrop-filter: blur(8px) !important; - color: #fff !important; + color: #f3f4f6 !important; transition: all 0.2s ease !important; } #anomalous-sidebar input[type="text"]:focus { - border-color: rgba(255, 255, 255, 0.35) !important; - background: rgba(255, 255, 255, 0.09) !important; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.08) !important; + 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(12, 14, 20, 0.35) !important; + background: rgba(20, 20, 23, 0.6) !important; backdrop-filter: blur(12px) !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; } @@ -942,13 +944,13 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box; - background: rgba(20, 22, 30, 0.96); + background: rgba(24, 24, 28, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 12px; + 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.06); + 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); } @@ -1015,8 +1017,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; - border-left: 2px solid #94a3b8; - box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.05); + border-left: 2px solid #e5e7eb; + box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.03); border-radius: 0 6px 6px 0; } @@ -2452,9 +2454,9 @@ dialog.anomalous-gallery-viewer[open] { } .anomalous-recipe-cover-choice.selected { - border-color: #38bdf8; - color: #38bdf8; - box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35); + 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 { @@ -3199,10 +3201,10 @@ dialog.anomalous-gallery-viewer[open] { .anomalous-model-location-copy { justify-self: start; padding: 4px 9px; - border: 1px solid rgba(138, 180, 248, 0.3); + border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 5px; - background: rgba(138, 180, 248, 0.08); - color: #8ab4f8; + background: rgba(255, 255, 255, 0.06); + color: #e5e7eb; cursor: pointer; font-size: 0.75em; } @@ -5664,8 +5666,8 @@ dialog.anomalous-gallery-viewer[open] { } .anomalous-material-film-thumb.is-selected { - border-color: #38bdf8; - box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4); + border-color: #ffffff; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); } .theme-abyssal-scarlet .anomalous-material-film-thumb.is-selected { @@ -11348,9 +11350,9 @@ html.theme-abyssal-scarlet dialog.anomalous-gallery-viewer { } #anomalous-scan-btn.anomalous-radar-spinning { - color: #38bdf8 !important; - background: rgba(56, 189, 248, 0.12) !important; - border: 1px solid rgba(56, 189, 248, 0.35) !important; + 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 { @@ -11395,6 +11397,15 @@ button:hover .anomalous-btn-icon { filter: none; } +#anomalous-sidebar-actions { + display: flex; + align-items: center; + justify-content: space-around; + padding: 10px 8px; + gap: 4px; + box-sizing: border-box; +} + #anomalous-sidebar-actions button { display: inline-flex !important; align-items: center !important; @@ -11404,7 +11415,7 @@ button:hover .anomalous-btn-icon { border-radius: 6px !important; box-sizing: border-box !important; vertical-align: middle !important; - color: var(--amb-text-muted, #94a3b8) !important; + color: var(--amb-text-muted, #9ca3af) !important; background: transparent !important; border: 1px solid transparent !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; @@ -11424,7 +11435,7 @@ button:hover .anomalous-btn-icon { #anomalous-sidebar-actions button:hover svg { transform: scale(1.08); - color: var(--amb-accent, #38bdf8); + color: #ffffff !important; } /* Abyssal Scarlet Mode overrides for Task 8 icon buttons (Sharp Borders & Inner Shadow) */ @@ -11474,19 +11485,7 @@ button:hover .anomalous-btn-icon { } #anomalous-sidebar-actions::before { - content: ''; - position: absolute; - bottom: -15px; - right: -15px; - width: 90px; - height: 90px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='1.5'%3E%3Ccircle cx='50' cy='50' r='45' stroke-dasharray='4 3'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3Cline x1='50' y1='5' x2='50' y2='95'/%3E%3Cline x1='5' y1='50' x2='95' y2='50'/%3E%3Cpolygon points='50,20 80,50 50,80 20,50'/%3E%3C/svg%3E"); - background-size: contain; - background-repeat: no-repeat; - opacity: 0.04; - pointer-events: none; - z-index: 0; - transition: opacity 0.3s ease; + display: none !important; } .theme-abyssal-scarlet #anomalous-sidebar-actions::before { @@ -11718,10 +11717,10 @@ button:hover .anomalous-btn-icon { Easter Egg Mode: Gothic Vampire Abyssal Scarlet Expansion ========================================================================== */ -/* 1. Normal Mode Master Header (Unified Frosted Glass Blend) */ +/* 1. Normal Mode Master Header (Neutral Charcoal Frosted Glass) */ #anomalous-header { height: 60px; - background: rgba(12, 14, 20, 0.48) !important; + background: rgba(20, 20, 23, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; display: flex !important; @@ -11729,7 +11728,7 @@ button:hover .anomalous-btn-icon { justify-content: space-between !important; padding: 0 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; cursor: move; position: relative; z-index: 10; @@ -11768,24 +11767,24 @@ button:hover .anomalous-btn-icon { #anomalous-header button { margin-right: 0; padding: 8px 18px; - background: rgba(255, 255, 255, 0.06); - color: #e2e8f0; - border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.05); + color: #d1d5db; + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; - font-size: 0.98em; + font-size: 0.96em; font-weight: 500; backdrop-filter: blur(8px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } #anomalous-header button:hover { - background: rgba(255, 255, 255, 0.12) !important; - border-color: rgba(255, 255, 255, 0.25) !important; + background: rgba(255, 255, 255, 0.1) !important; + border-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: none !important; @@ -11799,13 +11798,13 @@ button:hover .anomalous-btn-icon { } #anomalous-header button.active { - background: rgba(255, 255, 255, 0.16) !important; - border-color: rgba(255, 255, 255, 0.35) !important; + background: rgba(255, 255, 255, 0.15) !important; + border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; - box-shadow: none !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } -/* 2. Normal Mode Gallery Container & Panels (Grand Anime Archive Watermark Texture) */ +/* 2. Normal Mode Gallery Container & Panels (Clean Neutral Dark Canvas) */ #anomalous-gallery-panel, .anomalous-gallery-container { background-color: transparent !important; @@ -11818,18 +11817,7 @@ button:hover .anomalous-btn-icon { .anomalous-gallery-container::before, #anomalous-gallery-panel::before { - display: block !important; - content: '' !important; - position: absolute !important; - inset: 0 !important; - background-image: - radial-gradient(ellipse 90% 80% at 50% 50%, rgba(11, 13, 19, 0.15) 0%, rgba(11, 13, 19, 0.55) 100%), - url('assets/archive_library_bg.webp') !important; - background-size: cover !important; - background-position: center 25% !important; - opacity: 0.65 !important; - pointer-events: none !important; - z-index: 0 !important; + display: none !important; } .anomalous-gallery-container > *,