Controller customization feature

This commit is contained in:
redphx
2024-12-22 17:17:03 +07:00
parent 8ef5a95c88
commit 7b60ba3a3e
89 changed files with 3286 additions and 1188 deletions

View File

@@ -10,6 +10,7 @@
display: inline-block;
min-width: 40px;
font-family: var(--bx-monospaced-font);
white-space: pre;
font-size: 13px;
margin: 0 4px;
}
@@ -44,7 +45,7 @@
}
}
input[type="range"] {
input[type=range] {
display: block;
margin: 8px 0 2px auto;
min-width: 180px;
@@ -62,3 +63,91 @@
}
}
}
.bx-dual-number-stepper {
> span {
display: block;
font-family: var(--bx-monospaced-font);
font-size: 13px;
white-space: pre;
margin: 0 4px;
text-align: center;
}
> div {
input[type=range] {
display: block;
width: 100%;
min-width: 180px;
background: transparent;
color: #959595 !important;
appearance: none;
padding: 8px 0;
range-track() {
background: linear-gradient(90deg, #fff var(--from), var(--bx-primary-button-color) var(--from) var(--to), #fff var(--to) 100%);
height: 8px;
border-radius: 2px;
}
range-track-hover() {
background: linear-gradient(90deg, #fff var(--from), #006635 var(--from) var(--to), #fff var(--to) 100%);
}
thumb() {
margin-top: -4px;
appearance: none;
width: 4px;
height: 16px;
background: #00b85f;
border: none;
border-radius: 2px;
}
thumb-hover() {
background: #fb3232;
}
&::-webkit-slider-runnable-track {
range-track()
}
&::-moz-range-track {
range-track()
}
&::-webkit-slider-thumb {
thumb();
}
&::-moz-range-thumb {
thumb();
}
&:hover, &&:active, &:focus {
&::-webkit-slider-runnable-track {
range-track-hover();
}
&::-moz-range-track {
range-track-hover();
}
&::-webkit-slider-thumb {
thumb-hover();
}
&::-moz-range-thumb {
thumb-hover();
}
}
}
}
&[data-disabled=true], &[disabled=true] {
input[type=range] {
display: none;
}
}
}