mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 03:51:23 +01:00
feat: slider-input web component
This commit is contained in:
parent
147014f0ff
commit
92243bb48c
18 changed files with 378 additions and 375 deletions
107
index.css
107
index.css
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue