esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/static/css/mapguesser.css
View File

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

13
public/static/css/maps.css
View File

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

37
views/maps.php
View File

@ -45,33 +45,22 @@ TODO: condition!
<div id="restrictions" class="marginTop marginBottom"> <div id="restrictions" class="marginTop marginBottom">
<h3>Optional restrictions</h3> <h3>Optional restrictions</h3>
<div> <div class="marginTop">
<div> <input type="checkbox" id="timerEnabled" name="timerEnabled" value="timerEnabled" /><label id="timeLimitLabel" for="timerEnabled">Time limit measured in seconds</label>
<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> </div>
<div> <div id="timeLimitType">
<input type="checkbox" id="noMove" name="noMove" value="noMove" /> <input class="fullWidth" type="range" id="timeLimit" name="timeLimit" min="10" max="1800" step="10" value="300" />
<label for="noMove">No movement allowed</label> <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>
<div> <div class="marginTop">
<input type="checkbox" id="noZoom" name="noZoom" value="noZoom" /> <input type="checkbox" id="noMove" name="noMove" value="noMove" /><label for="noMove">No movement allowed</label>
<label for="noZoom">No zoom allowed</label>
</div> </div>
<div> <div class="marginTop">
<input type="checkbox" id="noPan" name="noPan" value="noPan" /> <input type="checkbox" id="noZoom" name="noZoom" value="noZoom" /><label for="noZoom">No zoom allowed</label>
<label for="noPan">No camera change allowed</label> </div>
<div class="marginTop">
<input type="checkbox" id="noPan" name="noPan" value="noPan" /><label for="noPan">No camera change allowed</label>
</div> </div>
<input type="hidden" name="mapId" id="challengeMapId" /> <input type="hidden" name="mapId" id="challengeMapId" />
</div> </div>