feat: slider-input web component

This commit is contained in:
Azgaar 2024-08-19 12:03:31 +02:00
parent 147014f0ff
commit 92243bb48c
18 changed files with 378 additions and 375 deletions

107
index.css
View file

@ -525,7 +525,48 @@ input[type="color"]::-webkit-color-swatch-wrapper {
font-size: smaller;
}
#options input[type="text"] {
border: 0px;
width: 62%;
font-size: smaller;
}
#options output {
text-align: right;
font-size: smaller;
}
#options input[type="number"] {
font-size: 0.8em;
border: 0;
text-align: right;
background-color: transparent;
width: 3.3em;
}
#options input[type="number"]::-webkit-inner-spin-button,
#options input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#options input[type="number"]:hover {
outline: 1px solid var(--dark-solid);
}
#options input.paired {
text-align: center;
background-color: white;
}
#options input.long {
width: 100%;
background-color: white;
text-align: left;
}
#options input[type="range"] {
width: 100%;
height: 8px;
background: 0;
appearance: none;
@ -568,55 +609,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
height: 2px;
}
#options input[type="number"] {
font-size: 0.8em;
}
#options input[type="text"] {
border: 0px;
width: 62%;
font-size: smaller;
}
#optionsContent output {
text-align: right;
font-size: smaller;
}
#optionsContent input[type="number"] {
border: 0;
text-align: right;
background-color: transparent;
width: 3.3em;
-moz-appearance: textfield;
}
#optionsContent input[type="number"]::-webkit-inner-spin-button,
#optionsContent input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#optionsContent input[type="number"]:hover {
outline: 1px solid var(--dark-solid);
}
#optionsContent input.paired {
text-align: center;
background-color: white;
}
#optionsContent input.long {
width: 100%;
background-color: white;
text-align: left;
}
#optionsContent input[type="range"] {
width: 100%;
}
#optionsContent select {
#options select {
width: 100%;
}
@ -641,19 +634,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
transform: translate(0px, 1px);
}
#styleElements input[type="range"] {
width: 64%;
}
#styleElements select {
width: 64%;
}
#styleElements input[type="number"] {
width: 6em;
border: 0;
}
#styleSelectFont > option {
font-size: 2em;
}
@ -724,9 +704,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0.45em 0.75em;
margin: 0.35em 0;
transition: 0.1s;
font-size: 1em;
text-transform: capitalize;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;