MAPG-231 cleanup input styles

public/static/css/mapguesser.css

@@ -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;
 }
 

public/static/css/maps.css

@@ -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) {

views/maps.php

@@ -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 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 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 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 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>
             <input type="hidden" name="mapId" id="challengeMapId" />
         </div>