Restyle the main tab for mobile devices

For task: Integrate Bluetooth Joystick to mobile VR set #86

leobot_web_server/web_content/config.html

@@ -17,7 +17,7 @@
 <div id="wizard">
     <form-wizard ref="tabs" title="Joystick Configuration" subtitle="" @on-change="onChange" @on-complete="onComplete">
         <tab-content title="Select" icon="ti-user" :before-change="showButtonsConfig">
-            <h5>Select a joystick to configure or press any joystick button</h5>
+            <h5 class="select-heading">Select a joystick to configure or press any joystick button</h5>
             <div class="list-group gamepad-list">
                 <a v-for="(gamepad, index) in gamepads" v-on:click="gamepadClickHandler" href="#"
                    class="list-group-item list-group-item-action gamepad-name" :class="{'active': index===0&&gamepad.index!==null}">

leobot_web_server/web_content/css/config.css

@@ -1,9 +1,40 @@
+.vue-form-wizard .wizard-title {
+  font-size: 5vw;
+  margin-top: 3%;
+  margin-bottom: 3%;
+}
+
+.vue-form-wizard.md .wizard-navigation .wizard-progress-with-circle {
+  top: 6vw;
+  height: 0.5vw;
+}
+
+.vue-form-wizard.md .wizard-icon-circle {
+  width: 10vw;
+  height: 10vw;
+}
+
+.stepTitle {
+  font-size: 3.5vw;
+}
+
+.select-heading {
+  margin-top: 3%;
+  font-size: 3.8vw;
+}
+
 .gamepad-list {
+  margin-top: 5%;
   margin-bottom: 5%;
 }
 
+.gamepad-name {
+  font-size: 4vw;
+}
+
 .thumbstick-hint {
   display: flex;
+  margin-bottom: 5vw;
 }
 
 .exclamation-triangle {
@@ -22,12 +53,20 @@
 
 .thumbstick-hint-content {
   margin: auto 0;
+  font-size: 3vw;
 }
 
 .thumbstick-hint-content p {
   margin-bottom: 0;
 }
 
+.vue-form-wizard .wizard-btn {
+  width: 30vw;
+  height: 10vw;
+  font-size: 5vw;
+  border-radius: 1vw;
+}
+
 .actuometer {
   height: 10vw;
   margin: 1% 0;