mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 13:17:45 +00:00
fix: input range thumb off center
This commit is contained in:
parent
14c992a9ce
commit
c45c51fa31
4 changed files with 9 additions and 9 deletions
|
|
@ -126,20 +126,20 @@ input[type="range"] {
|
||||||
|
|
||||||
/* Track */
|
/* Track */
|
||||||
input[type="range"]::-webkit-slider-runnable-track {
|
input[type="range"]::-webkit-slider-runnable-track {
|
||||||
@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
|
@apply h-1 bg-orange-300 rounded-full;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"]::-moz-range-track {
|
input[type="range"]::-moz-range-track {
|
||||||
@apply h-1 bg-orange-200 border-2 border-orange-400 rounded-full;
|
@apply h-1 bg-orange-300 rounded-full;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Thumb */
|
/* Thumb */
|
||||||
input[type="range"]::-webkit-slider-thumb {
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
@apply appearance-none size-4 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition -mt-1.5;
|
@apply appearance-none size-4 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition -mt-1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"]::-moz-range-thumb {
|
input[type="range"]::-moz-range-thumb {
|
||||||
@apply size-3.5 bg-orange-400 border-2 border-orange-500 rounded-full shadow-md transition;
|
@apply size-3.5 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hover */
|
/* Hover */
|
||||||
|
|
|
||||||
|
|
@ -206,7 +206,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
||||||
</label>
|
</label>
|
||||||
<div className="relative h-5 flex justify-center items-center">
|
<div className="relative h-5 flex justify-center items-center">
|
||||||
<input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
|
<input id="height" type="range" min={0} max={128} step={1} disabled value={height} />
|
||||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -217,7 +217,7 @@ export default function MiiInstructions({ instructions }: Props) {
|
||||||
</label>
|
</label>
|
||||||
<div className="relative h-5 flex justify-center items-center">
|
<div className="relative h-5 flex justify-center items-center">
|
||||||
<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
|
<input id="weight" type="range" min={0} max={128} step={1} disabled value={weight} />
|
||||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ export default function VoiceViewer({ data, onChange, onClickTone }: Props) {
|
||||||
if (onChange) onChange(e, label.toLowerCase());
|
if (onChange) onChange(e, label.toLowerCase());
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ export default function HeadTab({ instructions }: Props) {
|
||||||
instructions.current.height = e.target.valueAsNumber;
|
instructions.current.height = e.target.valueAsNumber;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -89,7 +89,7 @@ export default function HeadTab({ instructions }: Props) {
|
||||||
instructions.current.weight = e.target.valueAsNumber;
|
instructions.current.weight = e.target.valueAsNumber;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="absolute h-4 w-1.5 rounded bg-orange-400 z-0"></div>
|
<div className="absolute h-4 w-1.5 rounded bg-orange-300 z-0"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue