feat(settings): add adjustable card overlay blur setting (#973)

2026-06-13 14:09:25 -03:00 · 2026-06-13 09:43:49 +08:00
parent bef222c77d
commit ac51f6a2f6
15 changed files with 148 additions and 12 deletions
--- a/locales/de.json
+++ b/locales/de.json
@@ -448,7 +448,9 @@
                "modelName": "Modellname",
                "fileName": "Dateiname"
            },
-            "modelNameDisplayHelp": "Wählen Sie aus, was in der Fußzeile der Modellkarte angezeigt werden soll"
+            "modelNameDisplayHelp": "Wählen Sie aus, was in der Fußzeile der Modellkarte angezeigt werden soll",
+            "cardBlurAmount": "Karten-Overlay-Unschärfe",
+            "cardBlurAmountHelp": "Passen Sie die Unschärfeintensität der Kopf- und Fußzeilen-Overlays auf Modell- und Rezeptkarten an (0 = keine Unschärfe, 20 = maximale Unschärfe)."
        },
        "folderSettings": {
            "activeLibrary": "Aktive Bibliothek",
--- a/locales/en.json
+++ b/locales/en.json
@@ -448,7 +448,9 @@
                "modelName": "Model Name",
                "fileName": "File Name"
            },
-            "modelNameDisplayHelp": "Choose what to display in the model card footer"
+            "modelNameDisplayHelp": "Choose what to display in the model card footer",
+            "cardBlurAmount": "Card Overlay Blur",
+            "cardBlurAmountHelp": "Adjust the blur intensity of the header and footer overlays on model and recipe cards (0 = no blur, 20 = maximum blur)."
        },
        "folderSettings": {
            "activeLibrary": "Active Library",
--- a/locales/es.json
+++ b/locales/es.json
@@ -448,7 +448,9 @@
                "modelName": "Nombre del modelo",
                "fileName": "Nombre del archivo"
            },
-            "modelNameDisplayHelp": "Elige qué mostrar en el pie de la tarjeta del modelo"
+            "modelNameDisplayHelp": "Elige qué mostrar en el pie de la tarjeta del modelo",
+            "cardBlurAmount": "Desenfoque de superposición de tarjetas",
+            "cardBlurAmountHelp": "Ajuste la intensidad de desenfoque de las superposiciones del encabezado y pie de página en las tarjetas de modelos y recetas (0 = sin desenfoque, 20 = desenfoque máximo)."
        },
        "folderSettings": {
            "activeLibrary": "Biblioteca activa",
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -448,7 +448,9 @@
                "modelName": "Nom du modèle",
                "fileName": "Nom du fichier"
            },
-            "modelNameDisplayHelp": "Choisissez ce qui doit être affiché dans le pied de page de la carte du modèle"
+            "modelNameDisplayHelp": "Choisissez ce qui doit être affiché dans le pied de page de la carte du modèle",
+            "cardBlurAmount": "Flou de superposition des cartes",
+            "cardBlurAmountHelp": "Ajustez l'intensité du flou des superpositions d'en-tête et de pied de page sur les cartes de modèles et de recettes (0 = aucun flou, 20 = flou maximal)."
        },
        "folderSettings": {
            "activeLibrary": "Bibliothèque active",
--- a/locales/he.json
+++ b/locales/he.json
@@ -448,7 +448,9 @@
                "modelName": "שם מודל",
                "fileName": "שם קובץ"
            },
-            "modelNameDisplayHelp": "בחר מה להציג בכותרת התחתונה של כרטיס המודל"
+            "modelNameDisplayHelp": "בחר מה להציג בכותרת התחתונה של כרטיס המודל",
+            "cardBlurAmount": "עוצמת טשטוש שכבת-על בכרטיס",
+            "cardBlurAmountHelp": "כוונן את עוצמת הטשטוש של שכבת-העל בכותרת ובכותרות תחתונה בכרטיסי מודל ומתכונים (0 = ללא טשטוש, 20 = טשטוש מקסימלי)."
        },
        "folderSettings": {
            "activeLibrary": "ספרייה פעילה",
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -448,7 +448,9 @@
                "modelName": "モデル名",
                "fileName": "ファイル名"
            },
