change e testcase table UI and add CPP validator

resources/base.scss

@@ -180,7 +180,7 @@ header {
     }
 
     a {
-        color: #FFF;
+        color: #9c3706;
     }
 
     li {
@@ -206,7 +206,7 @@ header {
             }
 
             & > span {
-                color: #eee;
+                color: darkslateblue;
                 vertical-align: middle;
                 display: inline;
                 margin-top: 11px;
@@ -223,15 +223,15 @@ header {
 }
 
 #nav-container {
-    background: $widget_black;
+    background: linear-gradient(#c1e9fd, #63c8f9);
 
-    // opacity: 0.77
+    // opacity: 0.77;
     // filter: alpha(opacity=77)
     height: 100%;
 }
 
 #navigation {
-    position: fixed;
+    position: relative;
     top: 0;
     left: 0;
     right: 0;
@@ -276,7 +276,7 @@ nav {
                 display: inline-block;
                 text-decoration: none;
                 vertical-align: middle;
-                color: #3e452c;
+                color: #9c3706;
                 padding: 13px 7px;
                 height: 18px;
 
@@ -371,7 +371,7 @@ hr {
 }
 
 #content {
-    margin: 52px auto auto;
+    margin: 1em auto auto;
 
     // Header
     width: 90%;

resources/submission.scss

@@ -203,9 +203,7 @@ label[for="language"], label[for="status"] {
 }
 
 #test-cases {
-    .toggle .fa {
-        margin-left: -1.28571em;
-    }
+    font-size: 1.1em;
 
     .batch-cases {
         margin: 0;
@@ -215,28 +213,13 @@ label[for="language"], label[for="status"] {
         display: inline-block;
     }
 
-    .batch-cases .case-row td b {
-        font-weight: 500;
-    }
-
-    .case-row td:nth-child(3) {
-        padding-right: 0;
-        text-align: right;
-    }
-
-    .case-row td:nth-child(3) span {
-        float: right;
-    }
-
-    .case-row td:nth-child(4) {
-        text-align: right;
-    }
+    // .batch-cases .case-row td b {
+    //     font-weight: 500;
+    // }
 
     .case-info {
         margin: 0;
-        padding-left: 1em;
-        padding-bottom: 3px;
-        padding-top: 3px;
+        padding: 1em;
         border: 1px solid #2980b9;
         border-left-width: .5em;
         border-radius: 4px;
@@ -245,18 +228,50 @@ label[for="language"], label[for="status"] {
 
     .case-output {
         margin: 0;
-        margin-right: 1em;
+        margin-top: 1em;
+        box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
+        margin: 1rem 0;
+        padding: 1em 1em;
+        border-radius: .28571429rem;
+        border: 1px solid rgba(34,36,38,.15);
+        font-family: Consolas;
     }
 
-    table td {
-        margin: 0;
-        padding: 0 5px 0 0;
+    #testcases-table {
+        width: 100%;
+        border: 1px solid grey;
+        border-radius: 0.5em;
+        border-spacing: 0;
+
+        thead td:first-child {
+            border-top-left-radius: 0.5em;
+        }
+
+        thead td:last-child {
+            border-top-right-radius: 0.5em;
+        }
+
+        td {
+            padding: 0.6em 0.8em;
+            width: 18.75%;
+            border-bottom: 0.7px grey solid;
+        }
+
+        .case-row td:nth-child(2) {
+            width: 25%;
+        }
+
+        .case-row:hover {
+            cursor: pointer;
+        }
+
     }
 
     .toggle {
         font-weight: normal;
     }
 
+
     .case-feedback {
         vertical-align: top;
     }
@@ -266,6 +281,31 @@ label[for="language"], label[for="status"] {
     }
 }
 
+#overall-row:hover {
+    cursor: default !important;
+}
+
+.overall-result-AC {
+    background: linear-gradient(45deg, #a8ff78, #78ffd6);
+}
+
+.overall-result-WA {
+    background: linear-gradient(45deg, yellow, red);   
+}
+
+.overall-result-TLE {
+    background: linear-gradient(45deg, #D7DDE8, #757F99);
+}
+
+.overall-result-RTE,
+.overall-result-MLE {
+    background: linear-gradient(45deg,  #fceabb, #f8b500)
+}
+
+.col-title {
+    font-weight: bold;
+}
+
 .case-AC {
     color: green;
     font-weight: bold;