schmop/zahlzerlegung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Einstellungen: Reset-Reihe wie die anderen Reihen ausrichten (Symbol-Label + zentrierter Knopf)

Browse Source
This commit is contained in:
schmop 2026-05-31 18:25:48 +02:00
parent 0f760b2360
commit 43b942f6b5
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/screens/SettingsScreen.svelte
View File

@ -76,7 +76,15 @@
</div> </div>
</section> </section>
<section class="reset-row"> <section class="setting">
<div class="label">
<svg width="40" height="40" viewBox="0 0 28 28" aria-hidden="true">
<path d="M14 4 L26 25 L2 25 Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round" />
<rect x="12.8" y="10.5" width="2.4" height="7.5" rx="1.2" fill="currentColor" />
<circle cx="14" cy="21.5" r="1.5" fill="currentColor" />
</svg>
</div>
<div class="options">
<button class="reset-btn" type="button" onclick={() => { play('tap'); confirming = true; }} aria-label="Spielstand zurücksetzen"> <button class="reset-btn" type="button" onclick={() => { play('tap'); confirming = true; }} aria-label="Spielstand zurücksetzen">
<svg width="38" height="38" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <svg width="38" height="38" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 7 H24" /> <path d="M4 7 H24" />
@ -85,6 +93,7 @@
<path d="M11.5 11 V20 M16.5 11 V20" /> <path d="M11.5 11 V20 M16.5 11 V20" />
</svg> </svg>
</button> </button>
</div>
</section> </section>
</div> </div>
@ -120,7 +129,7 @@
position: relative; position: relative;
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-rows: auto 1fr 1fr auto; grid-template-rows: auto 1fr 1fr 1fr;
padding: 16px; padding: 16px;
gap: 18px; gap: 18px;
color: var(--c-text-on-dark); color: var(--c-text-on-dark);
@ -129,16 +138,12 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.reset-row {
display: flex;
justify-content: center;
}
.reset-btn { .reset-btn {
display: grid; display: grid;
place-items: center; place-items: center;
width: 84px; width: 84px;
height: 84px; height: 84px;
border-radius: 20px; border-radius: 18px;
background: rgba(255, 107, 107, 0.85); background: rgba(255, 107, 107, 0.85);
color: #fff; color: #fff;
transition: transform 0.08s ease, background 0.15s ease; transition: transform 0.08s ease, background 0.15s ease;