update seatchart css

mapka/STUDENT/jquery.seat-charts.css

@@ -1,6 +1,8 @@
+/*
 div.seatCharts-container {
-	/*min-width: 700px;*/
+	min-width: 700px;
 }
+*/
 div.seatCharts-cell {
 
 	height: 16px;
@@ -29,11 +31,12 @@ div.seatCharts-seat:focus {
 .seatCharts-seat:focus {
 	outline: none;
 }
-*/
+
 
 div.seatCharts-space {
 	background-color: white;
 }
+*/
 div.seatCharts-row {
 	height: 50px;
 }
@@ -56,13 +59,19 @@ div.seatCharts-seat.available {
 
 div.seatCharts-seat.unavailable {
 	background-color: red;
-	cursor: not-allowed;
+	
 }
 
 ul.seatCharts-legendList {
 	list-style: none;
+	cursor: default;
 }
+
 li.seatCharts-legendItem {
 	margin-top: 10px;
 	line-height: 2;
+}
+
+li.seatCharts-legendItem > .seatCharts-cell {
+	cursor: default;
 }

mapka/STUDENT/seatchart.css

@@ -1,15 +1,19 @@
 body {
-    font-family: 'Lato', sans-serif;
+    background-color: #f8fafc;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
     font-style: #b71a4c;
 }
+
 a {
     color: #b71a4c;
 }
+
 .front-indicator {
     width: 90%;
     margin: 5px 32px 5px 32px;
-    background-color: #f6f6f6;  
+    background-color: #ececec;  
-    color: #adadad;
+    color: #a1a1a1;
     text-align: center;
     padding: 15px;
     border-radius: 5px;
@@ -19,60 +23,64 @@ a {
     margin: 0 auto;
     text-align: left;
 }
+
 .seat-stat-wrapper {
   display: inline;
 }
+
 #legend {
   width: 49%;
   margin: 0 auto;
   float: left;
-  font-family: monospace;
   font-size: 16px;
 }
+
 .booking-details {
   display: inline-block;
   text-align: right;
   font-size: 12px;
   width: 49%;
   margin: 0 auto;
-  
 }
+
 @media screen and (max-width: 550px) {
   #legend {
     width: 100%;
   }
+
   .booking-details {
     width: 100%;
     text-align: left;
   }
 }
+
 .booking-details h2 {
     margin: 25px 0 20px 0;
-    font-size: 35px;
+    font-size: 40px;
     color: #333333;
-    font-family: monospace;
+    letter-spacing: 0.1em;
-    letter-spacing: 0.15em;
     font-weight: bold;
 }
+
 .booking-details h3 {
     margin: 5px 5px 0 0;
-    font-size: 18px;
+    font-size: 22px;
     color: #333333;
-    font-family: monospace;
     font-display: bold;
 }
+
 div.seatCharts-cell {
     color: #182C4E;
     height: 90px;
     width: 90px;
     line-height: 90px;
-    
 }
+
 div.seatCharts-seat {
     color: #FFFFFF;
-    cursor: pointer; 
+    cursor: pointer;     
-       
 }
+
 div.seatCharts-row {
     height: 100px;
     width: 90%;
@@ -80,21 +88,25 @@ div.seatCharts-row {
     /*align-items: center;*/
     justify-content: center;
 }
-div.seatCharts-seat.available {
-    background-color: #a8b9bd;
 
+div.seatCharts-seat.available {
+    background-color: #649a24;
 }
+
 div.seatCharts-seat.available.student-class {
     background-color: #a8b9bd;
 }
+
 div.seatCharts-seat.focused {
-    background-color: #758184;
+    background-color: #1F5684;
 }
+
 div.seatCharts-seat.selected {
-    background-color: rgb(216, 196, 230);
+    background-color: #1b4d76;
 }
+
 div.seatCharts-seat.unavailable {
-    background-color: #caaa41;
+    background-color: #6F7881;
 }
 
 div.seatCharts-container {
@@ -102,8 +114,8 @@ div.seatCharts-container {
     padding: 20px 0;
     margin: 0 auto;
     text-align: center;
-
 }
+
 div.seatCharts-legend {
   display: inline-block;
 }
@@ -115,6 +127,7 @@ div.seatCharts-legend li {
 ul.seatCharts-legendList {
     padding-left: 0px;
 }
+
 span.seatCharts-legendDescription {
     margin-left: 5px;
     line-height: 100px;
@@ -123,30 +136,24 @@ span.seatCharts-legendDescription {
 .checkout-button {
     margin: 10px 0;
     font-size: 14px;
-    background-color: #5d7cd3;
+    color: #fff;
+    background-color: #3490dc;
+    border-color: #3490dc;
     border-radius: 3px;
     border: 0;
 	padding: 15px 40px;
 	display: inline-block;
     text-align: center;
-    box-shadow:0px 4px 0px #1e3572;
-    font-family: monospace;
 }
 
 .checkout-button:hover {
     box-shadow: 0 0 rgb(103, 88, 184);
-    background-color: #3654c9;
+    background-color: #227dc7;
-}
+    border-color: #2176bd;
-
-.checkout-button:active {
-    top: 4px;
-    box-shadow: 0 0 #b85a5b;
-    background-color: #3654ff;
 }
 
 #selected-seats {
     list-style-type: none;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri;
     font-size: 14px;
     margin-left: 0;
     padding-left: 0;

mapka/STUDENT/seatchart.html

@@ -9,6 +9,7 @@
     <script type="text/javascript" src="jquery.seat-charts.min.js"></script>
     <link rel="stylesheet" type="text/css" href="seatchart.css">
     <script type="text/javascript" src="seatchart.js"></script>
+    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
     <title>@CHECK</title>
   </head>