-            "modelNameDisplayHelp": "モデルカードのフッターに表示する内容を選択"
+            "modelNameDisplayHelp": "モデルカードのフッターに表示する内容を選択",
+            "cardBlurAmount": "カードオーバーレイのぼかし",
+            "cardBlurAmountHelp": "モデルカードとレシピカードのヘッダー・フッターオーバーレイのぼかし強度を調整します（0 = ぼかしなし、20 = 最大ぼかし）。"
        },
        "folderSettings": {
            "activeLibrary": "アクティブライブラリ",
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -448,7 +448,9 @@
                "modelName": "모델명",
                "fileName": "파일명"
            },
-            "modelNameDisplayHelp": "모델 카드 하단에 표시할 내용을 선택하세요"
+            "modelNameDisplayHelp": "모델 카드 하단에 표시할 내용을 선택하세요",
+            "cardBlurAmount": "카드 오버레이 흐림 강도",
+            "cardBlurAmountHelp": "모델 및 레시피 카드의 헤더와 푸터 오버레이 흐림 강도를 조정합니다 (0 = 흐림 없음, 20 = 최대 흐림)."
        },
        "folderSettings": {
            "activeLibrary": "활성 라이브러리",
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -448,7 +448,9 @@
                "modelName": "Название модели",
                "fileName": "Имя файла"
            },
-            "modelNameDisplayHelp": "Выберите, что отображать в нижней части карточки модели"
+            "modelNameDisplayHelp": "Выберите, что отображать в нижней части карточки модели",
+            "cardBlurAmount": "Размытие наложения карточек",
+            "cardBlurAmountHelp": "Настройте интенсивность размытия наложений верхнего и нижнего колонтитулов на карточках моделей и рецептов (0 = без размытия, 20 = максимальное размытие)."
        },
        "folderSettings": {
            "activeLibrary": "Активная библиотека",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -448,7 +448,9 @@
                "modelName": "模型名称",
                "fileName": "文件名"
            },
-            "modelNameDisplayHelp": "选择在模型卡片底部显示的内容"
+            "modelNameDisplayHelp": "选择在模型卡片底部显示的内容",
+            "cardBlurAmount": "卡片叠加模糊强度",
+            "cardBlurAmountHelp": "调整模型和配方卡片上页眉和页脚叠加层的模糊强度（0 = 无模糊，20 = 最大模糊）。"
        },
        "folderSettings": {
            "activeLibrary": "活动库",
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -448,7 +448,9 @@
                "modelName": "模型名稱",
                "fileName": "檔案名稱"
            },
-            "modelNameDisplayHelp": "選擇在模型卡片底部顯示的內容"
+            "modelNameDisplayHelp": "選擇在模型卡片底部顯示的內容",
+            "cardBlurAmount": "卡片疊加模糊強度",
+            "cardBlurAmountHelp": "調整模型和配方卡片上頁首和頁尾疊加層的模糊強度（0 = 無模糊，20 = 最大模糊）。"
        },
        "folderSettings": {
            "activeLibrary": "使用中的資料庫",
--- a/static/css/components/card.css
+++ b/static/css/components/card.css
@@ -278,7 +278,7 @@
    left: 0;
    right: 0;
    background: linear-gradient(transparent 15%, oklch(0% 0 0 / 0.75));
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(var(--card-blur-amount, 8px));
    color: white;
    padding: var(--space-1);
    display: flex;
@@ -294,7 +294,7 @@
    left: 0;
    right: 0;
    background: linear-gradient(oklch(0% 0 0 / 0.75), transparent 85%);
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(var(--card-blur-amount, 8px));
    color: white;
    padding: var(--space-1);
    display: flex;
--- a/static/css/components/modal/settings-modal.css
+++ b/static/css/components/modal/settings-modal.css
@@ -813,6 +813,67 @@
    outline: none;
 }

+/* Range Slider Control */
+.range-control {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.range-control input[type="range"] {
+    width: 120px;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--border-color);
+    border-radius: 2px;
+    outline: none;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.range-control input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--lora-accent);
+    cursor: pointer;
+    border: 2px solid var(--lora-surface);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: transform 0.15s ease;
+}
+
+.range-control input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+}
+
+.range-control input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--lora-accent);
+    cursor: pointer;
+    border: 2px solid var(--lora-surface);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.range-control .range-value {
+    min-width: 36px;
+    text-align: center;
+    font-size: 0.9em;
+    font-weight: 600;
+    color: var(--text-color);
+    font-variant-numeric: tabular-nums;
+}
+
+[data-theme="dark"] .range-control input[type="range"] {
+    background: rgba(255, 255, 255, 0.15);
+}
+
 /* Toggle Switch */
 .toggle-switch {
    position: relative;
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -804,6 +804,16 @@ export class SettingsManager {
            );
        }

+        // Set card blur amount slider
+        const cardBlurAmountInput = document.getElementById('cardBlurAmount');
+        if (cardBlurAmountInput) {
+            cardBlurAmountInput.value = state.global.settings.card_blur_amount ?? 8;
+        }
+        const cardBlurAmountValue = document.getElementById('cardBlurAmountValue');
+        if (cardBlurAmountValue) {
+            cardBlurAmountValue.textContent = `${state.global.settings.card_blur_amount ?? 8}px`;
+        }
+
        const usePortableCheckbox = document.getElementById('usePortableSettings');
        if (usePortableCheckbox) {
            usePortableCheckbox.checked = !!state.global.settings.use_portable_settings;
@@ -2051,6 +2061,28 @@ export class SettingsManager {
        }
    }

+    async saveRangeSetting(elementId, displayId, settingKey) {
+        const element = document.getElementById(elementId);
+        if (!element) return;
+
+        const value = parseInt(element.value, 10);
+
+        try {
+            await this.saveSetting(settingKey, value);
+            this.applyFrontendSettings();
+
+            // Update the displayed value next to the slider
+            const displayEl = document.getElementById(displayId);
+            if (displayEl) {
+                displayEl.textContent = `${value}px`;
+            }
+
+            showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
+        } catch (error) {
+            showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');
+        }
+    }
+
    updateExampleImagesOpenSettingsVisibility() {
        const openMode = state.global.settings.example_images_open_mode || 'system';
        const localRootSetting = document.getElementById('exampleImagesLocalRootSetting');
@@ -2887,6 +2919,10 @@ export class SettingsManager {
    }

    applyFrontendSettings() {
+        // Apply card blur amount to CSS custom property
+        const cardBlurAmount = state.global.settings.card_blur_amount ?? 8;
+        document.documentElement.style.setProperty('--card-blur-amount', `${cardBlurAmount}px`);
+
        // Apply autoplay setting to existing videos in card previews
        const autoplayOnHover = state.global.settings.autoplay_on_hover;
        document.querySelectorAll('.card-preview video').forEach(video => {
--- a/static/js/state/index.js
+++ b/static/js/state/index.js
@@ -32,6 +32,7 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({
    auto_download_example_images: false,
    blur_mature_content: true,
    mature_blur_level: 'R',
+    card_blur_amount: 8,
    autoplay_on_hover: false,
    display_density: 'default',
    card_info_display: 'always',
--- a/templates/components/modals/settings_modal.html
+++ b/templates/components/modals/settings_modal.html
@@ -448,6 +448,7 @@
                                    </div>
                                </div>
                            </div>
+
                        </div>
                        
                        <!-- Video Settings -->
@@ -556,6 +557,23 @@
                                </div>
                            </div>

+                            <div class="setting-item">
+                                <div class="setting-row">
+                                    <div class="setting-info">
+                                        <label for="cardBlurAmount">
+                                        {{ t('settings.layoutSettings.cardBlurAmount') }}
+                                        <i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.cardBlurAmountHelp') }}"></i>
+                                    </label>
+                                    </div>
+                                    <div class="setting-control range-control">
+                                        <input type="range" id="cardBlurAmount" min="0" max="20" value="8" step="1"
+                                               oninput="document.getElementById('cardBlurAmountValue').textContent = this.value + 'px'"
+                                               onchange="settingsManager.saveRangeSetting('cardBlurAmount', 'cardBlurAmountValue', 'card_blur_amount')">
+                                        <span id="cardBlurAmountValue" class="range-value">8px</span>
+                                    </div>
+                                </div>
+                            </div>
+
                            <div class="setting-item">
                                <div class="setting-row">
                                    <div class="setting-info">