MAPG-231 cleanup input styles
All checks were successful
mapguesser/pipeline/pr-develop This commit looks good

This commit is contained in:
Bence Pőcze 2022-05-26 14:23:29 +02:00
parent d02aa4abe0
commit 90528e61e5
Signed by: bence
GPG Key ID: DC5BD6E95A333E6D
3 changed files with 29 additions and 47 deletions

View File

@ -241,7 +241,7 @@ button.green:enabled:hover, button.green:enabled:focus, a.button.green:hover, a.
background-color: #1b7d31;
}
input, select, textarea {
input[type=text], select, textarea {
background-color: #f9fafb;
border: solid #c8d2e1 1px;
border-radius: 2px;
@ -250,22 +250,26 @@ input, select, textarea {
font-weight: 300;
}
input, select {
input[type=text], select {
height: 30px;
line-height: 30px;
padding: 0 5px;
}
input[type=checkbox], input[type=radio] {
margin-right: 0.5em;
}
textarea {
padding: 5px;
resize: none;
}
input.big, select.big, textarea.big, div.inputWithButton>input {
input[type=text].big, select.big, textarea.big, div.inputWithButton>input[type=text] {
font-size: 18px;
}
input.big, select.big, div.inputWithButton>input {
input[type=text].big, select.big, div.inputWithButton>input[type=text] {
height: 35px;
line-height: 35px;
padding: 0 6px;
@ -280,19 +284,19 @@ input.fullWidth, select.fullWidth, textarea.fullWidth {
width: 100%;
}
input:disabled, select:disabled, textarea:disabled {
input[type=text]:disabled, select:disabled, textarea:disabled {
background-color: #dfdfdf;
border: solid #dfdfdf 1px;
color: #000000;
}
input:focus, select:focus, textarea:focus {
input[type=text]:focus, select:focus, textarea:focus {
background-color: #ffffff;
border: solid #29457f 2px;
outline: none;
}
input:focus, select:focus {
input[type=text]:focus, select:focus {
padding: 0 4px;
}
@ -300,16 +304,16 @@ textarea:focus {
padding: 4px;
}
input.big:focus, select.big:focus {
input[type=text].big:focus, select.big:focus {
padding: 0 5px;
}
div.inputWithButton>input {
div.inputWithButton>input[type=text] {
width: 100%;
padding: 0 83px 0 6px;
}
div.inputWithButton>input:focus {
div.inputWithButton>input[type=text]:focus {
padding: 0 82px 0 5px;
}

View File

@ -79,19 +79,8 @@ div.mapItem>div.buttonContainer {
grid-auto-flow: column;
}
#restrictions input {
height: auto;
margin: 0.5em;
}
#restrictions input[type=range] {
height: 1.5em;
margin-left: 2em;
width: 70%;
}
#timeLimitType {
margin-left: 2em;
margin-left: 1.5em;
}
@media screen and (min-width: 1504px) {

View File

@ -42,36 +42,25 @@ TODO: condition!
</div>
<p class="bold center marginTop marginBottom">OR</p>
-->
<div id="restrictions" class="marginTop marginBottom">
<h3>Optional restrictions</h3>
<div>
<div>
<input type="checkbox" id="timerEnabled" name="timerEnabled" value="timerEnabled" />
<label id="timeLimitLabel" for="timerEnabled">Time limit measured in seconds</label>
</div>
<div>
<input type="range" id="timeLimit" name="timeLimit" min="10" max="1800" step="10" value="300" />
</div>
<div id="timeLimitType">
<label>Time limit</label>
<input type="radio" id="timeLimitTypeGame" name="timeLimitType" value="game" checked />
<label for="timeLimitTypeGame">for the whole game</label>
<input type="radio" id="timeLimitTypeRound" name="timeLimitType" value="round" />
<label for="timeLimitTypeRound">per round</label>
</div>
<div class="marginTop">
<input type="checkbox" id="timerEnabled" name="timerEnabled" value="timerEnabled" /><label id="timeLimitLabel" for="timerEnabled">Time limit measured in seconds</label>
</div>
<div>
<input type="checkbox" id="noMove" name="noMove" value="noMove" />
<label for="noMove">No movement allowed</label>
<div id="timeLimitType">
<input class="fullWidth" type="range" id="timeLimit" name="timeLimit" min="10" max="1800" step="10" value="300" />
<input type="radio" id="timeLimitTypeGame" name="timeLimitType" value="game" checked /><label for="timeLimitTypeGame">for the whole game</label>
<input class="marginLeft" type="radio" id="timeLimitTypeRound" name="timeLimitType" value="round" /><label for="timeLimitTypeRound">per round</label>
</div>
<div>
<input type="checkbox" id="noZoom" name="noZoom" value="noZoom" />
<label for="noZoom">No zoom allowed</label>
<div class="marginTop">
<input type="checkbox" id="noMove" name="noMove" value="noMove" /><label for="noMove">No movement allowed</label>
</div>
<div>
<input type="checkbox" id="noPan" name="noPan" value="noPan" />
<label for="noPan">No camera change allowed</label>
<div class="marginTop">
<input type="checkbox" id="noZoom" name="noZoom" value="noZoom" /><label for="noZoom">No zoom allowed</label>
</div>
<div class="marginTop">
<input type="checkbox" id="noPan" name="noPan" value="noPan" /><label for="noPan">No camera change allowed</label>
</div>
<input type="hidden" name="mapId" id="challengeMapId" />
</div>