Fix button colors and spacing

public/js/client.js

@@ -124,7 +124,13 @@ $('#modal-close').click(function() {
 
 var swiper = new Swiper('.swiper-container', {
   });
-
+  
+swiper.on("transitionStart", function() {
+    move = true;
+})
+swiper.on("transitionEnd", function() {
+    move = false;
+})
 var swiperInner = new Swiper('.swiper-container-inner', {
   direction: 'vertical',
   });

public/style/main.css

@@ -12,13 +12,14 @@ mark {
 .draggable {
 
   /*Button Positioning and Size*/
-  width: 8%;
-  height: 25%;
-  margin: 1%;
-  margin-top: 3%;
-  border-radius: 2em;
-  padding: 4%;
-  font-size: 19px;
+  width: 10%;
+  height: 30%;
+  /* margin: 1%; */
+  /* margin-top: 3%; */
+  border-radius: 1.5em;
+  /* padding: 4%; */
+  font-size: 20px;
+  font-weight: 800;
   text-align: center;
   position: absolute;  
 /*  width: 6%;
@@ -34,10 +35,10 @@ mark {
 
   
   /*Button Coloring*/
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
-  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
-  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
-  background-image: -webkit-linear-gradient(93deg, #3f51b5 0%, #00bbd4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0F0FFF), color-stop(1, #0000A8));
+  background-image: -webkit-linear-gradient(top, #0F0FFF 0%, #0000A8 100%);
+  background-image: linear-gradient(to bottom, #0F0FFF 0%, #0000A8 100%);
+  background-image: -webkit-linear-gradient(93deg, #0000A8 0%, #0F0FFF 100%);
   color: #fff;
 
   /*Text display options*/
@@ -55,10 +56,10 @@ mark {
   -ms-transform: translate(0px, -40%); /* IE 9 */
   -webkit-transform: translate(0px, -40%); /* Safari */
   transform: translate(0px, -40%);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
-  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
-  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
-  background-image: -webkit-linear-gradient(273deg, #3f51b5 0%, #00bbd4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0F0FFF), color-stop(1, #0000A8));
+  background-image: -webkit-linear-gradient(top, #0F0FFF 0%, #0000A8 100%);
+  background-image: linear-gradient(to bottom, #0F0FFF 0%, #0000A8 100%);
+  background-image: -webkit-linear-gradient(273deg, #0000A8 0%, #0F0FFF 100%);
   color: #fff;
 }
 
@@ -68,7 +69,7 @@ mark {
 }
 
 .swiper-container{
-   height: 50%;
+   height: 40%;
    width: 100%;
    position: relative;
    overflow: hidden;
@@ -82,13 +83,13 @@ mark {
 }
 
 .swiper-wrapper{
-   height: 85%;
+   height: 80%;
    width: 500%;
    position: relative;
 }
 
 .static-bar{
-  height: 15%
+  height: 20%
 }
 
 .static-key{
@@ -96,12 +97,14 @@ mark {
   position: relative;
   height: 100%;
   text-align: center;
+  padding-top: 1%;
+  font-size: 20px;
   border: 1px solid #888;
 
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
-  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
-  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
-  background-image: -webkit-linear-gradient(93deg, #3f51b5 0%, #00bbd4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0F0FFF), color-stop(1, #0000A8));
+  background-image: -webkit-linear-gradient(top, #0F0FFF 0%, #0000A8 100%);
+  background-image: linear-gradient(to bottom, #0F0FFF 0%, #0F0FFF 100%);
+  background-image: -webkit-linear-gradient(93deg, #0000A8 0%, #0F0FFF 100%);
   color: #fff;
 
   
@@ -116,10 +119,10 @@ mark {
   -ms-transform: translate(0px, -40%); /* IE 9 */
   -webkit-transform: translate(0px, -40%); /* Safari */
   transform: translate(0px, -40%);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
-  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
-  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
-  background-image: -webkit-linear-gradient(273deg, #3f51b5 0%, #00bbd4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0F0FFF), color-stop(1, #0000A8));
+  background-image: -webkit-linear-gradient(top, #0F0FFF 0%, #0000A8 100%);
+  background-image: linear-gradient(to bottom, #0F0FFF 0%, #0000A8 100%);
+  background-image: -webkit-linear-gradient(273deg, #0000A8 0%, #0F0FFF 100%);
   color: #fff;
 }
 
@@ -167,7 +170,7 @@ mark {
 #touchpad{
     resize: vertical;
     overflow: auto;
-    height: 40%;
+    height: 50%;
     width: 100%;
     background-color: rgb(200, 250, 250);
     position: relative;
@@ -186,23 +189,28 @@ mark {
 
 #leftClick{
   width: 40%;
-  height: 35%;
+  height: 25%;
   background-color: rgb(150, 180, 200);
   float: left;
+  border: black solid;
+  border-right-width: 0;
 }
 
 #scrollWheel{
   width: 20%;
-  height: 35%;
+  height: 25%;
   background-color: rgb(100, 150, 150);
   float: left;
+  border: black solid;
 }
 
 #rightClick{
   width: 40%;
-  height: 35%;
+  height: 25%;
   background-color: rgb(150, 180, 200);
   float: left;
+  border: black solid;
+  border-left-width: 0; 
 }
 
 #mousepad{