neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Fix no overflow in slider number display

Browse Source
This commit is contained in:
space-nuko
2023-05-07 17:20:14 -05:00
parent 3a71117073
commit e7f4638093
1 changed files with 37 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/lib/widgets/RangeWidget.svelte
View File

@@ -123,35 +123,46 @@
padding: 2px; padding: 2px;
width: 100%; width: 100%;
// Prevent swiping on the slider track from accidentally changing the value :global(input[type=number]) {
&.mobile :global(input[type="range"]) { text-overflow: ellipsis;
pointer-events: none; }
-webkit-appearance: none;
appearance: none;
cursor: default;
height: 0.6rem;
padding: initial;
border: initial;
margin: 0.8rem 0;
width: 100%;
background: linear-gradient(to right, var(--color-blue-600), var(--color-blue-600)), #D7D7D7; &.mobile {
background-size: var(--background-size, 0%) 100%; // Prevent swiping on the slider track from accidentally changing the value
background-repeat: no-repeat; :global(input[type="range"]) {
border-radius: 1rem; pointer-events: none;
border: 1px solid var(--neutral-400);
&::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
pointer-events: all; cursor: default;
width: 1.75rem; height: 0.6rem;
height: 1.75rem; padding: initial;
border-radius: 50%; border: initial;
background: var(--color-blue-600); margin: 0.8rem 0;
cursor: pointer; width: 100%;
border: 2px solid var(--neutral-100);
box-shadow: 0px 0px 0px 1px var(--neutral-400); background: linear-gradient(to right, var(--color-blue-600), var(--color-blue-600)), #D7D7D7;
background-size: var(--background-size, 0%) 100%;
background-repeat: no-repeat;
border-radius: 1rem;
border: 1px solid var(--neutral-400);
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
pointer-events: all;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--color-blue-600);
cursor: pointer;
border: 2px solid var(--neutral-100);
box-shadow: 0px 0px 0px 1px var(--neutral-400);
}
:global(input[type=number]) {
font-size: 16px;
height: var(--size-6);
}
} }
} }
} }