This commit is contained in:
2026-09-16 05:30:51 +02:00
parent 20470435ea
commit a7c3a5e472
12 changed files with 1374 additions and 172 deletions
+6 -88
View File
@@ -252,94 +252,12 @@
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.enable_bg_blur_hint') }}</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="onara_bg_opacity_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Onara Backdrop Darkness</label>
<span id="onara_bg_opacity_val" style="font-size: 0.85em; opacity: 0.8;">70%</span>
</div>
<input type="range" id="onara_bg_opacity_slider" min="0" max="1" step="0.01" value="0.70" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Overlay darkness in Onara mode (lower values allow background canvas to shine through).</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="onara_backdrop_blur_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Onara Backdrop Blur</label>
<span id="onara_backdrop_blur_val" style="font-size: 0.85em; opacity: 0.8;">5px</span>
</div>
<input type="range" id="onara_backdrop_blur_slider" min="0" max="50" step="1" value="5" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Backdrop blur applied behind the Onara media modal.</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="onara_grid_dim_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Onara Background Grid Opacity</label>
<span id="onara_grid_dim_val" style="font-size: 0.85em; opacity: 0.8;">38%</span>
</div>
<input type="range" id="onara_grid_dim_slider" min="0" max="1" step="0.01" value="0.38" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Control how clearly the background thumbnail grid shines through over the ambient canvas in Onara mode.</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="bg_canvas_opacity_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Background Canvas Opacity</label>
<span id="bg_canvas_opacity_val" style="font-size: 0.85em; opacity: 0.8;">100%</span>
</div>
<input type="range" id="bg_canvas_opacity_slider" min="0" max="1" step="0.01" value="1.00" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Control the visibility and brightness of the ambient background canvas & audio visualizer.</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="bg_canvas_blur_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Background Blur Radius</label>
<span id="bg_canvas_blur_val" style="font-size: 0.85em; opacity: 0.8;">30px</span>
</div>
<input type="range" id="bg_canvas_blur_slider" min="0" max="300" step="1" value="30" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Adjust the ambient blur radius. Higher values = softer, dreamier glow. In GPU CSS mode this goes up to 300px at full resolution.</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="bg_canvas_brightness_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Background Brightness</label>
<span id="bg_canvas_brightness_val" style="font-size: 0.85em; opacity: 0.8;">0.45x</span>
</div>
<input type="range" id="bg_canvas_brightness_slider" min="0.1" max="3.0" step="0.05" value="0.45" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Boost brightness so colors pop. Values &lt; 1 darken, &gt; 1 amplify.</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="bg_blur_method_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Blur Engine</label>
<span id="bg_blur_method_val" style="font-size: 0.85em; opacity: 0.8;">Canvas 2D</span>
</div>
<input type="range" id="bg_blur_method_slider" min="0" max="2" step="1" value="0" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;"><strong>0 = Canvas 2D</strong> (downsampled, fast) &nbsp;|&nbsp; <strong>1 = GPU CSS Filter</strong> (classic look, full-res compositor blur like older versions) &nbsp;|&nbsp; <strong>2 = Hybrid</strong> (CSS blur + canvas color grading)</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="bg_canvas_saturate_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Color Saturation</label>
<span id="bg_canvas_saturate_val" style="font-size: 0.85em; opacity: 0.8;">1.80x</span>
</div>
<input type="range" id="bg_canvas_saturate_slider" min="0.5" max="4.0" step="0.05" value="1.8" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Boost color saturation of the background. 1.0 = original, higher = more vivid / neon.</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="bg_canvas_contrast_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Contrast Depth</label>
<span id="bg_canvas_contrast_val" style="font-size: 0.85em; opacity: 0.8;">1.10x</span>
</div>
<input type="range" id="bg_canvas_contrast_slider" min="0.5" max="3.0" step="0.05" value="1.1" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Contrast punch. Values &gt; 1.0 darken blacks and pop highlights.</small>
</div>
<div class="setting-item" style="margin-top: 15px; padding-left: 25px;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 380px;">
<label for="bg_canvas_zoom_slider" style="font-size: 0.9em; margin-bottom: 0; font-weight: bold;">Edge Overscan Zoom</label>
<span id="bg_canvas_zoom_val" style="font-size: 0.85em; opacity: 0.8;">1.12x</span>
</div>
<input type="range" id="bg_canvas_zoom_slider" min="1.0" max="1.8" step="0.01" value="1.12" style="max-width: 380px; width: 100%; margin-top: 4px;">
<small class="text-muted" style="display: block;">Zoom the background canvas slightly to hide blurry edge bleeding. 1.12 eliminates edge artifacts at typical blur values.</small>
<div class="setting-item" style="margin-top: 15px;">
<label for="onara_enabled_toggle" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="onara_enabled_toggle">
<span>Enable Onara viewer</span>
</label>
<small class="text-muted" style="margin-left: 25px;">Open items in the fullscreen Onara modal instead of navigating to the item page. Fine-tune appearance in the <strong>Tuner → Background</strong> tab.</small>
</div>
<div class="setting-item" style="margin-top: 15px;">