UI refinements (#2859)

## Description:

UI Refinements requested by @evanpelle  check https://ui.openfront.dev

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n
This commit is contained in:
Ryan
2026-01-11 22:52:03 +00:00
committed by GitHub
parent 14512e4f87
commit 3e661752af
39 changed files with 1928 additions and 1573 deletions
@@ -41,7 +41,7 @@ export class SettingKeybind extends LitElement {
<div class="flex items-center gap-3 shrink-0">
<div
class="relative h-12 min-w-[80px] px-4 flex items-center justify-center bg-black/40 border border-white/20 rounded-lg text-xl font-bold font-mono shadow-inner hover:border-blue-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 transition-all cursor-pointer select-none text-white
class="relative h-12 min-w-[80px] px-4 flex items-center justify-center bg-black/60 border border-white/20 rounded-lg text-xl font-bold font-mono shadow-inner hover:border-blue-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 transition-all cursor-pointer select-none text-white
${this.listening
? "border-blue-500 text-blue-400 ring-2 ring-blue-500/50"
: ""}"
@@ -50,7 +50,7 @@ export class SettingNumber extends LitElement {
<input
type="number"
id="setting-number-input"
class="shrink-0 w-[100px] py-2 px-3 border border-white/20 rounded-lg bg-black/40 text-white font-mono text-center focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
class="shrink-0 w-[100px] py-2 px-3 border border-white/20 rounded-lg bg-black/60 text-white font-mono text-center focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
.value=${String(this.value ?? 0)}
min=${this.min}
max=${this.max}
@@ -52,7 +52,7 @@ export class SettingToggle extends LitElement {
@change=${this.handleChange}
/>
<span
class="absolute inset-0 bg-black/40 border border-white/10 transition-all duration-300 rounded-full
class="absolute inset-0 bg-black/60 border border-white/10 transition-all duration-300 rounded-full
before:absolute before:content-[''] before:h-5 before:w-5 before:left-[3px] before:top-[3px]
before:bg-white/40 before:transition-all before:duration-300 before:rounded-full before:shadow-sm hover:before:bg-white/60
peer-checked:bg-blue-600 peer-checked:border-blue-500 peer-checked:before:translate-x-[24px] peer-checked:before:bg-white"