nodes/DemonGatanjieu-Anomalous_Model_Browser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: one palette for every page, from the theme tokens

Browse Source 
Pages made at different times used their own greys (slate here, neutral
there) and accents (sky, violet, indigo), and most ignored the Abyssal
Scarlet theme. About 1,850 literal colours in web/styles and in CSS and
inline styles written from JS now use the --amb-* tokens by what they are
for: surfaces, text (new --amb-text-soft and --amb-text-dim), borders (new
--amb-border-strong), the primary button, and one accent (new --amb-link,
tinted with color-mix). Both themes define the new tokens.

Literal colours stay where the colour is the meaning: status, prompt
roles, voice emotions, canvas node colours, shadows and overlays; theme
override rules are untouched. The share-code dialogs move from inline
styles to .anomalous-share-* classes. Stylesheet versions are bumped.

Checked: text contrast on every rail page, Prompt Studio, Prompt Notes,
Model Sources, settings, model detail and editor, share codes, in both
themes; structure check and JS tests pass.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
DemonGatanjieu
2026-10-02 16:19:55 +08:00
co-authored by Claude Opus 5.5
parent 51b7113f5c
commit 054cb91b9b
45 changed files with 2073 additions and 2008 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -24,6 +24,7 @@
- **Current node (当前节点, formerly Node Assistant)**: the panel no longer splits into "actions" and "parameter sets" tabs; it is one page with the model actions on top and **Parameters** below. Parameters lists every saved set of values for this kind of node in one list — from the material library and from recipes' parameter sets, the same values saved twice shown once — and each entry says exactly what it would change on the selected node ("steps: 20 → 30"). **Apply these N** changes only those; seeds and model files stay (change the model above), and the receipt undoes it. **Save these values** keeps the node's current values in the material library, so the next node of that kind can use them.
- **Translation moved onto the node (翻译挪到节点上)**: Current node now lists the selected node's prompt boxes, each marked positive or negative by its wiring. A box written in Chinese has **Translate to English**, which writes the English back (the receipt undoes it); an English box has **Show in Chinese**, which shows the meaning underneath and writes nothing. The separate Prompt Translator window is gone; Prompt Studio keeps its own translate buttons.
- **No more toolbox (工具箱拆掉了)**: every tool now opens from the page it belongs to. Workflow share codes (import / export) are the ⇅ button at the top right of **Workflows** (where a disabled import button used to sit); **Prompt Studio** and **Prompt Notes** are at the top right of **Materials**; **Model Sources** is at the end of the type chips on **Models**, and Model Doctor has **Where to download** for the open workflow's models; translation is on the prompt boxes in **Current node**. The rail keeps scan, Model Doctor and Current node.
- **One look everywhere (配色统一)**: pages made at different times used their own greys (bluish slate here, neutral grey there) and their own accent (sky blue, violet, indigo). They now all take the Home page's colours: neutral surfaces, the same text greys and one accent for links and selection, and they follow the Abyssal Scarlet theme too (the Material Library, Prompt Studio, voices and several dialogs used to stay blue-grey in it). The workflow share-code dialogs lost their blue and orange buttons for the usual ones. Status colours and prompt-role colours are unchanged.
- **See it before you let go (拖的时候先看到结果)**: dragging a prompt over a prompt box shows, in that box and in the opposite box on the same sampler, the text releasing would put there; move away and they go back. Dragging saved values over a node of their kind lists what would change, such as "steps 12 → 28, cfg 4.5 → 5.5", or says nothing would change.
- **The scan page in plain words (扫描页说人话)**: it says what a scan does (the file's fingerprint is looked up on Civitai), and why a model was not found: not published on Civitai (voice, upscale and detection models mostly come from HuggingFace or GitHub), trained or merged by you, or changed after download; it works as usual, and you can add its download link. A model Civitai does not know that is no known image model says it may be a voice or upscale model. Model files in other formats (.pth, .ckpt, .bin…), which scans never read, are listed under **Other formats** with why, so they are no longer a mystery.
- **Undo what you dropped (拖错了可以撤回)**: anything Anomalous writes on the canvas (a material dropped on a node, a prompt put in a box, values applied in Current node, a model swapped or a LoRA inserted, a recipe or prompt note sent to the canvas) is now one step of ComfyUI's own **Ctrl+Z**; before, a drop was not, and Ctrl+Z could undo the step before it instead. After a drop, the message at the top right has **Undo** and stays while the pointer is on it. Dropping a prompt on empty canvas can be undone the same way. In **Activity**, canvas changes made since the page was opened have **Undo** while nothing has changed them since; entries that removed nodes or rewired existing ones only record.
docs/architecture/frontend.md
+11 -2
View File
@@ -303,13 +303,22 @@ guards the unique ordered list and byte-for-byte reconstructed bundle. Shared `-
tokens express surfaces, text, borders and control shapes; theme overrides must
be scoped to `.theme-abyssal-scarlet` rather than changing unrelated surfaces.
Colours come from the tokens in `00-foundation-models.css`, which both themes define:
surfaces (`--amb-bg-page`, `-panel`, `-card`, `-card-hover`, `-input`), text
(`--amb-text-main`, `-soft`, `-muted`, `-dim`), borders (`--amb-border`, `-strong`,
`-hover`), the primary button (`--amb-btn-primary-*`) and one accent, `--amb-link`, for
links, selection and focus; its tints are `color-mix(in srgb, var(--amb-link) N%,
transparent)`. CSS injected from JS and inline styles use the same tokens. Literal
colours stay only where the colour is the meaning: status (red, green, amber), prompt
roles, voice emotions, canvas node colours and translucent shadows or overlays.
Studio drawer rules keep the source deck at the screen edge and the assembly
track next to the canvas. Common geometry is shared between dock directions;
direction-specific rules set column order and separators. The removed embedded
composer's `#anomalous-container.anomalous-docked` overrides must not return.
Before adding an override or `!important`, locate and edit the owning rule.
Older component and theme overrides elsewhere in the ordered bundle still need a
separate, visually verified consolidation.
Older theme overrides in `08-theme-gallery-overrides.css` predate the tokens; many are
now redundant and can go as the rules they override are touched.
## Verification
web/main.js
+68 -144
View File
@@ -235,7 +235,7 @@ const AMB_WorkflowShare = {
const toast = document.createElement('div');
toast.textContent = message;
toast.style.cssText = `
position: fixed; bottom: 30px; right: 30px; background: #2a2a2b; color: ${color || '#fff'};
position: fixed; bottom: 30px; right: 30px; background: var(--amb-bg-card-hover); color: ${color || '#fff'};
padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
font-family: Arial, sans-serif; font-size: 14px; z-index: 9999999;
opacity: 0; transition: opacity 0.3s ease; border-left: 4px solid ${color || '#fff'};
@@ -248,141 +248,99 @@ const AMB_WorkflowShare = {
}, 3000);
},
showExportModal() {
/** A dimmed overlay with one dialog box; looks come from .anomalous-share-* in the styles. */
createShareDialog(id, titleText, variant = '') {
const overlay = document.createElement('div');
overlay.id = 'amb-export-modal';
overlay.style.cssText = `
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
z-index: 999999; display: flex; justify-content: center; align-items: center;
font-family: Arial, sans-serif;
`;
if (id) overlay.id = id;
overlay.className = 'anomalous-share-overlay';
const content = document.createElement('div');
content.style.cssText = `
background: #2a2a2b; color: #fff; padding: 30px; border-radius: 12px;
width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
display: flex; flex-direction: column; gap: 20px;
`;
content.className = `anomalous-share-dialog${variant ? ` ${variant}` : ''}`;
const title = document.createElement('h2');
title.style.margin = '0';
title.textContent = t('mainExportTitle');
title.className = 'anomalous-share-title';
title.textContent = titleText;
content.appendChild(title);
overlay.appendChild(content);
return { overlay, content };
},
shareButton(label, variant = '') {
const button = document.createElement('button');
button.type = 'button';
button.className = `anomalous-share-btn${variant ? ` ${variant}` : ''}`;
button.textContent = label;
return button;
},
showExportModal() {
const { overlay, content } = this.createShareDialog('amb-export-modal', t('mainExportTitle'));
const typeSelectContainer = document.createElement('div');
typeSelectContainer.className = 'anomalous-share-options';
typeSelectContainer.innerHTML = `
<label style="display: block; margin-bottom: 8px; cursor: pointer;">
<label>
<input type="radio" name="amb-share-type" value="skeleton" checked />
${t('mainSkeletonOption')}
</label>
<label style="display: block; cursor: pointer;">
<label>
<input type="radio" name="amb-share-type" value="full" />
${t('mainFullOption')}
</label>
`;
const textArea = document.createElement('textarea');
textArea.style.cssText = `
width: 100%; height: 150px; background: #1e1e1f; color: #eee;
border: 1px solid #444; border-radius: 6px; padding: 10px;
font-family: monospace; font-size: 12px; resize: none; box-sizing: border-box;
`;
textArea.className = 'anomalous-share-code';
textArea.readOnly = true;
const btnGroup = document.createElement('div');
btnGroup.style.cssText = `display: flex; gap: 10px; justify-content: flex-end;`;
const generateBtn = document.createElement('button');
generateBtn.textContent = t('mainGenerate');
generateBtn.style.cssText = `padding: 8px 16px; background: #4a90e2; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
const copyBtn = document.createElement('button');
copyBtn.textContent = t('mainCopyClipboard');
copyBtn.style.cssText = `padding: 8px 16px; background: #5cb85c; color: #fff; border: none; border-radius: 6px; cursor: pointer; display: none;`;
const closeBtn = document.createElement('button');
closeBtn.textContent = t('mainClose');
closeBtn.style.cssText = `padding: 8px 16px; background: #555; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
btnGroup.className = 'anomalous-share-actions';
const generateBtn = this.shareButton(t('mainGenerate'), 'is-primary');
const copyBtn = this.shareButton(t('mainCopyClipboard'));
copyBtn.hidden = true;
const closeBtn = this.shareButton(t('mainClose'), 'is-quiet');
closeBtn.onclick = () => overlay.remove();
generateBtn.onclick = async () => {
const isSkeleton = document.querySelector('input[name="amb-share-type"]:checked').value === 'skeleton';
// Get current workflow from app graph
const p = await app.graphToPrompt();
const workflowJson = p.workflow;
try {
const code = await AMB_WorkflowShare.encodeShareCode(workflowJson, isSkeleton);
textArea.value = code;
copyBtn.style.display = 'block';
copyBtn.hidden = false;
} catch (err) {
textArea.value = 'Error generating code: ' + err.message;
}
};
copyBtn.onclick = () => {
textArea.select();
document.execCommand('copy');
AMB_WorkflowShare.showToast(t('mainCopied'), '#5cb85c');
};
btnGroup.appendChild(generateBtn);
btnGroup.appendChild(copyBtn);
btnGroup.appendChild(closeBtn);
content.appendChild(title);
content.appendChild(typeSelectContainer);
content.appendChild(textArea);
content.appendChild(btnGroup);
overlay.appendChild(content);
btnGroup.append(generateBtn, copyBtn, closeBtn);
content.append(typeSelectContainer, textArea, btnGroup);
document.body.appendChild(overlay);
},
showImportModal() {
const overlay = document.createElement('div');
overlay.id = 'amb-import-modal';
overlay.style.cssText = `
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
z-index: 999999; display: flex; justify-content: center; align-items: center;
font-family: Arial, sans-serif;
`;
const content = document.createElement('div');
content.style.cssText = `
background: #2a2a2b; color: #fff; padding: 30px; border-radius: 12px;
width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
display: flex; flex-direction: column; gap: 20px;
`;
const title = document.createElement('h2');
title.style.margin = '0';
title.textContent = t('mainImportTitle');
const { overlay, content } = this.createShareDialog('amb-import-modal', t('mainImportTitle'), 'is-wide');
const inputArea = document.createElement('textarea');
inputArea.className = 'anomalous-share-code is-input';
inputArea.placeholder = t('mainSharePlaceholder');
inputArea.style.cssText = `
width: 100%; height: 100px; background: #1e1e1f; color: #eee;
border: 1px solid #444; border-radius: 6px; padding: 10px;
font-family: monospace; font-size: 12px; resize: none; box-sizing: border-box;
`;
const btnGroup = document.createElement('div');
btnGroup.style.cssText = `display: flex; gap: 10px; justify-content: flex-end;`;
const loadBtn = document.createElement('button');
loadBtn.textContent = t('mainImportLoad');
loadBtn.style.cssText = `padding: 8px 16px; background: #e07a5f; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
const closeBtn = document.createElement('button');
closeBtn.textContent = t('mainCancel');
closeBtn.style.cssText = `padding: 8px 16px; background: #555; color: #fff; border: none; border-radius: 6px; cursor: pointer;`;
btnGroup.className = 'anomalous-share-actions';
const loadBtn = this.shareButton(t('mainImportLoad'), 'is-primary');
const closeBtn = this.shareButton(t('mainCancel'), 'is-quiet');
closeBtn.onclick = () => overlay.remove();
loadBtn.onclick = async () => {
const code = inputArea.value.trim();
if (!code) {
@@ -393,10 +351,10 @@ const AMB_WorkflowShare = {
const pendingWorkflow = await AMB_WorkflowShare.decodeShareCode(code);
app.loadGraphData(pendingWorkflow);
overlay.remove();
const nodesCount = pendingWorkflow.nodes ? pendingWorkflow.nodes.length : 0;
AMB_WorkflowShare.showToast(t('mainImportedNodes', { count: nodesCount }), '#5cb85c');
// Auto close the main browser panel
const mainCloseBtn = document.getElementById('anomalous-close');
if (mainCloseBtn) mainCloseBtn.click();
@@ -404,58 +362,24 @@ const AMB_WorkflowShare = {
AMB_WorkflowShare.showToast(t('mainDecodeFailed') + err.message, '#ff6b6b');
}
};
btnGroup.appendChild(loadBtn);
btnGroup.appendChild(closeBtn);
content.appendChild(title);
content.appendChild(inputArea);
content.appendChild(btnGroup);
overlay.appendChild(content);
btnGroup.append(loadBtn, closeBtn);
content.append(inputArea, btnGroup);
document.body.appendChild(overlay);
},
showUnifiedModal() {
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
z-index: 999999; display: flex; justify-content: center; align-items: center;
font-family: Arial, sans-serif;
`;
const content = document.createElement('div');
content.style.cssText = `
background: #2a2a2b; color: #fff; padding: 30px; border-radius: 12px;
width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
display: flex; flex-direction: column; gap: 20px; text-align: center;
`;
const title = document.createElement('h2');
title.style.margin = '0';
title.textContent = t('mainUnifiedTitle');
const exportBtn = document.createElement('button');
exportBtn.textContent = t('mainExportWorkflow');
exportBtn.style.cssText = `padding: 12px; background: #4a90e2; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;`;
const { overlay, content } = this.createShareDialog('', t('mainUnifiedTitle'), 'is-menu');
const exportBtn = this.shareButton(t('mainExportWorkflow'), 'is-primary is-large');
exportBtn.onclick = () => { overlay.remove(); this.showExportModal(); };
const importBtn = document.createElement('button');
importBtn.textContent = t('mainImportWorkflow');
importBtn.style.cssText = `padding: 12px; background: #e07a5f; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px;`;
const importBtn = this.shareButton(t('mainImportWorkflow'), 'is-large');
importBtn.onclick = () => { overlay.remove(); this.showImportModal(); };
const closeBtn = document.createElement('button');
closeBtn.textContent = t('mainClose');
closeBtn.style.cssText = `padding: 8px; background: #555; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 10px;`;
const closeBtn = this.shareButton(t('mainClose'), 'is-quiet');
closeBtn.onclick = () => overlay.remove();
content.appendChild(title);
content.appendChild(exportBtn);
content.appendChild(importBtn);
content.appendChild(closeBtn);
overlay.appendChild(content);
content.append(exportBtn, importBtn, closeBtn);
document.body.appendChild(overlay);
}
};
web/modules/browser_entry.js
+1 -1
View File
@@ -252,7 +252,7 @@ export function createBrowserEntry({ translate, getCurrentLanguage }) {
async function setup() {
removeLegacyTriggerPosition();
const cssUrl = '/extensions/Anomalous_Model_Browser/styles.css?v=20260926-canvas-perf-1';
const cssUrl = '/extensions/Anomalous_Model_Browser/styles.css?v=20261002-theme-1';
if (!document.querySelector('link[href^="/extensions/Anomalous_Model_Browser/styles.css"]')) {
const link = document.createElement('link');
link.rel = 'stylesheet';
web/modules/ui_detail.js
+22 -22
View File
@@ -73,8 +73,8 @@ export function showDetail(model) {
const header = document.createElement('div');
header.style.width = '100%';
header.style.padding = '8px 15px';
header.style.background = 'var(--comfy-menu-bg, #333)';
header.style.borderBottom = '1px solid var(--border-color, #444)';
header.style.background = 'var(--comfy-menu-bg, var(--amb-bg-card-hover))';
header.style.borderBottom = '1px solid var(--border-color, var(--amb-border-strong))';
header.style.display = 'flex';
header.style.alignItems = 'center';
header.style.boxSizing = 'border-box';
@@ -101,7 +101,7 @@ export function showDetail(model) {
backBtn.style.color = '#111827';
} else {
backBtn.innerHTML = this.historyStack.length > 0 ? t('backToPrev') : t('back');
backBtn.style.background = '#444';
backBtn.style.background = 'var(--amb-bg-card-hover)';
backBtn.style.color = '#fff';
}
backBtn.style.padding = '6px 12px';
@@ -210,7 +210,7 @@ export function showDetail(model) {
jumpBtn.innerHTML = '⬇️';
jumpBtn.title = t('detailJumpToBottom');
jumpBtn.style.padding = '6px 12px';
jumpBtn.style.background = '#444';
jumpBtn.style.background = 'var(--amb-bg-card-hover)';
jumpBtn.style.color = '#fff';
jumpBtn.style.border = 'none';
jumpBtn.style.borderRadius = '4px';
@@ -277,7 +277,7 @@ export function showDetail(model) {
leftPanel.appendChild(img);
}
} else {
leftPanel.innerHTML = `<div style="color:#aaa; text-align:center; margin-top:50px;">${t('noPreview')}</div>`;
leftPanel.innerHTML = `<div style="color:var(--amb-text-muted); text-align:center; margin-top:50px;">${t('noPreview')}</div>`;
}
};
@@ -339,7 +339,7 @@ export function showDetail(model) {
topRow.style.gap = '10px';
topRow.style.paddingBottom = '10px';
topRow.style.marginBottom = '10px';
topRow.style.borderBottom = '1px solid #444';
topRow.style.borderBottom = '1px solid var(--amb-border-strong)';
const titleEl = document.createElement('h3');
titleEl.style.margin = '0';
@@ -363,7 +363,7 @@ export function showDetail(model) {
cBtn.style.marginLeft = 'auto';
cBtn.style.padding = '4px 8px';
cBtn.style.background = 'rgba(255, 255, 255, 0.1)';
cBtn.style.border = '1px solid rgba(255, 255, 255, 0.15)';
cBtn.style.border = '1px solid var(--amb-border-strong)';
cBtn.style.color = '#fff';
cBtn.style.textDecoration = 'none';
cBtn.style.borderRadius = '4px';
@@ -376,7 +376,7 @@ export function showDetail(model) {
editMetaBtn.textContent = t('detailEdit');
editMetaBtn.style.marginLeft = m.civitai_url ? '10px' : 'auto';
editMetaBtn.style.padding = '4px 8px';
editMetaBtn.style.background = '#444';
editMetaBtn.style.background = 'var(--amb-bg-card-hover)';
editMetaBtn.style.color = '#fff';
editMetaBtn.style.border = 'none';
editMetaBtn.style.borderRadius = '4px';
@@ -398,8 +398,8 @@ export function showDetail(model) {
notesCard.style.marginBottom = '15px';
notesCard.style.padding = '12px 16px';
// Dark yellowish/khaki paper background for dark mode notebook feel
notesCard.style.background = 'linear-gradient(135deg, #262522 0%, #202124 100%)';
notesCard.style.border = '1px solid #3c4043';
notesCard.style.background = 'linear-gradient(135deg, var(--amb-bg-card-hover) 0%, var(--amb-bg-card) 100%)';
notesCard.style.border = '1px solid var(--amb-border-strong)';
notesCard.style.borderLeft = '4px solid #a38d53';
notesCard.style.borderRadius = '4px 8px 8px 4px';
notesCard.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
@@ -473,11 +473,11 @@ export function showDetail(model) {
galleryBtn.style.alignItems = 'center';
galleryBtn.style.gap = '8px';
galleryBtn.style.padding = '10px';
galleryBtn.style.background = '#2a2b2f';
galleryBtn.style.border = '1px solid #3c4043';
galleryBtn.style.background = 'var(--amb-bg-card-hover)';
galleryBtn.style.border = '1px solid var(--amb-border-strong)';
galleryBtn.textContent = t('detailGeneratedGallery');
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.onmouseover = () => { galleryBtn.style.background = 'var(--amb-bg-card-hover)'; galleryBtn.style.borderColor = 'var(--amb-border-strong)'; };
galleryBtn.onmouseout = () => { galleryBtn.style.background = 'var(--amb-bg-card-hover)'; galleryBtn.style.borderColor = 'var(--amb-border-strong)'; };
galleryBtn.onclick = () => {
this.showGeneratedGallery(model);
@@ -504,7 +504,7 @@ export function showDetail(model) {
copyAll.innerText = t('copyAll');
copyAll.style.marginLeft = '10px';
copyAll.style.padding = '2px 6px';
copyAll.style.background = '#444';
copyAll.style.background = 'var(--amb-bg-card-hover)';
copyAll.style.color = '#fff';
copyAll.style.border = 'none';
copyAll.style.borderRadius = '3px';
@@ -529,17 +529,17 @@ export function showDetail(model) {
m.trainedWords.forEach(w => {
const tag = document.createElement('span');
tag.innerText = w;
tag.style.background = '#333';
tag.style.background = 'var(--amb-bg-card-hover)';
tag.style.padding = '2px 6px';
tag.style.borderRadius = '4px';
tag.style.fontSize = '0.85em';
tag.style.cursor = 'pointer';
tag.style.border = '1px solid #555';
tag.style.border = '1px solid var(--amb-border-strong)';
tag.title = t('clickToCopy') + w;
tag.onclick = () => {
navigator.clipboard.writeText(w).then(() => {
tag.style.background = '#28a745';
setTimeout(() => { tag.style.background = '#333'; }, 500);
setTimeout(() => { tag.style.background = 'var(--amb-bg-card-hover)'; }, 500);
});
};
tagsCont.appendChild(tag);
@@ -564,10 +564,10 @@ export function showDetail(model) {
const descText = document.createElement('div');
descText.style.flex = 'none';
descText.style.background = '#222';
descText.style.background = 'var(--amb-bg-card)';
descText.style.padding = '10px';
descText.style.borderRadius = '6px';
descText.style.border = '1px solid #333';
descText.style.border = '1px solid var(--amb-border-strong)';
descText.style.fontSize = '0.95em';
descText.style.lineHeight = '1.4';
setSafeRichHtml(descText, m.description);
@@ -610,7 +610,7 @@ export function showDetail(model) {
const compList = document.createElement('div');
compList.className = 'anomalous-compatible-list';
compList.innerHTML = `<span style="color:#888;">${t('loadingCompatible') || 'Loading...'}</span>`;
compList.innerHTML = `<span style="color:var(--amb-text-muted);">${t('loadingCompatible') || 'Loading...'}</span>`;
compSec.appendChild(compTitle);
compSec.appendChild(compList);
@@ -642,7 +642,7 @@ export function showDetail(model) {
if (isVid) thumb = `<video src="${m_comp.preview_url}" muted loop playsinline></video>`;
else thumb = `<img src="${m_comp.preview_url}" />`;
} else {
thumb = `<div style="width:30px; height:30px; background:#222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#555;">?</div>`;
thumb = `<div style="width:30px; height:30px; background:var(--amb-bg-card); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--amb-text-dim);">?</div>`;
}
mItem.innerHTML = `${thumb}<div class="anomalous-compatible-item-name">${escapeHtml(m_comp.filename)}</div>`;
web/modules/ui_dialog.js
+5 -5
View File
@@ -21,7 +21,7 @@ export function anomalousAlert(message, title = 'Anomalous') {
const dialog = document.createElement('div');
dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
dialog.style.border = '1px solid var(--amb-border-strong)';
dialog.style.borderRadius = '16px';
dialog.style.padding = '24px';
dialog.style.maxWidth = '400px';
@@ -88,7 +88,7 @@ export function anomalousConfirm(message, title = 'Anomalous', options = {}) {
const dialog = document.createElement('div');
dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
dialog.style.border = '1px solid var(--amb-border-strong)';
dialog.style.borderRadius = '16px';
dialog.style.padding = '24px';
dialog.style.maxWidth = '400px';
@@ -172,7 +172,7 @@ export function anomalousPrompt(message, defaultValue = '', title = 'Anomalous',
const dialog = document.createElement('div');
dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
dialog.style.border = '1px solid var(--amb-border-strong)';
dialog.style.borderRadius = '16px';
dialog.style.padding = '24px';
dialog.style.maxWidth = '420px';
@@ -202,7 +202,7 @@ export function anomalousPrompt(message, defaultValue = '', title = 'Anomalous',
input.style.width = '100%';
input.style.padding = '10px 14px';
input.style.borderRadius = '8px';
input.style.border = '1px solid rgba(255, 255, 255, 0.18)';
input.style.border = '1px solid var(--amb-border-strong)';
input.style.background = 'rgba(0, 0, 0, 0.35)';
input.style.color = '#fff';
input.style.fontSize = '14px';
@@ -210,7 +210,7 @@ export function anomalousPrompt(message, defaultValue = '', title = 'Anomalous',
input.style.outline = 'none';
if (options.multiline) input.style.resize = 'vertical';
input.onfocus = () => input.style.borderColor = '#1a73e8';
input.onblur = () => input.style.borderColor = 'rgba(255, 255, 255, 0.18)';
input.onblur = () => input.style.borderColor = 'var(--amb-border-strong)';
const footer = document.createElement('div');
footer.style.display = 'flex';
web/modules/ui_folder_manager.js
+7 -7
View File
@@ -23,7 +23,7 @@ export async function openFolderManager() {
modal.style.fontFamily = 'Roboto, "Segoe UI", sans-serif';
const content = document.createElement('div');
content.style.background = '#1e1e1e';
content.style.background = 'var(--amb-bg-card)';
content.style.borderRadius = '12px';
content.style.padding = '24px';
content.style.width = '500px';
@@ -54,10 +54,10 @@ export async function openFolderManager() {
toggleContainer.style.justifyContent = 'center';
toggleContainer.style.marginBottom = '15px';
toggleContainer.style.gap = '20px';
toggleContainer.style.background = '#222';
toggleContainer.style.background = 'var(--amb-bg-card)';
toggleContainer.style.padding = '10px';
toggleContainer.style.borderRadius = '8px';
toggleContainer.style.border = '1px solid #444';
toggleContainer.style.border = '1px solid var(--amb-border-strong)';
const abstractRadio = document.createElement('input');
abstractRadio.type = 'radio';
@@ -104,9 +104,9 @@ export async function openFolderManager() {
const listContainer = document.createElement('div');
listContainer.style.flex = '1';
listContainer.style.overflowY = 'auto';
listContainer.style.border = '1px solid #444';
listContainer.style.border = '1px solid var(--amb-border-strong)';
listContainer.style.borderRadius = '8px';
listContainer.style.background = '#2a2a2a';
listContainer.style.background = 'var(--amb-bg-card-hover)';
listContainer.style.padding = '8px';
content.appendChild(listContainer);
@@ -173,7 +173,7 @@ export async function openFolderManager() {
row.style.justifyContent = 'space-between';
row.style.padding = '10px 12px';
row.style.margin = '4px 0';
row.style.background = '#333';
row.style.background = 'var(--amb-bg-card-hover)';
row.style.borderRadius = '6px';
row.style.cursor = 'grab';
row.style.border = '1px solid transparent';
@@ -275,7 +275,7 @@ export async function openFolderManager() {
cancelBtn.style.padding = '8px 16px';
cancelBtn.style.background = 'transparent';
cancelBtn.style.color = '#ccc';
cancelBtn.style.border = '1px solid #555';
cancelBtn.style.border = '1px solid var(--amb-border-strong)';
cancelBtn.style.borderRadius = '6px';
cancelBtn.style.cursor = 'pointer';
cancelBtn.onclick = () => modal.remove();
web/modules/ui_gallery.js
+6 -6
View File
@@ -237,7 +237,7 @@ export async function loadGalleryImages(page = 1, reset = false, { refresh = res
const cancelBtn = document.createElement('button');
cancelBtn.textContent = t('galleryCancel');
cancelBtn.style.background = '#444';
cancelBtn.style.background = 'var(--amb-bg-card-hover)';
cancelBtn.style.color = '#fff';
cancelBtn.style.border = 'none';
cancelBtn.style.padding = '10px 16px';
@@ -245,7 +245,7 @@ export async function loadGalleryImages(page = 1, reset = false, { refresh = res
cancelBtn.style.cursor = 'pointer';
cancelBtn.style.transition = 'background 0.2s';
cancelBtn.onmouseover = () => cancelBtn.style.background = '#666';
cancelBtn.onmouseout = () => cancelBtn.style.background = '#444';
cancelBtn.onmouseout = () => cancelBtn.style.background = 'var(--amb-bg-card-hover)';
cancelBtn.onclick = (ce) => {
ce.stopPropagation();
@@ -360,7 +360,7 @@ export async function showGeneratedGallery(model) {
modalBox.id = 'anomalous-generated-gallery-modal';
modalBox.style.width = '95%';
modalBox.style.maxHeight = '95%';
modalBox.style.backgroundColor = 'var(--comfy-menu-bg, #222)';
modalBox.style.backgroundColor = 'var(--comfy-menu-bg, var(--amb-bg-card))';
modalBox.style.borderRadius = '12px';
modalBox.style.display = 'flex';
modalBox.style.flexDirection = 'column';
@@ -369,11 +369,11 @@ export async function showGeneratedGallery(model) {
const header = document.createElement('div');
header.style.padding = '15px 25px';
header.style.background = '#333';
header.style.background = 'var(--amb-bg-card-hover)';
header.style.display = 'flex';
header.style.justifyContent = 'space-between';
header.style.alignItems = 'center';
header.style.borderBottom = '1px solid #444';
header.style.borderBottom = '1px solid var(--amb-border-strong)';
const title = document.createElement('h2');
title.id = 'anomalous-generated-gallery-title';
@@ -491,7 +491,7 @@ export async function showGeneratedGallery(model) {
setCoverBtn.style.right = '5px';
setCoverBtn.style.background = 'rgba(40, 167, 69, 0.85)';
setCoverBtn.style.color = '#fff';
setCoverBtn.style.border = '1px solid rgba(255,255,255,0.3)';
setCoverBtn.style.border = '1px solid var(--amb-border-strong)';
setCoverBtn.style.borderRadius = '4px';
setCoverBtn.style.padding = '4px 8px';
setCoverBtn.style.cursor = 'pointer';
web/modules/ui_help.js
+7 -7
View File
@@ -24,8 +24,8 @@ export function showHelp() {
this.helpModal.style.justifyContent = 'center';
const box = document.createElement('div');
box.style.background = 'var(--bg-color, #222)';
box.style.border = '1px solid var(--border-color, #444)';
box.style.background = 'var(--bg-color, var(--amb-bg-card))';
box.style.border = '1px solid var(--border-color, var(--amb-border-strong))';
box.style.borderRadius = '8px';
box.style.width = '550px';
box.style.maxWidth = '90%';
@@ -36,8 +36,8 @@ export function showHelp() {
const header = document.createElement('div');
header.style.padding = '15px 20px';
header.style.borderBottom = '1px solid #444';
header.style.background = '#333';
header.style.borderBottom = '1px solid var(--amb-border-strong)';
header.style.background = 'var(--amb-bg-card-hover)';
header.style.display = 'flex';
header.style.alignItems = 'center';
header.style.justifyContent = 'space-between';
@@ -69,7 +69,7 @@ export function showHelp() {
const footer = document.createElement('div');
footer.style.padding = '15px';
footer.style.borderTop = '1px solid #444';
footer.style.borderTop = '1px solid var(--amb-border-strong)';
footer.style.display = 'flex';
footer.style.alignItems = 'center';
footer.style.justifyContent = 'space-between';
@@ -95,7 +95,7 @@ export function showHelp() {
replayGuideBtn.style.padding = '8px 12px';
replayGuideBtn.style.background = 'transparent';
replayGuideBtn.style.color = '#cbd5e1';
replayGuideBtn.style.border = '1px solid rgba(255,255,255,0.2)';
replayGuideBtn.style.border = '1px solid var(--amb-border-strong)';
replayGuideBtn.style.borderRadius = '4px';
replayGuideBtn.style.cursor = 'pointer';
replayGuideBtn.onclick = () => {
@@ -109,7 +109,7 @@ export function showHelp() {
const closeBtn = document.createElement('button');
closeBtn.innerHTML = t('closeHelp');
closeBtn.style.padding = '8px 16px';
closeBtn.style.background = '#444';
closeBtn.style.background = 'var(--amb-bg-card-hover)';
closeBtn.style.color = '#fff';
closeBtn.style.border = 'none';
closeBtn.style.borderRadius = '4px';
web/modules/ui_material_application.js
+6 -6
View File
@@ -247,7 +247,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
for (const block of blocks) {
const itemCard = document.createElement('div');
itemCard.className = 'anomalous-material-choice-card';
itemCard.style.cssText = 'background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:border-color 0.2s;';
itemCard.style.cssText = 'background:rgba(255,255,255,0.04);border:1px solid var(--amb-border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:border-color 0.2s;';
const headerRow = document.createElement('div');
headerRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:8px;';
@@ -259,8 +259,8 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
}[block.promptRole] || '';
const heading = document.createElement('div');
heading.style.cssText = 'font-weight:700;font-size:13px;color:#f3f4f6;display:flex;align-items:center;gap:6px;';
heading.innerHTML = `${roleBadge}<span>${escapeHtml(materialNodeHeading(block))} <small style="color:#9ca3af;font-size:11px;">#${block.node_id}</small></span>`;
heading.style.cssText = 'font-weight:700;font-size:13px;color:var(--amb-text-main);display:flex;align-items:center;gap:6px;';
heading.innerHTML = `${roleBadge}<span>${escapeHtml(materialNodeHeading(block))} <small style="color:var(--amb-text-muted);font-size:11px;">#${block.node_id}</small></span>`;
headerRow.appendChild(heading);
itemCard.appendChild(headerRow);
@@ -277,7 +277,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
if (textContent) {
const previewBox = document.createElement('div');
previewBox.className = 'anomalous-material-snippet-box';
previewBox.style.cssText = 'background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:8px 10px;font-size:11px;color:#d1d5db;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:80px;overflow:hidden;position:relative;transition:max-height 0.25s ease;';
previewBox.style.cssText = 'background:rgba(0,0,0,0.3);border:1px solid var(--amb-border);border-radius:6px;padding:8px 10px;font-size:11px;color:var(--amb-text-soft);line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:80px;overflow:hidden;position:relative;transition:max-height 0.25s ease;';
const textSpan = document.createElement('span');
textSpan.textContent = textContent;
@@ -287,7 +287,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
if (textContent.length > 80 || textContent.includes('\n')) {
const toggleBtn = document.createElement('button');
toggleBtn.type = 'button';
toggleBtn.style.cssText = 'background:none;border:none;color:#60a5fa;cursor:pointer;font-size:11px;padding:2px 0;align-self:flex-start;text-decoration:underline;';
toggleBtn.style.cssText = 'background:none;border:none;color:var(--amb-link);cursor:pointer;font-size:11px;padding:2px 0;align-self:flex-start;text-decoration:underline;';
toggleBtn.textContent = t('expandText') || '展开全部 ▾';
let expanded = false;
toggleBtn.onclick = (e) => {
@@ -307,7 +307,7 @@ function openMaterialChoiceDialog(owner, node, blocks, payload, droppedNode, gra
}
} else if (Array.isArray(block.widgets_values) && block.widgets_values.length > 0) {
const paramsSummary = document.createElement('div');
paramsSummary.style.cssText = 'font-size:11px;color:#9ca3af;background:rgba(0,0,0,0.2);padding:6px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
paramsSummary.style.cssText = 'font-size:11px;color:var(--amb-text-muted);background:rgba(0,0,0,0.2);padding:6px 8px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
paramsSummary.textContent = block.widgets_values.slice(0, 5).join(' · ');
itemCard.appendChild(paramsSummary);
}
web/modules/ui_materials.js
+9 -9
View File
@@ -161,7 +161,7 @@ function ensureMaterialGuideStyles() {
margin: 32px auto;
padding: 28px 24px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 16px;
text-align: center;
box-sizing: border-box;
@@ -174,8 +174,8 @@ function ensureMaterialGuideStyles() {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.25);
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);
display: flex;
align-items: center;
justify-content: center;
@@ -186,14 +186,14 @@ function ensureMaterialGuideStyles() {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
letter-spacing: 0.2px;
}
.anomalous-material-empty-subtitle {
margin: 0;
font-size: 12.5px;
line-height: 1.55;
color: #94a3b8;
color: var(--amb-text-muted);
max-width: 440px;
}
.anomalous-material-empty-steps {
@@ -206,7 +206,7 @@ function ensureMaterialGuideStyles() {
}
.anomalous-material-empty-step {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 14px 14px;
display: flex;
@@ -216,7 +216,7 @@ function ensureMaterialGuideStyles() {
}
.anomalous-material-empty-step:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
border-color: var(--amb-border-strong);
}
.anomalous-material-step-icon {
font-size: 20px;
@@ -225,14 +225,14 @@ function ensureMaterialGuideStyles() {
}
.anomalous-material-empty-step strong {
font-size: 13px;
color: #e2e8f0;
color: var(--amb-text-main);
font-weight: 600;
}
.anomalous-material-empty-step p {
margin: 0;
font-size: 11.5px;
line-height: 1.5;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-material-card {
cursor: grab !important;
web/modules/ui_model_editor.js
+14 -14
View File
@@ -22,12 +22,12 @@ export function showEditModal(model) {
modal.style.justifyContent = 'center';
const content = document.createElement('div');
content.style.background = '#202124';
content.style.background = 'var(--amb-bg-card)';
content.style.padding = '24px';
content.style.borderRadius = '12px';
content.style.width = '720px';
content.style.maxWidth = '90%';
content.style.border = '1px solid #3c4043';
content.style.border = '1px solid var(--amb-border-strong)';
content.style.boxShadow = '0 8px 32px rgba(0,0,0,0.5)';
content.style.display = 'flex';
content.style.flexDirection = 'row';
@@ -45,13 +45,13 @@ export function showEditModal(model) {
const previewContainer = document.createElement('div');
previewContainer.style.width = '100%';
previewContainer.style.height = '320px';
previewContainer.style.background = '#303134';
previewContainer.style.background = 'var(--amb-bg-card-hover)';
previewContainer.style.borderRadius = '8px';
previewContainer.style.display = 'flex';
previewContainer.style.alignItems = 'center';
previewContainer.style.justifyContent = 'center';
previewContainer.style.overflow = 'hidden';
previewContainer.style.border = '1px solid #3c4043';
previewContainer.style.border = '1px solid var(--amb-border-strong)';
previewContainer.style.position = 'relative';
if (model.preview_url) {
@@ -113,15 +113,15 @@ export function showEditModal(model) {
const galleryBtn = document.createElement('button');
galleryBtn.innerHTML = `<svg style="width:13px;height:13px;margin-right:6px;vertical-align:-2px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>${t('detailPickGallery')}`;
galleryBtn.style.padding = '8px';
galleryBtn.style.background = '#303134';
galleryBtn.style.background = 'var(--amb-bg-card-hover)';
galleryBtn.style.color = '#e5e7eb';
galleryBtn.style.border = '1px solid #5f6368';
galleryBtn.style.borderRadius = '6px';
galleryBtn.style.cursor = 'pointer';
galleryBtn.style.fontWeight = '500';
galleryBtn.style.fontSize = '0.9em';
galleryBtn.onmouseover = () => galleryBtn.style.background = '#3c4043';
galleryBtn.onmouseout = () => galleryBtn.style.background = '#303134';
galleryBtn.onmouseover = () => galleryBtn.style.background = 'var(--amb-bg-card-hover)';
galleryBtn.onmouseout = () => galleryBtn.style.background = 'var(--amb-bg-card-hover)';
galleryBtn.onclick = () => {
document.body.removeChild(modal);
this.showGallerySelectMode(model);
@@ -130,15 +130,15 @@ export function showEditModal(model) {
const localBtn = document.createElement('button');
localBtn.innerHTML = `<svg style="width:13px;height:13px;margin-right:6px;vertical-align:-2px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>${t('detailUploadLocal')}`;
localBtn.style.padding = '8px';
localBtn.style.background = '#303134';
localBtn.style.background = 'var(--amb-bg-card-hover)';
localBtn.style.color = '#e5e7eb';
localBtn.style.border = '1px solid #5f6368';
localBtn.style.borderRadius = '6px';
localBtn.style.cursor = 'pointer';
localBtn.style.fontWeight = '500';
localBtn.style.fontSize = '0.9em';
localBtn.onmouseover = () => localBtn.style.background = '#3c4043';
localBtn.onmouseout = () => localBtn.style.background = '#303134';
localBtn.onmouseover = () => localBtn.style.background = 'var(--amb-bg-card-hover)';
localBtn.onmouseout = () => localBtn.style.background = 'var(--amb-bg-card-hover)';
localBtn.onclick = () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
@@ -205,7 +205,7 @@ export function showEditModal(model) {
const inputStyle = `
width: 100%;
padding: 12px 14px;
background: #303134;
background: var(--amb-bg-card-hover);
color: #e8eaed;
border: 1px solid #5f6368;
border-radius: 6px;
@@ -230,10 +230,10 @@ export function showEditModal(model) {
notesInput.style.minHeight = '150px';
notesInput.style.resize = 'vertical';
// Notebook styling override
notesInput.style.background = 'linear-gradient(135deg, #262522 0%, #202124 100%)';
notesInput.style.background = 'linear-gradient(135deg, var(--amb-bg-card-hover) 0%, var(--amb-bg-card) 100%)';
notesInput.style.backgroundImage = 'repeating-linear-gradient(transparent, transparent 23px, rgba(163, 141, 83, 0.04) 23px, rgba(163, 141, 83, 0.04) 24px)';
notesInput.style.backgroundAttachment = 'local';
notesInput.style.border = '1px solid #3c4043';
notesInput.style.border = '1px solid var(--amb-border-strong)';
notesInput.style.borderLeft = '4px solid #a38d53';
notesInput.style.borderRadius = '4px 8px 8px 4px';
notesInput.style.color = '#d1c9b4';
@@ -247,7 +247,7 @@ export function showEditModal(model) {
};
notesInput.onblur = () => {
notesInput.style.boxShadow = 'none';
notesInput.style.borderColor = '#3c4043';
notesInput.style.borderColor = 'var(--amb-border-strong)';
};
const physicalRow = document.createElement('div');
web/modules/ui_model_selector.js
+16 -16
View File
@@ -37,7 +37,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
modal.style.fontFamily = 'Roboto, Inter, sans-serif';
const contentDiv = document.createElement('div');
contentDiv.style.background = '#202124';
contentDiv.style.background = 'var(--amb-bg-card)';
contentDiv.style.borderRadius = '8px';
contentDiv.style.width = '92vw';
contentDiv.style.height = '88vh';
@@ -49,7 +49,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
// Header
const header = document.createElement('div');
header.style.padding = '16px 24px';
header.style.borderBottom = '1px solid #3c4043';
header.style.borderBottom = '1px solid var(--amb-border-strong)';
header.style.display = 'flex';
header.style.justifyContent = 'space-between';
header.style.alignItems = 'center';
@@ -90,10 +90,10 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
// Left Panel
const leftPanel = document.createElement('div');
leftPanel.style.width = '280px';
leftPanel.style.borderRight = '1px solid #3c4043';
leftPanel.style.borderRight = '1px solid var(--amb-border-strong)';
leftPanel.style.display = 'flex';
leftPanel.style.flexDirection = 'column';
leftPanel.style.background = '#171717';
leftPanel.style.background = 'var(--amb-bg-panel)';
const leftTitle = document.createElement('div');
leftTitle.textContent = t('detailFolders');
@@ -115,12 +115,12 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
rightPanel.style.flex = '1';
rightPanel.style.display = 'flex';
rightPanel.style.flexDirection = 'column';
rightPanel.style.background = '#202124';
rightPanel.style.background = 'var(--amb-bg-card)';
// Toolbar
const toolbar = document.createElement('div');
toolbar.style.padding = '12px 24px';
toolbar.style.borderBottom = '1px solid #3c4043';
toolbar.style.borderBottom = '1px solid var(--amb-border-strong)';
toolbar.style.display = 'flex';
toolbar.style.gap = '12px';
toolbar.style.alignItems = 'center';
@@ -231,10 +231,10 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
} else {
card.style.border = '1px solid #3c4043';
card.style.border = '1px solid var(--amb-border-strong)';
card.style.background = '#303134';
card.style.background = 'var(--amb-bg-card-hover)';
cbWrapper.style.background = 'rgba(0,0,0,0.3)';
@@ -297,7 +297,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
toolbar.appendChild(createTBtn(t('detailSelectNoDesc'), () => handleBatchSelect('no_desc'), true));
const divi = document.createElement('div');
divi.style.width = '1px'; divi.style.height = '24px'; divi.style.background = '#3c4043'; divi.style.margin = '0 8px';
divi.style.width = '1px'; divi.style.height = '24px'; divi.style.background = 'var(--amb-bg-card-hover)'; divi.style.margin = '0 8px';
toolbar.appendChild(divi);
toolbar.appendChild(createTBtn(t('detailSelectAll'), () => handleBatchSelect('all')));
@@ -320,7 +320,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
grid.style.gridAutoRows = 'max-content';
grid.style.gap = '20px';
grid.style.alignContent = 'start';
grid.style.background = '#171717';
grid.style.background = 'var(--amb-bg-panel)';
rightPanel.appendChild(grid);
body.appendChild(leftPanel);
@@ -330,7 +330,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
// Footer (Confirm)
const footer = document.createElement('div');
footer.style.padding = '12px 24px';
footer.style.borderTop = '1px solid #3c4043';
footer.style.borderTop = '1px solid var(--amb-border-strong)';
footer.style.display = 'flex';
footer.style.justifyContent = 'flex-end';
footer.style.gap = '12px';
@@ -385,11 +385,11 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
card.dataset.mpathidx = m.path_idx;
card.dataset.msubfolder = m.subfolder;
card.style.background = '#303134';
card.style.background = 'var(--amb-bg-card-hover)';
card.style.borderRadius = '8px';
card.style.overflow = 'hidden';
card.style.position = 'relative';
card.style.border = '1px solid #3c4043';
card.style.border = '1px solid var(--amb-border-strong)';
card.style.display = 'flex';
card.style.flexDirection = 'column';
card.style.aspectRatio = '2 / 3';
@@ -399,7 +399,7 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
const imgContainer = document.createElement('div');
imgContainer.style.flex = '1';
imgContainer.style.background = '#202124';
imgContainer.style.background = 'var(--amb-bg-card)';
imgContainer.style.display = 'flex';
imgContainer.style.justifyContent = 'center';
imgContainer.style.alignItems = 'center';
@@ -478,13 +478,13 @@ export function _openAdvancedModelSelector(initialSelectedMap, onConfirm) {
const nameBar = document.createElement('div');
nameBar.style.padding = '12px';
nameBar.style.background = '#303134';
nameBar.style.background = 'var(--amb-bg-card-hover)';
nameBar.style.fontSize = '13px';
nameBar.style.color = '#e8eaed';
nameBar.style.whiteSpace = 'nowrap';
nameBar.style.overflow = 'hidden';
nameBar.style.textOverflow = 'ellipsis';
nameBar.style.borderTop = '1px solid #3c4043';
nameBar.style.borderTop = '1px solid var(--amb-border-strong)';
nameBar.innerText = m.filename;
card.appendChild(nameBar);
web/modules/ui_node_assistant.js
+15 -15
View File
@@ -41,7 +41,7 @@ if (!this._assistantPanelHooked) {
const placeholder = document.createElement('div');
placeholder.id = 'anomalous-assistant-placeholder';
placeholder.style.cssText = 'display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#666;font-size:15px;gap:12px;padding:40px;text-align:center;';
placeholder.style.cssText = 'display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--amb-text-dim);font-size:15px;gap:12px;padding:40px;text-align:center;';
placeholder.innerHTML = `<div style="font-size:48px;">🤖</div><div>${t('assistantSelectNode')}</div>`;
this.assistantPanel.appendChild(placeholder);
@@ -57,11 +57,11 @@ export function renderAssistantModelCard(node, w, container) {
const pickerType = inferPickerModelType(node, w);
const wrapper = document.createElement('div');
wrapper.style.cssText = 'margin:12px 16px 16px;padding:10px;border:1px solid rgba(255,255,255,0.075);border-radius:14px;background:linear-gradient(160deg,rgba(31,33,42,0.96),rgba(20,21,27,0.96));display:flex;flex-direction:column;gap:12px;box-shadow:0 16px 35px rgba(0,0,0,0.2);';
wrapper.style.cssText = 'margin:12px 16px 16px;padding:10px;border:1px solid var(--amb-border);border-radius:14px;background:linear-gradient(160deg,rgba(31,33,42,0.96),rgba(20,21,27,0.96));display:flex;flex-direction:column;gap:12px;box-shadow:0 16px 35px rgba(0,0,0,0.2);';
// Preview image
const previewBox = document.createElement('div');
previewBox.style.cssText = 'width:100%;aspect-ratio:1.65;max-height:260px;background:radial-gradient(circle at 50% 20%,#252a3b,#0b0c10 70%);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,0.05);';
previewBox.style.cssText = 'width:100%;aspect-ratio:1.65;max-height:260px;background:radial-gradient(circle at 50% 20%,#252a3b,var(--amb-bg-page) 70%);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--amb-border);';
previewBox.innerHTML = `<span style="color:#444;font-size:13px;">${t('doctorLoadingPreview')}</span>`;
wrapper.appendChild(previewBox);
@@ -80,7 +80,7 @@ export function renderAssistantModelCard(node, w, container) {
pathEl.innerText = val;
const modelTypeBadge = document.createElement('span');
modelTypeBadge.textContent = pickerType.label;
modelTypeBadge.style.cssText = 'padding:5px 8px;border-radius:999px;background:rgba(138,180,248,0.1);border:1px solid rgba(138,180,248,0.22);color:#a9c7ff;font-size:9px;font-weight:750;white-space:nowrap;';
modelTypeBadge.style.cssText = 'padding:5px 8px;border-radius:999px;background:color-mix(in srgb, var(--amb-link) 10%, transparent);border:1px solid color-mix(in srgb, var(--amb-link) 22%, transparent);color:var(--amb-link);font-size:9px;font-weight:750;white-space:nowrap;';
identityCopy.append(nameEl, pathEl);
identityRow.append(identityCopy, modelTypeBadge);
wrapper.appendChild(identityRow);
@@ -95,7 +95,7 @@ export function renderAssistantModelCard(node, w, container) {
actionRow.style.cssText = 'display:flex;gap:8px;flex-wrap:wrap;';
const profileBtn = document.createElement('button');
profileBtn.textContent = t('doctorProfile');
profileBtn.style.cssText = 'flex:1;padding:10px 12px;background:rgba(138,180,248,0.09);color:#a9c7ff;border:1px solid rgba(138,180,248,0.22);border-radius:9px;cursor:pointer;font-size:12px;font-weight:700;transition:filter 0.2s;';
profileBtn.style.cssText = 'flex:1;padding:10px 12px;background:color-mix(in srgb, var(--amb-link) 9%, transparent);color:var(--amb-link);border:1px solid color-mix(in srgb, var(--amb-link) 22%, transparent);border-radius:9px;cursor:pointer;font-size:12px;font-weight:700;transition:filter 0.2s;';
profileBtn.onmouseover = () => profileBtn.style.filter = 'brightness(1.2)';
profileBtn.onmouseout = () => profileBtn.style.filter = 'brightness(1)';
@@ -163,7 +163,7 @@ if (triggers && triggers.length > 0) {
const trigSection = document.createElement('div');
trigSection.style.cssText = 'background:rgba(255,255,255,0.04);border-radius:6px;padding:10px 12px;';
const trigTitle = document.createElement('div');
trigTitle.style.cssText = 'color:#aaa;font-size:11px;margin-bottom:8px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
trigTitle.style.cssText = 'color:var(--amb-text-muted);font-size:11px;margin-bottom:8px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
trigTitle.textContent = t('doctorTriggerWords');
const tagList = document.createElement('div');
tagList.style.cssText = 'display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;';
@@ -179,7 +179,7 @@ if (triggers && triggers.length > 0) {
tagList.appendChild(tag);
});
const copyAll = document.createElement('button');
copyAll.style.cssText = 'background:transparent;border:1px solid #444;color:#888;border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;margin-top:4px;';
copyAll.style.cssText = 'background:transparent;border:1px solid var(--amb-border-strong);color:var(--amb-text-muted);border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;margin-top:4px;';
copyAll.textContent = t('doctorCopyAll');
copyAll.onclick = () => {
navigator.clipboard.writeText(words.join(', ')).then(() => { copyAll.textContent = '✅'; setTimeout(() => copyAll.textContent = t('doctorCopyAll'), 1500); });
@@ -194,7 +194,7 @@ if (triggers && triggers.length > 0) {
const textNotes = meta.custom_notes || meta.notes;
if (textNotes) {
const notesCard = document.createElement('div');
notesCard.style.cssText = 'background:linear-gradient(135deg,#262522 0%,#202124 100%);border:1px solid #3c4043;border-left:4px solid #a38d53;border-radius:4px 8px 8px 4px;padding:12px 14px;';
notesCard.style.cssText = 'background:linear-gradient(135deg,var(--amb-bg-card-hover) 0%,var(--amb-bg-card) 100%);border:1px solid var(--amb-border-strong);border-left:4px solid #a38d53;border-radius:4px 8px 8px 4px;padding:12px 14px;';
const notesTitle = document.createElement('div');
notesTitle.style.cssText = 'color:#a38d53;font-size:11px;font-weight:bold;margin-bottom:6px;';
notesTitle.textContent = t('doctorNotes');
@@ -232,7 +232,7 @@ export function _loadAssistantHistory(filename, container, model) {
const sectionHeader = document.createElement('div');
sectionHeader.style.cssText = 'display:flex;align-items:center;justify-content:space-between;';
const sectionTitle = document.createElement('div');
sectionTitle.style.cssText = 'color:#aaa;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
sectionTitle.style.cssText = 'color:var(--amb-text-muted);font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:0.5px;';
sectionTitle.textContent = t('assistantHistoryTitle', { count: images.length });
sectionHeader.appendChild(sectionTitle);
@@ -240,7 +240,7 @@ 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(255,255,255,0.2);color:#e5e7eb;font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all 0.2s;';
viewAllBtn.style.cssText = 'background:transparent;border:1px solid var(--amb-border-strong);color:var(--amb-text-main);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);
@@ -252,7 +252,7 @@ if (model) {
grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;';
images.slice(0, 16).forEach(img => {
const card = document.createElement('div');
card.style.cssText = 'border-radius:6px;overflow:hidden;aspect-ratio:1;background:#111;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;';
card.style.cssText = 'border-radius:6px;overflow:hidden;aspect-ratio:1;background:var(--amb-bg-page);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;';
card.onmouseover = () => {
card.style.transform = 'scale(1.05)'; card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)';
const v = card.querySelector('video'); if (v) v.play().catch(()=>{});
@@ -378,8 +378,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(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 = `<span style="width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);">🤖</span><span style="display:flex;flex-direction:column;min-width:0;gap:3px;"><span style="font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:#9ca3af;">${t('assistantSelectedNode')}</span><span class="ast-title" style="font-weight:700;color:#f3f4f6;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span></span><span class="ast-type" style="font-size:10px;color:#d1d5db;margin-left:auto;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span>`;
titleBar.style.cssText = 'margin:14px 16px 0;padding:16px;border:1px solid var(--amb-border);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 = `<span style="width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(255,255,255,0.08);border:1px solid var(--amb-border-strong);">🤖</span><span style="display:flex;flex-direction:column;min-width:0;gap:3px;"><span style="font-size:10px;letter-spacing:0.11em;text-transform:uppercase;color:var(--amb-text-muted);">${t('assistantSelectedNode')}</span><span class="ast-title" style="font-weight:700;color:var(--amb-text-main);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span></span><span class="ast-type" style="font-size:10px;color:var(--amb-text-soft);margin-left:auto;padding:4px 8px;border-radius:999px;border:1px solid var(--amb-border-strong);background:rgba(255,255,255,0.06);max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></span>`;
titleBar.querySelector('.ast-title').textContent = node.title || node.type || 'Node';
titleBar.querySelector('.ast-type').textContent = node.type || '';
@@ -410,8 +410,8 @@ for (const w of node.widgets) {
button.disabled = !enabled;
const gridPlacement = primary ? 'grid-column:1/-1;' : '';
button.style.cssText = gridPlacement + (enabled
? `min-width:0;padding:${primary ? '13px 14px' : '11px 10px'};background:${accent};color:#fff;border:1px solid rgba(255,255,255,0.14);border-radius:11px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:transform 0.15s,filter 0.15s,box-shadow 0.15s;box-shadow:0 8px 18px rgba(0,0,0,0.14);`
: 'min-width:0;padding:11px 10px;background:rgba(255,255,255,0.035);color:#656b78;border:1px solid rgba(255,255,255,0.055);border-radius:11px;cursor:not-allowed;text-align:left;display:flex;align-items:center;gap:9px;');
? `min-width:0;padding:${primary ? '13px 14px' : '11px 10px'};background:${accent};color:#fff;border:1px solid var(--amb-border-strong);border-radius:11px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:transform 0.15s,filter 0.15s,box-shadow 0.15s;box-shadow:0 8px 18px rgba(0,0,0,0.14);`
: 'min-width:0;padding:11px 10px;background:rgba(255,255,255,0.035);color:#656b78;border:1px solid var(--amb-border);border-radius:11px;cursor:not-allowed;text-align:left;display:flex;align-items:center;gap:9px;');
const iconEl = document.createElement('span');
iconEl.textContent = icon;
iconEl.style.cssText = `width:${primary ? '34px' : '28px'};height:${primary ? '34px' : '28px'};border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,${enabled ? '0.14' : '0.04'});font-size:${primary ? '17px' : '14px'};flex-shrink:0;`;
web/modules/ui_node_model_picker.js
+17 -17
View File
@@ -105,10 +105,10 @@ export function _openGalleryReplacer(node, w, options = {}) {
: t('pickerChangeTitle');
const typeBadge = document.createElement('span');
typeBadge.textContent = pickerType.label;
typeBadge.style.cssText = 'padding:5px 10px;border-radius:20px;background:rgba(138,180,248,0.1);border:1px solid rgba(138,180,248,0.25);color:#a9c7ff;font-size:10px;font-weight:750;';
typeBadge.style.cssText = 'padding:5px 10px;border-radius:20px;background:color-mix(in srgb, var(--amb-link) 10%, transparent);border:1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);color:var(--amb-link);font-size:10px;font-weight:750;';
const closeBtn = document.createElement('button');
closeBtn.textContent = '✕';
closeBtn.style.cssText = 'margin-left:auto;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);color:#aaa;font-size:20px;cursor:pointer;';
closeBtn.style.cssText = 'margin-left:auto;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--amb-border);color:var(--amb-text-muted);font-size:20px;cursor:pointer;';
closeBtn.onclick = closeModal;
headerCopy.append(eyebrow, title);
header.append(headerIcon, headerCopy, typeBadge, closeBtn);
@@ -121,30 +121,30 @@ export function _openGalleryReplacer(node, w, options = {}) {
const body = document.createElement('div');
body.style.cssText = 'display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:14px;min-height:0;flex:1;';
const folderPanel = document.createElement('aside');
folderPanel.style.cssText = 'background:rgba(20,22,29,0.92);border:1px solid rgba(255,255,255,0.075);border-radius:13px;overflow:auto;padding:10px;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
folderPanel.style.cssText = 'background:rgba(20,22,29,0.92);border:1px solid var(--amb-border);border-radius:13px;overflow:auto;padding:10px;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
const folderTitle = document.createElement('div');
folderTitle.textContent = t('pickerFolders');
folderTitle.style.cssText = 'font-size:13px;font-weight:700;color:#ddd;padding:8px 10px 10px;';
folderTitle.style.cssText = 'font-size:13px;font-weight:700;color:var(--amb-text-soft);padding:8px 10px 10px;';
const folderList = document.createElement('div');
folderList.style.cssText = 'display:flex;flex-direction:column;gap:3px;';
folderPanel.append(folderTitle, folderList);
const content = document.createElement('section');
content.style.cssText = 'display:flex;flex-direction:column;min-width:0;min-height:0;background:rgba(18,20,27,0.92);border:1px solid rgba(255,255,255,0.075);border-radius:13px;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
content.style.cssText = 'display:flex;flex-direction:column;min-width:0;min-height:0;background:rgba(18,20,27,0.92);border:1px solid var(--amb-border);border-radius:13px;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,0.18);';
const toolbar = document.createElement('div');
toolbar.style.cssText = 'display:flex;gap:10px;padding:12px;border-bottom:1px solid #333;flex-wrap:wrap;align-items:center;';
toolbar.style.cssText = 'display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--amb-border-strong);flex-wrap:wrap;align-items:center;';
const searchInput = document.createElement('input');
searchInput.type = 'search';
searchInput.placeholder = t('pickerSearch');
searchInput.style.cssText = 'flex:1;min-width:220px;padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,0.1);background:#222631;color:#fff;font-size:13px;outline:none;';
searchInput.style.cssText = 'flex:1;min-width:220px;padding:10px 12px;border-radius:9px;border:1px solid var(--amb-border);background:var(--amb-bg-card-hover);color:#fff;font-size:13px;outline:none;';
const baseFilterSelect = document.createElement('select');
baseFilterSelect.style.cssText = `display:${pickerType.isLora ? 'block' : 'none'};padding:10px 12px;border-radius:9px;border:1px solid rgba(0,220,180,0.2);background:#1d292b;color:#9be8d9;font-size:12px;max-width:230px;`;
baseFilterSelect.style.cssText = `display:${pickerType.isLora ? 'block' : 'none'};padding:10px 12px;border-radius:9px;border:1px solid rgba(0,220,180,0.2);background:var(--amb-bg-card-hover);color:#9be8d9;font-size:12px;max-width:230px;`;
const allBaseOption = document.createElement('option');
allBaseOption.value = '';
allBaseOption.textContent = t('pickerMainAll');
baseFilterSelect.appendChild(allBaseOption);
const sortSelect = document.createElement('select');
sortSelect.style.cssText = 'padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,0.1);background:#222631;color:#fff;font-size:12px;';
sortSelect.style.cssText = 'padding:10px 12px;border-radius:9px;border:1px solid var(--amb-border);background:var(--amb-bg-card-hover);color:#fff;font-size:12px;';
[
['name-asc', t('pickerNameAsc')],
['name-desc', t('pickerNameDesc')],
@@ -156,13 +156,13 @@ export function _openGalleryReplacer(node, w, options = {}) {
sortSelect.appendChild(option);
});
const resultCount = document.createElement('span');
resultCount.style.cssText = 'color:#888;font-size:12px;white-space:nowrap;';
resultCount.style.cssText = 'color:var(--amb-text-muted);font-size:12px;white-space:nowrap;';
toolbar.append(searchInput, baseFilterSelect, sortSelect, resultCount);
content.appendChild(toolbar);
const loadingText = document.createElement('div');
loadingText.textContent = t('pickerLoadingCovers');
loadingText.style.cssText = 'color:#888;font-size:13px;padding:10px 14px 0;';
loadingText.style.cssText = 'color:var(--amb-text-muted);font-size:13px;padding:10px 14px 0;';
const gridScroll = document.createElement('div');
gridScroll.style.cssText = 'overflow:auto;min-height:0;flex:1;padding:14px;';
const grid = document.createElement('div');
@@ -175,10 +175,10 @@ export function _openGalleryReplacer(node, w, options = {}) {
const footer = document.createElement('div');
footer.style.cssText = 'display:flex;align-items:center;gap:12px;margin-top:14px;flex-shrink:0;';
const selectionText = document.createElement('div');
selectionText.style.cssText = 'min-width:0;flex:1;color:#aaa;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
selectionText.style.cssText = 'min-width:0;flex:1;color:var(--amb-text-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
const cancelBtn = document.createElement('button');
cancelBtn.textContent = t('pickerCancel');
cancelBtn.style.cssText = 'padding:10px 18px;background:#333;color:#ddd;border:1px solid #555;border-radius:7px;cursor:pointer;';
cancelBtn.style.cssText = 'padding:10px 18px;background:var(--amb-bg-card-hover);color:var(--amb-text-soft);border:1px solid var(--amb-border-strong);border-radius:7px;cursor:pointer;';
cancelBtn.onclick = closeModal;
const confirmBtn = document.createElement('button');
confirmBtn.textContent = mode === 'insert'
@@ -318,9 +318,9 @@ export function _openGalleryReplacer(node, w, options = {}) {
const card = document.createElement('div');
card.tabIndex = 0;
card.setAttribute('role', 'button');
card.style.cssText = `position:relative;background:linear-gradient(160deg,#252935,#1b1d24);border-radius:11px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;border:1px solid ${isSelected ? '#6ea8ff' : isCurrent ? '#e9b949' : 'rgba(255,255,255,0.09)'};box-shadow:${isSelected ? '0 0 0 2px rgba(88,151,255,0.22),0 14px 28px rgba(0,0,0,0.28)' : '0 8px 20px rgba(0,0,0,0.16)'};transition:transform 0.12s,box-shadow 0.12s;min-width:0;`;
card.style.cssText = `position:relative;background:linear-gradient(160deg,var(--amb-bg-card-hover),var(--amb-bg-card));border-radius:11px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;border:1px solid ${isSelected ? '#6ea8ff' : isCurrent ? '#e9b949' : 'rgba(255,255,255,0.09)'};box-shadow:${isSelected ? '0 0 0 2px rgba(88,151,255,0.22),0 14px 28px rgba(0,0,0,0.28)' : '0 8px 20px rgba(0,0,0,0.16)'};transition:transform 0.12s,box-shadow 0.12s;min-width:0;`;
const previewBox = document.createElement('div');
previewBox.style.cssText = 'height:150px;background:radial-gradient(circle at 50% 15%,#2b3041,#0d0e13 72%);display:flex;align-items:center;justify-content:center;font-size:30px;position:relative;overflow:hidden;';
previewBox.style.cssText = 'height:150px;background:radial-gradient(circle at 50% 15%,#2b3041,var(--amb-bg-page) 72%);display:flex;align-items:center;justify-content:center;font-size:30px;position:relative;overflow:hidden;';
const previewUrl = info.preview_url || previews[path];
if (/\.(mp4|webm)(?:$|\?|&|#)/i.test(previewUrl || '')) {
const video = document.createElement('video');
@@ -352,7 +352,7 @@ export function _openGalleryReplacer(node, w, options = {}) {
badgeStack.style.cssText = 'position:absolute;top:6px;right:6px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:76%;';
const categoryBadge = document.createElement('span');
categoryBadge.textContent = formatModelTypeLabel(info.type, pickerType.label);
categoryBadge.style.cssText = 'padding:3px 6px;border-radius:5px;background:rgba(25,34,54,0.9);border:1px solid rgba(138,180,248,0.28);color:#b8d0ff;font-size:9px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,0.22);';
categoryBadge.style.cssText = 'padding:3px 6px;border-radius:5px;background:rgba(25,34,54,0.9);border:1px solid color-mix(in srgb, var(--amb-link) 28%, transparent);color:#b8d0ff;font-size:9px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,0.22);';
badgeStack.appendChild(categoryBadge);
if (baseModel) {
const baseBadge = document.createElement('span');
@@ -400,7 +400,7 @@ export function _openGalleryReplacer(node, w, options = {}) {
else {
const empty = document.createElement('div');
empty.textContent = t('pickerNoMatches');
empty.style.cssText = 'color:#777;padding:30px;text-align:center;grid-column:1/-1;';
empty.style.cssText = 'color:var(--amb-text-dim);padding:30px;text-align:center;grid-column:1/-1;';
grid.appendChild(empty);
}
};
web/modules/ui_notebook_editor.js
+2 -2
View File
@@ -599,7 +599,7 @@ export function fillNotebookGalleries(baseModel, mainGallery, loraGallery, data)
if (isVid) return `<video src="${m.preview_url}" muted loop playsinline></video>`;
return `<img src="${m.preview_url}" />`;
}
return `<div style="width:30px; height:30px; background:#222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#555;">?</div>`;
return `<div style="width:30px; height:30px; background:var(--amb-bg-card); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--amb-text-dim);">?</div>`;
};
fetch(`/anomalous/compatible_models?base_model=${encodeURIComponent(baseModel)}&target_type=checkpoints,unet,diffusion_models`)
@@ -650,7 +650,7 @@ export function fillNotebookGalleries(baseModel, mainGallery, loraGallery, data)
let badgeHtml = '';
if (isSelected) {
badgeHtml = `<div style="position:absolute; top:-5px; right:-5px; background:linear-gradient(135deg, #f59e0b, #d97706); color:#180808; border-radius:50%; width:20px; height:20px; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:bold; z-index:10; box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 6px rgba(245,158,11,0.4); border: 1px solid rgba(255,255,255,0.3);">${loraIndex + 1}</div>`;
badgeHtml = `<div style="position:absolute; top:-5px; right:-5px; background:linear-gradient(135deg, #f59e0b, #d97706); color:#180808; border-radius:50%; width:20px; height:20px; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:bold; z-index:10; box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 6px rgba(245,158,11,0.4); border: 1px solid var(--amb-border-strong);">${loraIndex + 1}</div>`;
}
card.innerHTML = `${badgeHtml}${buildThumbHtml(m)}<div class="anomalous-nb-minilora-name" title="${escapeHtml(m.filename)}">${escapeHtml(m.filename)}</div>`;
web/modules/ui_notebooks.js
+2 -2
View File
@@ -39,9 +39,9 @@ function createNotebookSidebar(ctx) {
createInput.style.display = 'none';
createInput.style.flex = '1';
createInput.style.padding = '4px';
createInput.style.background = '#222';
createInput.style.background = 'var(--amb-bg-card)';
createInput.style.color = '#fff';
createInput.style.border = '1px solid #555';
createInput.style.border = '1px solid var(--amb-border-strong)';
createInput.style.borderRadius = '4px';
createBtn.onclick = () => {
web/modules/ui_recipe_cards.js
+22 -22
View File
@@ -144,8 +144,8 @@ export function ensureRecipeGuideStyles() {
background: rgba(10, 12, 16, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
border: 1px solid var(--amb-border);
color: var(--amb-text-soft);
display: inline-flex;
align-items: center;
gap: 3px;
@@ -157,8 +157,8 @@ export function ensureRecipeGuideStyles() {
.anomalous-recipe-card:hover .anomalous-recipe-drag-badge {
opacity: 1;
background: rgba(15, 23, 42, 0.9);
border-color: rgba(99, 102, 241, 0.4);
color: #e2e8f0;
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
color: var(--amb-text-main);
}
/* 修复封面底部模型就绪状态徽标对比度与穿透：深色高对比毛玻璃底板 */
.anomalous-recipe-readiness-pill {
@@ -168,11 +168,11 @@ export function ensureRecipeGuideStyles() {
background: rgba(10, 12, 18, 0.88) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border: 1px solid var(--amb-border-strong) !important;
padding: 2.5px 8px !important;
border-radius: 6px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
color: #f1f5f9 !important;
color: var(--amb-text-main) !important;
}
.anomalous-recipe-readiness-pill.is-ready {
background: rgba(10, 12, 18, 0.9) !important;
@@ -212,9 +212,9 @@ export function ensureRecipeGuideStyles() {
margin: 8px 16px 4px 16px;
border-radius: 8px;
font-size: 12px;
color: #94a3b8;
color: var(--amb-text-muted);
background: rgba(30, 41, 59, 0.5);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
line-height: 1.4;
@@ -231,13 +231,13 @@ export function ensureRecipeGuideStyles() {
flex-shrink: 0;
}
.anomalous-recipe-drag-hint-text {
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 12px;
}
.anomalous-recipe-drag-hint-close {
background: transparent;
border: none;
color: #64748b;
color: var(--amb-text-dim);
font-size: 16px;
line-height: 1;
cursor: pointer;
@@ -250,7 +250,7 @@ export function ensureRecipeGuideStyles() {
justify-content: center;
}
.anomalous-recipe-drag-hint-close:hover {
color: #f1f5f9;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.08);
}
.anomalous-recipe-empty-guide {
@@ -259,7 +259,7 @@ export function ensureRecipeGuideStyles() {
margin: 32px auto;
padding: 28px 24px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 16px;
text-align: center;
box-sizing: border-box;
@@ -272,8 +272,8 @@ export function ensureRecipeGuideStyles() {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.25);
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--amb-link) 25%, transparent);
display: flex;
align-items: center;
justify-content: center;
@@ -284,14 +284,14 @@ export function ensureRecipeGuideStyles() {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
letter-spacing: 0.2px;
}
.anomalous-recipe-empty-subtitle {
margin: 0;
font-size: 12.5px;
line-height: 1.55;
color: #94a3b8;
color: var(--amb-text-muted);
max-width: 440px;
}
.anomalous-recipe-empty-steps {
@@ -304,7 +304,7 @@ export function ensureRecipeGuideStyles() {
}
.anomalous-recipe-empty-step {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 14px 14px;
display: flex;
@@ -314,7 +314,7 @@ export function ensureRecipeGuideStyles() {
}
.anomalous-recipe-empty-step:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
border-color: var(--amb-border-strong);
}
.anomalous-recipe-step-icon {
font-size: 20px;
@@ -323,14 +323,14 @@ export function ensureRecipeGuideStyles() {
}
.anomalous-recipe-empty-step strong {
font-size: 13px;
color: #e2e8f0;
color: var(--amb-text-main);
font-weight: 600;
}
.anomalous-recipe-empty-step p {
margin: 0;
font-size: 11.5px;
line-height: 1.5;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-recipe-empty-action-btn {
margin-top: 6px;
@@ -340,8 +340,8 @@ export function ensureRecipeGuideStyles() {
padding: 8px 18px;
font-size: 13px;
font-weight: 500;
color: #fff;
background: #4f46e5;
color: var(--amb-btn-primary-text);
background: var(--amb-btn-primary-bg);
border: none;
border-radius: 8px;
cursor: pointer;
web/modules/ui_recipe_detail.js
+6 -6
View File
@@ -77,7 +77,7 @@ function openOriginEditDialog(owner, recipe, reference, finish) {
const dialog = document.createElement('div');
dialog.style.background = 'linear-gradient(145deg, rgba(48, 49, 55, 0.98), rgba(27, 28, 33, 0.98))';
dialog.style.border = '1px solid rgba(255, 255, 255, 0.12)';
dialog.style.border = '1px solid var(--amb-border-strong)';
dialog.style.borderRadius = '16px';
dialog.style.padding = '24px';
dialog.style.maxWidth = '400px';
@@ -133,15 +133,15 @@ function openOriginEditDialog(owner, recipe, reference, finish) {
input.type = 'text';
input.value = value || '';
input.style.background = 'rgba(0, 0, 0, 0.2)';
input.style.border = '1px solid rgba(255, 255, 255, 0.1)';
input.style.border = '1px solid var(--amb-border)';
input.style.padding = '10px 12px';
input.style.borderRadius = '8px';
input.style.color = '#fff';
input.style.fontSize = '14px';
input.style.outline = 'none';
input.style.transition = 'border-color 0.2s';
input.onfocus = () => input.style.borderColor = 'var(--anomalous-accent, #6366f1)';
input.onblur = () => input.style.borderColor = 'rgba(255, 255, 255, 0.1)';
input.onfocus = () => input.style.borderColor = 'var(--anomalous-accent, var(--amb-link))';
input.onblur = () => input.style.borderColor = 'var(--amb-border)';
group.appendChild(label);
group.appendChild(input);
return { group, input };
@@ -411,7 +411,7 @@ function renderModelComposition(container, owner, recipe, references, finish, pa
editOriginBtn.title = t('recipeOriginDialogTitle');
editOriginBtn.style.marginLeft = '8px';
editOriginBtn.style.background = 'transparent';
editOriginBtn.style.border = '1px solid rgba(255,255,255,0.1)';
editOriginBtn.style.border = '1px solid var(--amb-border)';
editOriginBtn.style.color = 'rgba(255,255,255,0.7)';
editOriginBtn.onclick = (e) => {
e.stopPropagation();
@@ -534,7 +534,7 @@ function renderModelComposition(container, owner, recipe, references, finish, pa
if (container.children.length > 1) { // Skip divider for the very first section
const divider = document.createElement('hr');
divider.className = 'anomalous-recipe-model-divider';
divider.style.borderTop = '1px solid rgba(255, 255, 255, 0.1)';
divider.style.borderTop = '1px solid var(--amb-border)';
divider.style.margin = '20px 0 16px 0';
container.appendChild(divider);
}
web/modules/ui_recipe_parameters.js
+1 -1
View File
@@ -1135,7 +1135,7 @@ export function renderRecipeParameters(content, owner, recipe, gallery, refreshG
if (baseModelVal) {
const modelCard = document.createElement('div');
modelCard.className = 'anomalous-recipe-model-highlight-card';
modelCard.innerHTML = `<div style="display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;align-items:center;color:#dc143c;"><svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></span><span style="font-size:0.75rem;color:#94a3b8;text-transform:uppercase;font-weight:600;">${t('recipeDetailBaseModel') || '底模'}</span></div><div style="font-size:0.9rem;font-weight:600;color:#f8fafc;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(String(baseModelVal))}">${escapeHtml(String(baseModelVal))}</div>`;
modelCard.innerHTML = `<div style="display:flex;align-items:center;gap:8px;"><span style="display:inline-flex;align-items:center;color:#dc143c;"><svg style="width:16px;height:16px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></span><span style="font-size:0.75rem;color:var(--amb-text-muted);text-transform:uppercase;font-weight:600;">${t('recipeDetailBaseModel') || '底模'}</span></div><div style="font-size:0.9rem;font-weight:600;color:var(--amb-text-main);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(String(baseModelVal))}">${escapeHtml(String(baseModelVal))}</div>`;
modelsDeck.appendChild(modelCard);
}
web/modules/ui_settings_hub.js
+13 -13
View File
@@ -122,7 +122,7 @@ export function createSettingsHub(owner, {
const styleHubBtn = (btn) => {
btn.style.background = 'transparent';
btn.style.border = '1px solid rgba(255,255,255,0.05)';
btn.style.border = '1px solid var(--amb-border)';
btn.style.color = '#ccc';
btn.style.textAlign = 'left';
btn.style.padding = '8px 10px';
@@ -266,7 +266,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
viewModeContainer.style.background = 'rgba(255, 255, 255, 0.03)';
viewModeContainer.style.padding = '8px 10px';
viewModeContainer.style.borderRadius = '8px';
viewModeContainer.style.border = '1px solid rgba(255, 255, 255, 0.08)';
viewModeContainer.style.border = '1px solid var(--amb-border)';
viewModeContainer.style.marginBottom = '4px';
const viewModeHeader = document.createElement('div');
@@ -289,7 +289,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
viewModeGroup.style.background = 'rgba(0, 0, 0, 0.35)';
viewModeGroup.style.padding = '3px';
viewModeGroup.style.borderRadius = '6px';
viewModeGroup.style.border = '1px solid rgba(255, 255, 255, 0.06)';
viewModeGroup.style.border = '1px solid var(--amb-border)';
const modeDefinitions = [
{ id: 'compact', key: 'sidebarViewModeCompact' },
@@ -349,7 +349,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
scaleContainer.style.background = 'rgba(255, 255, 255, 0.03)';
scaleContainer.style.padding = '8px 10px';
scaleContainer.style.borderRadius = '8px';
scaleContainer.style.border = '1px solid rgba(255, 255, 255, 0.08)';
scaleContainer.style.border = '1px solid var(--amb-border)';
scaleContainer.style.marginBottom = '4px';
const scaleLabel = document.createElement('span');
@@ -375,9 +375,9 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
const createScaleBtn = (text, delta) => {
const btn = document.createElement('button');
btn.innerText = text;
btn.style.background = '#333';
btn.style.background = 'var(--amb-bg-card-hover)';
btn.style.color = '#fff';
btn.style.border = '1px solid #555';
btn.style.border = '1px solid var(--amb-border-strong)';
btn.style.borderRadius = '4px';
btn.style.width = '24px';
btn.style.height = '24px';
@@ -385,8 +385,8 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
btn.style.display = 'flex';
btn.style.alignItems = 'center';
btn.style.justifyContent = 'center';
btn.onmouseover = () => btn.style.background = '#444';
btn.onmouseout = () => btn.style.background = '#333';
btn.onmouseover = () => btn.style.background = 'var(--amb-bg-card-hover)';
btn.onmouseout = () => btn.style.background = 'var(--amb-bg-card-hover)';
btn.onclick = () => {
currentScale = Math.max(0.5, Math.min(1.5, currentScale + delta));
scaleVal.innerText = `${Math.round(currentScale * 100)}%`;
@@ -413,7 +413,7 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
bgOpacityContainer.style.background = 'rgba(255, 255, 255, 0.03)';
bgOpacityContainer.style.padding = '8px 10px';
bgOpacityContainer.style.borderRadius = '8px';
bgOpacityContainer.style.border = '1px solid rgba(255, 255, 255, 0.08)';
bgOpacityContainer.style.border = '1px solid var(--amb-border)';
bgOpacityContainer.style.marginBottom = '4px';
const bgOpacityLabel = document.createElement('span');
@@ -439,9 +439,9 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
const createBgBtn = (text, delta) => {
const btn = document.createElement('button');
btn.innerText = text;
btn.style.background = '#333';
btn.style.background = 'var(--amb-bg-card-hover)';
btn.style.color = '#fff';
btn.style.border = '1px solid #555';
btn.style.border = '1px solid var(--amb-border-strong)';
btn.style.borderRadius = '4px';
btn.style.width = '24px';
btn.style.height = '24px';
@@ -449,8 +449,8 @@ modelSettingsNote.textContent = t('sidebarModelSettingsNote');
btn.style.display = 'flex';
btn.style.alignItems = 'center';
btn.style.justifyContent = 'center';
btn.onmouseover = () => btn.style.background = '#444';
btn.onmouseout = () => btn.style.background = '#333';
btn.onmouseover = () => btn.style.background = 'var(--amb-bg-card-hover)';
btn.onmouseout = () => btn.style.background = 'var(--amb-bg-card-hover)';
btn.onclick = () => {
currentBgOpacity = Math.max(0, Math.min(1, Math.round((currentBgOpacity + delta) * 100) / 100));
bgOpacityVal.innerText = `${Math.round(currentBgOpacity * 100)}%`;
web/modules/ui_sidebar.js
+7 -7
View File
@@ -270,13 +270,13 @@ export function renderSidebar() {
collapseAllBtn.style.padding = '4px 9px';
collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.08)';
collapseAllBtn.style.color = '#e2e8f0';
collapseAllBtn.style.border = '1px solid rgba(255, 255, 255, 0.12)';
collapseAllBtn.style.border = '1px solid var(--amb-border-strong)';
collapseAllBtn.style.borderRadius = '3px 8px 3px 8px';
collapseAllBtn.style.cursor = 'pointer';
collapseAllBtn.style.fontSize = '0.82em';
collapseAllBtn.style.transition = 'all 0.2s ease';
collapseAllBtn.onmouseover = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.15)'; collapseAllBtn.style.borderColor = 'rgba(255, 255, 255, 0.25)'; };
collapseAllBtn.onmouseout = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.08)'; collapseAllBtn.style.borderColor = 'rgba(255, 255, 255, 0.12)'; };
collapseAllBtn.onmouseover = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.15)'; collapseAllBtn.style.borderColor = 'var(--amb-border-strong)'; };
collapseAllBtn.onmouseout = () => { collapseAllBtn.style.background = 'rgba(255, 255, 255, 0.08)'; collapseAllBtn.style.borderColor = 'var(--amb-border-strong)'; };
collapseAllBtn.onclick = () => {
if (isAllCollapsed) {
(this.foldersData || []).forEach(typeGroup => {
@@ -304,14 +304,14 @@ export function renderSidebar() {
searchInput.style.width = '100%';
searchInput.style.padding = '8px 12px';
searchInput.style.borderRadius = '8px';
searchInput.style.border = '1px solid rgba(255,255,255,0.1)';
searchInput.style.border = '1px solid var(--amb-border)';
searchInput.style.background = 'rgba(0,0,0,0.2)';
searchInput.style.color = '#fff';
searchInput.style.boxSizing = 'border-box';
searchInput.style.outline = 'none';
searchInput.style.transition = 'border-color 0.2s';
searchInput.onfocus = () => searchInput.style.border = '1px solid #007aff';
searchInput.onblur = () => searchInput.style.border = '1px solid rgba(255,255,255,0.1)';
searchInput.onblur = () => searchInput.style.border = '1px solid var(--amb-border)';
searchInput.oninput = (e) => {
if (this.currentDetailModel) {
@@ -382,12 +382,12 @@ export function renderSidebar() {
let toggleIcon = '';
if (hasChildren) {
toggleIcon = `<span class="anomalous-folder-toggle" style="margin-right: 8px; width: 12px; display: inline-block; font-size: 0.8em; color: #888;">${isExpanded ? '▼' : '▶'}</span>`;
toggleIcon = `<span class="anomalous-folder-toggle" style="margin-right: 8px; width: 12px; display: inline-block; font-size: 0.8em; color: var(--amb-text-muted);">${isExpanded ? '▼' : '▶'}</span>`;
} else {
toggleIcon = `<span style="margin-right: 8px; width: 12px; display: inline-block;"></span>`;
}
item.innerHTML = `${toggleIcon}<span class="anomalous-folder-name" style="color: #ddd;">${escapeHtml(info.name)}</span> <span style="opacity:0.4; font-size:0.8em; margin-left: 5px;">${escapeHtml(info.model_count)}</span>`;
item.innerHTML = `${toggleIcon}<span class="anomalous-folder-name" style="color: var(--amb-text-soft);">${escapeHtml(info.name)}</span> <span style="opacity:0.4; font-size:0.8em; margin-left: 5px;">${escapeHtml(info.model_count)}</span>`;
const scope = this.modelScope;
if (scope?.subfolder === path && scope.type === typeGroup.type && scope.path_idx === typeGroup.path_idx) {
web/modules/ui_spotlight_tour.js
+28 -28
View File
@@ -114,8 +114,8 @@ export function ensureTourStyles() {
position: absolute;
border-radius: 10px;
box-shadow: 0 0 0 9999px rgba(10, 12, 18, 0.78),
0 0 0 2px rgba(96, 165, 250, 0.9),
0 0 22px rgba(59, 130, 246, 0.45);
0 0 0 2px color-mix(in srgb, var(--amb-link) 90%, transparent),
0 0 22px color-mix(in srgb, var(--amb-link) 45%, transparent);
transition: all 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
box-sizing: border-box;
@@ -124,11 +124,11 @@ export function ensureTourStyles() {
position: absolute;
width: 330px;
max-width: calc(100vw - 32px);
background: #18181f;
border: 1px solid rgba(255, 255, 255, 0.14);
background: var(--amb-bg-panel);
border: 1px solid var(--amb-border-strong);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2);
color: #f1f5f9;
color: var(--amb-text-main);
padding: 16px 18px;
display: flex;
flex-direction: column;
@@ -151,16 +151,16 @@ export function ensureTourStyles() {
gap: 5px;
font-size: 11px;
font-weight: 600;
color: #60a5fa;
background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(59, 130, 246, 0.3);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--amb-link) 30%, transparent);
border-radius: 9999px;
padding: 2px 8px;
}
.anomalous-spotlight-card-close {
background: transparent;
border: none;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 16px;
cursor: pointer;
padding: 2px 6px;
@@ -168,14 +168,14 @@ export function ensureTourStyles() {
transition: color 0.15s, background 0.15s;
}
.anomalous-spotlight-card-close:hover {
color: #fff;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.1);
}
.anomalous-spotlight-card-title {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #f8fafc;
color: var(--amb-text-main);
display: flex;
align-items: center;
gap: 6px;
@@ -185,7 +185,7 @@ export function ensureTourStyles() {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-spotlight-card-footer {
display: flex;
@@ -194,7 +194,7 @@ export function ensureTourStyles() {
gap: 8px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--amb-border);
}
.anomalous-spotlight-dots {
display: flex;
@@ -210,7 +210,7 @@ export function ensureTourStyles() {
}
.anomalous-spotlight-dot.active {
width: 14px;
background: #3b82f6;
background: var(--amb-btn-primary-bg);
}
.anomalous-spotlight-btn-group {
display: flex;
@@ -228,20 +228,20 @@ export function ensureTourStyles() {
}
.anomalous-spotlight-btn-secondary {
background: rgba(255, 255, 255, 0.08);
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-spotlight-btn-secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.15);
color: #fff;
color: var(--amb-text-main);
}
.anomalous-spotlight-btn-secondary:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.anomalous-spotlight-btn-primary {
background: #2563eb;
color: #fff;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
background: var(--amb-btn-primary-bg);
color: var(--amb-btn-primary-text);
box-shadow: 0 2px 8px color-mix(in srgb, var(--amb-link) 40%, transparent);
}
.anomalous-spotlight-btn-primary:hover {
background: #1d4ed8;
@@ -251,9 +251,9 @@ export function ensureTourStyles() {
align-items: center;
justify-content: center;
gap: 6px;
background: #2563eb;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--amb-btn-primary-bg);
color: var(--amb-btn-primary-text);
border: 1px solid var(--amb-border-strong);
border-radius: 6px;
padding: 7px 16px;
font-size: 12px;
@@ -273,9 +273,9 @@ export function ensureTourStyles() {
margin: 2px auto 14px auto;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 20px;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
@@ -289,15 +289,15 @@ export function ensureTourStyles() {
display: none;
}
.anomalous-update-guide-tour-banner:hover {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(96, 165, 250, 0.4);
color: #93c5fd;
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
color: var(--amb-link);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.anomalous-update-guide-tour-banner:active {
transform: translateY(0);
background: rgba(59, 130, 246, 0.2);
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
}
`;
(document.head || document.body)?.appendChild(style);
web/styles.css
+21 -21
View File
@@ -1,21 +1,21 @@
@import url("./styles/00-foundation-models.css?v=20260921-flicker-free-1");
@import url("./styles/01-shell-tools.css?v=20260926-canvas-perf-1");
@import url("./styles/02-notebooks.css?v=20260927-unet-hint");
@import url("./styles/03-gallery-recipes.css?v=20260918-model-sources-1");
@import url("./styles/04-dialogs-materials.css?v=20260926-material-apply-1");
@import url("./styles/05-recipe-studio-overrides.css?v=20260918-model-sources-1");
@import url("./styles/06-material-workbench.css?v=20260918-model-sources-1");
@import url("./styles/07-prompt-studio.css?v=20260918-model-sources-1");
@import url("./styles/08-theme-gallery-overrides.css?v=20260929-audio-tabs");
@import url("./styles/09-prompt-drawers.css?v=20260918-model-sources-1");
@import url("./styles/10-model-sources.css?v=20260918-model-sources-1");
@import url("./styles/11-audio-studio.css?v=20260929-gpt-sovits-only");
@import url("./styles/12-tts-setup.css?v=20260929-folder-layout");
@import url("./styles/13-script-director.css?v=20260929-wide-side");
@import url("./styles/14-version-manager.css");
@import url("./styles/15-shell-rail.css?v=20260929-shell-4");
@import url("./styles/16-activity.css?v=20260929-activity-1");
@import url("./styles/17-model-types.css?v=20260930-types-1");
@import url("./styles/18-scan-page.css?v=20261002-scan-1");
@import url("./styles/19-model-doctor.css?v=20261002-doctor-1");
@import url("./styles/20-current-node.css?v=20261002-node-1");
@import url("./styles/00-foundation-models.css?v=20261002-theme-1");
@import url("./styles/01-shell-tools.css?v=20261002-theme-1");
@import url("./styles/02-notebooks.css?v=20261002-theme-1");
@import url("./styles/03-gallery-recipes.css?v=20261002-theme-1");
@import url("./styles/04-dialogs-materials.css?v=20261002-theme-1");
@import url("./styles/05-recipe-studio-overrides.css?v=20261002-theme-1");
@import url("./styles/06-material-workbench.css?v=20261002-theme-1");
@import url("./styles/07-prompt-studio.css?v=20261002-theme-1");
@import url("./styles/08-theme-gallery-overrides.css?v=20261002-theme-1");
@import url("./styles/09-prompt-drawers.css?v=20261002-theme-1");
@import url("./styles/10-model-sources.css?v=20261002-theme-1");
@import url("./styles/11-audio-studio.css?v=20261002-theme-1");
@import url("./styles/12-tts-setup.css?v=20261002-theme-1");
@import url("./styles/13-script-director.css?v=20261002-theme-1");
@import url("./styles/14-version-manager.css?v=20261002-theme-1");
@import url("./styles/15-shell-rail.css?v=20261002-theme-1");
@import url("./styles/16-activity.css?v=20261002-theme-1");
@import url("./styles/17-model-types.css?v=20261002-theme-1");
@import url("./styles/18-scan-page.css?v=20261002-theme-1");
@import url("./styles/19-model-doctor.css?v=20261002-theme-1");
@import url("./styles/20-current-node.css?v=20261002-theme-1");
web/styles/00-foundation-models.css
+64 -56
View File
@@ -26,9 +26,13 @@
--amb-bg-card-hover: #28282d;
--amb-bg-input: #151517;
--amb-text-main: #f3f4f6;
--amb-text-soft: #d1d5db; /* secondary text that still reads as content */
--amb-text-muted: #9ca3af;
--amb-text-dim: #6b7280; /* hints, timestamps, placeholders */
--amb-border: rgba(255, 255, 255, 0.08);
--amb-border-strong: rgba(255, 255, 255, 0.16); /* controls and dividers that must show at rest */
--amb-border-hover: rgba(255, 255, 255, 0.16);
--amb-link: #a5b4fc; /* the one accent for links, selection and focus; tints via color-mix */
--amb-btn-primary-bg: #e5e7eb;
--amb-btn-primary-hover: #ffffff;
--amb-btn-primary-text: #111827;
@@ -50,9 +54,13 @@ html.theme-abyssal-scarlet,
--amb-bg-card-hover: #362530;
--amb-bg-input: #1c1319;
--amb-text-main: #ECE4E8;
--amb-text-soft: #D8CBD1;
--amb-text-muted: #B9A7B0;
--amb-text-dim: #8E7A85;
--amb-border: rgba(255, 245, 247, 0.10);
--amb-border-strong: rgba(255, 235, 240, 0.16);
--amb-border-hover: rgba(220, 20, 60, 0.35);
--amb-link: #F28CA0;
--amb-btn-primary-bg: #87384E;
--amb-btn-primary-hover: #9c425b;
--amb-btn-primary-text: #FFF5F7;
@@ -87,8 +95,8 @@ html.theme-abyssal-scarlet,
background: rgba(18, 21, 30, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: var(--fg-color, #f1f5f9);
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--fg-color, var(--amb-text-main));
border: 1px solid var(--amb-border-strong);
font-size: var(--anomalous-trigger-font-size);
cursor: pointer;
z-index: 2147483000 !important;
@@ -173,9 +181,9 @@ html.theme-abyssal-scarlet #anomalous-trigger-btn:hover {
#anomalous-trigger-btn:hover {
transform: scale(1.08) translateY(-4px);
background: rgba(25, 29, 42, 0.94);
border-color: rgba(100, 200, 255, 0.45);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px rgba(80, 190, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
color: #ffffff;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 18px color-mix(in srgb, var(--amb-link) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
color: var(--amb-text-main);
}
#anomalous-trigger-btn:hover .anomalous-trigger-icon {
@@ -247,8 +255,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
padding: 0.38rem 0.65rem;
border: 1px solid var(--border-default, #4b5563);
border-radius: 0.4rem;
background: var(--comfy-input-bg, #101113);
color: var(--fg-color, #f3f4f6);
background: var(--comfy-input-bg, var(--amb-bg-page));
color: var(--fg-color, var(--amb-text-main));
font: 600 0.78rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
text-align: center;
white-space: nowrap;
@@ -258,13 +266,13 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
padding: 0.42rem 0.72rem;
border: 1px solid var(--border-default, #4b5563);
border-radius: 0.4rem;
background: var(--comfy-input-bg, #24262b);
color: var(--fg-color, #f3f4f6);
background: var(--comfy-input-bg, var(--amb-bg-card-hover));
color: var(--fg-color, var(--amb-text-main));
cursor: pointer;
}
.anomalous-shortcut-customize:hover:not(:disabled) {
border-color: var(--p-primary-color, #60a5fa);
border-color: var(--p-primary-color, var(--amb-link));
}
.anomalous-shortcut-customize:disabled {
@@ -291,8 +299,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
#anomalous-container {
width: 90%;
height: 90%;
background-color: var(--amb-bg-page, #131315);
border: 1px solid rgba(255, 255, 255, 0.09);
background-color: var(--amb-bg-page, var(--amb-bg-page));
border: 1px solid var(--amb-border);
border-radius: 8px;
display: flex;
flex-direction: row;
@@ -347,11 +355,11 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
#anomalous-header {
height: 48px;
background: var(--comfy-menu-bg, #333);
background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
display: flex;
align-items: center;
padding: 0 50px 0 20px;
border-bottom: 1px solid var(--border-color, #555);
border-bottom: 1px solid var(--border-color, var(--amb-border-strong));
cursor: move;
position: relative;
}
@@ -370,8 +378,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
}
#anomalous-settings-box {
background: var(--comfy-menu-bg, #2a2a2a);
border: 1px solid var(--border-color, #444);
background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
border: 1px solid var(--border-color, var(--amb-border-strong));
padding: 30px;
border-radius: 12px;
display: flex;
@@ -398,8 +406,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
right: 4px;
width: 10px;
height: 10px;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-right: 2px solid var(--amb-border-strong);
border-bottom: 2px solid var(--amb-border-strong);
}
.anomalous-header-group {
@@ -415,7 +423,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
color: #c0c4cc;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
@@ -431,16 +439,16 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
#anomalous-header button:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
transform: translateY(-1px);
box-shadow: none;
}
#anomalous-header button.active {
background: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.28) !important;
color: #ffffff !important;
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;
}
@@ -491,7 +499,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
#anomalous-grid::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
}
#anomalous-grid::-webkit-scrollbar-thumb:hover {
@@ -501,8 +509,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
.anomalous-card {
position: relative;
background: var(--amb-bg-card, #202024);
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--amb-bg-card, var(--amb-bg-card));
border: 1px solid var(--amb-border);
border-radius: 8px;
overflow: hidden;
display: flex;
@@ -516,7 +524,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
.anomalous-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.2);
border-color: var(--amb-border-strong);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@@ -668,12 +676,12 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
background: rgba(28, 28, 32, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.09);
border: 1px solid var(--amb-border);
}
#anomalous-container.view-mode-aesthetic .anomalous-card:hover {
background: rgba(34, 34, 38, 0.92);
border-color: rgba(255, 255, 255, 0.22);
border-color: var(--amb-border-strong);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}
@@ -710,7 +718,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
.anomalous-card-title {
font-size: 0.88rem;
font-weight: 600;
color: #f3f4f6;
color: var(--amb-text-main);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -719,7 +727,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
.anomalous-card-filename {
font-size: 0.72rem;
color: #9ca3af;
color: var(--amb-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -737,8 +745,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
font-weight: 600;
letter-spacing: 0.4px;
background: rgba(18, 20, 26, 0.85);
color: #cbd5e1;
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--amb-text-soft);
border: 1px solid var(--amb-border-strong);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
@@ -749,32 +757,32 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
}
.anomalous-card:hover .anomalous-card-badge {
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
}
.anomalous-card-badge.badge-gold {
color: #e2e8f0;
color: var(--amb-text-main);
background: rgba(30, 32, 40, 0.9);
border-color: rgba(255, 255, 255, 0.2);
border-color: var(--amb-border-strong);
}
.anomalous-card-badge.badge-amber {
color: #cbd5e1;
color: var(--amb-text-soft);
background: rgba(30, 32, 40, 0.9);
border-color: rgba(255, 255, 255, 0.18);
border-color: var(--amb-border-strong);
}
.anomalous-card-badge.badge-flux {
color: #cbd5e1;
color: var(--amb-text-soft);
background: rgba(30, 32, 40, 0.9);
border-color: rgba(255, 255, 255, 0.18);
border-color: var(--amb-border-strong);
}
.anomalous-card-badge.badge-rose {
color: #cbd5e1;
color: var(--amb-text-soft);
background: rgba(30, 32, 40, 0.9);
border-color: rgba(255, 255, 255, 0.18);
border-color: var(--amb-border-strong);
}
/* Card Action Buttons - Normal Mode (Neutral Glass) */
@@ -789,8 +797,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
align-items: center;
justify-content: center;
background: rgba(20, 22, 28, 0.88);
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--amb-text-main);
border: 1px solid var(--amb-border-strong);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
@@ -824,21 +832,21 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
.anomalous-card-action-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
color: #ffffff;
color: var(--amb-text-main);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.anomalous-card-action-btn.action-apply:hover {
background: rgba(37, 99, 235, 0.9) !important;
border-color: rgba(96, 165, 250, 0.85) !important;
color: #ffffff !important;
box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5) !important;
background: color-mix(in srgb, var(--amb-link) 90%, transparent) !important;
border-color: color-mix(in srgb, var(--amb-link) 85%, transparent) !important;
color: var(--amb-text-main) !important;
box-shadow: 0 2px 10px color-mix(in srgb, var(--amb-link) 50%, transparent) !important;
}
.anomalous-card-action-btn.action-scan:hover {
background: rgba(245, 158, 11, 0.9) !important;
border-color: rgba(251, 191, 36, 0.85) !important;
color: #ffffff !important;
color: var(--amb-text-main) !important;
box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}
@@ -850,7 +858,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
width: min(380px, calc(100vw - 32px));
box-sizing: border-box;
padding: 16px;
border: 1px solid rgba(138, 180, 248, 0.35);
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
border-radius: 12px;
background: rgba(24, 24, 27, 0.96);
color: #f1f3f4;
@@ -906,7 +914,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
.anomalous-scan-progress-action {
margin-top: 8px;
padding: 4px 12px;
border: 1px solid rgba(138, 180, 248, 0.45);
border: 1px solid color-mix(in srgb, var(--amb-link) 45%, transparent);
border-radius: 999px;
background: transparent;
color: #d7dde8;
@@ -915,8 +923,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
}
.anomalous-scan-progress-action:hover {
background: rgba(138, 180, 248, 0.14);
color: #ffffff;
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
color: var(--amb-text-main);
}
.anomalous-scan-progress.is-complete .anomalous-scan-progress-fill {
@@ -937,7 +945,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
}
.anomalous-card-title {
color: var(--fg-color, #fff);
color: var(--fg-color, var(--amb-text-main));
font-size: 0.9em;
font-weight: 650;
line-height: 1.25;
web/styles/01-shell-tools.css
+36 -36
View File
@@ -7,7 +7,7 @@
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
position: relative;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 10px;
display: flex;
flex-direction: column;
@@ -19,21 +19,21 @@
#anomalous-doctor-panel,
#anomalous-assistant-panel {
background: var(--amb-bg-page, #131315) !important;
background: var(--amb-bg-page, var(--amb-bg-page)) !important;
position: relative;
z-index: 2;
}
#anomalous-sidebar input[type="text"] {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.09) !important;
border: 1px solid var(--amb-border) !important;
backdrop-filter: blur(8px) !important;
color: #f3f4f6 !important;
color: var(--amb-text-main) !important;
transition: all 0.2s ease !important;
}
#anomalous-sidebar input[type="text"]:focus {
border-color: rgba(255, 255, 255, 0.3) !important;
border-color: var(--amb-border-strong) !important;
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.06) !important;
}
@@ -59,7 +59,7 @@
background: rgba(24, 24, 28, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 10px;
padding: 12px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
@@ -99,35 +99,35 @@ button:active::after,
}
#anomalous-settings {
border-top: 1px solid var(--border-color, #444);
background: var(--bg-color, #111);
border-top: 1px solid var(--border-color, var(--amb-border-strong));
background: var(--bg-color, var(--amb-bg-page));
}
.anomalous-lang-btn {
width: 100% !important;
border: 2px solid #555 !important;
border: 2px solid var(--amb-border-strong) !important;
padding: 12px !important;
font-weight: bold;
border-radius: 4px !important;
background: #1a1a1a !important;
background: var(--amb-bg-panel) !important;
cursor: pointer;
color: #fff;
color: var(--amb-text-main);
margin-bottom: 15px;
}
.anomalous-type-header {
padding: 10px 15px;
background: rgba(255, 255, 255, 0.03);
color: var(--fg-color, #fff);
color: var(--fg-color, var(--amb-text-main));
font-weight: bold;
font-size: 0.9em;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--amb-border);
border-bottom: 1px solid var(--amb-border);
}
.anomalous-folder-item {
padding: 8px 15px;
color: var(--fg-color, #cbd5e1);
color: var(--fg-color, var(--amb-text-soft));
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -136,13 +136,13 @@ button:active::after,
.anomalous-folder-item:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
color: var(--amb-text-main);
}
/* Clean Neutral Active Indicator on Selected Menu (Normal Mode) */
.anomalous-folder-item.active {
background: rgba(255, 255, 255, 0.08);
color: #fff;
color: var(--amb-text-main);
font-weight: 600;
border-left: 2px solid #e5e7eb;
box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.03);
@@ -150,7 +150,7 @@ button:active::after,
}
.anomalous-folder-item.active .anomalous-folder-name {
color: #fff !important;
color: var(--amb-text-main) !important;
text-shadow: none;
}
@@ -169,7 +169,7 @@ button:active::after,
/* Sidebar Icons & Actions - Normal Mode (Neutral & Clean) */
.anomalous-folder-item svg,
#anomalous-sidebar h3 svg {
color: #94a3b8 !important;
color: var(--amb-text-muted) !important;
filter: none;
}
@@ -184,7 +184,7 @@ button:active::after,
#anomalous-doctor-btn,
#anomalous-assistant-btn,
#anomalous-global-settings-btn {
color: #94a3b8 !important;
color: var(--amb-text-muted) !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@@ -193,7 +193,7 @@ button:active::after,
#anomalous-doctor-btn:hover,
#anomalous-assistant-btn:hover,
#anomalous-global-settings-btn:hover {
color: #f8fafc !important;
color: var(--amb-text-main) !important;
filter: none !important;
background: rgba(255, 255, 255, 0.08) !important;
}
@@ -249,7 +249,7 @@ button:active::after,
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg-color, #222);
background: var(--bg-color, var(--amb-bg-card));
}
.anomalous-split-container {
@@ -264,13 +264,13 @@ button:active::after,
display: flex;
align-items: center;
justify-content: center;
background: #000;
background: var(--amb-bg-page);
overflow: hidden;
}
.anomalous-resizer {
width: 5px;
background: var(--border-color, #444);
background: var(--border-color, var(--amb-bg-card-hover));
cursor: col-resize;
transition: background 0.2s;
}
@@ -285,7 +285,7 @@ button:active::after,
.anomalous-split-right {
width: 60%;
background: var(--bg-color, #222);
background: var(--bg-color, var(--amb-bg-card));
overflow: auto;
}
@@ -299,9 +299,9 @@ button:active::after,
}
#anomalous-api-key {
background: #333;
border: 1px solid #555;
color: #fff;
background: var(--amb-bg-card-hover);
border: 1px solid var(--amb-border-strong);
color: var(--amb-text-main);
padding: 8px;
border-radius: 4px;
width: 150px;
@@ -309,7 +309,7 @@ button:active::after,
}
#anomalous-api-key::placeholder {
color: #999;
color: var(--amb-text-muted);
}
@container (max-width: 750px) {
@@ -373,11 +373,11 @@ button:active::after,
.anomalous-compatible-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color, #444);
border-top: 1px solid var(--border-color, var(--amb-border-strong));
}
.anomalous-compatible-title {
color: var(--fg-color, #fff);
color: var(--fg-color, var(--amb-text-main));
font-size: 1.1em;
margin-bottom: 10px;
display: flex;
@@ -392,8 +392,8 @@ button:active::after,
}
.anomalous-compatible-item {
background: var(--comfy-menu-bg, #333);
border: 1px solid var(--border-color, #555);
background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
border: 1px solid var(--border-color, var(--amb-border-strong));
border-radius: 6px;
padding: 6px 10px;
display: flex;
@@ -405,8 +405,8 @@ button:active::after,
}
.anomalous-compatible-item:hover {
border-color: rgba(255, 255, 255, 0.3);
background: var(--bg-color, #444);
border-color: var(--amb-border-strong);
background: var(--bg-color, var(--amb-bg-card-hover));
transform: translateY(-2px);
}
@@ -423,7 +423,7 @@ button:active::after,
}
.anomalous-compatible-item-name {
color: var(--fg-color, #fff);
color: var(--fg-color, var(--amb-text-main));
font-size: 0.85em;
white-space: nowrap;
overflow: hidden;
web/styles/02-notebooks.css
+82 -82
View File
@@ -6,7 +6,7 @@
bottom: 0;
left: 0;
width: 100%;
background: var(--amb-bg-page, #131315);
background: var(--amb-bg-page, var(--amb-bg-page));
z-index: 10001;
display: flex;
align-items: center;
@@ -16,8 +16,8 @@
.anomalous-nb-container {
width: 95%;
height: 95%;
background: var(--bg-color, #222);
border: 1px solid var(--border-color, #444);
background: var(--bg-color, var(--amb-bg-card));
border: 1px solid var(--border-color, var(--amb-border-strong));
border-radius: 12px;
display: flex;
flex-direction: column;
@@ -28,20 +28,20 @@
.anomalous-prompt-studio-container {
padding: 0;
position: relative;
background: var(--amb-bg-page, #141519);
border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
background: var(--amb-bg-page, var(--amb-bg-panel));
border: 1px solid var(--amb-border, var(--amb-border-strong));
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
}
.anomalous-nb-header {
height: 50px;
background: var(--comfy-menu-bg, #333);
border-bottom: 1px solid #444;
background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
border-bottom: 1px solid var(--amb-border-strong);
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
color: #fff;
color: var(--amb-text-main);
}
.anomalous-nb-close {
@@ -59,8 +59,8 @@
.anomalous-nb-sidebar {
width: 250px;
background: #111;
border-right: 1px solid #444;
background: var(--amb-bg-page);
border-right: 1px solid var(--amb-border-strong);
display: flex;
flex-direction: column;
transition: width 0.3s;
@@ -166,7 +166,7 @@
.anomalous-nb-sidebar-nav-group {
flex-shrink: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--amb-border);
padding: 12px 10px;
background: rgba(0, 0, 0, 0.2);
}
@@ -174,7 +174,7 @@
.anomalous-nb-nav-header {
font-size: 0.74rem;
font-weight: 700;
color: #94a3b8;
color: var(--amb-text-muted);
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 8px;
@@ -196,7 +196,7 @@
border-radius: 6px;
background: transparent;
border: 1px solid transparent;
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 0.82rem;
cursor: pointer;
text-align: left;
@@ -208,14 +208,14 @@
.anomalous-nb-nav-item:hover {
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
color: var(--amb-text-main);
}
.anomalous-nb-nav-item.active {
background: rgba(139, 92, 246, 0.16);
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
color: #c084fc;
font-weight: 600;
border-color: rgba(139, 92, 246, 0.35);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
}
.anomalous-nb-nav-icon {
@@ -238,11 +238,11 @@
.anomalous-nb-item {
padding: 10px;
color: #ccc;
color: var(--amb-text-soft);
cursor: pointer;
border-radius: 4px;
margin-bottom: 5px;
background: #222;
background: var(--amb-bg-card);
display: flex;
align-items: center;
white-space: nowrap;
@@ -261,12 +261,12 @@
}
.anomalous-nb-item:hover {
background: #333;
background: var(--amb-bg-card-hover);
}
.anomalous-nb-item.active {
background: rgba(255, 255, 255, 0.12);
color: #fff;
color: var(--amb-text-main);
font-weight: bold;
}
@@ -276,10 +276,10 @@
.anomalous-nb-editor {
flex: 1;
background: #222;
background: var(--amb-bg-card);
overflow-y: auto;
padding: 20px;
color: #eee;
color: var(--amb-text-main);
}
.anomalous-nb-toolbar {
@@ -289,10 +289,10 @@
position: sticky;
top: 0;
z-index: 20;
background: var(--amb-bg-page, #18181b);
background: var(--amb-bg-page, var(--amb-bg-panel));
padding: 12px 20px;
margin: -20px -20px 16px -20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--amb-border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
@@ -312,7 +312,7 @@
position: relative;
background: var(--amb-btn-primary-bg, #D7D9E0);
color: var(--amb-btn-primary-text, #15171C);
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid var(--amb-border-strong);
height: 32px;
padding: 0 14px;
border-radius: var(--amb-radius-control, 6px);
@@ -331,7 +331,7 @@
}
.anomalous-btn-primary:hover {
background: var(--amb-btn-primary-hover, #E5E7EB);
background: var(--amb-btn-primary-hover, var(--amb-btn-primary-bg));
border-color: rgba(255, 255, 255, 0.4);
box-shadow: none;
}
@@ -365,7 +365,7 @@
.anomalous-btn-danger:hover {
background: #991b1b;
border-color: rgba(239, 68, 68, 0.6);
color: #ffffff;
color: var(--amb-text-main);
}
.anomalous-btn-success {
@@ -400,8 +400,8 @@
.anomalous-nb-more-btn {
position: relative;
background: rgba(255, 255, 255, 0.06);
color: #cbd5e1;
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--amb-text-soft);
border: 1px solid var(--amb-border-strong);
height: 32px;
padding: 0 12px;
border-radius: var(--amb-radius-control, 6px);
@@ -419,8 +419,8 @@
.anomalous-nb-more-btn:hover,
.anomalous-nb-more-btn.active {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
}
.anomalous-nb-dropdown-menu {
@@ -433,7 +433,7 @@
background: rgba(24, 24, 28, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
padding: 4px;
@@ -465,7 +465,7 @@
padding: 8px 12px;
border: none;
background: transparent;
color: #e2e8f0;
color: var(--amb-text-main);
font-size: 0.82rem;
font-weight: 500;
border-radius: 5px;
@@ -478,7 +478,7 @@
.anomalous-nb-dropdown-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
color: var(--amb-text-main);
}
.anomalous-nb-dropdown-item-danger {
@@ -492,7 +492,7 @@
.anomalous-nb-dropdown-item-danger.confirming {
background: #991b1b;
color: #ffffff;
color: var(--amb-text-main);
font-weight: 600;
animation: anomalous-nb-pulse 1s infinite alternate;
}
@@ -507,8 +507,8 @@
}
.anomalous-nb-section {
background: #2a2a2a;
border: 1px solid #444;
background: var(--amb-bg-card-hover);
border: 1px solid var(--amb-border-strong);
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
@@ -519,10 +519,10 @@
}
.anomalous-nb-select {
background: #111;
color: #fff;
background: var(--amb-bg-page);
color: var(--amb-text-main);
padding: 6px;
border: 1px solid #555;
border: 1px solid var(--amb-border-strong);
border-radius: 4px;
}
@@ -549,8 +549,8 @@
align-items: center;
gap: 12px;
padding: 8px 12px 8px 8px;
background: #222630;
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--amb-bg-card-hover);
border: 1px solid var(--amb-border);
border-radius: 8px;
cursor: pointer;
flex: 1 1 220px;
@@ -562,7 +562,7 @@
.anomalous-nb-minicheck:hover,
.anomalous-nb-minilora:hover {
border-color: rgba(255, 255, 255, 0.2);
border-color: var(--amb-border-strong);
background: #2a3140;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
@@ -571,9 +571,9 @@
.anomalous-nb-minicheck.selected,
.anomalous-nb-minilora.selected {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.15);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
border-color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 25%, transparent);
}
.anomalous-nb-minicheck img,
@@ -590,7 +590,7 @@
.anomalous-nb-minicheck-name,
.anomalous-nb-minilora-name {
color: #eee;
color: var(--amb-text-main);
font-size: 0.95em;
line-height: 1.3;
overflow: hidden;
@@ -603,7 +603,7 @@
.anomalous-nb-minicheck.selected .anomalous-nb-minicheck-name,
.anomalous-nb-minilora.selected .anomalous-nb-minilora-name {
color: #8b5cf6;
color: var(--amb-link);
font-weight: bold;
}
@@ -611,9 +611,9 @@
width: 100%;
min-height: 120px;
max-height: 360px;
background: #121316;
color: #f1f5f9;
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--amb-bg-page);
color: var(--amb-text-main);
border: 1px solid var(--amb-border);
border-radius: 6px;
padding: 10px 12px;
margin-top: 6px;
@@ -629,13 +629,13 @@
}
.anomalous-nb-textarea:focus {
border-color: rgba(139, 92, 246, 0.5);
border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
}
/* Flat Card Containers */
.anomalous-nb-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
@@ -649,12 +649,12 @@
margin-bottom: 12px;
font-size: 0.92rem;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-nb-hint {
margin: 0 0 12px 0;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 0.82rem;
line-height: 1.4;
}
@@ -667,7 +667,7 @@
flex-wrap: wrap;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
border-radius: 8px;
scroll-margin-top: 70px;
}
@@ -680,7 +680,7 @@
background: rgba(22, 26, 35, 0.95);
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
box-sizing: border-box;
gap: 6px;
}
@@ -694,8 +694,8 @@
}
.anomalous-nb-gallery-box {
background: #1e1e1e;
border: 1px solid #444;
background: var(--amb-bg-card);
border: 1px solid var(--amb-border-strong);
border-radius: 8px;
padding: 12px;
margin-bottom: 15px;
@@ -715,7 +715,7 @@
/* Notebook Model Fold & Sections Enhancement */
.anomalous-nb-models-fold {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 0;
margin-bottom: 16px;
@@ -724,7 +724,7 @@
}
.anomalous-nb-models-fold[open] {
border-color: rgba(139, 92, 246, 0.35);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
background: rgba(255, 255, 255, 0.03);
}
@@ -737,7 +737,7 @@
cursor: pointer;
font-size: 0.92rem;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
user-select: none;
list-style: none;
transition: background 0.18s;
@@ -754,22 +754,22 @@
.anomalous-nb-models-badge {
font-size: 0.76rem;
font-weight: 500;
color: #94a3b8;
color: var(--amb-text-muted);
background: rgba(255, 255, 255, 0.06);
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
}
.anomalous-nb-fold-arrow {
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 0.88rem;
}
.anomalous-nb-models-fold .anomalous-nb-section {
background: transparent;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--amb-border);
border-radius: 0;
padding: 16px;
margin-bottom: 0;
@@ -777,7 +777,7 @@
.anomalous-nb-prompt-section {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
@@ -785,7 +785,7 @@
.anomalous-nb-capture-fold {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 0;
margin-bottom: 16px;
@@ -797,19 +797,19 @@
cursor: pointer;
font-size: 0.88rem;
font-weight: 500;
color: #94a3b8;
color: var(--amb-text-muted);
list-style: none;
transition: background 0.18s, color 0.18s;
}
.anomalous-nb-capture-fold > summary:hover {
background: rgba(255, 255, 255, 0.05);
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-nb-capture-content {
padding: 12px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--amb-border);
}
.anomalous-nb-tools-fold {
@@ -817,17 +817,17 @@
padding: 8px 12px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
border: 1px solid var(--amb-border);
}
.anomalous-nb-tools-fold > summary {
font-size: 0.82rem;
color: #94a3b8;
color: var(--amb-text-muted);
cursor: pointer;
}
.anomalous-nb-tools-fold > summary:hover {
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-nb-selected-badge {
@@ -835,15 +835,15 @@
padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
}
.anomalous-nb-visual-tag {
background: #222630;
color: #e2e8f0;
background: var(--amb-bg-card-hover);
color: var(--amb-text-main);
padding: 6px 10px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
cursor: pointer;
transition: all 0.18s ease;
min-height: 34px;
@@ -856,8 +856,8 @@
.anomalous-nb-visual-tag.hover {
background: #2a3140;
border-color: rgba(139, 92, 246, 0.5);
color: #ffffff;
border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
color: var(--amb-text-main);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@@ -884,8 +884,8 @@
.anomalous-nb-tag-edit {
background: #111827;
color: #f1f5f9;
border: 1px solid rgba(139, 92, 246, 0.6);
color: var(--amb-text-main);
border: 1px solid color-mix(in srgb, var(--amb-link) 60%, transparent);
border-radius: 4px;
padding: 6px;
width: 100%;
web/styles/03-gallery-recipes.css
+317 -194
View File
File diff suppressed because it is too large Load Diff
web/styles/04-dialogs-materials.css
+169 -169
View File
File diff suppressed because it is too large Load Diff
web/styles/05-recipe-studio-overrides.css
+54 -54
View File
@@ -7,7 +7,7 @@
padding: 16px !important;
border-radius: 14px !important;
background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85)) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border: 1px solid var(--amb-border) !important;
margin-bottom: 16px !important;
backdrop-filter: blur(12px);
}
@@ -18,8 +18,8 @@
height: 220px;
border-radius: 10px;
overflow: hidden;
background: #0d0e11;
border: 1px solid rgba(255, 255, 255, 0.06);
background: var(--amb-bg-page);
border: 1px solid var(--amb-border);
display: flex;
align-items: center;
justify-content: center;
@@ -54,12 +54,12 @@
padding: 8px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
}
.anomalous-recipe-studio-metric-label {
font-size: 0.72rem;
color: #94a3b8;
color: var(--amb-text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
@@ -67,7 +67,7 @@
.anomalous-recipe-studio-metric-val {
font-size: 0.96rem;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -83,14 +83,14 @@
line-height: 1.6;
word-break: break-word;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.07);
color: #cbd5e1;
border: 1px solid var(--amb-border);
color: var(--amb-text-soft);
transition: border-color 0.2s ease, background 0.2s ease;
}
.anomalous-recipe-prompt-box:hover {
background: rgba(255, 255, 255, 0.035);
border-color: rgba(255, 255, 255, 0.12);
border-color: var(--amb-border-strong);
}
.anomalous-recipe-prompt-box.is-positive {
@@ -110,16 +110,16 @@
padding: 0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
border: 1px solid var(--amb-border);
color: var(--amb-text-muted);
cursor: pointer;
transition: all 0.18s ease;
}
.anomalous-recipe-prompt-micro-copy:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
transform: translateY(-1px);
}
@@ -168,8 +168,8 @@
padding: 8px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #f1f5f9;
border: 1px solid var(--amb-border-strong);
color: var(--amb-text-main);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
@@ -179,8 +179,8 @@
.anomalous-preset-btn-primary:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.28);
color: #ffffff;
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
}
.anomalous-preset-btn-secondary {
@@ -191,8 +191,8 @@
padding: 8px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
border: 1px solid var(--amb-border);
color: var(--amb-text-muted);
font-size: 0.82rem;
cursor: pointer;
transition: all 0.15s ease;
@@ -201,8 +201,8 @@
.anomalous-preset-btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
color: #cbd5e1;
border-color: var(--amb-border-strong);
color: var(--amb-text-soft);
}
.anomalous-preset-item-card {
@@ -215,7 +215,7 @@
padding: 10px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.07);
border: 1px solid var(--amb-border);
cursor: pointer;
transition: all 0.15s ease;
margin-bottom: 6px;
@@ -223,7 +223,7 @@
.anomalous-preset-item-card:hover {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.14);
border-color: var(--amb-border-strong);
}
.anomalous-preset-item-card.is-active {
@@ -257,16 +257,16 @@
padding: 2px 7px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
border: 1px solid var(--amb-border);
color: var(--amb-text-muted);
font-size: 0.74rem;
transition: all 0.15s ease;
}
.anomalous-recipe-info-bubble:hover {
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
border-color: rgba(255, 255, 255, 0.16);
color: var(--amb-text-main);
border-color: var(--amb-border-strong);
}
.anomalous-preset-item-main {
@@ -280,7 +280,7 @@
.anomalous-preset-item-title {
font-size: 0.86rem;
font-weight: 500;
color: #cbd5e1;
color: var(--amb-text-soft);
min-width: 0;
flex: 1;
overflow: hidden;
@@ -289,7 +289,7 @@
}
.anomalous-preset-item-card.is-active .anomalous-preset-item-title {
color: #ffffff;
color: var(--amb-text-main);
font-weight: 600;
}
@@ -298,14 +298,14 @@
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-preset-item-badge {
padding: 1px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.08);
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 0.68rem;
font-weight: 500;
}
@@ -332,8 +332,8 @@
padding: 0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #cbd5e1;
border: 1px solid var(--amb-border);
color: var(--amb-text-soft);
cursor: pointer;
font-size: 0.78rem;
line-height: 1;
@@ -343,7 +343,7 @@
.anomalous-preset-item-btn:hover {
background: rgba(255, 255, 255, 0.16);
color: #fff;
color: var(--amb-text-main);
transform: translateY(-1px);
}
@@ -355,8 +355,8 @@
/* Modern Parameter Bento Matrix */
.anomalous-preset-bento-deck {
background: var(--amb-bg-panel, #1C1E24) !important;
border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)) !important;
background: var(--amb-bg-panel, var(--amb-bg-card)) !important;
border: 1px solid var(--amb-border, var(--amb-border)) !important;
border-radius: var(--amb-radius-panel, 12px) !important;
padding: 12px 14px !important;
margin-bottom: 12px !important;
@@ -376,8 +376,8 @@
gap: 4px;
padding: 9px 12px;
border-radius: var(--amb-radius-control, 8px);
background: var(--amb-bg-card, #24262E);
border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.07));
background: var(--amb-bg-card, var(--amb-bg-card-hover));
border: 1px solid var(--amb-border, var(--amb-border));
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
@@ -386,8 +386,8 @@
}
.anomalous-recipe-bento-tile:hover {
background: var(--amb-bg-card-hover, #2d303a);
border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.18));
background: var(--amb-bg-card-hover, var(--amb-bg-card-hover));
border-color: var(--amb-border-hover, var(--amb-border-strong));
transform: translateY(-1px);
}
@@ -402,7 +402,7 @@
display: inline-flex;
align-items: center;
font-size: 0.7rem;
color: #94a3b8;
color: var(--amb-text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 600;
@@ -415,7 +415,7 @@
.anomalous-recipe-bento-val {
font-size: 0.98rem;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
overflow: hidden;
text-overflow: ellipsis;
@@ -431,8 +431,8 @@
.anomalous-recipe-model-highlight-card {
padding: 10px 14px;
border-radius: 8px;
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.2);
background: color-mix(in srgb, var(--amb-link) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--amb-link) 20%, transparent);
min-width: 0;
}
@@ -452,21 +452,21 @@
padding: 8px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
font-size: 0.82rem;
transition: all 0.15s ease;
}
.anomalous-recipe-lora-pill:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(99, 102, 241, 0.3);
border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
transform: translateY(-1px);
}
.anomalous-recipe-lora-name {
flex: 1;
min-width: 0;
color: #e2e8f0;
color: var(--amb-text-main);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
@@ -479,7 +479,7 @@
align-items: center;
gap: 8px;
font-size: 0.72rem;
color: #94a3b8;
color: var(--amb-text-muted);
font-family: ui-monospace, monospace;
}
@@ -492,7 +492,7 @@
padding: 16px 18px;
border-radius: 12px;
background: linear-gradient(145deg, rgba(30, 32, 38, 0.7), rgba(18, 19, 23, 0.85));
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
margin-bottom: 14px;
backdrop-filter: blur(12px);
flex-wrap: wrap;
@@ -516,7 +516,7 @@
.anomalous-preset-console-title {
font-size: 1.15rem;
font-weight: 600;
color: #f8fafc;
color: var(--amb-text-main);
margin: 0;
min-width: 0;
overflow: hidden;
@@ -537,7 +537,7 @@
height: 80px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
cursor: pointer;
flex-shrink: 0;
align-self: flex-start;
@@ -548,7 +548,7 @@
.anomalous-preset-compact-gallery:hover {
transform: scale(1.03);
border-color: rgba(99, 102, 241, 0.5);
border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
}
.anomalous-preset-compact-gallery img {
@@ -565,7 +565,7 @@
padding: 2px 6px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
color: var(--amb-text-main);
font-size: 0.68rem;
backdrop-filter: blur(4px);
white-space: nowrap;
@@ -579,7 +579,7 @@
padding: 10px 0;
background: rgba(32, 32, 32, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--amb-border);
margin-bottom: 12px;
display: flex;
align-items: center;
web/styles/06-material-workbench.css
+201 -201
View File
File diff suppressed because it is too large Load Diff
web/styles/07-prompt-studio.css
+170 -170
View File
File diff suppressed because it is too large Load Diff
web/styles/08-theme-gallery-overrides.css
+14 -14
View File
@@ -480,13 +480,13 @@ button:hover .anomalous-btn-icon {
transform: translateX(-50%) translateY(4px);
padding: 6px 12px;
background: rgba(18, 20, 26, 0.98);
color: #f1f5f9;
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 rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
opacity: 0;
pointer-events: none;
@@ -691,7 +691,7 @@ button:hover .anomalous-btn-icon {
align-items: center !important;
justify-content: space-between !important;
padding: 0 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !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;
@@ -735,7 +735,7 @@ button:hover .anomalous-btn-icon {
box-sizing: border-box !important;
background: rgba(255, 255, 255, 0.04) !important;
color: #c0c4cc !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border: 1px solid var(--amb-border) !important;
border-radius: 6px !important;
cursor: pointer;
white-space: nowrap;
@@ -752,16 +752,16 @@ button:hover .anomalous-btn-icon {
#anomalous-header button:hover {
background: rgba(255, 255, 255, 0.09) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !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(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.28) !important;
color: #ffffff !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;
}
@@ -783,13 +783,13 @@ button:hover .anomalous-btn-icon {
justify-content: center !important;
border-radius: 6px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border: 1px solid var(--amb-border) !important;
}
#anomalous-dock-btn:hover {
background: rgba(255, 255, 255, 0.09) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
border-color: var(--amb-border-strong) !important;
color: var(--amb-text-main) !important;
}
#anomalous-dock-btn svg {
@@ -878,7 +878,7 @@ button:hover .anomalous-btn-icon {
width: 100%;
height: 100%;
overflow: hidden;
background: #0d1117;
background: var(--amb-bg-page);
position: relative;
}
@@ -911,8 +911,8 @@ button:hover .anomalous-btn-icon {
.anomalous-recipe-topbar-close {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #94a3b8 !important;
border: 1px solid var(--amb-border-strong) !important;
color: var(--amb-text-muted) !important;
padding: 4px 10px !important;
font-size: 0.88rem !important;
cursor: pointer;
web/styles/09-prompt-drawers.css
+96 -96
View File
@@ -6,8 +6,8 @@
.anomalous-mixer-block-btn.is-translate:hover {
opacity: 1;
color: #38bdf8;
background: rgba(56, 189, 248, 0.18);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
}
/* ==========================================================================
@@ -31,8 +31,8 @@
width: 580px;
max-width: 90vw;
height: 100vh;
background: var(--amb-bg-page, #121316);
border-left: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
background: var(--amb-bg-page, var(--amb-bg-page));
border-left: 1px solid var(--amb-border, var(--amb-border-strong));
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
pointer-events: auto;
display: flex;
@@ -45,7 +45,7 @@
right: auto;
left: 0;
border-left: none;
border-right: 1px solid var(--amb-border, rgba(255, 255, 255, 0.12));
border-right: 1px solid var(--amb-border, var(--amb-border-strong));
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6);
}
@@ -68,8 +68,8 @@
.anomalous-studio-resize-handle:hover,
.anomalous-studio-resize-handle.is-resizing {
background: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
background: var(--amb-btn-primary-hover);
box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 60%, transparent);
}
/* Drawer Workbench Base */
@@ -115,7 +115,7 @@
.anomalous-prompt-studio-drawer.is-dock-left .anomalous-workbench-left-panel {
order: 1 !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
border-right: 1px solid var(--amb-border) !important;
}
.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-left-panel {
@@ -141,7 +141,7 @@
.anomalous-prompt-studio-drawer:not(.is-dock-left) .anomalous-workbench-right-panel {
order: 1 !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
border-right: 1px solid var(--amb-border) !important;
border-left: none !important;
}
@@ -162,13 +162,13 @@
gap: 5px;
font-size: 0.84rem;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
white-space: nowrap;
}
.anomalous-workbench-col-title .anomalous-sub-counter {
font-size: 0.72rem;
color: #64748b;
color: var(--amb-text-dim);
font-weight: normal;
}
@@ -187,17 +187,17 @@
height: 24px;
padding: 0;
border-radius: 5px;
color: #94a3b8;
color: var(--amb-text-muted);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
cursor: pointer;
transition: all 0.15s ease;
}
.anomalous-workbench-header-actions button.anomalous-icon-btn:hover {
color: #ffffff;
background: rgba(56, 189, 248, 0.18);
border-color: rgba(56, 189, 248, 0.4);
color: var(--amb-text-main);
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
}
/* Category Pills: 5 equal 2-char chips */
@@ -214,9 +214,9 @@
text-align: center;
padding: 3px 0;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
background: rgba(255, 255, 255, 0.03);
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 0.72rem;
cursor: pointer;
transition: all 0.15s ease;
@@ -225,14 +225,14 @@
}
.anomalous-workbench-pill:hover {
color: #f1f5f9;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.08);
}
.anomalous-workbench-pill.is-active {
color: #38bdf8;
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.4);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
font-weight: 600;
}
@@ -252,7 +252,7 @@
gap: 7px;
padding: 6px 9px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-left: 3px solid #64748b;
border-radius: 6px;
cursor: pointer;
@@ -263,7 +263,7 @@
}
.anomalous-source-card-compact.is-cat-base {
border-left-color: #38bdf8 !important;
border-left-color: var(--amb-link) !important;
}
.anomalous-source-card-compact.is-cat-style {
@@ -281,15 +281,15 @@
.anomalous-source-card-compact:hover,
.anomalous-source-card-compact.is-preview-active {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.22);
border-color: var(--amb-border-strong);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
transform: translateX(2px);
}
.anomalous-source-card-compact.is-cat-base:hover,
.anomalous-source-card-compact.is-cat-base.is-preview-active {
border-color: rgba(56, 189, 248, 0.4);
background: rgba(56, 189, 248, 0.12);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
}
.anomalous-source-card-compact.is-cat-style:hover,
@@ -326,7 +326,7 @@
.anomalous-source-origin,
.anomalous-source-sync-status {
color: var(--amb-text-muted, #94a3b8);
color: var(--amb-text-muted, var(--amb-text-muted));
font-size: 0.68rem;
overflow-wrap: anywhere;
}
@@ -338,7 +338,7 @@
.anomalous-source-card-name {
font-size: 0.76rem;
font-weight: 500;
color: #f1f5f9;
color: var(--amb-text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -347,12 +347,12 @@
.anomalous-source-card-compact:hover .anomalous-source-card-name,
.anomalous-source-card-compact.is-preview-active .anomalous-source-card-name {
color: #ffffff;
color: var(--amb-text-main);
}
.anomalous-source-card-add-icon {
font-size: 0.72rem;
color: #64748b;
color: var(--amb-text-dim);
opacity: 0;
transition: opacity 0.15s;
flex-shrink: 0;
@@ -363,8 +363,8 @@
.anomalous-source-card-compact:hover .anomalous-source-card-add-icon,
.anomalous-source-card-compact.is-preview-active .anomalous-source-card-add-icon {
opacity: 1;
color: #38bdf8;
background: rgba(56, 189, 248, 0.18);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
}
/* Eye-Catching Prompt Card Hover Preview Popover (Replaces unstyled browser tooltip) */
@@ -376,9 +376,9 @@
background: rgba(18, 20, 26, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.35);
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.18);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px color-mix(in srgb, var(--amb-link) 18%, transparent);
display: flex;
flex-direction: column;
overflow: visible;
@@ -392,17 +392,17 @@
}
.anomalous-card-preview-popover.is-pinned {
border-color: #38bdf8 !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(56, 189, 248, 0.35) !important;
border-color: var(--amb-link) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px color-mix(in srgb, var(--amb-link) 35%, transparent) !important;
}
.anomalous-popover-copy-btn,
.anomalous-popover-pin-btn,
.anomalous-popover-add-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 4px;
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 0.7rem;
font-weight: 500;
padding: 2px 7px;
@@ -413,22 +413,22 @@
.anomalous-popover-copy-btn:hover,
.anomalous-popover-pin-btn:hover {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
color: var(--amb-link);
}
.anomalous-popover-pin-btn.is-active {
background: rgba(56, 189, 248, 0.25) !important;
border-color: #38bdf8 !important;
color: #38bdf8 !important;
background: color-mix(in srgb, var(--amb-link) 25%, transparent) !important;
border-color: var(--amb-link) !important;
color: var(--amb-link) !important;
font-weight: 600;
}
.anomalous-popover-close-btn {
background: transparent;
border: 1px solid transparent;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 0.75rem;
padding: 1px 6px;
cursor: pointer;
@@ -444,15 +444,15 @@
}
.anomalous-popover-add-btn {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.35);
color: #38bdf8;
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
color: var(--amb-link);
}
.anomalous-popover-add-btn:hover {
background: rgba(56, 189, 248, 0.28);
border-color: rgba(56, 189, 248, 0.6);
color: #ffffff;
background: color-mix(in srgb, var(--amb-link) 28%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
color: var(--amb-text-main);
}
@keyframes anmPopoverIn {
@@ -463,7 +463,7 @@
.anomalous-popover-header {
padding: 10px 12px 6px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid var(--amb-border);
display: flex;
flex-direction: column;
gap: 4px;
@@ -493,9 +493,9 @@
}
.anomalous-popover-role.is-positive {
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.35);
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
color: var(--amb-link);
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
}
.anomalous-popover-role.is-negative {
@@ -507,7 +507,7 @@
.anomalous-popover-title {
font-size: 0.86rem;
font-weight: 600;
color: #f8fafc;
color: var(--amb-text-main);
line-height: 1.35;
word-break: break-word;
}
@@ -520,9 +520,9 @@
margin: 0;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 6px;
color: #38bdf8;
color: var(--amb-link);
font-family: Consolas, Monaco, "Courier New", monospace;
font-size: 0.76rem;
line-height: 1.45;
@@ -535,11 +535,11 @@
.anomalous-popover-footer {
padding: 6px 12px 7px;
font-size: 0.7rem;
color: #94a3b8;
color: var(--amb-text-muted);
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.04);
border-top: 1px solid var(--amb-border);
}
/* Assembly Dropzone Notice */
@@ -551,10 +551,10 @@
flex: 1;
min-height: 260px;
padding: 40px 20px;
border: 1px dashed rgba(255, 255, 255, 0.1);
border: 1px dashed var(--amb-border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.015);
color: #64748b;
color: var(--amb-text-dim);
text-align: center;
box-sizing: border-box;
transition: all 0.2s ease;
@@ -562,8 +562,8 @@
.anomalous-assembly-dropzone:hover,
.anomalous-assembly-dropzone.is-drag-over {
border-color: rgba(56, 189, 248, 0.4);
background: rgba(56, 189, 248, 0.04);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
background: color-mix(in srgb, var(--amb-link) 4%, transparent);
}
/* Weight Wheel Pill in Assembled Blocks */
@@ -571,12 +571,12 @@
display: inline-flex;
align-items: center;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 12px;
padding: 0 4px;
font-size: 0.72rem;
font-family: monospace, sans-serif;
color: #38bdf8;
color: var(--amb-link);
cursor: ns-resize;
user-select: none;
gap: 2px;
@@ -584,14 +584,14 @@
}
.anomalous-block-weight-pill:hover {
border-color: #38bdf8;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
border-color: var(--amb-link);
box-shadow: 0 0 8px color-mix(in srgb, var(--amb-link) 30%, transparent);
}
.anomalous-block-weight-btn {
background: transparent;
border: none;
color: #94a3b8;
color: var(--amb-text-muted);
cursor: pointer;
font-size: 0.7rem;
padding: 0 2px;
@@ -600,7 +600,7 @@
}
.anomalous-block-weight-btn:hover {
color: #fff;
color: var(--amb-text-main);
}
/* Floating Action Dock (Slides up only when blocks exist) */
@@ -612,9 +612,9 @@
height: 38px;
background: rgba(22, 25, 32, 0.94);
backdrop-filter: blur(16px);
border: 1px solid rgba(56, 189, 248, 0.35);
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
border-radius: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(56, 189, 248, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px color-mix(in srgb, var(--amb-link) 18%, transparent);
display: flex;
align-items: center;
justify-content: space-between;
@@ -629,7 +629,7 @@
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: #94a3b8;
color: var(--amb-text-muted);
white-space: nowrap;
}
@@ -660,8 +660,8 @@
max-width: 92vw;
height: 520px;
max-height: 88vh;
background: var(--amb-bg-panel, #181a20);
border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.16));
background: var(--amb-bg-panel, var(--amb-bg-panel));
border: 1px solid var(--amb-border, var(--amb-border-strong));
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.2);
display: flex;
@@ -676,7 +676,7 @@
justify-content: space-between;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--amb-border);
}
.anomalous-inspector-body {
@@ -693,9 +693,9 @@
width: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 8px;
color: #e2e8f0;
color: var(--amb-text-main);
font-family: Consolas, Monaco, "Courier New", monospace;
font-size: 0.88rem;
line-height: 1.6;
@@ -706,8 +706,8 @@
}
.anomalous-inspector-textarea:focus {
border-color: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
border-color: var(--amb-link);
box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 25%, transparent);
}
.anomalous-inspector-footer {
@@ -716,7 +716,7 @@
justify-content: space-between;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.03);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--amb-border);
}
@keyframes anmScaleUp {
@@ -742,9 +742,9 @@
}
.anomalous-card-role-tag.is-positive {
color: #38bdf8;
background: rgba(56, 189, 248, 0.14);
border: 1px solid rgba(56, 189, 248, 0.28);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--amb-link) 28%, transparent);
}
.anomalous-card-role-tag.is-negative {
@@ -754,10 +754,10 @@
}
.anomalous-mixer-tab-btn.is-role-positive.is-active {
background: rgba(56, 189, 248, 0.16) !important;
color: #38bdf8 !important;
border: 1px solid rgba(56, 189, 248, 0.35) !important;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important;
background: color-mix(in srgb, var(--amb-link) 16%, transparent) !important;
color: var(--amb-link) !important;
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent) !important;
box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 15%, transparent) !important;
}
.anomalous-mixer-tab-btn.is-role-negative.is-active {
@@ -774,8 +774,8 @@
}
.anomalous-mixer-block.is-role-positive.is-cross-role {
border-color: rgba(56, 189, 248, 0.45);
background: rgba(56, 189, 248, 0.05);
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 5%, transparent);
}
.anomalous-mixer-role-badge {
@@ -808,9 +808,9 @@
}
.anomalous-mixer-role-badge.is-positive {
color: #38bdf8;
background: rgba(56, 189, 248, 0.14);
border-color: rgba(56, 189, 248, 0.28);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 28%, transparent);
}
.anomalous-mixer-role-badge.is-negative {
@@ -830,8 +830,8 @@
}
.anomalous-mixer-block-btn.is-transfer:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.15);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
}
/* ========================================================================= */
web/styles/10-model-sources.css
+69 -69
View File
@@ -19,19 +19,19 @@
width: 880px;
max-width: 96vw;
max-height: 88vh;
background: #0e1017;
background: var(--amb-bg-page);
border: 1px solid rgba(244, 63, 94, 0.35);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 32px rgba(190, 20, 55, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
color: #e2e8f0;
color: var(--amb-text-main);
}
.anomalous-sources-header {
padding: 14px 18px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--amb-border);
background: rgba(18, 20, 28, 0.9);
flex-shrink: 0;
}
@@ -47,13 +47,13 @@
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-sources-close-btn {
background: transparent;
border: none;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 1.1rem;
cursor: pointer;
padding: 4px 8px;
@@ -62,7 +62,7 @@
}
.anomalous-sources-close-btn:hover {
color: #fff;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.1);
}
@@ -75,7 +75,7 @@
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #94a3b8;
color: var(--amb-text-muted);
padding: 8px 16px;
font-size: 0.88rem;
font-weight: 500;
@@ -87,12 +87,12 @@
}
.anomalous-sources-scope-tab:hover {
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-sources-scope-tab.is-active {
color: #38bdf8;
border-bottom-color: #38bdf8;
color: var(--amb-link);
border-bottom-color: var(--amb-link);
font-weight: 600;
}
@@ -101,7 +101,7 @@
padding: 1px 6px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-sources-filter-bar {
@@ -110,7 +110,7 @@
justify-content: space-between;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid var(--amb-border);
background: rgba(14, 16, 23, 0.95);
flex-shrink: 0;
}
@@ -122,8 +122,8 @@
.anomalous-sources-pill {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
border: 1px solid var(--amb-border);
color: var(--amb-text-muted);
border-radius: 16px;
padding: 3px 10px;
font-size: 0.78rem;
@@ -132,22 +132,22 @@
}
.anomalous-sources-pill:hover {
color: #f1f5f9;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.08);
}
.anomalous-sources-pill.is-active {
background: rgba(56, 189, 248, 0.18);
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
color: var(--amb-link);
font-weight: 600;
}
.anomalous-sources-search-input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 6px;
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 0.8rem;
padding: 5px 10px;
width: 220px;
@@ -156,7 +156,7 @@
}
.anomalous-sources-search-input:focus {
border-color: #38bdf8;
border-color: var(--amb-link);
}
.anomalous-sources-body {
@@ -170,7 +170,7 @@
.anomalous-source-row-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border: 1px solid var(--amb-border);
border-radius: 8px;
padding: 10px 14px;
display: flex;
@@ -206,7 +206,7 @@
.anomalous-source-model-name {
font-size: 0.88rem;
color: #f1f5f9;
color: var(--amb-text-main);
word-break: break-all;
}
@@ -216,7 +216,7 @@
border-radius: 4px;
background: rgba(148, 163, 184, 0.08);
border: 1px solid rgba(148, 163, 184, 0.2);
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-source-badge-danger {
@@ -230,7 +230,7 @@
.anomalous-source-hash-chip {
font-size: 0.72rem;
color: #64748b;
color: var(--amb-text-dim);
margin-left: auto;
font-family: monospace;
}
@@ -251,9 +251,9 @@
.anomalous-source-url-input {
width: 100%;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 6px;
color: #e2e8f0;
color: var(--amb-text-main);
font-size: 0.82rem;
padding: 6px 10px;
padding-right: 96px;
@@ -263,26 +263,26 @@
}
.anomalous-source-url-input:focus {
border-color: #38bdf8;
border-color: var(--amb-link);
background: rgba(0, 0, 0, 0.6);
}
.anomalous-source-url-input.is-locked {
background: rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.07);
color: #94a3b8;
border-color: var(--amb-border);
color: var(--amb-text-muted);
cursor: default;
}
.anomalous-source-url-input.is-locked:hover {
border-color: rgba(255, 255, 255, 0.18);
border-color: var(--amb-border-strong);
}
.anomalous-source-url-input.is-editing {
border-color: #f59e0b;
background: rgba(245, 158, 11, 0.08);
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
color: #f8fafc;
color: var(--amb-text-main);
}
.anomalous-source-edit-badge {
@@ -299,7 +299,7 @@
.anomalous-btn-save-local {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
border-color: rgba(245, 158, 11, 0.6) !important;
color: #fff !important;
color: var(--amb-text-main) !important;
font-weight: 600;
animation: anomalousSourcesPulse 1.6s ease-in-out infinite;
}
@@ -328,9 +328,9 @@
}
.anomalous-btn-jump {
background: linear-gradient(135deg, #0284c7, #0369a1);
border: 1px solid rgba(56, 189, 248, 0.4);
color: #fff;
background: linear-gradient(135deg, var(--amb-link), #0369a1);
border: 1px solid color-mix(in srgb, var(--amb-link) 40%, transparent);
color: var(--amb-text-main);
}
.anomalous-btn-jump:disabled {
@@ -340,7 +340,7 @@
.anomalous-sources-footer {
padding: 10px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--amb-border);
background: rgba(18, 20, 28, 0.95);
display: flex;
align-items: center;
@@ -350,7 +350,7 @@
.anomalous-sources-footer-stats {
font-size: 0.82rem;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-sources-footer-actions {
@@ -361,16 +361,16 @@
.anomalous-sources-empty {
padding: 40px 20px;
text-align: center;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 0.9rem;
}
.anomalous-sources-library-hint {
padding: 8px 12px;
margin-bottom: 8px;
color: var(--amb-text-secondary, #94a3b8);
color: var(--amb-text-secondary, var(--amb-text-muted));
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
border-radius: 7px;
font-size: 0.78rem;
}
@@ -384,7 +384,7 @@
gap: 10px;
margin-top: 8px;
padding: 11px 12px;
color: var(--amb-text-secondary, #cbd5e1);
color: var(--amb-text-secondary, var(--amb-text-soft));
background: rgba(148, 163, 184, 0.07);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
@@ -394,12 +394,12 @@
}
.anomalous-sources-components-toggle:hover {
color: #f1f5f9;
color: var(--amb-text-main);
background: rgba(148, 163, 184, 0.11);
}
.anomalous-sources-components-toggle:focus-visible {
outline: 2px solid var(--amb-accent, #38bdf8);
outline: 2px solid var(--amb-accent, var(--amb-link));
outline-offset: 2px;
}
@@ -410,7 +410,7 @@
}
.anomalous-sources-components-label small {
color: var(--amb-text-muted, #64748b);
color: var(--amb-text-muted, var(--amb-text-dim));
font-size: 0.7rem;
font-weight: 400;
}
@@ -422,7 +422,7 @@
.anomalous-sources-components-empty {
padding: 14px 10px;
color: #64748b;
color: var(--amb-text-dim);
font-size: 0.8rem;
}
@@ -435,8 +435,8 @@
min-width: 32px;
padding: 0 !important;
background: transparent !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: var(--amb-text-primary, #e2e8f0) !important;
border-color: var(--amb-border-strong) !important;
color: var(--amb-text-primary, var(--amb-text-main)) !important;
}
#anomalous-header button.anomalous-update-notice-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
@@ -454,8 +454,8 @@
#anomalous-help-replay-guide-btn {
padding: 8px 14px;
background: rgba(255, 255, 255, 0.05);
color: #cbd5e1;
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--amb-text-soft);
border: 1px solid var(--amb-border-strong);
border-radius: 4px;
cursor: pointer;
font-size: 12px;
@@ -463,13 +463,13 @@
}
#anomalous-help-replay-guide-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
}
#anomalous-update-notice-btn:focus-visible,
#anomalous-help-replay-guide-btn:focus-visible,
.anomalous-update-guide button:focus-visible {
outline: 2px solid var(--amb-accent, #38bdf8);
outline: 2px solid var(--amb-accent, var(--amb-link));
outline-offset: 2px;
}
@@ -494,13 +494,13 @@ dialog.anomalous-update-guide {
height: fit-content;
max-height: 85vh;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
border-radius: 16px;
background: linear-gradient(145deg, rgba(28, 30, 38, 0.98), rgba(16, 18, 24, 0.98));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.12);
color: #f1f5f9;
color: var(--amb-text-main);
outline: none;
overflow-y: auto;
box-sizing: border-box;
@@ -539,17 +539,17 @@ dialog.anomalous-update-guide::backdrop {
justify-content: space-between;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--amb-border);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-update-guide-close {
background: transparent;
border: none;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
@@ -559,7 +559,7 @@ dialog.anomalous-update-guide::backdrop {
}
.anomalous-update-guide-close:hover {
color: #ffffff;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.1);
}
@@ -569,13 +569,13 @@ dialog.anomalous-update-guide::backdrop {
margin: 24px auto 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #f1f5f9;
color: var(--amb-text-main);
user-select: none;
flex-shrink: 0;
}
@@ -584,7 +584,7 @@ dialog.anomalous-update-guide::backdrop {
margin: 0 24px 10px;
font-size: 17px;
font-weight: 600;
color: #ffffff;
color: var(--amb-text-main);
text-align: center;
letter-spacing: 0.2px;
}
@@ -593,7 +593,7 @@ dialog.anomalous-update-guide::backdrop {
margin: 0 24px 16px;
font-size: 13px;
line-height: 1.65;
color: #cbd5e1;
color: var(--amb-text-soft);
text-align: center;
min-height: 60px;
}
@@ -601,7 +601,7 @@ dialog.anomalous-update-guide::backdrop {
.anomalous-update-guide-progress {
margin: 0 24px 20px;
font-size: 11px;
color: #64748b;
color: var(--amb-text-dim);
text-align: center;
font-weight: 500;
letter-spacing: 0.4px;
@@ -614,7 +614,7 @@ dialog.anomalous-update-guide::backdrop {
flex-wrap: wrap;
padding: 14px 20px;
background: rgba(0, 0, 0, 0.28);
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--amb-border);
gap: 10px;
}
@@ -622,17 +622,17 @@ dialog.anomalous-update-guide::backdrop {
padding: 7px 15px;
font-size: 12px;
border-radius: 6px;
color: #94a3b8;
color: var(--amb-text-muted);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
cursor: pointer;
transition: all 0.15s ease;
}
.anomalous-update-guide-footer .anomalous-btn-ghost:hover:not(:disabled) {
color: #ffffff;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
border-color: var(--amb-border-strong);
}
.anomalous-update-guide-footer .anomalous-btn-ghost:disabled {
web/styles/11-audio-studio.css
+133 -133
View File
@@ -44,7 +44,7 @@
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid var(--amb-border);
flex-shrink: 0;
}
@@ -62,21 +62,21 @@
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
border: 1px solid var(--amb-border);
color: var(--amb-text-soft);
box-shadow: none;
}
.anomalous-audio-title-text {
font-size: 15px;
font-weight: 600;
color: #f8fafc;
color: var(--amb-text-main);
letter-spacing: 0.3px;
}
.anomalous-audio-sub-text {
font-size: 12px;
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-audio-title-stack {
@@ -96,17 +96,17 @@
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 8px;
padding: 4px 10px;
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-audio-search input {
background: transparent;
border: none;
outline: none;
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 12px;
width: 140px;
}
@@ -117,9 +117,9 @@
gap: 6px;
padding: 5px 12px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
background: rgba(255, 255, 255, 0.05);
color: #d1d5db;
color: var(--amb-text-soft);
font-size: 12px;
font-weight: 500;
cursor: pointer;
@@ -129,13 +129,13 @@
.anomalous-audio-tool-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
border-color: var(--amb-border-strong);
}
.anomalous-audio-tool-btn.active {
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
border-color: rgba(56, 189, 248, 0.3);
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
color: var(--amb-link);
border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
}
.anomalous-audio-tool-btn:disabled {
@@ -146,7 +146,7 @@
.anomalous-audio-status {
padding: 40px 20px;
text-align: center;
color: #64748b;
color: var(--amb-text-dim);
font-size: 12px;
}
@@ -157,7 +157,7 @@
.anomalous-audio-empty {
padding: 70px 20px;
text-align: center;
color: #64748b;
color: var(--amb-text-dim);
font-size: 13px;
}
@@ -169,7 +169,7 @@
}
.anomalous-audio-empty-title {
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
@@ -191,7 +191,7 @@
.anomalous-character-voice-card {
background: rgba(18, 18, 23, 0.75);
border: 1px solid rgba(255, 255, 255, 0.07);
border: 1px solid var(--amb-border);
border-radius: 12px;
padding: 16px;
display: flex;
@@ -203,8 +203,8 @@
}
.anomalous-character-voice-card:hover {
border-color: rgba(99, 102, 241, 0.25);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(99, 102, 241, 0.08);
border-color: color-mix(in srgb, var(--amb-link) 25%, transparent);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 15px color-mix(in srgb, var(--amb-link) 8%, transparent);
}
.anomalous-voice-slice-row {
@@ -214,13 +214,13 @@
padding: 8px 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border: 1px solid var(--amb-border);
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.anomalous-voice-slice-row:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
border-color: var(--amb-border-strong);
}
.anomalous-character-voice-header {
@@ -244,11 +244,11 @@
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
color: var(--amb-text-muted);
flex-shrink: 0;
}
@@ -261,20 +261,20 @@
.anomalous-character-voice-name {
font-size: 14px;
font-weight: 600;
color: #f8fafc;
color: var(--amb-text-main);
overflow-wrap: anywhere;
}
.anomalous-character-voice-folder {
font-size: 11px;
font-weight: 400;
color: #818cf8;
color: var(--amb-link);
}
.anomalous-character-voice-hint {
overflow: hidden;
font-size: 11px;
color: #64748b;
color: var(--amb-text-dim);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -284,8 +284,8 @@
padding: 3px 8px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
border: 1px solid var(--amb-border);
color: var(--amb-text-muted);
white-space: nowrap;
}
@@ -315,11 +315,11 @@
.anomalous-eq-bar {
width: 2px;
border-radius: 1px;
background: #38bdf8;
background: var(--amb-btn-primary-bg);
}
.anomalous-eq-bar-2 {
background: #818cf8;
background: var(--amb-btn-primary-bg);
}
.anomalous-voice-emotion-tag {
@@ -335,7 +335,7 @@
flex: 1;
min-width: 0;
font-size: 12px;
color: #cbd5e1;
color: var(--amb-text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -347,9 +347,9 @@
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
background: rgba(0, 0, 0, 0.3);
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11px;
font-family: monospace;
cursor: pointer;
@@ -370,26 +370,26 @@
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
color: var(--amb-text-soft);
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s ease;
}
.anomalous-audio-play-btn:hover {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
color: var(--amb-link);
transform: scale(1.06);
}
.anomalous-audio-play-btn.is-playing {
background: rgba(56, 189, 248, 0.2);
border-color: #38bdf8;
color: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
border-color: var(--amb-link);
color: var(--amb-link);
box-shadow: 0 0 10px color-mix(in srgb, var(--amb-link) 30%, transparent);
}
/* Audio Gallery Tracks */
@@ -400,7 +400,7 @@
padding: 10px 14px;
border-radius: 10px;
background: rgba(22, 22, 28, 0.7);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
backdrop-filter: blur(14px);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
@@ -408,7 +408,7 @@
.anomalous-audio-track-item:hover {
background: rgba(28, 28, 36, 0.85);
border-color: rgba(129, 140, 248, 0.3);
border-color: color-mix(in srgb, var(--amb-link) 30%, transparent);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
@@ -471,9 +471,9 @@
font-size: 10px;
padding: 1px 7px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.18);
border: 1px solid rgba(129, 140, 248, 0.35);
color: #c7d2fe;
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--amb-link) 35%, transparent);
color: var(--amb-text-main);
white-space: nowrap;
flex-shrink: 0;
}
@@ -493,7 +493,7 @@
text-align: left;
font: inherit;
font-size: 13px;
color: #e2e8f0;
color: var(--amb-text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -501,7 +501,7 @@
}
.anomalous-track-speech.is-expanded .anomalous-track-speech-summary {
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-track-speech-full {
@@ -512,7 +512,7 @@
padding: 8px 10px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
}
.anomalous-track-speech-line {
@@ -521,7 +521,7 @@
gap: 8px;
font-size: 12px;
line-height: 1.6;
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-audio-play-btn.is-done {
@@ -569,7 +569,7 @@
.anomalous-track-previews-hint {
font-size: 11px;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-track-list-section {
@@ -581,7 +581,7 @@
.anomalous-track-name {
font-size: 13px;
font-weight: 500;
color: #f1f5f9;
color: var(--amb-text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -593,19 +593,19 @@
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-track-folder {
background: rgba(99, 102, 241, 0.12);
color: #818cf8;
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-link);
padding: 1px 5px;
border-radius: 3px;
}
.anomalous-track-time {
font-size: 11px;
color: #94a3b8;
color: var(--amb-text-muted);
font-family: monospace;
min-width: 90px;
text-align: right;
@@ -629,7 +629,7 @@
.anomalous-track-count {
font-size: 11px;
color: #94a3b8;
color: var(--amb-text-muted);
background: rgba(255, 255, 255, 0.05);
padding: 3px 8px;
border-radius: 12px;
@@ -642,7 +642,7 @@
.anomalous-track-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #38bdf8, #818cf8);
background: linear-gradient(90deg, var(--amb-link), var(--amb-link));
border-radius: 2px;
transition: width 0.1s linear;
}
@@ -653,11 +653,11 @@
justify-content: space-between;
align-items: center;
padding: 12px 14px 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid var(--amb-border);
}
.anomalous-audio-sidebar-title {
color: #f1f5f9;
color: var(--amb-text-main);
margin: 0;
font-size: 12px;
font-weight: 600;
@@ -669,13 +669,13 @@
.anomalous-audio-sidebar-title-icon {
display: inline-flex;
color: #818cf8;
color: var(--amb-link);
}
.anomalous-audio-sidebar-refresh {
background: transparent;
border: none;
color: #94a3b8;
color: var(--amb-text-muted);
cursor: pointer;
padding: 4px;
border-radius: 4px;
@@ -685,7 +685,7 @@
}
.anomalous-audio-sidebar-refresh:hover {
color: #f1f5f9;
color: var(--amb-text-main);
background: rgba(255, 255, 255, 0.06);
}
@@ -701,7 +701,7 @@
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-audio-nav-section.is-error {
@@ -725,7 +725,7 @@
font: inherit;
font-size: 12px;
text-align: left;
color: #cbd5e1;
color: var(--amb-text-soft);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
@@ -745,26 +745,26 @@
.anomalous-audio-nav-count {
font-size: 10px;
color: #64748b;
color: var(--amb-text-dim);
background: rgba(255, 255, 255, 0.05);
padding: 1px 6px;
border-radius: 8px;
}
.anomalous-audio-nav-item.active .anomalous-audio-nav-count {
color: #818cf8;
background: rgba(99, 102, 241, 0.2);
color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
}
.anomalous-audio-nav-item:hover {
background: rgba(255, 255, 255, 0.04);
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-audio-nav-item.active {
background: rgba(99, 102, 241, 0.14);
color: #818cf8;
border-left-color: #818cf8;
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
color: var(--amb-link);
border-left-color: var(--amb-link);
font-weight: 600;
}
@@ -775,10 +775,10 @@
gap: 6px;
margin: 8px 12px 0;
padding: 5px 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 8px;
background: rgba(0, 0, 0, 0.25);
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-audio-sidebar-search input {
@@ -787,7 +787,7 @@
border: none;
outline: none;
background: transparent;
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 12px;
}
@@ -808,7 +808,7 @@
border: none;
border-radius: 6px;
background: transparent;
color: #94a3b8;
color: var(--amb-text-muted);
font: inherit;
font-size: 11px;
font-weight: 600;
@@ -817,12 +817,12 @@
.anomalous-audio-nav-bucket-head:hover {
background: rgba(255, 255, 255, 0.04);
color: #e2e8f0;
color: var(--amb-text-main);
}
.anomalous-audio-nav-bucket-count {
margin-left: auto;
color: #64748b;
color: var(--amb-text-dim);
font-size: 10px;
font-weight: 500;
}
@@ -830,7 +830,7 @@
.anomalous-audio-nav-chevron {
display: inline-flex;
flex-shrink: 0;
color: #64748b;
color: var(--amb-text-dim);
transition: transform 0.15s ease;
}
@@ -858,7 +858,7 @@
.anomalous-audio-nav-item > .anomalous-audio-nav-chevron:hover {
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
color: var(--amb-text-main);
}
.anomalous-audio-nav-item .anomalous-audio-nav-label {
@@ -877,7 +877,7 @@
display: flex;
flex-direction: column;
margin: 0 8px 4px 30px;
border-left: 1px solid rgba(255, 255, 255, 0.06);
border-left: 1px solid var(--amb-border);
}
.anomalous-audio-nav-clip {
@@ -889,7 +889,7 @@
border: none;
border-radius: 0 6px 6px 0;
background: transparent;
color: #94a3b8;
color: var(--amb-text-muted);
font: inherit;
font-size: 11px;
text-align: left;
@@ -898,44 +898,44 @@
.anomalous-audio-nav-clip:hover {
background: rgba(255, 255, 255, 0.04);
color: #e2e8f0;
color: var(--amb-text-main);
}
.anomalous-audio-nav-clip-play {
display: inline-flex;
flex-shrink: 0;
color: #818cf8;
color: var(--amb-link);
}
.anomalous-audio-nav-clip-tag {
flex-shrink: 0;
color: #c4b5fd;
color: var(--amb-link);
font-weight: 600;
}
.anomalous-audio-nav-clip-text {
min-width: 0;
overflow: hidden;
color: #64748b;
color: var(--amb-text-dim);
text-overflow: ellipsis;
white-space: nowrap;
}
.anomalous-audio-nav-empty {
padding: 10px 16px;
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
}
.anomalous-audio-nav-list.is-file-dragover {
outline: 2px dashed rgba(129, 140, 248, 0.6);
outline: 2px dashed color-mix(in srgb, var(--amb-link) 60%, transparent);
outline-offset: -4px;
border-radius: 10px;
}
.anomalous-audio-nav-character.is-file-target > .anomalous-audio-nav-item {
background: rgba(99, 102, 241, 0.2);
box-shadow: inset 0 0 0 1px #818cf8;
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
box-shadow: inset 0 0 0 1px var(--amb-link);
}
.anomalous-audio-sidebar-settings {
@@ -947,9 +947,9 @@
margin: 0;
padding: 10px 16px;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-top: 1px solid var(--amb-border);
background: transparent;
color: #94a3b8;
color: var(--amb-text-muted);
font: inherit;
font-size: 12px;
text-align: left;
@@ -958,7 +958,7 @@
.anomalous-audio-sidebar-settings:hover {
background: rgba(255, 255, 255, 0.04);
color: #f1f5f9;
color: var(--amb-text-main);
}
/* Amber: pretrained files worth a look (dismissable); red: missing Python packages. */
@@ -976,7 +976,7 @@
.anomalous-audio-sidebar-settings-busy {
padding-left: 21px;
color: #38bdf8;
color: var(--amb-link);
font-size: 10px;
}
@@ -1004,26 +1004,26 @@
}
.anomalous-voice-modal {
background: #141722;
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--amb-bg-panel);
border: 1px solid var(--amb-border-strong);
border-radius: 16px;
padding: 24px;
width: 520px;
max-width: 92vw;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(129, 140, 248, 0.15);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px color-mix(in srgb, var(--amb-link) 15%, transparent);
display: flex;
flex-direction: column;
gap: 16px;
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-voice-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--amb-border);
padding-bottom: 14px;
}
@@ -1040,13 +1040,13 @@
.anomalous-voice-modal-subtitle {
font-size: 12px;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-voice-modal-close {
background: none;
border: none;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
@@ -1054,7 +1054,7 @@
}
.anomalous-voice-modal-close:hover {
color: #fff;
color: var(--amb-text-main);
}
.anomalous-voice-modal-footer {
@@ -1062,14 +1062,14 @@
justify-content: flex-end;
gap: 10px;
margin-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid var(--amb-border);
padding-top: 14px;
}
.anomalous-voice-modal-cancel {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
border: 1px solid var(--amb-border);
color: var(--amb-text-soft);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
@@ -1077,15 +1077,15 @@
}
.anomalous-voice-modal-submit {
background: linear-gradient(135deg, #6366f1, #38bdf8);
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
border: none;
color: #fff;
color: var(--amb-text-main);
font-weight: 600;
padding: 8px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
box-shadow: 0 4px 12px color-mix(in srgb, var(--amb-link) 30%, transparent);
}
.anomalous-voice-modal-submit:disabled {
@@ -1097,7 +1097,7 @@
.anomalous-voice-grip {
display: inline-flex;
flex: none;
color: #475569;
color: var(--amb-text-dim);
opacity: 0.8;
}
@@ -1112,12 +1112,12 @@
}
.anomalous-character-voice-header.is-draggable:hover {
border-color: rgba(129, 140, 248, 0.45);
background: rgba(129, 140, 248, 0.06);
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 6%, transparent);
}
.anomalous-character-voice-header.is-draggable:hover .anomalous-voice-grip {
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-character-voice-header.is-draggable:active {
@@ -1133,26 +1133,26 @@
margin: 28px auto;
padding: 18px 20px;
border-radius: 12px;
border: 1px dashed rgba(129, 140, 248, 0.4);
background: rgba(129, 140, 248, 0.05);
color: #cbd5e1;
border: 1px dashed color-mix(in srgb, var(--amb-link) 40%, transparent);
background: color-mix(in srgb, var(--amb-link) 5%, transparent);
color: var(--amb-text-soft);
font-size: 12.5px;
line-height: 1.6;
}
.anomalous-audio-install-title {
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 13.5px;
font-weight: 700;
}
.anomalous-audio-install-how {
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-audio-install-link {
align-self: flex-start;
color: #a5b4fc;
color: var(--amb-link);
text-decoration: underline;
text-underline-offset: 2px;
}
@@ -1188,7 +1188,7 @@
.anomalous-tts-section {
margin-top: 6px;
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 12px;
font-weight: 700;
}
@@ -1211,7 +1211,7 @@
}
.anomalous-tts-row-name {
color: #a5b4fc;
color: var(--amb-link);
font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@@ -1219,18 +1219,18 @@
min-width: 0;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
background: rgba(0, 0, 0, 0.25);
color: #e2e8f0;
color: var(--amb-text-main);
font-size: 12px;
}
.anomalous-tts-remove,
.anomalous-tts-add {
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
color: var(--amb-text-soft);
cursor: pointer;
}
@@ -1246,7 +1246,7 @@
}
.anomalous-tts-hint {
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
line-height: 1.5;
}
@@ -1261,15 +1261,15 @@
}
.anomalous-tts-arrow {
color: #64748b;
color: var(--amb-text-dim);
font-size: 12px;
}
.anomalous-tts-listen {
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
color: var(--amb-text-soft);
cursor: pointer;
font-size: 11px;
padding: 4px 8px;
@@ -1278,8 +1278,8 @@
.anomalous-tts-listen:hover,
.anomalous-tts-listen.is-busy {
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
color: var(--amb-link);
}
.anomalous-tts-pronounce-language {
@@ -1287,7 +1287,7 @@
align-items: center;
gap: 8px;
font-size: 12px;
color: #cbd5e1;
color: var(--amb-text-soft);
}
@media (max-width: 560px) {
web/styles/12-tts-setup.css
+142 -142
View File
@@ -11,7 +11,7 @@
flex-direction: column;
gap: 16px;
margin-top: 12px;
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 12px;
}
@@ -28,7 +28,7 @@
.anomalous-tts-reminder-text {
flex: 1 1 260px;
min-width: 0;
color: #e2e8f0;
color: var(--amb-text-main);
line-height: 1.5;
}
@@ -66,14 +66,14 @@
flex: 1;
min-width: 0;
overflow: hidden;
color: #e2e8f0;
color: var(--amb-text-main);
text-overflow: ellipsis;
white-space: nowrap;
}
.anomalous-tts-setup-meta {
flex-shrink: 0;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-tts-setup-command {
@@ -82,7 +82,7 @@
padding: 4px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.3);
color: #e2e8f0;
color: var(--amb-text-main);
font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
overflow-wrap: anywhere;
}
@@ -104,8 +104,8 @@
flex-shrink: 0;
padding: 1px 6px;
border-radius: 4px;
background: rgba(129, 140, 248, 0.12);
color: #a5b4fc;
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-link);
font-size: 10.5px;
white-space: nowrap;
}
@@ -117,7 +117,7 @@
}
.anomalous-tts-state.is-ok { color: #34d399; }
.anomalous-tts-state.is-busy { color: #38bdf8; }
.anomalous-tts-state.is-busy { color: var(--amb-link); }
.anomalous-tts-state.is-missing { color: #f59e0b; }
.anomalous-tts-state.is-error { color: #f87171; cursor: help; }
@@ -131,7 +131,7 @@
padding: 0;
border: none;
background: none;
color: #a5b4fc;
color: var(--amb-link);
font: inherit;
font-size: 12px;
text-decoration: underline;
@@ -172,7 +172,7 @@
align-items: center;
gap: 8px;
min-width: 0;
color: #64748b;
color: var(--amb-text-dim);
font-size: 12px;
}
@@ -191,7 +191,7 @@
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
@@ -202,19 +202,19 @@
}
.anomalous-tts-step.is-current {
color: #e0e7ff;
color: var(--amb-text-main);
font-weight: 600;
}
.anomalous-tts-step.is-current .anomalous-tts-step-no {
border-color: transparent;
background: linear-gradient(135deg, #6366f1, #38bdf8);
color: #fff;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
color: var(--amb-text-main);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--amb-link) 18%, transparent);
}
.anomalous-tts-step.is-done {
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-tts-step.is-done .anomalous-tts-step-no {
@@ -248,10 +248,10 @@
width: 26px;
height: 26px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
border-radius: 50%;
background: transparent;
color: #94a3b8;
color: var(--amb-text-muted);
font: inherit;
font-size: 13px;
font-weight: 700;
@@ -259,8 +259,8 @@
}
.anomalous-tts-help:hover {
border-color: #818cf8;
color: #e0e7ff;
border-color: var(--amb-link);
color: var(--amb-text-main);
}
.anomalous-tts-choose {
@@ -274,7 +274,7 @@
.anomalous-tts-choose-title {
margin-bottom: 6px;
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 19px;
font-weight: 700;
text-align: center;
@@ -285,10 +285,10 @@
align-items: center;
gap: 16px;
padding: 16px 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
color: #e2e8f0;
color: var(--amb-text-main);
font: inherit;
text-align: left;
cursor: pointer;
@@ -296,8 +296,8 @@
}
.anomalous-tts-mode:hover:not(:disabled) {
border-color: rgba(129, 140, 248, 0.55);
background: rgba(99, 102, 241, 0.1);
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
transform: translateY(-1px);
}
@@ -314,8 +314,8 @@
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(99, 102, 241, 0.16);
color: #a5b4fc;
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
color: var(--amb-link);
}
.anomalous-tts-mode-words {
@@ -332,13 +332,13 @@
}
.anomalous-tts-mode-desc {
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 12px;
line-height: 1.5;
}
.anomalous-tts-mode-go {
color: #64748b;
color: var(--amb-text-dim);
font-size: 22px;
}
@@ -347,7 +347,7 @@
flex-direction: column;
gap: 8px;
padding: 12px 14px;
border: 1px dashed rgba(129, 140, 248, 0.35);
border: 1px dashed color-mix(in srgb, var(--amb-link) 35%, transparent);
border-radius: 12px;
}
@@ -356,7 +356,7 @@
}
.anomalous-tts-pick-character-title {
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 12px;
font-weight: 600;
}
@@ -371,22 +371,22 @@
.anomalous-tts-pick-character-item {
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 999px;
background: rgba(0, 0, 0, 0.2);
color: #e2e8f0;
color: var(--amb-text-main);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.anomalous-tts-pick-character-item:hover {
border-color: #818cf8;
background: rgba(99, 102, 241, 0.16);
border-color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
}
.anomalous-tts-toolbar-hint {
color: #64748b;
color: var(--amb-text-dim);
font-size: 11.5px;
}
@@ -403,10 +403,10 @@
justify-content: center;
gap: 14px;
padding: 32px 24px;
border: 2px dashed rgba(129, 140, 248, 0.35);
border: 2px dashed color-mix(in srgb, var(--amb-link) 35%, transparent);
border-radius: 18px;
background:
radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.12), transparent 60%),
radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--amb-link) 12%, transparent), transparent 60%),
rgba(255, 255, 255, 0.015);
text-align: center;
transition: border-color 0.15s ease, background 0.15s ease;
@@ -419,12 +419,12 @@
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.16);
color: #a5b4fc;
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
color: var(--amb-link);
}
.anomalous-tts-hero-title {
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 19px;
font-weight: 700;
}
@@ -441,21 +441,21 @@
align-items: baseline;
gap: 6px;
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 999px;
background: rgba(0, 0, 0, 0.25);
color: #64748b;
color: var(--amb-text-dim);
font-size: 11.5px;
}
.anomalous-tts-hero-need b {
color: #e2e8f0;
color: var(--amb-text-main);
font-weight: 600;
}
.anomalous-tts-hero-desc {
max-width: 540px;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 12.5px;
line-height: 1.7;
}
@@ -477,19 +477,19 @@
justify-content: center;
align-items: baseline;
gap: 8px;
color: #64748b;
color: var(--amb-text-dim);
font-size: 12px;
}
.anomalous-tts-hero-dot {
color: #475569;
color: var(--amb-text-dim);
}
/* Suggested folder layout under the batch drop area. */
.anomalous-tts-layout {
width: 100%;
max-width: 540px;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 12px;
text-align: left;
}
@@ -497,7 +497,7 @@
.anomalous-tts-layout summary {
width: fit-content;
margin: 0 auto;
color: #a5b4fc;
color: var(--amb-link);
cursor: pointer;
}
@@ -507,19 +507,19 @@
gap: 4px 18px;
margin-top: 10px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 10px;
background: rgba(0, 0, 0, 0.25);
}
.anomalous-tts-layout-name {
color: #e2e8f0;
color: var(--amb-text-main);
font-family: ui-monospace, Consolas, monospace;
white-space: nowrap;
}
.anomalous-tts-layout-note {
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-tts-layout-foot {
@@ -535,10 +535,10 @@
display: none;
align-items: center;
justify-content: center;
border: 2px dashed #818cf8;
border: 2px dashed var(--amb-link);
border-radius: 14px;
background: rgba(20, 23, 34, 0.88);
color: #e0e7ff;
color: var(--amb-text-main);
font-size: 18px;
font-weight: 700;
pointer-events: none;
@@ -557,17 +557,17 @@
.anomalous-tts-toolbar-title {
margin-right: auto;
color: #e2e8f0;
color: var(--amb-text-main);
font-size: 13px;
font-weight: 700;
}
.anomalous-tts-ghost {
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
color: var(--amb-text-soft);
font: inherit;
font-size: 12px;
cursor: pointer;
@@ -575,9 +575,9 @@
}
.anomalous-tts-ghost:hover {
border-color: rgba(129, 140, 248, 0.45);
background: rgba(99, 102, 241, 0.12);
color: #e0e7ff;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-text-main);
}
.anomalous-tts-ghost.is-large {
@@ -598,9 +598,9 @@
flex-direction: column;
min-width: 240px;
padding: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 12px;
background: #1b1f2e;
background: var(--amb-bg-card);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
@@ -616,7 +616,7 @@
border: none;
border-radius: 8px;
background: none;
color: #e2e8f0;
color: var(--amb-text-main);
font: inherit;
font-size: 12.5px;
text-align: left;
@@ -624,16 +624,16 @@
}
.anomalous-tts-menu-item:hover {
background: rgba(99, 102, 241, 0.16);
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
}
.anomalous-tts-menu-hint {
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
}
.anomalous-tts-note {
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11.5px;
}
@@ -650,20 +650,20 @@
.anomalous-tts-card {
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.025);
transition: border-color 0.15s ease, background 0.15s ease;
}
.anomalous-tts-card.is-open {
border-color: rgba(129, 140, 248, 0.35);
background: rgba(99, 102, 241, 0.04);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
background: color-mix(in srgb, var(--amb-link) 4%, transparent);
}
.anomalous-tts-card.is-drop-target {
border-color: #818cf8;
box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.35);
border-color: var(--amb-link);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--amb-link) 35%, transparent);
}
.anomalous-tts-card[data-tone="done"] {
@@ -693,7 +693,7 @@
padding: 0;
border: none;
background: none;
color: #64748b;
color: var(--amb-text-dim);
cursor: pointer;
}
@@ -719,8 +719,8 @@
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #38bdf8);
color: #fff;
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
color: var(--amb-text-main);
font-size: 14px;
font-weight: 700;
}
@@ -737,7 +737,7 @@
gap: 8px;
min-width: 0;
overflow: hidden;
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 14px;
font-weight: 700;
text-overflow: ellipsis;
@@ -745,7 +745,7 @@
}
.anomalous-tts-card-addto {
color: #64748b;
color: var(--amb-text-dim);
font-size: 12px;
font-weight: 500;
}
@@ -758,18 +758,18 @@
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: #f1f5f9;
color: var(--amb-text-main);
font: inherit;
font-size: 14px;
font-weight: 700;
}
.anomalous-tts-card-name-input:hover {
border-color: rgba(255, 255, 255, 0.1);
border-color: var(--amb-border);
}
.anomalous-tts-card-name-input:focus {
border-color: rgba(129, 140, 248, 0.6);
border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
background: rgba(0, 0, 0, 0.25);
outline: none;
}
@@ -784,7 +784,7 @@
padding: 2px 9px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.12);
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
@@ -793,11 +793,11 @@
.anomalous-tts-card[data-tone="ready"] .anomalous-tts-card-pill { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.anomalous-tts-card[data-tone="needed"] .anomalous-tts-card-pill { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.anomalous-tts-card[data-tone="error"] .anomalous-tts-card-pill { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.anomalous-tts-card[data-tone="busy"] .anomalous-tts-card-pill { background: rgba(56, 189, 248, 0.14); color: #38bdf8; }
.anomalous-tts-card[data-tone="busy"] .anomalous-tts-card-pill { background: color-mix(in srgb, var(--amb-link) 14%, transparent); color: var(--amb-link); }
.anomalous-tts-card-meta {
flex-shrink: 0;
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
white-space: nowrap;
}
@@ -811,7 +811,7 @@
border: none;
border-radius: 6px;
background: none;
color: #64748b;
color: var(--amb-text-dim);
font-size: 15px;
line-height: 1;
cursor: pointer;
@@ -838,10 +838,10 @@
.anomalous-tts-pick {
padding: 6px 14px;
border: 1px solid rgba(129, 140, 248, 0.4);
border: 1px solid color-mix(in srgb, var(--amb-link) 40%, transparent);
border-radius: 8px;
background: rgba(99, 102, 241, 0.14);
color: #e0e7ff;
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
color: var(--amb-text-main);
font: inherit;
font-size: 12px;
font-weight: 600;
@@ -849,7 +849,7 @@
}
.anomalous-tts-pick:hover {
background: rgba(99, 102, 241, 0.26);
background: color-mix(in srgb, var(--amb-link) 26%, transparent);
}
.anomalous-tts-card-section {
@@ -860,13 +860,13 @@
}
.anomalous-tts-card-section-title {
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 12px;
font-weight: 700;
}
.anomalous-tts-card-section-hint {
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
}
@@ -882,7 +882,7 @@
/* ---- folded rows: files left out, and the unassigned files of one folder ---- */
.anomalous-tts-card-fold {
border: 1px dashed rgba(255, 255, 255, 0.1);
border: 1px dashed var(--amb-border);
border-radius: 10px;
}
@@ -891,7 +891,7 @@
align-items: center;
gap: 10px;
padding: 7px 10px;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 12px;
cursor: pointer;
}
@@ -927,7 +927,7 @@
padding: 5px 8px;
border: 1px solid transparent;
border-radius: 8px;
color: #64748b;
color: var(--amb-text-dim);
font-size: 12.5px;
}
@@ -938,7 +938,7 @@
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
@@ -968,7 +968,7 @@
}
.anomalous-tts-check-item.is-done {
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-tts-check-item.is-done .anomalous-tts-check-mark {
@@ -978,17 +978,17 @@
}
.anomalous-tts-check-item.is-next {
border-color: rgba(129, 140, 248, 0.5);
background: rgba(99, 102, 241, 0.12);
color: #e0e7ff;
border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-text-main);
font-weight: 600;
}
.anomalous-tts-check-item.is-next .anomalous-tts-check-mark {
border-color: transparent;
background: linear-gradient(135deg, #6366f1, #38bdf8);
color: #fff;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
background: linear-gradient(135deg, var(--amb-link), var(--amb-link));
color: var(--amb-text-main);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--amb-link) 18%, transparent);
}
.anomalous-tts-card[data-tone="error"] .anomalous-tts-check-item.is-next {
@@ -1015,7 +1015,7 @@
align-items: stretch;
gap: 6px;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.07);
border: 1px solid var(--amb-border);
border-left: 3px solid rgba(52, 211, 153, 0.7);
border-radius: 9px;
background: rgba(0, 0, 0, 0.18);
@@ -1023,12 +1023,12 @@
.anomalous-tts-card-files > .anomalous-tts-file:not(.is-audio) {
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.07);
border: 1px solid var(--amb-border);
border-radius: 9px;
background: rgba(0, 0, 0, 0.18);
}
.anomalous-tts-file[data-tone="busy"] { border-left-color: #38bdf8; }
.anomalous-tts-file[data-tone="busy"] { border-left-color: var(--amb-link); }
.anomalous-tts-file[data-tone="skip"] { border-left-color: #64748b; opacity: 0.7; }
.anomalous-tts-file[data-tone="idle"] { border-left-color: #475569; }
@@ -1062,30 +1062,30 @@
width: 26px;
height: 26px;
padding: 0 0 0 2px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 9px;
cursor: pointer;
}
.anomalous-tts-file-play:hover {
border-color: #818cf8;
color: #fff;
border-color: var(--amb-link);
color: var(--amb-text-main);
}
/* The clip being listened to: its button is "stop". */
.anomalous-tts-file.is-playing {
border-color: rgba(129, 140, 248, 0.45);
background: rgba(129, 140, 248, 0.08);
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 8%, transparent);
}
.anomalous-tts-file.is-playing .anomalous-tts-file-play {
padding: 0;
border-color: #818cf8;
background: #818cf8;
color: #fff;
border-color: var(--amb-link);
background: var(--amb-btn-primary-bg);
color: var(--amb-btn-primary-text);
}
.anomalous-tts-file-play.is-failed {
@@ -1103,7 +1103,7 @@
.anomalous-tts-file-name {
overflow: hidden;
color: #e2e8f0;
color: var(--amb-text-main);
font-size: 12.5px;
font-weight: 600;
text-overflow: ellipsis;
@@ -1112,7 +1112,7 @@
.anomalous-tts-file-meta {
flex-shrink: 0;
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
}
@@ -1128,7 +1128,7 @@
flex-shrink: 1;
max-width: 180px;
overflow: hidden;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11px;
font-weight: 600;
text-overflow: ellipsis;
@@ -1139,17 +1139,17 @@
display: none;
}
.anomalous-tts-file[data-tone="busy"] .anomalous-tts-file-state { color: #38bdf8; }
.anomalous-tts-file[data-tone="busy"] .anomalous-tts-file-state { color: var(--amb-link); }
.anomalous-tts-file[data-tone="merge"] .anomalous-tts-file-state { color: #34d399; }
.anomalous-tts-file[data-tone="error"] .anomalous-tts-file-state { color: #f87171; }
.anomalous-tts-file-main {
flex-shrink: 0;
padding: 3px 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 999px;
background: transparent;
color: #64748b;
color: var(--amb-text-dim);
font: inherit;
font-size: 11px;
cursor: pointer;
@@ -1185,17 +1185,17 @@
.anomalous-tts-card-language {
min-width: 0;
padding: 5px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 7px;
background: rgba(0, 0, 0, 0.25);
color: #e2e8f0;
color: var(--amb-text-main);
font: inherit;
font-size: 12px;
}
.anomalous-tts-file input:focus,
.anomalous-tts-card-language:focus {
border-color: rgba(129, 140, 248, 0.6);
border-color: color-mix(in srgb, var(--amb-link) 60%, transparent);
outline: none;
}
@@ -1223,8 +1223,8 @@
}
.anomalous-tts-file-text.dragover {
border-color: #818cf8;
background: rgba(99, 102, 241, 0.12);
border-color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
}
.anomalous-tts-file-move {
@@ -1233,7 +1233,7 @@
padding: 3px 6px;
border-color: transparent;
background: transparent;
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
cursor: pointer;
}
@@ -1242,9 +1242,9 @@
.anomalous-tts-file:hover .anomalous-tts-file-move,
.anomalous-tts-file-move:focus,
.anomalous-tts-card.is-tray .anomalous-tts-file-move {
border-color: rgba(255, 255, 255, 0.12);
border-color: var(--amb-border-strong);
background: rgba(0, 0, 0, 0.25);
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-tts-card.is-tray .anomalous-tts-file-move {
@@ -1260,7 +1260,7 @@
justify-content: space-between;
gap: 10px 20px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--amb-border);
}
.anomalous-tts-card-lines,
@@ -1274,7 +1274,7 @@
.anomalous-tts-card-lines > .anomalous-tts-file {
padding: 2px 4px 2px 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 999px;
background: rgba(0, 0, 0, 0.2);
}
@@ -1285,13 +1285,13 @@
}
.anomalous-tts-card-extra-label {
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 12px;
font-weight: 600;
}
.anomalous-tts-card-note {
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11.5px;
line-height: 1.6;
}
@@ -1359,7 +1359,7 @@
.anomalous-tts-footer-path {
overflow: hidden;
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1400,10 +1400,10 @@
flex: 1;
min-width: 0;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 6px;
background: rgba(0, 0, 0, 0.25);
color: #e2e8f0;
color: var(--amb-text-main);
font-size: 12px;
}
@@ -1412,7 +1412,7 @@
flex-direction: column;
height: 320px;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 8px;
background: rgba(0, 0, 0, 0.2);
}
@@ -1424,9 +1424,9 @@
gap: 8px;
padding: 6px 10px;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--amb-border);
background: none;
color: #e2e8f0;
color: var(--amb-text-main);
font: inherit;
font-size: 12px;
text-align: left;
@@ -1435,7 +1435,7 @@
.anomalous-tts-picker-item:hover,
.anomalous-tts-picker-item:focus-visible {
background: rgba(129, 140, 248, 0.1);
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
}
.anomalous-tts-picker-icon {
@@ -1453,7 +1453,7 @@
.anomalous-tts-picker-meta {
flex-shrink: 0;
color: #64748b;
color: var(--amb-text-dim);
font-size: 11px;
}
@@ -1464,7 +1464,7 @@
/* ---------- Dropping files on the studio ---------- */
.anomalous-audio-studio-wrapper.is-file-dragover {
position: relative;
outline: 2px dashed rgba(129, 140, 248, 0.6);
outline: 2px dashed color-mix(in srgb, var(--amb-link) 60%, transparent);
outline-offset: -2px;
border-radius: 12px;
}
@@ -1477,8 +1477,8 @@
z-index: 2;
padding: 6px 14px;
border-radius: 999px;
background: #4f46e5;
color: #fff;
background: var(--amb-btn-primary-bg);
color: var(--amb-btn-primary-text);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
@@ -1496,6 +1496,6 @@
}
.anomalous-character-voice-card.is-file-target {
outline: 2px solid #818cf8;
outline: 2px solid var(--amb-link);
outline-offset: 1px;
}
web/styles/13-script-director.css
+64 -64
View File
@@ -5,8 +5,8 @@
right: 12px;
bottom: 12px;
width: min(1000px, calc(100% - 24px));
background: var(--amb-bg-panel, #1e1e24);
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--amb-bg-panel, var(--amb-bg-card));
border: 1px solid var(--amb-border);
border-radius: 12px;
display: flex;
flex-direction: column;
@@ -45,7 +45,7 @@
flex-direction: column;
gap: 8px;
padding: 8px 16px 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--amb-border);
background: rgba(0, 0, 0, 0.2);
}
@@ -59,7 +59,7 @@
max-height: none;
padding: 12px 14px;
border-top: none;
border-left: 1px solid rgba(255, 255, 255, 0.06);
border-left: 1px solid var(--amb-border);
}
.anomalous-sd-header {
@@ -69,32 +69,32 @@
gap: 8px;
padding: 12px 16px;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid var(--amb-border);
}
.anomalous-sd-title {
font-size: 14px;
font-weight: 600;
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-sd-subtitle {
font-size: 11px;
color: #64748b;
color: var(--amb-text-dim);
margin-top: 2px;
}
.anomalous-sd-close-btn {
background: transparent;
border: none;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.anomalous-sd-close-btn:hover {
color: #f1f5f9;
color: var(--amb-text-main);
}
/* Character */
@@ -108,7 +108,7 @@
.anomalous-sd-step {
font-size: 12px;
font-weight: 600;
color: #cbd5e1;
color: var(--amb-text-soft);
flex-shrink: 0;
}
@@ -116,9 +116,9 @@
flex: 1;
min-width: 0;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 6px;
color: #f1f5f9;
color: var(--amb-text-main);
font-size: 13px;
padding: 5px 8px;
}
@@ -127,8 +127,8 @@
padding: 0 16px 10px;
font-size: 11px;
line-height: 1.5;
color: #64748b;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--amb-text-dim);
border-bottom: 1px solid var(--amb-border);
}
.anomalous-sd-character-hint.is-warning {
@@ -150,10 +150,10 @@
flex: 1;
min-height: 160px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 6px;
padding: 10px;
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 13px;
line-height: 1.6;
resize: none;
@@ -169,8 +169,8 @@
.anomalous-sd-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e2e8f0;
border: 1px solid var(--amb-border);
color: var(--amb-text-main);
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
@@ -189,24 +189,24 @@
}
.anomalous-sd-btn.primary {
background: rgba(56, 189, 248, 0.1);
color: #38bdf8;
border-color: rgba(56, 189, 248, 0.25);
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
color: var(--amb-link);
border-color: color-mix(in srgb, var(--amb-link) 25%, transparent);
}
.anomalous-sd-btn.primary:hover:not(:disabled) {
background: rgba(56, 189, 248, 0.2);
background: color-mix(in srgb, var(--amb-link) 20%, transparent);
}
.anomalous-sd-btn.accent {
background: rgba(99, 102, 241, 0.18);
color: #a5b4fc;
border-color: rgba(99, 102, 241, 0.35);
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
color: var(--amb-link);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
font-weight: 600;
}
.anomalous-sd-btn.accent:hover:not(:disabled) {
background: rgba(99, 102, 241, 0.3);
background: color-mix(in srgb, var(--amb-link) 30%, transparent);
}
.anomalous-sd-btn.is-success {
@@ -222,14 +222,14 @@
justify-content: space-between;
padding: 10px 16px 0;
font-size: 12px;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-sd-link-btn {
background: none;
border: none;
padding: 0;
color: #38bdf8;
color: var(--amb-link);
font-size: 12px;
cursor: pointer;
}
@@ -256,7 +256,7 @@
.anomalous-sd-line-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
border-radius: 8px;
padding: 8px 10px 10px;
display: flex;
@@ -265,7 +265,7 @@
}
.anomalous-sd-line-card:focus-within {
border-color: rgba(56, 189, 248, 0.35);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
}
.anomalous-sd-line-head {
@@ -278,7 +278,7 @@
flex: 1;
font-size: 11px;
font-family: monospace;
color: #64748b;
color: var(--amb-text-dim);
}
.anomalous-sd-icon-btn {
@@ -288,9 +288,9 @@
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
background: rgba(255, 255, 255, 0.04);
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 14px;
line-height: 1;
cursor: pointer;
@@ -298,8 +298,8 @@
.anomalous-sd-icon-btn:hover,
.anomalous-sd-icon-btn.is-playing {
color: #38bdf8;
border-color: rgba(56, 189, 248, 0.4);
color: var(--amb-link);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
}
.anomalous-sd-icon-btn.is-danger:hover {
@@ -316,7 +316,7 @@
border: 1px solid transparent;
border-radius: 4px;
padding: 2px 4px;
color: #e2e8f0;
color: var(--amb-text-main);
font: inherit;
font-size: 13px;
line-height: 1.6;
@@ -325,7 +325,7 @@
.anomalous-sd-line-text:hover,
.anomalous-sd-line-text:focus {
border-color: rgba(255, 255, 255, 0.1);
border-color: var(--amb-border);
background: rgba(0, 0, 0, 0.2);
outline: none;
}
@@ -339,23 +339,23 @@
.anomalous-sd-emotion-chip {
padding: 2px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
background: rgba(255, 255, 255, 0.04);
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.anomalous-sd-emotion-chip:hover {
color: #e2e8f0;
border-color: rgba(129, 140, 248, 0.4);
color: var(--amb-text-main);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
}
.anomalous-sd-emotion-chip.active {
background: rgba(99, 102, 241, 0.3);
border-color: #818cf8;
color: #fff;
background: color-mix(in srgb, var(--amb-link) 30%, transparent);
border-color: var(--amb-link);
color: var(--amb-text-main);
font-weight: 600;
}
@@ -373,7 +373,7 @@
.anomalous-sd-package-summary {
font-size: 12px;
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-sd-package-summary.is-error {
@@ -400,9 +400,9 @@
gap: 6px;
padding: 3px 8px;
border-radius: 6px;
border: 1px dashed rgba(129, 140, 248, 0.5);
background: rgba(99, 102, 241, 0.08);
color: #a5b4fc;
border: 1px dashed color-mix(in srgb, var(--amb-link) 50%, transparent);
background: color-mix(in srgb, var(--amb-link) 8%, transparent);
color: var(--amb-link);
font-size: 11px;
cursor: grab;
user-select: none;
@@ -428,9 +428,9 @@
margin-right: auto;
min-width: 0;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 6px;
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 12px;
padding: 5px 6px;
}
@@ -439,16 +439,16 @@
align-self: stretch;
padding: 7px;
border-radius: 8px;
border: 1px dashed rgba(255, 255, 255, 0.15);
border: 1px dashed var(--amb-border-strong);
background: transparent;
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 12px;
cursor: pointer;
}
.anomalous-sd-add-line:hover {
color: #e2e8f0;
border-color: rgba(56, 189, 248, 0.45);
color: var(--amb-text-main);
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
}
/* Generate here (GPT-SoVITS): ui_script_run.js */
@@ -471,14 +471,14 @@
flex-shrink: 0;
padding: 6px 10px;
border-radius: 8px;
background: rgba(99, 102, 241, 0.06);
border: 1px solid rgba(99, 102, 241, 0.18);
background: color-mix(in srgb, var(--amb-link) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--amb-link) 18%, transparent);
}
.anomalous-sd-run-settings summary {
cursor: pointer;
font-size: 12px;
color: #cbd5e1;
color: var(--amb-text-soft);
}
.anomalous-sd-run-actions {
@@ -491,8 +491,8 @@
.anomalous-sd-run-select,
.anomalous-sd-run-number {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #e2e8f0;
border: 1px solid var(--amb-border-strong);
color: var(--amb-text-main);
border-radius: 6px;
padding: 4px 6px;
font-size: 12px;
@@ -515,7 +515,7 @@
justify-content: space-between;
gap: 6px;
font-size: 11px;
color: #cbd5e1;
color: var(--amb-text-soft);
font-family: ui-monospace, monospace;
}
@@ -523,18 +523,18 @@
margin: 6px 0 4px;
font-size: 11px;
line-height: 1.5;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-sd-run-status,
.anomalous-sd-run-saved {
font-size: 12px;
color: #cbd5e1;
color: var(--amb-text-soft);
word-break: break-all;
}
.anomalous-sd-run-saved {
color: #94a3b8;
color: var(--amb-text-muted);
font-size: 11px;
}
@@ -554,5 +554,5 @@
.anomalous-sd-take-no {
margin-left: 2px;
font-size: 10px;
color: #a5b4fc;
color: var(--amb-link);
}
web/styles/14-version-manager.css
+28 -28
View File
@@ -8,13 +8,13 @@
align-items: center;
gap: 8px;
padding: 10px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid var(--amb-border);
font-size: 12px;
color: #94a3b8;
color: var(--amb-text-muted);
}
.anomalous-version-line-value {
color: #e2e8f0;
color: var(--amb-text-main);
font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@@ -22,9 +22,9 @@
margin-left: auto;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 6px;
color: #e2e8f0;
color: var(--amb-text-main);
font-size: 12px;
cursor: pointer;
white-space: nowrap;
@@ -56,9 +56,9 @@
padding: 18px 20px;
box-sizing: border-box;
overflow: hidden;
background: var(--amb-bg-panel, #1a1a1d);
color: var(--amb-text-main, #f3f4f6);
border: 1px solid var(--amb-border-hover, rgba(255, 255, 255, 0.16));
background: var(--amb-bg-panel, var(--amb-bg-panel));
color: var(--amb-text-main, var(--amb-text-main));
border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
border-radius: var(--amb-radius-panel, 10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
font-size: 13px;
@@ -84,7 +84,7 @@
height: 28px;
padding: 0;
background: transparent;
color: var(--amb-text-muted, #9ca3af);
color: var(--amb-text-muted, var(--amb-text-muted));
border: 1px solid transparent;
border-radius: var(--amb-radius-control, 6px);
font-size: 18px;
@@ -92,8 +92,8 @@
}
.anomalous-version-close:hover {
color: var(--amb-text-main, #f3f4f6);
border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.16));
color: var(--amb-text-main, var(--amb-text-main));
border-color: var(--amb-border-hover, var(--amb-border-strong));
}
.anomalous-version-current {
@@ -101,8 +101,8 @@
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: var(--amb-bg-card, #202024);
border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
background: var(--amb-bg-card, var(--amb-bg-card));
border: 1px solid var(--amb-border, var(--amb-border));
border-radius: var(--amb-radius-card, 8px);
}
@@ -121,7 +121,7 @@
.anomalous-version-date,
.anomalous-version-release-name,
.anomalous-version-empty {
color: var(--amb-text-muted, #9ca3af);
color: var(--amb-text-muted, var(--amb-text-muted));
}
.anomalous-version-meta {
@@ -149,8 +149,8 @@
height: 30px;
padding: 0 12px;
background: rgba(255, 255, 255, 0.04);
color: var(--amb-text-main, #f3f4f6);
border: 1px solid var(--amb-border-hover, rgba(255, 255, 255, 0.16));
color: var(--amb-text-main, var(--amb-text-main));
border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
border-radius: var(--amb-radius-control, 6px);
font-size: 12px;
cursor: pointer;
@@ -162,8 +162,8 @@
}
.anomalous-version-action.primary {
background: var(--amb-btn-primary-bg, #e5e7eb);
color: var(--amb-btn-primary-text, #111827);
background: var(--amb-btn-primary-bg, var(--amb-btn-primary-bg));
color: var(--amb-btn-primary-text, var(--amb-btn-primary-text));
border-color: transparent;
font-weight: 600;
}
@@ -179,7 +179,7 @@
.anomalous-version-status {
min-height: 18px;
color: var(--amb-text-muted, #9ca3af);
color: var(--amb-text-muted, var(--amb-text-muted));
line-height: 1.45;
white-space: pre-wrap;
}
@@ -196,7 +196,7 @@
display: flex;
align-items: center;
gap: 6px;
color: var(--amb-text-muted, #9ca3af);
color: var(--amb-text-muted, var(--amb-text-muted));
cursor: pointer;
}
@@ -224,8 +224,8 @@
flex-direction: column;
gap: 8px;
padding: 10px 12px;
background: var(--amb-bg-card, #202024);
border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08));
background: var(--amb-bg-card, var(--amb-bg-card));
border: 1px solid var(--amb-border, var(--amb-border));
border-radius: var(--amb-radius-card, 8px);
}
@@ -264,12 +264,12 @@
.anomalous-version-badge {
padding: 2px 7px;
border-radius: 999px;
border: 1px solid var(--amb-border-hover, rgba(255, 255, 255, 0.16));
border: 1px solid var(--amb-border-hover, var(--amb-border-strong));
}
.anomalous-version-badge.is-current {
color: var(--amb-btn-primary-text, #111827);
background: var(--amb-btn-primary-bg, #e5e7eb);
color: var(--amb-btn-primary-text, var(--amb-btn-primary-text));
background: var(--amb-btn-primary-bg, var(--amb-btn-primary-bg));
border-color: transparent;
}
@@ -287,7 +287,7 @@
padding: 0;
background: none;
border: none;
color: var(--amb-text-muted, #9ca3af);
color: var(--amb-text-muted, var(--amb-text-muted));
font-size: 12px;
text-decoration: underline;
text-underline-offset: 2px;
@@ -295,7 +295,7 @@
}
.anomalous-version-link:hover {
color: var(--amb-text-main, #f3f4f6);
color: var(--amb-text-main, var(--amb-text-main));
}
.anomalous-version-release-footer .anomalous-version-action {
@@ -307,7 +307,7 @@
margin: 0;
padding: 8px 10px;
overflow: auto;
background: var(--amb-bg-input, #151517);
background: var(--amb-bg-input, var(--amb-bg-page));
border-radius: var(--amb-radius-control, 6px);
font: 12px/1.5 system-ui, sans-serif;
white-space: pre-wrap;
web/styles/15-shell-rail.css
+19 -19
View File
@@ -15,7 +15,7 @@
gap: 2px;
padding: 10px 0;
box-sizing: border-box;
border-right: 1px solid rgba(255, 255, 255, 0.06);
border-right: 1px solid var(--amb-border);
background: rgba(16, 16, 19, 0.92);
}
@@ -24,10 +24,10 @@
width: 32px;
height: 32px;
margin-bottom: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 9px;
background: linear-gradient(135deg, #3a3a42, #1c1c22);
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 15px;
font-weight: 700;
cursor: pointer;
@@ -66,7 +66,7 @@
border: none;
border-radius: 9px;
background: transparent;
color: #8b8f98;
color: var(--amb-text-muted);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
@@ -88,18 +88,18 @@
.anomalous-rail-tools button:hover,
.anomalous-rail-foot button:hover {
background: rgba(255, 255, 255, 0.06);
color: #e5e7eb;
color: var(--amb-text-main);
}
.anomalous-rail-item.active,
.anomalous-rail-tools button.is-active,
.anomalous-rail-foot button.is-active {
background: rgba(255, 255, 255, 0.1);
color: #fff;
color: var(--amb-text-main);
}
.anomalous-rail-item.active {
box-shadow: inset 2px 0 0 #a5b4fc;
box-shadow: inset 2px 0 0 var(--amb-link);
}
.anomalous-rail-label {
@@ -128,7 +128,7 @@
#anomalous-rail #anomalous-materials-btn.active {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
color: var(--amb-text-main) !important;
}
/* List column: beside the page, or gone when closed. It also steps aside while a workspace
@@ -199,7 +199,7 @@
.anomalous-page-title {
overflow: hidden;
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 0.92em;
font-weight: 600;
white-space: nowrap;
@@ -225,7 +225,7 @@
.anomalous-home-title {
margin: 0;
color: #f3f4f6;
color: var(--amb-text-main);
font-size: 1.75em;
font-weight: 600;
text-align: center;
@@ -234,7 +234,7 @@
.anomalous-home-lead {
max-width: 540px;
margin: 0 auto;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 0.88em;
line-height: 1.7;
text-align: center;
@@ -252,7 +252,7 @@
align-items: flex-start;
gap: 12px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
color: inherit;
@@ -262,7 +262,7 @@
}
.anomalous-home-card:hover {
border-color: rgba(165, 180, 252, 0.35);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
background: rgba(255, 255, 255, 0.07);
transform: translateY(-1px);
}
@@ -274,8 +274,8 @@
justify-content: center;
height: 34px;
border-radius: 9px;
background: rgba(165, 180, 252, 0.12);
color: #c7d2fe;
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-text-main);
}
.anomalous-home-card-icon svg {
@@ -291,13 +291,13 @@
}
.anomalous-home-card-title {
color: #f3f4f6;
color: var(--amb-text-main);
font-size: 0.92em;
font-weight: 600;
}
.anomalous-home-card-body {
color: #8b8f98;
color: var(--amb-text-muted);
font-size: 0.8em;
line-height: 1.55;
}
@@ -309,7 +309,7 @@
justify-content: center;
gap: 6px 14px;
margin-top: 6px;
color: #6b7280;
color: var(--amb-text-dim);
font-size: 0.85em;
}
@@ -317,7 +317,7 @@
padding: 2px 0;
border: none;
background: none;
color: #a5b4fc;
color: var(--amb-link);
font-size: inherit;
cursor: pointer;
}
web/styles/16-activity.css
+19 -19
View File
@@ -18,7 +18,7 @@
.anomalous-activity-lead {
margin: 0;
color: #8b8f98;
color: var(--amb-text-muted);
font-size: 0.82em;
line-height: 1.6;
}
@@ -40,10 +40,10 @@
.anomalous-activity-clear,
.anomalous-activity-locate {
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 999px;
background: transparent;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 0.8em;
cursor: pointer;
}
@@ -51,14 +51,14 @@
.anomalous-activity-chip:hover,
.anomalous-activity-clear:hover,
.anomalous-activity-locate:hover {
border-color: rgba(255, 255, 255, 0.25);
color: #e5e7eb;
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
}
.anomalous-activity-chip.active {
border-color: rgba(165, 180, 252, 0.45);
background: rgba(165, 180, 252, 0.12);
color: #e0e7ff;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-text-main);
}
.anomalous-activity-list {
@@ -69,14 +69,14 @@
.anomalous-activity-day {
margin: 10px 0 2px;
color: #6b7280;
color: var(--amb-text-dim);
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.4px;
}
.anomalous-activity-entry {
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--amb-border);
border-radius: 9px;
background: rgba(255, 255, 255, 0.025);
}
@@ -100,7 +100,7 @@
.anomalous-activity-time {
flex-shrink: 0;
color: #6b7280;
color: var(--amb-text-dim);
font-variant-numeric: tabular-nums;
}
@@ -109,13 +109,13 @@
padding: 0 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 0.85em;
}
.anomalous-activity-entry.is-canvas .anomalous-activity-source {
background: rgba(165, 180, 252, 0.14);
color: #c7d2fe;
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
color: var(--amb-text-main);
}
.anomalous-activity-undo,
@@ -144,7 +144,7 @@
.anomalous-activity-summary {
overflow: hidden;
color: #e5e7eb;
color: var(--amb-text-main);
white-space: nowrap;
text-overflow: ellipsis;
}
@@ -166,7 +166,7 @@
gap: 10px;
min-width: 0;
padding: 3px 0;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 0.8em;
}
@@ -185,13 +185,13 @@
.anomalous-activity-more,
.anomalous-activity-note {
color: #6b7280;
color: var(--amb-text-dim);
font-size: 0.78em;
}
.anomalous-activity-empty {
padding: 18px 12px;
color: #6b7280;
color: var(--amb-text-dim);
font-size: 0.85em;
text-align: center;
}
@@ -208,7 +208,7 @@
display: flex;
align-items: baseline;
justify-content: space-between;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 0.85em;
font-weight: 600;
}
web/styles/17-model-types.css
+11 -11
View File
@@ -19,10 +19,10 @@
gap: 6px;
height: 28px;
padding: 0 11px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.03);
color: #cbd5e1;
color: var(--amb-text-soft);
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
@@ -32,15 +32,15 @@
.anomalous-model-type-chip:hover,
.anomalous-model-type-crumb:hover {
border-color: rgba(165, 180, 252, 0.35);
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
background: rgba(255, 255, 255, 0.07);
color: #f1f5f9;
color: var(--amb-text-main);
}
.anomalous-model-type-chip.is-active {
border-color: rgba(165, 180, 252, 0.45);
background: rgba(165, 180, 252, 0.14);
color: #e0e7ff;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
color: var(--amb-text-main);
}
.anomalous-model-type-chip[aria-pressed="true"] {
@@ -53,12 +53,12 @@
}
.anomalous-model-type-chip.is-active .anomalous-model-type-count {
color: #a5b4fc;
color: var(--amb-link);
}
.anomalous-model-type-crumb {
border-style: dashed;
color: #e0e7ff;
color: var(--amb-text-main);
}
.anomalous-model-type-crumb-x {
@@ -73,7 +73,7 @@
.anomalous-grid-empty {
grid-column: 1 / -1;
padding: 20px;
color: #fff;
color: var(--amb-text-main);
}
/* Card badges for the exceptions: base model inferred from the file, model not scanned yet.
@@ -87,7 +87,7 @@
.anomalous-card-badge.is-unscanned {
background: rgba(18, 20, 26, 0.7);
color: #9ca3af;
color: var(--amb-text-muted);
text-transform: none;
}
web/styles/18-scan-page.css
+40 -40
View File
@@ -4,7 +4,7 @@
flex: 1;
flex-direction: column;
overflow-y: auto;
background: var(--amb-bg-page, #131315);
background: var(--amb-bg-page, var(--amb-bg-page));
}
.anomalous-scan-page {
@@ -19,14 +19,14 @@
.anomalous-scan-title {
margin: 0;
color: #f3f4f6;
color: var(--amb-text-main);
font-size: 1.6em;
font-weight: 600;
}
.anomalous-scan-lead {
margin: 0;
color: #9ca3af;
color: var(--amb-text-muted);
line-height: 1.6;
}
@@ -58,7 +58,7 @@
flex-direction: column;
gap: 4px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
font: inherit;
@@ -71,24 +71,24 @@ button.anomalous-scan-stat {
}
button.anomalous-scan-stat:hover {
border-color: rgba(165, 180, 252, 0.4);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
background: rgba(255, 255, 255, 0.06);
}
.anomalous-scan-stat-value {
color: #f3f4f6;
color: var(--amb-text-main);
font-size: 1.5em;
font-variant-numeric: tabular-nums;
}
.anomalous-scan-stat-label {
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 12px;
}
.anomalous-scan-stat.is-ok .anomalous-scan-stat-value { color: #86efac; }
.anomalous-scan-stat.is-warn .anomalous-scan-stat-value { color: #fcd34d; }
.anomalous-scan-stat.is-new .anomalous-scan-stat-value { color: #a5b4fc; }
.anomalous-scan-stat.is-new .anomalous-scan-stat-value { color: var(--amb-link); }
.anomalous-scan-actions {
display: flex;
@@ -109,8 +109,8 @@ button.anomalous-scan-stat:hover {
.anomalous-scan-primary {
border: 1px solid transparent;
background: #e5e7eb;
color: #111827;
background: var(--amb-btn-primary-bg);
color: var(--amb-btn-primary-text);
}
.anomalous-scan-primary:hover:not(:disabled) {
@@ -118,13 +118,13 @@ button.anomalous-scan-stat:hover {
}
.anomalous-scan-secondary {
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
background: rgba(255, 255, 255, 0.04);
color: #e5e7eb;
color: var(--amb-text-main);
}
.anomalous-scan-secondary:hover:not(:disabled) {
border-color: rgba(165, 180, 252, 0.4);
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
background: rgba(255, 255, 255, 0.08);
}
@@ -136,7 +136,7 @@ button.anomalous-scan-stat:hover {
.anomalous-scan-muted {
margin: 0;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 12.5px;
line-height: 1.6;
}
@@ -155,20 +155,20 @@ button.anomalous-scan-stat:hover {
}
.anomalous-scan-advanced {
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
}
.anomalous-scan-advanced > summary {
padding: 12px 16px;
color: #d1d5db;
color: var(--amb-text-soft);
font-weight: 600;
cursor: pointer;
}
.anomalous-scan-advanced[open] > summary {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid var(--amb-border);
}
.anomalous-scan-advanced > :not(summary) {
@@ -178,7 +178,7 @@ button.anomalous-scan-stat:hover {
.anomalous-scan-group-title {
margin-top: 14px;
margin-bottom: 6px;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
@@ -189,7 +189,7 @@ button.anomalous-scan-stat:hover {
align-items: center;
gap: 8px;
padding: 4px 0;
color: #e5e7eb;
color: var(--amb-text-main);
cursor: pointer;
}
@@ -221,13 +221,13 @@ button.anomalous-scan-stat:hover {
}
.anomalous-scan-option-copy strong {
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 13.5px;
font-weight: 600;
}
.anomalous-scan-option-copy small {
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 12px;
line-height: 1.55;
}
@@ -239,7 +239,7 @@ button.anomalous-scan-stat:hover {
.anomalous-scan-advanced > .anomalous-scan-online {
margin-left: 42px;
padding-left: 12px;
border-left: 2px solid rgba(255, 255, 255, 0.06);
border-left: 2px solid var(--amb-border);
}
.anomalous-scan-online.is-disabled {
@@ -254,7 +254,7 @@ button.anomalous-scan-stat:hover {
gap: 12px;
margin: 6px 16px 16px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-top: 1px solid var(--amb-border);
}
/* The scan page's cards: the last scan's result and the model lists. */
@@ -263,18 +263,18 @@ button.anomalous-scan-stat:hover {
flex-direction: column;
gap: 8px;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
}
.anomalous-scan-card-title {
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 12.5px;
}
.anomalous-scan-result-counts {
color: #f3f4f6;
color: var(--amb-text-main);
font-size: 15px;
font-weight: 600;
}
@@ -305,18 +305,18 @@ button.anomalous-scan-stat:hover {
.anomalous-scan-tab {
padding: 5px 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 999px;
background: transparent;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 13px;
cursor: pointer;
}
.anomalous-scan-tab[aria-selected="true"] {
border-color: rgba(165, 180, 252, 0.45);
background: rgba(165, 180, 252, 0.12);
color: #e5e7eb;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-text-main);
}
.anomalous-scan-tab:disabled {
@@ -334,7 +334,7 @@ button.anomalous-scan-stat:hover {
align-items: center;
gap: 10px;
padding: 8px 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-top: 1px solid var(--amb-border);
}
.anomalous-scan-row-mark {
@@ -346,7 +346,7 @@ button.anomalous-scan-stat:hover {
.anomalous-scan-row.is-matched .anomalous-scan-row-mark { color: #86efac; }
.anomalous-scan-row.is-failed .anomalous-scan-row-mark { color: #fca5a5; }
.anomalous-scan-row.is-unchanged .anomalous-scan-row-mark { color: #9ca3af; }
.anomalous-scan-row.is-unchanged .anomalous-scan-row-mark { color: var(--amb-text-muted); }
.anomalous-scan-row-copy {
display: flex;
@@ -365,18 +365,18 @@ button.anomalous-scan-stat:hover {
}
.anomalous-scan-row-name {
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 13px;
font-weight: 600;
}
.anomalous-scan-row-where {
color: #6b7280;
color: var(--amb-text-dim);
font-size: 11.5px;
}
.anomalous-scan-row-detail {
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 12px;
}
@@ -389,18 +389,18 @@ button.anomalous-scan-stat:hover {
.anomalous-scan-row-btn,
.anomalous-scan-more {
padding: 3px 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid var(--amb-border-strong);
border-radius: 999px;
background: transparent;
color: #d1d5db;
color: var(--amb-text-soft);
font-size: 12px;
cursor: pointer;
}
.anomalous-scan-row-btn:hover:not(:disabled),
.anomalous-scan-more:hover {
border-color: rgba(165, 180, 252, 0.45);
color: #ffffff;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
color: var(--amb-text-main);
}
.anomalous-scan-row-btn:disabled {
web/styles/19-model-doctor.css
+14 -14
View File
@@ -4,7 +4,7 @@
flex: 1;
flex-direction: column;
overflow-y: auto;
background: var(--amb-bg-page, #131315);
background: var(--amb-bg-page, var(--amb-bg-page));
}
.anomalous-scan-stat.is-bad .anomalous-scan-stat-value { color: #fca5a5; }
@@ -15,19 +15,19 @@
.anomalous-doctor-row .anomalous-scan-row-mark { margin-top: 1px; }
.anomalous-doctor-row.is-ready .anomalous-scan-row-mark { color: #86efac; }
.anomalous-doctor-row.is-fixable .anomalous-scan-row-mark { color: #a5b4fc; }
.anomalous-doctor-row.is-fixable .anomalous-scan-row-mark { color: var(--amb-link); }
.anomalous-doctor-row.is-conflict .anomalous-scan-row-mark,
.anomalous-doctor-row.is-missing .anomalous-scan-row-mark { color: #fca5a5; }
.anomalous-doctor-why {
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 12px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.anomalous-doctor-proof {
color: #6b7280;
color: var(--amb-text-dim);
font-size: 11.5px;
}
@@ -44,9 +44,9 @@
}
.anomalous-scan-row-btn.is-main {
border-color: rgba(165, 180, 252, 0.45);
background: rgba(165, 180, 252, 0.12);
color: #e5e7eb;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
background: color-mix(in srgb, var(--amb-link) 12%, transparent);
color: var(--amb-text-main);
}
.anomalous-doctor-to-scan {
@@ -73,7 +73,7 @@
border-radius: 12px;
background: rgba(24, 24, 27, 0.96);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 13px;
transform: translateX(-50%);
box-sizing: border-box;
@@ -93,10 +93,10 @@
.anomalous-doctor-banner-btn {
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, 0.16);
border: 1px solid var(--amb-border-strong);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 12.5px;
white-space: nowrap;
cursor: pointer;
@@ -104,8 +104,8 @@
.anomalous-doctor-banner-btn.is-main {
border-color: transparent;
background: #e5e7eb;
color: #111827;
background: var(--amb-btn-primary-bg);
color: var(--amb-btn-primary-text);
font-weight: 600;
}
@@ -117,13 +117,13 @@
border: none;
border-radius: 6px;
background: transparent;
color: #9ca3af;
color: var(--amb-text-muted);
cursor: pointer;
}
.anomalous-doctor-banner-close:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
color: var(--amb-text-main);
}
@media (max-width: 640px) {
web/styles/20-current-node.css
+24 -24
View File
@@ -34,25 +34,25 @@
.anomalous-node-section-btn {
padding: 4px 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
border: 1px solid var(--amb-border-strong);
border-radius: 999px;
background: transparent;
color: #d1d5db;
color: var(--amb-text-soft);
font-size: 11.5px;
cursor: pointer;
}
.anomalous-node-section-btn:hover {
border-color: rgba(165, 180, 252, 0.45);
color: #ffffff;
border-color: color-mix(in srgb, var(--amb-link) 45%, transparent);
color: var(--amb-text-main);
}
.anomalous-node-param-search {
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--amb-border);
border-radius: 8px;
background: rgba(0, 0, 0, 0.25);
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 12px;
}
@@ -67,7 +67,7 @@
flex-direction: column;
gap: 6px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.035);
}
@@ -81,7 +81,7 @@
.anomalous-node-param-name {
overflow: hidden;
color: #f3f4f6;
color: var(--amb-text-main);
font-size: 12.5px;
white-space: nowrap;
text-overflow: ellipsis;
@@ -92,7 +92,7 @@
padding: 1px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #c4b5fd;
color: var(--amb-link);
font-size: 10px;
}
@@ -107,9 +107,9 @@
.anomalous-node-param-sources span {
padding: 1px 7px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 999px;
color: #9ca3af;
color: var(--amb-text-muted);
font-size: 10px;
}
@@ -120,7 +120,7 @@
margin: 0;
padding: 0;
list-style: none;
color: #d1d5db;
color: var(--amb-text-soft);
font-size: 11.5px;
}
@@ -144,19 +144,19 @@
.anomalous-node-param-apply {
align-self: flex-end;
padding: 5px 12px;
border: 1px solid rgba(165, 180, 252, 0.45);
border: 1px solid color-mix(in srgb, var(--amb-link) 45%, transparent);
border-radius: 7px;
background: rgba(165, 180, 252, 0.14);
color: #e5e7eb;
background: color-mix(in srgb, var(--amb-link) 14%, transparent);
color: var(--amb-text-main);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
}
.anomalous-node-param-apply:disabled {
border-color: rgba(255, 255, 255, 0.08);
border-color: var(--amb-border);
background: transparent;
color: #6b7280;
color: var(--amb-text-dim);
cursor: default;
}
@@ -166,15 +166,15 @@
flex-direction: column;
gap: 6px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--amb-border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.035);
}
.anomalous-node-param-role.is-plain { color: #d1d5db; }
.anomalous-node-param-role.is-plain { color: var(--amb-text-soft); }
.anomalous-node-prompt-name {
color: #6b7280;
color: var(--amb-text-dim);
font-size: 10.5px;
}
@@ -183,7 +183,7 @@
display: -webkit-box;
margin: 0;
overflow: hidden;
color: #e5e7eb;
color: var(--amb-text-main);
font-size: 12px;
line-height: 1.5;
overflow-wrap: anywhere;
@@ -191,13 +191,13 @@
-webkit-line-clamp: 4;
}
.anomalous-node-prompt-text.is-empty { color: #6b7280; }
.anomalous-node-prompt-text.is-empty { color: var(--amb-text-dim); }
.anomalous-node-prompt-note {
padding: 6px 8px;
border-radius: 6px;
background: rgba(165, 180, 252, 0.08);
color: #c7d2fe;
background: color-mix(in srgb, var(--amb-link) 8%, transparent);
color: var(--amb-text-main);
-webkit-line-clamp: 8;
}