mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
Slider-input web component (#1109)
* feat: slider-input web component * feat: slider-input web component - Brush size * feat: slider-input - statesGrowthRate * feat: slider-input - units editor * feat: slider-input - dissalow invalid numbers * chore: pump version to v1.99.05 * chore: pump version to v1.99.05 --------- Co-authored-by: Azgaar <azgaar.fmg@yandex.com>
This commit is contained in:
parent
da8c4f1e4a
commit
d4aef4920c
26 changed files with 546 additions and 798 deletions
134
index.css
134
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;
|
||||
|
|
@ -1268,7 +1245,6 @@ i.resetButton:active {
|
|||
padding: 0;
|
||||
height: 2px;
|
||||
background: #d4d4d4;
|
||||
top: -0.35em;
|
||||
position: relative;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -1844,11 +1820,6 @@ div.editorLine {
|
|||
padding: 0px 3px !important;
|
||||
}
|
||||
|
||||
#unitsBody > div > * {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.unitsHeader {
|
||||
margin: 0.8em 0 0 -1.1em;
|
||||
font-weight: bold;
|
||||
|
|
@ -1860,28 +1831,21 @@ div.editorLine {
|
|||
margin: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
#unitsBody > div > div {
|
||||
#unitsBody label {
|
||||
display: inline-block;
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
#unitsBody > div > input[type="range"] {
|
||||
width: 7em;
|
||||
}
|
||||
|
||||
#unitsBody > div > select,
|
||||
#unitsBody > div > input[type="text"] {
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
#unitsBody > div > input[type="number"] {
|
||||
width: 4.35em;
|
||||
}
|
||||
|
||||
#unitsBody > div > input,
|
||||
#unitsBody > div > select {
|
||||
width: 14.4em;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
#unitsBody input[type="range"] {
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
#unitsEditor i.icon-lock-open,
|
||||
#unitsEditor i.icon-lock {
|
||||
color: #626573;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue