Styling changes + tooltips and defaults

This commit is contained in:
2026-05-11 11:31:38 +02:00
parent cabfe687e2
commit 589b551558
8 changed files with 142 additions and 47 deletions

View File

@@ -98,30 +98,36 @@
<!-- Settings menu template (except dynamic light sliders) -->
<template id="tmpl-settings">
<div data-controller="settings">
<h2 class="fs-5 ms-2 mb-3 mt-3">
<i class="bi bi-lightbulb me-1"></i> Illuminazione
</h2>
<h3 class="fs-6 ms-4 mb-3 mt-3">
Direzione (x, y, z)
</h3>
<div data-sliders-container></div>
<h3 class="fs-6 ms-4 mb-3 mt-3">
Intensità
</h3>
<div data-slider-exposure-container></div>
<h2 class="fs-5 ms-2 mb-3 mt-3">
<i class="bi bi-brightness-high me-1"></i> Ambiente
</h2>
<div class="form-check form-switch ms-4 mt-2">
<input class="form-check-input" type="checkbox" role="switch"
data-settings-target="ao" data-action="change->settings#toggleAO">
<label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
</div>
<div class="form-check form-switch ms-4 mt-2">
<input class="form-check-input" type="checkbox" role="switch"
data-settings-target="shadows" data-action="change->settings#toggleShadows">
<label class="form-check-label" for="shadowsSwitch">Ombre</label>
</div>
<details class="w-max-content">
<summary class="fs-5 ms-3 mb-3 mt-3">
<i class="bi bi-lightbulb me-1"></i> Illuminazione
</summary>
<h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
Direzione (x, y, z)
</h3>
<div class="border border-1 rounded ms-4" data-sliders-container></div>
<h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
Intensità <span class="d-inline app-tooltip" data-tip="Le modifiche di intensità hanno effetto solo se Ambient Occlusion non è attivo" tabindex="1"><i class="bi bi-info-circle ms-1"></i></span>
</h3>
<div class="ms-4 border border-1 rounded" data-slider-exposure-container></div>
</details>
<details>
<summary class="fs-5 ms-3 mb-3 mt-3">
<i class="bi bi-brightness-high me-1"></i> Ambiente
</summary>
<div class="form-check form-switch ms-4 mt-4">
<input class="form-check-input" type="checkbox" role="switch"
data-settings-target="ao" data-action="change->settings#toggleAO">
<label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
</div>
<div class="form-check form-switch ms-4 mt-2">
<input class="form-check-input" type="checkbox" role="switch"
data-settings-target="shadows" data-action="change->settings#toggleShadows">
<label class="form-check-label" for="shadowsSwitch">
Ombre <span class="d-inline app-tooltip" data-tip="Attivare le ombre può rallentare l'applicazione" tabindex="2"><i class="bi bi-info-circle ms-1"></i></span>
</label>
</div>
</details>
</div>
</template>