Merge pull request #652 from HKLHaoBin/feat/card-ui-unification
fix(ui): 统一卡片样式并修复深色模式可读性
This commit is contained in:
48 files changed
+1519
-685
No files matched your search
@@ -1,4 +1,6 @@
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import { readFile, readdir } from 'node:fs/promises';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import path from 'node:path';
|
||||
import assert from 'node:assert/strict';
|
||||
|
||||
const root = new URL('../', import.meta.url);
|
||||
@@ -11,6 +13,132 @@ function escapeRegExp(value) {
|
||||
return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
}
|
||||
|
||||
function extractCssBlock(css, selector) {
|
||||
const escapedSelector = escapeRegExp(selector);
|
||||
const match = css.match(new RegExp(`${escapedSelector}\\s*\\{([\\s\\S]*?)\\n\\}`));
|
||||
assert.ok(match, `tokens.css must contain ${selector} block`);
|
||||
return match[1];
|
||||
}
|
||||
|
||||
function parseCustomProperties(block) {
|
||||
const tokens = new Map();
|
||||
const re = /^\s*(--[\w-]+)\s*:\s*([^;]+);/gm;
|
||||
let match;
|
||||
while ((match = re.exec(block)) !== null) {
|
||||
tokens.set(match[1], match[2].trim());
|
||||
}
|
||||
return tokens;
|
||||
}
|
||||
|
||||
function resolveTokenValue(name, tokens, stack = new Set()) {
|
||||
const raw = tokens.get(name);
|
||||
assert.ok(raw, `missing token ${name}`);
|
||||
if (!raw.startsWith('var(')) {
|
||||
return raw;
|
||||
}
|
||||
const inner = raw.slice(4, -1).trim();
|
||||
const refName = inner.split(',')[0].trim();
|
||||
assert.ok(refName.startsWith('--'), `unsupported var() reference in ${name}: ${raw}`);
|
||||
if (stack.has(refName)) {
|
||||
throw new Error(`circular var() reference: ${[...stack, refName].join(' -> ')}`);
|
||||
}
|
||||
stack.add(refName);
|
||||
return resolveTokenValue(refName, tokens, stack);
|
||||
}
|
||||
|
||||
function parseCssColor(value) {
|
||||
const hexMatch = value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
|
||||
if (hexMatch) {
|
||||
let hex = hexMatch[1];
|
||||
if (hex.length === 3) {
|
||||
hex = hex
|
||||
.split('')
|
||||
.map((ch) => ch + ch)
|
||||
.join('');
|
||||
}
|
||||
return {
|
||||
r: Number.parseInt(hex.slice(0, 2), 16),
|
||||
g: Number.parseInt(hex.slice(2, 4), 16),
|
||||
b: Number.parseInt(hex.slice(4, 6), 16),
|
||||
a: 1,
|
||||
};
|
||||
}
|
||||
|
||||
const rgbaMatch = value.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i);
|
||||
if (rgbaMatch) {
|
||||
return {
|
||||
r: Number(rgbaMatch[1]),
|
||||
g: Number(rgbaMatch[2]),
|
||||
b: Number(rgbaMatch[3]),
|
||||
a: rgbaMatch[4] === undefined ? 1 : Number(rgbaMatch[4]),
|
||||
};
|
||||
}
|
||||
|
||||
throw new Error(`unsupported color format: ${value}`);
|
||||
}
|
||||
|
||||
function srgbChannel(value) {
|
||||
const normalized = value / 255;
|
||||
return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
|
||||
}
|
||||
|
||||
function relativeLuminance({ r, g, b }) {
|
||||
const R = srgbChannel(r);
|
||||
const G = srgbChannel(g);
|
||||
const B = srgbChannel(b);
|
||||
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
|
||||
}
|
||||
|
||||
function contrastRatio(foreground, background) {
|
||||
const fg = parseCssColor(foreground);
|
||||
const bg = parseCssColor(background);
|
||||
assert.equal(fg.a, 1, `foreground must be opaque for contrast checks: ${foreground}`);
|
||||
assert.equal(bg.a, 1, `background must be opaque for contrast checks: ${background}`);
|
||||
const lighter = Math.max(relativeLuminance(fg), relativeLuminance(bg));
|
||||
const darker = Math.min(relativeLuminance(fg), relativeLuminance(bg));
|
||||
return (lighter + 0.05) / (darker + 0.05);
|
||||
}
|
||||
|
||||
function compositeOverBackground(fgValue, bgValue) {
|
||||
const fg = parseCssColor(fgValue);
|
||||
const bg = parseCssColor(bgValue);
|
||||
if (fg.a === 1) {
|
||||
return fgValue;
|
||||
}
|
||||
const alpha = fg.a;
|
||||
const r = Math.round(fg.r * alpha + bg.r * (1 - alpha));
|
||||
const g = Math.round(fg.g * alpha + bg.g * (1 - alpha));
|
||||
const b = Math.round(fg.b * alpha + bg.b * (1 - alpha));
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
|
||||
function contrastRatioOverBackground(foreground, background) {
|
||||
const effectiveFg = compositeOverBackground(foreground, background);
|
||||
return contrastRatio(effectiveFg, background);
|
||||
}
|
||||
|
||||
function assertSolidContrast(tokens, label, bgToken, inkToken, minRatio = 4.5) {
|
||||
const bg = resolveTokenValue(bgToken, tokens);
|
||||
const ink = resolveTokenValue(inkToken, tokens);
|
||||
const ratio = contrastRatio(ink, bg);
|
||||
assert.ok(
|
||||
ratio >= minRatio,
|
||||
`${label}: ${inkToken} on ${bgToken} must meet WCAG AA (${ratio.toFixed(2)}:1 < ${minRatio}:1)`,
|
||||
);
|
||||
return ratio;
|
||||
}
|
||||
|
||||
function assertMutedContrast(tokens, label, bgToken, inkToken, minRatio = 4.5) {
|
||||
const bg = resolveTokenValue(bgToken, tokens);
|
||||
const ink = resolveTokenValue(inkToken, tokens);
|
||||
const ratio = contrastRatioOverBackground(ink, bg);
|
||||
assert.ok(
|
||||
ratio >= minRatio,
|
||||
`${label}: ${inkToken} on ${bgToken} must meet WCAG AA (${ratio.toFixed(2)}:1 < ${minRatio}:1)`,
|
||||
);
|
||||
return ratio;
|
||||
}
|
||||
|
||||
function assertUsesClassName(source, className, message) {
|
||||
const escapedClassName = escapeRegExp(className);
|
||||
const patterns = [
|
||||
@@ -22,6 +150,23 @@ function assertUsesClassName(source, className, message) {
|
||||
assert.ok(patterns.some((pattern) => pattern.test(source)), message);
|
||||
}
|
||||
|
||||
const srcRoot = fileURLToPath(new URL('src/', root));
|
||||
|
||||
async function walkSourceFiles(dirPath, files = []) {
|
||||
const entries = await readdir(dirPath, { withFileTypes: true });
|
||||
for (const entry of entries) {
|
||||
const entryPath = path.join(dirPath, entry.name);
|
||||
if (entry.isDirectory()) {
|
||||
await walkSourceFiles(entryPath, files);
|
||||
continue;
|
||||
}
|
||||
if (/\.(tsx?|css)$/.test(entry.name)) {
|
||||
files.push(path.relative(srcRoot, entryPath).replace(/\\/g, '/'));
|
||||
}
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
assert.throws(
|
||||
() => assertUsesClassName('<div>ol-app-shell-bg</div>', 'ol-app-shell-bg', 'sample must require className usage'),
|
||||
/sample must require className usage/,
|
||||
@@ -41,22 +186,192 @@ assertUsesClassName(
|
||||
'sample should accept className usage',
|
||||
);
|
||||
|
||||
const [tokens, globalCss, shell, settingsModal, overview] = await Promise.all([
|
||||
const [tokens, globalCss, shell, settingsModal, overview, settingsTabs, themeMode, stylePage, sourceFiles, remoteStyle] = await Promise.all([
|
||||
read('src/styles/tokens.css'),
|
||||
read('src/styles/global.css'),
|
||||
read('src/components/FloatingShell.tsx'),
|
||||
read('src/components/SettingsModal.tsx'),
|
||||
read('src/pages/Overview.tsx'),
|
||||
read('src/pages/settings/tabs.tsx'),
|
||||
read('src/lib/themeMode.ts'),
|
||||
read('src/pages/Style.tsx'),
|
||||
walkSourceFiles(srcRoot),
|
||||
read('src-tauri/src/remote_server/assets/style.css'),
|
||||
]);
|
||||
|
||||
assert.match(tokens, /--ol-shell-radius:/, 'tokens.css must define --ol-shell-radius');
|
||||
assert.match(tokens, /--ol-panel-radius:/, 'tokens.css must define --ol-panel-radius');
|
||||
assert.match(tokens, /--ol-aura-shadow:/, 'tokens.css must define --ol-aura-shadow');
|
||||
assert.match(tokens, /--ol-font-display:/, 'tokens.css must define --ol-font-display');
|
||||
assert.match(tokens, /--ol-on-accent:/, 'tokens.css must define --ol-on-accent');
|
||||
assert.match(tokens, /--ol-primary-solid-bg:/, 'tokens.css must define --ol-primary-solid-bg');
|
||||
assert.match(tokens, /--ol-primary-solid-ink:/, 'tokens.css must define --ol-primary-solid-ink');
|
||||
assert.match(tokens, /--ol-control-radius:/, 'tokens.css must define --ol-control-radius');
|
||||
assert.match(tokens, /--ol-accent-solid-bg:/, 'tokens.css must define --ol-accent-solid-bg');
|
||||
assert.match(tokens, /--ol-accent-solid-bg-hover:/, 'tokens.css must define --ol-accent-solid-bg-hover');
|
||||
assert.match(tokens, /--ol-accent-solid-ink:/, 'tokens.css must define --ol-accent-solid-ink');
|
||||
assert.match(tokens, /--ol-danger-solid-bg:/, 'tokens.css must define --ol-danger-solid-bg');
|
||||
assert.match(tokens, /--ol-danger-solid-ink:/, 'tokens.css must define --ol-danger-solid-ink');
|
||||
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-accent-solid-bg:/,
|
||||
'tokens.css must define --ol-accent-solid-bg in dark theme',
|
||||
);
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-accent-solid-bg-hover:/,
|
||||
'tokens.css must define --ol-accent-solid-bg-hover in dark theme',
|
||||
);
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-accent-solid-ink:/,
|
||||
'tokens.css must define --ol-accent-solid-ink in dark theme',
|
||||
);
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-danger-solid-bg:/,
|
||||
'tokens.css must define --ol-danger-solid-bg in dark theme',
|
||||
);
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-danger-solid-ink:/,
|
||||
'tokens.css must define --ol-danger-solid-ink in dark theme',
|
||||
);
|
||||
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-primary-solid-bg:/,
|
||||
'tokens.css must define --ol-primary-solid-bg in dark theme',
|
||||
);
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-primary-solid-ink:/,
|
||||
'tokens.css must define --ol-primary-solid-ink in dark theme',
|
||||
);
|
||||
|
||||
const lightTokens = parseCustomProperties(extractCssBlock(tokens, ':root'));
|
||||
const darkTokens = parseCustomProperties(extractCssBlock(tokens, "[data-ol-theme='dark']"));
|
||||
|
||||
const contrastPairs = [
|
||||
{
|
||||
label: 'light accent-solid',
|
||||
tokens: lightTokens,
|
||||
bg: '--ol-accent-solid-bg',
|
||||
ink: '--ol-accent-solid-ink',
|
||||
},
|
||||
{
|
||||
label: 'light primary-solid',
|
||||
tokens: lightTokens,
|
||||
bg: '--ol-primary-solid-bg',
|
||||
ink: '--ol-primary-solid-ink',
|
||||
},
|
||||
{
|
||||
label: 'dark accent-solid',
|
||||
tokens: darkTokens,
|
||||
bg: '--ol-accent-solid-bg',
|
||||
ink: '--ol-accent-solid-ink',
|
||||
},
|
||||
{
|
||||
label: 'dark primary-solid',
|
||||
tokens: darkTokens,
|
||||
bg: '--ol-primary-solid-bg',
|
||||
ink: '--ol-primary-solid-ink',
|
||||
},
|
||||
{
|
||||
label: 'light danger-solid',
|
||||
tokens: lightTokens,
|
||||
bg: '--ol-danger-solid-bg',
|
||||
ink: '--ol-danger-solid-ink',
|
||||
},
|
||||
{
|
||||
label: 'dark danger-solid',
|
||||
tokens: darkTokens,
|
||||
bg: '--ol-danger-solid-bg',
|
||||
ink: '--ol-danger-solid-ink',
|
||||
},
|
||||
];
|
||||
|
||||
const contrastRatios = {};
|
||||
for (const pair of contrastPairs) {
|
||||
contrastRatios[pair.label] = assertSolidContrast(pair.tokens, pair.label, pair.bg, pair.ink);
|
||||
}
|
||||
|
||||
const mutedContrastPairs = [
|
||||
{
|
||||
label: 'light ink-4 on surface',
|
||||
tokens: lightTokens,
|
||||
bg: '--ol-surface',
|
||||
ink: '--ol-ink-4',
|
||||
},
|
||||
{
|
||||
label: 'light ink-4 on surface-2',
|
||||
tokens: lightTokens,
|
||||
bg: '--ol-surface-2',
|
||||
ink: '--ol-ink-4',
|
||||
},
|
||||
];
|
||||
|
||||
const mutedContrastRatios = {};
|
||||
for (const pair of mutedContrastPairs) {
|
||||
mutedContrastRatios[pair.label] = assertMutedContrast(pair.tokens, pair.label, pair.bg, pair.ink);
|
||||
}
|
||||
|
||||
const remoteTokens = parseCustomProperties(extractCssBlock(remoteStyle, ':root'));
|
||||
|
||||
const remoteMutedContrastPairs = [
|
||||
{
|
||||
label: 'remote ink-4 on surface',
|
||||
tokens: remoteTokens,
|
||||
bg: '--surface',
|
||||
ink: '--ink-4',
|
||||
},
|
||||
{
|
||||
label: 'remote ink-4 on surface-2',
|
||||
tokens: remoteTokens,
|
||||
bg: '--surface-2',
|
||||
ink: '--ink-4',
|
||||
},
|
||||
];
|
||||
|
||||
const remoteMutedContrastRatios = {};
|
||||
for (const pair of remoteMutedContrastPairs) {
|
||||
remoteMutedContrastRatios[pair.label] = assertMutedContrast(pair.tokens, pair.label, pair.bg, pair.ink);
|
||||
}
|
||||
|
||||
const olFrostBlock = extractCssBlock(globalCss, '.ol-frost');
|
||||
assert.doesNotMatch(
|
||||
olFrostBlock,
|
||||
/rgba\(\s*255\s*,\s*255\s*,\s*255/i,
|
||||
'.ol-frost in global.css must not hardcode white rgba background gradients',
|
||||
);
|
||||
assert.match(globalCss, /background:\s*var\(--ol-frost-bg\)/, '.ol-frost must use --ol-frost-bg token');
|
||||
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-input-ink:/,
|
||||
'tokens.css must define --ol-input-ink in dark theme',
|
||||
);
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-capsule-confirm-bg:/,
|
||||
'tokens.css must define --ol-capsule-confirm-bg in dark theme',
|
||||
);
|
||||
assert.match(
|
||||
tokens,
|
||||
/\[data-ol-theme='dark'\][\s\S]*--ol-capsule-confirm-ink:/,
|
||||
'tokens.css must define --ol-capsule-confirm-ink in dark theme',
|
||||
);
|
||||
|
||||
assert.match(globalCss, /\.ol-app-shell-bg\b/, 'global.css must expose .ol-app-shell-bg');
|
||||
assert.match(globalCss, /\.ol-aura-panel\b/, 'global.css must expose .ol-aura-panel');
|
||||
assert.doesNotMatch(globalCss, /@keyframes ol-aura-halo/, 'global.css must not add an animated halo');
|
||||
assert.match(globalCss, /\.ol-aura-card\b/, 'global.css must expose .ol-aura-card');
|
||||
assert.match(
|
||||
globalCss,
|
||||
/\.ol-aura-settings\[data-ol-mobile="true"\]/,
|
||||
'global.css must scope mobile settings radius to the settings element itself',
|
||||
);
|
||||
|
||||
assertUsesClassName(shell, 'ol-app-shell-bg', 'FloatingShell must use the app shell background class');
|
||||
assertUsesClassName(shell, 'ol-aura-sidebar', 'FloatingShell must expose an Aura sidebar hook');
|
||||
@@ -65,4 +380,108 @@ assertUsesClassName(shell, 'ol-aura-panel', 'FloatingShell must expose an Aura p
|
||||
assertUsesClassName(settingsModal, 'ol-aura-settings', 'SettingsModal must expose an Aura settings wrapper');
|
||||
assertUsesClassName(overview, 'ol-overview-hero', 'Overview must expose a high-visibility overview surface hook');
|
||||
|
||||
assert.match(
|
||||
settingsTabs,
|
||||
/import\s+\{[^}]*ThemeSection[^}]*\}\s+from\s+['"]\.\/ThemeSection['"]/,
|
||||
'tabs.tsx GeneralTab must import ThemeSection',
|
||||
);
|
||||
assert.match(settingsTabs, /<ThemeSection\s*\/?>/, 'tabs.tsx GeneralTab must render ThemeSection');
|
||||
|
||||
assert.match(
|
||||
themeMode,
|
||||
/prefers-color-scheme:\s*dark/,
|
||||
'themeMode.ts must listen for prefers-color-scheme: dark',
|
||||
);
|
||||
assert.match(
|
||||
themeMode,
|
||||
/data-ol-theme|olTheme|dataset\.olTheme/,
|
||||
'themeMode.ts must apply theme via data-ol-theme / dataset.olTheme',
|
||||
);
|
||||
|
||||
const forbiddenStyleCardLightBackgrounds = [
|
||||
/rgba\(\s*255\s*,\s*255\s*,\s*255/i,
|
||||
/rgba\(\s*248\s*,\s*250\s*,\s*252/i,
|
||||
/rgba\(\s*239\s*,\s*246\s*,\s*255/i,
|
||||
];
|
||||
|
||||
for (const pattern of forbiddenStyleCardLightBackgrounds) {
|
||||
assert.doesNotMatch(
|
||||
stylePage,
|
||||
pattern,
|
||||
'Style.tsx must not hardcode light style-card backgrounds (use --ol-style-* tokens)',
|
||||
);
|
||||
}
|
||||
|
||||
assert.match(
|
||||
stylePage,
|
||||
/--ol-style-card-bg/,
|
||||
'Style.tsx must reference --ol-style-card-bg for style pack surfaces',
|
||||
);
|
||||
assert.match(
|
||||
stylePage,
|
||||
/--ol-style-card-ink/,
|
||||
'Style.tsx must reference --ol-style-card-ink for style pack text',
|
||||
);
|
||||
assert.match(
|
||||
stylePage,
|
||||
/--ol-style-subtle-bg/,
|
||||
'Style.tsx must reference --ol-style-subtle-bg for editor subtle surfaces',
|
||||
);
|
||||
|
||||
const illegalCssStringPatterns = [
|
||||
/color:\s*'var\([^)]+\)';/,
|
||||
/background:\s*'var\([^)]+\)';/,
|
||||
];
|
||||
|
||||
const forbiddenInlineInkBackground = /background:\s*'var\(--ol-ink\)'/;
|
||||
|
||||
const forbiddenBlueOnAccentCombo =
|
||||
/background:[\s\S]{0,200}var\(--ol-blue\)[\s\S]{0,500}?color:[\s\S]{0,200}var\(--ol-on-accent\)|color:[\s\S]{0,200}var\(--ol-on-accent\)[\s\S]{0,500}?background:[\s\S]{0,200}var\(--ol-blue\)/;
|
||||
|
||||
const forbiddenErrOnAccentCombo =
|
||||
/background:[\s\S]{0,200}var\(--ol-err[^)]*\)[\s\S]{0,500}?color:[\s\S]{0,200}var\(--ol-on-accent\)|background:[\s\S]{0,200}var\(--ol-err[^)]*\)[\s\S]{0,500}?color:[\s\S]{0,200}var\(--ol-accent-solid-ink\)|color:[\s\S]{0,200}var\(--ol-on-accent\)[\s\S]{0,500}?background:[\s\S]{0,200}var\(--ol-err[^)]*\)|color:[\s\S]{0,200}var\(--ol-accent-solid-ink\)[\s\S]{0,500}?background:[\s\S]{0,200}var\(--ol-err[^)]*\)/;
|
||||
|
||||
for (const relPath of sourceFiles) {
|
||||
const source = await read(`src/${relPath}`);
|
||||
for (const pattern of illegalCssStringPatterns) {
|
||||
assert.doesNotMatch(
|
||||
source,
|
||||
pattern,
|
||||
`src/${relPath} must not use quoted CSS custom properties inside injected CSS strings`,
|
||||
);
|
||||
}
|
||||
if (relPath.endsWith('.tsx')) {
|
||||
assert.doesNotMatch(
|
||||
source,
|
||||
forbiddenInlineInkBackground,
|
||||
`src/${relPath} must not use --ol-ink as a button/solid background`,
|
||||
);
|
||||
assert.doesNotMatch(
|
||||
source,
|
||||
forbiddenBlueOnAccentCombo,
|
||||
`src/${relPath} must not pair background var(--ol-blue) with color var(--ol-on-accent) (use --ol-accent-solid-* tokens)`,
|
||||
);
|
||||
assert.doesNotMatch(
|
||||
source,
|
||||
forbiddenErrOnAccentCombo,
|
||||
`src/${relPath} must not pair background var(--ol-err) with color var(--ol-on-accent) or var(--ol-accent-solid-ink) (use --ol-danger-solid-* tokens)`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Aura skin contract OK');
|
||||
console.log(
|
||||
'Solid contrast ratios:',
|
||||
Object.fromEntries(
|
||||
Object.entries(contrastRatios).map(([label, ratio]) => [label, `${ratio.toFixed(2)}:1`]),
|
||||
),
|
||||
);
|
||||
console.log(
|
||||
'Muted contrast ratios:',
|
||||
Object.fromEntries(
|
||||
Object.entries({ ...mutedContrastRatios, ...remoteMutedContrastRatios }).map(([label, ratio]) => [
|
||||
label,
|
||||
`${ratio.toFixed(2)}:1`,
|
||||
]),
|
||||
),
|
||||
);
|
||||
@@ -22,7 +22,8 @@ const capsuleTsx = await readFile(new URL('../src/components/Capsule.tsx', impor
|
||||
const capsuleLayoutTs = await readFile(new URL('../src/lib/capsuleLayout.ts', import.meta.url), 'utf-8');
|
||||
const windowChromeTsx = await readFile(new URL('../src/components/WindowChrome.tsx', import.meta.url), 'utf-8');
|
||||
const floatingShellTsx = await readFile(new URL('../src/components/FloatingShell.tsx', import.meta.url), 'utf-8');
|
||||
const tokensCss = await readFile(new URL('../src/styles/tokens.css', import.meta.url), 'utf-8');
|
||||
const themeModeTs = await readFile(new URL('../src/lib/themeMode.ts', import.meta.url), 'utf-8');
|
||||
const platformTs = await readFile(new URL('../src/lib/platform.ts', import.meta.url), 'utf-8');
|
||||
|
||||
if (!capsuleWindow) {
|
||||
throw new Error('capsule window config missing');
|
||||
@@ -34,13 +35,31 @@ assertEqual(capsuleWindow.width, 220, 'windows capsule config keeps translation-
|
||||
assertEqual(capsuleWindow.height, 110, 'windows capsule config keeps translation-capable height baseline');
|
||||
assertEqual(capsuleWindow.transparent, true, 'capsule window should keep transparent visuals');
|
||||
assertEqual(capsuleWindow.alwaysOnTop, true, 'capsule window should stay above the focused app while recording');
|
||||
assertEqual(mainWindow.decorations, true, 'shared main window config should keep native macOS traffic lights');
|
||||
assertEqual(mainWindow.decorations, true, 'windows main window should keep native decorations');
|
||||
assertEqual(mainWindow.visible, false, 'windows main window should stay hidden until the intended first show point');
|
||||
|
||||
assertMatch(
|
||||
libRs,
|
||||
/#\[cfg\(target_os = "windows"\)\][\s\S]*?main\.set_decorations\(false\)/,
|
||||
'windows runtime should disable native chrome before the first show',
|
||||
/fn apply_windows_caption_theme[\s\S]*?DWMWA_USE_IMMERSIVE_DARK_MODE[\s\S]*?DWMWA_CAPTION_COLOR[\s\S]*?DWMWA_TEXT_COLOR[\s\S]*?DWMWA_BORDER_COLOR/,
|
||||
'windows runtime should sync immersive dark mode and caption/text/border colors',
|
||||
);
|
||||
|
||||
assertMatch(
|
||||
libRs,
|
||||
/#\[tauri::command\][\s\S]*?fn set_windows_caption_theme/,
|
||||
'windows caption theme should be exposed as a Tauri command',
|
||||
);
|
||||
|
||||
assertMatch(
|
||||
themeModeTs,
|
||||
/export function applyThemeMode[\s\S]*?syncWindowsCaptionTheme/,
|
||||
'applyThemeMode should sync Windows native caption theme',
|
||||
);
|
||||
|
||||
assertMatch(
|
||||
platformTs,
|
||||
/export async function syncWindowsCaptionTheme[\s\S]*?set_windows_caption_theme/,
|
||||
'platform IPC wrapper should invoke set_windows_caption_theme',
|
||||
);
|
||||
|
||||
assertMatch(
|
||||
@@ -49,10 +68,18 @@ assertMatch(
|
||||
'macOS capsule should show without taking the key window',
|
||||
);
|
||||
|
||||
if (!/function WindowsResizeHandles\(\)/.test(windowChromeTsx)) {
|
||||
throw new Error('windows frameless shell should expose explicit resize handles');
|
||||
const tokensCss = await readFile(new URL('../src/styles/tokens.css', import.meta.url), 'utf-8');
|
||||
|
||||
if (!/os === 'win' \|\| os === 'android' \? 0 : 14/.test(windowChromeTsx)) {
|
||||
throw new Error('windows main shell should rely on native decorations instead of a frameless chrome shell');
|
||||
}
|
||||
|
||||
assertMatch(
|
||||
windowChromeTsx,
|
||||
/\/\/ Windows: decorations:true 时外层不画圆角/,
|
||||
'windows WindowChrome should defer chrome to native decorations',
|
||||
);
|
||||
|
||||
assertMatch(
|
||||
windowChromeTsx,
|
||||
/const MAC_TITLEBAR_HEIGHT = 28;/,
|
||||
@@ -66,8 +93,8 @@ assertMatch(
|
||||
if (/standardWindowButton|setFrameOrigin: origin|tune_macos_main_window_controls/.test(libRs)) {
|
||||
throw new Error('macOS traffic lights should not be manually repositioned; keep native AppKit button frames visible');
|
||||
}
|
||||
if (!/action=\"close\"/.test(windowChromeTsx) || !/tone=\"danger\"/.test(windowChromeTsx)) {
|
||||
throw new Error('windows titlebar should keep the close button and danger hover treatment');
|
||||
if (!/className=\"ol-linux-close-btn\"/.test(windowChromeTsx)) {
|
||||
throw new Error('linux titlebar should keep the close button treatment');
|
||||
}
|
||||
assertMatch(
|
||||
tokensCss,
|
||||
@@ -75,12 +102,14 @@ assertMatch(
|
||||
'shared motion tokens should drive shell animations and transitions',
|
||||
);
|
||||
|
||||
if (!/startResizeDragging\(direction\)/.test(windowChromeTsx)) {
|
||||
throw new Error('windows resize handles should delegate edge dragging to Tauri');
|
||||
}
|
||||
assertMatch(
|
||||
windowChromeTsx,
|
||||
/function LinuxTitlebar\(\)/,
|
||||
'linux should keep the custom ol-linux-titlebar shell',
|
||||
);
|
||||
|
||||
if (!/borderRadius:\s*'var\(--ol-window-console-radius\)'/.test(floatingShellTsx)) {
|
||||
throw new Error('floating shell should consume the shared window-console radius');
|
||||
if (!/borderRadius:\s*'var\(--ol-r-lg\)'/.test(floatingShellTsx)) {
|
||||
throw new Error('floating shell should consume the shared radius token');
|
||||
}
|
||||
|
||||
assertMatch(
|
||||
|
||||
@@ -281,6 +281,7 @@ macro_rules! app_invoke_handler_desktop {
|
||||
commands::sherpa_onnx_asr_reveal_model_dir,
|
||||
commands::export_error_log,
|
||||
restart_app,
|
||||
set_windows_caption_theme,
|
||||
]
|
||||
};
|
||||
}
|
||||
@@ -507,9 +508,9 @@ fn run_desktop() {
|
||||
if let Err(e) = apply_mica(&main, None) {
|
||||
log::warn!("[main] mica failed: {e}");
|
||||
}
|
||||
// Win11 22H2+: 把原生标题栏底色调成白色，与应用 sidebar 视觉统一。
|
||||
// Win11 22H2+: 同步原生标题栏主题；前端就绪后会再调 set_windows_caption_theme。
|
||||
// 老版 Windows 静默失败，不阻塞。
|
||||
apply_windows_caption_color(&main);
|
||||
apply_windows_caption_theme(&main, false);
|
||||
}
|
||||
// 静默启动开关：prefs.start_minimized = true → 不弹主窗口，
|
||||
// 用户从菜单栏 / 托盘点击访问。开机自启时尤其有用，避免每次
|
||||
@@ -957,42 +958,85 @@ pub(crate) fn refresh_tray_microphone_menu(_app: &AppHandle) -> tauri::Result<()
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// 把 Win11 原生标题栏底色刷成白色，与应用 sidebar 视觉统一。需要 Win11 22H2+
|
||||
/// (Build 22621+) 才支持 `DWMWA_CAPTION_COLOR`(35)；老 Windows 上 DwmSetWindowAttribute
|
||||
/// 返回错误，仅打 warn 不阻塞启动。
|
||||
/// Win11 22H2+ (Build 22621+) 同步原生标题栏沉浸式暗色 / caption / text / border 色。
|
||||
/// 老 Windows 上 DwmSetWindowAttribute 返回错误，仅打 warn 不阻塞启动。
|
||||
#[cfg(target_os = "windows")]
|
||||
fn apply_windows_caption_color<R: Runtime>(window: &tauri::WebviewWindow<R>) {
|
||||
fn apply_windows_caption_theme<R: Runtime>(window: &tauri::WebviewWindow<R>, dark: bool) {
|
||||
use raw_window_handle::{HasWindowHandle, RawWindowHandle};
|
||||
use windows::Win32::Foundation::HWND;
|
||||
use windows::Win32::Graphics::Dwm::{DwmSetWindowAttribute, DWMWA_CAPTION_COLOR};
|
||||
use windows::Win32::Graphics::Dwm::{
|
||||
DwmSetWindowAttribute, DWMWA_BORDER_COLOR, DWMWA_CAPTION_COLOR, DWMWA_TEXT_COLOR,
|
||||
DWMWA_USE_IMMERSIVE_DARK_MODE,
|
||||
};
|
||||
|
||||
let handle = match window.window_handle().map(|h| h.as_raw()) {
|
||||
Ok(RawWindowHandle::Win32(handle)) => handle,
|
||||
Ok(other) => {
|
||||
log::warn!("[main] unexpected raw window handle for caption color: {other:?}");
|
||||
log::warn!("[main] unexpected raw window handle for caption theme: {other:?}");
|
||||
return;
|
||||
}
|
||||
Err(e) => {
|
||||
log::warn!("[main] read raw window handle for caption color failed: {e}");
|
||||
log::warn!("[main] read raw window handle for caption theme failed: {e}");
|
||||
return;
|
||||
}
|
||||
};
|
||||
let hwnd = HWND(handle.hwnd.get() as *mut core::ffi::c_void);
|
||||
|
||||
// COLORREF 0x00BBGGRR 编码——选用 rgb(245,245,247) 跟 WindowChrome 的 glass linear-gradient
|
||||
// 起始色一致，减小原生 caption bar 跟应用磨砂玻璃的色差（用户反馈：纯白 caption + 半透灰 glass
|
||||
// 色差很丑）。R=0xF5 G=0xF5 B=0xF7 → COLORREF = 0x00F7F5F5。
|
||||
let glass_match: u32 = 0x00F7F5F5;
|
||||
// COLORREF 0x00BBGGRR — light 对齐 WindowChrome glass 起始色 rgb(245,245,247)；
|
||||
// dark 对齐 tokens.css --ol-surface (#141922) / --ol-ink (#f4f7fb) / --ol-surface-2 (#1a202b)。
|
||||
let immersive_dark: i32 = i32::from(dark);
|
||||
let caption_color: u32 = if dark { 0x0022_1914 } else { 0x00F7_F5F5 };
|
||||
let text_color: u32 = if dark { 0x00FB_F7F4 } else { 0x002A_170F };
|
||||
let border_color: u32 = if dark { 0x002B_201A } else { 0x00E8_E8E8 };
|
||||
|
||||
unsafe {
|
||||
if let Err(e) = DwmSetWindowAttribute(
|
||||
set_dwm_window_attribute(
|
||||
hwnd,
|
||||
DWMWA_USE_IMMERSIVE_DARK_MODE,
|
||||
&immersive_dark,
|
||||
"immersive dark mode",
|
||||
);
|
||||
set_dwm_window_attribute(
|
||||
hwnd,
|
||||
DWMWA_CAPTION_COLOR,
|
||||
&glass_match as *const _ as *const core::ffi::c_void,
|
||||
std::mem::size_of_val(&glass_match) as u32,
|
||||
) {
|
||||
log::warn!("[main] set caption color failed (likely pre-22H2 Win): {e}");
|
||||
&caption_color,
|
||||
"caption color",
|
||||
);
|
||||
set_dwm_window_attribute(hwnd, DWMWA_TEXT_COLOR, &text_color, "text color");
|
||||
set_dwm_window_attribute(hwnd, DWMWA_BORDER_COLOR, &border_color, "border color");
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(target_os = "windows")]
|
||||
unsafe fn set_dwm_window_attribute<T>(
|
||||
hwnd: windows::Win32::Foundation::HWND,
|
||||
attribute: windows::Win32::Graphics::Dwm::DWMWINDOWATTRIBUTE,
|
||||
value: &T,
|
||||
label: &str,
|
||||
) {
|
||||
use windows::Win32::Graphics::Dwm::DwmSetWindowAttribute;
|
||||
|
||||
if let Err(e) = DwmSetWindowAttribute(
|
||||
hwnd,
|
||||
attribute,
|
||||
value as *const _ as *const core::ffi::c_void,
|
||||
std::mem::size_of_val(value) as u32,
|
||||
) {
|
||||
log::warn!("[main] set {label} failed (likely pre-22H2 Win): {e}");
|
||||
}
|
||||
}
|
||||
|
||||
/// 前端主题切换时同步主窗口原生标题栏；非 Windows 为 no-op。
|
||||
#[tauri::command]
|
||||
fn set_windows_caption_theme(app: AppHandle, dark: bool) {
|
||||
#[cfg(target_os = "windows")]
|
||||
if let Some(main) = app.get_webview_window("main") {
|
||||
apply_windows_caption_theme(&main, dark);
|
||||
}
|
||||
#[cfg(not(target_os = "windows"))]
|
||||
{
|
||||
let _ = (app, dark);
|
||||
}
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
|
||||
@@ -15,13 +15,17 @@
|
||||
--ink: #0a0a0b;
|
||||
--ink-2: #2a2a2d;
|
||||
--ink-3: rgba(10, 10, 11, 0.62);
|
||||
--ink-4: rgba(10, 10, 11, 0.42);
|
||||
--ink-4: rgba(10, 10, 11, 0.58);
|
||||
|
||||
/* 蓝色强调 */
|
||||
--blue: #2563eb;
|
||||
--blue-hover: #1d4ed8;
|
||||
--blue-soft: #eff4ff;
|
||||
--blue-ring: rgba(37, 99, 235, 0.22);
|
||||
--on-accent: #ffffff;
|
||||
--accent-solid-bg: var(--blue);
|
||||
--accent-solid-bg-hover: var(--blue-hover);
|
||||
--accent-solid-ink: var(--on-accent);
|
||||
|
||||
/* 状态色 */
|
||||
--ok: #16a34a;
|
||||
@@ -35,8 +39,13 @@
|
||||
--shadow-lg: 0 20px 60px -20px rgba(15, 17, 22, 0.18), 0 8px 32px -16px rgba(15, 17, 22, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* 圆角 */
|
||||
--control-radius: 8px;
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
--r-xl: 18px;
|
||||
--bubble-radius: var(--r-lg);
|
||||
--modal-radius: var(--r-xl);
|
||||
--r-2xl: 22px;
|
||||
--r-pill: 999px;
|
||||
|
||||
@@ -179,7 +188,7 @@ body {
|
||||
padding: 15px 18px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
color: var(--on-accent);
|
||||
border: none;
|
||||
border-radius: var(--r-lg);
|
||||
cursor: pointer;
|
||||
@@ -189,10 +198,10 @@ body {
|
||||
.btn:disabled { opacity: .5; cursor: default; }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--blue);
|
||||
background: var(--accent-solid-bg);
|
||||
box-shadow: 0 6px 18px -6px var(--blue-ring);
|
||||
}
|
||||
.btn-primary:active { background: var(--blue-hover); }
|
||||
.btn-primary:active { background: var(--accent-solid-bg-hover); }
|
||||
|
||||
.hint-error {
|
||||
color: var(--danger);
|
||||
@@ -230,10 +239,10 @@ body {
|
||||
.help-link {
|
||||
display: inline-block;
|
||||
padding: 9px 16px;
|
||||
border-radius: var(--r-md);
|
||||
border-radius: var(--control-radius);
|
||||
border: none;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
background: var(--accent-solid-bg);
|
||||
color: var(--accent-solid-ink);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
@@ -242,7 +251,7 @@ body {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.help-link:active { background: var(--blue-hover); }
|
||||
.help-link:active { background: var(--accent-solid-bg-hover); }
|
||||
.help-link-ghost {
|
||||
background: var(--surface);
|
||||
color: var(--blue);
|
||||
@@ -260,7 +269,7 @@ body {
|
||||
.app-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
border-radius: var(--control-radius);
|
||||
flex: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
@@ -275,7 +284,7 @@ body {
|
||||
display: inline-flex;
|
||||
background: var(--surface-2);
|
||||
border: 0.5px solid var(--line);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--r-lg);
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
@@ -288,13 +297,13 @@ body {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 7px 14px;
|
||||
border-radius: 9px;
|
||||
border-radius: var(--control-radius);
|
||||
cursor: pointer;
|
||||
transition: background .15s ease, color .15s ease;
|
||||
}
|
||||
.mode-btn.active {
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
background: var(--accent-solid-bg);
|
||||
color: var(--accent-solid-ink);
|
||||
}
|
||||
|
||||
/* ===== 录音主区 ===== */
|
||||
@@ -315,8 +324,8 @@ body {
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: var(--accent-solid-ink);
|
||||
background: linear-gradient(180deg, var(--accent-solid-bg-hover) 0%, var(--accent-solid-bg) 100%);
|
||||
box-shadow:
|
||||
0 16px 36px -10px rgba(37, 99, 235, .5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, .25);
|
||||
@@ -359,7 +368,7 @@ body {
|
||||
box-shadow: 0 16px 36px -10px rgba(220, 38, 38, .5);
|
||||
animation: breathe 1.6s ease-in-out infinite;
|
||||
}
|
||||
.record-btn.recording .record-btn-label { color: #fff; }
|
||||
.record-btn.recording .record-btn-label { color: var(--on-accent); }
|
||||
.record-btn.recording .record-btn-ring {
|
||||
opacity: 1;
|
||||
border-color: rgba(220, 38, 38, .4);
|
||||
@@ -498,7 +507,7 @@ body {
|
||||
cursor: pointer;
|
||||
transition: background .15s ease, color .15s ease;
|
||||
}
|
||||
.result-copy:active { background: var(--blue); color: #fff; }
|
||||
.result-copy:active { background: var(--accent-solid-bg); color: var(--accent-solid-ink); }
|
||||
.result-copy.copied { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
|
||||
|
||||
/* ===== 提示文字 ===== */
|
||||
@@ -570,7 +579,7 @@ body {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-4);
|
||||
background: rgba(255, 255, 255, .85);
|
||||
background: rgba(255, 255, 255, .92);
|
||||
backdrop-filter: blur(12px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(160%);
|
||||
border-top: 0.5px solid var(--line);
|
||||
|
||||
@@ -200,14 +200,14 @@ export function UpdateDialog({
|
||||
const installing = status === 'installing';
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.18)', display: 'grid', placeItems: 'center', zIndex: 40 }}>
|
||||
<div style={{ width: 360, borderRadius: 16, background: 'var(--ol-surface)', border: '0.5px solid var(--ol-line-strong)', boxShadow: '0 18px 42px rgba(0,0,0,0.18)', padding: 18 }}>
|
||||
<div style={{ width: 360, borderRadius: 'var(--ol-modal-radius)', background: 'var(--ol-surface)', border: '0.5px solid var(--ol-line-strong)', boxShadow: '0 18px 42px rgba(0,0,0,0.18)', padding: 18 }}>
|
||||
<div style={{ fontSize: 15, fontWeight: 650, marginBottom: 8 }}>{t(`settings.about.updateDialog.${status}.title`)}</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ol-ink-3)', lineHeight: 1.6, marginBottom: 14 }}>
|
||||
{t(`settings.about.updateDialog.${status}.desc`, { version })}
|
||||
</div>
|
||||
{(downloading || installing || status === 'downloaded') && (
|
||||
<div style={{ marginBottom: 14 }}>
|
||||
<div style={{ height: 8, borderRadius: 999, background: 'var(--ol-surface-2)', overflow: 'hidden', border: '0.5px solid var(--ol-line)' }}>
|
||||
<div style={{ height: 8, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-surface-2)', overflow: 'hidden', border: '0.5px solid var(--ol-line)' }}>
|
||||
<div style={{ height: '100%', width: `${status === 'downloaded' || installing ? 100 : progress ?? 8}%`, background: 'var(--ol-blue)', transition: 'width 0.18s var(--ol-motion-soft)' }} />
|
||||
</div>
|
||||
<div style={{ marginTop: 6, fontSize: 11, color: 'var(--ol-ink-4)' }}>
|
||||
|
||||
@@ -41,7 +41,7 @@ function AudioBars({ level }: AudioBarsProps) {
|
||||
display: 'inline-block',
|
||||
width: 3,
|
||||
height: base + (max - base) * visualVoice * env,
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: 'var(--ol-blue)',
|
||||
opacity: 0.82,
|
||||
transformOrigin: 'center',
|
||||
@@ -113,12 +113,12 @@ function CircleButton({ variant, enabled, onClick }: CircleButtonProps) {
|
||||
style={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 999,
|
||||
background: isCancel ? 'rgba(255, 255, 255, 0.55)' : 'rgba(255, 255, 255, 0.92)',
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: isCancel ? 'var(--ol-capsule-cancel-bg)' : 'var(--ol-capsule-confirm-bg)',
|
||||
backdropFilter: useBackdrop ? 'blur(12px) saturate(160%)' : 'none',
|
||||
WebkitBackdropFilter: useBackdrop ? 'blur(12px) saturate(160%)' : 'none',
|
||||
color: 'var(--ol-ink)',
|
||||
border: '0.8px solid rgba(0, 0, 0, 0.08)',
|
||||
color: isCancel ? 'var(--ol-capsule-cancel-ink)' : 'var(--ol-capsule-confirm-ink)',
|
||||
border: '0.8px solid var(--ol-glass-border)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -265,11 +265,11 @@ function Pill({ os, state, level, insertedChars, message, operating, onCancel, o
|
||||
width: metrics.width,
|
||||
height: metrics.height,
|
||||
boxSizing: metrics.boxSizing,
|
||||
borderRadius: 999,
|
||||
border: '1px solid rgba(255, 255, 255, 0.55)',
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: '1px solid var(--ol-glass-border)',
|
||||
boxShadow: os === 'win'
|
||||
? `0 10px 24px -14px rgba(0, 0, 0, ${(0.24 + ambient * 0.06).toFixed(3)}), 0 0 0 0.5px rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.8)`
|
||||
: `0 18px 50px -10px rgba(0, 0, 0, ${shadowAlpha.toFixed(3)}), 0 0 0 0.5px rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.8)`,
|
||||
? `0 10px 24px -14px rgba(0, 0, 0, ${(0.24 + ambient * 0.06).toFixed(3)}), var(--ol-pill-shadow)`
|
||||
: `0 18px 50px -10px rgba(0, 0, 0, ${shadowAlpha.toFixed(3)}), var(--ol-pill-shadow)`,
|
||||
color: 'var(--ol-ink)',
|
||||
fontFamily: 'var(--ol-font-sans)',
|
||||
transform: `scale(${scale.toFixed(4)})`,
|
||||
@@ -446,11 +446,11 @@ export function Capsule() {
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
padding: '3px 10px',
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
fontSize: 10.5,
|
||||
fontWeight: 600,
|
||||
color: 'var(--ol-blue)',
|
||||
background: 'rgba(255, 255, 255, 0.78)',
|
||||
background: 'var(--ol-glass-bg-strong)',
|
||||
backdropFilter: 'blur(20px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(20px) saturate(180%)',
|
||||
border: '0.5px solid rgba(37, 99, 235, 0.25)',
|
||||
@@ -465,7 +465,7 @@ export function Capsule() {
|
||||
willChange: 'opacity, transform',
|
||||
}}
|
||||
>
|
||||
<span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--ol-blue)' }} />
|
||||
<span style={{ width: 5, height: 5, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-blue)' }} />
|
||||
{t('capsule.translating')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
//
|
||||
// Ported verbatim from design_handoff_openless/variants.jsx::FloatingShell.
|
||||
|
||||
import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentType } from 'react';
|
||||
import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentType, type CSSProperties } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Icon } from './Icon';
|
||||
import { WindowChrome, detectOS, type OS } from './WindowChrome';
|
||||
@@ -199,6 +199,7 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
|
||||
return (
|
||||
<div
|
||||
className="ol-app-shell-bg"
|
||||
data-ol-mobile={mobileLayout ? 'true' : 'false'}
|
||||
style={{ flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', minHeight: 0, paddingTop: os === 'mac' ? 28 : 0 }}
|
||||
>
|
||||
|
||||
@@ -392,7 +393,11 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
|
||||
</div>
|
||||
|
||||
{mobileLayout && (
|
||||
<nav className="ol-aura-mobile-nav" aria-label="OpenLess">
|
||||
<nav
|
||||
className="ol-aura-mobile-nav"
|
||||
aria-label="OpenLess"
|
||||
style={{ '--ol-nav-count': NAV.length } as CSSProperties}
|
||||
>
|
||||
{NAV.map(n => {
|
||||
const active = !settingsOpen && currentTab === n.id;
|
||||
return (
|
||||
@@ -433,237 +438,6 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
|
||||
/>
|
||||
) : null}
|
||||
<AudioCueListener />
|
||||
|
||||
{/* tab 切换 + provider prompt + footer popover 公用的入场关键帧 */}
|
||||
<style>{`
|
||||
/* nav 三段视觉层次：
|
||||
基础态 → ink-3（中灰文字 + 透明底）
|
||||
hover → ink（深色文字 + 浅灰底） ← 让"翻译"等字词在悬停时高亮，跟基础/选中都拉开差距
|
||||
选中 → ink（深色文字 + 白色 pill 底，由 absolute pill 提供）
|
||||
inline color/fontWeight 留给 active 项写最高优先级；非 active 走 class，
|
||||
这样 :hover 能正确覆盖（CSS 不能盖 inline style）。 */
|
||||
.ol-nav-btn {
|
||||
color: var(--ol-ink-3);
|
||||
font-weight: 500;
|
||||
}
|
||||
.ol-aura-sidebar {
|
||||
padding: 14px 12px 14px;
|
||||
background: var(--ol-sidebar-bg);
|
||||
border-right: 1px solid var(--ol-sidebar-border);
|
||||
}
|
||||
.ol-aura-sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 10px 16px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 0;
|
||||
background: var(--ol-sidebar-brand-bg);
|
||||
border: 1px solid var(--ol-sidebar-brand-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ol-aura-sidebar-brand-mark {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.ol-aura-sidebar-brand-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--ol-font-display);
|
||||
color: var(--ol-ink);
|
||||
}
|
||||
.ol-aura-sidebar-brand-kicker {
|
||||
font-size: 10.5px;
|
||||
color: var(--ol-ink-4);
|
||||
font-family: var(--ol-font-mono);
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
.ol-aura-sidebar-pill {
|
||||
background: var(--ol-sidebar-pill-bg);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ol-sidebar-pill-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ol-aura-sidebar-nav-btn {
|
||||
padding: 8px 12px;
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.ol-aura-sidebar-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px 10px 0;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid var(--ol-sidebar-footer-border);
|
||||
}
|
||||
.ol-aura-sidebar-version {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 12px;
|
||||
font-family: var(--ol-font-sans);
|
||||
font-size: 11px;
|
||||
color: var(--ol-ink-4);
|
||||
background: var(--ol-sidebar-version-bg);
|
||||
border: 1px solid var(--ol-sidebar-version-border);
|
||||
border-radius: var(--ol-pill-radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ol-aura-beta-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ol-blue);
|
||||
background: rgba(37,99,235,0.10);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.ol-aura-sidebar-settings {
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ol-sidebar-settings-border);
|
||||
background: var(--ol-sidebar-settings-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ol-aura-sidebar-settings.ol-nav-btn-active {
|
||||
background: var(--ol-sidebar-settings-active-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ol-aura-console-main {
|
||||
border-radius: ${mobileLayout ? '0' : 'var(--ol-panel-radius)'};
|
||||
}
|
||||
.ol-aura-mobile-topbar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
|
||||
border-bottom: 1px solid var(--ol-sidebar-border);
|
||||
background: var(--ol-sidebar-bg);
|
||||
}
|
||||
.ol-aura-mobile-brand {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ol-aura-mobile-brand-mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.ol-aura-mobile-brand-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--ol-ink);
|
||||
line-height: 1.15;
|
||||
}
|
||||
.ol-aura-mobile-brand-section {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--ol-ink-4);
|
||||
font-family: var(--ol-font-mono);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ol-aura-mobile-settings {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
color: var(--ol-ink-3);
|
||||
background: var(--ol-sidebar-settings-bg);
|
||||
border: 1px solid var(--ol-sidebar-settings-border);
|
||||
}
|
||||
.ol-aura-mobile-settings-active {
|
||||
color: var(--ol-ink);
|
||||
background: var(--ol-sidebar-settings-active-bg);
|
||||
}
|
||||
.ol-aura-mobile-nav {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(${NAV.length}, minmax(0, 1fr));
|
||||
gap: 2px;
|
||||
padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
|
||||
border-top: 1px solid var(--ol-sidebar-border);
|
||||
background: var(--ol-sidebar-bg);
|
||||
}
|
||||
.ol-aura-mobile-nav-btn {
|
||||
min-width: 0;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
border-radius: 12px;
|
||||
color: var(--ol-ink-4);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.ol-aura-mobile-nav-btn span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ol-aura-mobile-nav-btn-active {
|
||||
color: var(--ol-ink);
|
||||
background: var(--ol-sidebar-pill-bg);
|
||||
border: 1px solid var(--ol-sidebar-pill-border);
|
||||
}
|
||||
.ol-nav-btn.ol-nav-btn-active {
|
||||
color: var(--ol-ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
.ol-nav-btn:not(.ol-nav-btn-active):hover {
|
||||
background: var(--ol-nav-hover-bg);
|
||||
color: var(--ol-ink);
|
||||
}
|
||||
@keyframes ol-page-slide {
|
||||
from { opacity: 0; transform: translate3d(10px, 0, 0) scale(.996); filter: blur(6px); }
|
||||
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
|
||||
}
|
||||
@keyframes ol-page-fadeout {
|
||||
from { opacity: 1; filter: blur(0); }
|
||||
to { opacity: 0; filter: blur(8px); }
|
||||
}
|
||||
@keyframes ol-prompt-fade {
|
||||
from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
|
||||
to { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
|
||||
}
|
||||
@keyframes ol-prompt-pop {
|
||||
from { opacity: 0; transform: translateY(6px) scale(.97); filter: blur(6px); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -689,10 +463,10 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
|
||||
<div
|
||||
style={{
|
||||
width: 360,
|
||||
borderRadius: 12,
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
background: 'var(--ol-surface)',
|
||||
border: '0.5px solid rgba(0,0,0,.08)',
|
||||
boxShadow: '0 24px 70px -24px rgba(15,17,22,.38), 0 0 0 0.5px rgba(0,0,0,.06)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
boxShadow: 'var(--ol-shadow-lg)',
|
||||
padding: 20,
|
||||
animation: 'ol-prompt-pop 0.26s var(--ol-motion-spring)',
|
||||
}}
|
||||
@@ -702,8 +476,8 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 8,
|
||||
background: 'rgba(37,99,235,0.10)',
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'var(--ol-blue-soft)',
|
||||
color: 'var(--ol-blue)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
@@ -724,7 +498,7 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
|
||||
style={{
|
||||
height: 32,
|
||||
padding: '0 13px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface)',
|
||||
color: 'var(--ol-ink-3)',
|
||||
@@ -742,10 +516,10 @@ function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void;
|
||||
style={{
|
||||
height: 32,
|
||||
padding: '0 14px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: 0,
|
||||
background: 'var(--ol-ink)',
|
||||
color: 'var(--ol-on-accent)',
|
||||
background: 'var(--ol-primary-solid-bg)',
|
||||
color: 'var(--ol-primary-solid-ink)',
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 12.5,
|
||||
fontWeight: 500,
|
||||
@@ -782,10 +556,10 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
|
||||
<div
|
||||
style={{
|
||||
width: 380,
|
||||
borderRadius: 12,
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
background: 'var(--ol-surface)',
|
||||
border: '0.5px solid rgba(0,0,0,.08)',
|
||||
boxShadow: '0 24px 70px -24px rgba(15,17,22,.38), 0 0 0 0.5px rgba(0,0,0,.06)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
boxShadow: 'var(--ol-shadow-lg)',
|
||||
padding: 20,
|
||||
animation: 'ol-prompt-pop 0.26s var(--ol-motion-spring)',
|
||||
}}
|
||||
@@ -795,8 +569,8 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
|
||||
style={{
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 8,
|
||||
background: 'rgba(37,99,235,0.10)',
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'var(--ol-blue-soft)',
|
||||
color: 'var(--ol-blue)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
@@ -817,7 +591,7 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
|
||||
style={{
|
||||
height: 32,
|
||||
padding: '0 13px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface)',
|
||||
color: 'var(--ol-ink-3)',
|
||||
@@ -835,10 +609,10 @@ function HotkeyModeMigrationPrompt({ onLater, onOpenSettings }: { onLater: () =>
|
||||
style={{
|
||||
height: 32,
|
||||
padding: '0 14px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: 0,
|
||||
background: 'var(--ol-ink)',
|
||||
color: 'var(--ol-on-accent)',
|
||||
background: 'var(--ol-primary-solid-bg)',
|
||||
color: 'var(--ol-primary-solid-ink)',
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 12.5,
|
||||
fontWeight: 500,
|
||||
|
||||
@@ -124,7 +124,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
|
||||
title={t('common.close')}
|
||||
onClick={close}
|
||||
style={{
|
||||
width: 28, height: 28, borderRadius: 8,
|
||||
width: 28, height: 28, borderRadius: 'var(--ol-control-radius)',
|
||||
display: 'inline-grid', placeItems: 'center',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface)',
|
||||
@@ -150,7 +150,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
|
||||
padding: 18, borderRadius: 12,
|
||||
padding: 18, borderRadius: 'var(--ol-r-lg)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface-2)',
|
||||
}}>
|
||||
@@ -174,7 +174,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
|
||||
</div>
|
||||
<div style={{ fontSize: 11.5, color: 'var(--ol-ink-4)', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
|
||||
<span style={{
|
||||
display: 'inline-block', width: 8, height: 8, borderRadius: 999,
|
||||
display: 'inline-block', width: 8, height: 8, borderRadius: 'var(--ol-pill-radius)',
|
||||
background: 'var(--ol-blue)', animation: 'ol-pulse 1.4s ease-in-out infinite',
|
||||
}} />
|
||||
{t('marketplace.oauth.waiting')}
|
||||
@@ -197,7 +197,7 @@ export function GithubLoginModal({ onClose, onSuccess }: GithubLoginModalProps)
|
||||
{phase.kind === 'error' && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div style={{
|
||||
padding: 12, borderRadius: 10,
|
||||
padding: 12, borderRadius: 'var(--ol-r-md)',
|
||||
border: '0.5px solid rgba(239,68,68,0.3)',
|
||||
background: 'rgba(239,68,68,0.06)',
|
||||
color: '#b91c1c',
|
||||
|
||||
@@ -49,7 +49,7 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
|
||||
style={{
|
||||
width: '100%', maxWidth: 1080, height: '100%', maxHeight: 720,
|
||||
background: 'var(--ol-surface)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
border: '0.5px solid rgba(0,0,0,.08)',
|
||||
boxShadow: '0 30px 80px -20px rgba(15,17,22,.35), 0 0 0 0.5px rgba(0,0,0,.06)',
|
||||
overflow: 'hidden',
|
||||
@@ -70,9 +70,9 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
|
||||
title={loggedIn ? t('marketplace.modal.loggedIn') : t('marketplace.modal.notLoggedIn')}
|
||||
style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
padding: '4px 10px', borderRadius: 999,
|
||||
padding: '4px 10px', borderRadius: 'var(--ol-pill-radius)',
|
||||
border: loggedIn ? '0.5px solid var(--ol-line)' : '0.5px solid rgba(239,68,68,0.32)',
|
||||
background: loggedIn ? 'rgba(255,255,255,0.85)' : 'rgba(239,68,68,0.08)',
|
||||
background: loggedIn ? 'var(--ol-glass-bg-strong)' : 'rgba(239,68,68,0.08)',
|
||||
color: loggedIn ? 'var(--ol-ink-2)' : 'var(--ol-red, #ef4444)',
|
||||
fontSize: 11.5, fontWeight: 500,
|
||||
cursor: 'default',
|
||||
@@ -92,8 +92,8 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
|
||||
position: 'absolute', top: 16, right: 16, zIndex: 3,
|
||||
width: 32, height: 32,
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
borderRadius: 8,
|
||||
background: 'rgba(255,255,255,0.85)',
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'var(--ol-glass-bg-strong)',
|
||||
color: 'var(--ol-ink-2)',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
cursor: 'default',
|
||||
@@ -107,7 +107,7 @@ export function MarketplaceModal({ onClose }: MarketplaceModalProps) {
|
||||
(e.currentTarget as HTMLButtonElement).style.color = 'var(--ol-ink)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.85)';
|
||||
(e.currentTarget as HTMLButtonElement).style.background = 'var(--ol-glass-bg-strong)';
|
||||
(e.currentTarget as HTMLButtonElement).style.color = 'var(--ol-ink-2)';
|
||||
}}
|
||||
aria-label={t('common.close')}
|
||||
|
||||
@@ -132,7 +132,7 @@ function AndroidOnboarding({ onComplete }: OnboardingProps) {
|
||||
key={step.id}
|
||||
style={{
|
||||
height: 4,
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: index <= stepIndex ? 'var(--ol-blue)' : 'var(--ol-line-soft)',
|
||||
}}
|
||||
/>
|
||||
@@ -143,7 +143,7 @@ function AndroidOnboarding({ onComplete }: OnboardingProps) {
|
||||
style={{
|
||||
background: 'var(--ol-surface)',
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
boxShadow: 'var(--ol-shadow-lg)',
|
||||
padding: 18,
|
||||
display: 'flex',
|
||||
@@ -347,7 +347,7 @@ function DesktopOnboarding({
|
||||
padding: 32,
|
||||
boxSizing: 'border-box',
|
||||
background: 'var(--ol-surface)',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
boxShadow: 'var(--ol-shadow-lg)',
|
||||
}}
|
||||
@@ -470,7 +470,7 @@ function AndroidStepCard({ children }: { children: ReactNode }) {
|
||||
flexDirection: 'column',
|
||||
gap: 12,
|
||||
padding: 14,
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-surface-2)',
|
||||
border: '0.5px solid var(--ol-line-soft)',
|
||||
minWidth: 0,
|
||||
@@ -488,7 +488,7 @@ function StatusBadge({ granted, label }: { granted: boolean; label: string }) {
|
||||
flexShrink: 0,
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
padding: '4px 8px',
|
||||
color: granted ? 'var(--ol-ok)' : 'var(--ol-ink-4)',
|
||||
background: granted ? 'rgba(40, 160, 90, 0.12)' : 'rgba(0,0,0,0.06)',
|
||||
@@ -526,9 +526,9 @@ function PermissionStep({ index, title, desc, status, actionLabel, onAction, dis
|
||||
style={{
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 999,
|
||||
background: granted ? 'var(--ol-blue)' : 'rgba(0,0,0,0.06)',
|
||||
color: granted ? '#fff' : 'var(--ol-ink-3)',
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: granted ? 'var(--ol-accent-solid-bg)' : 'rgba(0,0,0,0.06)',
|
||||
color: granted ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink-3)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -558,9 +558,9 @@ function PermissionStep({ index, title, desc, status, actionLabel, onAction, dis
|
||||
fontWeight: 500,
|
||||
fontFamily: 'inherit',
|
||||
border: 0,
|
||||
borderRadius: 8,
|
||||
background: granted ? 'var(--ol-surface-2)' : 'var(--ol-ink)',
|
||||
color: granted ? 'var(--ol-ink-3)' : '#fff',
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: granted ? 'var(--ol-surface-2)' : 'var(--ol-primary-solid-bg)',
|
||||
color: granted ? 'var(--ol-ink-3)' : 'var(--ol-primary-solid-ink)',
|
||||
cursor: disabled ? 'not-allowed' : 'default',
|
||||
opacity: disabled && !granted ? 0.6 : 1,
|
||||
transition: 'background 0.16s var(--ol-motion-quick), color 0.16s var(--ol-motion-quick), opacity 0.18s var(--ol-motion-soft), transform 0.12s var(--ol-motion-quick)',
|
||||
@@ -580,9 +580,9 @@ const primaryButtonStyle = {
|
||||
fontWeight: 600,
|
||||
fontFamily: 'inherit',
|
||||
border: 0,
|
||||
borderRadius: 10,
|
||||
background: 'var(--ol-ink)',
|
||||
color: '#fff',
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-primary-solid-bg)',
|
||||
color: 'var(--ol-primary-solid-ink)',
|
||||
cursor: 'default',
|
||||
} as const;
|
||||
|
||||
@@ -594,7 +594,7 @@ const secondaryButtonStyle = {
|
||||
fontWeight: 600,
|
||||
fontFamily: 'inherit',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-surface)',
|
||||
color: 'var(--ol-ink-2)',
|
||||
cursor: 'default',
|
||||
@@ -607,7 +607,7 @@ const plainButtonStyle = {
|
||||
fontWeight: 500,
|
||||
fontFamily: 'inherit',
|
||||
border: 0,
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'transparent',
|
||||
color: 'var(--ol-ink-4)',
|
||||
cursor: 'default',
|
||||
@@ -616,7 +616,7 @@ const plainButtonStyle = {
|
||||
const footerHintStyle = {
|
||||
marginTop: 18,
|
||||
padding: '12px 14px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'var(--ol-surface-2)',
|
||||
fontSize: 11.5,
|
||||
color: 'var(--ol-ink-3)',
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
// 「设置」还要再面对第二个侧栏。现在拍平成单层 —— 通用 / 服务 / 隐私 / 高级 /
|
||||
// 个性化 / 关于 六个 tab。每个 tab 的内容见 pages/settings/。
|
||||
//
|
||||
// 设计原则：每个可见控件都必须可用。没有后端支撑的占位（账号 / 主题切换 等）
|
||||
// 不在此弹窗出现。
|
||||
// 设计原则：每个可见控件都必须可用。没有后端支撑的占位（如账号）不在此弹窗出现。
|
||||
|
||||
import { useLayoutEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -80,6 +79,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
|
||||
|
||||
<div
|
||||
className="ol-aura-settings"
|
||||
data-ol-mobile={mobile ? 'true' : 'false'}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: '100%',
|
||||
@@ -175,7 +175,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: 'absolute', top: 14, right: 14, zIndex: 2,
|
||||
width: 28, height: 28, border: 0, borderRadius: 999,
|
||||
width: 28, height: 28, border: 0, borderRadius: 'var(--ol-pill-radius)',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
cursor: 'default',
|
||||
}}
|
||||
@@ -210,73 +210,6 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>{`
|
||||
.ol-aura-settings {
|
||||
background: var(--ol-panel-bg);
|
||||
border-radius: ${mobile ? '0' : 'var(--ol-shell-radius)'};
|
||||
border: 1px solid var(--ol-panel-border);
|
||||
box-shadow: var(--ol-panel-shadow);
|
||||
}
|
||||
.ol-aura-settings-rail {
|
||||
padding: ${mobile ? 'calc(10px + env(safe-area-inset-top, 0px)) 10px 8px' : '20px 14px'};
|
||||
gap: ${mobile ? '8px' : '16px'};
|
||||
background: var(--ol-settings-rail-bg);
|
||||
border-right: ${mobile ? '0' : '1px solid var(--ol-settings-rail-border)'};
|
||||
border-bottom: ${mobile ? '1px solid var(--ol-settings-rail-border)' : '0'};
|
||||
}
|
||||
.ol-aura-settings-pill {
|
||||
background: var(--ol-sidebar-pill-bg);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ol-sidebar-pill-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ol-aura-settings-nav-btn {
|
||||
padding: ${mobile ? '8px 11px' : '7px 10px'};
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
|
||||
}
|
||||
.ol-aura-settings-nav-btn.ol-nav-btn-active {
|
||||
background: ${mobile ? 'var(--ol-sidebar-pill-bg)' : 'transparent'};
|
||||
border: ${mobile ? '1px solid var(--ol-sidebar-pill-border)' : '0'};
|
||||
}
|
||||
.ol-aura-settings-links {
|
||||
display: flex;
|
||||
flex-direction: ${mobile ? 'row' : 'column'};
|
||||
gap: 1px;
|
||||
padding-top: ${mobile ? '0' : '10px'};
|
||||
padding-left: ${mobile ? '8px' : '0'};
|
||||
border-top: ${mobile ? '0' : '1px solid var(--ol-settings-links-border)'};
|
||||
border-left: ${mobile ? '1px solid var(--ol-settings-links-border)' : '0'};
|
||||
overflow-x: ${mobile ? 'auto' : 'visible'};
|
||||
}
|
||||
.ol-aura-settings-content {
|
||||
background: var(--ol-settings-content-bg);
|
||||
}
|
||||
.ol-aura-settings-close {
|
||||
background: var(--ol-settings-close-bg);
|
||||
color: var(--ol-ink-3);
|
||||
transition: background 0.16s var(--ol-motion-quick);
|
||||
}
|
||||
.ol-aura-settings-close:hover {
|
||||
background: var(--ol-settings-close-hover-bg);
|
||||
}
|
||||
.ol-aura-settings-title {
|
||||
padding: ${mobile ? '16px 48px 8px 16px' : '24px 28px 10px'};
|
||||
font-size: ${mobile ? '20px' : '22px'};
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
font-family: var(--ol-font-display);
|
||||
color: var(--ol-ink);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -128,10 +128,10 @@ export function ShortcutRecorder({
|
||||
const recordButtonStyle: CSSProperties = {
|
||||
fontSize: 12,
|
||||
padding: '5px 14px',
|
||||
background: recording ? 'rgba(37,99,235,0.12)' : 'var(--ol-blue)',
|
||||
color: recording ? 'var(--ol-blue)' : '#fff',
|
||||
background: recording ? 'rgba(37,99,235,0.12)' : 'var(--ol-accent-solid-bg)',
|
||||
color: recording ? 'var(--ol-blue)' : 'var(--ol-accent-solid-ink)',
|
||||
border: 0,
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
fontFamily: 'inherit',
|
||||
fontWeight: 500,
|
||||
cursor: recording || disabled ? 'default' : 'pointer',
|
||||
@@ -144,7 +144,7 @@ export function ShortcutRecorder({
|
||||
background: 'transparent',
|
||||
color: 'var(--ol-ink-4)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
fontFamily: 'inherit',
|
||||
fontWeight: 500,
|
||||
cursor: recording ? 'default' : 'pointer',
|
||||
@@ -160,7 +160,7 @@ export function ShortcutRecorder({
|
||||
return (
|
||||
<div style={rootStyle}>
|
||||
<div style={recorderRowStyle}>
|
||||
<span style={{ padding: '4px 10px', borderRadius: 6, background: 'rgba(0,0,0,0.06)', fontSize: 13, fontFamily: 'var(--ol-font-mono)', fontWeight: 500, color: 'var(--ol-ink)' }}>
|
||||
<span style={{ padding: '4px 10px', borderRadius: 'var(--ol-r-sm)', background: 'rgba(0,0,0,0.06)', fontSize: 13, fontFamily: 'var(--ol-font-mono)', fontWeight: 500, color: 'var(--ol-ink)' }}>
|
||||
{formatComboLabel(value)}
|
||||
</span>
|
||||
<div style={controlsGroupStyle}>
|
||||
@@ -195,7 +195,7 @@ export function ShortcutRecorder({
|
||||
tabIndex={-1}
|
||||
onKeyDown={onKeyDown}
|
||||
onKeyUp={onKeyUp}
|
||||
style={{ padding: '8px 12px', borderRadius: 8, background: 'rgba(37,99,235,0.06)', border: '1px solid rgba(37,99,235,0.2)', fontSize: 12, color: 'var(--ol-blue)', outline: 'none' }}
|
||||
style={{ padding: '8px 12px', borderRadius: 'var(--ol-control-radius)', background: 'rgba(37,99,235,0.06)', border: '1px solid rgba(37,99,235,0.2)', fontSize: 12, color: 'var(--ol-blue)', outline: 'none' }}
|
||||
ref={el => el?.focus()}
|
||||
>
|
||||
{t('settings.recording.comboRecordHint')}
|
||||
|
||||
@@ -22,7 +22,7 @@ export function Modal({ children, onClose, zIndex = 50, width = 'min(560px, 100%
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.22)',
|
||||
background: 'var(--ol-overlay-bg)',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
zIndex,
|
||||
@@ -36,10 +36,10 @@ export function Modal({ children, onClose, zIndex = 50, width = 'min(560px, 100%
|
||||
width,
|
||||
maxHeight: '85vh',
|
||||
overflow: 'auto',
|
||||
borderRadius: 16,
|
||||
background: 'var(--ol-surface)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
boxShadow: '0 18px 42px rgba(0,0,0,0.18)',
|
||||
borderRadius: 'var(--ol-modal-radius)',
|
||||
background: 'var(--ol-card-bg)',
|
||||
border: '0.5px solid var(--ol-card-border)',
|
||||
boxShadow: 'var(--ol-shadow-lg)',
|
||||
padding: 22,
|
||||
animation: 'ol-modal-card-in 0.24s var(--ol-motion-spring)',
|
||||
}}
|
||||
|
||||
@@ -1,32 +1,41 @@
|
||||
// SegSimple — segmented control used in the Settings modal sub-sections.
|
||||
|
||||
import { useState } from 'react';
|
||||
export type SegOption = { value: string; label: string };
|
||||
|
||||
interface SegSimpleProps {
|
||||
options: string[];
|
||||
active: string;
|
||||
options: SegOption[];
|
||||
value: string;
|
||||
onChange?: (value: string) => void;
|
||||
}
|
||||
|
||||
export function SegSimple({ options, active }: SegSimpleProps) {
|
||||
const [v, setV] = useState(active);
|
||||
export function SegSimple({ options, value, onChange }: SegSimpleProps) {
|
||||
return (
|
||||
<div
|
||||
role="radiogroup"
|
||||
style={{ display: 'inline-flex', padding: 2, borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-segmented-bg)' }}
|
||||
>
|
||||
{options.map((o) => {
|
||||
const selected = value === o.value;
|
||||
return (
|
||||
<div style={{ display: 'inline-flex', padding: 2, borderRadius: 8, background: 'rgba(0,0,0,0.05)' }}>
|
||||
{options.map((o) => (
|
||||
<button
|
||||
key={o}
|
||||
onClick={() => setV(o)}
|
||||
key={o.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={selected}
|
||||
onClick={() => onChange?.(o.value)}
|
||||
style={{
|
||||
padding: '5px 12px', fontSize: 12, fontWeight: 500, border: 0, borderRadius: 6,
|
||||
padding: '5px 12px', fontSize: 12, fontWeight: 500, border: 0, borderRadius: 'var(--ol-r-sm)',
|
||||
fontFamily: 'inherit',
|
||||
background: v === o ? '#fff' : 'transparent',
|
||||
color: v === o ? 'var(--ol-ink)' : 'var(--ol-ink-3)',
|
||||
boxShadow: v === o ? '0 1px 2px rgba(0,0,0,.08)' : 'none',
|
||||
background: selected ? 'var(--ol-segmented-active-bg)' : 'transparent',
|
||||
color: selected ? 'var(--ol-ink)' : 'var(--ol-ink-3)',
|
||||
boxShadow: selected ? 'var(--ol-segmented-active-shadow)' : 'none',
|
||||
cursor: 'default',
|
||||
}}
|
||||
>
|
||||
{o}
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -60,7 +60,7 @@ const DEFAULT_TRIGGER_STYLE: CSSProperties = {
|
||||
height: 32,
|
||||
fontSize: 12.5,
|
||||
fontFamily: 'inherit',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface-2)',
|
||||
color: 'var(--ol-ink)',
|
||||
@@ -322,12 +322,12 @@ export function SelectLite({
|
||||
maxHeight: 280,
|
||||
overflowY: 'auto',
|
||||
padding: 4,
|
||||
borderRadius: 10,
|
||||
border: '0.5px solid rgba(0, 0, 0, 0.10)',
|
||||
background: 'rgba(252, 252, 254, 0.94)',
|
||||
backdropFilter: 'blur(20px) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(20px) saturate(180%)',
|
||||
boxShadow: '0 12px 30px -10px rgba(15, 17, 22, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.06)',
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-glass-bg-strong)',
|
||||
backdropFilter: 'blur(var(--ol-glass-blur)) saturate(180%)',
|
||||
WebkitBackdropFilter: 'blur(var(--ol-glass-blur)) saturate(180%)',
|
||||
boxShadow: 'var(--ol-shadow-md)',
|
||||
zIndex: 9999,
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 12.5,
|
||||
@@ -357,11 +357,11 @@ export function SelectLite({
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
padding: '7px 10px',
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
cursor: option.disabled ? 'not-allowed' : 'default',
|
||||
opacity: option.disabled ? 0.45 : 1,
|
||||
background: isHighlighted && !option.disabled
|
||||
? 'rgba(37, 99, 235, 0.10)'
|
||||
? 'var(--ol-blue-soft)'
|
||||
: 'transparent',
|
||||
color: isSelected ? 'var(--ol-blue)' : 'var(--ol-ink)',
|
||||
fontWeight: isSelected ? 600 : 500,
|
||||
|
||||
@@ -14,8 +14,8 @@ export function SwitchLite({ on: initial = false }: SwitchLiteProps) {
|
||||
className="ol-focus-ring"
|
||||
onClick={() => setOn(!on)}
|
||||
style={{
|
||||
position: 'relative', width: 32, height: 18, borderRadius: 999, border: 0,
|
||||
background: on ? 'var(--ol-blue)' : 'rgba(0,0,0,0.18)',
|
||||
position: 'relative', width: 32, height: 18, borderRadius: 'var(--ol-pill-radius)', border: 0,
|
||||
background: on ? 'var(--ol-blue)' : 'var(--ol-toggle-off-bg)',
|
||||
cursor: 'default',
|
||||
outline: 'none',
|
||||
}}
|
||||
@@ -23,7 +23,7 @@ export function SwitchLite({ on: initial = false }: SwitchLiteProps) {
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute', top: 2, left: on ? 16 : 2,
|
||||
width: 14, height: 14, borderRadius: 999, background: '#fff',
|
||||
width: 14, height: 14, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-toggle-knob)',
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,.25)', transition: 'left .16s var(--ol-motion-spring)',
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -958,6 +958,14 @@ export const en: typeof zhCN = {
|
||||
ko: '한국어 (Beta)',
|
||||
restartHint: 'Some native menus (system tray, etc.) may require an app restart to fully switch.',
|
||||
},
|
||||
appearance: {
|
||||
title: 'Appearance',
|
||||
desc: 'Choose light or dark mode, or follow your system setting.',
|
||||
label: 'Theme',
|
||||
followSystem: 'Follow system',
|
||||
light: 'Light',
|
||||
dark: 'Dark',
|
||||
},
|
||||
remoteInput: {
|
||||
title: 'Remote Input',
|
||||
enableLabel: 'Enable remote input',
|
||||
|
||||
@@ -926,6 +926,14 @@ export const ja: typeof zhCN = {
|
||||
ko: '한국어 (Beta)',
|
||||
restartHint: '一部のネイティブメニュー（トレイ等）は再起動後に反映されます。',
|
||||
},
|
||||
appearance: {
|
||||
title: '外観',
|
||||
desc: 'ライト／ダークモードを選ぶか、システム設定に従います。',
|
||||
label: 'テーマ',
|
||||
followSystem: 'システムに従う',
|
||||
light: 'ライト',
|
||||
dark: 'ダーク',
|
||||
},
|
||||
remoteInput: {
|
||||
title: 'リモート入力',
|
||||
enableLabel: 'リモート入力を有効化',
|
||||
|
||||
@@ -926,6 +926,14 @@ export const ko: typeof zhCN = {
|
||||
ko: '한국어 (Beta)',
|
||||
restartHint: '일부 네이티브 메뉴(트레이 등)는 앱 재시작 후 반영될 수 있습니다.',
|
||||
},
|
||||
appearance: {
|
||||
title: '외관',
|
||||
desc: '라이트/다크 모드를 선택하거나 시스템 설정을 따릅니다.',
|
||||
label: '테마',
|
||||
followSystem: '시스템 따라가기',
|
||||
light: '라이트',
|
||||
dark: '다크',
|
||||
},
|
||||
remoteInput: {
|
||||
title: '원격 입력',
|
||||
enableLabel: '원격 입력 활성화',
|
||||
|
||||
@@ -956,6 +956,14 @@ export const zhCN = {
|
||||
ko: '한국어 (Beta)',
|
||||
restartHint: '部分原生菜单（系统托盘等）可能需要重启 App 才会切换。',
|
||||
},
|
||||
appearance: {
|
||||
title: '外观',
|
||||
desc: '选择浅色或深色模式，或跟随系统设置。',
|
||||
label: '主题',
|
||||
followSystem: '跟随系统',
|
||||
light: '浅色',
|
||||
dark: '深色',
|
||||
},
|
||||
remoteInput: {
|
||||
title: '远程输入',
|
||||
enableLabel: '启用远程输入',
|
||||
|
||||
@@ -924,6 +924,14 @@ export const zhTW: typeof zhCN = {
|
||||
ko: '한국어 (Beta)',
|
||||
restartHint: '部分原生菜單（系統托盤等）可能需要重啓 App 纔會切換。',
|
||||
},
|
||||
appearance: {
|
||||
title: '外觀',
|
||||
desc: '選擇淺色或深色模式，或跟隨系統設置。',
|
||||
label: '主題',
|
||||
followSystem: '跟隨系統',
|
||||
light: '淺色',
|
||||
dark: '深色',
|
||||
},
|
||||
remoteInput: {
|
||||
title: '遠端輸入',
|
||||
enableLabel: '啟用遠端輸入',
|
||||
|
||||
@@ -120,3 +120,21 @@ export async function getPlatformCapabilities(): Promise<PlatformCapabilities> {
|
||||
export function getCachedPlatformCapabilities(): PlatformCapabilities | null {
|
||||
return cachedCapabilities;
|
||||
}
|
||||
|
||||
/** Win11 原生标题栏暗色同步；非 Windows / 非 Tauri 为 no-op。 */
|
||||
export async function syncWindowsCaptionTheme(dark: boolean): Promise<void> {
|
||||
if (typeof window === 'undefined') return;
|
||||
if (detectOS() !== 'win') return;
|
||||
|
||||
const isTauri =
|
||||
globalThis.window !== undefined &&
|
||||
'__TAURI_INTERNALS__' in globalThis.window;
|
||||
if (!isTauri) return;
|
||||
|
||||
try {
|
||||
const { invoke } = await import('@tauri-apps/api/core');
|
||||
await invoke('set_windows_caption_theme', { dark });
|
||||
} catch (err) {
|
||||
console.warn('[platform] set_windows_caption_theme failed', err);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// 主题模式 — localStorage 持久化，通过 html[data-ol-theme] 切换暗色 token 集。
|
||||
|
||||
import { syncWindowsCaptionTheme } from './platform';
|
||||
|
||||
export type ThemeMode = 'system' | 'light' | 'dark';
|
||||
export type ResolvedThemeMode = 'light' | 'dark';
|
||||
|
||||
const THEME_MODE_KEY = 'ol-theme-mode';
|
||||
|
||||
function systemPrefersDark(): boolean {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
export function resolveThemeMode(mode: ThemeMode): ResolvedThemeMode {
|
||||
if (mode === 'dark') return 'dark';
|
||||
if (mode === 'light') return 'light';
|
||||
return systemPrefersDark() ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
export function readThemeMode(): ThemeMode {
|
||||
try {
|
||||
const v = window.localStorage.getItem(THEME_MODE_KEY);
|
||||
if (v === 'system' || v === 'light' || v === 'dark') return v;
|
||||
} catch { /* localStorage 不可用：忽略，落回默认 */ }
|
||||
return 'system';
|
||||
}
|
||||
|
||||
export function applyThemeMode(mode: ThemeMode): void {
|
||||
const resolved = resolveThemeMode(mode);
|
||||
const root = document.documentElement;
|
||||
if (resolved === 'dark') {
|
||||
root.dataset.olTheme = 'dark';
|
||||
} else {
|
||||
delete root.dataset.olTheme;
|
||||
}
|
||||
void syncWindowsCaptionTheme(resolved === 'dark');
|
||||
}
|
||||
|
||||
export function setThemeMode(mode: ThemeMode): ThemeMode {
|
||||
try { window.localStorage.setItem(THEME_MODE_KEY, mode); } catch { /* 忽略 */ }
|
||||
applyThemeMode(mode);
|
||||
return mode;
|
||||
}
|
||||
|
||||
export function subscribeThemeMode(): () => void {
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const onChange = () => {
|
||||
if (readThemeMode() === 'system') applyThemeMode('system');
|
||||
};
|
||||
mq.addEventListener('change', onChange);
|
||||
return () => mq.removeEventListener('change', onChange);
|
||||
}
|
||||
@@ -3,9 +3,14 @@ import ReactDOM from "react-dom/client";
|
||||
import { App } from "./App";
|
||||
import { detectOS } from "./components/WindowChrome";
|
||||
import i18n from "./i18n"; // 副作用：触发 i18next init
|
||||
import { applyThemeMode, readThemeMode, subscribeThemeMode } from "./lib/themeMode";
|
||||
import "./styles/tokens.css";
|
||||
import "./styles/global.css";
|
||||
|
||||
// 首帧前应用主题，避免暗色偏好下先闪一帧亮色。
|
||||
applyThemeMode(readThemeMode());
|
||||
subscribeThemeMode();
|
||||
|
||||
import type { OS } from "./components/WindowChrome";
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
@@ -238,7 +238,7 @@ export function History() {
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '6px 10px',
|
||||
border: '0.5px solid var(--ol-line-strong)', borderRadius: 8,
|
||||
border: '0.5px solid var(--ol-line-strong)', borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'var(--ol-surface-2)', color: 'var(--ol-ink-3)',
|
||||
}}>
|
||||
<Icon name="search" size={12} />
|
||||
@@ -264,7 +264,7 @@ export function History() {
|
||||
key={f.id}
|
||||
onClick={() => setFilter(f.id)}
|
||||
style={{
|
||||
padding: '3px 9px', fontSize: 11, borderRadius: 999,
|
||||
padding: '3px 9px', fontSize: 11, borderRadius: 'var(--ol-pill-radius)',
|
||||
border: '0.5px solid ' + (filter === f.id ? 'var(--ol-pill-selected-border)' : 'var(--ol-line-strong)'),
|
||||
background: filter === f.id ? 'var(--ol-pill-selected-bg)' : 'transparent',
|
||||
color: filter === f.id ? 'var(--ol-pill-selected-ink)' : 'var(--ol-ink-3)',
|
||||
@@ -277,7 +277,7 @@ export function History() {
|
||||
</div>
|
||||
<div className="ol-thinscroll" style={{ flex: 1, overflow: 'auto', padding: 6 }}>
|
||||
{actionError && (
|
||||
<div style={{ margin: 8, padding: '9px 10px', borderRadius: 8, background: 'rgba(239,68,68,0.08)', color: 'var(--ol-red, #ef4444)', fontSize: 12, lineHeight: 1.45 }}>
|
||||
<div style={{ margin: 8, padding: '9px 10px', borderRadius: 'var(--ol-control-radius)', background: 'rgba(239,68,68,0.08)', color: 'var(--ol-red, #ef4444)', fontSize: 12, lineHeight: 1.45 }}>
|
||||
{actionError}
|
||||
</div>
|
||||
)}
|
||||
@@ -302,7 +302,7 @@ export function History() {
|
||||
style={{
|
||||
width: '100%', padding: '10px 12px', textAlign: 'left',
|
||||
display: 'flex', flexDirection: 'column', gap: 4,
|
||||
border: 0, borderRadius: 8,
|
||||
border: 0, borderRadius: 'var(--ol-control-radius)',
|
||||
background: selectedId === s.id ? 'rgba(37,99,235,0.06)' : 'transparent',
|
||||
boxShadow: selectedId === s.id ? 'inset 2px 0 0 var(--ol-blue)' : 'none',
|
||||
cursor: 'default', fontFamily: 'inherit', marginBottom: 1,
|
||||
@@ -363,13 +363,13 @@ export function History() {
|
||||
/>
|
||||
)}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 12 }}>
|
||||
<div style={{ padding: 14, border: '0.5px solid var(--ol-line)', borderRadius: 10, background: 'var(--ol-surface-2)' }}>
|
||||
<div style={{ padding: 14, border: '0.5px solid var(--ol-line)', borderRadius: 'var(--ol-r-md)', background: 'var(--ol-surface-2)' }}>
|
||||
<Pill size="sm" tone="outline" style={{ marginBottom: 10 }}>{t('history.rawLabel')}</Pill>
|
||||
<p style={{ margin: 0, fontSize: 13, lineHeight: 1.7, color: 'var(--ol-ink-2)', whiteSpace: 'pre-wrap' }}>
|
||||
{item.rawTranscript || t('history.rawEmpty')}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ padding: 14, border: '0.5px solid var(--ol-blue)', borderRadius: 10, background: 'var(--ol-blue-soft)' }}>
|
||||
<div style={{ padding: 14, border: '0.5px solid var(--ol-blue)', borderRadius: 'var(--ol-r-md)', background: 'var(--ol-blue-soft)' }}>
|
||||
<Pill size="sm" tone="blue" style={{ marginBottom: 10 }}>{MODE_LABEL[item.mode]}</Pill>
|
||||
<p style={{ margin: 0, fontSize: 13, lineHeight: 1.7, color: 'var(--ol-ink)', whiteSpace: 'pre-line' }}>
|
||||
{item.finalText}
|
||||
|
||||
@@ -414,11 +414,11 @@ const shellStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
overflow: 'hidden',
|
||||
border: '0.5px solid rgba(0, 0, 0, 0.12)',
|
||||
background: 'rgba(246, 247, 250, 0.88)',
|
||||
boxShadow: '0 18px 44px -18px rgba(15,17,22,.28), 0 0 0 0.5px rgba(255,255,255,.7) inset',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-panel-bg)',
|
||||
boxShadow: 'var(--ol-shadow-lg)',
|
||||
fontFamily: 'var(--ol-font-sans)',
|
||||
color: 'var(--ol-ink)',
|
||||
isolation: 'isolate',
|
||||
@@ -430,9 +430,8 @@ const toolbarStyle: CSSProperties = {
|
||||
alignItems: 'center',
|
||||
padding: '0 8px',
|
||||
borderBottom: '0.5px solid rgba(0, 0, 0, 0.08)',
|
||||
background:
|
||||
'linear-gradient(180deg, rgba(255,255,255,0.74), rgba(238,240,245,0.58))',
|
||||
boxShadow: '0 1px 0 rgba(255,255,255,.55) inset',
|
||||
background: 'var(--ol-panel-bg)',
|
||||
boxShadow: 'var(--ol-shadow-sm)',
|
||||
backdropFilter: 'blur(18px) saturate(150%)',
|
||||
WebkitBackdropFilter: 'blur(18px) saturate(150%)',
|
||||
flexShrink: 0,
|
||||
@@ -444,7 +443,7 @@ const closeBtnStyle: CSSProperties = {
|
||||
width: 22,
|
||||
height: 22,
|
||||
border: 0,
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -479,10 +478,10 @@ const roleLabelStyle: CSSProperties = {
|
||||
const userBubbleStyle: CSSProperties = {
|
||||
maxWidth: '85%',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
borderBottomRightRadius: 4,
|
||||
background: 'var(--ol-blue)',
|
||||
color: '#fff',
|
||||
background: 'var(--ol-accent-solid-bg)',
|
||||
color: 'var(--ol-accent-solid-ink)',
|
||||
fontSize: 13,
|
||||
lineHeight: 1.55,
|
||||
wordBreak: 'break-word',
|
||||
@@ -491,7 +490,7 @@ const userBubbleStyle: CSSProperties = {
|
||||
const assistantBubbleStyle: CSSProperties = {
|
||||
maxWidth: '92%',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
borderBottomLeftRadius: 4,
|
||||
background: 'rgba(0,0,0,0.04)',
|
||||
fontSize: 13,
|
||||
@@ -519,7 +518,7 @@ const toolChipStyle: CSSProperties = {
|
||||
color: 'var(--ol-ink-2)',
|
||||
background: 'rgba(0,0,0,0.045)',
|
||||
border: '0.5px solid rgba(0,0,0,0.06)',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
padding: '4px 8px',
|
||||
};
|
||||
|
||||
@@ -543,7 +542,7 @@ const approvalCardStyle: CSSProperties = {
|
||||
flexDirection: 'column',
|
||||
gap: 6,
|
||||
padding: '10px 12px',
|
||||
borderRadius: 12,
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
background: 'rgba(220,38,38,0.05)',
|
||||
border: '0.5px solid rgba(220,38,38,0.20)',
|
||||
};
|
||||
@@ -553,7 +552,7 @@ const approvalCmdStyle: CSSProperties = {
|
||||
fontSize: 11.5,
|
||||
color: 'var(--ol-ink)',
|
||||
background: 'rgba(0,0,0,0.05)',
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
padding: '5px 8px',
|
||||
wordBreak: 'break-all',
|
||||
};
|
||||
@@ -564,25 +563,25 @@ const approvalRerunWarningStyle: CSSProperties = {
|
||||
color: 'rgb(180,83,9)',
|
||||
background: 'rgba(245,158,11,0.10)',
|
||||
border: '0.5px solid rgba(245,158,11,0.25)',
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
padding: '5px 8px',
|
||||
};
|
||||
|
||||
const approveBtnStyle: CSSProperties = {
|
||||
flex: 1,
|
||||
border: 0,
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
padding: '6px 10px',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
cursor: 'default',
|
||||
background: 'var(--ol-blue)',
|
||||
color: '#fff',
|
||||
background: 'var(--ol-accent-solid-bg)',
|
||||
color: 'var(--ol-accent-solid-ink)',
|
||||
};
|
||||
|
||||
const denyBtnStyle: CSSProperties = {
|
||||
flex: 1,
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
padding: '6px 10px',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
@@ -594,7 +593,7 @@ const denyBtnStyle: CSSProperties = {
|
||||
|
||||
const errorRowStyle: CSSProperties = {
|
||||
padding: '8px 12px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'rgba(220,38,38,0.06)',
|
||||
border: '0.5px solid rgba(220,38,38,0.18)',
|
||||
};
|
||||
@@ -633,7 +632,7 @@ const globalCss = `
|
||||
padding: 1px 5px; border-radius: 4px;
|
||||
background: rgba(0,0,0,0.05); }
|
||||
.lc-answer pre { margin: 0 0 6px; padding: 8px 10px;
|
||||
border-radius: 8px; background: rgba(0,0,0,0.05);
|
||||
border-radius: var(--ol-control-radius); background: rgba(0,0,0,0.05);
|
||||
overflow-x: auto; }
|
||||
.lc-answer pre code { padding: 0; background: transparent; }
|
||||
.lc-answer a { color: var(--ol-blue); text-decoration: none; }
|
||||
|
||||
@@ -1842,7 +1842,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
style={{
|
||||
fontSize: 13,
|
||||
padding: "6px 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -1903,7 +1903,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
style={{
|
||||
fontSize: 13,
|
||||
padding: "6px 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -1954,7 +1954,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
style={{
|
||||
fontSize: 13,
|
||||
padding: "6px 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -2266,7 +2266,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
fontSize: 13,
|
||||
height: 31,
|
||||
padding: "0 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -2301,7 +2301,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
fontSize: 13,
|
||||
height: 31,
|
||||
padding: "0 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -2334,7 +2334,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
fontSize: 13,
|
||||
height: 31,
|
||||
padding: "0 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -2613,7 +2613,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
style={{
|
||||
fontSize: 13,
|
||||
padding: "6px 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -2741,7 +2741,7 @@ export function LocalAsr({ embedded = false }: LocalAsrProps = {}) {
|
||||
style={{
|
||||
fontSize: 13,
|
||||
padding: "6px 10px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
border: "0.5px solid rgba(0,0,0,0.12)",
|
||||
background: "var(--ol-surface)",
|
||||
color: "var(--ol-ink)",
|
||||
@@ -2905,7 +2905,7 @@ function FoundryPrepareProgressBlock({
|
||||
<div
|
||||
style={{
|
||||
padding: "10px 12px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: "rgba(0,0,0,0.035)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
@@ -3040,7 +3040,7 @@ function DownloadProgressBlock({
|
||||
<div
|
||||
style={{
|
||||
padding: "10px 12px",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: "rgba(0,0,0,0.035)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
@@ -3367,7 +3367,7 @@ function TestResultBlock({
|
||||
background: hasError
|
||||
? "rgba(255, 220, 220, 0.5)"
|
||||
: "rgba(0, 0, 0, 0.04)",
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
fontSize: 12.5,
|
||||
color: hasError ? "#9b2c2c" : "var(--ol-ink-2)",
|
||||
lineHeight: 1.6,
|
||||
|
||||
@@ -426,7 +426,7 @@ export function Marketplace() {
|
||||
title={currentLogin ? t('marketplace.myPacks.buttonTitle', { login: currentLogin }) : t('marketplace.myPacks.buttonTitleEmpty')}
|
||||
style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||
height: 30, padding: '0 12px', borderRadius: 9,
|
||||
height: 30, padding: '0 12px', borderRadius: 'var(--ol-control-radius)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface)',
|
||||
color: 'var(--ol-ink-2)',
|
||||
@@ -436,7 +436,7 @@ export function Marketplace() {
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
width: 18, height: 18, borderRadius: 999,
|
||||
width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)',
|
||||
display: 'inline-grid', placeItems: 'center',
|
||||
background: 'rgba(15,23,42,0.06)',
|
||||
fontSize: 10, fontWeight: 750,
|
||||
@@ -469,7 +469,7 @@ export function Marketplace() {
|
||||
gap: 6,
|
||||
padding: '6px 10px',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-surface)',
|
||||
}}
|
||||
>
|
||||
@@ -498,7 +498,7 @@ export function Marketplace() {
|
||||
padding: '6px 10px',
|
||||
fontSize: 12,
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
cursor: 'pointer',
|
||||
background: sort === p.id ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
|
||||
color: sort === p.id ? 'var(--ol-blue)' : 'var(--ol-ink-2)',
|
||||
@@ -567,7 +567,7 @@ export function Marketplace() {
|
||||
style={{
|
||||
textAlign: 'left',
|
||||
padding: 14,
|
||||
borderRadius: 12,
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface)',
|
||||
cursor: 'pointer',
|
||||
@@ -644,7 +644,7 @@ export function Marketplace() {
|
||||
style={{
|
||||
padding: 12,
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-surface-2)',
|
||||
marginBottom: 14,
|
||||
maxHeight: 280,
|
||||
@@ -679,7 +679,7 @@ export function Marketplace() {
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
color: 'var(--ol-ink-2)'
|
||||
@@ -744,7 +744,7 @@ export function Marketplace() {
|
||||
textAlign: 'left',
|
||||
padding: 10,
|
||||
border: selected ? '1px solid var(--ol-blue)' : '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: selected ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
@@ -755,11 +755,11 @@ export function Marketplace() {
|
||||
{/* 选中圈：未选空圆，选中蓝实心 + 白勾 */}
|
||||
<span style={{
|
||||
flexShrink: 0,
|
||||
width: 18, height: 18, borderRadius: 999,
|
||||
border: selected ? '1px solid var(--ol-blue)' : '1px solid var(--ol-line-strong)',
|
||||
background: selected ? 'var(--ol-blue)' : 'transparent',
|
||||
width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)',
|
||||
border: selected ? '1px solid var(--ol-accent-solid-bg)' : '1px solid var(--ol-line-strong)',
|
||||
background: selected ? 'var(--ol-accent-solid-bg)' : 'transparent',
|
||||
display: 'inline-grid', placeItems: 'center',
|
||||
color: '#fff', fontSize: 11, fontWeight: 700,
|
||||
color: 'var(--ol-accent-solid-ink)', fontSize: 11, fontWeight: 700,
|
||||
transition: 'background 0.12s, border-color 0.12s',
|
||||
}}>
|
||||
{selected && '✓'}
|
||||
@@ -814,7 +814,7 @@ export function Marketplace() {
|
||||
gap: 6,
|
||||
padding: '6px 10px',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-surface)',
|
||||
}}
|
||||
>
|
||||
@@ -843,7 +843,7 @@ export function Marketplace() {
|
||||
onClick={() => setShowLogin(true)}
|
||||
style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
padding: '5px 10px', borderRadius: 9,
|
||||
padding: '5px 10px', borderRadius: 'var(--ol-control-radius)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: currentLogin ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
|
||||
color: currentLogin ? 'var(--ol-blue)' : 'var(--ol-ink-3)',
|
||||
@@ -853,7 +853,7 @@ export function Marketplace() {
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
width: 18, height: 18, borderRadius: 999,
|
||||
width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)',
|
||||
display: 'inline-grid', placeItems: 'center',
|
||||
background: currentLogin ? 'rgba(37,99,235,0.14)' : 'rgba(15,23,42,0.06)',
|
||||
fontSize: 10, fontWeight: 750,
|
||||
@@ -869,7 +869,7 @@ export function Marketplace() {
|
||||
title={t('common.close')}
|
||||
onClick={() => setShowMyPacks(false)}
|
||||
style={{
|
||||
width: 30, height: 30, borderRadius: 9,
|
||||
width: 30, height: 30, borderRadius: 'var(--ol-control-radius)',
|
||||
display: 'inline-grid', placeItems: 'center',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface)',
|
||||
@@ -965,7 +965,7 @@ export function Marketplace() {
|
||||
key={pack.id}
|
||||
style={{
|
||||
padding: 14,
|
||||
borderRadius: 12,
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: 'var(--ol-surface)',
|
||||
display: 'flex',
|
||||
|
||||
@@ -289,7 +289,7 @@ function ProviderCard({ kind, name, subname, status }: ProviderCardProps) {
|
||||
<Card padding={mobile ? 14 : 16} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
width: 38, height: 38, borderRadius: 10,
|
||||
width: 38, height: 38, borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-blue-soft)',
|
||||
color: 'var(--ol-blue)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
@@ -302,7 +302,7 @@ function ProviderCard({ kind, name, subname, status }: ProviderCardProps) {
|
||||
<span style={{ fontSize: 11, color: 'var(--ol-ink-4)', fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase' }}>{kind}</span>
|
||||
{status === 'configured' && (
|
||||
<Pill tone="ok" size="sm">
|
||||
<span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--ol-ok)' }} />
|
||||
<span style={{ width: 5, height: 5, borderRadius: 'var(--ol-pill-radius)', background: 'var(--ol-ok)' }} />
|
||||
{t('overview.statusConfigured')}
|
||||
</Pill>
|
||||
)}
|
||||
@@ -573,20 +573,20 @@ function InAppDictationControl() {
|
||||
style={{
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: recording ? 'var(--ol-err, #ef4444)' : 'var(--ol-blue)',
|
||||
color: '#fff',
|
||||
background: recording ? 'var(--ol-danger-solid-bg)' : 'var(--ol-accent-solid-bg)',
|
||||
color: recording ? 'var(--ol-danger-solid-ink)' : 'var(--ol-accent-solid-ink)',
|
||||
cursor: busy || processing ? 'not-allowed' : 'default',
|
||||
opacity: busy || processing ? 0.7 : 1,
|
||||
transition: 'background 0.16s var(--ol-motion-quick), opacity 0.16s var(--ol-motion-quick)',
|
||||
}}
|
||||
>
|
||||
{recording ? (
|
||||
<span style={{ width: 16, height: 16, borderRadius: 3, background: '#fff', display: 'block' }} />
|
||||
<span style={{ width: 16, height: 16, borderRadius: 3, background: 'var(--ol-control-solid)', display: 'block' }} />
|
||||
) : (
|
||||
<Icon name="mic" size={20} />
|
||||
)}
|
||||
|
||||
@@ -685,7 +685,8 @@ function MobileRecordButton({
|
||||
disabled={disabled}
|
||||
style={{
|
||||
...mobileRecordButtonStyle,
|
||||
background: recording ? 'var(--ol-err)' : 'var(--ol-blue)',
|
||||
background: recording ? 'var(--ol-danger-solid-bg)' : 'var(--ol-accent-solid-bg)',
|
||||
color: recording ? 'var(--ol-danger-solid-ink)' : 'var(--ol-accent-solid-ink)',
|
||||
opacity: disabled ? 0.48 : 1,
|
||||
}}
|
||||
>
|
||||
@@ -773,10 +774,10 @@ const shellStyle: CSSProperties = {
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
overflow: 'hidden',
|
||||
border: '0.5px solid rgba(0, 0, 0, 0.08)',
|
||||
boxShadow: 'var(--ol-shadow-lg), inset 0 1px 0 0 rgba(255, 255, 255, 0.9)',
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
boxShadow: 'var(--ol-shadow-lg)',
|
||||
fontFamily: 'var(--ol-font-sans)',
|
||||
color: 'var(--ol-ink)',
|
||||
};
|
||||
@@ -804,7 +805,7 @@ const iconBtnBaseStyle: CSSProperties = {
|
||||
width: 22,
|
||||
height: 22,
|
||||
border: 0,
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -839,7 +840,7 @@ const previewStyle: CSSProperties = {
|
||||
fontSize: 11.5,
|
||||
lineHeight: 1.5,
|
||||
padding: '8px 10px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'rgba(0, 0, 0, 0.035)',
|
||||
border: '0.5px solid rgba(0, 0, 0, 0.06)',
|
||||
};
|
||||
@@ -858,10 +859,10 @@ const turnIndicatorStyle: CSSProperties = {
|
||||
const userBubbleStyle: CSSProperties = {
|
||||
maxWidth: '80%',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
borderBottomRightRadius: 4,
|
||||
background: 'var(--ol-blue)',
|
||||
color: '#fff',
|
||||
background: 'var(--ol-accent-solid-bg)',
|
||||
color: 'var(--ol-accent-solid-ink)',
|
||||
fontSize: 13,
|
||||
lineHeight: 1.55,
|
||||
wordBreak: 'break-word',
|
||||
@@ -870,7 +871,7 @@ const userBubbleStyle: CSSProperties = {
|
||||
const selectionQuoteStyle: CSSProperties = {
|
||||
maxWidth: '80%',
|
||||
padding: '6px 10px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'rgba(0,0,0,0.04)',
|
||||
border: '0.5px solid rgba(0,0,0,0.06)',
|
||||
fontSize: 11.5,
|
||||
@@ -882,7 +883,7 @@ const selectionQuoteStyle: CSSProperties = {
|
||||
const assistantBubbleStyle: CSSProperties = {
|
||||
maxWidth: '92%',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 14,
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
borderBottomLeftRadius: 4,
|
||||
background: 'rgba(0,0,0,0.04)',
|
||||
fontSize: 13,
|
||||
@@ -897,7 +898,7 @@ const errorRowStyle: CSSProperties = {
|
||||
flexDirection: 'column',
|
||||
gap: 4,
|
||||
padding: '8px 12px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'rgba(220,38,38,0.06)',
|
||||
border: '0.5px solid rgba(220,38,38,0.18)',
|
||||
};
|
||||
@@ -918,7 +919,7 @@ const statusBarStyle: CSSProperties = {
|
||||
gap: 8,
|
||||
padding: '0 16px',
|
||||
borderTop: '0.5px solid rgba(0, 0, 0, 0.06)',
|
||||
background: 'rgba(255,255,255,0.4)',
|
||||
background: 'var(--ol-control-muted)',
|
||||
};
|
||||
|
||||
const embeddedToolbarStyle: CSSProperties = {
|
||||
@@ -938,8 +939,8 @@ const mobileRecordButtonStyle: CSSProperties = {
|
||||
width: '100%',
|
||||
minHeight: 42,
|
||||
border: 0,
|
||||
borderRadius: 10,
|
||||
color: '#fff',
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
color: 'var(--ol-accent-solid-ink)',
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
fontFamily: 'var(--ol-font-sans)',
|
||||
@@ -953,7 +954,7 @@ const composerStyle: CSSProperties = {
|
||||
gap: 8,
|
||||
padding: '10px 12px',
|
||||
borderTop: '0.5px solid rgba(0, 0, 0, 0.06)',
|
||||
background: 'rgba(255,255,255,0.48)',
|
||||
background: 'var(--ol-control-muted-strong)',
|
||||
};
|
||||
|
||||
const composerTextareaStyle: CSSProperties = {
|
||||
@@ -962,13 +963,13 @@ const composerTextareaStyle: CSSProperties = {
|
||||
maxHeight: 88,
|
||||
resize: 'vertical',
|
||||
border: '0.5px solid rgba(0,0,0,0.12)',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
padding: '8px 9px',
|
||||
fontFamily: 'var(--ol-font-sans)',
|
||||
fontSize: 13,
|
||||
lineHeight: 1.45,
|
||||
color: 'var(--ol-ink)',
|
||||
background: 'rgba(255,255,255,0.78)',
|
||||
background: 'var(--ol-control-solid)',
|
||||
outline: 'none',
|
||||
};
|
||||
|
||||
@@ -976,10 +977,10 @@ const composerSendStyle: CSSProperties = {
|
||||
minHeight: 40,
|
||||
minWidth: 58,
|
||||
border: 0,
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
padding: '0 12px',
|
||||
background: 'var(--ol-blue)',
|
||||
color: '#fff',
|
||||
background: 'var(--ol-accent-solid-bg)',
|
||||
color: 'var(--ol-accent-solid-ink)',
|
||||
fontFamily: 'var(--ol-font-sans)',
|
||||
fontSize: 13,
|
||||
fontWeight: 700,
|
||||
@@ -1010,7 +1011,7 @@ const globalCss = `
|
||||
padding: 1px 5px; border-radius: 4px;
|
||||
background: rgba(0,0,0,0.05); }
|
||||
.qa-answer pre { margin: 0 0 6px; padding: 8px 10px;
|
||||
border-radius: 8px; background: rgba(0,0,0,0.05);
|
||||
border-radius: var(--ol-control-radius); background: rgba(0,0,0,0.05);
|
||||
overflow-x: auto; }
|
||||
.qa-answer pre code { padding: 0; background: transparent; }
|
||||
.qa-answer a { color: var(--ol-blue); text-decoration: none; }
|
||||
|
||||
@@ -100,7 +100,7 @@ export function SelectionAsk() {
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
padding: '8px 14px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'rgba(0,0,0,0.04)',
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
}}
|
||||
@@ -116,7 +116,7 @@ export function SelectionAsk() {
|
||||
position: 'relative',
|
||||
width: 36,
|
||||
height: 20,
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: 0,
|
||||
background: prefs.qaSaveHistory ? 'var(--ol-blue)' : 'rgba(0,0,0,0.18)',
|
||||
cursor: saving ? 'not-allowed' : 'default',
|
||||
@@ -132,8 +132,8 @@ export function SelectionAsk() {
|
||||
left: prefs.qaSaveHistory ? 18 : 2,
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 999,
|
||||
background: '#fff',
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: 'var(--ol-control-solid)',
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,.2)',
|
||||
transition: 'left .16s var(--ol-motion-spring)',
|
||||
}}
|
||||
|
||||
@@ -570,7 +570,7 @@ export function Style() {
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
padding: '6px 12px',
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: '0.5px solid',
|
||||
borderColor: rawPack.active ? 'var(--ol-blue)' : 'var(--ol-line-strong)',
|
||||
background: rawPack.active ? 'var(--ol-blue-soft)' : 'transparent',
|
||||
@@ -613,15 +613,11 @@ export function Style() {
|
||||
textAlign: 'left',
|
||||
position: 'relative',
|
||||
border: '0.5px solid',
|
||||
borderColor: pack.active ? 'var(--ol-blue)' : 'var(--ol-line)',
|
||||
background: pack.active
|
||||
? 'linear-gradient(180deg, rgba(239,246,255,0.92), rgba(255,255,255,0.98))'
|
||||
: isBuiltin
|
||||
? 'linear-gradient(180deg, rgba(248,250,252,0.92), rgba(241,245,249,0.85))'
|
||||
: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92))',
|
||||
borderRadius: 18,
|
||||
borderColor: pack.active ? 'var(--ol-style-card-border-active)' : 'var(--ol-style-card-border)',
|
||||
background: pack.active ? 'var(--ol-style-card-bg-active)' : 'var(--ol-style-card-bg)',
|
||||
borderRadius: 'var(--ol-modal-radius)',
|
||||
padding: 16,
|
||||
boxShadow: pack.active ? '0 0 0 3px var(--ol-blue-ring)' : 'none',
|
||||
boxShadow: pack.active ? 'var(--ol-style-card-shadow-active)' : 'var(--ol-style-card-shadow)',
|
||||
cursor: 'default',
|
||||
minHeight: 204,
|
||||
}}
|
||||
@@ -629,7 +625,7 @@ export function Style() {
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 10 }}>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: isBuiltin && !pack.active ? 'var(--ol-ink-2)' : 'var(--ol-ink)' }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: isBuiltin && !pack.active ? 'var(--ol-style-card-ink-2)' : 'var(--ol-style-card-ink)' }}>
|
||||
{pack.name}
|
||||
</div>
|
||||
<Pill tone={isBuiltin ? 'outline' : 'blue'} size="sm">
|
||||
@@ -646,7 +642,7 @@ export function Style() {
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12.5,
|
||||
color: 'var(--ol-ink-3)',
|
||||
color: 'var(--ol-style-card-ink-3)',
|
||||
lineHeight: 1.6,
|
||||
display: '-webkit-box',
|
||||
WebkitBoxOrient: 'vertical',
|
||||
@@ -663,10 +659,10 @@ export function Style() {
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
width: 36, height: 36, borderRadius: 12,
|
||||
width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
|
||||
display: 'grid', placeItems: 'center',
|
||||
background: pack.active ? 'rgba(37,99,235,0.12)' : 'rgba(15,23,42,0.05)',
|
||||
color: pack.active ? 'var(--ol-blue)' : 'var(--ol-ink-3)',
|
||||
background: pack.active ? 'var(--ol-style-card-icon-bg-active)' : 'var(--ol-style-card-icon-bg)',
|
||||
color: pack.active ? 'var(--ol-blue)' : 'var(--ol-style-card-ink-3)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
@@ -680,11 +676,11 @@ export function Style() {
|
||||
aria-label={t('style.pack.deleteImported')}
|
||||
title={t('style.pack.deleteImported')}
|
||||
style={{
|
||||
width: 36, height: 36, borderRadius: 12,
|
||||
width: 36, height: 36, borderRadius: 'var(--ol-r-lg)',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
border: '0.5px solid rgba(239,68,68,0.32)',
|
||||
background: 'rgba(254,242,242,0.6)',
|
||||
border: '0.5px solid var(--ol-style-delete-border)',
|
||||
background: 'var(--ol-style-delete-bg)',
|
||||
color: 'var(--ol-red, #ef4444)',
|
||||
cursor: busy === 'deleting' ? 'wait' : 'pointer',
|
||||
opacity: busy === 'deleting' ? 0.55 : 1,
|
||||
@@ -755,11 +751,11 @@ export function Style() {
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
textAlign: 'center',
|
||||
border: '0.5px dashed var(--ol-line-strong)',
|
||||
borderRadius: 18,
|
||||
border: '0.5px dashed var(--ol-style-add-tile-border)',
|
||||
borderRadius: 'var(--ol-modal-radius)',
|
||||
padding: 16,
|
||||
background: 'transparent',
|
||||
color: 'var(--ol-ink-3)',
|
||||
background: 'var(--ol-style-add-tile-bg)',
|
||||
color: 'var(--ol-style-card-ink-3)',
|
||||
cursor: busy === 'creating' ? 'wait' : 'pointer',
|
||||
opacity: busy === 'creating' ? 0.55 : 1,
|
||||
minHeight: 204,
|
||||
@@ -768,16 +764,16 @@ export function Style() {
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 44, height: 44, borderRadius: 999,
|
||||
width: 44, height: 44, borderRadius: 'var(--ol-pill-radius)',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
background: 'rgba(15,23,42,0.04)',
|
||||
color: 'var(--ol-ink-2)',
|
||||
background: 'var(--ol-style-add-tile-icon-bg)',
|
||||
color: 'var(--ol-style-card-ink-2)',
|
||||
}}
|
||||
>
|
||||
<Icon name="plus" size={22} />
|
||||
</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ol-ink-2)' }}>{t('style.pack.addPackTileTitle')}</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ol-ink-4)', lineHeight: 1.55, maxWidth: 220 }}>{t('style.pack.addPackTileHint')}</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ol-style-card-ink-2)' }}>{t('style.pack.addPackTileTitle')}</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--ol-style-card-ink-3)', lineHeight: 1.55, maxWidth: 220 }}>{t('style.pack.addPackTileHint')}</div>
|
||||
</motion.button>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
@@ -843,7 +839,7 @@ export function Style() {
|
||||
style={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: 0,
|
||||
background: 'transparent',
|
||||
color: 'var(--ol-ink-3)',
|
||||
@@ -990,8 +986,9 @@ export function Style() {
|
||||
<Card
|
||||
padding={16}
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.95))',
|
||||
border: '0.5px solid rgba(148,163,184,0.24)',
|
||||
background: 'var(--ol-style-subtle-bg)',
|
||||
border: '0.5px solid var(--ol-style-subtle-border)',
|
||||
boxShadow: 'var(--ol-style-subtle-shadow)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
|
||||
@@ -1057,9 +1054,10 @@ export function Style() {
|
||||
<div
|
||||
style={{
|
||||
padding: 14,
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.95))',
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
background: 'var(--ol-style-subtle-bg)',
|
||||
border: '0.5px solid var(--ol-style-subtle-border)',
|
||||
boxShadow: 'var(--ol-style-subtle-shadow)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
|
||||
@@ -1095,7 +1093,9 @@ export function Style() {
|
||||
key={`${draft.id}-example-${index}`}
|
||||
padding={16}
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98))',
|
||||
background: 'var(--ol-style-card-bg)',
|
||||
border: '0.5px solid var(--ol-style-card-border)',
|
||||
boxShadow: 'var(--ol-style-card-shadow)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
|
||||
@@ -1113,7 +1113,7 @@ export function Style() {
|
||||
width: 32, height: 32,
|
||||
flexShrink: 0,
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'transparent',
|
||||
color: 'var(--ol-ink-2)',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
@@ -1128,9 +1128,9 @@ export function Style() {
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
border: '0.5px solid rgba(148,163,184,0.22)',
|
||||
background: 'rgba(248,250,252,0.9)',
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
border: '0.5px solid var(--ol-style-subtle-border)',
|
||||
background: 'var(--ol-style-subtle-bg)',
|
||||
padding: 14,
|
||||
}}
|
||||
>
|
||||
@@ -1140,15 +1140,15 @@ export function Style() {
|
||||
<textarea
|
||||
value={example.input}
|
||||
onChange={event => patchExample(index, { input: event.target.value })}
|
||||
style={{ ...textareaStyle, minHeight: 120, background: '#fff' }}
|
||||
style={{ ...textareaStyle, minHeight: 120, background: 'var(--ol-control-solid)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
border: '0.5px solid rgba(37,99,235,0.16)',
|
||||
background: 'rgba(239,246,255,0.86)',
|
||||
borderRadius: 'var(--ol-bubble-radius)',
|
||||
border: '0.5px solid var(--ol-style-card-border-active)',
|
||||
background: 'var(--ol-style-subtle-bg)',
|
||||
padding: 14,
|
||||
}}
|
||||
>
|
||||
@@ -1158,7 +1158,7 @@ export function Style() {
|
||||
<textarea
|
||||
value={example.output}
|
||||
onChange={event => patchExample(index, { output: event.target.value })}
|
||||
style={{ ...textareaStyle, minHeight: 120, background: '#fff' }}
|
||||
style={{ ...textareaStyle, minHeight: 120, background: 'var(--ol-control-solid)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1180,9 +1180,9 @@ function MetaItem({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
border: '0.5px solid rgba(148,163,184,0.2)',
|
||||
background: 'rgba(255,255,255,0.92)',
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
border: '0.5px solid var(--ol-style-subtle-border)',
|
||||
background: 'var(--ol-style-card-bg)',
|
||||
padding: '10px 12px',
|
||||
}}
|
||||
>
|
||||
@@ -1217,9 +1217,9 @@ function DirectiveRow({
|
||||
justifyContent: 'space-between',
|
||||
gap: 12,
|
||||
padding: '10px 12px',
|
||||
borderRadius: 12,
|
||||
border: '0.5px solid rgba(148,163,184,0.2)',
|
||||
background: 'rgba(255,255,255,0.92)',
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
border: '0.5px solid var(--ol-style-subtle-border)',
|
||||
background: 'var(--ol-style-card-bg)',
|
||||
}}
|
||||
>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
@@ -1238,9 +1238,10 @@ const inputStyle: CSSProperties = {
|
||||
boxSizing: 'border-box',
|
||||
minHeight: 38,
|
||||
padding: '9px 11px',
|
||||
borderRadius: 10,
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: '#fff',
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
border: '0.5px solid var(--ol-style-input-border)',
|
||||
background: 'var(--ol-style-input-bg)',
|
||||
boxShadow: 'var(--ol-style-input-shadow)',
|
||||
color: 'var(--ol-ink)',
|
||||
font: 'inherit',
|
||||
fontSize: 12.5,
|
||||
@@ -1250,9 +1251,10 @@ const textareaStyle: CSSProperties = {
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: '11px 12px',
|
||||
borderRadius: 12,
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: '#fff',
|
||||
borderRadius: 'var(--ol-r-lg)',
|
||||
border: '0.5px solid var(--ol-style-input-border)',
|
||||
background: 'var(--ol-style-input-bg)',
|
||||
boxShadow: 'var(--ol-style-input-shadow)',
|
||||
color: 'var(--ol-ink)',
|
||||
font: 'inherit',
|
||||
fontSize: 12.5,
|
||||
|
||||
@@ -77,10 +77,10 @@ export function Translation() {
|
||||
style={{
|
||||
alignSelf: 'flex-start',
|
||||
padding: '6px 12px',
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: 0,
|
||||
background: 'var(--ol-blue)',
|
||||
color: '#fff',
|
||||
background: 'var(--ol-accent-solid-bg)',
|
||||
color: 'var(--ol-accent-solid-ink)',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
cursor: loading ? 'not-allowed' : 'default',
|
||||
@@ -140,7 +140,7 @@ export function Translation() {
|
||||
justifyContent: 'space-between',
|
||||
gap: 10,
|
||||
padding: '8px 12px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
border: '0.5px solid rgba(239,68,68,0.22)',
|
||||
background: 'rgba(239,68,68,0.07)',
|
||||
color: 'var(--ol-red, #ef4444)',
|
||||
@@ -156,7 +156,7 @@ export function Translation() {
|
||||
style={{
|
||||
flex: '0 0 auto',
|
||||
border: 0,
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: 'rgba(239,68,68,0.12)',
|
||||
color: 'inherit',
|
||||
padding: '4px 10px',
|
||||
@@ -188,9 +188,9 @@ export function Translation() {
|
||||
fontSize: 12.5,
|
||||
fontWeight: checked ? 600 : 500,
|
||||
border: 0,
|
||||
borderRadius: 999,
|
||||
background: checked ? 'var(--ol-blue)' : 'rgba(0,0,0,0.05)',
|
||||
color: checked ? '#fff' : 'var(--ol-ink-2)',
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: checked ? 'var(--ol-accent-solid-bg)' : 'rgba(0,0,0,0.05)',
|
||||
color: checked ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink-2)',
|
||||
cursor: 'default',
|
||||
fontFamily: 'inherit',
|
||||
transition: 'background 0.12s ease-out, color 0.12s ease-out',
|
||||
@@ -213,7 +213,7 @@ export function Translation() {
|
||||
fontSize: 10.5,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.04em',
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
background: enabled ? 'rgba(37,99,235,0.10)' : 'rgba(0,0,0,0.05)',
|
||||
color: enabled ? 'var(--ol-blue)' : 'var(--ol-ink-4)',
|
||||
textTransform: 'uppercase',
|
||||
@@ -228,7 +228,7 @@ export function Translation() {
|
||||
options={targetOptions}
|
||||
placeholder={t('translation.target.disabled')}
|
||||
ariaLabel={t('translation.target.title')}
|
||||
style={{ width: '100%', maxWidth: 360, fontSize: 13, background: '#fff' }}
|
||||
style={{ width: '100%', maxWidth: 360, fontSize: 13, background: 'var(--ol-control-solid)' }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
|
||||
@@ -279,7 +279,7 @@ export function Vocab() {
|
||||
onClick={() => togglePreset(p.id)}
|
||||
style={{
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
padding: '4px 10px',
|
||||
fontSize: 12,
|
||||
background: selectedPresetIds.includes(p.id) ? 'var(--ol-blue-soft)' : 'var(--ol-surface-2)',
|
||||
@@ -322,14 +322,14 @@ export function Vocab() {
|
||||
value={rulePatternDraft}
|
||||
onChange={e => setRulePatternDraft(e.target.value)}
|
||||
placeholder={t('vocab.corrections.patternPlaceholder')}
|
||||
style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 8, background: 'var(--ol-surface-2)' }}
|
||||
style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface-2)' }}
|
||||
/>
|
||||
<span style={{ color: 'var(--ol-ink-4)', fontSize: 12 }}>→</span>
|
||||
<input
|
||||
value={ruleReplacementDraft}
|
||||
onChange={e => setRuleReplacementDraft(e.target.value)}
|
||||
placeholder={t('vocab.corrections.replacementPlaceholder')}
|
||||
style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 8, background: 'var(--ol-surface-2)' }}
|
||||
style={{ height: 32, padding: '0 10px', border: '0.5px solid var(--ol-line-strong)', borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface-2)' }}
|
||||
/>
|
||||
<Btn size="sm" variant="primary" onClick={() => void onAddCorrectionRule()}>{t('common.add')}</Btn>
|
||||
</div>
|
||||
@@ -362,7 +362,7 @@ export function Vocab() {
|
||||
style={{
|
||||
flex: 1, height: 36, padding: '0 12px',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 8, fontSize: 13,
|
||||
borderRadius: 'var(--ol-control-radius)', fontSize: 13,
|
||||
fontFamily: 'inherit', outline: 'none',
|
||||
background: 'var(--ol-surface-2)',
|
||||
transition: 'border-color 0.16s var(--ol-motion-quick), box-shadow 0.18s var(--ol-motion-soft), background 0.16s var(--ol-motion-quick)',
|
||||
@@ -412,7 +412,7 @@ function CorrectionRuleChip({ rule, onToggle, onRemove }: CorrectionRuleChipProp
|
||||
style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
padding: '5px 8px 5px 10px',
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: enabled ? 'var(--ol-surface)' : 'var(--ol-surface-2)',
|
||||
opacity: enabled ? 1 : 0.55,
|
||||
@@ -430,7 +430,7 @@ function CorrectionRuleChip({ rule, onToggle, onRemove }: CorrectionRuleChipProp
|
||||
<button
|
||||
onClick={onRemove}
|
||||
aria-label={t('vocab.corrections.removeAria')}
|
||||
style={{ width: 18, height: 18, borderRadius: 999, border: 0, background: 'rgba(0,0,0,0.06)', color: 'var(--ol-ink-4)', cursor: 'default' }}
|
||||
style={{ width: 18, height: 18, borderRadius: 'var(--ol-pill-radius)', border: 0, background: 'rgba(0,0,0,0.06)', color: 'var(--ol-ink-4)', cursor: 'default' }}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
@@ -451,12 +451,12 @@ function VocabChip({ entry, onRemove, onToggle }: VocabChipProps) {
|
||||
<span
|
||||
style={{
|
||||
// 父 flex 容器 minHeight: 80 会让 flex item 在 align-self 默认 stretch 下被拉到
|
||||
// 80px 高，chip borderRadius: 999 把高度变大渲染成"超大椭圆"。alignSelf:flex-start
|
||||
// 80px 高，chip borderRadius: 'var(--ol-pill-radius)' 把高度变大渲染成"超大椭圆"。alignSelf:flex-start
|
||||
// 阻止拉伸，chip 始终保持 content 高度。
|
||||
alignSelf: 'flex-start',
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
padding: '5px 10px 5px 12px',
|
||||
borderRadius: 999,
|
||||
borderRadius: 'var(--ol-pill-radius)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: enabled ? (entry.hits > 0 ? 'var(--ol-blue-soft)' : 'var(--ol-surface)') : 'var(--ol-surface-2)',
|
||||
opacity: enabled ? 1 : 0.55,
|
||||
@@ -476,10 +476,10 @@ function VocabChip({ entry, onRemove, onToggle }: VocabChipProps) {
|
||||
<span
|
||||
style={{
|
||||
minWidth: 18, height: 18, padding: '0 5px',
|
||||
borderRadius: 999, fontSize: 10, fontWeight: 600,
|
||||
borderRadius: 'var(--ol-pill-radius)', fontSize: 10, fontWeight: 600,
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
background: entry.hits > 0 && enabled ? 'var(--ol-blue)' : 'rgba(0,0,0,0.06)',
|
||||
color: entry.hits > 0 && enabled ? '#fff' : 'var(--ol-ink-4)',
|
||||
background: entry.hits > 0 && enabled ? 'var(--ol-accent-solid-bg)' : 'rgba(0,0,0,0.06)',
|
||||
color: entry.hits > 0 && enabled ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink-4)',
|
||||
fontFamily: 'var(--ol-font-sans)',
|
||||
}}
|
||||
>{entry.hits}</span>
|
||||
@@ -487,7 +487,7 @@ function VocabChip({ entry, onRemove, onToggle }: VocabChipProps) {
|
||||
onClick={onRemove}
|
||||
aria-label={t('vocab.removeAria')}
|
||||
style={{
|
||||
width: 14, height: 14, padding: 0, border: 0, borderRadius: 999,
|
||||
width: 14, height: 14, padding: 0, border: 0, borderRadius: 'var(--ol-pill-radius)',
|
||||
background: 'transparent', color: 'var(--ol-ink-4)',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'default',
|
||||
}}
|
||||
|
||||
@@ -83,13 +83,14 @@ export function Card({ children, style, padding = 18, glassy = false, className
|
||||
<div
|
||||
className={['ol-aura-card', className].filter(Boolean).join(' ')}
|
||||
style={{
|
||||
background: glassy ? 'var(--ol-panel-bg)' : 'var(--ol-card-bg)',
|
||||
backdropFilter: glassy ? 'blur(var(--ol-aura-glass-blur)) saturate(150%)' : undefined,
|
||||
WebkitBackdropFilter: glassy ? 'blur(var(--ol-aura-glass-blur)) saturate(150%)' : undefined,
|
||||
border: `1px solid ${glassy ? 'var(--ol-panel-border)' : 'var(--ol-card-border)'}`,
|
||||
borderRadius: 'var(--ol-card-radius)',
|
||||
...(glassy ? {
|
||||
background: 'var(--ol-panel-bg)',
|
||||
backdropFilter: 'blur(var(--ol-aura-glass-blur)) saturate(150%)',
|
||||
WebkitBackdropFilter: 'blur(var(--ol-aura-glass-blur)) saturate(150%)',
|
||||
border: '1px solid var(--ol-panel-border)',
|
||||
boxShadow: 'var(--ol-panel-shadow)',
|
||||
} : undefined),
|
||||
padding,
|
||||
boxShadow: glassy ? 'var(--ol-panel-shadow)' : 'var(--ol-card-shadow)',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
@@ -161,7 +162,7 @@ interface BtnProps {
|
||||
export function Btn({ children, variant = 'ghost', size = 'md', icon, style, onClick, disabled = false }: BtnProps) {
|
||||
const variants: Record<BtnVariant, { bg: string; color: string; bd: string; sh: string }> = {
|
||||
primary: { bg: 'linear-gradient(180deg, #141821, #0d1016)', color: 'var(--ol-on-accent)', bd: 'transparent', sh: '0 14px 32px -22px rgba(15,23,42,0.55)' },
|
||||
blue: { bg: 'linear-gradient(180deg, var(--ol-blue), var(--ol-blue-hover))', color: 'var(--ol-on-accent)', bd: 'transparent', sh: '0 14px 32px -22px rgba(37,99,235,.45)' },
|
||||
blue: { bg: 'linear-gradient(180deg, var(--ol-accent-solid-bg), var(--ol-accent-solid-bg-hover))', color: 'var(--ol-accent-solid-ink)', bd: 'transparent', sh: '0 14px 32px -22px rgba(37,99,235,.45)' },
|
||||
ghost: { bg: 'var(--ol-control-muted)', color: 'var(--ol-ink-2)', bd: 'var(--ol-control-border)', sh: 'var(--ol-control-shadow)' },
|
||||
soft: { bg: 'var(--ol-control-muted-strong)', color: 'var(--ol-ink-2)', bd: 'transparent', sh: 'var(--ol-control-shadow)' },
|
||||
};
|
||||
@@ -221,10 +222,10 @@ export function Collapsible({ title, desc, defaultOpen = false, embedded = false
|
||||
<div
|
||||
style={{
|
||||
borderBottom: embedded ? '0.5px solid var(--ol-line)' : undefined,
|
||||
border: embedded ? undefined : '0.5px solid var(--ol-line)',
|
||||
borderRadius: embedded ? 0 : 'var(--ol-r-lg)',
|
||||
background: embedded ? 'transparent' : 'var(--ol-surface)',
|
||||
boxShadow: embedded ? 'none' : 'var(--ol-shadow-sm)',
|
||||
border: embedded ? undefined : '1px solid var(--ol-card-border)',
|
||||
borderRadius: embedded ? 0 : 'var(--ol-card-radius)',
|
||||
background: embedded ? 'transparent' : 'var(--ol-card-bg)',
|
||||
boxShadow: embedded ? 'none' : 'var(--ol-card-shadow)',
|
||||
overflow: 'hidden',
|
||||
// 父级 flex column 带 minHeight:0 + overflow:auto 时，所有 flex 子项默认
|
||||
// shrink:1，会把 header 按钮也压成一条线。锁住不压缩，溢出走父容器滚动。
|
||||
|
||||
@@ -95,7 +95,7 @@ export function AboutSection() {
|
||||
<div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
|
||||
<kbd style={{
|
||||
padding: '4px 10px', fontSize: 12, fontFamily: 'var(--ol-font-mono)',
|
||||
borderRadius: 6, background: 'var(--ol-surface-2)',
|
||||
borderRadius: 'var(--ol-r-sm)', background: 'var(--ol-surface-2)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
|
||||
color: 'var(--ol-ink-2)',
|
||||
@@ -112,9 +112,9 @@ export function AboutSection() {
|
||||
}
|
||||
|
||||
const btnGhost: CSSProperties = {
|
||||
padding: '5px 10px', fontSize: 12, borderRadius: 6,
|
||||
padding: '5px 10px', fontSize: 12, borderRadius: 'var(--ol-r-sm)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: '#fff', color: 'var(--ol-ink-2)',
|
||||
background: 'var(--ol-surface-solid)', color: 'var(--ol-ink-2)',
|
||||
cursor: 'default', fontFamily: 'inherit',
|
||||
maxWidth: '100%',
|
||||
transition: 'background 0.16s var(--ol-motion-quick), border-color 0.16s var(--ol-motion-quick)',
|
||||
|
||||
@@ -70,9 +70,9 @@ export function CheckUpdateButton({ channel }: { channel: UpdateChannel }) {
|
||||
}
|
||||
|
||||
const checkBtnStyle: CSSProperties = {
|
||||
padding: '5px 10px', fontSize: 12, borderRadius: 6,
|
||||
padding: '5px 10px', fontSize: 12, borderRadius: 'var(--ol-r-sm)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background: '#fff',
|
||||
background: 'var(--ol-surface-solid)',
|
||||
cursor: 'default', fontFamily: 'inherit',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
|
||||
minWidth: 84,
|
||||
|
||||
@@ -31,7 +31,7 @@ const consoleStyle: CSSProperties = {
|
||||
minHeight: 96,
|
||||
maxHeight: 260,
|
||||
overflow: 'auto',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: '#0f1117',
|
||||
color: '#d7dbe0',
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
|
||||
|
||||
@@ -44,7 +44,7 @@ export function MarketplaceSection() {
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
padding: '10px 12px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-surface-2)',
|
||||
border: '0.5px solid var(--ol-line)',
|
||||
}}
|
||||
@@ -54,8 +54,8 @@ export function MarketplaceSection() {
|
||||
width: 34,
|
||||
height: 34,
|
||||
borderRadius: 999,
|
||||
background: 'var(--ol-ink)',
|
||||
color: '#fff',
|
||||
background: 'var(--ol-primary-solid-bg)',
|
||||
color: 'var(--ol-primary-solid-ink)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
@@ -834,7 +834,7 @@ function CredentialField({ label, account, placeholder, mono, mask, defaultValue
|
||||
const miniBtnStyle: CSSProperties = {
|
||||
height: 32, padding: '0 12px',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 8, background: 'var(--ol-surface)',
|
||||
borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface)',
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(255,255,255,0.2) inset',
|
||||
color: 'var(--ol-ink-2)', cursor: 'default', flexShrink: 0,
|
||||
fontSize: 12.5, fontWeight: 500, letterSpacing: '0.01em',
|
||||
@@ -844,7 +844,7 @@ const miniBtnStyle: CSSProperties = {
|
||||
const iconBtnStyle: CSSProperties = {
|
||||
width: 32, height: 32,
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 8, background: 'var(--ol-surface)',
|
||||
borderRadius: 'var(--ol-control-radius)', background: 'var(--ol-surface)',
|
||||
boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(255,255,255,0.2) inset',
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'var(--ol-ink-3)', cursor: 'default', flexShrink: 0,
|
||||
|
||||
@@ -163,7 +163,7 @@ export function RecordingInputSection() {
|
||||
marginTop: 4,
|
||||
marginBottom: 8,
|
||||
padding: '12px 14px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'rgba(37,99,235,0.08)',
|
||||
border: '0.5px solid rgba(37,99,235,0.18)',
|
||||
}}
|
||||
@@ -189,15 +189,15 @@ export function RecordingInputSection() {
|
||||
)}
|
||||
{showDesktopHotkey && (
|
||||
<SettingRow label={t('settings.recording.modeLabel')}>
|
||||
<div style={{ display: 'inline-flex', padding: 2, borderRadius: 8, background: 'rgba(0,0,0,0.05)' }}>
|
||||
<div style={{ display: 'inline-flex', padding: 2, borderRadius: 'var(--ol-control-radius)', background: 'rgba(0,0,0,0.05)' }}>
|
||||
{choices.map(([v, l]) => (
|
||||
<button
|
||||
key={v}
|
||||
onClick={() => onModeChange(v)}
|
||||
style={{
|
||||
padding: '5px 14px', fontSize: 12, fontWeight: 500,
|
||||
border: 0, borderRadius: 6, fontFamily: 'inherit',
|
||||
background: prefs.hotkey.mode === v ? '#fff' : 'transparent',
|
||||
border: 0, borderRadius: 'var(--ol-r-sm)', fontFamily: 'inherit',
|
||||
background: prefs.hotkey.mode === v ? 'var(--ol-surface-solid)' : 'transparent',
|
||||
color: prefs.hotkey.mode === v ? 'var(--ol-ink)' : 'var(--ol-ink-3)',
|
||||
boxShadow: prefs.hotkey.mode === v ? '0 1px 2px rgba(0,0,0,.08)' : 'none',
|
||||
cursor: 'default',
|
||||
@@ -248,7 +248,7 @@ export function RecordingInputSection() {
|
||||
fontWeight: 500,
|
||||
fontFamily: 'inherit',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
background: 'var(--ol-surface-2)',
|
||||
color: 'var(--ol-ink-2)',
|
||||
cursor: 'default',
|
||||
|
||||
@@ -115,7 +115,7 @@ export function RemoteInputSection() {
|
||||
|
||||
const smallBtn: CSSProperties = {
|
||||
padding: '4px 10px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
fontSize: 12,
|
||||
cursor: 'pointer',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
@@ -161,13 +161,13 @@ export function RemoteInputSection() {
|
||||
}
|
||||
style={{
|
||||
padding: '5px 12px',
|
||||
borderRadius: 8,
|
||||
borderRadius: 'var(--ol-control-radius)',
|
||||
fontSize: 12.5,
|
||||
cursor: 'pointer',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
background:
|
||||
mode === m ? 'var(--ol-blue)' : 'var(--ol-surface-2)',
|
||||
color: mode === m ? '#fff' : 'var(--ol-ink)',
|
||||
mode === m ? 'var(--ol-accent-solid-bg)' : 'var(--ol-surface-2)',
|
||||
color: mode === m ? 'var(--ol-accent-solid-ink)' : 'var(--ol-ink)',
|
||||
}}
|
||||
>
|
||||
{t(
|
||||
|
||||
@@ -23,10 +23,10 @@ const enableBtnStyle: CSSProperties = {
|
||||
alignSelf: 'flex-start',
|
||||
fontSize: 12,
|
||||
padding: '5px 14px',
|
||||
background: 'var(--ol-blue)',
|
||||
color: '#fff',
|
||||
background: 'var(--ol-accent-solid-bg)',
|
||||
color: 'var(--ol-accent-solid-ink)',
|
||||
border: 0,
|
||||
borderRadius: 6,
|
||||
borderRadius: 'var(--ol-r-sm)',
|
||||
fontFamily: 'inherit',
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
@@ -107,7 +107,7 @@ export function ShortcutsSection() {
|
||||
await setQaHotkey(binding);
|
||||
await savePrefs({ ...prefs, qaHotkey: binding });
|
||||
}}
|
||||
style={{ fontSize: 12, padding: '5px 14px', background: 'var(--ol-blue)', color: '#fff', border: 0, borderRadius: 6, fontFamily: 'inherit', fontWeight: 500, cursor: 'default' }}
|
||||
style={{ fontSize: 12, padding: '5px 14px', background: 'var(--ol-accent-solid-bg)', color: 'var(--ol-accent-solid-ink)', border: 0, borderRadius: 'var(--ol-r-sm)', fontFamily: 'inherit', fontWeight: 500, cursor: 'default' }}
|
||||
>
|
||||
{t('selectionAsk.hotkey.enable', 'Enable')}
|
||||
</button>
|
||||
@@ -201,7 +201,7 @@ export function ShortcutsSection() {
|
||||
<kbd style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||
padding: '4px 10px', fontSize: 12, fontFamily: 'var(--ol-font-mono)',
|
||||
borderRadius: 6, background: 'var(--ol-surface-2)',
|
||||
borderRadius: 'var(--ol-r-sm)', background: 'var(--ol-surface-2)',
|
||||
border: '0.5px solid var(--ol-line-strong)',
|
||||
boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
|
||||
color: 'var(--ol-ink-2)',
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SegSimple } from '../../components/ui/SegSimple';
|
||||
import { readThemeMode, setThemeMode, type ThemeMode } from '../../lib/themeMode';
|
||||
import { Card } from '../_atoms';
|
||||
import { SettingRow } from './shared';
|
||||
|
||||
const MODES: ThemeMode[] = ['system', 'light', 'dark'];
|
||||
|
||||
export function ThemeSection() {
|
||||
const { t } = useTranslation();
|
||||
const [mode, setMode] = useState<ThemeMode>(readThemeMode());
|
||||
|
||||
const options = useMemo(() => MODES.map((value) => ({
|
||||
value,
|
||||
label: t(`settings.appearance.${value === 'system' ? 'followSystem' : value}`),
|
||||
})), [t]);
|
||||
|
||||
const apply = (next: ThemeMode) => {
|
||||
setMode(next);
|
||||
setThemeMode(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>{t('settings.appearance.title')}</div>
|
||||
<SettingRow label={t('settings.appearance.label')}>
|
||||
<SegSimple
|
||||
options={options}
|
||||
value={mode}
|
||||
onChange={next => apply(next as ThemeMode)}
|
||||
/>
|
||||
</SettingRow>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -102,9 +102,9 @@ export function Toggle({
|
||||
position: "relative",
|
||||
width: 36,
|
||||
height: 20,
|
||||
borderRadius: 999,
|
||||
borderRadius: "var(--ol-pill-radius)",
|
||||
border: 0,
|
||||
background: on ? "var(--ol-blue)" : "rgba(0,0,0,0.15)",
|
||||
background: on ? "var(--ol-blue)" : "var(--ol-toggle-off-bg)",
|
||||
boxShadow: "inset 0 1px 2px rgba(0,0,0,0.06)",
|
||||
cursor: "default",
|
||||
transition: "background 0.16s var(--ol-motion-quick)",
|
||||
@@ -117,8 +117,8 @@ export function Toggle({
|
||||
left: on ? 18 : 2,
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 999,
|
||||
background: "#fff",
|
||||
borderRadius: "var(--ol-pill-radius)",
|
||||
background: "var(--ol-toggle-knob)",
|
||||
boxShadow:
|
||||
"0 1px 2px rgba(0,0,0,.25), 0 0 0 0.5px rgba(0,0,0,.04)",
|
||||
transition: "left .16s var(--ol-motion-spring)",
|
||||
@@ -133,11 +133,13 @@ export const inputStyle: CSSProperties = {
|
||||
height: 32,
|
||||
padding: "0 10px",
|
||||
border: "0.5px solid var(--ol-line-strong)",
|
||||
borderRadius: 8,
|
||||
borderRadius: "var(--ol-control-radius)",
|
||||
fontSize: 12.5,
|
||||
fontFamily: "inherit",
|
||||
outline: "none",
|
||||
background: "var(--ol-surface-2)",
|
||||
background: "var(--ol-input-bg)",
|
||||
color: "var(--ol-input-ink)",
|
||||
caretColor: "var(--ol-input-ink)",
|
||||
width: "100%",
|
||||
maxWidth: 360,
|
||||
transition:
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
|
||||
import { RecordingInputSection } from './RecordingInputSection';
|
||||
import { ShortcutsSection } from './ShortcutsSection';
|
||||
import { LanguageSection } from './LanguageSection';
|
||||
import { ThemeSection } from './ThemeSection';
|
||||
import { ProvidersSection } from './ProvidersSection';
|
||||
import { MarketplaceSection } from './MarketplaceSection';
|
||||
import { PermissionsSection } from './PermissionsSection';
|
||||
@@ -33,6 +34,7 @@ export function GeneralTab() {
|
||||
<>
|
||||
<RecordingInputSection />
|
||||
{showDesktopShortcuts && <ShortcutsSection />}
|
||||
<ThemeSection />
|
||||
<LanguageSection />
|
||||
</>
|
||||
);
|
||||
@@ -59,14 +61,14 @@ export function PrivacyTab() {
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
padding: '10px 12px',
|
||||
borderRadius: 10,
|
||||
borderRadius: 'var(--ol-r-md)',
|
||||
background: 'var(--ol-blue-soft)',
|
||||
marginBottom: 2,
|
||||
}}
|
||||
>
|
||||
<span style={{
|
||||
fontSize: 11, padding: '3px 8px', borderRadius: 999,
|
||||
background: '#fff', color: 'var(--ol-blue)', fontWeight: 600, flexShrink: 0,
|
||||
background: 'var(--ol-surface-solid)', color: 'var(--ol-blue)', fontWeight: 600, flexShrink: 0,
|
||||
}}>
|
||||
{t('modal.about.localFirst')}
|
||||
</span>
|
||||
|
||||
@@ -66,6 +66,13 @@ input, textarea {
|
||||
font-family: inherit;
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
color: var(--ol-input-ink);
|
||||
caret-color: var(--ol-input-ink);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--ol-input-placeholder);
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
@@ -145,14 +152,7 @@ a { color: inherit; text-decoration: none; }
|
||||
.ol-frost {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
/* 体渐变 + 左上高光扫面 —— 半透明白底（~0.9），给磨砂面体积感而不是死平。 */
|
||||
background:
|
||||
radial-gradient(135% 86% at 15% -10%,
|
||||
rgba(255, 255, 255, 0.97) 0%,
|
||||
rgba(255, 255, 255, 0) 56%),
|
||||
linear-gradient(161deg,
|
||||
rgba(255, 255, 255, 0.93) 0%,
|
||||
rgba(244, 247, 252, 0.88) 100%);
|
||||
background: var(--ol-frost-bg);
|
||||
}
|
||||
|
||||
.ol-frost::before {
|
||||
@@ -161,12 +161,12 @@ a { color: inherit; text-decoration: none; }
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
/* 不透明灰度噪点，normal 混合 —— 这是"磨砂颗粒"的来源。opacity 直接等于颗粒
|
||||
强度：0.1 几乎看不见，0.32 能明显看出磨砂质感又不脏。要更糙往 0.45 调。 */
|
||||
/* 不透明灰度噪点，normal 混合 —— 这是"磨砂颗粒"的来源。opacity 由
|
||||
--ol-frost-grain-opacity 控制颗粒强度。 */
|
||||
background-image: var(--ol-frost-grain);
|
||||
/* tile 与 SVG 视口同尺寸（100），stitchTiles 的无缝拼接才成立 */
|
||||
background-size: 100px 100px;
|
||||
opacity: 0.32;
|
||||
opacity: var(--ol-frost-grain-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -177,3 +177,402 @@ html[data-ol-platform="linux"] .ol-frost {
|
||||
html[data-ol-platform="linux"] .ol-frost::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* ── App shell + Aura surfaces ─────────────────────────────────────────── */
|
||||
|
||||
.ol-app-shell-bg {
|
||||
background: var(--ol-app-shell-bg);
|
||||
}
|
||||
|
||||
.ol-aura-panel {
|
||||
background: var(--ol-panel-bg);
|
||||
border: 1px solid var(--ol-panel-border);
|
||||
box-shadow: var(--ol-panel-shadow);
|
||||
backdrop-filter: blur(var(--ol-aura-glass-blur)) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(var(--ol-aura-glass-blur)) saturate(150%);
|
||||
}
|
||||
|
||||
.ol-aura-card {
|
||||
background: var(--ol-card-bg);
|
||||
border: 1px solid var(--ol-card-border);
|
||||
border-radius: var(--ol-card-radius);
|
||||
box-shadow: var(--ol-card-shadow);
|
||||
}
|
||||
|
||||
html[data-ol-platform="linux"] .ol-aura-panel,
|
||||
html[data-ol-platform="linux"] .ol-aura-card {
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
background: var(--ol-surface);
|
||||
}
|
||||
|
||||
/* ── FloatingShell nav + sidebar ───────────────────────────────────────── */
|
||||
|
||||
.ol-nav-btn {
|
||||
color: var(--ol-ink-3);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ol-nav-btn.ol-nav-btn-active {
|
||||
color: var(--ol-ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ol-nav-btn:not(.ol-nav-btn-active):hover {
|
||||
background: var(--ol-nav-hover-bg);
|
||||
color: var(--ol-ink);
|
||||
}
|
||||
|
||||
.ol-aura-sidebar {
|
||||
padding: 14px 12px 14px;
|
||||
background: var(--ol-sidebar-bg);
|
||||
border-right: 1px solid var(--ol-sidebar-border);
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 10px 16px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: var(--ol-r-lg);
|
||||
background: var(--ol-sidebar-brand-bg);
|
||||
border: 1px solid var(--ol-sidebar-brand-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-brand-mark {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: var(--ol-control-radius);
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-brand-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: var(--ol-font-display);
|
||||
color: var(--ol-ink);
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-brand-kicker {
|
||||
font-size: 10.5px;
|
||||
color: var(--ol-ink-4);
|
||||
font-family: var(--ol-font-mono);
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-pill {
|
||||
background: var(--ol-sidebar-pill-bg);
|
||||
border-radius: var(--ol-r-lg);
|
||||
border: 1px solid var(--ol-sidebar-pill-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-nav-btn {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--ol-r-lg);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px 10px 0;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid var(--ol-sidebar-footer-border);
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-version {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 12px;
|
||||
font-family: var(--ol-font-sans);
|
||||
font-size: 11px;
|
||||
color: var(--ol-ink-4);
|
||||
background: var(--ol-sidebar-version-bg);
|
||||
border: 1px solid var(--ol-sidebar-version-border);
|
||||
border-radius: var(--ol-pill-radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ol-aura-beta-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ol-blue);
|
||||
background: rgba(37,99,235,0.10);
|
||||
border-radius: var(--ol-pill-radius);
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-settings {
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--ol-r-lg);
|
||||
border: 1px solid var(--ol-sidebar-settings-border);
|
||||
background: var(--ol-sidebar-settings-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ol-aura-sidebar-settings.ol-nav-btn-active {
|
||||
background: var(--ol-sidebar-settings-active-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ol-aura-console-main {
|
||||
border-radius: var(--ol-panel-radius);
|
||||
}
|
||||
|
||||
[data-ol-mobile="true"] .ol-aura-console-main {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ol-aura-mobile-topbar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
|
||||
border-bottom: 1px solid var(--ol-sidebar-border);
|
||||
background: var(--ol-sidebar-bg);
|
||||
}
|
||||
|
||||
.ol-aura-mobile-brand {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ol-aura-mobile-brand-mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: var(--ol-control-radius);
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.ol-aura-mobile-brand-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--ol-ink);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.ol-aura-mobile-brand-section {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--ol-ink-4);
|
||||
font-family: var(--ol-font-mono);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ol-aura-mobile-settings {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--ol-r-lg);
|
||||
color: var(--ol-ink-3);
|
||||
background: var(--ol-sidebar-settings-bg);
|
||||
border: 1px solid var(--ol-sidebar-settings-border);
|
||||
}
|
||||
|
||||
.ol-aura-mobile-settings-active {
|
||||
color: var(--ol-ink);
|
||||
background: var(--ol-sidebar-settings-active-bg);
|
||||
}
|
||||
|
||||
.ol-aura-mobile-nav {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--ol-nav-count, 6), minmax(0, 1fr));
|
||||
gap: 2px;
|
||||
padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
|
||||
border-top: 1px solid var(--ol-sidebar-border);
|
||||
background: var(--ol-sidebar-bg);
|
||||
}
|
||||
|
||||
.ol-aura-mobile-nav-btn {
|
||||
min-width: 0;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
border-radius: var(--ol-r-lg);
|
||||
color: var(--ol-ink-4);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.ol-aura-mobile-nav-btn span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ol-aura-mobile-nav-btn-active {
|
||||
color: var(--ol-ink);
|
||||
background: var(--ol-sidebar-pill-bg);
|
||||
border: 1px solid var(--ol-sidebar-pill-border);
|
||||
}
|
||||
|
||||
/* ── Settings modal ────────────────────────────────────────────────────── */
|
||||
|
||||
.ol-aura-settings {
|
||||
background: var(--ol-panel-bg);
|
||||
border-radius: var(--ol-shell-radius);
|
||||
border: 1px solid var(--ol-panel-border);
|
||||
box-shadow: var(--ol-panel-shadow);
|
||||
}
|
||||
|
||||
.ol-aura-settings[data-ol-mobile="true"] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ol-aura-settings-rail {
|
||||
padding: 20px 14px;
|
||||
gap: 16px;
|
||||
background: var(--ol-settings-rail-bg);
|
||||
border-right: 1px solid var(--ol-settings-rail-border);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-rail {
|
||||
padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 8px;
|
||||
gap: 8px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--ol-settings-rail-border);
|
||||
}
|
||||
|
||||
.ol-aura-settings-pill {
|
||||
background: var(--ol-sidebar-pill-bg);
|
||||
border-radius: var(--ol-r-lg);
|
||||
border: 1px solid var(--ol-sidebar-pill-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ol-aura-settings-nav-btn {
|
||||
padding: 7px 10px;
|
||||
border-radius: var(--ol-r-lg);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick);
|
||||
}
|
||||
|
||||
.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-nav-btn {
|
||||
padding: 8px 11px;
|
||||
}
|
||||
|
||||
.ol-aura-settings-nav-btn.ol-nav-btn-active {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-nav-btn.ol-nav-btn-active {
|
||||
background: var(--ol-sidebar-pill-bg);
|
||||
border: 1px solid var(--ol-sidebar-pill-border);
|
||||
}
|
||||
|
||||
.ol-aura-settings-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
padding-top: 10px;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid var(--ol-settings-links-border);
|
||||
border-left: 0;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-links {
|
||||
flex-direction: row;
|
||||
padding-top: 0;
|
||||
padding-left: 8px;
|
||||
border-top: 0;
|
||||
border-left: 1px solid var(--ol-settings-links-border);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ol-aura-settings-content {
|
||||
background: var(--ol-settings-content-bg);
|
||||
}
|
||||
|
||||
.ol-aura-settings-close {
|
||||
background: var(--ol-settings-close-bg);
|
||||
color: var(--ol-ink-3);
|
||||
transition: background 0.16s var(--ol-motion-quick);
|
||||
}
|
||||
|
||||
.ol-aura-settings-close:hover {
|
||||
background: var(--ol-settings-close-hover-bg);
|
||||
}
|
||||
|
||||
.ol-aura-settings-title {
|
||||
padding: 24px 28px 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
font-family: var(--ol-font-display);
|
||||
color: var(--ol-ink);
|
||||
}
|
||||
|
||||
.ol-aura-settings[data-ol-mobile="true"] .ol-aura-settings-title {
|
||||
padding: 16px 48px 8px 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ── Page switch + prompt keyframes ──────────────────────────────────── */
|
||||
|
||||
@keyframes ol-page-slide {
|
||||
from { opacity: 0; transform: translate3d(10px, 0, 0) scale(.996); filter: blur(6px); }
|
||||
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
|
||||
}
|
||||
|
||||
@keyframes ol-page-fadeout {
|
||||
from { opacity: 1; filter: blur(0); }
|
||||
to { opacity: 0; filter: blur(8px); }
|
||||
}
|
||||
|
||||
@keyframes ol-prompt-fade {
|
||||
from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
|
||||
to { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
|
||||
}
|
||||
|
||||
@keyframes ol-prompt-pop {
|
||||
from { opacity: 0; transform: translateY(6px) scale(.97); filter: blur(6px); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
|
||||
}
|
||||
@@ -25,8 +25,11 @@
|
||||
--ol-ink: #0a0a0b;
|
||||
--ol-ink-2: #2a2a2d;
|
||||
--ol-ink-3: rgba(10, 10, 11, 0.62);
|
||||
--ol-ink-4: rgba(10, 10, 11, 0.42);
|
||||
--ol-ink-4: rgba(10, 10, 11, 0.58);
|
||||
--ol-ink-5: rgba(10, 10, 11, 0.24);
|
||||
--ol-ink-muted: var(--ol-ink-3);
|
||||
--ol-ink-subtle: var(--ol-ink-4);
|
||||
--ol-placeholder: var(--ol-ink-4);
|
||||
|
||||
/* Blue accent */
|
||||
--ol-blue: #2563eb;
|
||||
@@ -34,6 +37,11 @@
|
||||
--ol-blue-soft: #eff4ff;
|
||||
--ol-blue-ring: rgba(37, 99, 235, 0.22);
|
||||
--ol-on-accent: #ffffff;
|
||||
--ol-accent-solid-bg: var(--ol-blue);
|
||||
--ol-accent-solid-bg-hover: var(--ol-blue-hover);
|
||||
--ol-accent-solid-ink: var(--ol-on-accent);
|
||||
--ol-primary-solid-bg: #111827;
|
||||
--ol-primary-solid-ink: var(--ol-on-accent);
|
||||
|
||||
/* Shared glass */
|
||||
--ol-glass-bg: rgba(255, 255, 255, 0.62);
|
||||
@@ -48,6 +56,25 @@
|
||||
|
||||
/* Frost grain texture used by the .ol-frost helpers in global.css. */
|
||||
--ol-frost-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.95'%20numOctaves='1'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0.34%200.34%200.34%200%200%200.34%200.34%200.34%200%200%200.34%200.34%200.34%200%200%200%200%200%200%201'/%3E%3C/filter%3E%3Crect%20width='100'%20height='100'%20filter='url(%23g)'/%3E%3C/svg%3E");
|
||||
--ol-frost-bg:
|
||||
radial-gradient(135% 86% at 15% -10%,
|
||||
rgba(255, 255, 255, 0.97) 0%,
|
||||
rgba(255, 255, 255, 0) 56%),
|
||||
linear-gradient(161deg,
|
||||
rgba(255, 255, 255, 0.93) 0%,
|
||||
rgba(244, 247, 252, 0.88) 100%);
|
||||
--ol-frost-grain-opacity: 0.32;
|
||||
|
||||
/* Capsule circle buttons */
|
||||
--ol-capsule-cancel-bg: var(--ol-control-muted-strong);
|
||||
--ol-capsule-cancel-ink: var(--ol-ink);
|
||||
--ol-capsule-confirm-bg: var(--ol-control-solid);
|
||||
--ol-capsule-confirm-ink: var(--ol-ink);
|
||||
|
||||
/* Settings / form inputs */
|
||||
--ol-input-bg: var(--ol-surface-2);
|
||||
--ol-input-ink: var(--ol-ink);
|
||||
--ol-input-placeholder: var(--ol-placeholder);
|
||||
|
||||
/* Motion */
|
||||
--ol-motion-spring: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
@@ -73,6 +100,9 @@
|
||||
--ol-r-xl: 18px;
|
||||
--ol-r-2xl: var(--ol-card-radius);
|
||||
--ol-r-pill: var(--ol-pill-radius);
|
||||
--ol-control-radius: 8px;
|
||||
--ol-bubble-radius: var(--ol-r-lg);
|
||||
--ol-modal-radius: var(--ol-r-xl);
|
||||
|
||||
/* Typography */
|
||||
--ol-font-display: "Aptos", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
@@ -85,6 +115,8 @@
|
||||
--ol-warn: #d97706;
|
||||
--ol-warn-soft: #fff7ed;
|
||||
--ol-err: #dc2626;
|
||||
--ol-danger-solid-bg: var(--ol-err);
|
||||
--ol-danger-solid-ink: #ffffff;
|
||||
|
||||
/* Theme-aware shell and control tokens */
|
||||
--ol-app-shell-bg:
|
||||
@@ -102,8 +134,8 @@
|
||||
--ol-panel-bg: var(--ol-aura-surface);
|
||||
--ol-panel-border: var(--ol-aura-glass-border);
|
||||
--ol-panel-shadow: var(--ol-aura-shadow);
|
||||
--ol-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(252, 252, 253, 0.82));
|
||||
--ol-card-border: rgba(255, 255, 255, 0.74);
|
||||
--ol-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 250, 251, 0.86));
|
||||
--ol-card-border: rgba(255, 255, 255, 0.78);
|
||||
--ol-card-shadow: var(--ol-aura-shadow-soft);
|
||||
|
||||
--ol-sidebar-bg: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
|
||||
@@ -147,8 +179,8 @@
|
||||
--ol-pill-selected-ink: #ffffff;
|
||||
--ol-pill-selected-border: #111827;
|
||||
--ol-segmented-bg: rgba(0,0,0,0.04);
|
||||
--ol-segmented-active-bg: #ffffff;
|
||||
--ol-segmented-active-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 0.5px rgba(0,0,0,.06);
|
||||
--ol-segmented-active-bg: var(--ol-control-elevated);
|
||||
--ol-segmented-active-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.08);
|
||||
--ol-toggle-off-bg: rgba(0,0,0,0.15);
|
||||
--ol-toggle-knob: #ffffff;
|
||||
--ol-overlay-bg: rgba(15,17,22,0.32);
|
||||
@@ -205,20 +237,46 @@
|
||||
--ol-ink: #f4f7fb;
|
||||
--ol-ink-2: #d8dfeb;
|
||||
--ol-ink-3: rgba(244, 247, 251, 0.74);
|
||||
--ol-ink-4: rgba(244, 247, 251, 0.50);
|
||||
--ol-ink-4: rgba(244, 247, 251, 0.54);
|
||||
--ol-ink-5: rgba(244, 247, 251, 0.26);
|
||||
--ol-ink-muted: var(--ol-ink-3);
|
||||
--ol-ink-subtle: var(--ol-ink-4);
|
||||
--ol-placeholder: var(--ol-ink-4);
|
||||
|
||||
--ol-blue: #60a5fa;
|
||||
--ol-blue-hover: #3b82f6;
|
||||
--ol-blue-soft: rgba(96, 165, 250, 0.14);
|
||||
--ol-blue-ring: rgba(96, 165, 250, 0.30);
|
||||
--ol-on-accent: #f8fbff;
|
||||
--ol-accent-solid-bg: #2563eb;
|
||||
--ol-accent-solid-bg-hover: #1d4ed8;
|
||||
--ol-accent-solid-ink: #ffffff;
|
||||
--ol-primary-solid-bg: var(--ol-accent-solid-bg);
|
||||
--ol-primary-solid-ink: var(--ol-accent-solid-ink);
|
||||
|
||||
--ol-glass-bg: rgba(15, 19, 27, 0.68);
|
||||
--ol-glass-bg-strong: rgba(17, 22, 30, 0.84);
|
||||
--ol-glass-border: rgba(255, 255, 255, 0.10);
|
||||
--ol-aura-glass-border: rgba(255, 255, 255, 0.10);
|
||||
|
||||
--ol-frost-bg:
|
||||
radial-gradient(135% 86% at 15% -10%,
|
||||
rgba(255, 255, 255, 0.10) 0%,
|
||||
rgba(255, 255, 255, 0) 56%),
|
||||
linear-gradient(161deg,
|
||||
rgba(22, 28, 38, 0.88) 0%,
|
||||
rgba(14, 18, 26, 0.82) 100%);
|
||||
--ol-frost-grain-opacity: 0.28;
|
||||
|
||||
--ol-capsule-cancel-bg: rgba(255, 255, 255, 0.10);
|
||||
--ol-capsule-cancel-ink: var(--ol-ink-2);
|
||||
--ol-capsule-confirm-bg: var(--ol-accent-solid-bg);
|
||||
--ol-capsule-confirm-ink: var(--ol-accent-solid-ink);
|
||||
|
||||
--ol-input-bg: rgba(255, 255, 255, 0.06);
|
||||
--ol-input-ink: var(--ol-ink);
|
||||
--ol-input-placeholder: var(--ol-ink-4);
|
||||
|
||||
--ol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 0 0 0.5px rgba(255, 255, 255, 0.04);
|
||||
--ol-shadow-md: 0 10px 30px -20px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(255, 255, 255, 0.05);
|
||||
--ol-shadow-lg: 0 24px 72px -32px rgba(0, 0, 0, 0.58), 0 0 0 0.5px rgba(255, 255, 255, 0.05);
|
||||
@@ -231,6 +289,8 @@
|
||||
--ol-warn: #f59e0b;
|
||||
--ol-warn-soft: rgba(245, 158, 11, 0.14);
|
||||
--ol-err: #f87171;
|
||||
--ol-danger-solid-bg: #b91c1c;
|
||||
--ol-danger-solid-ink: #ffffff;
|
||||
|
||||
--ol-app-shell-bg: linear-gradient(180deg, #050607 0%, #090a0c 100%);
|
||||
--ol-window-bg:
|
||||
@@ -243,9 +303,9 @@
|
||||
--ol-panel-bg: linear-gradient(180deg, rgba(33,33,36,0.96), rgba(28,28,31,0.94));
|
||||
--ol-panel-border: rgba(255,255,255,0.07);
|
||||
--ol-panel-shadow: 0 18px 44px -34px rgba(0,0,0,0.62);
|
||||
--ol-card-bg: linear-gradient(180deg, rgba(34,34,37,0.96), rgba(29,29,32,0.94));
|
||||
--ol-card-border: rgba(255,255,255,0.06);
|
||||
--ol-card-shadow: none;
|
||||
--ol-card-bg: linear-gradient(180deg, rgba(36,36,40,0.98), rgba(30,30,34,0.96));
|
||||
--ol-card-border: rgba(255,255,255,0.08);
|
||||
--ol-card-shadow: 0 12px 32px -24px rgba(0,0,0,0.55);
|
||||
|
||||
--ol-sidebar-bg: transparent;
|
||||
--ol-sidebar-border: rgba(255,255,255,0.06);
|
||||
@@ -288,8 +348,8 @@
|
||||
--ol-pill-selected-ink: #f4f7fb;
|
||||
--ol-pill-selected-border: rgba(96,165,250,0.40);
|
||||
--ol-segmented-bg: rgba(255,255,255,0.06);
|
||||
--ol-segmented-active-bg: rgba(255,255,255,0.12);
|
||||
--ol-segmented-active-shadow: none;
|
||||
--ol-segmented-active-bg: var(--ol-control-elevated);
|
||||
--ol-segmented-active-shadow: 0 0 0 0.5px rgba(255,255,255,0.10);
|
||||
--ol-toggle-off-bg: rgba(255,255,255,0.16);
|
||||
--ol-toggle-knob: #f8fbff;
|
||||
--ol-overlay-bg: rgba(4, 8, 14, 0.58);
|
||||
@@ -313,11 +373,11 @@
|
||||
--ol-style-add-tile-bg: rgba(255,255,255,0.02);
|
||||
--ol-style-add-tile-icon-bg: rgba(255,255,255,0.10);
|
||||
--ol-style-add-tile-border: rgba(255,255,255,0.10);
|
||||
--ol-style-input-bg: rgba(255,255,255,0.04);
|
||||
--ol-style-input-border: rgba(255,255,255,0.08);
|
||||
--ol-style-input-bg: rgba(255,255,255,0.06);
|
||||
--ol-style-input-border: rgba(255,255,255,0.10);
|
||||
--ol-style-input-shadow: none;
|
||||
--ol-style-subtle-bg: rgba(255,255,255,0.03);
|
||||
--ol-style-subtle-border: rgba(255,255,255,0.06);
|
||||
--ol-style-subtle-bg: rgba(255,255,255,0.05);
|
||||
--ol-style-subtle-border: rgba(255,255,255,0.09);
|
||||
--ol-style-subtle-shadow: none;
|
||||
--ol-style-editor-bg: linear-gradient(180deg, rgba(27,27,30,0.96), rgba(23,23,26,0.94));
|
||||
--ol-style-editor-border: rgba(255,255,255,0.07);
|
||||
|
||||
Reference in new issue
Block a user