feat(settings): redesign Card Overlay Blur range slider to match settings UI style

This commit is contained in:
Will Miao
2026-06-17 15:24:14 +08:00
parent 5237f8b7dc
commit 33ee392b7b
3 changed files with 75 additions and 17 deletions

View File

@@ -805,12 +805,14 @@ export class SettingsManager {
// Set card blur amount slider
const cardBlurAmountInput = document.getElementById('cardBlurAmount');
const cardBlurValue = state.global.settings.card_blur_amount ?? 8;
if (cardBlurAmountInput) {
cardBlurAmountInput.value = state.global.settings.card_blur_amount ?? 8;
cardBlurAmountInput.value = cardBlurValue;
cardBlurAmountInput.style.setProperty('--range-fill', (cardBlurValue / 20 * 100) + '%');
}
const cardBlurAmountValue = document.getElementById('cardBlurAmountValue');
if (cardBlurAmountValue) {
cardBlurAmountValue.textContent = `${state.global.settings.card_blur_amount ?? 8}px`;
cardBlurAmountValue.textContent = `${cardBlurValue}px`;
}
const usePortableCheckbox = document.getElementById('usePortableSettings');
@@ -2070,6 +2072,9 @@ export class SettingsManager {
displayEl.textContent = `${value}px`;
}
const max = parseInt(element.max, 10) || 20;
element.style.setProperty('--range-fill', (value / max * 100) + '%');
showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
} catch (error) {
showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');